home *** CD-ROM | disk | FTP | other *** search
- <?xml version="1.0"?>
- <bindings xmlns="http://www.mozilla.org/xbl"
- xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
- xmlns:xbl="http://www.mozilla.org/xbl"
- xmlns:html="http://www.w3.org/1999/xhtml">
-
- <binding id="toolbar"
- extends="../../../yasearch.xml#yasearch-bar"
- inheritstyle="false">
- <resources>
- <stylesheet src="toolbar.css"/>
- </resources>
-
- <content>
- <xul:hbox flex="1">
- <xul:box class="toolbar-container" flex="1">
- <children/>
- </xul:box>
- <xul:button class="button" oncommand="toggle();"/>
- </xul:hbox>
- </content>
- <implementation implements="nsIDOMEventListener">
- <field name="nodeChevron">document.getAnonymousElementByAttribute(this, "class", "button")</field>
- <field name="nodeContainer">document.getAnonymousElementByAttribute(this, "class", "toolbar-container")</field>
- <field name="applicationName">this.getAttribute("xb-app")</field>
-
- <constructor><![CDATA[
- this.rules = {
- multiline: {
- rule: "\
- toolbar[xb-app='%application-name%'][xb-toolbar-multiline] > * {\
- vertical-align: middle;\
- display: -moz-inline-box;\
- }"
- },
- excess: {
- rule: "\
- toolbar[xb-app='%application-name%'] > [xb-toolbar-item-excess] {\
- visibility: hidden;\
- margin-bottom: -512px;\
- }"
- },
- height: {
- rule: "\
- toolbar[xb-app='%application-name%'][xb-toolbar-multiline] > * {\
- }}"
- }
- };
-
- this.createRules();
-
- setTimeout(function(me) {
- if (me && "_constructorEx" in me)
- me._constructorEx();
- }, 100, this);
- ]]></constructor>
-
- <method name="_constructorEx">
- <body><![CDATA[
- this.checkVisibility(true);
-
- this.nodeContainer.addEventListener("overflow", this, false);
- this.nodeContainer.addEventListener("underflow", this, false);
- this.nodeContainer.addEventListener("DOMSubtreeModified", this, false);
- window.addEventListener("resize", this, false);
- ]]></body>
- </method>
-
- <destructor><![CDATA[
- this.destroyRules();
-
- this.nodeContainer.removeEventListener("overflow", this, false);
- this.nodeContainer.removeEventListener("underflow", this, false);
- this.nodeContainer.removeEventListener("DOMSubtreeModified", this, false);
- window.removeEventListener("resize", this, false);
- ]]></destructor>
-
- <method name="_getComputedElementHeight">
- <parameter name="element"/>
- <body><![CDATA[
- return parseInt(window.getComputedStyle(element, null).getPropertyValue("height"), 10);
- ]]></body>
- </method>
-
- <property name="multiline">
- <getter><![CDATA[
- return this.hasAttribute("xb-toolbar-multiline");
- ]]></getter>
- <setter><![CDATA[
- if (this.hasAttribute("xb-toolbar-multiline") == !!val)
- return;
-
- if (val) {
- let items = this.getElementsByAttribute("xb-toolbar-item-excess", "true");
- for (let i = items.length; i-- > 0;)
- items[i].removeAttribute("xb-toolbar-item-excess");
-
- let height = this._getComputedElementHeight(this);
- let childNodes = this.childNodes;
-
- for (let i = childNodes.length; i-- > 0;)
- height = Math.min(height, Math.max(16, this._getComputedElementHeight(childNodes[i]) || height));
-
- this.setButtonsHeight(height);
-
- this.setAttribute("xb-toolbar-multiline", "true");
- }
- else {
- this.setButtonsHeight(null);
- this.removeAttribute("xb-toolbar-multiline");
- }
- ]]></setter>
- </property>
-
- <property name="overflow">
- <getter><![CDATA[
- return this.hasAttribute("xb-toolbar-overflow");
- ]]></getter>
- <setter><![CDATA[
- if (val)
- this.setAttribute("xb-toolbar-overflow", "true");
- else
- this.removeAttribute("xb-toolbar-overflow");
- ]]></setter>
- </property>
-
- <method name="toggle">
- <body><![CDATA[
- this.multiline = !this.multiline;
- this.checkVisibility();
- ]]></body>
- </method>
-
- <method name="onToolbarCustomize">
- <parameter name="enabled"/>
- <body><![CDATA[
- if (enabled) {
- this.multilineBeforeCustomizeDialog = this.multiline;
- this.multiline = true;
- }
- else {
- this.multiline = this.isOverflow() && this.multilineBeforeCustomizeDialog;
- }
- this.checkVisibility();
- ]]></body>
- </method>
-
- <method name="createRules">
- <body><![CDATA[
- var stylesheet = window.document.styleSheets[0];
- var rules = stylesheet.cssRules;
-
- for (let name in this.rules) {
- let item = this.rules[name];
- let rule = item.rule.replace("%application-name%", this.applicationName);
- item.object = rules[stylesheet.insertRule(rule, rules.length)];
- }
- ]]></body>
- </method>
-
- <method name="destroyRules">
- <body><![CDATA[
- for (let name in this.rules) {
- let rule = this.rules[name].object;
- let stylesheet = rule.parentStyleSheet;
- let rules = stylesheet.cssRules;
-
- for (let i = rules.length; i--;)
- if (rules[i] == rule) {
- stylesheet.deleteRule(i);
- break;
- }
- }
- ]]></body>
- </method>
-
- <method name="setButtonsHeight">
- <parameter name="height"/>
- <body><![CDATA[
- if (this.rules.height.object)
- this.rules.height.object.style.minHeight = height ? height + "px" : "";
- ]]></body>
- </method>
-
- <method name="isOverflow">
- <body><![CDATA[
- if (!this.firstVisibleItem)
- return false;
- if (this.multiline)
- return this.firstVisibleItem.getBoundingClientRect().bottom <= this.lastVisibleItem.getBoundingClientRect().top;
- else
- return this.lastVisibleItem.getBoundingClientRect().right > this.nodeContainer.getBoundingClientRect().right;
- ]]></body>
- </method>
-
- <method name="checkOverflow">
- <parameter name="autoOffMultiline"/>
- <body><![CDATA[
- var overflow = this.isOverflow();
- if (overflow != this.overflow)
- this.overflow = overflow;
-
- if (autoOffMultiline && !overflow && this.multiline)
- this.multiline = false;
- ]]></body>
- </method>
-
- <method name="checkVisibilityDefer">
- <parameter name="autoOffMultiline"/>
- <body><![CDATA[
- if (this._checkVisibilityTimeout)
- clearTimeout(this._checkVisibilityTimeout);
-
- function doCheck(context)
- context.checkVisibility.call(context, autoOffMultiline);
-
- this._checkVisibilityTimeout = setTimeout(doCheck, 150, this);
- ]]></body>
- </method>
-
- <method name="checkVisibility">
- <parameter name="autoOffMultiline"/>
- <body><![CDATA[
- if (!this.lastChild) {
- this.overflow = false;
- return;
- }
-
- var right = this.nodeContainer.getBoundingClientRect().right,
- item = this.lastChild,
- token = right - item.getBoundingClientRect().right;
-
- if (this.token == token)
- return;
- this.token = token;
-
- this.checkOverflow(autoOffMultiline);
-
- var overflowed = this.overflow;
-
- while (item) {
- if (this.isNormalToolbarItem(item)) {
- if (overflowed)
- overflowed = (item.getBoundingClientRect().right > right);
-
- if (!overflowed && !item.hasAttribute("xb-toolbar-item-excess"))
- break;
-
- if (overflowed)
- item.setAttribute("xb-toolbar-item-excess", "true");
- else
- item.removeAttribute("xb-toolbar-item-excess");
- }
- item = item.previousSibling;
- }
- ]]></body>
- </method>
-
- <method name="handleEvent">
- <parameter name="event"/>
- <body><![CDATA[
- switch (event.type) {
- case "overflow":
- this.overflow = true;
- this.checkVisibility();
- return;
- break;
-
- case "underflow":
- this.overflow = false;
- this.checkVisibility();
- return;
- break;
-
- case "DOMSubtreeModified":
- this.checkVisibilityDefer();
- break;
-
- case "resize":
- if (event.eventPhase == event.AT_TARGET)
- this.checkVisibilityDefer(true);
- break;
-
- default:
- return;
- }
- ]]></body>
- </method>
-
- <property name="firstVisibleItem" readonly="true">
- <getter>
- var node = this.firstChild;
- while (node) {
- if (this.isNormalToolbarItem(node))
- return node;
- node = node.nextSibling;
- }
- return null;
- </getter>
- </property>
-
- <property name="lastVisibleItem" readonly="true">
- <getter>
- var node = this.lastChild;
- while (node) {
- if (this.isNormalToolbarItem(node))
- return node;
- node = node.previousSibling;
- }
- return null;
- </getter>
- </property>
-
- <method name="isNormalToolbarItem">
- <parameter name="node"/>
- <body><![CDATA[
- return (node.localName != "toolbarseparator") || (window.getComputedStyle(node, null).getPropertyValue("display") != "none");
- ]]></body>
- </method>
- </implementation>
- <handlers>
- <handler event="scroll"><![CDATA[
- this.nodeContainer.scrollTop = 0;
- this.nodeContainer.scrollLeft = 0;
- ]]></handler>
- </handlers>
- </binding>
-
- <binding id="button"
- display="xul:toolbarbutton"
- inheritstyle="false">
- <resources>
- <stylesheet src="button.css"/>
- </resources>
-
- <content>
- <xul:box class="top"/>
- <xul:box class="middle">
- <xul:image/>
- </xul:box>
- <xul:box class="bottom"/>
- </content>
- </binding>
- </bindings>