sources/plugins/listblock/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.plugins.add( 'listblock', {
   7         requires: 'panel',
   8
   9         onLoad: function() {
  10                 var list = CKEDITOR.addTemplate( 'panel-list', '<ul role="presentation" class="cke_panel_list">{items}</ul>' ),
  11                         listItem = CKEDITOR.addTemplate( 'panel-list-item', '<li id="{id}" class="cke_panel_listItem" role=presentation>' +
  12                                 '<a id="{id}_option" _cke_focus=1 hidefocus=true' +
  13                                         ' title="{title}"' +
  14                                         ' href="javascript:void(\'{val}\')" ' +
  15                                         ' {onclick}="CKEDITOR.tools.callFunction({clickFn},\'{val}\'); return false;"' + // #188
  16                                                 ' role="option">' +
  17                                         '{text}' +
  18                                 '</a>' +
  19                                 '</li>' ),
  20                         listGroup = CKEDITOR.addTemplate( 'panel-list-group', '<h1 id="{id}" class="cke_panel_grouptitle" role="presentation" >{label}</h1>' ),
  21                         reSingleQuote = /\'/g,
  22                         escapeSingleQuotes = function( str ) {
  23                                 return str.replace( reSingleQuote, '\\\'' );
  24                         };
  25
  26                 CKEDITOR.ui.panel.prototype.addListBlock = function( name, definition ) {
  27                         return this.addBlock( name, new CKEDITOR.ui.listBlock( this.getHolderElement(), definition ) );
  28                 };
  29
  30                 CKEDITOR.ui.listBlock = CKEDITOR.tools.createClass( {
  31                         base: CKEDITOR.ui.panel.block,
  32
  33                         $: function( blockHolder, blockDefinition ) {
  34                                 blockDefinition = blockDefinition || {};
  35
  36                                 var attribs = blockDefinition.attributes || ( blockDefinition.attributes = {} );
  37                                 ( this.multiSelect = !!blockDefinition.multiSelect ) && ( attribs[ 'aria-multiselectable' ] = true );
  38                                 // Provide default role of 'listbox'.
  39                                 !attribs.role && ( attribs.role = 'listbox' );
  40
  41                                 // Call the base contructor.
  42                                 this.base.apply( this, arguments );
  43
  44                                 // Set the proper a11y attributes.
  45                                 this.element.setAttribute( 'role', attribs.role );
  46
  47                                 var keys = this.keys;
  48                                 keys[ 40 ] = 'next'; // ARROW-DOWN
  49                                 keys[ 9 ] = 'next'; // TAB
  50                                 keys[ 38 ] = 'prev'; // ARROW-UP
  51                                 keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
  52                                 keys[ 32 ] = CKEDITOR.env.ie ? 'mouseup' : 'click'; // SPACE
  53                                 CKEDITOR.env.ie && ( keys[ 13 ] = 'mouseup' ); // Manage ENTER, since onclick is blocked in IE (#8041).
  54
  55                                 this._.pendingHtml = [];
  56                                 this._.pendingList = [];
  57                                 this._.items = {};
  58                                 this._.groups = {};
  59                         },
  60
  61                         _: {
  62                                 close: function() {
  63                                         if ( this._.started ) {
  64                                                 var output = list.output( { items: this._.pendingList.join( '' ) } );
  65                                                 this._.pendingList = [];
  66                                                 this._.pendingHtml.push( output );
  67                                                 delete this._.started;
  68                                         }
  69                                 },
  70
  71                                 getClick: function() {
  72                                         if ( !this._.click ) {
  73                                                 this._.click = CKEDITOR.tools.addFunction( function( value ) {
  74                                                         var marked = this.toggle( value );
  75                                                         if ( this.onClick )
  76                                                                 this.onClick( value, marked );
  77                                                 }, this );
  78                                         }
  79                                         return this._.click;
  80                                 }
  81                         },
  82
  83                         proto: {
  84                                 add: function( value, html, title ) {
  85                                         var id = CKEDITOR.tools.getNextId();
  86
  87                                         if ( !this._.started ) {
  88                                                 this._.started = 1;
  89                                                 this._.size = this._.size || 0;
  90                                         }
  91
  92                                         this._.items[ value ] = id;
  93
  94                                         var data = {
  95                                                 id: id,
  96                                                 val: escapeSingleQuotes( CKEDITOR.tools.htmlEncodeAttr( value ) ),
  97                                                 onclick: CKEDITOR.env.ie ? 'onclick="return false;" onmouseup' : 'onclick',
  98                                                 clickFn: this._.getClick(),
  99                                                 title: CKEDITOR.tools.htmlEncodeAttr( title || value ),
 100                                                 text: html || value
 101                                         };
 102
 103                                         this._.pendingList.push( listItem.output( data ) );
 104                                 },
 105
 106                                 startGroup: function( title ) {
 107                                         this._.close();
 108
 109                                         var id = CKEDITOR.tools.getNextId();
 110
 111                                         this._.groups[ title ] = id;
 112
 113                                         this._.pendingHtml.push( listGroup.output( { id: id, label: title } ) );
 114                                 },
 115
 116                                 commit: function() {
 117                                         this._.close();
 118                                         this.element.appendHtml( this._.pendingHtml.join( '' ) );
 119                                         delete this._.size;
 120
 121                                         this._.pendingHtml = [];
 122                                 },
 123
 124                                 toggle: function( value ) {
 125                                         var isMarked = this.isMarked( value );
 126
 127                                         if ( isMarked )
 128                                                 this.unmark( value );
 129                                         else
 130                                                 this.mark( value );
 131
 132                                         return !isMarked;
 133                                 },
 134
 135                                 hideGroup: function( groupTitle ) {
 136                                         var group = this.element.getDocument().getById( this._.groups[ groupTitle ] ),
 137                                                 list = group && group.getNext();
 138
 139                                         if ( group ) {
 140                                                 group.setStyle( 'display', 'none' );
 141
 142                                                 if ( list && list.getName() == 'ul' )
 143                                                         list.setStyle( 'display', 'none' );
 144                                         }
 145                                 },
 146
 147                                 hideItem: function( value ) {
 148                                         this.element.getDocument().getById( this._.items[ value ] ).setStyle( 'display', 'none' );
 149                                 },
 150
 151                                 showAll: function() {
 152                                         var items = this._.items,
 153                                                 groups = this._.groups,
 154                                                 doc = this.element.getDocument();
 155
 156                                         for ( var value in items ) {
 157                                                 doc.getById( items[ value ] ).setStyle( 'display', '' );
 158                                         }
 159
 160                                         for ( var title in groups ) {
 161                                                 var group = doc.getById( groups[ title ] ),
 162                                                         list = group.getNext();
 163
 164                                                 group.setStyle( 'display', '' );
 165
 166                                                 if ( list && list.getName() == 'ul' )
 167                                                         list.setStyle( 'display', '' );
 168                                         }
 169                                 },
 170
 171                                 mark: function( value ) {
 172                                         if ( !this.multiSelect )
 173                                                 this.unmarkAll();
 174
 175                                         var itemId = this._.items[ value ],
 176                                                 item = this.element.getDocument().getById( itemId );
 177                                         item.addClass( 'cke_selected' );
 178
 179                                         this.element.getDocument().getById( itemId + '_option' ).setAttribute( 'aria-selected', true );
 180                                         this.onMark && this.onMark( item );
 181                                 },
 182
 183                                 unmark: function( value ) {
 184                                         var doc = this.element.getDocument(),
 185                                                 itemId = this._.items[ value ],
 186                                                 item = doc.getById( itemId );
 187
 188                                         item.removeClass( 'cke_selected' );
 189                                         doc.getById( itemId + '_option' ).removeAttribute( 'aria-selected' );
 190
 191                                         this.onUnmark && this.onUnmark( item );
 192                                 },
 193
 194                                 unmarkAll: function() {
 195                                         var items = this._.items,
 196                                                 doc = this.element.getDocument();
 197
 198                                         for ( var value in items ) {
 199                                                 var itemId = items[ value ];
 200
 201                                                 doc.getById( itemId ).removeClass( 'cke_selected' );
 202                                                 doc.getById( itemId + '_option' ).removeAttribute( 'aria-selected' );
 203                                         }
 204
 205                                         this.onUnmark && this.onUnmark();
 206                                 },
 207
 208                                 isMarked: function( value ) {
 209                                         return this.element.getDocument().getById( this._.items[ value ] ).hasClass( 'cke_selected' );
 210                                 },
 211
 212                                 focus: function( value ) {
 213                                         this._.focusIndex = -1;
 214
 215                                         var links = this.element.getElementsByTag( 'a' ),
 216                                                 link,
 217                                                 selected,
 218                                                 i = -1;
 219
 220                                         if ( value ) {
 221                                                 selected = this.element.getDocument().getById( this._.items[ value ] ).getFirst();
 222
 223                                                 while ( ( link = links.getItem( ++i ) ) ) {
 224                                                         if ( link.equals( selected ) ) {
 225                                                                 this._.focusIndex = i;
 226                                                                 break;
 227                                                         }
 228                                                 }
 229                                         }
 230                                         else {
 231                                                 this.element.focus();
 232                                         }
 233
 234                                         selected && setTimeout( function() {
 235                                                 selected.focus();
 236                                         }, 0 );
 237                                 }
 238                         }
 239                 } );
 240         }
 241 } );