_source/plugins/liststyle/dialogs/liststyle.js

   1 /*\r
   2  * Copyright (c) 2003-2010, 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, true );\r
  16         }\r
  17 \r
  18         var mapListStyle = {\r
  19                 'a' : 'lower-alpha',\r
  20                 'A' : 'upper-alpha',\r
  21                 'i' : 'lower-roman',\r
  22                 'I' : 'upper-roman',\r
  23                 '1' : 'decimal',\r
  24                 'disc' : 'disc',\r
  25                 'circle': 'circle',\r
  26                 'square' : 'square'\r
  27         };\r
  28 \r
  29         function listStyle( editor, startupPage )\r
  30         {\r
  31                 if ( startupPage == 'bulletedListStyle' )\r
  32                 {\r
  33                         return {\r
  34                                 title : editor.lang.list.bulletedTitle,\r
  35                                 minWidth : 300,\r
  36                                 minHeight : 50,\r
  37                                 contents :\r
  38                                 [\r
  39                                         {\r
  40                                                 id : 'info',\r
  41                                                 accessKey : 'I',\r
  42                                                 elements :\r
  43                                                 [\r
  44                                                         {\r
  45                                                                 type : 'select',\r
  46                                                                 label : editor.lang.list.type,\r
  47                                                                 id : 'type',\r
  48                                                                 style : 'width: 150px; margin: auto;',\r
  49                                                                 items :\r
  50                                                                 [\r
  51                                                                         [ editor.lang.list.notset, '' ],\r
  52                                                                         [ editor.lang.list.circle, 'circle' ],\r
  53                                                                         [ editor.lang.list.disc,  'disc' ],\r
  54                                                                         [ editor.lang.list.square, 'square' ]\r
  55                                                                 ],\r
  56                                                                 setup : function( element )\r
  57                                                                 {\r
  58                                                                         var value = element.getStyle( 'list-style-type' )\r
  59                                                                                                 || mapListStyle[ element.getAttribute( 'type' ) ]\r
  60                                                                                                 || element.getAttribute( 'type' )\r
  61                                                                                                 || '';\r
  62 \r
  63                                                                         this.setValue( value );\r
  64                                                                 },\r
  65                                                                 commit : function( element )\r
  66                                                                 {\r
  67                                                                         var value = this.getValue();\r
  68                                                                         if ( value )\r
  69                                                                                 element.setStyle( 'list-style-type', value );\r
  70                                                                         else\r
  71                                                                                 element.removeStyle( 'list-style-type' );\r
  72                                                                 }\r
  73                                                         }\r
  74                                                 ]\r
  75                                         }\r
  76                                 ],\r
  77                                 onShow: function()\r
  78                                 {\r
  79                                         var editor = this.getParentEditor(),\r
  80                                                 element = getListElement( editor, 'ul' );\r
  81 \r
  82                                         element && this.setupContent( element );\r
  83                                 },\r
  84                                 onOk: function()\r
  85                                 {\r
  86                                         var editor = this.getParentEditor(),\r
  87                                                 element = getListElement( editor, 'ul' );\r
  88 \r
  89                                         element && this.commitContent( element );\r
  90                                 }\r
  91                         };\r
  92                 }\r
  93                 else if ( startupPage == 'numberedListStyle'  )\r
  94                 {\r
  95 \r
  96                         var listStyleOptions =\r
  97                         [\r
  98                                 [ editor.lang.list.notset, '' ],\r
  99                                 [ editor.lang.list.lowerRoman, 'lower-roman' ],\r
 100                                 [ editor.lang.list.upperRoman, 'upper-roman' ],\r
 101                                 [ editor.lang.list.lowerAlpha, 'lower-alpha' ],\r
 102                                 [ editor.lang.list.upperAlpha, 'upper-alpha' ],\r
 103                                 [ editor.lang.list.decimal, 'decimal' ]\r
 104                         ];\r
 105 \r
 106                         if ( !CKEDITOR.env.ie || CKEDITOR.env.version > 7 )\r
 107                         {\r
 108                                 listStyleOptions.concat( [\r
 109                                         [ editor.lang.list.armenian, 'armenian' ],\r
 110                                         [ editor.lang.list.decimalLeadingZero, 'decimal-leading-zero' ],\r
 111                                         [ editor.lang.list.georgian, 'georgian' ],\r
 112                                         [ editor.lang.list.lowerGreek, 'lower-greek' ]\r
 113                                 ]);\r
 114                         }\r
 115 \r
 116                         return {\r
 117                                 title : editor.lang.list.numberedTitle,\r
 118                                 minWidth : 300,\r
 119                                 minHeight : 50,\r
 120                                 contents :\r
 121                                 [\r
 122                                         {\r
 123                                                 id : 'info',\r
 124                                                 accessKey : 'I',\r
 125                                                 elements :\r
 126                                                 [\r
 127                                                         {\r
 128                                                                 type : 'hbox',\r
 129                                                                 widths : [ '25%', '75%' ],\r
 130                                                                 children :\r
 131                                                                 [\r
 132                                                                         {\r
 133                                                                                 label : editor.lang.list.start,\r
 134                                                                                 type : 'text',\r
 135                                                                                 id : 'start',\r
 136                                                                                 validate : CKEDITOR.dialog.validate.integer( editor.lang.list.validateStartNumber ),\r
 137                                                                                 setup : function( element )\r
 138                                                                                 {\r
 139                                                                                         var value = element.getAttribute( 'start' ) || 1;\r
 140                                                                                         value && this.setValue( value );\r
 141                                                                                 },\r
 142                                                                                 commit : function( element )\r
 143                                                                                 {\r
 144                                                                                         element.setAttribute( 'start', this.getValue() );\r
 145                                                                                 }\r
 146                                                                         },\r
 147                                                                         {\r
 148                                                                                 type : 'select',\r
 149                                                                                 label : editor.lang.list.type,\r
 150                                                                                 id : 'type',\r
 151                                                                                 style : 'width: 100%;',\r
 152                                                                                 items : listStyleOptions,\r
 153                                                                                 setup : function( element )\r
 154                                                                                 {\r
 155                                                                                         var value = element.getStyle( 'list-style-type' )\r
 156                                                                                                 || mapListStyle[ element.getAttribute( 'type' ) ]\r
 157                                                                                                 || element.getAttribute( 'type' )\r
 158                                                                                                 || '';\r
 159 \r
 160                                                                                         this.setValue( value );\r
 161                                                                                 },\r
 162                                                                                 commit : function( element )\r
 163                                                                                 {\r
 164                                                                                         var value = this.getValue();\r
 165                                                                                         if ( value )\r
 166                                                                                                 element.setStyle( 'list-style-type', value );\r
 167                                                                                         else\r
 168                                                                                                 element.removeStyle( 'list-style-type' );\r
 169                                                                                 }\r
 170                                                                         }\r
 171                                                                 ]\r
 172                                                         }\r
 173                                                 ]\r
 174                                         }\r
 175                                 ],\r
 176                                 onShow: function()\r
 177                                 {\r
 178                                         var editor = this.getParentEditor(),\r
 179                                                 element = getListElement( editor, 'ol' );\r
 180 \r
 181                                         element && this.setupContent( element );\r
 182                                 },\r
 183                                 onOk: function()\r
 184                                 {\r
 185                                         var editor = this.getParentEditor(),\r
 186                                                 element = getListElement( editor, 'ol' );\r
 187 \r
 188                                         element && this.commitContent( element );\r
 189                                 }\r
 190                         };\r
 191                 }\r
 192         }\r
 193 \r
 194         CKEDITOR.dialog.add( 'numberedListStyle', function( editor )\r
 195                 {\r
 196                         return listStyle( editor, 'numberedListStyle' );\r
 197                 });\r
 198 \r
 199         CKEDITOR.dialog.add( 'bulletedListStyle', function( editor )\r
 200                 {\r
 201                         return listStyle( editor, 'bulletedListStyle' );\r
 202                 });\r
 203 })();\r