/*
* # Semantic - Sidebar
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ( $, window, document, undefined ) {
"use strict";
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
$head = $('head'),
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { setTimeout(callback, 0); },
returnedValue
;
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.extend({}, $.fn.sidebar.settings),
selector = settings.selector,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$module = $(this),
$context = $(settings.context),
$sidebars = $module.children(selector.sidebar),
$pusher = $context.children(selector.pusher),
$style,
element = this,
instance = $module.data(moduleNamespace),
currentScroll,
transitionEvent,
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', parameters);
transitionEvent = module.get.transitionEvent();
// cache on initialize
if( module.is.legacy() || settings.legacy) {
settings.transition = 'overlay';
settings.useLegacy = true;
}
// avoid locking rendering if included in onReady
requestAnimationFrame(module.setup.layout);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
instance = module;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
module.remove.direction();
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
},
event: {
clickaway: function(event) {
if( $(event.target).closest(selector.sidebar).size() === 0 ) {
module.verbose('User clicked on dimmed page');
module.hide();
}
},
touch: function(event) {
//event.stopPropagation();
},
containScroll: function(event) {
if(element.scrollTop <= 0) {
element.scrollTop = 1;
}
if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
}
},
scroll: function(event) {
if( $(event.target).closest(selector.sidebar).size() === 0 ) {
event.preventDefault();
}
}
},
bind: {
clickaway: function() {
if(settings.scrollLock) {
$(window)
.on('DOMMouseScroll' + eventNamespace, module.event.scroll)
;
}
$(document)
.on('touchmove' + eventNamespace, module.event.touch)
;
$module
.on('scroll' + eventNamespace, module.event.containScroll)
;
if(settings.closable) {
$context
.on('click' + eventNamespace, module.event.clickaway)
.on('touchend' + eventNamespace, module.event.clickaway)
;
}
}
},
unbind: {
clickaway: function() {
$context.off(eventNamespace);
$pusher.off(eventNamespace);
$(document).off(eventNamespace);
$(window).off(eventNamespace);
}
},
add: {
bodyCSS: function(direction, distance) {
var
width = $module.outerWidth(),
height = $module.outerHeight(),
style
;
style = ''
+ '';
$head.append(style);
$style = $('style[title=' + namespace + ']');
module.debug('Adding sizing css to head', $style);
}
},
refresh: function() {
module.verbose('Refreshing selector cache');
$context = $(settings.context);
$sidebars = $context.children(selector.sidebar);
$pusher = $context.children(selector.pusher);
},
repaint: function() {
module.verbose('Forcing repaint event');
element.style.display='none';
element.offsetHeight;
element.scrollTop = element.scrollTop;
element.style.display='';
},
setup: {
layout: function() {
if( $context.children(selector.pusher).size() === 0 ) {
module.debug('Adding wrapper element for sidebar');
module.error(error.pusher);
$pusher = $('');
$context
.children()
.not(selector.omitted)
.not($sidebars)
.wrapAll($pusher)
;
module.refresh();
}
if($module.nextAll(selector.pusher).size() == 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) {
module.debug('Moved sidebar to correct parent element');
module.error(error.movedSidebar, element);
$module.detach().prependTo($context);
module.refresh();
}
module.set.pushable();
module.set.direction();
}
},
attachEvents: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound, selector);
}
},
show: function(callback) {
var
animateMethod = (settings.useLegacy)
? module.legacyPushPage
: module.pushPage
;
callback = $.isFunction(callback)
? callback
: function(){}
;
if(module.is.closed()) {
if(settings.overlay) {
module.error(error.overlay);
settings.transition = 'overlay';
}
module.refresh();
if(module.othersVisible() && module.get.transition() != 'overlay') {
module.debug('Other sidebars currently open');
if(settings.exclusive) {
module.hideOthers();
}
}
animateMethod(function() {
$.proxy(callback, element)();
$.proxy(settings.onShow, element)();
});
$.proxy(settings.onChange, element)();
$.proxy(settings.onVisible, element)();
}
else {
module.debug('Sidebar is already visible');
}
},
hide: function(callback) {
var
animateMethod = (settings.useLegacy)
? module.legacyPullPage
: module.pullPage
;
callback = $.isFunction(callback)
? callback
: function(){}
;
if(module.is.visible() || module.is.animating()) {
module.debug('Hiding sidebar', callback);
animateMethod(function() {
$.proxy(callback, element)();
$.proxy(settings.onHidden, element)();
});
$.proxy(settings.onChange, element)();
$.proxy(settings.onHide, element)();
}
},
othersVisible: function() {
return ($sidebars.not($module).filter('.' + className.visible).size() > 0);
},
othersActive: function() {
return ($sidebars.not($module).filter('.' + className.active).size() > 0);
},
hideOthers: function(callback) {
var
$otherSidebars = $sidebars.not($module).filter('.' + className.visible),
callback = callback || function(){},
sidebarCount = $otherSidebars.size(),
callbackCount = 0
;
$otherSidebars
.sidebar('hide', function() {
callbackCount++;
if(callbackCount == sidebarCount) {
callback();
}
})
;
},
toggle: function() {
module.verbose('Determining toggled direction');
if(module.is.closed()) {
module.show();
}
else {
module.hide();
}
},
pushPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
transitionEnd
;
callback = $.isFunction(callback)
? callback
: function(){}
;
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
module.scrollToTop();
}
module.set.transition();
module.repaint();
animate = function() {
module.add.bodyCSS();
module.set.animating();
module.set.visible();
if(!module.othersActive()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
}
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.animating();
module.bind.clickaway();
$.proxy(callback, element)();
}
};
$transition.on(transitionEvent + eventNamespace, transitionEnd);
requestAnimationFrame(animate);
},
pullPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
transitionEnd
;
callback = $.isFunction(callback)
? callback
: function(){}
;
module.verbose('Removing context push state', module.get.direction());
if(!module.othersActive()) {
module.unbind.clickaway();
}
animate = function() {
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersActive()) {
$pusher.removeClass(className.dimmed);
}
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.animating();
module.remove.transition();
module.remove.bodyCSS();
if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
module.scrollBack();
}
$.proxy(callback, element)();
}
};
$transition.on(transitionEvent + eventNamespace, transitionEnd);
requestAnimationFrame(animate);
},
legacyPushPage: function(callback) {
var
distance = $module.width(),
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = distance;
module.debug('Using javascript to push context', properties);
module.set.visible();
module.set.transition();
module.set.animating();
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
module.bind.clickaway();
$.proxy(callback, module)();
})
;
},
legacyPullPage: function(callback) {
var
distance = 0,
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = '0px';
module.debug('Using javascript to pull context', properties);
module.unbind.clickaway();
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersVisible()) {
$pusher.removeClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
$.proxy(callback, module)();
})
;
},
scrollToTop: function() {
module.verbose('Scrolling to top of page to avoid animation issues');
currentScroll = $(window).scrollTop();
$module.scrollTop(0);
window.scrollTo(0, 0);
},
scrollBack: function() {
module.verbose('Scrolling back to original page position');
window.scrollTo(0, currentScroll);
},
set: {
// container
pushed: function() {
$context.addClass(className.pushed);
},
pushable: function() {
$context.addClass(className.pushable);
},
// sidebar
active: function() {
$module.addClass(className.active);
},
animating: function() {
$module.addClass(className.animating);
},
transition: function(transition) {
transition = transition || module.get.transition();
$module.addClass(transition);
},
direction: function(direction) {
direction = direction || module.get.direction();
$module.addClass(className[direction]);
},
visible: function() {
$module.addClass(className.visible);
},
overlay: function() {
$module.addClass(className.overlay);
}
},
remove: {
bodyCSS: function() {
module.debug('Removing body css styles', $style);
if($style.size() > 0) {
$style.remove();
}
},
// context
pushed: function() {
$context.removeClass(className.pushed);
},
pushable: function() {
$context.removeClass(className.pushable);
},
// sidebar
active: function() {
$module.removeClass(className.active);
},
animating: function() {
$module.removeClass(className.animating);
},
transition: function(transition) {
transition = transition || module.get.transition();
$module.removeClass(transition);
},
direction: function(direction) {
direction = direction || module.get.direction();
$module.removeClass(className[direction]);
},
visible: function() {
$module.removeClass(className.visible);
},
overlay: function() {
$module.removeClass(className.overlay);
}
},
get: {
direction: function() {
if($module.hasClass(className.top)) {
return className.top;
}
else if($module.hasClass(className.right)) {
return className.right;
}
else if($module.hasClass(className.bottom)) {
return className.bottom;
}
return className.left;
},
transition: function() {
var
direction = module.get.direction(),
transition
;
return ( module.is.mobile() )
? (settings.mobileTransition == 'auto')
? settings.defaultTransition.mobile[direction]
: settings.mobileTransition
: (settings.transition == 'auto')
? settings.defaultTransition.computer[direction]
: settings.transition
;
},
transitionEvent: function() {
var
element = document.createElement('element'),
transitions = {
'transition' :'transitionend',
'OTransition' :'oTransitionEnd',
'MozTransition' :'transitionend',
'WebkitTransition' :'webkitTransitionEnd'
},
transition
;
for(transition in transitions){
if( element.style[transition] !== undefined ){
return transitions[transition];
}
}
}
},
is: {
ie: function() {
var
isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
isIE = ('ActiveXObject' in window)
;
return (isIE11 || isIE);
},
legacy: function() {
var
element = document.createElement('div'),
transforms = {
'webkitTransform' :'-webkit-transform',
'OTransform' :'-o-transform',
'msTransform' :'-ms-transform',
'MozTransform' :'-moz-transform',
'transform' :'transform'
},
has3D
;
// Add it to the body to get the computed style.
document.body.insertBefore(element, null);
for (var transform in transforms) {
if (element.style[transform] !== undefined) {
element.style[transform] = "translate3d(1px,1px,1px)";
has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
}
}
document.body.removeChild(element);
return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
},
mobile: function() {
var
userAgent = navigator.userAgent,
mobileRegExp = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/,
isMobile = mobileRegExp.test(userAgent)
;
if(isMobile) {
module.verbose('Browser was found to be mobile', userAgent);
return true;
}
else {
module.verbose('Browser is not mobile, using regular transition', userAgent);
return false;
}
},
closed: function() {
return !module.is.visible();
},
visible: function() {
return $module.hasClass(className.visible);
},
vertical: function() {
return $module.hasClass(className.top);
},
animating: function() {
return $context.hasClass(className.animating);
}
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else if(value !== undefined) {
settings[name] = value;
}
else {
return settings[name];
}
},
internal: function(name, value) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else if(value !== undefined) {
module[name] = value;
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Element' : element,
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
module.error(error.method, query);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
}
;
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.invoke('destroy');
}
module.initialize();
}
});
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.sidebar.settings = {
name : 'Sidebar',
namespace : 'sidebar',
debug : false,
verbose : true,
performance : true,
transition : 'auto',
mobileTransition : 'auto',
defaultTransition : {
computer: {
left : 'uncover',
right : 'uncover',
top : 'overlay',
bottom : 'overlay'
},
mobile: {
left : 'uncover',
right : 'uncover',
top : 'overlay',
bottom : 'overlay'
}
},
context : 'body',
exclusive : false,
closable : true,
dimPage : true,
scrollLock : false,
returnScroll : false,
useLegacy : false,
duration : 500,
easing : 'easeInOutQuint',
onChange : function(){},
onShow : function(){},
onHide : function(){},
onHidden : function(){},
onVisible : function(){},
className : {
active : 'active',
animating : 'animating',
dimmed : 'dimmed',
pushable : 'pushable',
pushed : 'pushed',
right : 'right',
top : 'top',
left : 'left',
bottom : 'bottom',
visible : 'visible'
},
selector: {
fixed : '.fixed',
omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
pusher : '.pusher',
sidebar : '.ui.sidebar'
},
error : {
method : 'The method you called is not defined.',
pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
overlay : 'The overlay setting is no longer supported, use animation: overlay',
notFound : 'There were no elements that matched the specified selector'
}
};
// Adds easing
$.extend( $.easing, {
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
});
})( jQuery, window , document );