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         { xtype: 'ToolbarStandard', styles : {} }
  21         { xtype: 'ToolbarContext', disable : {} }
  22     ]
  23 })
  24
  25
  26  *
  27  * @config : {Object} disable List of elements to disable.. (not done yet.)
  28  * @config : {Object} styles  Map of styles available.
  29  *
  30  */
  31
  32 Roo.form.HtmlEditor.ToolbarContext = function(config)
  33 {
  34
  35     Roo.apply(this, config);
  36     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
  37     // dont call parent... till later.
  38     this.styles = this.styles || {};
  39 }
  40
  41
  42
  43 Roo.form.HtmlEditor.ToolbarContext.types = {
  44     'IMG' : {
  45         width : {
  46             title: "Width",
  47             width: 40
  48         },
  49         height:  {
  50             title: "Height",
  51             width: 40
  52         },
  53         align: {
  54             title: "Align",
  55             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  56             width : 80
  57
  58         },
  59         border: {
  60             title: "Border",
  61             width: 40
  62         },
  63         alt: {
  64             title: "Alt",
  65             width: 120
  66         },
  67         src : {
  68             title: "Src",
  69             width: 220
  70         }
  71
  72     },
  73     'A' : {
  74         name : {
  75             title: "Name",
  76             width: 50
  77         },
  78         href:  {
  79             title: "Href",
  80             width: 220
  81         } // border?
  82
  83     },
  84     'TABLE' : {
  85         rows : {
  86             title: "Rows",
  87             width: 20
  88         },
  89         cols : {
  90             title: "Cols",
  91             width: 20
  92         },
  93         width : {
  94             title: "Width",
  95             width: 40
  96         },
  97         height : {
  98             title: "Height",
  99             width: 40
 100         },
 101         border : {
 102             title: "Border",
 103             width: 20
 104         }
 105     },
 106     'TD' : {
 107         width : {
 108             title: "Width",
 109             width: 40
 110         },
 111         height : {
 112             title: "Height",
 113             width: 40
 114         },
 115         align: {
 116             title: "Align",
 117             opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
 118             width: 80
 119         },
 120         valign: {
 121             title: "Valign",
 122             opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
 123             width: 80
 124         },
 125         colspan: {
 126             title: "Colspan",
 127             width: 20
 128
 129         }
 130     },
 131     'INPUT' : {
 132         name : {
 133             title: "name",
 134             width: 120
 135         },
 136         value : {
 137             title: "Value",
 138             width: 120
 139         },
 140         width : {
 141             title: "Width",
 142             width: 40
 143         }
 144     },
 145     'LABEL' : {
 146         'for' : {
 147             title: "For",
 148             width: 120
 149         }
 150     },
 151     'TEXTAREA' : {
 152           name : {
 153             title: "name",
 154             width: 120
 155         },
 156         rows : {
 157             title: "Rows",
 158             width: 20
 159         },
 160         cols : {
 161             title: "Cols",
 162             width: 20
 163         }
 164     },
 165     'SELECT' : {
 166         name : {
 167             title: "name",
 168             width: 120
 169         },
 170         selectoptions : {
 171             title: "Options",
 172             width: 200
 173         }
 174     },
 175
 176     // should we really allow this??
 177     // should this just be
 178     'BODY' : {
 179         title : {
 180             title: "title",
 181             width: 200,
 182             disabled : true
 183         }
 184     },
 185     '*' : {
 186         // empty..
 187     }
 188
 189 };
 190 Roo.form.HtmlEditor.ToolbarContext[ 'font-family']  = {
 191         title : "font",
 192         opts : [
 193             [""],
 194             [ 'Arial'],
 195             [ 'Courier New'],
 196             [ 'Tahoma'],
 197             [ 'Times New Roman'],
 198             [ 'Verdana' ]
 199         ],
 200         width: 80
 201     }
 202 }
 203
 204 Roo.each([ 'SPAN', 'DIV' , 'TD' , 'P' ], function(tg) {
 205     if (typeof(Roo.form.HtmlEditor.ToolbarContext.types[tg]) == 'undefined') {
 206         Roo.form.HtmlEditor.ToolbarContext.types[tg] = {};
 207     }
 208
 209     Roo.form.HtmlEditor.ToolbarContext.types[tg]['font-family'] = Roo.form.HtmlEditor.ToolbarContext[ 'font-family'] ;
 210 }
 211
 212
 213 Roo.form.HtmlEditor.ToolbarContext.types
 214
 215
 216 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
 217
 218     tb: false,
 219
 220     rendered: false,
 221
 222     editor : false,
 223     /**
 224      * @cfg {Object} disable  List of toolbar elements to disable
 225
 226      */
 227     disable : false,
 228     /**
 229      * @cfg {Object} styles List of styles
 230      *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
 231      *
 232      * These must be defined in the page, so they get rendered correctly..
 233      * .headline { }
 234      * TD.underline { }
 235      *
 236      */
 237     styles : false,
 238
 239
 240
 241     toolbars : false,
 242
 243     init : function(editor)
 244     {
 245         this.editor = editor;
 246
 247
 248         var fid = editor.frameId;
 249         var etb = this;
 250         function btn(id, toggle, handler){
 251             var xid = fid + '-'+ id ;
 252             return {
 253                 id : xid,
 254                 cmd : id,
 255                 cls : 'x-btn-icon x-edit-'+id,
 256                 enableToggle:toggle !== false,
 257                 scope: editor, // was editor...
 258                 handler:handler||editor.relayBtnCmd,
 259                 clickEvent:'mousedown',
 260                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
 261                 tabIndex:-1
 262             };
 263         }
 264         // create a new element.
 265         var wdiv = editor.wrap.createChild({
 266                 tag: 'div'
 267             }, editor.wrap.dom.firstChild.nextSibling, true);
 268
 269         // can we do this more than once??
 270
 271          // stop form submits
 272
 273
 274         // disable everything...
 275         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
 276         this.toolbars = {};
 277
 278         for (var i in  ty) {
 279
 280             this.toolbars[i] = this.buildToolbar(ty[i],i);
 281         }
 282         this.tb = this.toolbars.BODY;
 283         this.tb.el.show();
 284         this.buildFooter();
 285         this.footer.show();
 286         editor.on('hide', function( ) { this.footer.hide() }, this);
 287         editor.on('show', function( ) { this.footer.show() }, this);
 288
 289
 290         this.rendered = true;
 291
 292         // the all the btns;
 293         editor.on('editorevent', this.updateToolbar, this);
 294         // other toolbars need to implement this..
 295         //editor.on('editmodechange', this.updateToolbar, this);
 296     },
 297
 298
 299
 300     /**
 301      * Protected method that will not generally be called directly. It triggers
 302      * a toolbar update by reading the markup state of the current selection in the editor.
 303      */
 304     updateToolbar: function(editor,ev,sel){
 305
 306         //Roo.log(ev);
 307         // capture mouse up - this is handy for selecting images..
 308         // perhaps should go somewhere else...
 309         if(!this.editor.activated){
 310              this.editor.onFirstFocus();
 311             return;
 312         }
 313
 314         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
 315         // selectNode - might want to handle IE?
 316         if (ev &&
 317             (ev.type == 'mouseup' || ev.type == 'click' ) &&
 318             ev.target && ev.target.tagName == 'IMG') {
 319             // they have click on an image...
 320             // let's see if we can change the selection...
 321             sel = ev.target;
 322
 323               var nodeRange = sel.ownerDocument.createRange();
 324             try {
 325                 nodeRange.selectNode(sel);
 326             } catch (e) {
 327                 nodeRange.selectNodeContents(sel);
 328             }
 329             //nodeRange.collapse(true);
 330             var s = editor.win.getSelection();
 331             s.removeAllRanges();
 332             s.addRange(nodeRange);
 333         }
 334
 335
 336         var updateFooter = sel ? false : true;
 337
 338
 339         var ans = this.editor.getAllAncestors();
 340
 341         // pick
 342         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
 343
 344         if (!sel) {
 345             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editor.doc.body;
 346             sel = sel ? sel : this.editor.doc.body;
 347             sel = sel.tagName.length ? sel : this.editor.doc.body;
 348
 349         }
 350         // pick a menu that exists..
 351         var tn = sel.tagName.toUpperCase();
 352         //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
 353
 354         tn = sel.tagName.toUpperCase();
 355
 356         var lastSel = this.tb.selectedNode
 357
 358         this.tb.selectedNode = sel;
 359
 360         // if current menu does not match..
 361         if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
 362
 363             this.tb.el.hide();
 364             ///console.log("show: " + tn);
 365             this.tb =  typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
 366             this.tb.el.show();
 367             // update name
 368             this.tb.items.first().el.innerHTML = tn + ':&nbsp;';
 369
 370
 371             // update attributes
 372             if (this.tb.fields) {
 373                 this.tb.fields.each(function(e) {
 374                    e.setValue(sel.getAttribute(e.attrname));
 375                 });
 376             }
 377
 378             var hasStyles = false;
 379             for(var i in this.styles) {
 380                 hasStyles = true;
 381                 break;
 382             }
 383
 384             // update styles
 385             if (hasStyles) {
 386                 var st = this.tb.fields.item(0);
 387
 388                 st.store.removeAll();
 389
 390
 391                 var cn = sel.className.split(/\s+/);
 392
 393                 var avs = [];
 394                 if (this.styles['*']) {
 395
 396                     Roo.each(this.styles['*'], function(v) {
 397                         avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
 398                     });
 399                 }
 400                 if (this.styles[tn]) {
 401                     Roo.each(this.styles[tn], function(v) {
 402                         avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
 403                     });
 404                 }
 405
 406                 st.store.loadData(avs);
 407                 st.collapse();
 408                 st.setValue(cn);
 409             }
 410             // flag our selected Node.
 411             this.tb.selectedNode = sel;
 412
 413
 414             Roo.menu.MenuMgr.hideAll();
 415
 416         }
 417
 418         if (!updateFooter) {
 419             //this.footDisp.dom.innerHTML = '';
 420             return;
 421         }
 422         // update the footer
 423         //
 424         var html = '';
 425
 426         this.footerEls = ans.reverse();
 427         Roo.each(this.footerEls, function(a,i) {
 428             if (!a) { return; }
 429             html += html.length ? ' &gt; '  :  '';
 430
 431             html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
 432
 433         });
 434
 435         //
 436         var sz = this.footDisp.up('td').getSize();
 437         this.footDisp.dom.style.width = (sz.width -10) + 'px';
 438         this.footDisp.dom.style.marginLeft = '5px';
 439
 440         this.footDisp.dom.style.overflow = 'hidden';
 441
 442         this.footDisp.dom.innerHTML = html;
 443
 444         //this.editorsyncValue();
 445     },
 446
 447
 448
 449
 450     // private
 451     onDestroy : function(){
 452         if(this.rendered){
 453
 454             this.tb.items.each(function(item){
 455                 if(item.menu){
 456                     item.menu.removeAll();
 457                     if(item.menu.el){
 458                         item.menu.el.destroy();
 459                     }
 460                 }
 461                 item.destroy();
 462             });
 463
 464         }
 465     },
 466     onFirstFocus: function() {
 467         // need to do this for all the toolbars..
 468         this.tb.items.each(function(item){
 469            item.enable();
 470         });
 471     },
 472     buildToolbar: function(tlist, nm)
 473     {
 474         var editor = this.editor;
 475          // create a new element.
 476         var wdiv = editor.wrap.createChild({
 477                 tag: 'div'
 478             }, editor.wrap.dom.firstChild.nextSibling, true);
 479
 480
 481         var tb = new Roo.Toolbar(wdiv);
 482         // add the name..
 483
 484         tb.add(nm+ ":&nbsp;");
 485
 486         var styles = [];
 487         for(var i in this.styles) {
 488             styles.push(i);
 489         }
 490
 491         // styles...
 492         if (styles && styles.length) {
 493
 494             // this needs a multi-select checkbox...
 495             tb.addField( new Roo.form.ComboBox({
 496                 store: new Roo.data.SimpleStore({
 497                     id : 'val',
 498                     fields: ['val', 'selected'],
 499                     data : []
 500                 }),
 501                 name : '-roo-edit-className',
 502                 attrname : 'className',
 503                 displayField:'val',
 504                 typeAhead: false,
 505                 mode: 'local',
 506                 editable : false,
 507                 triggerAction: 'all',
 508                 emptyText:'Select Style',
 509                 selectOnFocus:true,
 510                 width: 130,
 511                 listeners : {
 512                     'select': function(c, r, i) {
 513                         // initial support only for on class per el..
 514                         tb.selectedNode.className =  r ? r.get('val') : '';
 515                         editor.syncValue();
 516                     }
 517                 }
 518
 519             }));
 520         }
 521
 522
 523
 524         for (var i in tlist) {
 525
 526             var item = tlist[i];
 527             tb.add(item.title + ":&nbsp;");
 528
 529
 530
 531
 532             if (item.opts) {
 533                 // opts == pulldown..
 534                 tb.addField( new Roo.form.ComboBox({
 535                     store: new Roo.data.SimpleStore({
 536                         id : 'val',
 537                         fields: ['val'],
 538                         data : item.opts
 539                     }),
 540                     name : '-roo-edit-' + i,
 541                     attrname : i,
 542                     displayField:'val',
 543                     typeAhead: false,
 544                     mode: 'local',
 545                     editable : false,
 546                     triggerAction: 'all',
 547                     emptyText:'Select',
 548                     selectOnFocus:true,
 549                     width: item.width ? item.width  : 130,
 550                     listeners : {
 551                         'select': function(c, r, i) {
 552                             tb.selectedNode.setAttribute(c.attrname, r.get('val'));
 553                         }
 554                     }
 555
 556                 }));
 557                 continue;
 558
 559
 560
 561                 tb.addField( new Roo.form.TextField({
 562                     name: i,
 563                     width: 100,
 564                     //allowBlank:false,
 565                     value: ''
 566                 }));
 567                 continue;
 568             }
 569             tb.addField( new Roo.form.TextField({
 570                 name: '-roo-edit-' + i,
 571                 attrname : i,
 572
 573                 width: item.width,
 574                 //allowBlank:true,
 575                 value: '',
 576                 listeners: {
 577                     'change' : function(f, nv, ov) {
 578                         tb.selectedNode.setAttribute(f.attrname, nv);
 579                     }
 580                 }
 581             }));
 582
 583         }
 584         tb.addFill();
 585         var _this = this;
 586         tb.addButton( {
 587             text: 'Remove Tag',
 588
 589             listeners : {
 590                 click : function ()
 591                 {
 592                     // remove
 593                     // undo does not work.
 594
 595                     var sn = tb.selectedNode;
 596                     Roo.log(sn);
 597                     var pn = sn.parentNode;
 598
 599                     var stn =  sn.childNodes[0];
 600                     var en = sn.childNodes[sn.childNodes.length - 1 ];
 601                     while (sn.childNodes.length) {
 602                         var node = sn.childNodes[0];
 603                         sn.removeChild(node);
 604                         Roo.log(node);
 605                         pn.insertBefore(node, sn);
 606
 607                     }
 608                     pn.removeChild(sn);
 609                     var range = editor.createRange();
 610
 611                     range.setStart(stn,0);
 612                     range.setEnd(en,0); //????
 613                     //range.selectNode(sel);
 614
 615
 616                     var selection = editor.getSelection();
 617                     selection.removeAllRanges();
 618                     selection.addRange(range);
 619
 620
 621
 622                     //_this.updateToolbar(null, null, pn);
 623                     _this.updateToolbar(null, null, null);
 624                     this.footDisp.dom.innerHTML = '';
 625                 }
 626             }
 627
 628
 629
 630
 631         });
 632
 633
 634         tb.el.on('click', function(e){
 635             e.preventDefault(); // what does this do?
 636         });
 637         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
 638         tb.el.hide();
 639         tb.name = nm;
 640         // dont need to disable them... as they will get hidden
 641         return tb;
 642
 643
 644     },
 645     buildFooter : function()
 646     {
 647
 648         var fel = this.editor.wrap.createChild();
 649         this.footer = new Roo.Toolbar(fel);
 650         // toolbar has scrolly on left / right?
 651         var footDisp= new Roo.Toolbar.Fill();
 652         var _t = this;
 653         this.footer.add(
 654             {
 655                 text : '&lt;',
 656                 xtype: 'Button',
 657                 handler : function() {
 658                     _t.footDisp.scrollTo('left',0,true)
 659                 }
 660             }
 661         );
 662         this.footer.add( footDisp );
 663         this.footer.add(
 664             {
 665                 text : '&gt;',
 666                 xtype: 'Button',
 667                 handler : function() {
 668                     // no animation..
 669                     _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
 670                 }
 671             }
 672         );
 673         var fel = Roo.get(footDisp.el);
 674         fel.addClass('x-editor-context');
 675         this.footDispWrap = fel;
 676         this.footDispWrap.overflow  = 'hidden';
 677
 678         this.footDisp = fel.createChild();
 679         this.footDispWrap.on('click', this.onContextClick, this)
 680
 681
 682     },
 683     onContextClick : function (ev,dom)
 684     {
 685         ev.preventDefault();
 686         var  cn = dom.className;
 687         Roo.log(cn);
 688         if (!cn.match(/x-ed-loc-/)) {
 689             return;
 690         }
 691         var n = cn.split('-').pop();
 692         var ans = this.footerEls;
 693         var sel = ans[n];
 694
 695          // pick
 696         var range = this.editor.createRange();
 697
 698         range.selectNodeContents(sel);
 699         //range.selectNode(sel);
 700
 701
 702         var selection = this.editor.getSelection();
 703         selection.removeAllRanges();
 704         selection.addRange(range);
 705
 706
 707
 708         this.updateToolbar(null, null, sel);
 709
 710
 711     }
 712
 713
 714
 715
 716
 717 });
 718
 719
 720
 721
 722