ckeditor/_source/plugins/listblock/plugin.js

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