/**
|
<b>Content Slider</b>. with custom content and elements based on Bootstrap modals.
|
*/
|
(function($ , undefined) {
|
var $window = $(window);
|
|
function Aside(modal, settings) {
|
var self = this;
|
|
var $modal = $(modal);
|
var placement = 'right', vertical = false;
|
var hasFade = $modal.hasClass('fade');//Bootstrap enables transition only when modal is ".fade"
|
|
var attrib_values = ace.helper.getAttrSettings(modal, $.fn.ace_aside.defaults);
|
this.settings = $.extend({}, $.fn.ace_aside.defaults, settings, attrib_values);
|
|
//if no scroll style specified and modal has dark background, let's make scrollbars 'white'
|
if(this.settings.background && !settings.scroll_style && !attrib_values.scroll_style) {
|
this.settings.scroll_style = 'scroll-white no-track';
|
}
|
|
|
this.container = this.settings.container;
|
if(this.container) {
|
try {
|
if( $(this.container).get(0) == document.body ) this.container = null;
|
} catch(e) {}
|
}
|
if(this.container) {
|
this.settings.backdrop = false;//no backdrop when inside another element?
|
$modal.addClass('aside-contained');
|
}
|
|
|
var dialog = $modal.find('.modal-dialog');
|
var content = $modal.find('.modal-content');
|
var delay = 300;
|
|
this.initiate = function() {
|
modal.className = modal.className.replace(/(\s|^)aside\-(right|top|left|bottom)(\s|$)/ig , '$1$3');
|
|
placement = this.settings.placement;
|
if(placement) placement = $.trim(placement.toLowerCase());
|
if(!placement || !(/right|top|left|bottom/.test(placement))) placement = 'right';
|
|
$modal.attr('data-placement', placement);
|
$modal.addClass('aside-' + placement);
|
|
if( /right|left/.test(placement) ) {
|
vertical = true;
|
$modal.addClass('aside-vc');//vertical
|
}
|
else $modal.addClass('aside-hz');//horizontal
|
|
if( this.settings.fixed ) $modal.addClass('aside-fixed');
|
if( this.settings.background ) $modal.addClass('aside-dark');
|
if( this.settings.offset ) $modal.addClass('navbar-offset');
|
|
if( !this.settings.transition ) $modal.addClass('transition-off');
|
|
$modal.addClass('aside-hidden');
|
|
this.insideContainer();
|
|
/////////////////////////////
|
|
dialog = $modal.find('.modal-dialog');
|
content = $modal.find('.modal-content');
|
|
if(!this.settings.body_scroll) {
|
//don't allow body scroll when modal is open
|
$modal.on('mousewheel.aside DOMMouseScroll.aside touchmove.aside pointermove.aside', function(e) {
|
if( !$.contains(content[0], e.target) ) {
|
e.preventDefault();
|
return false;
|
}
|
})
|
}
|
|
if( this.settings.backdrop == false ) {
|
$modal.addClass('no-backdrop');
|
}
|
}
|
|
|
this.show = function() {
|
if(this.settings.backdrop == false) {
|
try {
|
$modal.data('bs.modal').$backdrop.remove();
|
} catch(e){}
|
}
|
|
if(this.container) $(this.container).addClass('overflow-hidden');
|
else $modal.css('position', 'fixed')
|
|
$modal.removeClass('aside-hidden');
|
}
|
|
this.hide = function() {
|
if(this.container) {
|
this.container.addClass('overflow-hidden');
|
|
if(ace.vars['firefox']) {
|
//firefox needs a bit of forcing re-calculation
|
modal.offsetHeight;
|
}
|
}
|
|
toggleButton();
|
|
if(ace.vars['transition'] && !hasFade) {
|
$modal.one('bsTransitionEnd', function() {
|
$modal.addClass('aside-hidden');
|
$modal.css('position', '');
|
|
if(self.container) self.container.removeClass('overflow-hidden');
|
}).emulateTransitionEnd(delay);
|
}
|
}
|
|
this.shown = function() {
|
toggleButton();
|
$('body').removeClass('modal-open').css('padding-right', '');
|
|
if( this.settings.backdrop == 'invisible' ) {
|
try {
|
$modal.data('bs.modal').$backdrop.css('opacity', 0);
|
} catch(e){}
|
}
|
|
var size = !vertical ? dialog.height() : content.height();
|
if(!ace.vars['touch']) {
|
if(!content.hasClass('ace-scroll')) {
|
content.ace_scroll({
|
size: size,
|
reset: true,
|
mouseWheelLock: true,
|
lockAnyway: !this.settings.body_scroll,
|
styleClass: this.settings.scroll_style,
|
'observeContent': true,
|
'hideOnIdle': !ace.vars['old_ie'],
|
'hideDelay': 1500
|
})
|
}
|
}
|
else {
|
content.addClass('overflow-scroll').css('max-height', size+'px');
|
}
|
|
$window
|
.off('resize.modal.aside')
|
.on('resize.modal.aside', function() {
|
if(!ace.vars['touch']) {
|
content.ace_scroll('disable');//to get correct size when going from small window size to large size
|
var size = !vertical ? dialog.height() : content.height();
|
content
|
.ace_scroll('update', {'size': size})
|
.ace_scroll('enable')
|
.ace_scroll('reset');
|
}
|
else content.css('max-height', (!vertical ? dialog.height() : content.height())+'px');
|
}).triggerHandler('resize.modal.aside');
|
|
|
///////////////////////////////////////////////////////////////////////////
|
if(self.container && ace.vars['transition'] && !hasFade) {
|
$modal.one('bsTransitionEnd', function() {
|
self.container.removeClass('overflow-hidden')
|
}).emulateTransitionEnd(delay);
|
}
|
}
|
|
|
this.hidden = function() {
|
$window.off('.aside')
|
//$modal.off('.aside')
|
//
|
if( !ace.vars['transition'] || hasFade ) {
|
$modal.addClass('aside-hidden');
|
$modal.css('position', '');
|
}
|
}
|
|
|
this.insideContainer = function() {
|
var container = $('.main-container');
|
|
var dialog = $modal.find('.modal-dialog');
|
dialog.css({'right': '', 'left': ''});
|
if( container.hasClass('container') ) {
|
var flag = false;
|
if(vertical == true) {
|
dialog.css( placement, parseInt(($window.width() - container.width()) / 2) );
|
flag = true;
|
}
|
|
//strange firefox issue, not redrawing properly on window resize (zoom in/out)!!!!
|
//--- firefix is still having issue!
|
if(flag && ace.vars['firefox']) {
|
ace.helper.redraw(container[0]);
|
}
|
}
|
}
|
|
this.flip = function() {
|
var flipSides = {right : 'left', left : 'right', top: 'bottom', bottom: 'top'};
|
$modal.removeClass('aside-'+placement).addClass('aside-'+flipSides[placement]);
|
placement = flipSides[placement];
|
}
|
|
var toggleButton = function() {
|
var btn = $modal.find('.aside-trigger');
|
if(btn.length == 0) return;
|
btn.toggleClass('open');
|
|
var icon = btn.find(ace.vars['.icon']);
|
if(icon.length == 0) return;
|
icon.toggleClass(icon.attr('data-icon1') + " " + icon.attr('data-icon2'));
|
}
|
|
|
this.initiate();
|
|
if(this.container) this.container = $(this.container);
|
$modal.appendTo(this.container || 'body');
|
}
|
|
|
$(document)
|
.on('show.bs.modal', '.modal.aside', function(e) {
|
$('.aside.in').modal('hide');//??? hide previous open ones?
|
$(this).ace_aside('show');
|
})
|
.on('hide.bs.modal', '.modal.aside', function(e) {
|
$(this).ace_aside('hide');
|
})
|
.on('shown.bs.modal', '.modal.aside', function(e) {
|
$(this).ace_aside('shown');
|
})
|
.on('hidden.bs.modal', '.modal.aside', function(e) {
|
$(this).ace_aside('hidden');
|
})
|
|
|
|
|
$(window).on('resize.aside_container', function() {
|
$('.modal.aside').ace_aside('insideContainer');
|
});
|
$(document).on('settings.ace.aside', function(e, event_name) {
|
if(event_name == 'main_container_fixed') $('.modal.aside').ace_aside('insideContainer');
|
});
|
|
$.fn.aceAside = $.fn.ace_aside = function (option, value) {
|
var method_call;
|
|
var $set = this.each(function () {
|
var $this = $(this);
|
var data = $this.data('ace_aside');
|
var options = typeof option === 'object' && option;
|
|
if (!data) $this.data('ace_aside', (data = new Aside(this, options)));
|
if (typeof option === 'string' && typeof data[option] === 'function') {
|
if(value instanceof Array) method_call = data[option].apply(data, value);
|
else method_call = data[option](value);
|
}
|
});
|
|
return (method_call === undefined) ? $set : method_call;
|
}
|
|
$.fn.ace_aside.defaults = {
|
fixed: false,
|
background: false,
|
offset: false,
|
body_scroll: false,
|
transition: true,
|
scroll_style: 'scroll-dark no-track',
|
container: null,
|
backdrop: false,
|
placement: 'right'
|
}
|
|
})(window.jQuery);
|
