Changeset 35418

Timestamp:

10/28/2015 06:18:42 PM (9 years ago)

Author:

wonderboymusic

Message:

Thickbox: spinner should disappear when loading is done.

Props niklasbr, afercia.
Fixes #33311.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-includes/js/thickbox/thickbox.css (modified) (2 diffs)
• wp-includes/js/thickbox/thickbox.js (modified) (4 diffs)

trunk/src/wp-admin/css/common.css

@@ -2695 +2695 @@
 body.update-core-php #TB_window,
 body.index-php #TB_window {
-    background: #fcfcfc url( ../images/spinner.gif ) no-repeat center;
+    background: #fcfcfc;
+}
+
+/* IE 8 needs a change in the pseudo element content */
+.ie8 body.plugin-install-php #TB_window:before,
+.ie8 body.import-php #TB_window:before,
+.ie8 body.plugins-php #TB_window:before,
+.ie8 body.update-core-php #TB_window:before,
+.ie8 body.index-php #TB_window:before {
+    content: " ";
+    background: none;
+}
+
+body.plugin-install-php #TB_window.thickbox-loading:before,
+body.import-php #TB_window.thickbox-loading:before,
+body.plugins-php #TB_window.thickbox-loading:before,
+body.update-core-php #TB_window.thickbox-loading:before,
+body.index-php #TB_window.thickbox-loading:before {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: -1;
+    margin: -10px 0 0 -10px;
+    background: #fcfcfc url(../images/spinner.gif) no-repeat center;
+    -webkit-background-size: 20px 20px;
+    background-size: 20px 20px;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
 }
 
@@ -2702 +2733 @@
     (min-resolution: 120dpi) {
 
-    body.plugin-install-php #TB_window,
-    body.import-php #TB_window,
-    body.plugins-php #TB_window,
-    body.update-core-php #TB_window,
-    body.index-php #TB_window {
-        background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center;
-        -webkit-background-size: 20px 20px;
-        background-size: 20px 20px;
+    body.plugin-install-php #TB_window.thickbox-loading:before,
+    body.import-php #TB_window.thickbox-loading:before,
+    body.plugins-php #TB_window.thickbox-loading:before,
+    body.update-core-php #TB_window.thickbox-loading:before,
+    body.index-php #TB_window.thickbox-loading:before {
+        background: #fcfcfc url(../images/spinner-2x.gif) no-repeat center;
     }
 }

trunk/src/wp-includes/js/thickbox/thickbox.css

@@ -13 +13 @@
 #TB_window {
     position: fixed;
-    background: #fff;
+    background-color: #fff;
     z-index: 100050; /* Above DFW. */
     visibility: hidden;
@@ -56 +56 @@
     font-weight: 600;
     line-height: 29px;
-    overflow: hidden; 
+    overflow: hidden;
     padding: 0 29px 0 10px;
     text-overflow: ellipsis;

trunk/src/wp-includes/js/thickbox/thickbox.js

@@ -19 +19 @@
 });
 
-//add thickbox to href & area elements that have a class of .thickbox
+/*
+ * Add thickbox to href & area elements that have a class of .thickbox.
+ * Remove the loading indicator when content in an iframe has loaded.
+ */
 function tb_init(domChunk){
-    jQuery('body').on('click', domChunk, tb_click);
+    jQuery( 'body' )
+        .on( 'click', domChunk, tb_click )
+        .on( 'thickbox:iframe:loaded', function() {
+            jQuery( '#TB_window' ).removeClass( 'thickbox-loading' );
+        });
 }
 
@@ -40 +47 @@
             jQuery("html").css("overflow","hidden");
             if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
-                jQuery("body").append("<iframe id='TB_HideSelect'>"+thickboxL10n.noiframes+"</iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
+                jQuery("body").append("<iframe id='TB_HideSelect'>"+thickboxL10n.noiframes+"</iframe><div id='TB_overlay'></div><div id='TB_window' class='thickbox-loading'></div>");
                 jQuery("#TB_overlay").click(tb_remove);
             }
         }else{//all others
             if(document.getElementById("TB_overlay") === null){
-                jQuery("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
+                jQuery("body").append("<div id='TB_overlay'></div><div id='TB_window' class='thickbox-loading'></div>");
                 jQuery("#TB_overlay").click(tb_remove);
                 jQuery( 'body' ).addClass( 'modal-open' );
@@ -196 +203 @@
                     jQuery("#TB_iframeContent").remove();
                     if(params['modal'] != "true"){//iframe no modal
-                        jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
+                        jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
                     }else{//iframe modal
                     jQuery("#TB_overlay").unbind();
-                        jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
+                        jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
                     }
             }else{// not an iframe, ajax
@@ -261 +268 @@
 function tb_showIframe(){
     jQuery("#TB_load").remove();
-    jQuery("#TB_window").css({'visibility':'visible'});
+    jQuery("#TB_window").css({'visibility':'visible'}).trigger( 'thickbox:iframe:loaded' );
 }