| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /** |
| A | 2 | <b>Content Slider</b>. with custom content and elements based on Bootstrap modals. |
| 3 | */ | |
| 4 | (function($ , undefined) { | |
| 5 | var $window = $(window); | |
| 6 | ||
| 7 | function Aside(modal, settings) { | |
| 8 | var self = this; | |
| 9 | ||
| 10 | var $modal = $(modal); | |
| 11 | var placement = 'right', vertical = false; | |
| 12 | var hasFade = $modal.hasClass('fade');//Bootstrap enables transition only when modal is ".fade" | |
| 13 | ||
| 14 | var attrib_values = ace.helper.getAttrSettings(modal, $.fn.ace_aside.defaults); | |
| 15 | this.settings = $.extend({}, $.fn.ace_aside.defaults, settings, attrib_values); | |
| 16 | ||
| 17 | //if no scroll style specified and modal has dark background, let's make scrollbars 'white' | |
| 18 | if(this.settings.background && !settings.scroll_style && !attrib_values.scroll_style) { | |
| 19 | this.settings.scroll_style = 'scroll-white no-track'; | |
| 20 | } | |
| 21 | ||
| 22 | ||
| 23 | this.container = this.settings.container; | |
| 24 | if(this.container) { | |
| 25 | try { | |
| 26 | if( $(this.container).get(0) == document.body ) this.container = null; | |
| 27 | } catch(e) {} | |
| 28 | } | |
| 29 | if(this.container) { | |
| 30 | this.settings.backdrop = false;//no backdrop when inside another element? | |
| 31 | $modal.addClass('aside-contained'); | |
| 32 | } | |
| 33 | ||
| 34 | ||
| 35 | var dialog = $modal.find('.modal-dialog'); | |
| 36 | var content = $modal.find('.modal-content'); | |
| 37 | var delay = 300; | |
| 38 | ||
| 39 | this.initiate = function() { | |
| 40 | modal.className = modal.className.replace(/(\s|^)aside\-(right|top|left|bottom)(\s|$)/ig , '$1$3'); | |
| 41 | ||
| 42 | placement = this.settings.placement; | |
| 43 | if(placement) placement = $.trim(placement.toLowerCase()); | |
| 44 | if(!placement || !(/right|top|left|bottom/.test(placement))) placement = 'right'; | |
| 45 | ||
| 46 | $modal.attr('data-placement', placement); | |
| 47 | $modal.addClass('aside-' + placement); | |
| 48 | ||
| 49 | if( /right|left/.test(placement) ) { | |
| 50 | vertical = true; | |
| 51 | $modal.addClass('aside-vc');//vertical | |
| 52 | } | |
| 53 | else $modal.addClass('aside-hz');//horizontal | |
| 54 | ||
| 55 | if( this.settings.fixed ) $modal.addClass('aside-fixed'); | |
| 56 | if( this.settings.background ) $modal.addClass('aside-dark'); | |
| 57 | if( this.settings.offset ) $modal.addClass('navbar-offset'); | |
| 58 | ||
| 59 | if( !this.settings.transition ) $modal.addClass('transition-off'); | |
| 60 | ||
| 61 | $modal.addClass('aside-hidden'); | |
| 62 | ||
| 63 | this.insideContainer(); | |
| 64 | ||
| 65 | ///////////////////////////// | |
| 66 | ||
| 67 | dialog = $modal.find('.modal-dialog'); | |
| 68 | content = $modal.find('.modal-content'); | |
| 69 | ||
| 70 | if(!this.settings.body_scroll) { | |
| 71 | //don't allow body scroll when modal is open | |
| 72 | $modal.on('mousewheel.aside DOMMouseScroll.aside touchmove.aside pointermove.aside', function(e) { | |
| 73 | if( !$.contains(content[0], e.target) ) { | |
| 74 | e.preventDefault(); | |
| 75 | return false; | |
| 76 | } | |
| 77 | }) | |
| 78 | } | |
| 79 | ||
| 80 | if( this.settings.backdrop == false ) { | |
| 81 | $modal.addClass('no-backdrop'); | |
| 82 | } | |
| 83 | } | |
| 84 | ||
| 85 | ||
| 86 | this.show = function() { | |
| 87 | if(this.settings.backdrop == false) { | |
| 88 | try { | |
| 89 | $modal.data('bs.modal').$backdrop.remove(); | |
| 90 | } catch(e){} | |
| 91 | } | |
| 92 | ||
| 93 | if(this.container) $(this.container).addClass('overflow-hidden'); | |
| 94 | else $modal.css('position', 'fixed') | |
| 95 | ||
| 96 | $modal.removeClass('aside-hidden'); | |
| 97 | } | |
| 98 | ||
| 99 | this.hide = function() { | |
| 100 | if(this.container) { | |
| 101 | this.container.addClass('overflow-hidden'); | |
| 102 | ||
| 103 | if(ace.vars['firefox']) { | |
| 104 | //firefox needs a bit of forcing re-calculation | |
| 105 | modal.offsetHeight; | |
| 106 | } | |
| 107 | } | |
| 108 | ||
| 109 | toggleButton(); | |
| 110 | ||
| 111 | if(ace.vars['transition'] && !hasFade) { | |
| 112 | $modal.one('bsTransitionEnd', function() { | |
| 113 | $modal.addClass('aside-hidden'); | |
| 114 | $modal.css('position', ''); | |
| 115 | ||
| 116 | if(self.container) self.container.removeClass('overflow-hidden'); | |
| 117 | }).emulateTransitionEnd(delay); | |
| 118 | } | |
| 119 | } | |
| 120 | ||
| 121 | this.shown = function() { | |
| 122 | toggleButton(); | |
| 123 | $('body').removeClass('modal-open').css('padding-right', ''); | |
| 124 | ||
| 125 | if( this.settings.backdrop == 'invisible' ) { | |
| 126 | try { | |
| 127 | $modal.data('bs.modal').$backdrop.css('opacity', 0); | |
| 128 | } catch(e){} | |
| 129 | } | |
| 130 | ||
| 131 | var size = !vertical ? dialog.height() : content.height(); | |
| 132 | if(!ace.vars['touch']) { | |
| 133 | if(!content.hasClass('ace-scroll')) { | |
| 134 | content.ace_scroll({ | |
| 135 | size: size, | |
| 136 | reset: true, | |
| 137 | mouseWheelLock: true, | |
| 138 | lockAnyway: !this.settings.body_scroll, | |
| 139 | styleClass: this.settings.scroll_style, | |
| 140 | 'observeContent': true, | |
| 141 | 'hideOnIdle': !ace.vars['old_ie'], | |
| 142 | 'hideDelay': 1500 | |
| 143 | }) | |
| 144 | } | |
| 145 | } | |
| 146 | else { | |
| 147 | content.addClass('overflow-scroll').css('max-height', size+'px'); | |
| 148 | } | |
| 149 | ||
| 150 | $window | |
| 151 | .off('resize.modal.aside') | |
| 152 | .on('resize.modal.aside', function() { | |
| 153 | if(!ace.vars['touch']) { | |
| 154 | content.ace_scroll('disable');//to get correct size when going from small window size to large size | |
| 155 | var size = !vertical ? dialog.height() : content.height(); | |
| 156 | content | |
| 157 | .ace_scroll('update', {'size': size}) | |
| 158 | .ace_scroll('enable') | |
| 159 | .ace_scroll('reset'); | |
| 160 | } | |
| 161 | else content.css('max-height', (!vertical ? dialog.height() : content.height())+'px'); | |
| 162 | }).triggerHandler('resize.modal.aside'); | |
| 163 | ||
| 164 | ||
| 165 | /////////////////////////////////////////////////////////////////////////// | |
| 166 | if(self.container && ace.vars['transition'] && !hasFade) { | |
| 167 | $modal.one('bsTransitionEnd', function() { | |
| 168 | self.container.removeClass('overflow-hidden') | |
| 169 | }).emulateTransitionEnd(delay); | |
| 170 | } | |
| 171 | } | |
| 172 | ||
| 173 | ||
| 174 | this.hidden = function() { | |
| 175 | $window.off('.aside') | |
| 176 | //$modal.off('.aside') | |
| 177 | // | |
| 178 | if( !ace.vars['transition'] || hasFade ) { | |
| 179 | $modal.addClass('aside-hidden'); | |
| 180 | $modal.css('position', ''); | |
| 181 | } | |
| 182 | } | |
| 183 | ||
| 184 | ||
| 185 | this.insideContainer = function() { | |
| 186 | var container = $('.main-container'); | |
| 187 | ||
| 188 | var dialog = $modal.find('.modal-dialog'); | |
| 189 | dialog.css({'right': '', 'left': ''}); | |
| 190 | if( container.hasClass('container') ) { | |
| 191 | var flag = false; | |
| 192 | if(vertical == true) { | |
| 193 | dialog.css( placement, parseInt(($window.width() - container.width()) / 2) ); | |
| 194 | flag = true; | |
| 195 | } | |
| 196 | ||
| 197 | //strange firefox issue, not redrawing properly on window resize (zoom in/out)!!!! | |
| 198 | //--- firefix is still having issue! | |
| 199 | if(flag && ace.vars['firefox']) { | |
| 200 | ace.helper.redraw(container[0]); | |
| 201 | } | |
| 202 | } | |
| 203 | } | |
| 204 | ||
| 205 | this.flip = function() { | |
| 206 | var flipSides = {right : 'left', left : 'right', top: 'bottom', bottom: 'top'}; | |
| 207 | $modal.removeClass('aside-'+placement).addClass('aside-'+flipSides[placement]); | |
| 208 | placement = flipSides[placement]; | |
| 209 | } | |
| 210 | ||
| 211 | var toggleButton = function() { | |
| 212 | var btn = $modal.find('.aside-trigger'); | |
| 213 | if(btn.length == 0) return; | |
| 214 | btn.toggleClass('open'); | |
| 215 | ||
| 216 | var icon = btn.find(ace.vars['.icon']); | |
| 217 | if(icon.length == 0) return; | |
| 218 | icon.toggleClass(icon.attr('data-icon1') + " " + icon.attr('data-icon2')); | |
| 219 | } | |
| 220 | ||
| 221 | ||
| 222 | this.initiate(); | |
| 223 | ||
| 224 | if(this.container) this.container = $(this.container); | |
| 225 | $modal.appendTo(this.container || 'body'); | |
| 226 | } | |
| 227 | ||
| 228 | ||
| 229 | $(document) | |
| 230 | .on('show.bs.modal', '.modal.aside', function(e) { | |
| 231 | $('.aside.in').modal('hide');//??? hide previous open ones? | |
| 232 | $(this).ace_aside('show'); | |
| 233 | }) | |
| 234 | .on('hide.bs.modal', '.modal.aside', function(e) { | |
| 235 | $(this).ace_aside('hide'); | |
| 236 | }) | |
| 237 | .on('shown.bs.modal', '.modal.aside', function(e) { | |
| 238 | $(this).ace_aside('shown'); | |
| 239 | }) | |
| 240 | .on('hidden.bs.modal', '.modal.aside', function(e) { | |
| 241 | $(this).ace_aside('hidden'); | |
| 242 | }) | |
| 243 | ||
| 244 | ||
| 245 | ||
| 246 | ||
| 247 | $(window).on('resize.aside_container', function() { | |
| 248 | $('.modal.aside').ace_aside('insideContainer'); | |
| 249 | }); | |
| 250 | $(document).on('settings.ace.aside', function(e, event_name) { | |
| 251 | if(event_name == 'main_container_fixed') $('.modal.aside').ace_aside('insideContainer'); | |
| 252 | }); | |
| 253 | ||
| 254 | $.fn.aceAside = $.fn.ace_aside = function (option, value) { | |
| 255 | var method_call; | |
| 256 | ||
| 257 | var $set = this.each(function () { | |
| 258 | var $this = $(this); | |
| 259 | var data = $this.data('ace_aside'); | |
| 260 | var options = typeof option === 'object' && option; | |
| 261 | ||
| 262 | if (!data) $this.data('ace_aside', (data = new Aside(this, options))); | |
| 263 | if (typeof option === 'string' && typeof data[option] === 'function') { | |
| 264 | if(value instanceof Array) method_call = data[option].apply(data, value); | |
| 265 | else method_call = data[option](value); | |
| 266 | } | |
| 267 | }); | |
| 268 | ||
| 269 | return (method_call === undefined) ? $set : method_call; | |
| 270 | } | |
| 271 | ||
| 272 | $.fn.ace_aside.defaults = { | |
| 273 | fixed: false, | |
| 274 | background: false, | |
| 275 | offset: false, | |
| 276 | body_scroll: false, | |
| 277 | transition: true, | |
| 278 | scroll_style: 'scroll-dark no-track', | |
| 279 | container: null, | |
| 280 | backdrop: false, | |
| 281 | placement: 'right' | |
| 282 | } | |
| 283 | ||
| 284 | })(window.jQuery); | |
