1 // <script type="text/javascript">
5 * Copyright(c) 2006-2007, Ext JS, LLC.
12 * @class Roo.form.HtmlEditor.ToolbarContext
17 new Roo.form.HtmlEditor({
20 { xtype: 'ToolbarStandard', styles : {} }
21 { xtype: 'ToolbarContext', disable : {} }
27 * @config : {Object} disable List of elements to disable.. (not done yet.)
28 * @config : {Object} styles Map of styles available.
32 Roo.form.HtmlEditor.ToolbarContext = function(config)
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 || {};
43 Roo.form.HtmlEditor.ToolbarContext.types = {
58 opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
84 opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
155 name : 'selectoptions',
161 // should we really allow this??
162 // should this just be
179 // this should be configurable.. - you can either set it up using stores, or modify options somehwere..
180 Roo.form.HtmlEditor.ToolbarContext.stores = false;
182 Roo.form.HtmlEditor.ToolbarContext.options = {
184 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
185 [ 'Courier New', 'Courier New'],
186 [ 'Tahoma', 'Tahoma'],
187 [ 'Times New Roman,serif', 'Times'],
188 [ 'Verdana','Verdana' ]
192 // fixme - these need to be configurable..
195 //Roo.form.HtmlEditor.ToolbarContext.types
198 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
207 * @cfg {Object} disable List of toolbar elements to disable
212 * @cfg {Object} styles List of styles
213 * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
215 * These must be defined in the page, so they get rendered correctly..
226 init : function(editor)
228 this.editor = editor;
229 this.editorcore = editor.editorcore ? editor.editorcore : editor;
230 var editorcore = this.editorcore;
232 var fid = editorcore.frameId;
234 function btn(id, toggle, handler){
235 var xid = fid + '-'+ id ;
239 cls : 'x-btn-icon x-edit-'+id,
240 enableToggle:toggle !== false,
241 scope: editorcore, // was editor...
242 handler:handler||editorcore.relayBtnCmd,
243 clickEvent:'mousedown',
244 tooltip: etb.buttonTips[id] || undefined, ///tips ???
248 // create a new element.
249 var wdiv = editor.wrap.createChild({
251 }, editor.wrap.dom.firstChild.nextSibling, true);
253 // can we do this more than once??
258 // disable everything...
259 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
261 // block toolbars are built in updateToolbar when needed.
264 this.toolbars[i] = this.buildToolbar(ty[i],i);
266 this.tb = this.toolbars.BODY;
270 editor.on('hide', function( ) { this.footer.hide() }, this);
271 editor.on('show', function( ) { this.footer.show() }, this);
274 this.rendered = true;
277 editor.on('editorevent', this.updateToolbar, this);
278 // other toolbars need to implement this..
279 //editor.on('editmodechange', this.updateToolbar, this);
285 * Protected method that will not generally be called directly. It triggers
286 * a toolbar update by reading the markup state of the current selection in the editor.
288 * Note you can force an update by calling on('editorevent', scope, false)
290 updateToolbar: function(editor ,ev, sel)
294 ev.stopEvent(); // se if we can stop this looping with mutiple events.
298 // capture mouse up - this is handy for selecting images..
299 // perhaps should go somewhere else...
300 if(!this.editorcore.activated){
301 this.editor.onFirstFocus();
304 //Roo.log(ev ? ev.target : 'NOTARGET');
307 // http://developer.yahoo.com/yui/docs/simple-editor.js.html
308 // selectNode - might want to handle IE?
313 (ev.type == 'mouseup' || ev.type == 'click' ) &&
314 ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
315 // they have click on an image...
316 // let's see if we can change the selection...
319 // this triggers looping?
320 //this.editorcore.selectNode(sel);
324 // this forces an id..
325 Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
326 e.classList.remove('roo-ed-selection');
328 //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
329 //Roo.get(node).addClass('roo-ed-selection');
331 //var updateFooter = sel ? false : true;
334 var ans = this.editorcore.getAllAncestors();
337 var ty = Roo.form.HtmlEditor.ToolbarContext.types;
340 sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
341 sel = sel ? sel : this.editorcore.doc.body;
342 sel = sel.tagName.length ? sel : this.editorcore.doc.body;
346 var tn = sel.tagName.toUpperCase();
347 var lastSel = this.tb.selectedNode;
348 this.tb.selectedNode = sel;
351 // ok see if we are editing a block?
354 // you are not actually selecting the block.
355 if (sel && sel.hasAttribute('data-block')) {
357 } else if (sel && sel.closest('[data-block]')) {
359 db = sel.closest('[data-block]');
360 //var cepar = sel.closest('[contenteditable=true]');
361 //if (db && cepar && cepar.tagName != 'BODY') {
362 // db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
368 //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
369 if (db && this.editorcore.enableBlocks) {
370 block = Roo.htmleditor.Block.factory(db);
375 db.classList.length > 0 ? db.className + ' ' : ''
376 ) + 'roo-ed-selection';
378 // since we removed it earlier... its not there..
379 tn = 'BLOCK.' + db.getAttribute('data-block');
381 //this.editorcore.selectNode(db);
382 if (typeof(this.toolbars[tn]) == 'undefined') {
383 this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
385 this.toolbars[tn].selectedNode = db;
386 left_label = block.friendly_name;
387 ans = this.editorcore.getAllAncestors();
395 if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
396 return; // no change?
402 ///console.log("show: " + tn);
403 this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
407 this.tb.items.first().el.innerHTML = left_label + ': ';
411 if (block && this.tb.fields) {
413 this.tb.fields.each(function(e) {
414 e.setValue(block[e.name]);
418 } else if (this.tb.fields && this.tb.selectedNode) {
419 this.tb.fields.each( function(e) {
421 e.setValue(this.tb.selectedNode.style[e.stylename]);
424 e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
426 this.updateToolbarStyles(this.tb.selectedNode);
431 Roo.menu.MenuMgr.hideAll();
438 this.updateFooter(ans);
442 updateToolbarStyles : function(sel)
444 var hasStyles = false;
445 for(var i in this.styles) {
451 if (hasStyles && this.tb.hasStyles) {
452 var st = this.tb.fields.item(0);
454 st.store.removeAll();
455 var cn = sel.className.split(/\s+/);
458 if (this.styles['*']) {
460 Roo.each(this.styles['*'], function(v) {
461 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
464 if (this.styles[tn]) {
465 Roo.each(this.styles[tn], function(v) {
466 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
470 st.store.loadData(avs);
477 updateFooter : function(ans)
481 this.footDisp.dom.innerHTML = '';
485 this.footerEls = ans.reverse();
486 Roo.each(this.footerEls, function(a,i) {
488 html += html.length ? ' > ' : '';
490 html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
495 var sz = this.footDisp.up('td').getSize();
496 this.footDisp.dom.style.width = (sz.width -10) + 'px';
497 this.footDisp.dom.style.marginLeft = '5px';
499 this.footDisp.dom.style.overflow = 'hidden';
501 this.footDisp.dom.innerHTML = html;
508 onDestroy : function(){
511 this.tb.items.each(function(item){
513 item.menu.removeAll();
515 item.menu.el.destroy();
523 onFirstFocus: function() {
524 // need to do this for all the toolbars..
525 this.tb.items.each(function(item){
529 buildToolbar: function(tlist, nm, friendly_name, block)
531 var editor = this.editor;
532 var editorcore = this.editorcore;
533 // create a new element.
534 var wdiv = editor.wrap.createChild({
536 }, editor.wrap.dom.firstChild.nextSibling, true);
539 var tb = new Roo.Toolbar(wdiv);
540 ///this.tb = tb; // << this sets the active toolbar..
541 if (tlist === false && block) {
542 tlist = block.contextMenu(this);
545 tb.hasStyles = false;
548 tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
550 var styles = Array.from(this.styles);
554 if (styles && styles.length) {
556 // this needs a multi-select checkbox...
557 tb.addField( new Roo.form.ComboBox({
558 store: new Roo.data.SimpleStore({
560 fields: ['val', 'selected'],
563 name : '-roo-edit-className',
564 attrname : 'className',
569 triggerAction: 'all',
570 emptyText:'Select Style',
574 'select': function(c, r, i) {
575 // initial support only for on class per el..
576 tb.selectedNode.className = r ? r.get('val') : '';
577 editorcore.syncValue();
584 var tbc = Roo.form.HtmlEditor.ToolbarContext;
587 for (var i = 0; i < tlist.length; i++) {
589 // newer versions will use xtype cfg to create menus.
590 if (typeof(tlist[i].xtype) != 'undefined') {
592 tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
599 tb.add(item.title + ": ");
602 //optname == used so you can configure the options available..
603 var opts = item.opts ? item.opts : false;
604 if (item.optname) { // use the b
605 opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
610 // opts == pulldown..
611 tb.addField( new Roo.form.ComboBox({
612 store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
614 fields: ['val', 'display'],
617 name : '-roo-edit-' + tlist[i].name,
619 attrname : tlist[i].name,
620 stylename : item.style ? item.style : false,
622 displayField: item.displayField ? item.displayField : 'val',
625 mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
627 triggerAction: 'all',
630 width: item.width ? item.width : 130,
632 'select': function(c, r, i) {
636 tb.selectedNode.style[c.stylename] = r.get('val');
637 editorcore.syncValue();
641 tb.selectedNode.removeAttribute(c.attrname);
642 editorcore.syncValue();
645 tb.selectedNode.setAttribute(c.attrname, r.get('val'));
646 editorcore.syncValue();
655 tb.addField( new Roo.form.TextField({
664 tb.addField( new Roo.form.TextField({
665 name: '-roo-edit-' + tlist[i].name,
666 attrname : tlist[i].name,
672 'change' : function(f, nv, ov) {
675 tb.selectedNode.setAttribute(f.attrname, nv);
676 editorcore.syncValue();
684 var show_delete = !block || block.deleteTitle !== false;
695 _this.editor.fireEvent('stylesheetsclick', _this.editor);
704 text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', // remove the tag, and puts the children outside...
709 var sn = tb.selectedNode;
711 sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
717 var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
718 if (sn.hasAttribute('data-block')) {
719 stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
720 sn.parentNode.removeChild(sn);
722 } else if (sn && sn.tagName != 'BODY') {
723 // remove and keep parents.
724 a = new Roo.htmleditor.FilterKeepChildren({tag : false});
729 var range = editorcore.createRange();
731 range.setStart(stn,0);
733 var selection = editorcore.getSelection();
734 selection.removeAllRanges();
735 selection.addRange(range);
738 //_this.updateToolbar(null, null, pn);
739 _this.updateToolbar(null, null, null);
740 _this.updateFooter(false);
742 console.log("DADADA");
743 editorcore.syncValue();
753 tb.el.on('click', function(e){
754 e.preventDefault(); // what does this do?
756 tb.el.setVisibilityMode( Roo.Element.DISPLAY);
759 // dont need to disable them... as they will get hidden
764 buildFooter : function()
767 var fel = this.editor.wrap.createChild();
768 this.footer = new Roo.Toolbar(fel);
769 // toolbar has scrolly on left / right?
770 var footDisp= new Roo.Toolbar.Fill();
776 handler : function() {
777 _t.footDisp.scrollTo('left',0,true)
781 this.footer.add( footDisp );
786 handler : function() {
788 _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
792 var fel = Roo.get(footDisp.el);
793 fel.addClass('x-editor-context');
794 this.footDispWrap = fel;
795 this.footDispWrap.overflow = 'hidden';
797 this.footDisp = fel.createChild();
798 this.footDispWrap.on('click', this.onContextClick, this)
802 // when the footer contect changes
803 onContextClick : function (ev,dom)
806 var cn = dom.className;
808 if (!cn.match(/x-ed-loc-/)) {
811 var n = cn.split('-').pop();
812 var ans = this.footerEls;
815 this.editorcore.selectNode(sel);
818 this.updateToolbar(null, null, sel);