← Back to branch summary

~webapps/ubuntu-html5-theme/15.10

« back to all changes in this revision

Viewing changes to 0.1/ambiance/js/docsbuild/files/fast-buttons.js.html

  • Committer: CI Train Bot
  • Author(s): Michael Hall, Alexandre Abreu
  • Date: 2015-04-09 14:26:31 UTC
  • mfrom: (200.2.3 ubuntu-html5-theme)
  • Revision ID: ci-train-bot@canonical.com-20150409142631-5axmx6p7x08ej1im
Add -doc package, whose contents have to be generated locally (use the ./update-docs command) because not all of its node dependencies are in the archive. This is done, so we can more easily update developer.ubuntu.com/api
Approved by: David Barth

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/js/docsbuild/files/fast-buttons.js.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>fast-buttons.js - Ubuntu HTML5 API</title>
 
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0pr2/build/cssgrids/cssgrids-min.css">
 
7
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
 
8
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
 
9
    <script src="http://yui.yahooapis.com/combo?3.8.0pr2/build/yui/yui-min.js"></script>
 
10
</head>
 
11
<body class="yui3-skin-sam">
 
12
 
 
13
<div id="doc">
 
14
    <div id="hd" class="yui3-g header">
 
15
        <div class="yui3-u-3-4">
 
16
            <h1><a href="../index.html"><img src="../assets/css/logo.png">Ubuntu HTML5 API: fast-buttons.js</a></h1>
 
17
        </div>
 
18
        <div class="yui3-u-1-4 version">
 
19
            <em>API Docs for: HTML-14.04-dev~bzr202</em>
 
20
        </div>
 
21
    </div>
 
22
    <div class="yui3-g">
 
23
 
 
24
        <div id="sidebar" class="yui3-u">
 
25
            <div id="modules" class="sidebox">
 
26
                <div class="hd">
 
27
                    <h2 class="no-toc">Modules</h2>
 
28
                </div>
 
29
                <div class="bd">
 
30
                    <ul>
 
31
                            <li><a href="../modules/UbuntuUI.html">UbuntuUI</a>
 
32
                            </li>
 
33
                    </ul>
 
34
                </div>
 
35
            </div>
 
36
            
 
37
            <div id="classes" class="sidebox">
 
38
                <div class="hd">
 
39
                    <h2 class="no-toc">Classes</h2>
 
40
                </div>
 
41
                <div class="bd">
 
42
                    <ul>
 
43
                            <li><a href="../classes/UbuntuUI.html">UbuntuUI</a></li>
 
44
                            <li><a href="../classes/UbuntuUI.Button.html">UbuntuUI.Button</a></li>
 
45
                            <li><a href="../classes/UbuntuUI.Dialog.html">UbuntuUI.Dialog</a></li>
 
46
                            <li><a href="../classes/UbuntuUI.Header.html">UbuntuUI.Header</a></li>
 
47
                            <li><a href="../classes/UbuntuUI.List.html">UbuntuUI.List</a></li>
 
48
                            <li><a href="../classes/UbuntuUI.OptionSelector.html">UbuntuUI.OptionSelector</a></li>
 
49
                            <li><a href="../classes/UbuntuUI.Page.html">UbuntuUI.Page</a></li>
 
50
                            <li><a href="../classes/UbuntuUI.Pagestack.html">UbuntuUI.Pagestack</a></li>
 
51
                            <li><a href="../classes/UbuntuUI.Popover.html">UbuntuUI.Popover</a></li>
 
52
                            <li><a href="../classes/UbuntuUI.Progress.html">UbuntuUI.Progress</a></li>
 
53
                            <li><a href="../classes/UbuntuUI.Shape.html">UbuntuUI.Shape</a></li>
 
54
                            <li><a href="../classes/UbuntuUI.Tab.html">UbuntuUI.Tab</a></li>
 
55
                            <li><a href="../classes/UbuntuUI.Tabs.html">UbuntuUI.Tabs</a></li>
 
56
                            <li><a href="../classes/UbuntuUI.Toolbar.html">UbuntuUI.Toolbar</a></li>
 
57
                    </ul>
 
58
                </div>
 
59
            </div>
 
60
            
 
61
            
 
62
            
 
63
            
 
64
            
 
65
            <div id="fileTree" class="sidebox">
 
66
                <div class="hd">
 
67
                    <h2 class="no-toc">Files</h2>
 
68
                </div>
 
