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