提交 | 用户 | 时间
|
58d006
|
1 |
/** |
A |
2 |
<b>Widget boxes</b> |
|
3 |
*/ |
|
4 |
(function($ , undefined) { |
|
5 |
|
|
6 |
var Widget_Box = function(box, options) { |
|
7 |
this.$box = $(box); |
|
8 |
var that = this; |
|
9 |
//this.options = $.extend({}, $.fn.widget_box.defaults, options); |
|
10 |
|
|
11 |
this.reload = function() { |
|
12 |
var $box = this.$box; |
|
13 |
var $remove_position = false; |
|
14 |
if($box.css('position') == 'static') { |
|
15 |
$remove_position = true; |
|
16 |
$box.addClass('position-relative'); |
|
17 |
} |
|
18 |
$box.append('<div class="widget-box-overlay"><i class="'+ ace.vars['icon'] + 'loading-icon fa fa-spinner fa-spin fa-2x white"></i></div>'); |
|
19 |
|
|
20 |
$box.one('reloaded.ace.widget', function() { |
|
21 |
$box.find('.widget-box-overlay').remove(); |
|
22 |
if($remove_position) $box.removeClass('position-relative'); |
|
23 |
}); |
|
24 |
} |
|
25 |
|
|
26 |
this.closeFast = function() { |
|
27 |
this.close(0); |
|
28 |
} |
|
29 |
this.close = function(closeSpeed) { |
|
30 |
var $box = this.$box; |
|
31 |
var closeSpeed = typeof closeSpeed === 'undefined' ? 300 : closeSpeed; |
|
32 |
$box.fadeOut(closeSpeed , function(){ |
|
33 |
$box.trigger('closed.ace.widget'); |
|
34 |
$box.remove(); |
|
35 |
} |
|
36 |
) |
|
37 |
} |
|
38 |
|
|
39 |
this.toggleFast = function() { |
|
40 |
this.toggle(null, null, 0, 0); |
|
41 |
} |
|
42 |
|
|
43 |
this.toggle = function(type, button, expandSpeed, collapseSpeed) { |
|
44 |
var $box = this.$box; |
|
45 |
var $body = $box.find('.widget-body').eq(0); |
|
46 |
var $icon = null; |
|
47 |
|
|
48 |
var event_name = type || ($box.hasClass('collapsed') ? 'show' : 'hide'); |
|
49 |
var event_complete_name = event_name == 'show' ? 'shown' : 'hidden'; |
|
50 |
|
|
51 |
if( !button ) { |
|
52 |
button = $box.find('> .widget-header a[data-action=collapse]').eq(0); |
|
53 |
if(button.length == 0) button = null; |
|
54 |
} |
|
55 |
|
|
56 |
if(button) { |
|
57 |
|
|
58 |
$icon = button.find(ace.vars['.icon']).eq(0); |
|
59 |
|
|
60 |
var $match |
|
61 |
var $icon_down = null |
|
62 |
var $icon_up = null |
|
63 |
if( ($icon_down = $icon.attr('data-icon-show')) ) { |
|
64 |
$icon_up = $icon.attr('data-icon-hide') |
|
65 |
} |
|
66 |
else if( $match = $icon.attr('class').match(/fa\-(.*)\-(up|down)/) ) { |
|
67 |
$icon_down = 'fa-'+$match[1]+'-down' |
|
68 |
$icon_up = 'fa-'+$match[1]+'-up' |
|
69 |
} |
|
70 |
} |
|
71 |
|
|
72 |
var expandSpeed = typeof expandSpeed === 'undefined' ? 250 : expandSpeed; |
|
73 |
var collapseSpeed = typeof collapseSpeed === 'undefined' ? 200 : collapseSpeed; |
|
74 |
|
|
75 |
|
|
76 |
if( event_name == 'show' ) { |
|
77 |
if($icon) $icon.removeClass($icon_down).addClass($icon_up); |
|
78 |
|
|
79 |
$body.hide(); |
|
80 |
$box.removeClass('collapsed'); |
|
81 |
$body.slideDown(expandSpeed, function(){ |
|
82 |
$box.trigger(event_complete_name+'.ace.widget') |
|
83 |
}) |
|
84 |
} |
|
85 |
else { |
|
86 |
if($icon) $icon.removeClass($icon_up).addClass($icon_down); |
|
87 |
$body.slideUp(collapseSpeed, function(){ |
|
88 |
$box.addClass('collapsed') |
|
89 |
$box.trigger(event_complete_name+'.ace.widget') |
|
90 |
} |
|
91 |
); |
|
92 |
} |
|
93 |
} |
|
94 |
|
|
95 |
this.hide = function() { |
|
96 |
this.toggle('hide'); |
|
97 |
} |
|
98 |
this.show = function() { |
|
99 |
this.toggle('show'); |
|
100 |
} |
|
101 |
|
|
102 |
|
|
103 |
this.fullscreen = function() { |
|
104 |
var $icon = this.$box.find('> .widget-header a[data-action=fullscreen]').find(ace.vars['.icon']).eq(0); |
|
105 |
var $icon_expand = null |
|
106 |
var $icon_compress = null |
|
107 |
if( ($icon_expand = $icon.attr('data-icon1')) ) { |
|
108 |
$icon_compress = $icon.attr('data-icon2') |
|
109 |
} |
|
110 |
else { |
|
111 |
$icon_expand = 'fa-expand'; |
|
112 |
$icon_compress = 'fa-compress'; |
|
113 |
} |
|
114 |
|
|
115 |
|
|
116 |
if(!this.$box.hasClass('fullscreen')) { |
|
117 |
$icon.removeClass($icon_expand).addClass($icon_compress); |
|
118 |
this.$box.addClass('fullscreen'); |
|
119 |
|
|
120 |
applyScrollbars(this.$box, true); |
|
121 |
} |
|
122 |
else { |
|
123 |
$icon.addClass($icon_expand).removeClass($icon_compress); |
|
124 |
this.$box.removeClass('fullscreen'); |
|
125 |
|
|
126 |
applyScrollbars(this.$box, false); |
|
127 |
} |
|
128 |
|
|
129 |
this.$box.trigger('fullscreened.ace.widget') |
|
130 |
} |
|
131 |
|
|
132 |
} |
|
133 |
|
|
134 |
$.fn.widget_box = function (option, value) { |
|
135 |
var method_call; |
|
136 |
|
|
137 |
var $set = this.each(function () { |
|
138 |
var $this = $(this); |
|
139 |
var data = $this.data('widget_box'); |
|
140 |
var options = typeof option === 'object' && option; |
|
141 |
|
|
142 |
if (!data) $this.data('widget_box', (data = new Widget_Box(this, options))); |
|
143 |
if (typeof option === 'string') method_call = data[option](value); |
|
144 |
}); |
|
145 |
|
|
146 |
return (method_call === undefined) ? $set : method_call; |
|
147 |
}; |
|
148 |
|
|
149 |
|
|
150 |
$(document).on('click.ace.widget', '.widget-header a[data-action]', function (ev) { |
|
151 |
ev.preventDefault(); |
|
152 |
|
|
153 |
var $this = $(this); |
|
154 |
var $box = $this.closest('.widget-box'); |
|
155 |
if( $box.length == 0 || $box.hasClass('ui-sortable-helper') ) return; |
|
156 |
|
|
157 |
var $widget_box = $box.data('widget_box'); |
|
158 |
if (!$widget_box) { |
|
159 |
$box.data('widget_box', ($widget_box = new Widget_Box($box.get(0)))); |
|
160 |
} |
|
161 |
|
|
162 |
var $action = $this.data('action'); |
|
163 |
if($action == 'collapse') { |
|
164 |
var event_name = $box.hasClass('collapsed') ? 'show' : 'hide'; |
|
165 |
|
|
166 |
var event |
|
167 |
$box.trigger(event = $.Event(event_name+'.ace.widget')) |
|
168 |
if (event.isDefaultPrevented()) return |
|
169 |
|
|
170 |
$widget_box.toggle(event_name, $this); |
|
171 |
} |
|
172 |
else if($action == 'close') { |
|
173 |
var event |
|
174 |
$box.trigger(event = $.Event('close.ace.widget')) |
|
175 |
if (event.isDefaultPrevented()) return |
|
176 |
|
|
177 |
$widget_box.close(); |
|
178 |
} |
|
179 |
else if($action == 'reload') { |
|
180 |
$this.blur(); |
|
181 |
var event |
|
182 |
$box.trigger(event = $.Event('reload.ace.widget')) |
|
183 |
if (event.isDefaultPrevented()) return |
|
184 |
|
|
185 |
$widget_box.reload(); |
|
186 |
} |
|
187 |
else if($action == 'fullscreen') { |
|
188 |
var event |
|
189 |
$box.trigger(event = $.Event('fullscreen.ace.widget')) |
|
190 |
if (event.isDefaultPrevented()) return |
|
191 |
|
|
192 |
$widget_box.fullscreen(); |
|
193 |
} |
|
194 |
else if($action == 'settings') { |
|
195 |
$box.trigger('setting.ace.widget') |
|
196 |
} |
|
197 |
|
|
198 |
}); |
|
199 |
|
|
200 |
|
|
201 |
function applyScrollbars($widget, enable) { |
|
202 |
var $main = $widget.find('.widget-main').eq(0); |
|
203 |
$(window).off('resize.widget.scroll'); |
|
204 |
|
|
205 |
//IE8 has an unresolvable issue!!! re-scrollbaring with unknown values?! |
|
206 |
var nativeScrollbars = ace.vars['old_ie'] || ace.vars['touch']; |
|
207 |
|
|
208 |
if(enable) { |
|
209 |
var ace_scroll = $main.data('ace_scroll'); |
|
210 |
if( ace_scroll ) { |
|
211 |
$main.data('save_scroll', {size: ace_scroll['size'], lock: ace_scroll['lock'], lock_anyway: ace_scroll['lock_anyway']}); |
|
212 |
} |
|
213 |
|
|
214 |
var size = $widget.height() - $widget.find('.widget-header').height() - 10;//extra paddings |
|
215 |
size = parseInt(size); |
|
216 |
|
|
217 |
$main.css('min-height', size); |
|
218 |
if( !nativeScrollbars ) { |
|
219 |
if( ace_scroll ) { |
|
220 |
$main.ace_scroll('update', {'size': size, 'mouseWheelLock': true, 'lockAnyway': true}); |
|
221 |
} |
|
222 |
else { |
|
223 |
$main.ace_scroll({'size': size, 'mouseWheelLock': true, 'lockAnyway': true}); |
|
224 |
} |
|
225 |
$main.ace_scroll('enable').ace_scroll('reset'); |
|
226 |
} |
|
227 |
else { |
|
228 |
if( ace_scroll ) $main.ace_scroll('disable'); |
|
229 |
$main.css('max-height', size).addClass('overflow-scroll'); |
|
230 |
} |
|
231 |
|
|
232 |
|
|
233 |
$(window) |
|
234 |
.on('resize.widget.scroll', function() { |
|
235 |
var size = $widget.height() - $widget.find('.widget-header').height() - 10;//extra paddings |
|
236 |
size = parseInt(size); |
|
237 |
|
|
238 |
$main.css('min-height', size); |
|
239 |
if( !nativeScrollbars ) { |
|
240 |
$main.ace_scroll('update', {'size': size}).ace_scroll('reset'); |
|
241 |
} |
|
242 |
else { |
|
243 |
$main.css('max-height', size).addClass('overflow-scroll'); |
|
244 |
} |
|
245 |
}); |
|
246 |
} |
|
247 |
|
|
248 |
else { |
|
249 |
$main.css('min-height', ''); |
|
250 |
var saved_scroll = $main.data('save_scroll'); |
|
251 |
if(saved_scroll) { |
|
252 |
$main |
|
253 |
.ace_scroll('update', {'size': saved_scroll['size'], 'mouseWheelLock': saved_scroll['lock'], 'lockAnyway': saved_scroll['lock_anyway']}) |
|
254 |
.ace_scroll('enable') |
|
255 |
.ace_scroll('reset'); |
|
256 |
} |
|
257 |
|
|
258 |
if( !nativeScrollbars ) { |
|
259 |
if(!saved_scroll) $main.ace_scroll('disable'); |
|
260 |
} |
|
261 |
else { |
|
262 |
$main.css('max-height', '').removeClass('overflow-scroll'); |
|
263 |
} |
|
264 |
} |
|
265 |
} |
|
266 |
|
|
267 |
})(window.jQuery); |