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
hui.ui.Box = function(options) {
this.options = hui.override({},options);
this.name = options.name;
this.element = hui.get(options.element);
this.visible = !this.options.absolute;
hui.ui.extend(this);
if (this.nodes.close) {
hui.listen(this.nodes.close,'click',this._close.bind(this));
}
};
hui.ui.Box.create = function(options) {
options = options || {};
var variant = options.variant || 'standard';
var html = (options.closable ? '<a class="hui_box_close hui_box_close_' + variant + '" href="#"></a>' : '');
if (options.title) {
html+='<div class="hui_box_header"><strong class="hui_box_title">'+hui.string.escape(hui.ui.getTranslated(options.title))+'</strong></div>';
}
html += '<div class="hui_box_body" style="'+
(options.padding ? 'padding: '+options.padding+'px;' : '')+
(options.width ? 'width: '+options.width+'px;' : '')+
'"></div>';
options.element = hui.build('div',{
'class' : 'hui_box hui_box_' + variant,
html : html,
style : options.width ? options.width+'px' : null
});
if (options.absolute) {
hui.cls.add(options.element,'hui_box_absolute');
}
return new hui.ui.Box(options);
};
hui.ui.Box.prototype = {
nodes : {
body : '.hui_box_body',
close : '.hui_box_close'
},
_close : function(e) {
hui.stop(e);
this.hide();
this.fire('boxWasClosed');
this.fire('close');
},
shake : function() {
hui.effect.shake({element:this.element});
},
addToDocument : function() {
document.body.appendChild(this.element);
},
add : function(widget) {
var body = this.nodes.body;
if (widget.getElement) {
body.appendChild(widget.getElement());
} else {
body.appendChild(widget);
}
},
show : function() {
var e = this.element;
if (this.options.modal) {
var index = hui.ui.nextPanelIndex();
e.style.zIndex = index+1;
hui.ui.showCurtain({widget:this,zIndex:index});
}
if (this.options.absolute) {
hui.style.set(e,{ display : 'block', visibility : 'hidden' });
var w = e.clientWidth;
var top = (hui.window.getViewHeight() - e.clientHeight) / 2 + hui.window.getScrollTop();
hui.style.set(e,{
marginLeft : (w/-2)+'px',
top : top+'px',
display : 'block',
visibility : 'visible'
});
} else {
e.style.display = 'block';
}
this.visible = true;
hui.ui.callVisible(this);
},
isVisible : function() {
return this.visible;
},
$$layout : function() {
if (this.options.absolute && this.visible) {
var e = this.element;
var w = e.clientWidth;
var top = (hui.window.getViewHeight()-e.clientHeight)/2+hui.window.getScrollTop();
hui.style.set(e,{'marginLeft':(w/-2)+'px',top:top+'px'});
}
},
hide : function() {
hui.ui.hideCurtain(this);
this.element.style.display='none';
this.visible = false;
hui.ui.callVisible(this);
},
$curtainWasClicked : function() {
this.fire('boxCurtainWasClicked');
if (this.options.curtainCloses) {
this._close();
}
}
};