www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/ckeditor_widgets/js/plugins/widgetbootstrap/plugin.js

   1 // Init default alert classes
   2
   3 CKEDITOR.config.widgetbootstrapAlert_alertTypes = {
   4     'alert': 'Alert',
   5     'info': 'Info',
   6     'warning': 'Warning',
   7     'success': 'Success'
   8 };
   9
  10
  11 CKEDITOR.plugins.add( 'widgetbootstrap', {
  12     requires: 'widget',
  13
  14     icons: 'widgetbootstrapLeftCol,widgetbootstrapRightCol,widgetbootstrapTwoCol,widgetbootstrapThreeCol,widgetbootstrapAlert',
  15
  16     /*defaults : {
  17         name: 'accordion',
  18         count: 3,
  19         activePanel: 1,
  20         multiExpand: false
  21     },*/
  22
  23     init: function( editor ) {
  24
  25         // Configurable settings
  26         //var allowedWidget = editor.config.widgetbootstrap_allowedWidget != undefined ? editor.config.widgetbootstrap_allowedFull :
  27         //    'p h2 h3 h4 h5 h6 span br ul ol li strong em img[!src,alt,width,height]';
  28         var allowedFull = editor.config.widgetbootstrap_allowedFull != undefined ? editor.config.widgetbootstrap_allowedFull :
  29             'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
  30         //var allowedText = editor.config.widgetbootstrap_allowedText != undefined ? editor.config.widgetbootstrap_allowedFull :
  31         //    'p span br ul ol li strong em';
  32
  33
  34         allowedWidget = allowedFull;
  35         //allowedText = allowedWidget;
  36
  37         var showButtons = editor.config.widgetbootstrapShowButtons != undefined ? editor.config.widgetbootstrapShowButtons : true;
  38
  39         // Define the widgets
  40         editor.widgets.add( 'widgetbootstrapLeftCol', {
  41
  42             button: showButtons ? 'Add left column box' : undefined,
  43
  44             template:
  45                 '<div class="row two-col-left">' +
  46                     '<div class="col-md-3 col-sidebar"><p><img src="http://placehold.it/300x250&text=Image" /></p></div>' +
  47                     '<div class="col-md-9 col-main"><p>Content</p></div>' +
  48                 '</div>',
  49
  50             editables: {
  51                 col1: {
  52                     selector: '.col-sidebar',
  53                     allowedContent: allowedWidget
  54                 },
  55                 col2: {
  56                     selector: '.col-main',
  57                     allowedContent: allowedWidget
  58                 }
  59             },
  60
  61             allowedContent: allowedFull,
  62
  63             upcast: function( element ) {
  64                 return element.name == 'div' && element.hasClass( 'two-col-right-left' );
  65             }
  66
  67         } );
  68
  69         editor.widgets.add( 'widgetbootstrapRightCol', {
  70
  71             button: showButtons ? 'Add right column box' : undefined,
  72
  73             template:
  74                 '<div class="row two-col-right">' +
  75                     '<div class="col-md-9 col-main"><p>Content</p></div>' +
  76                     '<div class="col-md-3 col-sidebar"><p><img src="http://placehold.it/300x250&text=Image" /></p></div>' +
  77                 '</div>',
  78
  79             editables: {
  80                 col1: {
  81                     selector: '.col-sidebar',
  82                     allowedContent: allowedWidget
  83                 },
  84                 col2: {
  85                     selector: '.col-main',
  86                     allowedContent: allowedWidget
  87                 }
  88             },
  89
  90             allowedContent: allowedFull,
  91
  92             upcast: function( element ) {
  93                 return element.name == 'div' && element.hasClass( 'two-col-right' );
  94             }
  95
  96         } );
  97
  98         editor.widgets.add( 'widgetbootstrapTwoCol', {
  99
 100             button: showButtons ? 'Add two column box' : undefined,
 101
 102             template:
 103                 '<div class="row two-col">' +
 104                     '<div class="col-md-6 col-1"><p><img src="http://placehold.it/500x280&text=Image" /></p><p>Content</p></div>' +
 105                     '<div class="col-md-6 col-2"><p><img src="http://placehold.it/500x280&text=Image" /></p><p>Content</p></div>' +
 106                 '</div>',
 107
 108             editables: {
 109                 col1: {
 110                     selector: '.col-1',
 111                     allowedContent: allowedWidget
 112                 },
 113                 col2: {
 114                     selector: '.col-2',
 115                     allowedContent: allowedWidget
 116                 }
 117             },
 118
 119             allowedContent: allowedFull,
 120
 121             upcast: function( element ) {
 122                 return element.name == 'div' && element.hasClass( 'two-col' );
 123             }
 124
 125         } );
 126
 127         editor.widgets.add( 'widgetbootstrapThreeCol', {
 128
 129             button: showButtons ? 'Add three column box' : undefined,
 130
 131             template:
 132                 '<div class="row three-col">' +
 133                     '<div class="col-md-4 col-1"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
 134                     '<div class="col-md-4 col-2"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
 135                     '<div class="col-md-4 col-3"><p><img src="http://placehold.it/400x225&text=Image" /></p><p>Text below</p></div>' +
 136                 '</div>',
 137
 138             editables: {
 139                 col1: {
 140                     selector: '.col-1',
 141                     allowedContent: allowedWidget
 142                 },
 143                 col2: {
 144                     selector: '.col-2',
 145                     allowedContent: allowedWidget
 146                 },
 147                 col3: {
 148                     selector: '.col-3',
 149                     allowedContent: allowedWidget
 150                 }
 151             },
 152
 153             allowedContent: allowedFull,
 154
 155             upcast: function( element ) {
 156                 return element.name == 'div' && element.hasClass( 'three-col' );
 157             }
 158
 159         } );
 160
 161         editor.addCommand( 'openwidgetbootstrapAlert', new CKEDITOR.dialogCommand( 'widgetbootstrapAlert' ) );
 162
 163         // Add foundation alert button
 164         // Textare decodes html entities
 165         //var textarea = new CKEDITOR.dom.element( 'textarea' );
 166
 167         editor.widgets.add( 'widgetbootstrapAlert', {
 168
 169             button: showButtons ? 'Add alert box' : undefined,
 170             dialog: 'widgetbootstrapAlert',
 171
 172             template: '<div class="alert-box"><div class="alert-text">Some Text</span></div>',
 173
 174             editables: {
 175                 alertBox: {
 176                     selector: '.alert-text',
 177                     allowedContent: allowedWidget
 178                 },
 179             },
 180
 181             allowedContent: allowedFull,
 182
 183             data: function() {
 184                 var newData = this.data,
 185                     oldData = this.oldData;
 186
 187                 /*if( newData.alertText ) {
 188                     this.element.getChild( 0 ).setHtml( CKEDITOR.tools.htmlEncode( newData.alertText ) );
 189                 }*/
 190
 191                 if ( oldData && newData.type != oldData.type )
 192                     this.element.removeClass(oldData.type);
 193
 194                 if ( newData.type )
 195                     this.element.addClass(newData.type);
 196
 197                 // Save oldData.
 198                 this.oldData = CKEDITOR.tools.copy( newData );
 199             },
 200
 201             upcast: function( el, data ) {
 202                 if (el.name != 'div' || !el.hasClass( 'alert-box' ))
 203                     return;
 204
 205                 var childrenArray = el.children,
 206                     alertText;
 207
 208                 if ( childrenArray.length !== 1 || !( alertText = childrenArray[ 0 ] ).hasClass('alert-text'))
 209                     return;
 210
 211                 // Acceptable alert types
 212                 var alertTypes = CKEDITOR.config.widgetbootstrapAlert_alertTypes;
 213                 // Check alert types
 214                 for(var i = 0; i < el.classes.length; i++) {
 215                     if(el.classes[i] != 'alert-box') {
 216                         for ( alertName in alertTypes ) {
 217                             if(el.classes[i] == alertName) {
 218                                 data.type = alertName;
 219                             }
 220                         }
 221                     }
 222                 }
 223
 224                 // Use textarea to decode HTML entities (#11926).
 225                 //textarea.setHtml( alertText.getHtml() );
 226                 //data.alertText = textarea.getValue();
 227
 228                 return el;
 229             },
 230
 231             downcast: function( el ) {
 232                 return el;
 233             }
 234
 235         } );
 236         // Alert dialog
 237         CKEDITOR.dialog.add( 'widgetbootstrapAlert', this.path + 'dialogs/widgetbootstrapAlert.js' );
 238
 239         /*CKEDITOR.dialog.add( 'widgetbootstrapAccordion', this.path + 'dialogs/widgetbootstrapAccordion.js' );
 240         editor.widgets.add( 'widgetbootstrapAccordion', {
 241
 242             button: showButtons ? 'Add accordion box' : undefined,
 243
 244             template:
 245                 '<dl class="accordion" data-accordion><div class="col-1"></div></dl>',
 246
 247
 248             allowedContent: allowedFull,
 249
 250             dialog: 'widgetbootstrapAccordion',
 251
 252             upcast: function( element ) {
 253                 return element.name == 'div' && element.hasClass( 'accordion' );
 254             },
 255
 256             /*init: function() {
 257                 var width = this.element.getStyle( 'width' );
 258                 if ( width )
 259                     this.setData( 'width', width );
 260                 if ( this.element.hasClass( 'align-left' ) )
 261                     this.setData( 'align', 'left' );
 262                 if ( this.element.hasClass( 'align-right' ) )
 263                     this.setData( 'align', 'right' );
 264                 if ( this.element.hasClass( 'align-center' ) )
 265                     this.setData( 'align', 'center' );
 266             },
 267
 268             data: function() {
 269
 270
 271                 var name = this.data.name != undefined ? this.data.name : 'accordion';
 272                 var count = this.data.count != undefined ? this.data.count : 0;
 273                 //@todo: var prevCount = this.data.prevCount != undefined ? this.data.prevCount :
 274
 275                 // Add rows
 276                 if (this.data.prevCount == undefined || this.data.prevCount < count) {
 277                     for (var i=this.data.prevCount != undefined ? this.data.prevCount : 1; i<=count; i++) {
 278                         var active = this.data.activePanel == i ? ' active' : '';
 279                         var template =
 280                             '<dd class="accordion-navigation">' +
 281                                 '<a href="#'+ name+i +'"><div class="accordion-header-'+i+'">Heading '+i+'</div></a>' +
 282                                 '<div id="panel'+ name+i +'" class="content content-'+i+active+'">' +
 283                                   '' +
 284                                 '</div>'
 285                             '</dd>'
 286                         var newPanel = CKEDITOR.dom.element.createFromHtml( template );
 287                         this.element.append(newPanel);
 288                     }
 289
 290                     // For some reason, the initEditable call needs to come in a separate for loop
 291                     // the html code added wasn't in the DOM yet
 292                     for (var i=this.data.prevCount != undefined ? this.data.prevCount : 1; i<=count; i++) {
 293                         this.initEditable( 'heading'+i, {
 294                             selector: '.accordion-header-'+i
 295                         } );
 296                         this.initEditable( 'content'+i, {
 297                             selector: '.content-'+i
 298                         } );
 299                     }
 300                 }
 301
 302                 // Remove rows
 303                 if (this.data.prevCount != undefined && this.data.prevCount > count) {
 304                     // @todo
 305                 }
 306
 307
 308                 this.data.prevCount = i;
 309             }
 310         } );*/
 311
 312         // Append the widget's styles when in the CKEditor edit page,
 313         // added for better user experience.
 314         // Assign or append the widget's styles depending on the existing setup.
 315         if (typeof editor.config.contentsCss == 'object') {
 316             editor.config.contentsCss.push(CKEDITOR.getUrl(this.path + 'contents.css'));
 317         }
 318
 319         else {
 320             editor.config.contentsCss = [editor.config.contentsCss, CKEDITOR.getUrl(this.path + 'contents.css')];
 321         }
 322
 323     }
 324
 325
 326 } );