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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
hui.ui.Overlay = function(options) {
this.options = options;
this.element = hui.get(options.element);
this.name = options.name;
this.icons = {};
this.visible = false;
hui.ui.extend(this);
this._addBehavior();
};
hui.ui.Overlay.create = function(options) {
options = options || {};
var cls = 'hui_overlay'+(options.variant ? ' hui_overlay_'+options.variant : '');
if (!options.variant) {
cls += ' hui_context_dark';
}
var e = options.element = hui.build('div',{className:cls,style:'display:none'});
document.body.appendChild(e);
return new hui.ui.Overlay(options);
};
hui.ui.Overlay.prototype = {
_addBehavior : function() {
var self = this;
},
addIcon : function(key,icon) {
var self = this;
var element = hui.build('div',{className:'hui_overlay_icon'});
hui.ui.setIconImage(element, icon, 32);
hui.listen(element,'click',function(e) {
self._iconWasClicked(key,e);
});
this.icons[key]=element;
this.element.appendChild(element);
},
addText : function(text) {
this.element.appendChild(hui.build('span',{'class':'hui_overlay_text',text:text}));
},
add : function(widget) {
this.element.appendChild(widget.getElement());
},
hideIcons : function(keys) {
for (var i=0; i < keys.length; i++) {
this.icons[keys[i]].style.display='none';
}
},
showIcons : function(keys) {
for (var i=0; i < keys.length; i++) {
this.icons[keys[i]].style.display='';
}
},
_iconWasClicked : function(key,e) {
hui.ui.callDelegates(this,'iconWasClicked',key,e);
},
showAtElement : function(element,options) {
options = options || {};
hui.ui.positionAtElement(this.element,element,options);
if (options.autoHide) {
this._autoHide(element);
}
if (this.visible) {
return;
}
if (hui.browser.msie) {
this.element.style.display = 'block';
} else {
hui.style.set(this.element,{display : 'block',opacity : 0});
hui.animate(this.element,'opacity',1,150);
}
var zIndex = options.zIndex === undefined ? options.zIndex : hui.ui.nextAlertIndex();
if (this.options.modal) {
this.element.style.zIndex = hui.ui.nextAlertIndex();
hui.ui.showCurtain({ widget : this, zIndex : zIndex });
} else {
this.element.style.zIndex = zIndex;
}
this.visible = true;
},
_autoHide : function(element) {
hui.cls.add(element,'hui_overlay_bound');
hui.unListen(document.body,'mousemove',this._hider);
this._hider = function(e) {
if (!hui.ui.isWithin(e,element) && !hui.ui.isWithin(e,this.element)) {
try {
hui.unListen(document.body,'mousemove',this._hider);
hui.cls.remove(element,'hui_overlay_bound');
this.hide();
} catch (ignore) {
hui.log('unable to stop listening: document='+document);
}
}
}.bind(this);
hui.listen(document.body,'mousemove',this._hider);
},
show : function(options) {
options = options || {};
if (!this.visible) {
hui.style.set(this.element,{'display':'block',visibility:'hidden'});
}
if (options.element) {
hui.position.place({
source : {element:this.element,vertical:0,horizontal:0.5},
target : {element:options.element,vertical:0.5,horizontal:0.5},
insideViewPort : true,
viewPortMargin : 9
});
}
if (options.autoHide && options.element) {
this._autoHide(options.element);
}
if (this.visible) return;
hui.effect.bounceIn({element:this.element});
this.visible = true;
if (this.options.modal) {
var zIndex = hui.ui.nextAlertIndex();
this.element.style.zIndex=zIndex+1;
hui.ui.showCurtain({widget:this,zIndex:zIndex,color:'auto'});
}
},
$curtainWasClicked : function() {
this.hide();
},
hide : function() {
hui.ui.hideCurtain(this);
this.element.style.display='none';
this.visible = false;
},
clear : function() {
hui.ui.destroyDescendants(this.element);
this.element.innerHTML='';
}
};