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 = {
55 opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
117 opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
122 opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
132 style : 'fontFamily',
133 displayField: 'display',
134 optname : 'font-family',
183 // should we really allow this??
184 // should this just be
195 style : 'fontFamily',
196 displayField: 'display',
197 optname : 'font-family',
204 style : 'fontFamily',
205 displayField: 'display',
206 optname : 'font-family',
213 style : 'fontFamily',
214 displayField: 'display',
215 optname : 'font-family',
226 // this should be configurable..
227 Roo.form.HtmlEditor.ToolbarContext.options = {
229 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
230 [ 'Courier New', 'Courier New'],
231 [ 'Tahoma', 'Tahoma'],
232 [ 'Times New Roman,serif', 'Times'],
233 [ 'Verdana','Verdana' ]
237 // fixme - these need to be configurable..
239 Roo.form.HtmlEditor.ToolbarContext[ 'font-family'] = {
241 style : 'fontFamily',
242 displayField: 'display',
243 optname : 'font-family',
248 Roo.each([ 'SPAN', 'DIV' , 'TD' , 'P' ], function(tg) {
249 var cx= Roo.form.HtmlEditor.ToolbarContext;
250 if (typeof(cx.types[tg]) == 'undefined') {
254 cx.types[tg]['font-family'] = cx[ 'font-family'] ;
257 Roo.form.HtmlEditor.ToolbarContext.types
260 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
268 * @cfg {Object} disable List of toolbar elements to disable
273 * @cfg {Object} styles List of styles
274 * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
276 * These must be defined in the page, so they get rendered correctly..
287 init : function(editor)
289 this.editor = editor;
292 var fid = editor.frameId;
294 function btn(id, toggle, handler){
295 var xid = fid + '-'+ id ;
299 cls : 'x-btn-icon x-edit-'+id,
300 enableToggle:toggle !== false,
301 scope: editor, // was editor...
302 handler:handler||editor.relayBtnCmd,
303 clickEvent:'mousedown',
304 tooltip: etb.buttonTips[id] || undefined, ///tips ???
308 // create a new element.
309 var wdiv = editor.wrap.createChild({
311 }, editor.wrap.dom.firstChild.nextSibling, true);
313 // can we do this more than once??
318 // disable everything...
319 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
324 this.toolbars[i] = this.buildToolbar(ty[i],i);
326 this.tb = this.toolbars.BODY;
330 editor.on('hide', function( ) { this.footer.hide() }, this);
331 editor.on('show', function( ) { this.footer.show() }, this);
334 this.rendered = true;
337 editor.on('editorevent', this.updateToolbar, this);
338 // other toolbars need to implement this..
339 //editor.on('editmodechange', this.updateToolbar, this);
345 * Protected method that will not generally be called directly. It triggers
346 * a toolbar update by reading the markup state of the current selection in the editor.
348 updateToolbar: function(editor,ev,sel){
351 // capture mouse up - this is handy for selecting images..
352 // perhaps should go somewhere else...
353 if(!this.editor.activated){
354 this.editor.onFirstFocus();
358 // http://developer.yahoo.com/yui/docs/simple-editor.js.html
359 // selectNode - might want to handle IE?
361 (ev.type == 'mouseup' || ev.type == 'click' ) &&
362 ev.target && ev.target.tagName == 'IMG') {
363 // they have click on an image...
364 // let's see if we can change the selection...
367 var nodeRange = sel.ownerDocument.createRange();
369 nodeRange.selectNode(sel);
371 nodeRange.selectNodeContents(sel);
373 //nodeRange.collapse(true);
374 var s = editor.win.getSelection();
376 s.addRange(nodeRange);
380 var updateFooter = sel ? false : true;
383 var ans = this.editor.getAllAncestors();
386 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
389 sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editor.doc.body;
390 sel = sel ? sel : this.editor.doc.body;
391 sel = sel.tagName.length ? sel : this.editor.doc.body;
394 // pick a menu that exists..
395 var tn = sel.tagName.toUpperCase();
396 //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
398 tn = sel.tagName.toUpperCase();
400 var lastSel = this.tb.selectedNode
402 this.tb.selectedNode = sel;
404 // if current menu does not match..
405 if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
408 ///console.log("show: " + tn);
409 this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
412 this.tb.items.first().el.innerHTML = tn + ': ';
416 if (this.tb.fields) {
417 this.tb.fields.each(function(e) {
419 e.setValue(sel.style[e.stylename]);
422 e.setValue(sel.getAttribute(e.attrname));
426 var hasStyles = false;
427 for(var i in this.styles) {
434 var st = this.tb.fields.item(0);
436 st.store.removeAll();
439 var cn = sel.className.split(/\s+/);
442 if (this.styles['*']) {
444 Roo.each(this.styles['*'], function(v) {
445 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
448 if (this.styles[tn]) {
449 Roo.each(this.styles[tn], function(v) {
450 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
454 st.store.loadData(avs);
458 // flag our selected Node.
459 this.tb.selectedNode = sel;
462 Roo.menu.MenuMgr.hideAll();
467 //this.footDisp.dom.innerHTML = '';
474 this.footerEls = ans.reverse();
475 Roo.each(this.footerEls, function(a,i) {
477 html += html.length ? ' > ' : '';
479 html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
484 var sz = this.footDisp.up('td').getSize();
485 this.footDisp.dom.style.width = (sz.width -10) + 'px';
486 this.footDisp.dom.style.marginLeft = '5px';
488 this.footDisp.dom.style.overflow = 'hidden';
490 this.footDisp.dom.innerHTML = html;
492 //this.editorsyncValue();
499 onDestroy : function(){
502 this.tb.items.each(function(item){
504 item.menu.removeAll();
506 item.menu.el.destroy();
514 onFirstFocus: function() {
515 // need to do this for all the toolbars..
516 this.tb.items.each(function(item){
520 buildToolbar: function(tlist, nm)
522 var editor = this.editor;
523 // create a new element.
524 var wdiv = editor.wrap.createChild({
526 }, editor.wrap.dom.firstChild.nextSibling, true);
529 var tb = new Roo.Toolbar(wdiv);
532 tb.add(nm+ ": ");
535 for(var i in this.styles) {
540 if (styles && styles.length) {
542 // this needs a multi-select checkbox...
543 tb.addField( new Roo.form.ComboBox({
544 store: new Roo.data.SimpleStore({
546 fields: ['val', 'selected'],
549 name : '-roo-edit-className',
550 attrname : 'className',
555 triggerAction: 'all',
556 emptyText:'Select Style',
560 'select': function(c, r, i) {
561 // initial support only for on class per el..
562 tb.selectedNode.className = r ? r.get('val') : '';
570 var tbops = Roo.form.HtmlEditor.ToolbarContext.options;
572 for (var i in tlist) {
575 tb.add(item.title + ": ");
578 //optname == used so you can configure the options available..
579 var opts = item.opts ? item.opts : false;
581 opts = tbops[items.optname];
586 // opts == pulldown..
587 tb.addField( new Roo.form.ComboBox({
588 store: new Roo.data.SimpleStore({
590 fields: ['val', 'display'],
593 name : '-roo-edit-' + i,
595 stylename : item.style ? item.style : false,
596 displayField: item.displayField ? item.displayField : 'val',
601 triggerAction: 'all',
604 width: item.width ? item.width : 130,
606 'select': function(c, r, i) {
608 tb.selectedNode.style[c.stylename] = r.get('val');
611 tb.selectedNode.setAttribute(c.attrname, r.get('val'));
620 tb.addField( new Roo.form.TextField({
628 tb.addField( new Roo.form.TextField({
629 name: '-roo-edit-' + i,
636 'change' : function(f, nv, ov) {
637 tb.selectedNode.setAttribute(f.attrname, nv);
652 // undo does not work.
654 var sn = tb.selectedNode;
656 var pn = sn.parentNode;
658 var stn = sn.childNodes[0];
659 var en = sn.childNodes[sn.childNodes.length - 1 ];
660 while (sn.childNodes.length) {
661 var node = sn.childNodes[0];
662 sn.removeChild(node);
664 pn.insertBefore(node, sn);
668 var range = editor.createRange();
670 range.setStart(stn,0);
671 range.setEnd(en,0); //????
672 //range.selectNode(sel);
675 var selection = editor.getSelection();
676 selection.removeAllRanges();
677 selection.addRange(range);
681 //_this.updateToolbar(null, null, pn);
682 _this.updateToolbar(null, null, null);
683 this.footDisp.dom.innerHTML = '';
693 tb.el.on('click', function(e){
694 e.preventDefault(); // what does this do?
696 tb.el.setVisibilityMode( Roo.Element.DISPLAY);
699 // dont need to disable them... as they will get hidden
704 buildFooter : function()
707 var fel = this.editor.wrap.createChild();
708 this.footer = new Roo.Toolbar(fel);
709 // toolbar has scrolly on left / right?
710 var footDisp= new Roo.Toolbar.Fill();
716 handler : function() {
717 _t.footDisp.scrollTo('left',0,true)
721 this.footer.add( footDisp );
726 handler : function() {
728 _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
732 var fel = Roo.get(footDisp.el);
733 fel.addClass('x-editor-context');
734 this.footDispWrap = fel;
735 this.footDispWrap.overflow = 'hidden';
737 this.footDisp = fel.createChild();
738 this.footDispWrap.on('click', this.onContextClick, this)
742 onContextClick : function (ev,dom)
745 var cn = dom.className;
747 if (!cn.match(/x-ed-loc-/)) {
750 var n = cn.split('-').pop();
751 var ans = this.footerEls;
755 var range = this.editor.createRange();
757 range.selectNodeContents(sel);
758 //range.selectNode(sel);
761 var selection = this.editor.getSelection();
762 selection.removeAllRanges();
763 selection.addRange(range);
767 this.updateToolbar(null, null, sel);