sources/plugins/widget/dev/console.js

   1 /**
   2  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 /* global CKCONSOLE */
   7
   8 'use strict';
   9
  10 ( function() {
  11
  12         CKCONSOLE.add( 'widget', {
  13                 panels: [
  14                         {
  15                                 type: 'box',
  16                                 content: '<ul class="ckconsole_list ckconsole_value" data-value="instances"></ul>',
  17
  18                                 refresh: function( editor ) {
  19                                         var instances = obj2Array( editor.widgets.instances );
  20
  21                                         return {
  22                                                 header: 'Instances (' + instances.length + ')',
  23                                                 instances: generateInstancesList( instances )
  24                                         };
  25                                 },
  26
  27                                 refreshOn: function( editor, refresh ) {
  28                                         editor.widgets.on( 'instanceCreated', function( evt ) {
  29                                                 refresh();
  30
  31                                                 evt.data.on( 'data', refresh );
  32                                         } );
  33
  34                                         editor.widgets.on( 'instanceDestroyed', refresh );
  35                                 }
  36                         },
  37
  38                         {
  39                                 type: 'box',
  40                                 content:
  41                                         '<ul class="ckconsole_list">' +
  42                                                 '<li>focused: <span class="ckconsole_value" data-value="focused"></span></li>' +
  43                                                 '<li>selected: <span class="ckconsole_value" data-value="selected"></span></li>' +
  44                                         '</ul>',
  45
  46                                 refresh: function( editor ) {
  47                                         var focused = editor.widgets.focused,
  48                                                 selected = editor.widgets.selected,
  49                                                 selectedIds = [];
  50
  51                                         for ( var i = 0; i < selected.length; ++i )
  52                                                 selectedIds.push( selected[ i ].id );
  53
  54                                         return {
  55                                                 header: 'Focus &amp; selection',
  56                                                 focused: focused ? 'id: ' + focused.id : '-',
  57                                                 selected: selectedIds.length ? 'id: ' + selectedIds.join( ', id: ' ) : '-'
  58                                         };
  59                                 },
  60
  61                                 refreshOn: function( editor, refresh ) {
  62                                         editor.on( 'selectionCheck', refresh, null, null, 999 );
  63                                 }
  64                         },
  65
  66                         {
  67                                 type: 'log',
  68
  69                                 on: function( editor, log, logFn ) {
  70                                         // Add all listeners with high priorities to log
  71                                         // messages in the correct order when one event depends on another.
  72                                         // E.g. selectionChange triggers widget selection - if this listener
  73                                         // for selectionChange will be executed later than that one, then order
  74                                         // will be incorrect.
  75
  76                                         editor.on( 'selectionChange', function( evt ) {
  77                                                 var msg = 'selection change',
  78                                                         sel = evt.data.selection,
  79                                                         el = sel.getSelectedElement(),
  80                                                         widget;
  81
  82                                                 if ( el && ( widget = editor.widgets.getByElement( el, true ) ) )
  83                                                         msg += ' (id: ' + widget.id + ')';
  84
  85                                                 log( msg );
  86                                         }, null, null, 1 );
  87
  88                                         editor.widgets.on( 'instanceDestroyed', function( evt ) {
  89                                                 log( 'instance destroyed (id: ' + evt.data.id + ')' );
  90                                         }, null, null, 1 );
  91
  92                                         editor.widgets.on( 'instanceCreated', function( evt ) {
  93                                                 log( 'instance created (id: ' + evt.data.id + ')' );
  94                                         }, null, null, 1 );
  95
  96                                         editor.widgets.on( 'widgetFocused', function( evt ) {
  97                                                 log( 'widget focused (id: ' + evt.data.widget.id + ')' );
  98                                         }, null, null, 1 );
  99
 100                                         editor.widgets.on( 'widgetBlurred', function( evt ) {
 101                                                 log( 'widget blurred (id: ' + evt.data.widget.id + ')' );
 102                                         }, null, null, 1 );
 103
 104                                         editor.widgets.on( 'checkWidgets', logFn( 'checking widgets' ), null, null, 1 );
 105                                         editor.widgets.on( 'checkSelection', logFn( 'checking selection' ), null, null, 1 );
 106                                 }
 107                         }
 108                 ]
 109         } );
 110
 111         function generateInstancesList( instances ) {
 112                 var html = '',
 113                         instance;
 114
 115                 for ( var i = 0; i < instances.length; ++i ) {
 116                         instance = instances[ i ];
 117                         html += itemTpl.output( { id: instance.id, name: instance.name, data: JSON.stringify( instance.data ) } );
 118                 }
 119                 return html;
 120         }
 121
 122         function obj2Array( obj ) {
 123                 var arr = [];
 124                 for ( var id in obj )
 125                         arr.push( obj[ id ] );
 126
 127                 return arr;
 128         }
 129
 130         var itemTpl = new CKEDITOR.template( '<li>id: <code>{id}</code>, name: <code>{name}</code>, data: <code>{data}</code></li>' );
 131 } )();