plugin.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. CKEDITOR.plugins.add( 'richcombo', {
  6. requires: 'floatpanel,listblock,button',
  7. beforeInit: function( editor ) {
  8. editor.ui.addHandler( CKEDITOR.UI_RICHCOMBO, CKEDITOR.ui.richCombo.handler );
  9. }
  10. } );
  11. ( function() {
  12. var template = '<span id="{id}"' +
  13. ' class="cke_combo cke_combo__{name} {cls}"' +
  14. ' role="presentation">' +
  15. '<span id="{id}_label" class="cke_combo_label">{label}</span>' +
  16. '<a class="cke_combo_button" title="{title}" tabindex="-1"' +
  17. ( CKEDITOR.env.gecko && !CKEDITOR.env.hc ? '' : ' href="javascript:void(\'{titleJs}\')"' ) +
  18. ' hidefocus="true"' +
  19. ' role="button"' +
  20. ' aria-labelledby="{id}_label"' +
  21. ' aria-haspopup="listbox"';
  22. // Some browsers don't cancel key events in the keydown but in the
  23. // keypress.
  24. // TODO: Check if really needed.
  25. if ( CKEDITOR.env.gecko && CKEDITOR.env.mac )
  26. template += ' onkeypress="return false;"';
  27. // With Firefox, we need to force the button to redraw, otherwise it
  28. // will remain in the focus state.
  29. if ( CKEDITOR.env.gecko )
  30. template += ' onblur="this.style.cssText = this.style.cssText;"';
  31. template +=
  32. ' onkeydown="return CKEDITOR.tools.callFunction({keydownFn},event,this);"' +
  33. ' onfocus="return CKEDITOR.tools.callFunction({focusFn},event);" ' +
  34. ( CKEDITOR.env.ie ? 'onclick="return false;" onmouseup' : 'onclick' ) + // https://dev.ckeditor.com/ticket/188
  35. '="CKEDITOR.tools.callFunction({clickFn},this);return false;">' +
  36. '<span id="{id}_text" class="cke_combo_text cke_combo_inlinelabel">{label}</span>' +
  37. '<span class="cke_combo_open">' +
  38. '<span class="cke_combo_arrow">' +
  39. // BLACK DOWN-POINTING TRIANGLE
  40. ( CKEDITOR.env.hc ? '&#9660;' : CKEDITOR.env.air ? '&nbsp;' : '' ) +
  41. '</span>' +
  42. '</span>' +
  43. '</a>' +
  44. '</span>';
  45. var rcomboTpl = CKEDITOR.addTemplate( 'combo', template );
  46. /**
  47. * Button UI element.
  48. *
  49. * @readonly
  50. * @property {String} [='richcombo']
  51. * @member CKEDITOR
  52. */
  53. CKEDITOR.UI_RICHCOMBO = 'richcombo';
  54. /**
  55. * @class
  56. * @todo
  57. */
  58. CKEDITOR.ui.richCombo = CKEDITOR.tools.createClass( {
  59. $: function( definition ) {
  60. // Copy all definition properties to this object.
  61. CKEDITOR.tools.extend( this, definition,
  62. // Set defaults.
  63. {
  64. // The combo won't participate in toolbar grouping.
  65. canGroup: false,
  66. title: definition.label,
  67. modes: { wysiwyg: 1 },
  68. editorFocus: 1
  69. } );
  70. // We don't want the panel definition in this object.
  71. var panelDefinition = this.panel || {};
  72. delete this.panel;
  73. this.id = CKEDITOR.tools.getNextNumber();
  74. this.document = ( panelDefinition.parent && panelDefinition.parent.getDocument() ) || CKEDITOR.document;
  75. panelDefinition.className = 'cke_combopanel';
  76. panelDefinition.block = {
  77. multiSelect: panelDefinition.multiSelect,
  78. attributes: panelDefinition.attributes
  79. };
  80. panelDefinition.toolbarRelated = true;
  81. this._ = {
  82. panelDefinition: panelDefinition,
  83. items: {},
  84. listeners: []
  85. };
  86. },
  87. proto: {
  88. renderHtml: function( editor ) {
  89. var output = [];
  90. this.render( editor, output );
  91. return output.join( '' );
  92. },
  93. /**
  94. * Renders the rich combo.
  95. *
  96. * @param {CKEDITOR.editor} editor The editor instance which this button is
  97. * to be used by.
  98. * @param {Array} output The output array that the HTML relative
  99. * to this button will be appended to.
  100. */
  101. render: function( editor, output ) {
  102. var env = CKEDITOR.env;
  103. var id = 'cke_' + this.id;
  104. var clickFn = CKEDITOR.tools.addFunction( function( el ) {
  105. // Restore locked selection in Opera.
  106. if ( selLocked ) {
  107. editor.unlockSelection( 1 );
  108. selLocked = 0;
  109. }
  110. instance.execute( el );
  111. }, this );
  112. var combo = this;
  113. var instance = {
  114. id: id,
  115. combo: this,
  116. focus: function() {
  117. var element = CKEDITOR.document.getById( id ).getChild( 1 );
  118. element.focus();
  119. },
  120. execute: function( el ) {
  121. var _ = combo._;
  122. if ( _.state == CKEDITOR.TRISTATE_DISABLED )
  123. return;
  124. combo.createPanel( editor );
  125. if ( _.on ) {
  126. _.panel.hide();
  127. return;
  128. }
  129. combo.commit();
  130. var value = combo.getValue();
  131. if ( value )
  132. _.list.mark( value );
  133. else
  134. _.list.unmarkAll();
  135. _.panel.showBlock( combo.id, new CKEDITOR.dom.element( el ), 4 );
  136. },
  137. clickFn: clickFn
  138. };
  139. function updateState() {
  140. // Don't change state while richcombo is active (https://dev.ckeditor.com/ticket/11793).
  141. if ( this.getState() == CKEDITOR.TRISTATE_ON )
  142. return;
  143. var state = this.modes[ editor.mode ] ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
  144. if ( editor.readOnly && !this.readOnly )
  145. state = CKEDITOR.TRISTATE_DISABLED;
  146. this.setState( state );
  147. this.setValue( '' );
  148. // Let plugin to disable button.
  149. if ( state != CKEDITOR.TRISTATE_DISABLED && this.refresh )
  150. this.refresh();
  151. }
  152. // Update status when activeFilter, mode, selection or readOnly changes.
  153. this._.listeners.push( editor.on( 'activeFilterChange', updateState, this ) );
  154. this._.listeners.push( editor.on( 'mode', updateState, this ) );
  155. this._.listeners.push( editor.on( 'selectionChange', updateState, this ) );
  156. // If this combo is sensitive to readOnly state, update it accordingly.
  157. !this.readOnly && this._.listeners.push( editor.on( 'readOnly', updateState, this ) );
  158. var keyDownFn = CKEDITOR.tools.addFunction( function( ev, element ) {
  159. ev = new CKEDITOR.dom.event( ev );
  160. var keystroke = ev.getKeystroke();
  161. switch ( keystroke ) {
  162. case 13: // ENTER
  163. case 32: // SPACE
  164. case 40: // ARROW-DOWN
  165. // Show panel
  166. CKEDITOR.tools.callFunction( clickFn, element );
  167. break;
  168. default:
  169. // Delegate the default behavior to toolbar button key handling.
  170. instance.onkey( instance, keystroke );
  171. }
  172. // Avoid subsequent focus grab on editor document.
  173. ev.preventDefault();
  174. } );
  175. var focusFn = CKEDITOR.tools.addFunction( function() {
  176. instance.onfocus && instance.onfocus();
  177. } );
  178. var selLocked = 0;
  179. // For clean up
  180. instance.keyDownFn = keyDownFn;
  181. var params = {
  182. id: id,
  183. name: this.name || this.command,
  184. label: this.label,
  185. title: this.title,
  186. cls: this.className || '',
  187. titleJs: env.gecko && !env.hc ? '' : ( this.title || '' ).replace( "'", '' ),
  188. keydownFn: keyDownFn,
  189. focusFn: focusFn,
  190. clickFn: clickFn
  191. };
  192. rcomboTpl.output( params, output );
  193. if ( this.onRender )
  194. this.onRender();
  195. return instance;
  196. },
  197. createPanel: function( editor ) {
  198. if ( this._.panel )
  199. return;
  200. var panelDefinition = this._.panelDefinition,
  201. panelBlockDefinition = this._.panelDefinition.block,
  202. panelParentElement = panelDefinition.parent || CKEDITOR.document.getBody(),
  203. namedPanelCls = 'cke_combopanel__' + this.name,
  204. panel = new CKEDITOR.ui.floatPanel( editor, panelParentElement, panelDefinition ),
  205. list = panel.addListBlock( this.id, panelBlockDefinition ),
  206. me = this;
  207. panel.onShow = function() {
  208. this.element.addClass( namedPanelCls );
  209. me.setState( CKEDITOR.TRISTATE_ON );
  210. me._.on = 1;
  211. me.editorFocus && !editor.focusManager.hasFocus && editor.focus();
  212. if ( me.onOpen )
  213. me.onOpen();
  214. };
  215. panel.onHide = function( preventOnClose ) {
  216. this.element.removeClass( namedPanelCls );
  217. me.setState( me.modes && me.modes[ editor.mode ] ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
  218. me._.on = 0;
  219. if ( !preventOnClose && me.onClose )
  220. me.onClose();
  221. };
  222. panel.onEscape = function() {
  223. // Hide drop-down with focus returned.
  224. panel.hide( 1 );
  225. };
  226. list.onClick = function( value, marked ) {
  227. if ( me.onClick )
  228. me.onClick.call( me, value, marked );
  229. panel.hide();
  230. };
  231. this._.panel = panel;
  232. this._.list = list;
  233. panel.getBlock( this.id ).onHide = function() {
  234. me._.on = 0;
  235. me.setState( CKEDITOR.TRISTATE_OFF );
  236. };
  237. if ( this.init )
  238. this.init();
  239. },
  240. setValue: function( value, text ) {
  241. this._.value = value;
  242. var textElement = this.document.getById( 'cke_' + this.id + '_text' );
  243. if ( textElement ) {
  244. if ( !( value || text ) ) {
  245. text = this.label;
  246. textElement.addClass( 'cke_combo_inlinelabel' );
  247. } else {
  248. textElement.removeClass( 'cke_combo_inlinelabel' );
  249. }
  250. textElement.setText( typeof text != 'undefined' ? text : value );
  251. }
  252. },
  253. getValue: function() {
  254. return this._.value || '';
  255. },
  256. unmarkAll: function() {
  257. this._.list.unmarkAll();
  258. },
  259. mark: function( value ) {
  260. this._.list.mark( value );
  261. },
  262. hideItem: function( value ) {
  263. this._.list.hideItem( value );
  264. },
  265. hideGroup: function( groupTitle ) {
  266. this._.list.hideGroup( groupTitle );
  267. },
  268. showAll: function() {
  269. this._.list.showAll();
  270. },
  271. add: function( value, html, text ) {
  272. this._.items[ value ] = text || value;
  273. this._.list.add( value, html, text );
  274. },
  275. startGroup: function( title ) {
  276. this._.list.startGroup( title );
  277. },
  278. commit: function() {
  279. if ( !this._.committed ) {
  280. this._.list.commit();
  281. this._.committed = 1;
  282. CKEDITOR.ui.fire( 'ready', this );
  283. }
  284. this._.committed = 1;
  285. },
  286. setState: function( state ) {
  287. if ( this._.state == state )
  288. return;
  289. var el = this.document.getById( 'cke_' + this.id );
  290. el.setState( state, 'cke_combo' );
  291. state == CKEDITOR.TRISTATE_DISABLED ?
  292. el.setAttribute( 'aria-disabled', true ) :
  293. el.removeAttribute( 'aria-disabled' );
  294. this._.state = state;
  295. },
  296. getState: function() {
  297. return this._.state;
  298. },
  299. enable: function() {
  300. if ( this._.state == CKEDITOR.TRISTATE_DISABLED )
  301. this.setState( this._.lastState );
  302. },
  303. disable: function() {
  304. if ( this._.state != CKEDITOR.TRISTATE_DISABLED ) {
  305. this._.lastState = this._.state;
  306. this.setState( CKEDITOR.TRISTATE_DISABLED );
  307. }
  308. },
  309. /**
  310. * Removes all listeners from a rich combo element.
  311. *
  312. * @since 4.11.0
  313. */
  314. destroy: function() {
  315. CKEDITOR.tools.array.forEach( this._.listeners, function( listener ) {
  316. listener.removeListener();
  317. } );
  318. this._.listeners = [];
  319. }
  320. },
  321. /**
  322. * Represents a rich combo handler object.
  323. *
  324. * @class CKEDITOR.ui.richCombo.handler
  325. * @singleton
  326. * @extends CKEDITOR.ui.handlerDefinition
  327. */
  328. statics: {
  329. handler: {
  330. /**
  331. * Transforms a rich combo definition into a {@link CKEDITOR.ui.richCombo} instance.
  332. *
  333. * @param {Object} definition
  334. * @returns {CKEDITOR.ui.richCombo}
  335. */
  336. create: function( definition ) {
  337. return new CKEDITOR.ui.richCombo( definition );
  338. }
  339. }
  340. }
  341. } );
  342. /**
  343. * @param {String} name
  344. * @param {Object} definition
  345. * @member CKEDITOR.ui
  346. * @todo
  347. */
  348. CKEDITOR.ui.prototype.addRichCombo = function( name, definition ) {
  349. this.add( name, CKEDITOR.UI_RICHCOMBO, definition );
  350. };
  351. } )();