Make WordPress Core

Changeset 29019


Ignore:
Timestamp:
07/07/2014 10:40:33 PM (10 years ago)
Author:
azaozz
Message:

TinyMCE wpView:

  • Add loadingPlaceholder() that returns some html to use as placeholder while the view is loading. Includes a subtle CSS based loading animation.
  • Fix setContent(), it should empty the element before appending the new node.
  • Change getHtml() to always return a string.

Fixes #28761.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r28994 r29019  
    3737    _.extend( wp.mce.View.prototype, {
    3838        initialize: function() {},
    39         getHtml: function() {},
     39        getHtml: function() {
     40            return '';
     41        },
     42        loadingPlaceholder: function() {
     43            return '' +
     44                '<div class="loading-placeholder">' +
     45                    '<div class="dashicons dashicons-admin-media"></div>' +
     46                    '<div class="wpview-loading"><ins></ins></div>' +
     47                '</div>';
     48        },
    4049        render: function() {
     50            var html = this.getHtml() || this.loadingPlaceholder();
     51
    4152            this.setContent(
    4253                '<p class="wpview-selection-before">\u00a0</p>' +
     
    4758                    '</div>' +
    4859                    '<div class="wpview-content wpview-type-' + this.type + '">' +
    49                         this.getHtml() +
     60                        html +
    5061                    '</div>' +
    5162                    ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +
     
    8394                                element = editor.dom.replace( html, wrap );
    8495                            } else {
    85                                 element.appendChild( html );
     96                                $( element ).empty().append( html );
    8697                            }
    8798                        }
     
    360371                // Don't render errors while still fetching attachments
    361372                if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
    362                     return;
     373                    return '';
    363374                }
    364375
     
    606617                // Don't render errors while still fetching attachments
    607618                if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
    608                     return;
     619                    return '';
    609620                }
    610621
     
    814825                self.players.push( new MediaElementPlayer( element, self.mejsSettings ) );
    815826            } );
    816         },
    817         getHtml: function() {
    818             return '';
    819827        }
    820828    } );
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r29010 r29019  
    310310.wpview-wrap[data-mce-selected] .toolbar {
    311311    display: block;
     312}
     313
     314.wpview-wrap .loading-placeholder {
     315    border: 1px dashed #ccc;
     316    padding: 10px;
     317}
     318
     319.wpview-wrap[data-mce-selected] .loading-placeholder {
     320    border-color: transparent;
     321}
     322
     323/* A little "loading" animation, not showing in IE < 10 */
     324.wpview-wrap .wpview-loading {
     325    width: 60px;
     326    height: 5px;
     327    overflow: hidden;
     328    background-color: transparent;
     329    margin: 10px auto 0;
     330}
     331
     332.wpview-wrap .wpview-loading ins {
     333    background-color: #333;
     334    margin: 0 0 0 -60px;
     335    width: 60px;
     336    height: 5px;
     337    display: block;
     338    -webkit-animation: wpview-loading 1.3s infinite 1s linear;
     339    animation: wpview-loading 1.3s infinite 1s linear;
     340}
     341
     342@-webkit-keyframes wpview-loading {
     343    0% {
     344        margin-left: -60px;
     345    }
     346    100% {
     347        margin-left: 60px;
     348    }
     349}
     350
     351@keyframes wpview-loading {
     352    0% {
     353        margin-left: -60px;
     354    }
     355    100% {
     356        margin-left: 60px;
     357    }
    312358}
    313359
     
    361407}
    362408
    363 .wpview-error .dashicons {
     409.wpview-error .dashicons,
     410.loading-placeholder .dashicons {
    364411    display: block;
    365412    margin: 0 auto;
Note: See TracChangeset for help on using the changeset viewer.