← Back to branch summary

~abreu-alexandre/ubuntu-html5-theme/add-button-class-ubuntu

« back to all changes in this revision

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

  • Committer: Tarmac
  • Author(s): Kyle Nitzsche
  • Date: 2013-11-01 20:38:57 UTC
  • mfrom: (90.1.4 trunk)
  • Revision ID: tarmac-20131101203857-o50mfgnebkogb950
This MR does three main things:
1) Implements yuidoc comments in all js files to support API doc generation, and provides yuidoc assets (theme dir and json file) needed to build the API docs. Bug LP: #1241029
3) Provides JS classes for shape and page with corresponding UbuntuUI prototype constructor functions. Bug LP: #1243248
4) Adds a getEl(UbuntuUIObject) to return the element for any Ubuntu class. Also LP: #1243248.

Approved by PS Jenkins bot, David Barth.

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/js/popovers.js
20
20
 * <http://www.gnu.org/licenses/>.
21
21
 */
22
22
 
23
 
/* Popover */
 
23
/**
 
24
 * A Popover is a div containng markup that can pop up and disappear. (Unlike a Dialog, Popovers are not full screen.)
 
25
 
 
26
A Popoves often contain a List whose items are connected to useful JavaScript functions.
 
27
 
 
28
 
 
29
######Popover Position
 
30
The Popover's position is set relative to a specified base element with the <em>data-gravity="LETTER"</em> attribute. LETTER values:
 
31
 
 
32
 - 'n': the base element is above the Popover
 
33
 - 's': the base element is below the Popover
 
34
 - 'e': the base element is to the east of (to the right of) the Popover (in right-to-left locales)
 
35
 - 'w': the base element is to the west of (to the left of) the Popover (in right-to-left locale)
 
36
 
 
37
 * @class Popover
 
38
 * @constructor
 
39
 * @namespace UbuntuUI
 
40
 * @param {String} elem - The element to which the Popover's position is relative
 
41
 * @param {ID} id - The id attribute of the Popover in HTML
 
42
 * @example
 
43
 
 
44
      <p id="popoverBase">Text</p>
 
45
      <div class="popover active" data-gravity="n" id="popover">
 
46
        <ul class="list">
 
47
          <li class="active"><a href="#">Item1</a></li>
 
48
          <li><a href="#">Item2</a></li>
 
49
        </ul>
 
50
      </div>
 
51
 
 
52
      Javascript:
 
53
      var popBase = document.getElementByID("popoverBase");
 
54
      var popover = UI.popover(popBase, "popover");
 
55
 */
 
56
 
24
57
var Popover = function (elem, id) {
25
58
    this.id = id;
26
59
    this.popover = document.getElementById(id);
30
63
};
31
64
 
32
65
Popover.prototype = {
 
66
    /** 
 
67
     * Display a Popover
 
68
     * @method show
 
69
     */
33
70
    show: function () {
34
71
        if (this.popover === null) {
35
72
            console.error('The popover with the ID #' + this.id + ' doesn\'t exist');
103
140
 
104
141
        return this.popover;
105
142
    },
 
143
    /**
 
144
     * Hide a Popover
 
145
     * @method hide
 
146
     */
106
147
    hide: function () {
107
148
        this.popover.classList.remove('active');
108
149
        this.popover.style.top = '0px';
109
150
        this.popover.style.left = '0px';
110
151
        return this.popover;
111
152
    },
 
153
    /**
 
154
     * Toggle show/hide status of a Popover
 
155
     * @method toggle
 
156
     */
112
157
    toggle: function () {
113
158
        if (this.popover === null) {
114
159
            console.error('The popover with the ID #' + this.id + ' doesn\'t exist');