Permalink
Browse files

Side-by-side preview browser compatibility fixes.

  • Loading branch information...
1 parent fa3ef8c commit 00f1ba4ab0ef45ba7687edcc55d96f32ba3f2e24 @adrexia adrexia committed with chillu Dec 4, 2012
View
@@ -41,6 +41,17 @@
.filter-buttons button.ss-gridfield-button-filter { background-position: -18px 4px !important; }
+/* Alternative styles for the switch in old IE */
+fieldset.switch-states { padding: 0; }
+fieldset.switch-states .switch { padding: 0 10px 0 0; }
+fieldset.switch-states .switch label { overflow: visible; text-overflow: visible; white-space: normal; padding: 0; }
+fieldset.switch-states .switch label.active { color: #fff; background-color: #2b9c32; }
+fieldset.switch-states .switch label span { display: inline; padding: 0 10px; overflow: visible; text-overflow: visible; white-space: wrap; }
+fieldset.switch-states .switch .slide-button { display: none; }
+
+/* Hide size controls in IE - they won't work as intended */
+.cms-content-controls .preview-size-selector { display: none; }
+
html { overflow: hidden; }
.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
@@ -102,5 +113,9 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; }
.ss-ui-button.ss-gridfield-button-filter { border: none !important; }
+.cms-content-controls .preview-mode-selector.dropdown { display: none !important; }
+
+.cms-content-controls .cms-preview-toggle-link { display: block !important; }
+
.cms-panel-content-collapsed { position: relative; width: 40px; }
.cms-panel-content-collapsed h2.cms-panel-header, .cms-panel-content-collapsed h3.cms-panel-header { zoom: 1; position: absolute; top: 10px; right: 10px; writing-mode: tb-rl; float: right; z-index: 5000; }
View
@@ -41,6 +41,17 @@
.filter-buttons button.ss-gridfield-button-filter { background-position: -18px 4px !important; }
+/* Alternative styles for the switch in old IE */
+fieldset.switch-states { padding: 0; }
+fieldset.switch-states .switch { padding: 0 10px 0 0; }
+fieldset.switch-states .switch label { overflow: visible; text-overflow: visible; white-space: normal; padding: 0; }
+fieldset.switch-states .switch label.active { color: #fff; background-color: #2b9c32; }
+fieldset.switch-states .switch label span { display: inline; padding: 0 10px; overflow: visible; text-overflow: visible; white-space: wrap; }
+fieldset.switch-states .switch .slide-button { display: none; }
+
+/* Hide size controls in IE - they won't work as intended */
+.cms-content-controls .preview-size-selector { display: none; }
+
.cms-panel .cms-panel-content-collapsed { position: relative; width: 40px; }
.cms-panel .cms-panel-content-collapsed h2.cms-panel-header, .cms-panel .cms-panel-content-collapsed h3.cms-panel-header { zoom: 1; position: absolute; top: 10px; right: 10px; writing-mode: tb-rl; float: right; z-index: 5000; }
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -54,7 +54,7 @@
* Change the preview mode.
* modeName can be: split, content, preview.
*/
- changeMode: function(modeName) {
+ changeMode: function(modeName) {
var container = $('.cms-container');
if (modeName == 'split') {
@@ -90,7 +90,7 @@
* API
* Update the visual appearance to match the internal preview state.
*/
- redraw: function() {
+ redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
@@ -134,7 +134,14 @@
enablePreview: function() {
if (!this.getIsPreviewEnabled()) {
this.setIsPreviewEnabled(true);
- this.changeMode('split');
+
+ // Initialise mode.
+ if ($.browser.msie && $.browser.version.slice(0,3)<=7) {
+ // We do not support the split mode in IE < 8.
+ this.changeMode('content');
+ } else {
+ this.changeMode('split');
+ }
}
return this;
},
@@ -182,7 +189,7 @@
},
/**
- * Update the preview according to the CMS section capabilities.
+ * Update the preview according to browser and CMS section capabilities.
*/
_initialiseFromContent: function() {
if (!$('.cms-previewable').length) {
@@ -384,7 +391,11 @@
/**
* Reacts to the user changing the state of the preview.
*/
- onclick: function(e) {
+ onclick: function(e) {
+ //Add and remove classes to make switch work ok in old IE
+ this.parent().find('.active').removeClass('active');
+ this.next('label').addClass('active');
+
var targetStateName = $(this).attr('data-name');
// Reload preview with the selected state.
$('.cms-preview').changeState(targetStateName);
@@ -405,20 +416,38 @@
.trigger('liszt:updated')
._addIcon();
}
- });
+ });
$('.preview-mode-selector select').entwine({
/**
* Reacts to the user changing the preview mode.
*/
- onchange: function(e) {
+ onchange: function(e) {
e.preventDefault();
var targetStateName = $(this).val();
$('.cms-preview').changeMode(targetStateName);
}
});
+
+ $('.preview-mode-selector .chzn-results li').entwine({
+ /**
+ * IE8 doesn't support programatic access to onchange event
+ * so react on click
+ */
+ onclick:function(e){
+ if ($.browser.msie) {
+ e.preventDefault();
+ var index = this.index();
+ var targetStateName = this.closest('.preview-mode-selector').find('select option:eq('+index+')').val();
+
+ //var targetStateName = $(this).val();
+ $('.cms-preview').changeMode(targetStateName);
+ }
+ }
+ });
+
/**
* Adjust the visibility of the preview-mode selector in the CMS part (hidden if preview is visible).
*/
@@ -459,7 +488,7 @@
/**
* Change the appearance of the size selector.
*/
- changeVisibleSize: function(size) {
+ changeVisibleSize: function(size) {
this.find('select')
.val(size)
.trigger('liszt:updated')
@@ -479,6 +508,7 @@
}
});
+
/**
* "Chosen" plumbing.
* -------------------------------------------------------------------
@@ -494,7 +524,7 @@
},
'onliszt:hiding_dropdown': function() {
this.siblings().find('.chzn-drop').removeClass('open')._removeRightAlign();
- },
+ },
_addIcon: function(){
var selected = this.find(':selected');
var iconClass = selected.attr('data-icon');
@@ -110,7 +110,7 @@ jQuery.noConflict();
LayoutOptions: {
minContentWidth: 820,
minPreviewWidth: 400,
- mode: 'split'
+ mode: 'content'
},
/**
View
@@ -644,14 +644,15 @@ input.radio {
* <fieldset class="switch-states size_2">
* <div class="switch">
* <input id="Draft" class="first" name="view" type="radio" checked>
-* <label for="Draft"><span>Draft</span></label>
+* <label for="Draft">Draft</label>
* <input id="Published" class="last" name="view" type="radio">
-* <label for="Published"><span>Published</span></label>
+* <label for="Published">Published</label>
* <span class="slide-button"></span>
* </div>
* </fieldset>
****************************************************************/
-fieldset.switch-states{
+fieldset.switch-states{
+ padding:0 20px 0 0;
.switch{
@include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1));
@include border-radius(3px);
@@ -660,34 +661,45 @@ fieldset.switch-states{
display: block;
height: 25px;
margin-top:3px;
- padding: 0;
+ padding:0 10px;
position: relative;
width:100%;
z-index:5;
+
label{
+ @include hide-text-overflow;
@include text-shadow(0 1px 0 rgba(255,255,255,0.5));
- color:lighten($color-text-dark,5%);
+ color:lighten($color-text-dark,40%);
color:rgba($color-text-dark,0.5);
+ cursor: pointer;
float:left;
font-weight:bold;
height: 100%;
- line-height: 25px;
- padding-left:15px;
+ line-height: 25px;
position:relative;
- text-align:center;
- vertical-align: middle;
z-index:2;
+ /* Make text unselectable in browsers that support that */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
&:hover{
- color:$color-text-dark;
- //color:#2b9c32;
+ color:lighten($color-text-dark, 30%);
+ color:rgba($color-text-dark,0.7);
}
span{
@include box-sizing('border-box');
- padding:10px;
- }
+ @include hide-text-overflow;
+ display:inline-block;
+ padding:0 10px;
+ }
}
input {
opacity: 0;
+ filter: alpha(opacity = 0);
+ visibility:none;
position: absolute;
&:checked + label {
@include transition(all 0.3s ease-out 0s);
@@ -704,7 +716,7 @@ fieldset.switch-states{
@include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2));
@include text-shadow(0 1px 0 rgba(255,255,255,0.5));
@include transition(all 0.3s ease-out 0s);
- background-color: $color-menu-button;
+ background-color: #2b9c32;
display:block;
height: 100%;
left:0;
View
@@ -139,3 +139,37 @@
}
}
}
+
+/* Alternative styles for the switch in old IE */
+fieldset.switch-states{
+ padding:0;
+ .switch{
+ padding:0 10px 0 0;
+ label{
+ overflow:visible;
+ text-overflow:visible;
+ white-space:normal;
+ padding:0;
+ &.active{
+ color:#fff;
+ background-color: #2b9c32;
+ }
+ span{
+ display:inline;
+ padding:0 10px;
+ overflow:visible;
+ text-overflow:visible;
+ white-space:wrap;
+ }
+ }
+ .slide-button{
+ display:none;
+ }
+ }
+}
+/* Hide size controls in IE - they won't work as intended */
+.cms-content-controls{
+ .preview-size-selector{
+ display:none;
+ }
+}
View
@@ -2,6 +2,10 @@
/* -------------------------- */
.cms-content-controls{
+ .cms-preview-toggle-link{
+ display:none;
+ }
+
/* Styling the background, controls sit on */
&.cms-preview-controls {
z-index: 1;
View
@@ -214,11 +214,20 @@ table.ss-gridfield-table {
}
}
-
.ss-ui-button{
&.ss-gridfield-button-filter{
- border:none !important;
+ border:none !important;
}
}
+.cms-content-controls{
+ .preview-mode-selector.dropdown{
+ display:none !important;
+ }
+}
+.cms-content-controls{
+ .cms-preview-toggle-link{
+ display:block !important;
+ }
+}
@include IEVerticalPanelText;
@@ -25,7 +25,7 @@
<div class="switch">
<% loop Items %>
<input id="$Title" data-name="$Name" class="state-name $FirstLast" data-link="$Link" name="view" type="radio" <% if First %>checked<% end_if %>>
- <label for="$Title"><span>$Title</span></label>
+ <label for="$Title"<% if First %> class="active"<% end_if %>><span>$Title</span></label>
<% end_loop %>
<span class="slide-button"></span>
</div>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 00f1ba4

Please sign in to comment.