git.roojs.org Git - roojs1/blob - Roo/form/HtmlEditor/ToolbarContext.js

   1 // <script type="text/javascript">
   2 /*
   3  * Based on
   4  * Ext JS Library 1.1.1
   5  * Copyright(c) 2006-2007, Ext JS, LLC.
   6  *
   7
   8  */
   9
  10
  11 /**
  12  * @class Roo.form.HtmlEditor.ToolbarContext
  13  * Context Toolbar
  14  *
  15  * Usage:
  16  *
  17  new Roo.form.HtmlEditor({
  18     ....
  19     toolbars : [
  20         new Roo.form.HtmlEditor.ToolbarStandard(),
  21         new Roo.form.HtmlEditor.ToolbarContext()
  22         })
  23     }
  24
  25  *
  26  * @config : {Object} disable List of elements to disable.. (not done yet.)
  27  *
  28  *
  29  */
  30
  31 Roo.form.HtmlEditor.ToolbarContext = function(config)
  32 {
  33
  34     Roo.apply(this, config);
  35     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
  36     // dont call parent... till later.
  37 }
  38 Roo.form.HtmlEditor.ToolbarContext.types = {
  39     'IMG' : {
  40         width : {
  41             title: "Width",
  42             width: 40
  43         },
  44         height:  {
  45             title: "Height",
  46             width: 40
  47         },
  48         align: {
  49             title: "Align",
  50             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  51             width : 80
  52
  53         },
  54         border: {
  55             title: "Border",
  56             width: 40
  57         },
  58         alt: {
  59             title: "Alt",
  60             width: 120
  61         },
  62         src : {
  63             title: "Src",
  64             width: 220
  65         }
  66
  67     },
  68     'A' : {
  69         name : {
  70             title: "Name",
  71             width: 50
  72         },
  73         href:  {
  74             title: "Href",
  75             width: 220
  76         } // border?
  77
  78     },
  79     'TABLE' : {
  80         rows : {
  81             title: "Rows",
  82             width: 20
  83         },
  84         cols : {
  85             title: "Cols",
  86             width: 20
  87         },
  88         width : {
  89             title: "Width",
  90             width: 40
  91         },
  92         height : {
  93             title: "Height",
  94             width: 40
  95         },
  96         border : {
  97             title: "Border",
  98             width: 20
  99         }
 100     },
 101     'TD' : {
 102         width : {
 103             title: "Width",
 104             width: 40
 105         },
 106         height : {
 107             title: "Height",
 108             width: 40
 109         },
 110         align: {
 111             title: "Align",
 112             opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
 113             width: 40
 114         },
 115         valign: {
 116             title: "Valign",
 117             opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
 118             width: 40
 119         },
 120         colspan: {
 121             title: "Colspan",
 122             width: 20
 123
 124         }
 125     },
 126     'INPUT' : {
 127         name : {
 128             title: "name",
 129             width: 120
 130         },
 131         value : {
 132             title: "Value",
 133             width: 120
 134         },
 135         width : {
 136             title: "Width",
 137             width: 40
 138         }
 139     },
 140     'LABEL' : {
 141         'for' : {
 142             title: "For",
 143             width: 120
 144         }
 145     },
 146     'TEXTAREA' : {
 147           name : {
 148             title: "name",
 149             width: 120
 150         },
 151         rows : {
 152             title: "Rows",
 153             width: 20
 154         },
 155         cols : {
 156             title: "Cols",
 157             width: 20
 158         }
 159     },
 160     'SELECT' : {
 161         name : {
 162             title: "name",
 163             width: 120
 164         },
 165         selectoptions : {
 166             title: "Options",
 167             width: 200
 168         }
 169     },
 170     'BODY' : {
 171         title : {
 172             title: "title",
 173             width: 120,
 174             disabled : true
 175         }
 176     }
 177 };
 178
 179
 180
 181 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
 182
 183     tb: false,
 184
 185     rendered: false,
 186
 187     editor : false,
 188     /**
 189      * @cfg {Object} disable  List of toolbar elements to disable
 190
 191      */
 192     disable : false,
 193
 194
 195
 196     toolbars : false,
 197
 198     init : function(editor)
 199     {
 200         this.editor = editor;
 201
 202
 203         var fid = editor.frameId;
 204         var etb = this;
 205         function btn(id, toggle, handler){
 206             var xid = fid + '-'+ id ;
 207             return {
 208                 id : xid,
 209                 cmd : id,
 210                 cls : 'x-btn-icon x-edit-'+id,
 211                 enableToggle:toggle !== false,
 212                 scope: editor, // was editor...
 213                 handler:handler||editor.relayBtnCmd,
 214                 clickEvent:'mousedown',
 215                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
 216                 tabIndex:-1
 217             };
 218         }
 219         // create a new element.
 220         var wdiv = editor.wrap.createChild({
 221                 tag: 'div'
 222             }, editor.wrap.dom.firstChild.nextSibling, true);
 223
 224         // can we do this more than once??
 225
 226          // stop form submits
 227
 228
 229         // disable everything...
 230         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
 231         this.toolbars = {};
 232
 233         for (var i in  ty) {
 234             this.toolbars[i] = this.buildToolbar(ty[i],i);
 235         }
 236         this.tb = this.toolbars.BODY;
 237         this.tb.el.show();
 238
 239
 240         this.rendered = true;
 241
 242         // the all the btns;
 243         editor.on('editorevent', this.updateToolbar, this);
 244         // other toolbars need to implement this..
 245         //editor.on('editmodechange', this.updateToolbar, this);
 246     },
 247
 248
 249
 250     /**
 251      * Protected method that will not generally be called directly. It triggers
 252      * a toolbar update by reading the markup state of the current selection in the editor.
 253      */
 254     updateToolbar: function(){
 255
 256         if(!this.editor.activated){
 257             this.editor.onFirstFocus();
 258             return;
 259         }
 260
 261
 262         var ans = this.editor.getAllAncestors();
 263
 264         // pick
 265         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
 266         var sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editor.doc.body;
 267         sel = sel ? sel : this.editor.doc.body;
 268         sel = sel.tagName.length ? sel : this.editor.doc.body;
 269         var tn = sel.tagName.toUpperCase();
 270         sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
 271         tn = sel.tagName.toUpperCase();
 272         if (this.tb.name  == tn) {
 273             return; // no change
 274         }
 275         this.tb.el.hide();
 276         ///console.log("show: " + tn);
 277         this.tb =  this.toolbars[tn];
 278         this.tb.el.show();
 279         this.tb.fields.each(function(e) {
 280             e.setValue(sel.getAttribute(e.name));
 281         });
 282         this.tb.selectedNode = sel;
 283
 284
 285         Roo.menu.MenuMgr.hideAll();
 286
 287         //this.editorsyncValue();
 288     },
 289
 290
 291     // private
 292     onDestroy : function(){
 293         if(this.rendered){
 294
 295             this.tb.items.each(function(item){
 296                 if(item.menu){
 297                     item.menu.removeAll();
 298                     if(item.menu.el){
 299                         item.menu.el.destroy();
 300                     }
 301                 }
 302                 item.destroy();
 303             });
 304
 305         }
 306     },
 307     onFirstFocus: function() {
 308         // need to do this for all the toolbars..
 309         this.tb.items.each(function(item){
 310            item.enable();
 311         });
 312     },
 313     buildToolbar: function(tlist, nm)
 314     {
 315         var editor = this.editor;
 316          // create a new element.
 317         var wdiv = editor.wrap.createChild({
 318                 tag: 'div'
 319             }, editor.wrap.dom.firstChild.nextSibling, true);
 320
 321
 322         var tb = new Roo.Toolbar(wdiv);
 323         tb.add(nm+ ":&nbsp;");
 324         for (var i in tlist) {
 325             var item = tlist[i];
 326             tb.add(item.title + ":&nbsp;");
 327             if (item.opts) {
 328                 // fixme
 329
 330
 331                 tb.addField( new Roo.form.ComboBox({
 332                     store: new Roo.data.SimpleStore({
 333                         id : 'val',
 334                         fields: ['val'],
 335                         data : item.opts // from states.js
 336                     }),
 337                     name : i,
 338                     displayField:'val',
 339                     typeAhead: false,
 340                     mode: 'local',
 341                     editable : false,
 342                     triggerAction: 'all',
 343                     emptyText:'Select',
 344                     selectOnFocus:true,
 345                     width: item.width ? item.width  : 130,
 346                     listeners : {
 347                         'select': function(c, r, i) {
 348                             tb.selectedNode.setAttribute(c.name, r.get('val'));
 349                         }
 350                     }
 351
 352                 }));
 353                 continue;
 354
 355
 356
 357
 358
 359                 tb.addField( new Roo.form.TextField({
 360                     name: i,
 361                     width: 100,
 362                     //allowBlank:false,
 363                     value: ''
 364                 }));
 365                 continue;
 366             }
 367             tb.addField( new Roo.form.TextField({
 368                 name: i,
 369                 width: item.width,
 370                 //allowBlank:true,
 371                 value: '',
 372                 listeners: {
 373                     'change' : function(f, nv, ov) {
 374                         tb.selectedNode.setAttribute(f.name, nv);
 375                     }
 376                 }
 377             }));
 378
 379         }
 380         tb.el.on('click', function(e){
 381             e.preventDefault(); // what does this do?
 382         });
 383         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
 384         tb.el.hide();
 385         tb.name = nm;
 386         // dont need to disable them... as they will get hidden
 387         return tb;
 388
 389
 390     }
 391
 392
 393
 394
 395 });
 396
 397
 398
 399
 400