plugin.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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. ( function() {
  6. 'use strict';
  7. CKEDITOR.plugins.add( 'stylescombo', {
  8. requires: 'richcombo',
  9. // jscs:disable maximumLineLength
  10. lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  11. // jscs:enable maximumLineLength
  12. init: function( editor ) {
  13. var config = editor.config,
  14. lang = editor.lang.stylescombo,
  15. styles = {},
  16. stylesList = [],
  17. combo,
  18. allowedContent = [];
  19. editor.on( 'stylesSet', function( evt ) {
  20. var stylesDefinitions = evt.data.styles;
  21. if ( !stylesDefinitions )
  22. return;
  23. var style, styleName, styleType;
  24. // Put all styles into an Array.
  25. for ( var i = 0, count = stylesDefinitions.length; i < count; i++ ) {
  26. var styleDefinition = stylesDefinitions[ i ];
  27. if ( editor.blockless && ( styleDefinition.element in CKEDITOR.dtd.$block ) )
  28. continue;
  29. styleName = styleDefinition.name;
  30. style = new CKEDITOR.style( styleDefinition );
  31. if ( !editor.filter.customConfig || editor.filter.check( style ) ) {
  32. style._name = styleName;
  33. style._.enterMode = config.enterMode;
  34. // Get the type (which will be used to assign style to one of 3 groups) from assignedTo if it's defined.
  35. style._.type = styleType = style.assignedTo || style.type;
  36. // Weight is used to sort styles (#9029).
  37. style._.weight = i + ( styleType == CKEDITOR.STYLE_OBJECT ? 1 : styleType == CKEDITOR.STYLE_BLOCK ? 2 : 3 ) * 1000;
  38. styles[ styleName ] = style;
  39. stylesList.push( style );
  40. allowedContent.push( style );
  41. }
  42. }
  43. // Sorts the Array, so the styles get grouped by type in proper order (#9029).
  44. stylesList.sort( function( styleA, styleB ) {
  45. return styleA._.weight - styleB._.weight;
  46. } );
  47. } );
  48. editor.ui.addRichCombo( 'Styles', {
  49. label: lang.label,
  50. title: lang.panelTitle,
  51. toolbar: 'styles,10',
  52. allowedContent: allowedContent,
  53. panel: {
  54. css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
  55. multiSelect: true,
  56. attributes: { 'aria-label': lang.panelTitle }
  57. },
  58. init: function() {
  59. var style, styleName, lastType, type, i, count;
  60. // Loop over the Array, adding all items to the
  61. // combo.
  62. for ( i = 0, count = stylesList.length; i < count; i++ ) {
  63. style = stylesList[ i ];
  64. styleName = style._name;
  65. type = style._.type;
  66. if ( type != lastType ) {
  67. this.startGroup( lang[ 'panelTitle' + String( type ) ] );
  68. lastType = type;
  69. }
  70. this.add( styleName, style.type == CKEDITOR.STYLE_OBJECT ? styleName : style.buildPreview(), styleName );
  71. }
  72. this.commit();
  73. },
  74. onClick: function( value ) {
  75. editor.focus();
  76. editor.fire( 'saveSnapshot' );
  77. var style = styles[ value ],
  78. elementPath = editor.elementPath();
  79. editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );
  80. editor.fire( 'saveSnapshot' );
  81. },
  82. onRender: function() {
  83. editor.on( 'selectionChange', function( ev ) {
  84. var currentValue = this.getValue(),
  85. elementPath = ev.data.path,
  86. elements = elementPath.elements;
  87. // For each element into the elements path.
  88. for ( var i = 0, count = elements.length, element; i < count; i++ ) {
  89. element = elements[ i ];
  90. // Check if the element is removable by any of
  91. // the styles.
  92. for ( var value in styles ) {
  93. if ( styles[ value ].checkElementRemovable( element, true, editor ) ) {
  94. if ( value != currentValue )
  95. this.setValue( value );
  96. return;
  97. }
  98. }
  99. }
  100. // If no styles match, just empty it.
  101. this.setValue( '' );
  102. }, this );
  103. },
  104. onOpen: function() {
  105. var selection = editor.getSelection(),
  106. element = selection.getSelectedElement(),
  107. elementPath = editor.elementPath( element ),
  108. counter = [ 0, 0, 0, 0 ];
  109. this.showAll();
  110. this.unmarkAll();
  111. for ( var name in styles ) {
  112. var style = styles[ name ],
  113. type = style._.type;
  114. if ( style.checkApplicable( elementPath, editor, editor.activeFilter ) )
  115. counter[ type ]++;
  116. else
  117. this.hideItem( name );
  118. if ( style.checkActive( elementPath, editor ) )
  119. this.mark( name );
  120. }
  121. if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
  122. this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
  123. /*if ( !counter[ CKEDITOR.STYLE_INLINE ] )
  124. this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
  125. */
  126. if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
  127. this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
  128. },
  129. refresh: function() {
  130. var elementPath = editor.elementPath();
  131. if ( !elementPath )
  132. return;
  133. for ( var name in styles ) {
  134. var style = styles[ name ];
  135. if ( style.checkApplicable( elementPath, editor, editor.activeFilter ) )
  136. return;
  137. }
  138. this.setState( CKEDITOR.TRISTATE_DISABLED );
  139. },
  140. // Force a reload of the data
  141. reset: function() {
  142. if ( combo ) {
  143. delete combo._.panel;
  144. delete combo._.list;
  145. combo._.committed = 0;
  146. combo._.items = {};
  147. combo._.state = CKEDITOR.TRISTATE_OFF;
  148. }
  149. styles = {};
  150. stylesList = [];
  151. }
  152. } );
  153. }
  154. } );
  155. } )();