Changeset 28062

Timestamp:

04/09/2014 12:57:46 AM (13 years ago)

Author:

azaozz

Message:

Fix TinyMCE Views in IE8 and 7:

• Add fallback background images for dashicons.
• Fix hiding the clipboard while still allowing the contents to be selected.
• Work around lack of border-box in gallery styles.

(Includes precommit cleanup for theme.js)
Props gcorne, fixes 27546

Location:

trunk/src

Files:

• wp-admin/js/theme.js (modified) (2 diffs)
• wp-includes/js/tinymce/plugins/wpview/plugin.js (modified) (2 diffs)
• wp-includes/js/tinymce/skins/wordpress/images/dashicon-edit.png (added)
• wp-includes/js/tinymce/skins/wordpress/images/dashicon-no-alt.png (added)
• wp-includes/js/tinymce/skins/wordpress/wp-content.css (modified) (7 diffs)

trunk/src/wp-admin/js/theme.js

@@ -552 +552 @@
 
                 this.listenTo( preview, 'preview:close', function() {
-                        self.current = self.model
+                        self.current = self.model;
                 });
         },
@@ -756 +756 @@
 
         render: function() {
-                var data = this.model.toJSON(),
-                        self = this;
+                var data = this.model.toJSON();
+
                 this.$el.html( this.html( data ) );
 

trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -266 +266 @@
 
                 editor.dom.bind( editor.getBody(), 'mousedown mouseup click', function( event ) {
-                        var view = getParentView( event.target );
+                        var view = getParentView( event.target ),
+                                deselectEventType;
 
                         // Contain clicks inside the view wrapper
                         if ( view ) {
                                 event.stopPropagation();
+
+                                // Hack to try and keep the block resize handles from appearing. They will show on mousedown and then be removed on mouseup.
+                                if ( tinymce.Env.ie <= 10 ) {
+                                        deselect();
+                                }
+
+                                select( view );
 
                                 if ( event.type === 'click' && ! event.metaKey && ! event.ctrlKey ) {
@@ -279 +287 @@
                                         }
                                 }
-                                select( view );
                                 // Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.
                                 // Unfortunately, it also inhibits the dragging of views to a new location.
                                 return false;
                         } else {
-                                if ( event.type === 'mousedown' ) {
+
+                                // Fix issue with deselecting a view in IE8. Without this hack, clicking content above the view wouldn't actually deselect it
+                                // and the caret wouldn't be placed at the mouse location
+                                if( tinymce.Env.ie <= 8 ) {
+                                        deselectEventType = 'mouseup';
+                                } else {
+                                        deselectEventType = 'mousedown';
+                                }
+
+                                if ( event.type === deselectEventType ) {
                                         deselect();
                                 }

trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -199 +199 @@
         left: 0;
         z-index: -1;
+        clip: rect(1px 1px 1px 1px); /* IE7 */
         clip: rect(1px, 1px, 1px, 1px);
         overflow: hidden;
         outline: 0;
-        width: 100%;
+        padding: 0;
+        border: 0;
+        width: 1px;
+        height: 1px;
 }
 
@@ -215 +219 @@
 
 .wpview-wrap.selected {
-        background-color: #f2f8ff; /* fallback to old blue */
         background-color: rgba(0,0,0,0.1);
+        border-color: rgba(0,0,0,0.3);
+}
+
+.ie8 .wpview-wrap.selected,
+.ie7 .wpview-wrap.selected {
+        background-color: #e5e5e5;
         border-color: #777;
-        border-color: rgba(0,0,0,0.3);
 }
 
@@ -264 +272 @@
 }
 
+.ie8 .wpview-wrap .toolbar div,
+.ie7 .wpview-wrap .toolbar div,
+.ie8 #wp-image-toolbar div,
+.ie7 #wp-image-toolbar div {
+        display: inline;
+        padding: 0;
+}
+
+.ie8 .dashicons-edit,
+.ie7 .dashicons-edit {
+        background-image: url(images/dashicon-edit.png);
+}
+
+.ie8 .dashicons-no-alt,
+.ie7 .dashicons-no-alt {
+        background-image: url(images/dashicon-no-alt.png);
+}
+
+
 .wpview-wrap .toolbar div:hover,
 #wp-image-toolbar div:hover {
@@ -319 +346 @@
 }
 
+.ie7 .gallery,
+.ie8 .gallery {
+        margin: auto;
+}
+
 .gallery-error {
         border: 1px solid #dedede;
@@ -353 +385 @@
 }
 
+.ie7 .gallery .gallery-item,
+.ie8 .gallery .gallery-item {
+        padding: 6px 0;
+}
+
 .gallery .gallery-caption,
 .gallery .gallery-icon {
@@ -375 +412 @@
 }
 
+.ie8 .gallery-columns-3 .gallery-item,
+.ie7 .gallery-columns-3 .gallery-item {
+        width: 33%;
+}
+
 .gallery-columns-4 .gallery-item {
         width: 25%;
@@ -384 +426 @@
 
 .gallery-columns-6 .gallery-item {
-        width: 16.667%;
+        width: 16.665%;
 }