1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/base/content/bindings/circularprogress.xml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,134 @@
1.4 +<?xml version="1.0"?>
1.5 +
1.6 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.7 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.8 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.9 +
1.10 +<bindings xmlns="http://www.mozilla.org/xbl"
1.11 + xmlns:xbl="http://www.mozilla.org/xbl"
1.12 + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.13 + xmlns:html="http://www.w3.org/1999/xhtml">
1.14 + <binding id="circular-progress-indicator">
1.15 + <resources>
1.16 + <stylesheet src="chrome://browser/skin/circularprogress.css"/>
1.17 + </resources>
1.18 +
1.19 + <content>
1.20 + <xul:stack>
1.21 + <xul:toolbarbutton anonid="progressButton"
1.22 + class="circularprogressindicator-progressButton"/>
1.23 + <html:div anonid="progressTrack"
1.24 + xbl:inherits="progress"
1.25 + class="circularprogressindicator-progressTrack">
1.26 + </html:div>
1.27 + <html:canvas anonid="progressRing"
1.28 + xbl:inherits="progress"
1.29 + class="circularprogressindicator-progressRing"
1.30 + width="40"
1.31 + height="40">
1.32 + </html:canvas>
1.33 + <html:div anonid="progressNotification"
1.34 + xbl:inherits="progress"
1.35 + class="circularprogressindicator-progressNotification">
1.36 + </html:div>
1.37 + </xul:stack>
1.38 + </content>
1.39 +
1.40 + <implementation>
1.41 + <field name="_progressCanvas">
1.42 + document.getAnonymousElementByAttribute(this, "anonid", "progressRing");
1.43 + </field>
1.44 + <field name="_progressNotification">
1.45 + document.getAnonymousElementByAttribute(this, "anonid",
1.46 + "progressNotification");
1.47 + </field>
1.48 + <field name="_progressCircleCtx">null</field>
1.49 + <field name="_img">null</field>
1.50 + <constructor>
1.51 + <![CDATA[
1.52 + this._progressCircleCtx = this._progressCanvas.getContext('2d');
1.53 + ]]>
1.54 + </constructor>
1.55 + <method name="updateProgress">
1.56 + <parameter name="percentComplete"/>
1.57 + <body>
1.58 + <![CDATA[
1.59 + const PROGRESS_RING_IMG = "chrome://browser/skin/images/progresscircle.png";
1.60 +
1.61 + // show ring background even if % is 0.
1.62 + this.setAttribute("progress", percentComplete);
1.63 +
1.64 + let startAngle = 1.5 * Math.PI;
1.65 + let endAngle = startAngle + (2 * Math.PI * (percentComplete / 100));
1.66 +
1.67 + if (!this._img) {
1.68 + this._img = new Image();
1.69 + this._img.onload = () => {
1.70 + this.updateProgress(this.getAttribute("progress"))
1.71 + }
1.72 + this._img.src = PROGRESS_RING_IMG;
1.73 + }
1.74 + else if (this._img.complete) {
1.75 + let ctx = this._progressCircleCtx;
1.76 + ctx.clearRect(0, 0,
1.77 + this._progressCanvas.width, this._progressCanvas.height);
1.78 +
1.79 + // Save the state, so we can undo the clipping
1.80 + ctx.save();
1.81 +
1.82 + ctx.beginPath();
1.83 + let center = this._progressCanvas.width / 2;
1.84 + ctx.arc(center, center, center, startAngle, endAngle, false);
1.85 + ctx.lineTo(center, center);
1.86 + ctx.closePath();
1.87 + ctx.clip();
1.88 +
1.89 + // Draw circle image.
1.90 + ctx.translate(center, center);
1.91 + ctx.rotate(endAngle);
1.92 + ctx.drawImage(this._img, -center, -center);
1.93 +
1.94 + ctx.restore();
1.95 + } else {
1.96 + // Image is still loading
1.97 + }
1.98 + return [startAngle, endAngle];
1.99 + ]]>
1.100 + </body>
1.101 + </method>
1.102 + <method name="reset">
1.103 + <body>
1.104 + <![CDATA[
1.105 + if(this._img && !this._img.complete) {
1.106 + // cancel any pending updateProgress
1.107 + this._img.onload = () => {};
1.108 + }
1.109 + this._progressCircleCtx.clearRect(0, 0,
1.110 + this._progressCanvas.width, this._progressCanvas.height);
1.111 + this.removeAttribute("progress");
1.112 + ]]>
1.113 + </body>
1.114 + </method>
1.115 + <method name="notify">
1.116 + <body>
1.117 + <![CDATA[
1.118 + this.addEventListener("transitionend", this._onNotificationEnd);
1.119 +
1.120 + this._progressNotification.classList.add(
1.121 + "progressNotification-active");
1.122 + ]]>
1.123 + </body>
1.124 + </method>
1.125 + <method name="_onNotificationEnd">
1.126 + <body>
1.127 + <![CDATA[
1.128 + this.removeEventListener("transitionend", this._onNotificationEnd);
1.129 +
1.130 + this._progressNotification.classList.remove(
1.131 + "progressNotification-active");
1.132 + ]]>
1.133 + </body>
1.134 + </method>
1.135 + </implementation>
1.136 + </binding>
1.137 +</bindings>
