Roo.form.HtmlEditor.ToolbarContext = function(config)
{
Roo.apply(this, config);
this.styles = this.styles || {};
}
Roo.form.HtmlEditor.ToolbarContext.types = {
'IMG' : {
width : {
title: "Width",
width: 40
},
height: {
title: "Height",
width: 40
},
align: {
title: "Align",
opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
width : 80
},
border: {
title: "Border",
width: 40
},
alt: {
title: "Alt",
width: 120
},
src : {
title: "Src",
width: 220
}
},
'A' : {
name : {
title: "Name",
width: 50
},
target: {
title: "Target",
width: 120
},
href: {
title: "Href",
width: 220
} },
'TABLE' : {
rows : {
title: "Rows",
width: 20
},
cols : {
title: "Cols",
width: 20
},
width : {
title: "Width",
width: 40
},
height : {
title: "Height",
width: 40
},
border : {
title: "Border",
width: 20
}
},
'TD' : {
width : {
title: "Width",
width: 40
},
height : {
title: "Height",
width: 40
},
align: {
title: "Align",
opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
width: 80
},
valign: {
title: "Valign",
opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
width: 80
},
colspan: {
title: "Colspan",
width: 20
},
'font-family' : {
title : "Font",
style : 'fontFamily',
displayField: 'display',
optname : 'font-family',
width: 140
}
},
'INPUT' : {
name : {
title: "name",
width: 120
},
value : {
title: "Value",
width: 120
},
width : {
title: "Width",
width: 40
}
},
'LABEL' : {
'for' : {
title: "For",
width: 120
}
},
'TEXTAREA' : {
name : {
title: "name",
width: 120
},
rows : {
title: "Rows",
width: 20
},
cols : {
title: "Cols",
width: 20
}
},
'SELECT' : {
name : {
title: "name",
width: 120
},
selectoptions : {
title: "Options",
width: 200
}
},
'BODY' : {
title : {
title: "Title",
width: 200,
disabled : true
}
},
'SPAN' : {
'font-family' : {
title : "Font",
style : 'fontFamily',
displayField: 'display',
optname : 'font-family',
width: 140
}
},
'DIV' : {
'font-family' : {
title : "Font",
style : 'fontFamily',
displayField: 'display',
optname : 'font-family',
width: 140
}
},
'P' : {
'font-family' : {
title : "Font",
style : 'fontFamily',
displayField: 'display',
optname : 'font-family',
width: 140
}
},
'*' : {
}
};
Roo.form.HtmlEditor.ToolbarContext.stores = false;
Roo.form.HtmlEditor.ToolbarContext.options = {
'font-family' : [
[ 'Helvetica,Arial,sans-serif', 'Helvetica'],
[ 'Courier New', 'Courier New'],
[ 'Tahoma', 'Tahoma'],
[ 'Times New Roman,serif', 'Times'],
[ 'Verdana','Verdana' ]
]
};
Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, {
tb: false,
rendered: false,
editor : false,
editorcore : false,
disable : false,
styles : false,
options: false,
toolbars : false,
init : function(editor)
{
this.editor = editor;
this.editorcore = editor.editorcore ? editor.editorcore : editor;
var editorcore = this.editorcore;
var fid = editorcore.frameId;
var etb = this;
function btn(id, toggle, handler){
var xid = fid + '-'+ id ;
return {
id : xid,
cmd : id,
cls : 'x-btn-icon x-edit-'+id,
enableToggle:toggle !== false,
scope: editorcore, handler:handler||editorcore.relayBtnCmd,
clickEvent:'mousedown',
tooltip: etb.buttonTips[id] || undefined, tabIndex:-1
};
}
var wdiv = editor.wrap.createChild({
tag: 'div'
}, editor.wrap.dom.firstChild.nextSibling, true);
var ty= Roo.form.HtmlEditor.ToolbarContext.types;
this.toolbars = {};
for (var i in ty) {
this.toolbars[i] = this.buildToolbar(ty[i],i);
}
this.tb = this.toolbars.BODY;
this.tb.el.show();
this.buildFooter();
this.footer.show();
editor.on('hide', function( ) { this.footer.hide() }, this);
editor.on('show', function( ) { this.footer.show() }, this);
this.rendered = true;
editor.on('editorevent', this.updateToolbar, this);
},
updateToolbar: function(editor,ev,sel){
if(!this.editorcore.activated){
this.editor.onFirstFocus();
return;
}
if (ev &&
(ev.type == 'mouseup' || ev.type == 'click' ) &&
ev.target && ev.target.tagName == 'IMG') {
sel = ev.target;
var nodeRange = sel.ownerDocument.createRange();
try {
nodeRange.selectNode(sel);
} catch (e) {
nodeRange.selectNodeContents(sel);
}
var s = this.editorcore.win.getSelection();
s.removeAllRanges();
s.addRange(nodeRange);
}
var updateFooter = sel ? false : true;
var ans = this.editorcore.getAllAncestors();
var ty= Roo.form.HtmlEditor.ToolbarContext.types;
if (!sel) {
sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
sel = sel ? sel : this.editorcore.doc.body;
sel = sel.tagName.length ? sel : this.editorcore.doc.body;
}
var tn = sel.tagName.toUpperCase();
tn = sel.tagName.toUpperCase();
var lastSel = this.tb.selectedNode;
this.tb.selectedNode = sel;
if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
this.tb.el.hide();
this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
this.tb.el.show();
this.tb.items.first().el.innerHTML = tn + ': ';
if (this.tb.fields) {
this.tb.fields.each(function(e) {
if (e.stylename) {
e.setValue(sel.style[e.stylename]);
return;
}
e.setValue(sel.getAttribute(e.attrname));
});
}
var hasStyles = false;
for(var i in this.styles) {
hasStyles = true;
break;
}
if (hasStyles) {
var st = this.tb.fields.item(0);
st.store.removeAll();
var cn = sel.className.split(/\s+/);
var avs = [];
if (this.styles['*']) {
Roo.each(this.styles['*'], function(v) {
avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
});
}
if (this.styles[tn]) {
Roo.each(this.styles[tn], function(v) {
avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
});
}
st.store.loadData(avs);
st.collapse();
st.setValue(cn);
}
this.tb.selectedNode = sel;
Roo.menu.MenuMgr.hideAll();
}
if (!updateFooter) {
return;
}
var html = '';
this.footerEls = ans.reverse();
Roo.each(this.footerEls, function(a,i) {
if (!a) { return; }
html += html.length ? ' > ' : '';
html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
});
var sz = this.footDisp.up('td').getSize();
this.footDisp.dom.style.width = (sz.width -10) + 'px';
this.footDisp.dom.style.marginLeft = '5px';
this.footDisp.dom.style.overflow = 'hidden';
this.footDisp.dom.innerHTML = html;
},
onDestroy : function(){
if(this.rendered){
this.tb.items.each(function(item){
if(item.menu){
item.menu.removeAll();
if(item.menu.el){
item.menu.el.destroy();
}
}
item.destroy();
});
}
},
onFirstFocus: function() {
this.tb.items.each(function(item){
item.enable();
});
},
buildToolbar: function(tlist, nm)
{
var editor = this.editor;
var editorcore = this.editorcore;
var wdiv = editor.wrap.createChild({
tag: 'div'
}, editor.wrap.dom.firstChild.nextSibling, true);
var tb = new Roo.Toolbar(wdiv);
tb.add(nm+ ": ");
var styles = [];
for(var i in this.styles) {
styles.push(i);
}
if (styles && styles.length) {
tb.addField( new Roo.form.ComboBox({
store: new Roo.data.SimpleStore({
id : 'val',
fields: ['val', 'selected'],
data : []
}),
name : '-roo-edit-className',
attrname : 'className',
displayField: 'val',
typeAhead: false,
mode: 'local',
editable : false,
triggerAction: 'all',
emptyText:'Select Style',
selectOnFocus:true,
width: 130,
listeners : {
'select': function(c, r, i) {
tb.selectedNode.className = r ? r.get('val') : '';
editorcore.syncValue();
}
}
}));
}
var tbc = Roo.form.HtmlEditor.ToolbarContext;
var tbops = tbc.options;
for (var i in tlist) {
var item = tlist[i];
tb.add(item.title + ": ");
var opts = item.opts ? item.opts : false;
if (item.optname) {
opts = tbops[item.optname];
}
if (opts) {
tb.addField( new Roo.form.ComboBox({
store: typeof(tbc.stores[i]) != 'undefined' ? Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
id : 'val',
fields: ['val', 'display'],
data : opts
}),
name : '-roo-edit-' + i,
attrname : i,
stylename : item.style ? item.style : false,
displayField: item.displayField ? item.displayField : 'val',
valueField : 'val',
typeAhead: false,
mode: typeof(tbc.stores[i]) != 'undefined' ? 'remote' : 'local',
editable : false,
triggerAction: 'all',
emptyText:'Select',
selectOnFocus:true,
width: item.width ? item.width : 130,
listeners : {
'select': function(c, r, i) {
if (c.stylename) {
tb.selectedNode.style[c.stylename] = r.get('val');
return;
}
tb.selectedNode.setAttribute(c.attrname, r.get('val'));
}
}
}));
continue;
tb.addField( new Roo.form.TextField({
name: i,
width: 100,
value: ''
}));
continue;
}
tb.addField( new Roo.form.TextField({
name: '-roo-edit-' + i,
attrname : i,
width: item.width,
value: '',
listeners: {
'change' : function(f, nv, ov) {
tb.selectedNode.setAttribute(f.attrname, nv);
editorcore.syncValue();
}
}
}));
}
var _this = this;
if(nm == 'BODY'){
tb.addSeparator();
tb.addButton( {
text: 'Stylesheets',
listeners : {
click : function ()
{
_this.editor.fireEvent('stylesheetsclick', _this.editor);
}
}
});
}
tb.addFill();
tb.addButton( {
text: 'Remove Tag',
listeners : {
click : function ()
{
var sn = tb.selectedNode;
var pn = sn.parentNode;
var stn = sn.childNodes[0];
var en = sn.childNodes[sn.childNodes.length - 1 ];
while (sn.childNodes.length) {
var node = sn.childNodes[0];
sn.removeChild(node);
pn.insertBefore(node, sn);
}
pn.removeChild(sn);
var range = editorcore.createRange();
range.setStart(stn,0);
range.setEnd(en,0); var selection = editorcore.getSelection();
selection.removeAllRanges();
selection.addRange(range);
_this.updateToolbar(null, null, null);
_this.footDisp.dom.innerHTML = '';
}
}
});
tb.el.on('click', function(e){
e.preventDefault(); });
tb.el.setVisibilityMode( Roo.Element.DISPLAY);
tb.el.hide();
tb.name = nm;
return tb;
},
buildFooter : function()
{
var fel = this.editor.wrap.createChild();
this.footer = new Roo.Toolbar(fel);
var footDisp= new Roo.Toolbar.Fill();
var _t = this;
this.footer.add(
{
text : '<',
xtype: 'Button',
handler : function() {
_t.footDisp.scrollTo('left',0,true)
}
}
);
this.footer.add( footDisp );
this.footer.add(
{
text : '>',
xtype: 'Button',
handler : function() {
_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
}
}
);
var fel = Roo.get(footDisp.el);
fel.addClass('x-editor-context');
this.footDispWrap = fel;
this.footDispWrap.overflow = 'hidden';
this.footDisp = fel.createChild();
this.footDispWrap.on('click', this.onContextClick, this)
},
onContextClick : function (ev,dom)
{
ev.preventDefault();
var cn = dom.className;
if (!cn.match(/x-ed-loc-/)) {
return;
}
var n = cn.split('-').pop();
var ans = this.footerEls;
var sel = ans[n];
var range = this.editorcore.createRange();
range.selectNodeContents(sel);
var selection = this.editorcore.getSelection();
selection.removeAllRanges();
selection.addRange(range);
this.updateToolbar(null, null, sel);
}
});