home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-includes / js / tinymce / plugins / wpview / plugin.js next >
Encoding:
Text File  |  2017-10-23  |  5.3 KB  |  203 lines
  1. /**
  2.  * WordPress View plugin.
  3.  */
  4. ( function( tinymce, wp ) {
  5.     tinymce.PluginManager.add( 'wpview', function( editor ) {
  6.         function noop () {}
  7.  
  8.         if ( ! wp || ! wp.mce || ! wp.mce.views ) {
  9.             return {
  10.                 getView: noop
  11.             };
  12.         }
  13.  
  14.         // Check if a node is a view or not.
  15.         function isView( node ) {
  16.             return editor.dom.hasClass( node, 'wpview' );
  17.         }
  18.  
  19.         // Replace view tags with their text.
  20.         function resetViews( content ) {
  21.             function callback( match, $1 ) {
  22.                 return '<p>' + window.decodeURIComponent( $1 ) + '</p>';
  23.             }
  24.  
  25.             if ( ! content ) {
  26.                 return content;
  27.             }
  28.  
  29.             return content
  30.                 .replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g, callback )
  31.                 .replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback );
  32.         }
  33.  
  34.         editor.on( 'init', function() {
  35.             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  36.  
  37.             if ( MutationObserver ) {
  38.                 new MutationObserver( function() {
  39.                     editor.fire( 'wp-body-class-change' );
  40.                 } )
  41.                 .observe( editor.getBody(), {
  42.                     attributes: true,
  43.                     attributeFilter: ['class']
  44.                 } );
  45.             }
  46.  
  47.             // Pass on body class name changes from the editor to the wpView iframes.
  48.             editor.on( 'wp-body-class-change', function() {
  49.                 var className = editor.getBody().className;
  50.  
  51.                 editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
  52.                     // Make sure it is a local iframe
  53.                     // jshint scripturl: true
  54.                     if ( ! iframe.src || iframe.src === 'javascript:""' ) {
  55.                         try {
  56.                             iframe.contentWindow.document.body.className = className;
  57.                         } catch( er ) {}
  58.                     }
  59.                 });
  60.             } );
  61.         });
  62.  
  63.         // Scan new content for matching view patterns and replace them with markers.
  64.         editor.on( 'beforesetcontent', function( event ) {
  65.             var node;
  66.  
  67.             if ( ! event.selection ) {
  68.                 wp.mce.views.unbind();
  69.             }
  70.  
  71.             if ( ! event.content ) {
  72.                 return;
  73.             }
  74.  
  75.             if ( ! event.load ) {
  76.                 node = editor.selection.getNode();
  77.  
  78.                 if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {
  79.                     // When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
  80.                     node = editor.dom.getParent( node, 'p' );
  81.  
  82.                     if ( node && /^[\s\uFEFF\u00A0]*$/.test( editor.$( node ).text() || '' ) ) {
  83.                         // Make sure there are no empty inline elements in the <p>
  84.                         node.innerHTML = '';
  85.                     } else {
  86.                         return;
  87.                     }
  88.                 }
  89.             }
  90.  
  91.             event.content = wp.mce.views.setMarkers( event.content, editor );
  92.         } );
  93.  
  94.         // Replace any new markers nodes with views.
  95.         editor.on( 'setcontent', function() {
  96.             wp.mce.views.render();
  97.         } );
  98.  
  99.         // Empty view nodes for easier processing.
  100.         editor.on( 'preprocess hide', function( event ) {
  101.             editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) {
  102.                 node.innerHTML = '.';
  103.             } );
  104.         }, true );
  105.  
  106.         // Replace views with their text.
  107.         editor.on( 'postprocess', function( event ) {
  108.             event.content = resetViews( event.content );
  109.         } );
  110.  
  111.         // Replace views with their text inside undo levels.
  112.         // This also prevents that new levels are added when there are changes inside the views.
  113.         editor.on( 'beforeaddundo', function( event ) {
  114.             event.level.content = resetViews( event.level.content );
  115.         } );
  116.  
  117.         // Make sure views are copied as their text.
  118.         editor.on( 'drop objectselected', function( event ) {
  119.             if ( isView( event.targetClone ) ) {
  120.                 event.targetClone = editor.getDoc().createTextNode(
  121.                     window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
  122.                 );
  123.             }
  124.         } );
  125.  
  126.         // Clean up URLs for easier processing.
  127.         editor.on( 'pastepreprocess', function( event ) {
  128.             var content = event.content;
  129.  
  130.             if ( content ) {
  131.                 content = tinymce.trim( content.replace( /<[^>]+>/g, '' ) );
  132.  
  133.                 if ( /^https?:\/\/\S+$/i.test( content ) ) {
  134.                     event.content = content;
  135.                 }
  136.             }
  137.         } );
  138.  
  139.         // Show the view type in the element path.
  140.         editor.on( 'resolvename', function( event ) {
  141.             if ( isView( event.target ) ) {
  142.                 event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'object';
  143.             }
  144.         } );
  145.  
  146.         // See `media` plugin.
  147.         editor.on( 'click keyup', function() {
  148.             var node = editor.selection.getNode();
  149.  
  150.             if ( isView( node ) ) {
  151.                 if ( editor.dom.getAttrib( node, 'data-mce-selected' ) ) {
  152.                     node.setAttribute( 'data-mce-selected', '2' );
  153.                 }
  154.             }
  155.         } );
  156.  
  157.         editor.addButton( 'wp_view_edit', {
  158.             tooltip: 'Edit ', // trailing space is needed, used for context
  159.             icon: 'dashicon dashicons-edit',
  160.             onclick: function() {
  161.                 var node = editor.selection.getNode();
  162.  
  163.                 if ( isView( node ) ) {
  164.                     wp.mce.views.edit( editor, node );
  165.                 }
  166.             }
  167.         } );
  168.  
  169.         editor.addButton( 'wp_view_remove', {
  170.             tooltip: 'Remove',
  171.             icon: 'dashicon dashicons-no',
  172.             onclick: function() {
  173.                 editor.fire( 'cut' );
  174.             }
  175.         } );
  176.  
  177.         editor.once( 'preinit', function() {
  178.             var toolbar;
  179.  
  180.             if ( editor.wp && editor.wp._createToolbar ) {
  181.                 toolbar = editor.wp._createToolbar( [
  182.                     'wp_view_edit',
  183.                     'wp_view_remove'
  184.                 ] );
  185.  
  186.                 editor.on( 'wptoolbar', function( event ) {
  187.                     if ( ! event.collapsed && isView( event.element ) ) {
  188.                         event.toolbar = toolbar;
  189.                     }
  190.                 } );
  191.             }
  192.         } );
  193.  
  194.         editor.wp = editor.wp || {};
  195.         editor.wp.getView = noop;
  196.         editor.wp.setViewCursor = noop;
  197.  
  198.         return {
  199.             getView: noop
  200.         };
  201.     } );
  202. } )( window.tinymce, window.wp );
  203.