source: pro-violet-viettel/docs/template/assets/js/uncompressed/ace.js

Last change on this file was 400, checked in by dungnv, 11 years ago
  • Property svn:mime-type set to text/plain
File size: 13.4 KB
RevLine 
[400]1if(! ('ace' in window) ) window['ace'] = {}
2jQuery(function($) {
3        //at some places we try to use 'tap' event instead of 'click' if jquery mobile plugin is available
4        window['ace'].click_event = $.fn.tap ? "tap" : "click";
5});
6
7jQuery(function($) {
8        //ace.click_event defined in ace-elements.js
9        ace.handle_side_menu(jQuery);
10
11        ace.enable_search_ahead(jQuery);       
12
13        ace.general_things(jQuery);//and settings
14
15        ace.widget_boxes(jQuery);
16        ace.widget_reload_handler(jQuery);//this is for demo only, you can remove and have your own function, please see examples/widget.html
17
18        /**
19        //make sidebar scrollbar when it is fixed and some parts of it is out of view
20        //>> you should include jquery-ui and slimscroll javascript files in your file
21        //>> you can call this function when sidebar is clicked to be fixed
22        $('.nav-list').slimScroll({
23                height: '400px',
24                distance:0,
25                size : '6px'
26        });
27        */
28});
29
30
31
32ace.handle_side_menu = function($) {
33        $('#menu-toggler').on(ace.click_event, function() {
34                $('#sidebar').toggleClass('display');
35                $(this).toggleClass('display');
36                return false;
37        });
38        //mini
39        var $minimized = $('#sidebar').hasClass('menu-min');
40        $('#sidebar-collapse').on(ace.click_event, function(){
41                $minimized = $('#sidebar').hasClass('menu-min');
42                ace.settings.sidebar_collapsed(!$minimized);//@ ace-extra.js
43        });
44
45        var touch = "ontouchend" in document;
46        //opening submenu
47        $('.nav-list').on(ace.click_event, function(e){
48                //check to see if we have clicked on an element which is inside a .dropdown-toggle element?!
49                //if so, it means we should toggle a submenu
50                var link_element = $(e.target).closest('a');
51                if(!link_element || link_element.length == 0) return;//if not clicked inside a link element
52               
53                $minimized = $('#sidebar').hasClass('menu-min');
54               
55                if(! link_element.hasClass('dropdown-toggle') ) {//it doesn't have a submenu return
56                        //just one thing before we return
57                        //if sidebar is collapsed(minimized) and we click on a first level menu item
58                        //and the click is on the icon, not on the menu text then let's cancel event and cancel navigation
59                        //Good for touch devices, that when the icon is tapped to see the menu text, navigation is cancelled
60                        //navigation is only done when menu text is tapped
61                        if($minimized && ace.click_event == "tap" &&
62                                link_element.get(0).parentNode.parentNode == this /*.nav-list*/ )//i.e. only level-1 links
63                        {
64                                        var text = link_element.find('.menu-text').get(0);
65                                        if( e.target != text && !$.contains(text , e.target) )//not clicking on the text or its children
66                                          return false;
67                        }
68
69                        return;
70                }
71                //
72                var sub = link_element.next().get(0);
73
74                //if we are opening this submenu, close all other submenus except the ".active" one
75                if(! $(sub).is(':visible') ) {//if not open and visible, let's open it and make it visible
76                  var parent_ul = $(sub.parentNode).closest('ul');
77                  if($minimized && parent_ul.hasClass('nav-list')) return;
78                 
79                  parent_ul.find('> .open > .submenu').each(function(){
80                        //close all other open submenus except for the active one
81                        if(this != sub && !$(this.parentNode).hasClass('active')) {
82                                $(this).slideUp(200).parent().removeClass('open');
83                               
84                                //uncomment the following line to close all submenus on deeper levels when closing a submenu
85                                //$(this).find('.open > .submenu').slideUp(0).parent().removeClass('open');
86                        }
87                  });
88                } else {
89                        //uncomment the following line to close all submenus on deeper levels when closing a submenu
90                        //$(sub).find('.open > .submenu').slideUp(0).parent().removeClass('open');
91                }
92
93                if($minimized && $(sub.parentNode.parentNode).hasClass('nav-list')) return false;
94
95                $(sub).slideToggle(200).parent().toggleClass('open');
96                return false;
97         })
98}
99
100
101
102ace.general_things = function($) {
103 $('.ace-nav [class*="icon-animated-"]').closest('a').on('click', function(){
104        var icon = $(this).find('[class*="icon-animated-"]').eq(0);
105        var $match = icon.attr('class').match(/icon\-animated\-([\d\w]+)/);
106        icon.removeClass($match[0]);
107        $(this).off('click');
108 });
109 
110 $('.nav-list .badge[title],.nav-list .label[title]').tooltip({'placement':'right'});
111
112
113
114 //simple settings
115
116 $('#ace-settings-btn').on(ace.click_event, function(){
117        $(this).toggleClass('open');
118        $('#ace-settings-box').toggleClass('open');
119 });
120
121 
122 $('#ace-settings-navbar').on('click', function(){
123        ace.settings.navbar_fixed(this.checked);//@ ace-extra.js
124 }).each(function(){this.checked = ace.settings.is('navbar', 'fixed')})
125
126 $('#ace-settings-sidebar').on('click', function(){
127        ace.settings.sidebar_fixed(this.checked);//@ ace-extra.js
128 }).each(function(){this.checked = ace.settings.is('sidebar', 'fixed')})
129
130 $('#ace-settings-breadcrumbs').on('click', function(){
131        ace.settings.breadcrumbs_fixed(this.checked);//@ ace-extra.js
132 }).each(function(){this.checked = ace.settings.is('breadcrumbs', 'fixed')})
133
134 $('#ace-settings-add-container').on('click', function(){
135        ace.settings.main_container_fixed(this.checked);//@ ace-extra.js
136 }).each(function(){this.checked = ace.settings.is('main-container', 'fixed')})
137
138 //Switching to RTL (right to left) Mode
139 $('#ace-settings-rtl').removeAttr('checked').on('click', function(){
140        ace.switch_direction(jQuery);
141 });
142
143
144 $('#btn-scroll-up').on(ace.click_event, function(){
145        var duration = Math.min(400, Math.max(100, parseInt($('html').scrollTop() / 3)));
146        $('html,body').animate({scrollTop: 0}, duration);
147        return false;
148 });
149 
150  try {
151        $('#skin-colorpicker').ace_colorpicker();
152  } catch(e) {}
153
154  $('#skin-colorpicker').on('change', function(){
155        var skin_class = $(this).find('option:selected').data('skin');
156
157        var body = $(document.body);
158        body.removeClass('skin-1 skin-2 skin-3');
159
160
161        if(skin_class != 'default') body.addClass(skin_class);
162
163        if(skin_class == 'skin-1') {
164                $('.ace-nav > li.grey').addClass('dark');
165        }
166        else {
167                $('.ace-nav > li.grey').removeClass('dark');
168        }
169
170        if(skin_class == 'skin-2') {
171                $('.ace-nav > li').addClass('no-border margin-1');
172                $('.ace-nav > li:not(:last-child)').addClass('light-pink').find('> a > [class*="icon-"]').addClass('pink').end().eq(0).find('.badge').addClass('badge-warning');
173        }
174        else {
175                $('.ace-nav > li').removeClass('no-border margin-1');
176                $('.ace-nav > li:not(:last-child)').removeClass('light-pink').find('> a > [class*="icon-"]').removeClass('pink').end().eq(0).find('.badge').removeClass('badge-warning');
177        }
178
179        if(skin_class == 'skin-3') {
180                $('.ace-nav > li.grey').addClass('red').find('.badge').addClass('badge-yellow');
181        } else {
182                $('.ace-nav > li.grey').removeClass('red').find('.badge').removeClass('badge-yellow');
183        }
184 });
185 
186}
187
188
189
190ace.widget_boxes = function($) {
191        $(document).on('hide.bs.collapse show.bs.collapse', function (ev) {
192                var hidden_id = ev.target.getAttribute('id')
193                $('[href*="#'+ hidden_id+'"]').find('[class*="icon-"]').each(function(){
194                        var $icon = $(this)
195
196                        var $match
197                        var $icon_down = null
198                        var $icon_up = null
199                        if( ($icon_down = $icon.attr('data-icon-show')) ) {
200                                $icon_up = $icon.attr('data-icon-hide')
201                        }
202                        else if( $match = $icon.attr('class').match(/icon\-(.*)\-(up|down)/) ) {
203                                $icon_down = 'icon-'+$match[1]+'-down'
204                                $icon_up = 'icon-'+$match[1]+'-up'
205                        }
206
207                        if($icon_down) {
208                                if(ev.type == 'show') $icon.removeClass($icon_down).addClass($icon_up)
209                                        else $icon.removeClass($icon_up).addClass($icon_down)
210                                       
211                                return false;//ignore other icons that match, one is enough
212                        }
213
214                });
215        })
216
217
218        $(document).on('click.ace.widget', '[data-action]', function (ev) {
219                ev.preventDefault();
220
221                var $this = $(this);
222                var $action = $this.data('action');
223                var $box = $this.closest('.widget-box');
224
225                if($box.hasClass('ui-sortable-helper')) return;
226
227                if($action == 'collapse') {
228                        var event_name = $box.hasClass('collapsed') ? 'show' : 'hide';
229                        var event_complete_name = event_name == 'show' ? 'shown' : 'hidden';
230
231                       
232                        var event
233                        $box.trigger(event = $.Event(event_name+'.ace.widget'))
234                        if (event.isDefaultPrevented()) return
235               
236                        var $body = $box.find('.widget-body');
237                        var $icon = $this.find('[class*=icon-]').eq(0);
238                        var $match = $icon.attr('class').match(/icon\-(.*)\-(up|down)/);
239                        var $icon_down = 'icon-'+$match[1]+'-down';
240                        var $icon_up = 'icon-'+$match[1]+'-up';
241                       
242                        var $body_inner = $body.find('.widget-body-inner')
243                        if($body_inner.length == 0) {
244                                $body = $body.wrapInner('<div class="widget-body-inner"></div>').find(':first-child').eq(0);
245                        } else $body = $body_inner.eq(0);
246
247
248                        var expandSpeed   = 300;
249                        var collapseSpeed = 200;
250
251                        if( event_name == 'show' ) {
252                                if($icon) $icon.addClass($icon_up).removeClass($icon_down);
253                                $box.removeClass('collapsed');
254                                $body.slideUp(0 , function(){$body.slideDown(expandSpeed, function(){$box.trigger(event = $.Event(event_complete_name+'.ace.widget'))})});
255                        }
256                        else {
257                                if($icon) $icon.addClass($icon_down).removeClass($icon_up);
258                                $body.slideUp(collapseSpeed, function(){$box.addClass('collapsed');$box.trigger(event = $.Event(event_complete_name+'.ace.widget'))});
259                        }
260
261                       
262                }
263                else if($action == 'close') {
264                        var event
265                        $box.trigger(event = $.Event('close.ace.widget'))
266                        if (event.isDefaultPrevented()) return
267                       
268                        var closeSpeed = parseInt($this.data('close-speed')) || 300;
269                        $box.hide(closeSpeed , function(){$box.trigger(event = $.Event('closed.ace.widget'));$box.remove();});
270                }
271                else if($action == 'reload') {
272                        var event
273                        $box.trigger(event = $.Event('reload.ace.widget'))
274                        if (event.isDefaultPrevented()) return
275
276                        $this.blur();
277
278                        var $remove = false;
279                        if($box.css('position') == 'static') {$remove = true; $box.addClass('position-relative');}
280                        $box.append('<div class="widget-box-overlay"><i class="icon-spinner icon-spin icon-2x white"></i></div>');
281                       
282                        $box.one('reloaded.ace.widget', function() {
283                                $box.find('.widget-box-overlay').remove();
284                                if($remove) $box.removeClass('position-relative');
285                        });
286
287                }
288                else if($action == 'settings') {
289                        var event = $.Event('settings.ace.widget')
290                        $box.trigger(event)
291                }
292
293        });
294}
295
296
297ace.widget_reload_handler = function($) {
298        //***default action for reload in this demo
299        //you should remove this and add your own handler for each specific .widget-box
300        //when data is finished loading or processing is done you can call $box.trigger('reloaded.ace.widget')
301        $(document).on('reload.ace.widget', '.widget-box', function (ev) {
302                var $box = $(this);
303                //trigger the reloaded event after 1-2 seconds
304                setTimeout(function() {
305                        $box.trigger('reloaded.ace.widget');
306                }, parseInt(Math.random() * 1000 + 1000));
307        });
308       
309       
310        //you may want to do something like this:
311        /**
312        $('#my-widget-box').on('reload.ace.widget', function(){
313                //load new data
314                //when finished trigger "reloaded"
315                $(this).trigger('reloaded.ace.widget');
316        });     
317        */
318}
319
320
321
322//search box's dropdown autocomplete
323ace.enable_search_ahead = function($) {
324        ace.variable_US_STATES = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
325       
326        try {
327                $('#nav-search-input').typeahead({
328                        source: ace.variable_US_STATES,
329                        updater:function (item) {
330                                $('#nav-search-input').focus();
331                                return item;
332                        }
333                });
334        } catch(e) {}
335}
336
337
338
339ace.switch_direction = function($) {
340        var $body = $(document.body);
341        $body
342        .toggleClass('rtl')
343        //toggle pull-right class on dropdown-menu
344        .find('.dropdown-menu:not(.datepicker-dropdown,.colorpicker)').toggleClass('pull-right')
345        .end()
346        //swap pull-left & pull-right
347        .find('.pull-right:not(.dropdown-menu,blockquote,.profile-skills .pull-right)').removeClass('pull-right').addClass('tmp-rtl-pull-right')
348        .end()
349        .find('.pull-left:not(.dropdown-submenu,.profile-skills .pull-left)').removeClass('pull-left').addClass('pull-right')
350        .end()
351        .find('.tmp-rtl-pull-right').removeClass('tmp-rtl-pull-right').addClass('pull-left')
352        .end()
353       
354        .find('.chosen-container').toggleClass('chosen-rtl')
355        .end()
356
357        function swap_classes(class1, class2) {
358                $body
359                 .find('.'+class1).removeClass(class1).addClass('tmp-rtl-'+class1)
360                 .end()
361                 .find('.'+class2).removeClass(class2).addClass(class1)
362                 .end()
363                 .find('.tmp-rtl-'+class1).removeClass('tmp-rtl-'+class1).addClass(class2)
364        }
365        function swap_styles(style1, style2, elements) {
366                elements.each(function(){
367                        var e = $(this);
368                        var tmp = e.css(style2);
369                        e.css(style2 , e.css(style1));
370                        e.css(style1 , tmp);
371                });
372        }
373
374        swap_classes('align-left', 'align-right');
375        swap_classes('no-padding-left', 'no-padding-right');
376        swap_classes('arrowed', 'arrowed-right');
377        swap_classes('arrowed-in', 'arrowed-in-right');
378        swap_classes('messagebar-item-left', 'messagebar-item-right');//for inbox page
379
380
381        //redraw the traffic pie chart on homepage with a different parameter
382        var placeholder = $('#piechart-placeholder');
383        if(placeholder.size() > 0) {
384                var pos = $(document.body).hasClass('rtl') ? 'nw' : 'ne';//draw on north-west or north-east?
385                placeholder.data('draw').call(placeholder.get(0) , placeholder, placeholder.data('chart'), pos);
386        }
387}
Note: See TracBrowser for help on using the repository browser.