[Summary view] [Print] [Text view]

   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  });