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