diff -Nru ubuntu-html5-theme-0.1.2+14.04.20140217/0.1/ambiance/js/core.js ubuntu-html5-theme-0.1.2+14.04.20140218/0.1/ambiance/js/core.js
--- ubuntu-html5-theme-0.1.2+14.04.20140217/0.1/ambiance/js/core.js 2014-02-17 17:03:07.000000000 +0000
+++ ubuntu-html5-theme-0.1.2+14.04.20140218/0.1/ambiance/js/core.js 2014-02-18 17:23:36.000000000 +0000
@@ -227,6 +227,18 @@
};
},
+ __setupToolbars: function(document) {
+ var toolbars =
+ document.querySelectorAll('footer[data-role="footer"]');
+ for (var i = 0; i < toolbars.length; ++i) {
+ var id = toolbars[i].getAttribute('id');
+ if ( !id)
+ continue;
+ var toolbar = new Toolbar(
+ id, this.__getTabInfosDelegate());
+ }
+ },
+
__setupTabs: function (document) {
if (this._tabs != null)
return;
@@ -256,6 +268,7 @@
init: function () {
this.__setupTabs(document);
this.__setupPage(document);
+ this.__setupToolbars(document);
},
/**
@@ -339,7 +352,7 @@
*/
toolbar: function (id) {
if (typeof Toolbar != 'undefined' && Toolbar) {
- return new Toolbar(this, id);
+ return new Toolbar(id, this.__getTabInfosDelegate());
}
},
diff -Nru ubuntu-html5-theme-0.1.2+14.04.20140217/0.1/ambiance/js/toolbars.js ubuntu-html5-theme-0.1.2+14.04.20140218/0.1/ambiance/js/toolbars.js
--- ubuntu-html5-theme-0.1.2+14.04.20140217/0.1/ambiance/js/toolbars.js 2014-02-17 17:02:45.000000000 +0000
+++ ubuntu-html5-theme-0.1.2+14.04.20140218/0.1/ambiance/js/toolbars.js 2014-02-18 17:23:36.000000000 +0000
@@ -50,47 +50,202 @@
*/
-var Toolbar = function (UbuntuUI, id) {
- this.toolbar = document.getElementById(id);
-};
-
-Toolbar.prototype = {
- /**-
- * Display a Toolbar
- * @method show
- */
- show: function () {
- this.toolbar.classList.add('revealed');
- },
- /**-
- * Hide a Toolbar
- * @method hide
- */
- hide: function () {
- this.toolbar.classList.remove('revealed');
- },
- /**
- * Toggle show/hide status of a Toolbar
- * @method toggle
- */
- toggle: function () {
- this.toolbar.classList.toggle('revealed');
- },
- /**
- * Provide a callback function that's called with the Toolbar is touched
- * @method touch
- * @param {Function} function - The function that is called when the Toolbar is touched
- */
- touch: function (callback) {
- this.toolbar.addEventListener(UbuntuUI.touchEvents.touchEnd, callback);
- },
- /**
- * Returns the DOM element associated with the id this widget is bind to.
- * @method element
- * @example
- var mytoolbar = UI.toolbar("toolbarid").element();
- */
- element: function () {
- return this.toolbar;
- }
-};
+var Toolbar = (function () {
+
+ function Toolbar(id, touchInfoDelegate) {
+
+ this.PHASE_START = "start";
+ this.PHASE_MOVE = "move";
+ this.PHASE_END = "end";
+ this.PHASE_CANCEL = "cancel";
+
+ this.phase = null;
+
+ this.toolbar = document.getElementById(id);
+ if ( ! this.toolbar)
+ throw "Invalid toolbar id";
+
+ this._touchDown = false;
+ this._touchInfoDelegate = touchInfoDelegate;
+
+ this.fingerData = [];
+ this.fingerData.push({
+ start: {
+ x: 0,
+ y: 0
+ },
+ end: {
+ x: 0,
+ y: 0
+ },
+ identifier: 0
+ });
+
+ var touchEvents = touchInfoDelegate.touchEvents;
+ touchInfoDelegate.registerTouchEvent(
+ touchEvents.touchStart, this.toolbar, this.__onTouchStart.bind(this));
+ touchInfoDelegate.registerTouchEvent(
+ touchEvents.touchEnd, this.toolbar, this.__onTouchEnd.bind(this));
+ touchInfoDelegate.registerTouchEvent(
+ touchEvents.touchMove, this.toolbar, this.__onTouchMove.bind(this));
+ touchInfoDelegate.registerTouchEvent(
+ touchEvents.touchLeave, this.toolbar, this.__onTouchLeave.bind(this));
+ };
+
+ Toolbar.prototype = {
+ /**-
+ * Display a Toolbar
+ * @method show
+ */
+ show: function () {
+ this.toolbar.classList.add('revealed');
+ },
+
+ /**-
+ * Hide a Toolbar
+ * @method hide
+ */
+ hide: function () {
+ this.toolbar.classList.remove('revealed');
+ },
+
+ /**
+ * Toggle show/hide status of a Toolbar
+ * @method toggle
+ */
+ toggle: function () {
+ this.toolbar.classList.toggle('revealed');
+ },
+
+ /**
+ * Returns the DOM element associated with the id this widget is bind to.
+ * @method element
+ * @example
+ var mytoolbar = UI.toolbar("toolbarid").element();
+ */
+ element: function () {
+ return this.toolbar;
+ },
+
+ /**
+ * @private
+ */
+ __onTouchStart: function (evt) {
+ this._touchDown = true;
+
+ evt.preventDefault();
+
+ this.phase = this.PHASE_START;
+ var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+
+ var touchEvent =
+ this._touchInfoDelegate.translateTouchEvent(evt);
+
+ this.fingerData[0].identifier = identifier;
+ this.fingerData[0].start.x =
+ this.fingerData[0].end.x = touchEvent.touches[0].pageX;
+ this.fingerData[0].start.y =
+ this.fingerData[0].end.y = touchEvent.touches[0].pageY;
+ },
+
+ /**
+ * @private
+ */
+ __onTouchMove: function (evt) {
+ if ( ! this._touchDown)
+ return;
+
+ if (this.phase === this.PHASE_END || this.phase === this.PHASE_CANCEL)
+ return;
+
+ if (this.phase == this.PHASE_START) {
+ evt.preventDefault();
+
+ var touchEvent =
+ this._touchInfoDelegate.translateTouchEvent(evt);
+
+ var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+ var f = this.__getFingerData(identifier);
+
+ f.end.x = touchEvent.touches[0].pageX;
+ f.end.y = touchEvent.touches[0].pageY;
+
+ direction = this.__calculateDirection(f.start, f.end);
+
+ if (direction == "DOWN") {
+ this.hide();
+ }
+
+ if (direction == "UP") {
+ this.show();
+ }
+
+ phase = this.PHASE_MOVE;
+ }
+ },
+
+ /**
+ * @private
+ */
+ __onTouchEnd: function (e) {
+ this._touchDown = false;
+ phase = this.PHASE_END;
+ },
+
+ /**
+ * @private
+ */
+ __onTouchLeave: function (e) {
+ this._touchDown = false;
+ phase = this.PHASE_CANCEL;
+ },
+
+ /**
+ * @private
+ */
+ __calculateDirection: function (startPoint, endPoint) {
+ var angle = this.__calculateAngle(startPoint, endPoint);
+
+ if ((angle <= 45) && (angle >= 0)) {
+ return "LEFT";
+ } else if ((angle <= 360) && (angle >= 315)) {
+ return "LEFT";
+ } else if ((angle >= 135) && (angle <= 225)) {
+ return "RIGHT";
+ } else if ((angle > 45) && (angle < 135)) {
+ return "DOWN";
+ } else {
+ return "UP";
+ }
+ },
+
+ /**
+ * @private
+ */
+ __getFingerData: function (id) {
+ for (var i = 0; i < this.fingerData.length; i++) {
+ if (this.fingerData[i].identifier == id) {
+ return this.fingerData[i];
+ }
+ }
+ },
+
+ /**
+ * @private
+ */
+ __calculateAngle: function (startPoint, endPoint) {
+ var x = startPoint.x - endPoint.x;
+ var y = endPoint.y - startPoint.y;
+ var r = Math.atan2(y, x); //radians
+ var angle = Math.round(r * 180 / Math.PI); //degrees
+
+ //ensure value is positive
+ if (angle < 0) {
+ angle = 360 - Math.abs(angle);
+ }
+
+ return angle;
+ }
+ };
+ return Toolbar;
+})();
diff -Nru ubuntu-html5-theme-0.1.2+14.04.20140217/debian/changelog ubuntu-html5-theme-0.1.2+14.04.20140218/debian/changelog
--- ubuntu-html5-theme-0.1.2+14.04.20140217/debian/changelog 2014-02-18 17:27:15.000000000 +0000
+++ ubuntu-html5-theme-0.1.2+14.04.20140218/debian/changelog 2014-02-18 17:27:15.000000000 +0000
@@ -1,3 +1,14 @@
+ubuntu-html5-theme (0.1.2+14.04.20140218-0ubuntu1) trusty; urgency=low
+
+ [ Alexandre Abreu ]
+ * Based on a branch from daker: lp:~daker/ubuntu-html5-
+ theme/fix.1202349 Revamped & made it work on desktop and touch.
+ Remove the need to declare the toolbar in js. (LP: #1202349)
+ * Resize the root object to the view (LP: #1279932)
+ * need to add an example of shape + text inside (LP: #1279936)
+
+ -- Ubuntu daily release Tue, 18 Feb 2014 17:24:08 +0000
+
ubuntu-html5-theme (0.1.2+14.04.20140217-0ubuntu1) trusty; urgency=low
[ Ubuntu daily release ]
diff -Nru ubuntu-html5-theme-0.1.2+14.04.20140217/examples/html5-theme/apps/rss-reader/index.html ubuntu-html5-theme-0.1.2+14.04.20140218/examples/html5-theme/apps/rss-reader/index.html
--- ubuntu-html5-theme-0.1.2+14.04.20140217/examples/html5-theme/apps/rss-reader/index.html 2014-02-17 17:02:56.000000000 +0000
+++ ubuntu-html5-theme-0.1.2+14.04.20140218/examples/html5-theme/apps/rss-reader/index.html 2014-02-18 17:23:36.000000000 +0000
@@ -47,6 +47,7 @@
+
@@ -63,7 +64,7 @@
-