69
                <div class="bd">
 
70
                    <ul><li>buttons.js/<ul></ul></li><li>core.js/<ul></ul></li><li>dialogs.js/<ul></ul></li><li>fast-buttons.js/<ul></ul></li><li>header.js/<ul></ul></li><li>list.js/<ul></ul></li><li>option-selector.js/<ul></ul></li><li>page.js/<ul></ul></li><li>pagestacks.js/<ul></ul></li><li>popovers.js/<ul></ul></li><li>progress.js/<ul></ul></li><li>shape.js/<ul></ul></li><li>tab.js/<ul></ul></li><li>tabs.js/<ul></ul></li><li>toolbars.js/<ul></ul></li></ul>
 
71
                </div>
 
72
            </div>
 
73
            
 
74
        </div>
 
75
 
 
76
        <div id="main" class="yui3-u">
 
77
            <div class="content"><h4>fast-buttons.js</h4>
 
78
 
 
79
<pre class="code prettyprint linenums">
 
80
/*
 
81
 * Copyright (C) 2013 Adnane Belmadiaf &lt;daker@ubuntu.com&gt;
 
82
 * License granted by Canonical Limited
 
83
 *
 
84
 * This file is part of ubuntu-html5-ui-toolkit.
 
85
 *
 
86
 * This package is free software; you can redistribute it and/or modify
 
87
 * it under the terms of the GNU Lesser General Public License as
 
88
 * published by the Free Software Foundation; either version 3 of the
 
89
 * License, or
 
90
 * (at your option) any later version.
 
91
 
 
92
 * This package is distributed in the hope that it will be useful,
 
93
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
94
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
95
 * GNU General Public License for more details.
 
96
 
 
97
 * You should have received a copy of the GNU Lesser General Public
 
98
 * License along with this program. If not, see
 
99
 * &lt;http://www.gnu.org/licenses/&gt;.
 
100
 */
 
