← Back to branch summary

~daker/ubuntu-html5-theme/fix.1294779

« back to all changes in this revision

Viewing changes to 0.1/ambiance/js/toolbars.js

  • Committer: CI bot
  • Author(s): Alexandre Abreu
  • Date: 2014-02-18 17:23:37 UTC
  • mfrom: (139.1.1 latest)
  • Revision ID: ps-jenkins@lists.canonical.com-20140218172337-01ic4gqnjno3ft9q
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. Fixes: 1202349

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/js/toolbars.js
50
50
 
51
51
 */
52
52
 
53
 
var Toolbar = function (UbuntuUI, id) {
54
 
    this.toolbar = document.getElementById(id);
55
 
};
56
 
 
57
 
Toolbar.prototype = {
58
 
    /**-
59
 
     * Display a Toolbar
60
 
     * @method show
61
 
     */
62
 
    show: function () {
63
 
        this.toolbar.classList.add('revealed');
64
 
    },
65
 
    /**-
66
 
     * Hide a Toolbar
67
 
     * @method hide
68
 
     */
69
 
    hide: function () {
70
 
        this.toolbar.classList.remove('revealed');
71
 
    },
72
 
    /**
73
 
     * Toggle show/hide status of a Toolbar
74
 
     * @method toggle
75
 
     */
76
 
    toggle: function () {
77
 
        this.toolbar.classList.toggle('revealed');
78
 
    },
79
 
    /**
80
 
     * Provide a callback function that's called with the Toolbar is touched
81
 
     * @method touch
82
 
     * @param {Function} function - The function that is called when the Toolbar is touched
83
 
     */
84
 
    touch: function (callback) {
85
 
        this.toolbar.addEventListener(UbuntuUI.touchEvents.touchEnd, callback);
86
 
    },
87
 
    /**
88
 
     * Returns the DOM element associated with the id this widget is bind to.
89
 
     * @method element
90
 
     * @example
91
 
        var mytoolbar = UI.toolbar("toolbarid").element();
92
 
     */
93
 
    element: function () {
94
 
        return this.toolbar;
95
 
    }
96
 
};
 
