sources/plugins/liststyle/dialogs/liststyle.js

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