1 /* 2 * Copyright (c) 2003-2012, 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 })(); 226