2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.plugins.add( 'listblock',
\r
8 requires : [ 'panel' ],
\r
12 CKEDITOR.ui.panel.prototype.addListBlock = function( name, definition )
\r
14 return this.addBlock( name, new CKEDITOR.ui.listBlock( this.getHolderElement(), definition ) );
\r
17 CKEDITOR.ui.listBlock = CKEDITOR.tools.createClass(
\r
19 base : CKEDITOR.ui.panel.block,
\r
21 $ : function( blockHolder, blockDefinition )
\r
23 blockDefinition = blockDefinition || {};
\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
31 // Call the base contructor.
\r
32 this.base.apply( this, arguments );
\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
42 this._.pendingHtml = [];
\r
51 if ( this._.started )
\r
53 this._.pendingHtml.push( '</ul>' );
\r
54 delete this._.started;
\r
58 getClick : function()
\r
60 if ( !this._.click )
\r
62 this._.click = CKEDITOR.tools.addFunction( function( value )
\r
66 if ( this.multiSelect )
\r
67 marked = this.toggle( value );
\r
72 this.onClick( value, marked );
\r
76 return this._.click;
\r
82 add : function( value, html, title )
\r
84 var pendingHtml = this._.pendingHtml,
\r
85 id = CKEDITOR.tools.getNextId();
\r
87 if ( !this._.started )
\r
89 pendingHtml.push( '<ul role="presentation" class=cke_panel_list>' );
\r
91 this._.size = this._.size || 0;
\r
94 this._.items[ value ] = id;
\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
109 startGroup : function( title )
\r
113 var id = CKEDITOR.tools.getNextId();
\r
115 this._.groups[ title ] = id;
\r
117 this._.pendingHtml.push( '<h1 role="presentation" id=', id, ' class=cke_panel_grouptitle>', title, '</h1>' );
\r
120 commit : function()
\r
123 this.element.appendHtml( this._.pendingHtml.join( '' ) );
\r
124 delete this._.size;
\r
126 this._.pendingHtml = [];
\r
129 toggle : function( value )
\r
131 var isMarked = this.isMarked( value );
\r
134 this.unmark( value );
\r
136 this.mark( value );
\r
141 hideGroup : function( groupTitle )
\r
143 var group = this.element.getDocument().getById( this._.groups[ groupTitle ] ),
\r
144 list = group && group.getNext();
\r
148 group.setStyle( 'display', 'none' );
\r
150 if ( list && list.getName() == 'ul' )
\r
151 list.setStyle( 'display', 'none' );
\r
155 hideItem : function( value )
\r
157 this.element.getDocument().getById( this._.items[ value ] ).setStyle( 'display', 'none' );
\r
160 showAll : function()
\r
162 var items = this._.items,
\r
163 groups = this._.groups,
\r
164 doc = this.element.getDocument();
\r
166 for ( var value in items )
\r
168 doc.getById( items[ value ] ).setStyle( 'display', '' );
\r
171 for ( var title in groups )
\r
173 var group = doc.getById( groups[ title ] ),
\r
174 list = group.getNext();
\r
176 group.setStyle( 'display', '' );
\r
178 if ( list && list.getName() == 'ul' )
\r
179 list.setStyle( 'display', '' );
\r
183 mark : function( value )
\r
185 if ( !this.multiSelect )
\r
188 var itemId = this._.items[ value ],
\r
189 item = this.element.getDocument().getById( itemId );
\r
190 item.addClass( 'cke_selected' );
\r
192 this.element.getDocument().getById( itemId + '_option' ).setAttribute( 'aria-selected', true );
\r
193 this.onMark && this.onMark( item );
\r
196 unmark : function( value )
\r
198 var doc = this.element.getDocument(),
\r
199 itemId = this._.items[ value ],
\r
200 item = doc.getById( itemId );
\r
202 item.removeClass( 'cke_selected' );
\r
203 doc.getById( itemId + '_option' ).removeAttribute( 'aria-selected' );
\r
205 this.onUnmark && this.onUnmark( item );
\r
208 unmarkAll : function()
\r
210 var items = this._.items,
\r
211 doc = this.element.getDocument();
\r
213 for ( var value in items )
\r
215 var itemId = items[ value ];
\r
217 doc.getById( itemId ).removeClass( 'cke_selected' );
\r
218 doc.getById( itemId + '_option' ).removeAttribute( 'aria-selected' );
\r
221 this.onUnmark && this.onUnmark();
\r
224 isMarked : function( value )
\r
226 return this.element.getDocument().getById( this._.items[ value ] ).hasClass( 'cke_selected' );
\r
229 focus : function( value )
\r
231 this._.focusIndex = -1;
\r
235 var selected = this.element.getDocument().getById( this._.items[ value ] ).getFirst();
\r
237 var links = this.element.getElementsByTag( 'a' ),
\r
241 while ( ( link = links.getItem( ++i ) ) )
\r
243 if ( link.equals( selected ) )
\r
245 this._.focusIndex = i;
\r
250 setTimeout( function()
\r