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 || {};
40 Roo.form.HtmlEditor.ToolbarContext.types = {
52 opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
114 opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
119 opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
173 // should we really allow this??
174 // should this just be
189 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
197 * @cfg {Object} disable List of toolbar elements to disable
202 * @cfg {Object} styles List of styles
203 * eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] }
205 * These must be defined in the page, so they get rendered correctly..
216 init : function(editor)
218 this.editor = editor;
221 var fid = editor.frameId;
223 function btn(id, toggle, handler){
224 var xid = fid + '-'+ id ;
228 cls : 'x-btn-icon x-edit-'+id,
229 enableToggle:toggle !== false,
230 scope: editor, // was editor...
231 handler:handler||editor.relayBtnCmd,
232 clickEvent:'mousedown',
233 tooltip: etb.buttonTips[id] || undefined, ///tips ???
237 // create a new element.
238 var wdiv = editor.wrap.createChild({
240 }, editor.wrap.dom.firstChild.nextSibling, true);
242 // can we do this more than once??
247 // disable everything...
248 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
253 this.toolbars[i] = this.buildToolbar(ty[i],i);
255 this.tb = this.toolbars.BODY;
260 this.rendered = true;
263 editor.on('editorevent', this.updateToolbar, this);
264 // other toolbars need to implement this..
265 //editor.on('editmodechange', this.updateToolbar, this);
271 * Protected method that will not generally be called directly. It triggers
272 * a toolbar update by reading the markup state of the current selection in the editor.
274 updateToolbar: function(editor,ev,sel){
277 // capture mouse up - this is handy for selecting images..
278 // perhaps should go somewhere else...
279 if(!this.editor.activated){
280 this.editor.onFirstFocus();
284 // http://developer.yahoo.com/yui/docs/simple-editor.js.html
285 // selectNode - might want to handle IE?
287 (ev.type == 'mouseup' || ev.type == 'click' ) &&
288 ev.target && ev.target.tagName == 'IMG') {
289 // they have click on an image...
290 // let's see if we can change the selection...
293 var nodeRange = sel.ownerDocument.createRange();
295 nodeRange.selectNode(sel);
297 nodeRange.selectNodeContents(sel);
299 //nodeRange.collapse(true);
300 var s = editor.win.getSelection();
302 s.addRange(nodeRange);
306 var updateFooter = sel ? false : true;
309 var ans = this.editor.getAllAncestors();
312 var ty= Roo.form.HtmlEditor.ToolbarContext.types;
315 sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editor.doc.body;
316 sel = sel ? sel : this.editor.doc.body;
317 sel = sel.tagName.length ? sel : this.editor.doc.body;
320 // pick a menu that exists..
321 var tn = sel.tagName.toUpperCase();
322 //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
324 tn = sel.tagName.toUpperCase();
326 var lastSel = this.tb.selectedNode
328 this.tb.selectedNode = sel;
330 // if current menu does not match..
331 if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
334 ///console.log("show: " + tn);
335 this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
338 this.tb.items.first().el.innerHTML = tn + ': ';
342 if (this.tb.fields) {
343 this.tb.fields.each(function(e) {
344 e.setValue(sel.getAttribute(e.name));
349 for(var i in this.styles) {
355 var st = this.tb.fields.item(0);
357 st.store.removeAll();
360 var cn = sel.className.split(/\s+/);
363 if (this.styles['*']) {
365 Roo.each(this.styles['*'], function(v) {
366 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
369 if (this.styles[tn]) {
370 Roo.each(this.styles[tn], function(v) {
371 avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
375 st.store.loadData(avs);
379 // flag our selected Node.
380 this.tb.selectedNode = sel;
383 Roo.menu.MenuMgr.hideAll();
394 this.footerEls = ans.reverse();
395 Roo.each(this.footerEls, function(a,i) {
397 html += html.length ? ' > ' : '';
399 html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
404 var sz = this.footDisp.up('td').getSize();
405 this.footDisp.dom.style.width = (sz.width -10) + 'px';
406 this.footDisp.dom.style.marginLeft = '5px';
408 this.footDisp.dom.style.overflow = 'hidden';
410 this.footDisp.dom.innerHTML = html;
412 //this.editorsyncValue();
417 onDestroy : function(){
420 this.tb.items.each(function(item){
422 item.menu.removeAll();
424 item.menu.el.destroy();
432 onFirstFocus: function() {
433 // need to do this for all the toolbars..
434 this.tb.items.each(function(item){
438 buildToolbar: function(tlist, nm)
440 var editor = this.editor;
441 // create a new element.
442 var wdiv = editor.wrap.createChild({
444 }, editor.wrap.dom.firstChild.nextSibling, true);
447 var tb = new Roo.Toolbar(wdiv);
450 tb.add(nm+ ": ");
453 for(var i in this.styles) {
458 if (styles && styles.length) {
460 // this needs a multi-select checkbox...
461 tb.addField( new Roo.form.ComboBox({
462 store: new Roo.data.SimpleStore({
464 fields: ['val', 'selected'],
472 triggerAction: 'all',
473 emptyText:'Select Style',
477 'select': function(c, r, i) {
478 // initial support only for on class per el..
479 tb.selectedNode.className = r ? r.get('val') : '';
489 for (var i in tlist) {
492 tb.add(item.title + ": ");
498 // opts == pulldown..
499 tb.addField( new Roo.form.ComboBox({
500 store: new Roo.data.SimpleStore({
510 triggerAction: 'all',
513 width: item.width ? item.width : 130,
515 'select': function(c, r, i) {
516 tb.selectedNode.setAttribute(c.name, r.get('val'));
525 tb.addField( new Roo.form.TextField({
533 tb.addField( new Roo.form.TextField({
539 'change' : function(f, nv, ov) {
540 tb.selectedNode.setAttribute(f.name, nv);
546 tb.el.on('click', function(e){
547 e.preventDefault(); // what does this do?
549 tb.el.setVisibilityMode( Roo.Element.DISPLAY);
552 // dont need to disable them... as they will get hidden
557 buildFooter : function()
560 var fel = this.editor.wrap.createChild();
561 this.footer = new Roo.Toolbar(fel);
562 // toolbar has scrolly on left / right?
563 var footDisp= new Roo.Toolbar.Fill();
569 handler : function() {
570 _t.footDisp.scrollTo('left',0,true)
574 this.footer.add( footDisp );
579 handler : function() {
581 _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
585 var fel = Roo.get(footDisp.el);
586 fel.addClass('x-editor-context');
587 this.footDispWrap = fel;
588 this.footDispWrap.overflow = 'hidden';
590 this.footDisp = fel.createChild();
591 this.footDispWrap.on('click', this.onContextClick, this)
595 onContextClick : function (ev,dom)
598 var cn = dom.className;
600 if (!cn.match(/x-ed-loc-/)) {
603 var n = cn.split('-').pop();
604 var ans = this.footerEls;
608 var range = this.editor.createRange();
610 range.selectNodeContents(sel);
611 //range.selectNode(sel);
614 var selection = this.editor.getSelection();
615 selection.removeAllRanges();
616 selection.addRange(range);
620 this.updateToolbar(null, null, sel);