← Back to branch summary

~ci-train-bot/ubuntu-html5-theme/ubuntu-html5-theme-ubuntu-yakkety-landing-067

« back to all changes in this revision

Viewing changes to 0.1/ambiance/js/docsbuild/files/popovers.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/popovers.js.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>popovers.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: popovers.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>popovers.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
/**
 
103
 * A Popover is a div containng markup that can pop up and disappear. (Unlike a Dialog, Popovers are not full screen.)
 
104
 
 
105
A Popoves often contain a List whose items are connected to useful JavaScript functions.
 
106
 
 
107
 
 
108
######Popover Position
 
109
The Popover&#x27;s position is set relative to a specified base element with the &lt;em&gt;data-gravity=&quot;LETTER&quot;&lt;/em&gt; attribute. LETTER values:
 
110
 
 
111
 - &#x27;n&#x27;: the base element is above the Popover
 
112
 - &#x27;s&#x27;: the base element is below the Popover
 
113
 - &#x27;e&#x27;: the base element is to the east of (to the right of) the Popover (in right-to-left locales)
 
114
 - &#x27;w&#x27;: the base element is to the west of (to the left of) the Popover (in right-to-left locale)
 
115
 
 
116
 * @class Popover
 
117
 * @constructor
 
118
 * @namespace UbuntuUI
 
119
 * @param {String} elem - The element to which the Popover&#x27;s position is relative
 
120
 * @param {ID} id - The id attribute of the Popover in HTML
 
121
 * @example
 
122
 
 
123
      &lt;p id=&quot;popoverBase&quot;&gt;Text&lt;/p&gt;
 
124
      &lt;div class=&quot;popover active&quot; data-gravity=&quot;n&quot; id=&quot;popover&quot;&gt;
 
125
        &lt;ul class=&quot;list&quot;&gt;
 
126
          &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Item1&lt;/a&gt;&lt;/li&gt;
 
127
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item2&lt;/a&gt;&lt;/li&gt;
 
128
        &lt;/ul&gt;
 
129
      &lt;/div&gt;
 
130
 
 
131
      Javascript:
 
132
      var popBase = document.getElementById(&quot;popoverBase&quot;);
 
133
      var popover = UI.popover(popBase, &quot;popover&quot;);
 
134
 */
 
135
 
 
136
var Popover = function (elem, id) {
 
137
    this.id = id;
 
138
    this.popover = document.getElementById(id);
 
139
    this.elem = elem;
 
140
    this.parent = elem.parentNode.parentNode.parentNode.parentNode;
 
141
    this.is_parent_footer = (this.parent.nodeName.toLowerCase() === &quot;footer&quot;);
 
142
};
 
