1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
/**
* Copyright 2011 Canonical Ltd. This software is licensed under the
* GNU Affero General Public License version 3 (see the file LICENSE).
*
* @module lp.app.inlinehelp
*
* Usage:
* lp.app.inlinehelp.init_help();
*
*/
YUI.add('lp.app.inlinehelp', function (Y) {
var module = Y.namespace('lp.app.inlinehelp');
var HELP_LINK_SELECTOR = 'a[target=help]';
var HELP_CSS = 'help';
var CLICK_DELEGATE = false;
/**
* Handle the clicking of a help link in the body.
* This is a delegated handler so this == the object clicked.
*
* @method _show_help
* @private
*/
module._show_help = function (e) {
e.preventDefault();
var target_link = e.currentTarget;
// init the overlay and show it
var overlay = new module.InlineHelpOverlay({
'contentUrl': target_link.get('href'),
'centered': true,
'constrain': true,
// we need our help overlay to have a higher zindex than usual
// overlays so that any help on them appear above them
'zIndex': 1050
});
overlay.render();
};
/**
* The single entry point used to bind the buttons for launching help.
*
* @method init_help
* @public
*/
module.init_help = function () {
// Find the help links.
var links = Y.all(HELP_LINK_SELECTOR);
// Add the help class.
links.addClass(HELP_CSS);
// Bind the click events but unbind it first in case we're re-running
// init more than once (say on ajax loading of new help content).
var body = Y.one('body');
if (CLICK_DELEGATE !== false) {
CLICK_DELEGATE.detach();
}
CLICK_DELEGATE = body.delegate(
'click',
module._show_help,
HELP_LINK_SELECTOR
);
};
module.InlineHelpOverlay = Y.Base.create(
'inlinehelp-overlay',
Y.lazr.PrettyOverlay,
[],
{
/**
* Generate the iframe used for displaying help content in the
* overlay.
*
* @method _getContent
* @private
*/
_getContent: function () {
var help_page = Y.Node.create('<iframe/>');
help_page.set('src', this.get('contentUrl'));
// Use the overlay bodyContent as the home of the iframe.
this.set('bodyContent', help_page);
},
initializer: function (cfg) {
this._getContent();
},
hide: function() {
this.constructor.superclass.hide.call(this);
this.get('boundingBox').setStyle('display', 'none');
},
show: function() {
this.constructor.superclass.show.call(this);
this.get('boundingBox').setStyle('display', 'block');
}
},
{
ATTRS: {
/**
* URI of the location of the help content.
*
* This is loaded into our iFrame and should be a full page vs
* a data payload.
*
* @attribute contentUrl
* @type string
* @default ''
*/
contentUrl: {
value: ''
},
/**
* There's no multi steps so hard code the underlying overlays
* bar to false.
*
* @attribute progressbar
* @type bool
* @default false
*/
progressbar: {
value: false
}
}
}
);
}, "0.1", { "requires": ['lazr.overlay', 'io', 'log'] });
|