_source/plugins/listblock/plugin.js

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