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"]],
121 opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
126 opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
136 style : 'fontFamily',
137 displayField: 'display',
138 optname : 'font-family',
187 // should we really allow this??
188 // should this just be
199 style : 'fontFamily',
200 displayField: 'display',
201 optname : 'font-family',
208 style : 'fontFamily',
209 displayField: 'display',
210 optname : 'font-family',
217 style : 'fontFamily',
218 displayField: 'display',
219 optname : 'font-family',
230 // this should be configurable.. - you can either set it up using stores, or modify options somehwere..
231 Roo.form.HtmlEditor.ToolbarContext.stores = false;
233 Roo.form.HtmlEditor.ToolbarContext.options = {
235 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
236 [ 'Courier New', 'Courier New'],
237 [ 'Tahoma', 'Tahoma'],
238 [ 'Times New Roman,serif', 'Times'],
239 [ 'Verdana','Verdana' ]
243 // fixme - these need to be configurable..
246 Roo.form.HtmlEditor.ToolbarContext.types
249 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
258 * @cfg {Object} disable List of toolbar elements to disable
263 * @cfg {Object} styles List of styles
264 * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
266 * These must be defined in the page, so they get rendered correctly..
277 init : function(editor)
279 this.editor = editor;
280 this.editorcore = editor.editorcore ? editor.editorcore : editor;
281 var editorcore = this.editorcore;
283 var fid = editorcore.frameId;
285 function btn(id, toggle, handler){
286 var xid = fid + '-'+ id ;
290 cls : 'x-btn-icon x-edit-'+id,
291 enableToggle:toggle !== false,
292 scope: editorcore, // was editor...
293 handler:handler||editorcore.relayBtnCmd,
294 clickEvent:'mousedown',
295 tooltip: etb.buttonTips[id] || undefined, ///tips ???
299 // create a new element.
300 var wdiv = editor.wrap.createChild({
302 }, editor.wrap.dom.firstChild.nextSibling, true);
304 // can we do this more than once??
309 // disable everything...
310 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
312 Roo.log('this.styles!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
313 Roo.log(this.styles);
316 this.toolbars[i] = this.buildToolbar(ty[i],i);
318 this.tb = this.toolbars.BODY;
319 Roo.log('this.toolbars.BODY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
320 Roo.log(this.toolbars.BODY);
325 editor.on('hide', function( ) { this.footer.hide() }, this);
326 editor.on('show', function( ) { this.footer.show() }, this);
329 this.rendered = true;
332 editor.on('editorevent', this.updateToolbar, this);
333 // other toolbars need to implement this..
334 //editor.on('editmodechange', this.updateToolbar, this);
340 * Protected method that will not generally be called directly. It triggers
341 * a toolbar update by reading the markup state of the current selection in the editor.
343 updateToolbar: function(editor,ev,sel){
346 // capture mouse up - this is handy for selecting images..
347 // perhaps should go somewhere else...
348 if(!this.editorcore.activated){
349 this.editor.onFirstFocus();
353 // http://developer.yahoo.com/yui/docs/simple-editor.js.html
354 // selectNode - might want to handle IE?
356 (ev.type == 'mouseup' || ev.type == 'click' ) &&
357 ev.target && ev.target.tagName == 'IMG') {
358 // they have click on an image...
359 // let's see if we can change the selection...
362 var nodeRange = sel.ownerDocument.createRange();
364 nodeRange.selectNode(sel);
366 nodeRange.selectNodeContents(sel);
368 //nodeRange.collapse(true);
369 var s = this.editorcore.win.getSelection();
371 s.addRange(nodeRange);
375 var updateFooter = sel ? false : true;
378 var ans = this.editorcore.getAllAncestors();
381 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
384 sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
385 sel = sel ? sel : this.editorcore.doc.body;
386 sel = sel.tagName.length ? sel : this.editorcore.doc.body;
389 // pick a menu that exists..
390 var tn = sel.tagName.toUpperCase();
391 //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
393 tn = sel.tagName.toUpperCase();
395 var lastSel = this.tb.selectedNode
397 this.tb.selectedNode = sel;
399 // if current menu does not match..
400 if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
403 ///console.log("show: " + tn);
404 this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
407 this.tb.items.first().el.innerHTML = tn + ': ';
411 if (this.tb.fields) {
412 this.tb.fields.each(function(e) {
414 e.setValue(sel.style[e.stylename]);
417 e.setValue(sel.getAttribute(e.attrname));
421 var hasStyles = false;
422 for(var i in this.styles) {
429 var st = this.tb.fields.item(0);
431 st.store.removeAll();
434 var cn = sel.className.split(/\s+/);
437 if (this.styles['*']) {
439 Roo.each(this.styles['*'], function(v) {
440 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
443 if (this.styles[tn]) {
444 Roo.each(this.styles[tn], function(v) {
445 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
449 st.store.loadData(avs);
453 // flag our selected Node.
454 this.tb.selectedNode = sel;
457 Roo.menu.MenuMgr.hideAll();
462 //this.footDisp.dom.innerHTML = '';
469 this.footerEls = ans.reverse();
470 Roo.each(this.footerEls, function(a,i) {
472 html += html.length ? ' > ' : '';
474 html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
479 var sz = this.footDisp.up('td').getSize();
480 this.footDisp.dom.style.width = (sz.width -10) + 'px';
481 this.footDisp.dom.style.marginLeft = '5px';
483 this.footDisp.dom.style.overflow = 'hidden';
485 this.footDisp.dom.innerHTML = html;
487 //this.editorsyncValue();
494 onDestroy : function(){
497 this.tb.items.each(function(item){
499 item.menu.removeAll();
501 item.menu.el.destroy();
509 onFirstFocus: function() {
510 // need to do this for all the toolbars..
511 this.tb.items.each(function(item){
515 buildToolbar: function(tlist, nm)
517 Roo.log('build Toolbar!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
519 var editor = this.editor;
520 var editorcore = this.editorcore;
521 // create a new element.
522 var wdiv = editor.wrap.createChild({
524 }, editor.wrap.dom.firstChild.nextSibling, true);
527 var tb = new Roo.Toolbar(wdiv);
531 tb.add(nm+ ": ");
534 for(var i in this.styles) {
539 if (styles && styles.length) {
541 // this needs a multi-select checkbox...
542 tb.addField( new Roo.form.ComboBox({
543 store: new Roo.data.SimpleStore({
545 fields: ['val', 'selected'],
548 name : '-roo-edit-className',
549 attrname : 'className',
554 triggerAction: 'all',
555 emptyText:'Select Style',
559 'select': function(c, r, i) {
560 // initial support only for on class per el..
561 tb.selectedNode.className = r ? r.get('val') : '';
562 editorcore.syncValue();
569 var tbc = Roo.form.HtmlEditor.ToolbarContext;
570 var tbops = tbc.options;
571 Roo.log('tbc!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
572 Roo.log(tbc.options);
573 for (var i in tlist) {
576 tb.add(item.title + ": ");
579 //optname == used so you can configure the options available..
580 var opts = item.opts ? item.opts : false;
582 opts = tbops[item.optname];
587 // opts == pulldown..
588 tb.addField( new Roo.form.ComboBox({
589 store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
591 fields: ['val', 'display'],
594 name : '-roo-edit-' + i,
596 stylename : item.style ? item.style : false,
597 displayField: item.displayField ? item.displayField : 'val',
600 mode: typeof(tbc.stores[i]) != 'undefined' ? 'remote' : 'local',
602 triggerAction: 'all',
605 width: item.width ? item.width : 130,
607 'select': function(c, r, i) {
609 tb.selectedNode.style[c.stylename] = r.get('val');
612 tb.selectedNode.setAttribute(c.attrname, r.get('val'));
621 tb.addField( new Roo.form.TextField({
629 tb.addField( new Roo.form.TextField({
630 name: '-roo-edit-' + i,
637 'change' : function(f, nv, ov) {
638 tb.selectedNode.setAttribute(f.attrname, nv);
673 // undo does not work.
675 var sn = tb.selectedNode;
677 var pn = sn.parentNode;
679 var stn = sn.childNodes[0];
680 var en = sn.childNodes[sn.childNodes.length - 1 ];
681 while (sn.childNodes.length) {
682 var node = sn.childNodes[0];
683 sn.removeChild(node);
685 pn.insertBefore(node, sn);
689 var range = editorcore.createRange();
691 range.setStart(stn,0);
692 range.setEnd(en,0); //????
693 //range.selectNode(sel);
696 var selection = editorcore.getSelection();
697 selection.removeAllRanges();
698 selection.addRange(range);
702 //_this.updateToolbar(null, null, pn);
703 _this.updateToolbar(null, null, null);
704 _this.footDisp.dom.innerHTML = '';
714 tb.el.on('click', function(e){
715 e.preventDefault(); // what does this do?
717 tb.el.setVisibilityMode( Roo.Element.DISPLAY);
720 // dont need to disable them... as they will get hidden
725 buildFooter : function()
728 var fel = this.editor.wrap.createChild();
729 this.footer = new Roo.Toolbar(fel);
730 // toolbar has scrolly on left / right?
731 var footDisp= new Roo.Toolbar.Fill();
737 handler : function() {
738 _t.footDisp.scrollTo('left',0,true)
742 this.footer.add( footDisp );
747 handler : function() {
749 _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
753 var fel = Roo.get(footDisp.el);
754 fel.addClass('x-editor-context');
755 this.footDispWrap = fel;
756 this.footDispWrap.overflow = 'hidden';
758 this.footDisp = fel.createChild();
759 this.footDispWrap.on('click', this.onContextClick, this)
763 onContextClick : function (ev,dom)
766 var cn = dom.className;
768 if (!cn.match(/x-ed-loc-/)) {
771 var n = cn.split('-').pop();
772 var ans = this.footerEls;
776 var range = this.editorcore.createRange();
778 range.selectNodeContents(sel);
779 //range.selectNode(sel);
782 var selection = this.editorcore.getSelection();
783 selection.removeAllRanges();
784 selection.addRange(range);
788 this.updateToolbar(null, null, sel);