      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, '\'); return false;">',
     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 						this._.pendingHtml = [];
    115 					},
    116
    117 					toggle : function( value )
    118 					{
    119 						var isMarked = this.isMarked( value );
    120
    121 						if ( isMarked )
    122 							this.unmark( value );
    123 						else
    124 							this.mark( value );
    125
    126 						return !isMarked;
    127 					},
    128
    129 					hideGroup : function( groupTitle )
    130 					{
    131 						var group = this.element.getDocument().getById( this._.groups[ groupTitle ] ),
    132 							list = group && group.getNext();
    133
    134 						if ( group )
    135 						{
    136 							group.setStyle( 'display', 'none' );
    137
    138 							if ( list && list.getName() == 'ul' )
    139 								list.setStyle( 'display', 'none' );
    140 						}
    141 					},
    142
    143 					hideItem : function( value )
    144 					{
    145 						this.element.getDocument().getById( this._.items[ value ] ).setStyle( 'display', 'none' );
    146 					},
    147
    148 					showAll : function()
    149 					{
    150 						var items = this._.items,
    151 							groups = this._.groups,
    152 							doc = this.element.getDocument();
    153
    154 						for ( var value in items )
    155 						{
    156 							doc.getById( items[ value ] ).setStyle( 'display', '' );
    157 						}
    158
    159 						for ( var title in groups )
    160 						{
    161 							var group = doc.getById( groups[ title ] ),
    162 								list = group.getNext();
    163
    164 							group.setStyle( 'display', '' );
    165
    166 							if ( list && list.getName() == 'ul' )
    167 								list.setStyle( 'display', '' );
    168 						}
    169 					},
    170
    171 					mark : function( value )
    172 					{
    173 						if ( !this.multiSelect )
    174 							this.unmarkAll();
    175
    176 						this.element.getDocument().getById( this._.items[ value ] ).addClass( 'cke_selected' );
    177 					},
    178
    179 					unmark : function( value )
    180 					{
    181 						this.element.getDocument().getById( this._.items[ value ] ).removeClass( 'cke_selected' );
    182 					},
    183
    184 					unmarkAll : function()
    185 					{
    186 						var items = this._.items,
    187 							doc = this.element.getDocument();
    188
    189 						for ( var value in items )
    190 						{
    191 							doc.getById( items[ value ] ).removeClass( 'cke_selected' );
    192 						}
    193 					},
    194
    195 					isMarked : function( value )
    196 					{
    197 						return this.element.getDocument().getById( this._.items[ value ] ).hasClass( 'cke_selected' );
    198 					},
    199
    200 					focus : function( value )
    201 					{
    202 						this._.focusIndex = -1;
    203
    204 						if ( value )
    205 						{
    206 							var selected = this.element.getDocument().getById( this._.items[ value ] ).getFirst();
    207
    208 							var links = this.element.getElementsByTag( 'a' ),
    209 								link,
    210 								i = -1;
    211
    212 							while( ( link = links.getItem( ++i ) ) )
    213 							{
    214 								if ( link.equals( selected ) )
    215 								{
    216 									this._.focusIndex = i;
    217 									break;
    218 								}
    219 							}
    220
    221 							setTimeout( function()
    222 								{
    223 									selected.focus();
    224 								},
    225 								0 );
    226 						}
    227 					}
    228 				}
    229 			});
    230 	}
    231 });
    232