pjs/layout/style/xbl-marquee/xbl-marquee.xml

<?xml version="1.0"?>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is Netscape's XBL Marquee Emulation code.
   -
   - The Initial Developer of the Original Code is
   - Netscape Communications Corporation.
   - Portions created by the Initial Developer are Copyright (C) 2002
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -   Doron Rosenberg <doron@netscape.com>
   -   L. David Baron <dbaron@dbaron.org>
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

<bindings id="marqueeBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl">


  <binding id="marquee" inheritstyle="false">

    <resources>
      <stylesheet src="chrome://xbl-marquee/content/xbl-marquee.css"/>
    </resources>
    <implementation>

      <field name="defaultScrollAmount">6</field>
      <property name="scrollAmount">
        <getter>
          if (this.hasAttribute("scrollamount"))
            return this.getAttribute("scrollamount");
          return this.defaultScrollAmount; //default value is 6 pixels
        </getter>
        <setter>
          this.setAttribute("scrollamount", val);
        </setter>
      </property>

      <field name="defaultScrollDelay">85</field>
      <property name="scrollDelay">
        <getter>
          <![CDATA[
          var rv = this.defaultScrollDelay; //default value is 85 ms

          if (this.hasAttribute("scrolldelay")) {
            rv = this.getAttribute("scrolldelay");

            //marquee doesn't allow anything shorter than 40 ms
            if (rv < 40)
              rv = 40;
          }
          return rv;
          ]]>
        </getter>
        <setter>
          this.setAttribute("scrolldelay", val);

          // since we changed the scrolldelay, restart the marquee
          this._doMove(false);
        </setter>
      </property>

      <field name="defaultDirection">"left"</field>
      <property name="direction">
        <getter>
          return this.directionField;
        </getter>
        <setter>
          // if val is false, don't change anything
          if (val) {
            // in case direction is swapped between horizontal/vertical, use
            // setAttribute to make the xbl bindings change.
            this.setAttribute("direction", val);

            // since we changed the direction, set startNewDirection to true
            this.startNewDirection = true;
            this.directionField = val.toLowerCase();

            // pass in aSkipSettingNewPosition as true
            this._doMove(true);
          }
        </setter>
      </property>

      <field name="directionField">"left"</field>

      <field name="defaultBehavior">"scroll"</field>
      <property name="behavior">
        <getter>
          return this.behaviorField;
        </getter>
        <setter>
          this.behaviorField = val ? val.toLowerCase() : this.defaultBehavior;
        </setter>
      </property>

      <field name="behaviorField">"scroll"</field>

      <field name="dirsign">1</field>
      <field name="startAt">0</field>
      <field name="stopAt">0</field>
      <field name="newPosition">0</field>
      <field name="runId">0</field>

      <field name="originalHeight">0</field>
      <field name="startNewDirection">true</field>

      <property name="outerDiv"
        onget="return document.getAnonymousNodes(this)[0]"
      />

      <property name="innerDiv"
        onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'innerDiv');"
      />

      <property name="height"
        onget="return this.getAttribute('height');"
      />

      <property name="width">
        <getter>
          <![CDATA[
          var rv = "1px";
          if (this.hasAttribute("width"))
            rv = this.getAttribute("width");
          else if (this.offsetWidth) {
            // if the element has an offsetWidth, don't set a width
            rv = "";
          } else if (this.offsetParent) {
            var myElem = this.offsetParent;

            // lets walk up the offsetParent tree looking for an
            // element with a width.

            while (myElem.offsetParent && (myElem.offsetWidth <= 0))
              myElem = myElem.offsetParent;

            if (myElem)
              rv = myElem.offsetWidth + "px";
          }

          return rv;
          ]]>
        </getter>
      </property>

      <!-- For sniffing purposes -->
      <field name="nsMarqueeVersion">"0.9.7"</field>

      <method name="start">
        <body>
        <![CDATA[
          this._doMove(false);
        ]]>
        </body>
      </method>

      <method name="stop">
        <body>
        <![CDATA[
          if (this.runId != 0)
            clearTimeout(this.runId);

          this.runId = 0;
        ]]>
        </body>
      </method>

      <method name="_doMove">
        <parameter name="aSkipSettingNewPosition"/>
        <body>
        <![CDATA[

          this.stop();

          //startNewDirection is true at first load and whenever the direction is changed
          if (this.startNewDirection) {
            this.startNewDirection = false; //we only want this to run once every scroll direction change

            if ((this.directionField == "up") || (this.directionField == "down"))
            {
              // "", 0 and empty height should default to 200px
              var height =
                (this.getAttribute("height") != "0" &&
                 this.getAttribute("height")) ||
                (document.defaultView.getComputedStyle(this,"").height != "0px" &&
                 document.defaultView.getComputedStyle(this,"").height) ||
                 "200px";

              // support % heights
              if (/%/.test(height)) {
                height = parseInt('0' + height, 10);
                height = (height/100) * this.outerDiv.offsetHeight;
              }

              this.outerDiv.style.height = height;

              this.innerDiv.style.padding = height + " 0";
              this.innerDiv.style.whiteSpace = "";
            }
            else {
              this.outerDiv.style.height = "";

              this.innerDiv.style.padding = "0px";
              this.innerDiv.style.whiteSpace = "nowrap";
            }

            switch (this.directionField)
            {
              case "up":
                this.dirsign = 1;
                this.startAt = (this.behaviorField == 'alternate') ? this.originalHeight : 0;
                this.stopAt  = this.innerDiv.offsetHeight - parseInt(this.outerDiv.style.height) 
                               - ((this.behaviorField == 'alternate') ? this.originalHeight : 0);               
              break;

              case "down":
                this.dirsign = -1;
                this.startAt = this.innerDiv.offsetHeight - parseInt(this.outerDiv.style.height)
                               - ((this.behaviorField == 'alternate') ? this.originalHeight : 0);
                this.stopAt  = (this.behaviorField == 'alternate') ? this.originalHeight : 0;
              break;

              case "right":
                this.dirsign = -1;
                this.stopAt  = (this.behaviorField != 'alternate') ? this.innerDiv.offsetLeft - this.outerDiv.offsetWidth : this.innerDiv.offsetWidth;
                this.startAt = this.outerDiv.offsetWidth 
                               + ((this.behaviorField != 'alternate') ? (this.innerDiv.offsetWidth + this.stopAt) : 0);   
              break;

              case "left":
              default:
                this.dirsign = 1;
                this.startAt = (this.behaviorField != 'alternate') ? (this.innerDiv.offsetLeft - this.outerDiv.offsetWidth) : this.innerDiv.offsetWidth;
                this.stopAt  = this.outerDiv.offsetWidth
                               + ((this.behaviorField != 'alternate') ? (this.innerDiv.offsetWidth + this.startAt) : 0);
            }

            // if the direction attribute is changed, don't reset the starting position
            if (!aSkipSettingNewPosition)
              this.newPosition = this.startAt;
          } //end if

          this.newPosition = parseInt(this.newPosition) + (this.dirsign * this.scrollAmount);

          if ((this.dirsign == 1 && this.newPosition > this.stopAt) ||
              (this.dirsign == -1 && this.newPosition < this.stopAt))
          {
            if (this.behaviorField == "alternate")
            {
              // lets start afresh
              this.startNewDirection = true;

              // swap direction
              const swap = {left: "right", down: "up", up: "down", right: "left"};
              this.directionField = swap[this.directionField];
            }
            else
            {
              this.newPosition = this.startAt;
            }
          }

          if (!this.startNewDirection) {
            if ((this.directionField == "up") || (this.directionField == "down"))
              this.outerDiv.scrollTop = this.newPosition;
            else
              this.outerDiv.scrollLeft = this.newPosition;
          }

          var myThis = this;

          var lambda = function myTimeOutFunction(){myThis.start();}
          this.runId = window.setTimeout(lambda, this.scrollDelay);
        ]]>
        </body>
      </method>

      <method name="init">
        <body>
        <![CDATA[
          var height;

          if (this.hasAttribute('height')) {
            height = this.getAttribute('height');
            this.outerDiv.style.height = height + "px";
          }

          this.outerDiv.style.width = this.width;

          // Some sites access the element via the evil IE way of elementID.foo()
          if (this.hasAttribute('id'))
            window[this.getAttribute('id')] = this;

          // Website can define a background color via the bgcolor attribute
          if (this.hasAttribute("bgcolor"))
            this.outerDiv.style.backgroundColor = this.getAttribute("bgcolor");

          // store the original height before we add padding
          this.originalHeight = this.innerDiv.offsetHeight;

          this._doMove(false);
        ]]>
        </body>
      </method>

      <constructor>
        <![CDATA[
          // for performance, we store the lowercased direction/behavior in a field.
          // default to "left"
          this.directionField = this.hasAttribute("direction") ? this.getAttribute("direction").toLowerCase() : this.defaultDirection;
          
          // default to "scroll"
          this.behaviorField = this.hasAttribute("behavior") ? this.getAttribute("behavior").toLowerCase() : this.defaultBehavior;

          var myThis = this;
          var lambda = function myScopeFunction() { myThis.init(); }

          // init needs to be run after the page has loaded in order to calculate
          // the correct height/width
          window.addEventListener("load", lambda, false);
        ]]>
      </constructor>
    </implementation>
    
    <handlers>
      <handler event="DOMAttrModified" phase="target">
        <![CDATA[
        var attrName = event.attrName.toLowerCase();
        var oldValue = event.prevValue.toLowerCase();
        var newValue = event.newValue.toLowerCase();

        // only if a new value is specified
        if (oldValue != newValue && newValue) {
          if (attrName == "direction") {
            this.startNewDirection = true;
            this.directionField = newValue;
            this._doMove(true);
          } else if (attrName == "behavior") {
            this.behaviorField = newValue;
          }
        }
        ]]>
      </handler>
    </handlers>

  </binding>

  <binding id="marquee-horizontal"
           extends="chrome://xbl-marquee/content/xbl-marquee.xml#marquee"
           inheritstyle="false">

    <content>
      <html:div xbl:inherits="" style="overflow: -moz-scrollbars-none">
        <xul:hbox style="margin: 0 100%;">
          <html:div anonid="innerDiv">
            <children/>
          </html:div>
        </xul:hbox>
      </html:div>
    </content>

  </binding>

  <binding id="marquee-vertical"
           extends="chrome://xbl-marquee/content/xbl-marquee.xml#marquee">

    <content>
      <html:div xbl:inherits="" style="overflow: -moz-scrollbars-none">
        <html:div anonid="innerDiv">
          <children/>
        </html:div>
      </html:div>
    </content>

  </binding>

</bindings>