_source/plugins/liststyle/dialogs/liststyle.js

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