skins/ckeditor/_source/plugins/liststyle/dialogs/liststyle.js

   1 /*
   2  * Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.html or http://ckeditor.com/license
   4  */
   5
   6 (function()
   7 {
   8         function getListElement( editor, listTag )
   9         {
  10                 var range;
  11                 try { range  = editor.getSelection().getRanges()[ 0 ]; }
  12                 catch( e ) { return null; }
  13
  14                 range.shrink( CKEDITOR.SHRINK_TEXT );
  15                 return range.getCommonAncestor().getAscendant( listTag, 1 );
  16         }
  17
  18         var listItem = function( node ) { return node.type == CKEDITOR.NODE_ELEMENT && node.is( 'li' ); };
  19
  20         var mapListStyle = {
  21                 'a' : 'lower-alpha',
  22                 'A' : 'upper-alpha',
  23                 'i' : 'lower-roman',
  24                 'I' : 'upper-roman',
  25                 '1' : 'decimal',
  26                 'disc' : 'disc',
  27                 'circle': 'circle',
  28                 'square' : 'square'
  29         };
  30
  31         function listStyle( editor, startupPage )
  32         {
  33                 var lang = editor.lang.list;
  34                 if ( startupPage == 'bulletedListStyle' )
  35                 {
  36                         return {
  37                                 title : lang.bulletedTitle,
  38                                 minWidth : 300,
  39                                 minHeight : 50,
  40                                 contents :
  41                                 [
  42                                         {
  43                                                 id : 'info',
  44                                                 accessKey : 'I',
  45                                                 elements :
  46                                                 [
  47                                                         {
  48                                                                 type : 'select',
  49                                                                 label : lang.type,
  50                                                                 id : 'type',
  51                                                                 align : 'center',
  52                                                                 style : 'width:150px',
  53                                                                 items :
  54                                                                 [
  55                                                                         [ lang.notset, '' ],
  56                                                                         [ lang.circle, 'circle' ],
  57                                                                         [ lang.disc,  'disc' ],
  58                                                                         [ lang.square, 'square' ]
  59                                                                 ],
  60                                                                 setup : function( element )
  61                                                                 {
  62                                                                         var value = element.getStyle( 'list-style-type' )
  63                                                                                                 || mapListStyle[ element.getAttribute( 'type' ) ]
  64                                                                                                 || element.getAttribute( 'type' )
  65                                                                                                 || '';
  66
  67                                                                         this.setValue( value );
  68                                                                 },
  69                                                                 commit : function( element )
  70                                                                 {
  71                                                                         var value = this.getValue();
  72                                                                         if ( value )
  73                                                                                 element.setStyle( 'list-style-type', value );
  74                                                                         else
  75                                                                                 element.removeStyle( 'list-style-type' );
  76                                                                 }
  77                                                         }
  78                                                 ]
  79                                         }
  80                                 ],
  81                                 onShow: function()
  82                                 {
  83                                         var editor = this.getParentEditor(),
  84                                                 element = getListElement( editor, 'ul' );
  85
  86                                         element && this.setupContent( element );
  87                                 },
  88                                 onOk: function()
  89                                 {
  90                                         var editor = this.getParentEditor(),
  91                                                 element = getListElement( editor, 'ul' );
  92
  93                                         element && this.commitContent( element );
  94                                 }
  95                         };
  96                 }
  97                 else if ( startupPage == 'numberedListStyle'  )
  98                 {
  99
 100                         var listStyleOptions =
 101                         [
 102                                 [ lang.notset, '' ],
 103                                 [ lang.lowerRoman, 'lower-roman' ],
 104                                 [ lang.upperRoman, 'upper-roman' ],
 105                                 [ lang.lowerAlpha, 'lower-alpha' ],
 106                                 [ lang.upperAlpha, 'upper-alpha' ],
 107                                 [ lang.decimal, 'decimal' ]
 108                         ];
 109
 110                         if ( !CKEDITOR.env.ie || CKEDITOR.env.version > 7 )
 111                         {
 112                                 listStyleOptions.concat( [
 113                                         [ lang.armenian, 'armenian' ],
 114                                         [ lang.decimalLeadingZero, 'decimal-leading-zero' ],
 115                                         [ lang.georgian, 'georgian' ],
 116                                         [ lang.lowerGreek, 'lower-greek' ]
 117                                 ]);
 118                         }
 119
 120                         return {
 121                                 title : lang.numberedTitle,
 122                                 minWidth : 300,
 123                                 minHeight : 50,
 124                                 contents :
 125                                 [
 126                                         {
 127                                                 id : 'info',
 128                                                 accessKey : 'I',
 129                                                 elements :
 130                                                 [
 131                                                         {
 132                                                                 type : 'hbox',
 133                                                                 widths : [ '25%', '75%' ],
 134                                                                 children :
 135                                                                 [
 136                                                                         {
 137                                                                                 label : lang.start,
 138                                                                                 type : 'text',
 139                                                                                 id : 'start',
 140                                                                                 validate : CKEDITOR.dialog.validate.integer( lang.validateStartNumber ),
 141                                                                                 setup : function( element )
 142                                                                                 {
 143                                                                                         // List item start number dominates.
 144                                                                                         var value = element.getFirst( listItem ).getAttribute( 'value' ) || element.getAttribute( 'start' ) || 1;
 145                                                                                         value && this.setValue( value );
 146                                                                                 },
 147                                                                                 commit : function( element )
 148                                                                                 {
 149                                                                                         var firstItem = element.getFirst( listItem );
 150                                                                                         var oldStart = firstItem.getAttribute( 'value' ) || element.getAttribute( 'start' ) || 1;
 151
 152                                                                                         // Force start number on list root.
 153                                                                                         element.getFirst( listItem ).removeAttribute( 'value' );
 154                                                                                         var val = parseInt( this.getValue(), 10 );
 155                                                                                         if ( isNaN( val ) )
 156                                                                                                 element.removeAttribute( 'start' );
 157                                                                                         else
 158                                                                                                 element.setAttribute( 'start', val );
 159
 160                                                                                         // Update consequent list item numbering.
 161                                                                                         var nextItem = firstItem, conseq = oldStart, startNumber = isNaN( val ) ? 1 : val;
 162                                                                                         while ( ( nextItem = nextItem.getNext( listItem ) ) && conseq++ )
 163                                                                                         {
 164                                                                                                 if ( nextItem.getAttribute( 'value' ) == conseq )
 165                                                                                                         nextItem.setAttribute( 'value', startNumber + conseq - oldStart );
 166                                                                                         }
 167                                                                                 }
 168                                                                         },
 169                                                                         {
 170                                                                                 type : 'select',
 171                                                                                 label : lang.type,
 172                                                                                 id : 'type',
 173                                                                                 style : 'width: 100%;',
 174                                                                                 items : listStyleOptions,
 175                                                                                 setup : function( element )
 176                                                                                 {
 177                                                                                         var value = element.getStyle( 'list-style-type' )
 178                                                                                                 || mapListStyle[ element.getAttribute( 'type' ) ]
 179                                                                                                 || element.getAttribute( 'type' )
 180                                                                                                 || '';
 181
 182                                                                                         this.setValue( value );
 183                                                                                 },
 184                                                                                 commit : function( element )
 185                                                                                 {
 186                                                                                         var value = this.getValue();
 187                                                                                         if ( value )
 188                                                                                                 element.setStyle( 'list-style-type', value );
 189                                                                                         else
 190                                                                                                 element.removeStyle( 'list-style-type' );
 191                                                                                 }
 192                                                                         }
 193                                                                 ]
 194                                                         }
 195                                                 ]
 196                                         }
 197                                 ],
 198                                 onShow: function()
 199                                 {
 200                                         var editor = this.getParentEditor(),
 201                                                 element = getListElement( editor, 'ol' );
 202
 203                                         element && this.setupContent( element );
 204                                 },
 205                                 onOk: function()
 206                                 {
 207                                         var editor = this.getParentEditor(),
 208                                                 element = getListElement( editor, 'ol' );
 209
 210                                         element && this.commitContent( element );
 211                                 }
 212                         };
 213                 }
 214         }
 215
 216         CKEDITOR.dialog.add( 'numberedListStyle', function( editor )
 217                 {
 218                         return listStyle( editor, 'numberedListStyle' );
 219                 });
 220
 221         CKEDITOR.dialog.add( 'bulletedListStyle', function( editor )
 222                 {
 223                         return listStyle( editor, 'bulletedListStyle' );
 224                 });
 225 })();