htmlToolbar.js
Summary
Provides an HTML based toolbar GUI.
Version: 0.8
$Id: overview-summary-htmlToolbar.js.html,v 1.7 2006/08/23 23:30:17 jameso Exp $
Author: James A. Overton
mozile.require("mozile.dom");
mozile.require("mozile.edit");
mozile.require("mozile.gui");
mozile.provide("mozile.gui.htmlToolbar");
mozile.gui.htmlToolbar = new mozile.gui.Factory("HTMLToolbarFactory");
mozile.gui.factory = mozile.gui.htmlToolbar;
mozile.gui.htmlToolbar.toolbar = null;
mozile.gui.htmlToolbar.checkmark = "\u2713";
mozile.gui.htmlToolbar.ieColor = "#C2C2C2";
mozile.gui.htmlToolbar.ieActiveColor = "#C1D2EE";
mozile.gui.htmlToolbar.ieMenuWidth = "170px";
mozile.gui.htmlToolbar.ieBorder = "";
mozile.gui.htmlToolbar.ieActiveBorder = "1px solid #316AC5";
mozile.gui.htmlToolbar.iePadding = "1px";
mozile.gui.htmlToolbar.ieActivePadding = "0px";
mozile.gui.htmlToolbar.about = new mozile.edit.Command("About");
mozile.gui.htmlToolbar.about.label = "About Mozile";
mozile.gui.htmlToolbar.about.image = "silk/information";
mozile.gui.htmlToolbar.about.execute = function(state, fresh) {
alert([
"About Mozile "+ mozile.version,
mozile.homepage,
mozile.about,
mozile.copyright +" "+ mozile.license,
"Contributors: "+ mozile.credits,
"Acknowledgements: "+ mozile.acknowledgements
].join("\n"));
state.reversible = false;
state.executed = true;
return state;
}
mozile.gui.htmlToolbar.help = new mozile.edit.Command("Help");
mozile.gui.htmlToolbar.help.image = "silk/help";
mozile.gui.htmlToolbar.help.execute = function(state, fresh) {
window.open(mozile.help, "MozileHelp", "");
state.reversible = false;
state.executed = true;
return state;
}
mozile.gui.htmlToolbar.mainMenu = new mozile.edit.CommandGroup("Main Menu");
mozile.gui.htmlToolbar.mainMenu.image = "Mozile-16";
mozile.gui.htmlToolbar.mainMenu.addCommand(mozile.gui.htmlToolbar.about);
mozile.gui.htmlToolbar.mainMenu.addCommand(mozile.gui.htmlToolbar.help);
mozile.gui.htmlToolbar._commands = new Array(mozile.gui.htmlToolbar.mainMenu);
mozile.gui.htmlToolbar.createElement = function(name) {
if(mozile.defaultNS) {
mozile.require("mozile.xml");
return mozile.dom.createElementNS(mozile.xml.ns.xhtml, name);
}
else return mozile.dom.createElement(name);
}
mozile.gui.htmlToolbar.createImage = function(name) {
if(!name || typeof(name) != "string") return null;
var filetype = ".png";
if(name.indexOf(".") > -1) filetype = "";
var img;
var src = [mozile.root, "images", name + filetype].join(mozile.filesep);
if(false && mozile.browser.isIE && (filetype == ".png" ||
name.toLowerCase().substring(name.length-3, name.length) == "png") ) {
img = mozile.gui.htmlToolbar.createElement("span");
img.style.cssText = "width: 16px; height: 16px; display:inline-block; "
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + src + "\', sizingMethod='image');";
}
else {
img = mozile.gui.htmlToolbar.createElement("img");
img.setAttribute("src", src);
}
return img;
}
mozile.gui.htmlToolbar.create = function() {
if(this.toolbar) return;
var href = [mozile.root, "src", "gui", "htmlToolbar.css"].join(mozile.filesep);
mozile.dom.addStyleSheet(href, "text/css");
this.toolbar = mozile.gui.htmlToolbar.createElement("div");
this.toolbar.setAttribute("id", "mozileToolbar");
if(mozile.browser.isIE) this.toolbar.className = "mozileGUI";
else this.toolbar.setAttribute("class", "mozileGUI");
var body = mozile.dom.getBody();
body.appendChild(this.toolbar);
if(mozile.browser.isIE) {
mozile.dom.setStyle(this.toolbar, "background-color", this.ieColor);
}
this.updateButtons();
this.reposition();
if(!mozile.browser.isMozilla || !mozile.useDesignMode) {
mozile.gui.htmlToolbar.interval = window.setInterval("mozile.gui.htmlToolbar.reposition()", mozile.updateInterval);
}
}
mozile.gui.htmlToolbar.reposition = function() {
if(!mozile.gui.htmlToolbar.toolbar) mozile.gui.htmlToolbar.create();
if(mozile.browser.isMozilla) {
mozile.dom.setStyle(mozile.gui.htmlToolbar.toolbar, "position", "fixed");
mozile.dom.setStyle(mozile.gui.htmlToolbar.toolbar, "top", "-1px");
}
else {
var top = document.documentElement.scrollTop;
if(top) mozile.dom.setStyle(mozile.gui.htmlToolbar.toolbar, "top", top +"px");
}
if(document.documentElement.clientWidth) {
var left = (document.documentElement.clientWidth - mozile.gui.htmlToolbar.toolbar.offsetWidth) / 2
if(left) mozile.dom.setStyle(mozile.gui.htmlToolbar.toolbar, "left", left +"px");
}
}
mozile.gui.htmlToolbar.update = function(event, change) {
if(!event) return false;
if(!change) {
if(event.type.indexOf("key") > -1 && event.type != "keyup") return false;
}
this.reposition();
if(!event || !event.node) {
mozile.gui.htmlToolbar.closeMenus();
return false;
}
if(!change) change = "none";
if(change == "node" || event.node != this.lastNode) {
change = "node";
if(mozile.dom.isAncestorOf(this.toolbar, event.node)) return false;
else mozile.gui.htmlToolbar.closeMenus();
this.lastNode = event.node;
if(!event.rng) event.rng = mozile.edit.lookupRNG(event.node);
if(!event.rng) return false;
this.updateButtons(event.rng, event);
}
this.updateCommands(event, change);
this.reposition();
return true;
}
mozile.gui.htmlToolbar.updateButtons = function(rng, event) {
mozile.dom.removeChildNodes(this.toolbar);
this.toolbar.commands = new Array();
for(var i=0; i < mozile.gui.htmlToolbar._commands.length; i++) {
this.updateButton(mozile.gui.htmlToolbar._commands[i]);
}
this.toolbar.appendChild(document.createTextNode("|"));
for(var i=0; i < mozile.edit._commands.length; i++) {
this.updateButton(mozile.edit._commands[i]);
}
if(rng && rng._commands && rng._commands.length) {
this.toolbar.appendChild(document.createTextNode("|"));
for(var i=0; i < rng._commands.length; i++) {
this.updateButton(rng._commands[i], event);
}
}
}
mozile.gui.htmlToolbar.updateButton = function(command, event) {
if(command.button) {
this.toolbar.appendChild(command.button.element);
}
else if(command.group || command.image) {
var button = new mozile.gui.htmlToolbar.Button(command);
this.toolbar.appendChild(button.element);
this.toolbar.commands.push(command);
}
if(command.button) {
this.toolbar.commands.push(command);
}
}
mozile.gui.htmlToolbar.updateCommands = function(event, change) {
if(!change || typeof(change) != "string") return;
if(change == "none") return;
for(var i=0; i < this.toolbar.commands.length; i++) {
var command = this.toolbar.commands[i];
if(command.respond(change)) {
mozile.gui.htmlToolbar.updateCommand(command, event);
}
}
}
mozile.gui.htmlToolbar.updateCommand = function(command, event) {
if(command.button) {
command.button.isAvailable(event);
command.button.isActive(event);
}
}
mozile.gui.htmlToolbar.closeMenus = function() {
if(!this.toolbar.commands) return;
for(var i=0; i < this.toolbar.commands.length; i++) {
var button = this.toolbar.commands[i].button;
if(button.menu && button.menu.opened) button.menu.close();
}
}
mozile.gui.htmlToolbar.display = function(content) {
var win = window.open("", "MozileDisplay", "");
win.document.write(content);
}
mozile.gui.htmlToolbar.Button = function(command) {
if(!command) return;
this.command = command;
this.type = "Button";
this.parent = null;
this.element = mozile.gui.htmlToolbar.createElement("span");
this.element.setAttribute("class", "mozileButton");
this.element.onclick = function(event) {
var c = mozile.edit.getCommand(command.name);
if(c) c.button.press(event);
}
this.image = mozile.gui.htmlToolbar.createImage(command.image);
this.element.appendChild(this.image);
if(command.group) {
this.menu = new mozile.gui.htmlToolbar.Menu(command);
this.menu.parent = this;
this.element.appendChild(this.menu.element);
var img = mozile.gui.htmlToolbar.createImage("arrow-down.gif");
this.element.appendChild(img);
}
command.button = this;
}
mozile.gui.htmlToolbar.Button.prototype.press = function(event) {
mozile.event.normalize(event);
var selection = mozile.dom.selection.get();
selection.restore();
var opened = false;
if(this.menu && this.menu.opened) opened = true;
if(!this.parent) mozile.gui.htmlToolbar.closeMenus();
if(this.menu) {
if(opened) this.menu.close();
else this.menu.open(event);
}
else {
mozile.gui.htmlToolbar.closeMenus();
var command = mozile.edit.getCommand(this.command.name);
if(command) {
if(!command.test()) {
mozile.debug.debug("mozile.gui.htmlToolbar.Button.press", "Command '"+ command.name +"' failed its test and will not be executed.");
return;
}
var state = command.prepare(event);
if(!state) return;
state = command.execute(state, false);
if(state) mozile.edit.done(state);
else alert("The execution of the command '"+ command.name +"' did not return a state.");
if(mozile.browser.isMozilla) {
var target = selection.focusNode;
var newEvent = document.createEvent("MouseEvents");
newEvent.initMouseEvent("click", true, true, window, 1, 0, 0, mozile.dom.getX(target), mozile.dom.getY(target), false, false, false, false, 1, null);
target.dispatchEvent(newEvent);
if(state && state.selection) {
if(state.selection.after) selection.restore(state.selection.after);
else selection.restore(state.selection.before);
}
mozile.gui.htmlToolbar.closeMenus();
}
}
else alert("No command matching name '"+ this.command.name +"'.");
}
mozile.event.cancel(event);
}
mozile.gui.htmlToolbar.Button.prototype.getPosition = function() {
var position = {
x: mozile.dom.getX(this.element),
y: mozile.dom.getY(this.element),
width: this.element.offsetWidth,
height: this.element.offsetHeight
};
return position;
}
mozile.gui.htmlToolbar.Button.prototype.isAvailable = function(event) {
var available = this.command.isAvailable(event);
if(available == this.available) return available;
this.element.setAttribute("available", available);
if(mozile.browser.isIE && this.image) {
if(available) this.image.style.cssText = "";
else this.image.style.cssText = "filter:alpha(opacity=50)";
}
this.available = available;
return available;
}
mozile.gui.htmlToolbar.Button.prototype.isActive = function(event) {
var active = this.command.isActive(event);
if(active == this.active) return active;
this.element.setAttribute("active", active);
if(mozile.browser.isIE && this.image) {
if(active) {
mozile.dom.setStyle(this.image, "border", mozile.gui.htmlToolbar.ieActiveBorder);
mozile.dom.setStyle(this.image, "padding", mozile.gui.htmlToolbar.ieActivePadding);
}
else {
mozile.dom.setStyle(this.image, "border", mozile.gui.htmlToolbar.ieBorder);
mozile.dom.setStyle(this.image, "padding", mozile.gui.htmlToolbar.iePadding);
}
}
this.active = active;
return active;
}
mozile.gui.htmlToolbar.MenuItem = function(command) {
if(!command) return;
this.command = command;
this.type = "MenuItem";
this.parent = null;
this.element = mozile.gui.htmlToolbar.createElement("tr");
this.element.setAttribute("class", "mozileMenuItem");
this.element.onclick = function(event) {
var c = mozile.edit.getCommand(command.name);
if(c) c.menuItem.press(event);
}
this.cells = {};
this.cells.active = mozile.gui.htmlToolbar.createElement("td");
this.cells.icon = mozile.gui.htmlToolbar.createElement("td");
this.cells.label = mozile.gui.htmlToolbar.createElement("td");
this.cells.accel = mozile.gui.htmlToolbar.createElement("td");
if(mozile.browser.isIE) {
this.cells.active.className = "mozileActive";
this.cells.icon.className = "mozileIcon";
this.cells.label.className = "mozileLabel";
this.cells.accel.className = "mozileAccel";
}
else {
this.cells.active.setAttribute("class", "mozileActive");
this.cells.icon.setAttribute("class", "mozileIcon");
this.cells.label.setAttribute("class", "mozileLabel");
this.cells.accel.setAttribute("class", "mozileAccel");
}
this.element.appendChild(this.cells.active);
this.element.appendChild(this.cells.icon);
this.element.appendChild(this.cells.label);
this.element.appendChild(this.cells.accel);
if(command.image) {
var img = mozile.gui.htmlToolbar.createImage(command.image);
this.cells.icon.appendChild(img);
}
var name = command.name;
if(command.label) name = command.label;
this.cells.label.appendChild(document.createTextNode(name));
if(command.group) {
this.menu = new mozile.gui.htmlToolbar.Menu(command);
this.menu.parent = this;
this.element.appendChild(this.menu.element);
img = mozile.gui.htmlToolbar.createImage("menu-arrow.gif");
this.cells.accel.appendChild(img);
}
else if(command.accel) {
var accel = mozile.edit.parseAccelerator(command.accel);
var span = mozile.gui.htmlToolbar.createElement("span");
span.appendChild(document.createTextNode(accel.abbr));
this.cells.accel.appendChild(span);
}
command.menuItem = this;
}
mozile.gui.htmlToolbar.MenuItem.prototype = new mozile.gui.htmlToolbar.Button;
mozile.gui.htmlToolbar.MenuItem.prototype.constructor = mozile.gui.htmlToolbar.MenuItem;
mozile.gui.htmlToolbar.MenuItem.prototype.isActive = function(event) {
var active = this.command.isActive(event);
if(active == this.active) return active;
mozile.dom.removeChildNodes(this.cells.active);
if(active) {
this.cells.active.appendChild(
mozile.gui.htmlToolbar.createImage("silk/tick"));
}
this.active = active;
return active;
}
mozile.gui.htmlToolbar.Menu = function(command) {
if(!command) return;
this.command = command;
this.type = "Menu";
this.parent = null;
this.element = mozile.gui.htmlToolbar.createElement("table");
this.element.setAttribute("class", "mozileMenu");
this.element.setAttribute("cellspacing", "0px");
mozile.dom.setStyle(this.element, "display", "none");
var tbody = mozile.gui.htmlToolbar.createElement("tbody");
this.element.appendChild(tbody);
if(mozile.browser.isIE) {
mozile.dom.setStyle(this.element, "background-color", mozile.gui.htmlToolbar.ieColor);
}
this.menuItems = new Array();
for(var i=0; i < command._commands.length; i++) {
var menuItem = new mozile.gui.htmlToolbar.MenuItem(command._commands[i]);
if(menuItem) {
this.menuItems.push(menuItem);
menuItem.parent = this;
tbody.appendChild(menuItem.element);
}
}
this.opened = false;
command.menu = this;
}
mozile.gui.htmlToolbar.Menu.prototype = new mozile.gui.htmlToolbar.Button;
mozile.gui.htmlToolbar.Menu.prototype.constructor = mozile.gui.htmlToolbar.Menu;
mozile.gui.htmlToolbar.Menu.prototype.open = function(event) {
try{
this.reposition();
mozile.dom.setStyle(this.element, "display", "block");
this.opened = true;
for(var i=0; i < this.menuItems.length; i++) {
this.menuItems[i].isAvailable(event);
this.menuItems[i].isActive(event);
}
} catch(e) { alert(mozile.dumpError(e)); }
}
mozile.gui.htmlToolbar.Menu.prototype.close = function() {
mozile.dom.setStyle(this.element, "display", "none");
this.opened = false;
for(var i=0; i < this.menuItems.length; i++) {
if(this.menuItems[i].menu && this.menuItems[i].menu.opened) {
this.menuItems[i].menu.close();
}
}
}
mozile.gui.htmlToolbar.Menu.prototype.reposition = function() {
if(!this.parent) return;
var left = 0;
var top = 0;
var position = this.parent.getPosition();
if(mozile.browser.isIE) {
mozile.dom.setStyle(this.element, "position", "absolute");
mozile.dom.setStyle(this.element, "width", mozile.gui.htmlToolbar.ieMenuWidth);
mozile.dom.setStyle(this.element, "border", mozile.gui.htmlToolbar.ieBorder);
left = this.parent.element.offsetLeft;
top = this.parent.element.offsetTop;
}
else {
var width = this.element.clientWidth;
mozile.dom.setStyle(this.element, "position", "fixed");
mozile.debug.debug("", position.x +" + "+ width +" = "+ (position.x + width) +" ? "+ document.documentElement.clientWidth);
if(position.x + width > document.documentElement.clientWidth) {
left = document.documentElement.clientWidth - width;
}
else left = position.x;
top = position.y;
}
if(this.parent.type == "Button") {
top += position.height;
}
else {
left += position.width;
}
mozile.dom.setStyle(this.element, "left", left +"px");
mozile.dom.setStyle(this.element, "top", top +"px");
}
Documentation generated by
JSDoc on Wed Aug 23 18:45:51 2006