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