console.js 3.7 KB

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