2 Copyright (c) 2003-2010, 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 ] = 'click'; // SPACE
\r
41 this._.pendingHtml = [];
\r
50 if ( this._.started )
\r
52 this._.pendingHtml.push( '</ul>' );
\r
53 delete this._.started;
\r
57 getClick : function()
\r
59 if ( !this._.click )
\r
61 this._.click = CKEDITOR.tools.addFunction( function( value )
\r
65 if ( this.multiSelect )
\r
66 marked = this.toggle( value );
\r
71 this.onClick( value, marked );
\r
75 return this._.click;
\r
81 add : function( value, html, title )
\r
83 var pendingHtml = this._.pendingHtml,
\r
84 id = 'cke_' + CKEDITOR.tools.getNextNumber();
\r
86 if ( !this._.started )
\r
88 pendingHtml.push( '<ul role="presentation" class=cke_panel_list>' );
\r
90 this._.size = this._.size || 0;
\r
93 this._.items[ value ] = id;
\r
96 '<li id=', id, ' class=cke_panel_listItem>' +
\r
97 '<a id="', id, '_option" _cke_focus=1 hidefocus=true' +
\r
98 ' title="', title || value, '"' +
\r
99 ' href="javascript:void(\'', value, '\')"' +
\r
100 ' onclick="CKEDITOR.tools.callFunction(', this._.getClick(), ',\'', value, '\'); return false;"',
\r
102 ' aria-posinset="' + ++this._.size + '">',
\r
108 startGroup : function( title )
\r
112 var id = 'cke_' + CKEDITOR.tools.getNextNumber();
\r
114 this._.groups[ title ] = id;
\r
116 this._.pendingHtml.push( '<h1 role="presentation" id=', id, ' class=cke_panel_grouptitle>', title, '</h1>' );
\r
119 commit : function()
\r
122 this.element.appendHtml( this._.pendingHtml.join( '' ) );
\r
124 var items = this._.items,
\r
125 doc = this.element.getDocument();
\r
126 for ( var value in items )
\r
127 doc.getById( items[ value ] + '_option' ).setAttribute( 'aria-setsize', this._.size );
\r
128 delete this._.size;
\r
130 this._.pendingHtml = [];
\r
133 toggle : function( value )
\r
135 var isMarked = this.isMarked( value );
\r
138 this.unmark( value );
\r
140 this.mark( value );
\r
145 hideGroup : function( groupTitle )
\r
147 var group = this.element.getDocument().getById( this._.groups[ groupTitle ] ),
\r
148 list = group && group.getNext();
\r
152 group.setStyle( 'display', 'none' );
\r
154 if ( list && list.getName() == 'ul' )
\r
155 list.setStyle( 'display', 'none' );
\r
159 hideItem : function( value )
\r
161 this.element.getDocument().getById( this._.items[ value ] ).setStyle( 'display', 'none' );
\r
164 showAll : function()
\r
166 var items = this._.items,
\r
167 groups = this._.groups,
\r
168 doc = this.element.getDocument();
\r
170 for ( var value in items )
\r
172 doc.getById( items[ value ] ).setStyle( 'display', '' );
\r
175 for ( var title in groups )
\r
177 var group = doc.getById( groups[ title ] ),
\r
178 list = group.getNext();
\r
180 group.setStyle( 'display', '' );
\r
182 if ( list && list.getName() == 'ul' )
\r
183 list.setStyle( 'display', '' );
\r
187 mark : function( value )
\r
189 if ( !this.multiSelect )
\r
192 var itemId = this._.items[ value ],
\r
193 item = this.element.getDocument().getById( itemId );
\r
194 item.addClass( 'cke_selected' );
\r
196 this.element.getDocument().getById( itemId + '_option' ).setAttribute( 'aria-selected', true );
\r
197 this.element.setAttribute( 'aria-activedescendant', itemId + '_option' );
\r
199 this.onMark && this.onMark( item );
\r
202 unmark : function( value )
\r
204 this.element.getDocument().getById( this._.items[ value ] ).removeClass( 'cke_selected' );
\r
205 this.onUnmark && this.onUnmark( this._.items[ value ] );
\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 doc.getById( items[ value ] ).removeClass( 'cke_selected' );
\r
218 this.onUnmark && this.onUnmark();
\r
221 isMarked : function( value )
\r
223 return this.element.getDocument().getById( this._.items[ value ] ).hasClass( 'cke_selected' );
\r
226 focus : function( value )
\r
228 this._.focusIndex = -1;
\r
232 var selected = this.element.getDocument().getById( this._.items[ value ] ).getFirst();
\r
234 var links = this.element.getElementsByTag( 'a' ),
\r
238 while ( ( link = links.getItem( ++i ) ) )
\r
240 if ( link.equals( selected ) )
\r
242 this._.focusIndex = i;
\r
247 setTimeout( function()
\r