143
 
 
144
Popover.prototype = {
 
145
    /** 
 
146
     * Display a Popover
 
147
     * @method show
 
148
     */
 
149
    show: function () {
 
150
        if (this.popover === null) {
 
151
            console.error(&#x27;The popover with the ID #&#x27; + this.id + &#x27; doesn\&#x27;t exist&#x27;);
 
152
            return;
 
153
        }
 
154
        var de = document.documentElement,
 
155
            w = (de&amp;&amp;de.clientWidth) || document.body.clientWidth,
 
156
            ot = 0,
 
157
            ol = 0,
 
158
            gravity = &quot;s&quot;,
 
159
            pos_top = 0,
 
160
            pos_left = 0,
 
161
            pos_right = 0;
 
162
 
 
163
        this.popover.classList.add(&#x27;active&#x27;);
 
164
        popoverWidth = this.popover.offsetWidth;
 
165
        popoverHeight = this.popover.offsetHeight;
 
166
 
 
167
        gravity = this.popover.getAttribute(&quot;data-gravity&quot;);
 
168
 
 
169
        if (this.is_parent_footer) {
 
170
            ot = this.parent.offsetTop;
 
171
            ol = this.elem.offsetLeft;
 
172
        }
 
173
        else {
 
174
            ot = this.elem.offsetTop;
 
175
            ol = this.elem.offsetLeft;
 
176
        }
 
177
 
 
178
        switch (gravity) {
 
179
            case &#x27;n&#x27;:
 
180
                pos_top = this.elem.offsetTop + this.elem.offsetHeight + 10;
 
181
                pos_left = this.elem.offsetLeft + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
182
                break;
 
183
            case &#x27;s&#x27;:
 
184
                if (this.is_parent_footer) {
 
185
                    pos_top = ot - popoverHeight - 90;
 
186
                    pos_left = ol + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
187
                    if (pos_left &lt; 0)
 
188
                        pos_left = 5;
 
189
                    else {
 
190
                        if (pos_left + popoverWidth &gt; w) {
 
191
                            pos_left = -1;
 
192
                            pos_right = 5;
 
193
                        }
 
194
                    }
 
195
 
 
196
                }
 
197
                else {
 
198
                    pos_top = ot - popoverHeight - 10;
 
199
                    pos_left = ol + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
200
                }
 
201
                break;
 
202
            case &#x27;e&#x27;:
 
203
                pos_top = this.elem.offsetTop + this.elem.offsetHeight / 2 - popoverHeight / 2;
 
204
                pos_left = this.elem.offsetLeft - popoverWidth - 10;
 
205
                break;
 
206
            case &#x27;w&#x27;:
 
207
                pos_top = this.elem.offsetTop + this.elem.offsetHeight / 2 - popoverHeight / 2;
 
208
                pos_left = this.elem.offsetLeft + this.elem.offsetWidth + 10;
 
209
                break;
 
210
        }
 
211
 
 
212
        this.popover.style.top = pos_top + &#x27;px&#x27;;
 
213
        if (pos_left === -1) {
 
214
            this.popover.style.left = &#x27;auto&#x27;;
 
215
            this.popover.style.right = pos_right+ &#x27;px&#x27;;
 
216
        }
 
217
        else
 
218
            this.popover.style.left = pos_left+ &#x27;px&#x27;;
 
219
 
 
220
        return this.popover;
 
221
    },
 
222
    /**
 
223
     * Hide a Popover
 
224
     * @method hide
 
225
     */
 
226
    hide: function () {
 
227
        this.popover.classList.remove(&#x27;active&#x27;);
 
228
        this.popover.style.top = &#x27;0px&#x27;;
 
229
        this.popover.style.left = &#x27;0px&#x27;;
 
230
        return this.popover;
 
231
    },
 
232
    /**
 
233
     * Toggle show/hide status of a Popover
 
234
     * @method toggle
 
235
     */
 
236
    toggle: function () {
 
237
        if (this.popover === null) {
 
238
            console.error(&#x27;The popover with the ID #&#x27; + this.id + &#x27; doesn\&#x27;t exist&#x27;);
 
239
            return;
 
240
        }
 
241
        var de = document.documentElement,
 
242
            w = (de&amp;&amp;de.clientWidth) || document.body.clientWidth,
 
243
            ot = 0,
 
244
            ol = 0,
 
245
            gravity = &quot;s&quot;,
 
246
            pos_top = 0,
 
247
            pos_left = 0,
 
248
            pos_right = 0;
 
249
 
 
250
        this.popover.classList.toggle(&#x27;active&#x27;);
 
251
        popoverWidth = this.popover.offsetWidth;
 
252
        popoverHeight = this.popover.offsetHeight;
 
253
 
 
254
        gravity = this.popover.getAttribute(&quot;data-gravity&quot;);
 
255
 
 
256
        if (this.is_parent_footer) {
 
257
            ot = this.parent.offsetTop;
 
258
            ol = this.elem.offsetLeft;
 
259
        }
 
260
        else {
 
261
            ot = this.elem.offsetTop;
 
262
            ol = this.elem.offsetLeft;
 
263
        }
 
264
 
 
265
        switch (gravity) {
 
266
            case &#x27;n&#x27;:
 
267
                pos_top = ot + this.elem.offsetHeight + 10;
 
268
                pos_left = ol + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
269
                break;
 
270
            case &#x27;s&#x27;:
 
271
                if (this.is_parent_footer) {
 
272
                    pos_top = ot - popoverHeight - 90;
 
273
                    pos_left = ol + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
274
                    if (pos_left &lt; 0)
 
275
                        pos_left = 5;
 
276
                    else {
 
277
                        if (pos_left + popoverWidth &gt; w) {
 
278
                            pos_left = -1;
 
279
                            pos_right = 5;
 
280
                        }
 
281
                    }
 
282
 
 
283
                }
 
284
                else {
 
285
                    pos_top = ot - popoverHeight - 10;
 
286
                    pos_left = ol + this.elem.offsetWidth / 2 - popoverWidth / 2;
 
287
                }
 
288
                break;
 
289
            case &#x27;e&#x27;:
 
290
                pos_top = ot + this.elem.offsetHeight / 2 - popoverHeight / 2;
 
291
                pos_left = ol - popoverWidth - 10;
 
292
                break;
 
293
            case &#x27;w&#x27;:
 
294
                pos_top = ot + this.elem.offsetHeight / 2 - popoverHeight / 2;
 
295
                pos_left = ol + this.elem.offsetWidth + 10;
 
296
                break;
 
297
        }
 
298
 
 
299
        this.popover.style.top = pos_top + &#x27;px&#x27;;
 
300
        if (pos_left === -1) {
 
301
            this.popover.style.left = &#x27;auto&#x27;;
 
302
            this.popover.style.right = pos_right+ &#x27;px&#x27;;
 
303
        }
 
304
        else
 
305
            this.popover.style.left = pos_left+ &#x27;px&#x27;;
 
306
 
 
307
        return this.popover;
 
308
    },
 
309
    /**
 
310
     * Returns the DOM element associated with the id this widget is bind to.
 
311
     * @method element
 
312
     * @example
 
313
        var mypopover = UI.popover(&quot;popoverid&quot;).element();
 
314
     */
 
315
    element: function () {
 
316
        return this.popover;
 
317
    }
 
318
};
 
319
 
 
320
</pre>
 
321
 
 
322
</div>
 
323
        </div>
 
324
    </div>
 
325
</div>
 
326
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
327
<script>prettyPrint();</script>
 
328
<script src="../assets/js/yui-prettify.js"></script>
 
329
<script src="../assets/js/tabs.js"></script>
 
330
</body>
 
331
</html>