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