53
var Toolbar = (function () {
 
54
 
 
55
    function Toolbar(id, touchInfoDelegate) {
 
56
 
 
57
        this.PHASE_START = "start";
 
58
        this.PHASE_MOVE = "move";
 
59
        this.PHASE_END = "end";
 
60
        this.PHASE_CANCEL = "cancel";
 
61
 
 
62
        this.phase = null;
 
63
 
 
64
        this.toolbar = document.getElementById(id);
 
65
        if ( ! this.toolbar)
 
66
            throw "Invalid toolbar id";
 
67
 
 
68
        this._touchDown = false;
 
69
        this._touchInfoDelegate = touchInfoDelegate;
 
70
 
 
71
        this.fingerData = [];
 
72
        this.fingerData.push({
 
73
            start: {
 
74
                x: 0,
 
75
                y: 0
 
76
            },
 
77
            end: {
 
78
                x: 0,
 
79
                y: 0
 
80
            },
 
81
            identifier: 0
 
82
        });
 
83
 
 
84
        var touchEvents = touchInfoDelegate.touchEvents;
 
85
        touchInfoDelegate.registerTouchEvent(
 
86
            touchEvents.touchStart, this.toolbar, this.__onTouchStart.bind(this));
 
87
        touchInfoDelegate.registerTouchEvent(
 
88
            touchEvents.touchEnd, this.toolbar, this.__onTouchEnd.bind(this));
 
89
        touchInfoDelegate.registerTouchEvent(
 
90
            touchEvents.touchMove, this.toolbar, this.__onTouchMove.bind(this));
 
91
        touchInfoDelegate.registerTouchEvent(
 
92
            touchEvents.touchLeave, this.toolbar, this.__onTouchLeave.bind(this));
 
93
    };
 
94
 
 
95
    Toolbar.prototype = {
 
96
        /**-
 
97
         * Display a Toolbar
 
98
         * @method show
 
99
         */
 
100
        show: function () {
 
101
            this.toolbar.classList.add('revealed');
 
102
        },
 
103
 
 
104
        /**-
 
105
         * Hide a Toolbar
 
106
         * @method hide
 
107
         */
 
108
        hide: function () {
 
109
            this.toolbar.classList.remove('revealed');
 
110
        },
 
111
 
 
112
        /**
 
113
         * Toggle show/hide status of a Toolbar
 
114
         * @method toggle
 
115
         */
 
116
        toggle: function () {
 
117
            this.toolbar.classList.toggle('revealed');
 
118
        },
 
119
 
 
120
        /**
 
121
         * Returns the DOM element associated with the id this widget is bind to.
 
122
         * @method element
 
123
         * @example
 
124
            var mytoolbar = UI.toolbar("toolbarid").element();
 
125
         */
 
126
        element: function () {
 
127
            return this.toolbar;
 
128
        },
 
129
 
 
130
        /**
 
131
         * @private
 
132
         */
 
133
        __onTouchStart: function (evt) {
 
134
            this._touchDown = true;
 
135
 
 
136
            evt.preventDefault();
 
137
 
 
138
            this.phase = this.PHASE_START;
 
139
            var identifier = evt.identifier !== undefined ? evt.identifier : 0;
 
140
 
 
141
            var touchEvent =
 
142
                this._touchInfoDelegate.translateTouchEvent(evt);
 
143
 
 
144
            this.fingerData[0].identifier = identifier;
 
145
            this.fingerData[0].start.x =
 
146
                this.fingerData[0].end.x = touchEvent.touches[0].pageX;
 
147
            this.fingerData[0].start.y =
 
148
                this.fingerData[0].end.y = touchEvent.touches[0].pageY;
 
149
        },
 
150
 
 
151
        /**
 
152
         * @private
 
153
         */
 
154
        __onTouchMove: function (evt) {
 
155
            if ( ! this._touchDown)
 
156
                return;
 
157
 
 
158
            if (this.phase === this.PHASE_END || this.phase === this.PHASE_CANCEL)
 
159
                return;
 
160
 
 
161
            if (this.phase == this.PHASE_START) {
 
162
                evt.preventDefault();
 
163
 
 
164
                var touchEvent =
 
165
                    this._touchInfoDelegate.translateTouchEvent(evt);
 
166
 
 
167
                var identifier = evt.identifier !== undefined ? evt.identifier : 0;
 
168
                var f = this.__getFingerData(identifier);
 
169
 
 
170
                f.end.x = touchEvent.touches[0].pageX;
 
171
                f.end.y = touchEvent.touches[0].pageY;
 
172
 
 
173
                direction = this.__calculateDirection(f.start, f.end);
 
174
 
 
175
                if (direction == "DOWN") {
 
176
                    this.hide();
 
177
                }
 
178
 
 
179
                if (direction == "UP") {
 
180
                    this.show();
 
181
                }
 
182
 
 
183
                phase = this.PHASE_MOVE;
 
184
            }
 
185
        },
 
186
 
 
187
        /**
 
188
         * @private
 
189
         */
 
190
        __onTouchEnd: function (e) {
 
191
            this._touchDown = false;
 
192
            phase = this.PHASE_END;
 
193
        },
 
194
 
 
195
        /**
 
196
         * @private
 
197
         */
 
198
        __onTouchLeave: function (e) {
 
199
            this._touchDown = false;
 
200
            phase = this.PHASE_CANCEL;
 
201
        },
 
202
 
 
203
        /**
 
204
         * @private
 
205
         */
 
206
        __calculateDirection: function (startPoint, endPoint) {
 
207
            var angle = this.__calculateAngle(startPoint, endPoint);
 
208
 
 
209
            if ((angle <= 45) && (angle >= 0)) {
 
210
                return "LEFT";
 
211
            } else if ((angle <= 360) && (angle >= 315)) {
 
212
                return "LEFT";
 
213
            } else if ((angle >= 135) && (angle <= 225)) {
 
214
                return "RIGHT";
 
215
            } else if ((angle > 45) && (angle < 135)) {
 
216
                return "DOWN";
 
217
            } else {
 
218
                return "UP";
 
219
            }
 
220
        },
 
221
 
 
222
        /**
 
223
         * @private
 
224
         */
 
225
        __getFingerData: function (id) {
 
226
            for (var i = 0; i < this.fingerData.length; i++) {
 
227
                if (this.fingerData[i].identifier == id) {
 
228
                    return this.fingerData[i];
 
229
                }
 
230
            }
 
231
        },
 
232
 
 
233
        /**
 
234
         * @private
 
235
         */
 
236
        __calculateAngle: function (startPoint, endPoint) {
 
237
            var x = startPoint.x - endPoint.x;
 
238
            var y = endPoint.y - startPoint.y;
 
239
            var r = Math.atan2(y, x); //radians
 
240
            var angle = Math.round(r * 180 / Math.PI); //degrees
 
241
 
 
242
            //ensure value is positive
 
243
            if (angle < 0) {
 
244
                angle = 360 - Math.abs(angle);
 
245
            }
 
246
 
 
247
            return angle;
 
248
        }
 
249
    };
 
250
    return Toolbar;
 
251
})();