101
 
 
102
(function () {
 
103
    /**
 
104
     * From: http://code.this.com/mobile/articles/fast_buttons.html
 
105
     * Also see: http://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button
 
106
     */
 
107
 
 
108
    /** For IE8 and earlier compatibility: https://developer.mozilla.org/en/DOM/element.addEventListener */
 
109
 
 
110
    function addListener(el, type, listener, useCapture) {
 
111
        if (el.addEventListener) {
 
112
            el.addEventListener(type, listener, useCapture);
 
113
            return {
 
114
                destroy: function () {
 
115
                    el.removeEventListener(type, listener, useCapture);
 
116
                }
 
117
            };
 
118
        } else {
 
119
            // see: http://stackoverflow.com/questions/5198845/javascript-this-losing-context-in-ie
 
120
            var handler = function (e) {
 
121
                listener.handleEvent(window.event, listener);
 
122
            };
 
123
            el.attachEvent(&#x27;on&#x27; + type, handler);
 
124
 
 
125
            return {
 
126
                destroy: function () {
 
127
                    el.detachEvent(&#x27;on&#x27; + type, handler);
 
128
                }
 
129
            };
 
130
        }
 
131
    }
 
132
 
 
133
    var isTouch = &quot;ontouchstart&quot; in window;
 
134
 
 
135
    /* Construct the FastButton with a reference to the element and click handler. */
 
136
    this.FastButton = function (element, handler, useCapture) {
 
137
        // collect functions to call to cleanup events
 
138
        this.events = [];
 
139
        this.touchEvents = [];
 
140
        this.element = element;
 
141
        this.handler = handler;
 
142
        this.useCapture = useCapture;
 
143
        if (isTouch)
 
144
            this.events.push(addListener(element, &#x27;touchstart&#x27;, this, this.useCapture));
 
145
        this.events.push(addListener(element, &#x27;click&#x27;, this, this.useCapture));
 
146
    };
 
147
 
 
148
    /* Remove event handling when no longer needed for this button */
 
149
    this.FastButton.prototype.destroy = function () {
 
150
        for (var i = this.events.length - 1; i &gt;= 0; i -= 1)
 
151
            this.events[i].destroy();
 
152
        this.events = this.touchEvents = this.element = this.handler = this.fastButton = null;
 
153
    };
 
154
 
 
155
    /* acts as an event dispatcher */
 
156
    this.FastButton.prototype.handleEvent = function (event) {
 
157
        switch (event.type) {
 
158
        case &#x27;touchstart&#x27;:
 
159
            this.onTouchStart(event);
 
160
            break;
 
161
        case &#x27;touchmove&#x27;:
 
162
            this.onTouchMove(event);
 
163
            break;
 
164
        case &#x27;touchend&#x27;:
 
165
            this.onClick(event);
 
166
            break;
 
167
        case &#x27;click&#x27;:
 
168
            this.onClick(event);
 
169
            break;
 
170
        }
 
171
    };
 
172
 
 
173
    /* Save a reference to the touchstart coordinate and start listening to touchmove and
 
174
    touchend events. Calling stopPropagation guarantees that other behaviors don’t get a
 
175
    chance to handle the same click event. This is executed at the beginning of touch. */
 
176
    this.FastButton.prototype.onTouchStart = function (event) {
 
177
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
 
178
        this.touchEvents.push(addListener(this.element, &#x27;touchend&#x27;, this, this.useCapture));
 
179
        this.touchEvents.push(addListener(document.body, &#x27;touchmove&#x27;, this, this.useCapture));
 
180
        this.startX = event.touches[0].clientX;
 
181
        this.startY = event.touches[0].clientY;
 
182
    };
 
183
 
 
184
    /* When /if touchmove event is invoked, check if the user has dragged past the threshold of 10px. */
 
185
    this.FastButton.prototype.onTouchMove = function (event) {
 
186
        if (Math.abs(event.touches[0].clientX - this.startX) &gt; 10 || Math.abs(event.touches[0].clientY - this.startY) &gt; 10) {
 
187
            this.reset(); //if he did, then cancel the touch event
 
188
        }
 
189
    };
 
190
 
 
191
    /* Invoke the actual click handler and prevent ghost clicks if this was a touchend event. */
 
192
    this.FastButton.prototype.onClick = function (event) {
 
193
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
 
194
        this.reset();
 
195
        // Use .call to call the method so that we have the correct &quot;this&quot;: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
 
196
        var result = this.handler.call(this.element, event);
 
197
        if (event.type == &#x27;touchend&#x27;)
 
198
            clickbuster.preventGhostClick(this.startX, this.startY);
 
199
        return result;
 
200
    };
 
201
 
 
202
    this.FastButton.prototype.reset = function () {
 
203
        for (var i = this.touchEvents.length - 1; i &gt;= 0; i -= 1)
 
204
            this.touchEvents[i].destroy();
 
205
        this.touchEvents = [];
 
206
    };
 
207
 
 
208
    this.clickbuster = function () {};
 
209
 
 
210
    /* Call preventGhostClick to bust all click events that happen within 25px of
 
211
   the provided x, y coordinates in the next 2.5s. */
 
212
    this.clickbuster.preventGhostClick = function (x, y) {
 
213
        clickbuster.coordinates.push(x, y);
 
214
        window.setTimeout(clickbuster.pop, 2500);
 
215
    };
 
216
 
 
217
    this.clickbuster.pop = function () {
 
218
        clickbuster.coordinates.splice(0, 2);
 
219
    };
 
220
 
 
221
    /* If we catch a click event inside the given radius and time threshold then we call
 
222
   stopPropagation and preventDefault. Calling preventDefault will stop links
 
223
   from being activated. */
 
224
    this.clickbuster.onClick = function (event) {
 
225
        for (var i = 0; i &lt; clickbuster.coordinates.length; i += 2) {
 
226
            var x = clickbuster.coordinates[i];
 
227
            var y = clickbuster.coordinates[i + 1];
 
228
            if (Math.abs(event.clientX - x) &lt; 25 &amp;&amp; Math.abs(event.clientY - y) &lt; 25) {
 
229
                event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
 
230
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);
 
231
            }
 
232
        }
 
233
    };
 
234
 
 
235
    if (isTouch) {
 
236
        // Don&#x27;t need to use our custom addListener function since we only bust clicks on touch devices
 
237
        document.addEventListener(&#x27;click&#x27;, clickbuster.onClick, true);
 
238
        clickbuster.coordinates = [];
 
239
    }
 
240
})(this);
 
241
 
 
242
</pre>
 
243
 
 
244
</div>
 
245
        </div>
 
246
    </div>
 
247
</div>
 
248
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
249
<script>prettyPrint();</script>
 
250
<script src="../assets/js/yui-prettify.js"></script>
 
251
<script src="../assets/js/tabs.js"></script>
 
252
</body>
 
253
</html>