- Upgraded "[Slidebars](https://www.adchsm.com/slidebars)", JS lib v0.10 → v2.0.2
This commit is contained in:
Mark Friedrich
@@ -32,7 +32,7 @@ requirejs.config({
|
||||
localForage: 'lib/localforage.min', // v1.7.3 localStorage library - https://localforage.github.io/localForage/
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin https://www.adchsm.com/slidebars/
|
||||
slidebars: 'lib/slidebars', // v2.0.2 Slidebars - side menu plugin https://www.adchsm.com/slidebars/
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
|
||||
@@ -39,7 +39,7 @@ define([
|
||||
Util.initDefaultEditableConfig();
|
||||
|
||||
// load page
|
||||
$('body').loadPageStructure().setGlobalShortcuts();
|
||||
Page.loadPageStructure().setGlobalShortcuts();
|
||||
|
||||
// show app information in browser console
|
||||
Util.showVersionInfo();
|
||||
|
||||
285
js/app/page.js
285
js/app/page.js
@@ -10,6 +10,7 @@ define([
|
||||
'mustache',
|
||||
'app/map/util',
|
||||
'app/map/contextmenu',
|
||||
'slidebars',
|
||||
'text!img/logo.svg!strip',
|
||||
'text!templates/modules/header.html',
|
||||
'text!templates/modules/footer.html',
|
||||
@@ -25,20 +26,16 @@ define([
|
||||
'dialog/delete_account',
|
||||
'dialog/credit',
|
||||
'xEditable',
|
||||
'slidebars',
|
||||
'app/module_map'
|
||||
], ($, Init, Util, Logging, Mustache, MapUtil, MapContextMenu, TplLogo, TplHead, TplFooter) => {
|
||||
], ($, Init, Util, Logging, Mustache, MapUtil, MapContextMenu, SlideBars, TplLogo, TplHead, TplFooter) => {
|
||||
|
||||
'use strict';
|
||||
|
||||
let config = {
|
||||
// page structure slidebars-menu classes
|
||||
pageId: 'sb-site',
|
||||
pageSlidebarClass: 'sb-slidebar',
|
||||
pageSlidebarLeftClass: 'sb-left', // class for left menu
|
||||
pageSlidebarRightClass: 'sb-right', // class for right menu
|
||||
pageSlideLeftWidth: '150px', // slide distance left menu
|
||||
pageSlideRightWidth: '150px', // slide distance right menu
|
||||
// page structure and slide menus
|
||||
pageMenuClass: 'pf-menu',
|
||||
pageMenuLeftClass: 'pf-menu-left', // class for left menu
|
||||
pageMenuRightClass: 'pf-menu-right', // class for right menu
|
||||
fullScreenClass: 'pf-fullscreen', // class for the "full screen" element
|
||||
|
||||
// page structure
|
||||
@@ -75,56 +72,46 @@ define([
|
||||
let programStatusCounter = 0; // current count down in s until next status change is possible
|
||||
let programStatusInterval = false; // interval timer until next status change is possible
|
||||
|
||||
|
||||
/**
|
||||
* load main page structure elements and navigation container into body
|
||||
* @returns {*|jQuery|HTMLElement}
|
||||
* @returns {*|w.fn.init|jQuery|HTMLElement}
|
||||
*/
|
||||
$.fn.loadPageStructure = function(){
|
||||
return this.each((i, body) => {
|
||||
body = $(body);
|
||||
let loadPageStructure = () => {
|
||||
let body = $('body');
|
||||
|
||||
// menu left
|
||||
body.prepend(
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
class: config.pageClass
|
||||
}).attr('canvas', 'container').append(
|
||||
Util.getMapModule(),
|
||||
$('<div>', {
|
||||
class: [config.pageSlidebarClass, config.pageSlidebarLeftClass, 'sb-style-push', 'sb-width-custom'].join(' ')
|
||||
}).attr('data-sb-width', config.pageSlideLeftWidth)
|
||||
);
|
||||
id: config.dynamicElementWrapperId
|
||||
})
|
||||
),
|
||||
$('<div>', {
|
||||
class: [config.pageMenuClass, config.pageMenuLeftClass].join(' ')
|
||||
}).attr('off-canvas', [config.pageMenuLeftClass, 'left', 'push'].join(' ')),
|
||||
$('<div>', {
|
||||
class: [config.pageMenuClass, config.pageMenuRightClass].join(' ')
|
||||
}).attr('off-canvas', [config.pageMenuRightClass, 'right', 'push'].join(' '))
|
||||
);
|
||||
|
||||
// menu right
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
class: [config.pageSlidebarClass, config.pageSlidebarRightClass, 'sb-style-push', 'sb-width-custom'].join(' ')
|
||||
}).attr('data-sb-width', config.pageSlideRightWidth)
|
||||
);
|
||||
// load footer
|
||||
$('.' + config.pageClass).loadHeader().loadFooter();
|
||||
|
||||
// main page
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
id: config.pageId,
|
||||
class: config.pageClass
|
||||
}).append(
|
||||
Util.getMapModule(),
|
||||
$('<div>', {
|
||||
id: config.dynamicElementWrapperId
|
||||
})
|
||||
)
|
||||
);
|
||||
// load left menu
|
||||
$('.' + config.pageMenuLeftClass).loadLeftMenu();
|
||||
|
||||
// load footer
|
||||
$('.' + config.pageClass).loadHeader().loadFooter();
|
||||
// load right menu
|
||||
$('.' + config.pageMenuRightClass).loadRightMenu();
|
||||
|
||||
// load left menu
|
||||
$('.' + config.pageSlidebarLeftClass).loadLeftMenu();
|
||||
// set page observer for global events
|
||||
setPageObserver();
|
||||
|
||||
// load right menu
|
||||
$('.' + config.pageSlidebarRightClass).loadRightMenu();
|
||||
|
||||
// set page observer for global events
|
||||
setPageObserver();
|
||||
});
|
||||
return body;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* set global shortcuts to <body> element
|
||||
*/
|
||||
@@ -203,67 +190,66 @@ define([
|
||||
}).append(
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
href: '/'
|
||||
}).html(' Home').prepend(
|
||||
href: '/',
|
||||
html: ' Home'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-home fa-fw'
|
||||
})
|
||||
)
|
||||
).append(
|
||||
getMenuHeadline('Information')
|
||||
).append(
|
||||
),
|
||||
getMenuHeadline('Information'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Statistics').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Statistics'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-chart-line fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowStatsDialog');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Effect info').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Effect info'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-crosshairs fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowSystemEffectInfo');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Jump info').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Jump info'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-space-shuttle fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowJumpInfo');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Settings')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Settings'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Account').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Account'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-user fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowSettingsDialog');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item hide', // trigger by js
|
||||
id: Util.config.menuButtonFullScreenId
|
||||
}).html(' Full screen').prepend(
|
||||
id: Util.config.menuButtonFullScreenId,
|
||||
html: ' Full screen'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-expand-arrows-alt fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
let fullScreenElement = $('body');
|
||||
requirejs(['jquery', 'fullScreen'], function($){
|
||||
requirejs(['jquery', 'fullScreen'], $ => {
|
||||
|
||||
if($.fullscreen.isFullScreen()){
|
||||
$.fullscreen.exit();
|
||||
@@ -271,47 +257,45 @@ define([
|
||||
fullScreenElement.fullscreen({overflow: 'scroll', toggleClass: config.fullScreenClass});
|
||||
}
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Notification test').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Notification test'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-volume-up fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('NotificationTest');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Danger zone')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Danger zone'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-danger'
|
||||
}).html(' Delete account').prepend(
|
||||
class: 'list-group-item list-group-item-danger',
|
||||
html: ' Delete account'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-user-times fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('DeleteAccount');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-warning'
|
||||
}).html(' Logout').prepend(
|
||||
class: 'list-group-item list-group-item-warning',
|
||||
html: ' Logout'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-sign-in-alt fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Logout', {clearCookies: 1});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<div>', {
|
||||
class: config.menuClockClass
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
requirejs(['fullScreen'], function(){
|
||||
requirejs(['fullScreen'], () => {
|
||||
if($.fullscreen.isNativelySupported() === true){
|
||||
$('#' + Util.config.menuButtonFullScreenId).removeClass('hide');
|
||||
}
|
||||
@@ -327,31 +311,31 @@ define([
|
||||
class: 'list-group'
|
||||
}).append(
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Information').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Information'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-street-view fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowMapInfo', {tab: 'information'});
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Configuration')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Configuration'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Settings').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Settings'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-cogs fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowMapSettings', {tab: 'settings'});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonGridId
|
||||
}).html(' Grid snapping').prepend(
|
||||
id: Util.config.menuButtonGridId,
|
||||
html:' Grid snapping'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-th fa-fw'
|
||||
})
|
||||
@@ -360,12 +344,12 @@ define([
|
||||
option: 'mapSnapToGrid',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonMagnetizerId
|
||||
}).html(' Magnetizing').prepend(
|
||||
id: Util.config.menuButtonMagnetizerId,
|
||||
html: ' Magnetizing'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-magnet fa-fw'
|
||||
})
|
||||
@@ -374,12 +358,12 @@ define([
|
||||
option: 'mapMagnetizer',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonEndpointId
|
||||
}).html(' Signatures').prepend(
|
||||
id: Util.config.menuButtonEndpointId,
|
||||
html: ' Signatures'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-link fa-fw'
|
||||
})
|
||||
@@ -388,12 +372,12 @@ define([
|
||||
option: 'mapEndpoint',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonCompactId
|
||||
}).html(' Compact').prepend(
|
||||
id: Util.config.menuButtonCompactId,
|
||||
html: ' Compact'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-compress fa-fw'
|
||||
})
|
||||
@@ -407,46 +391,44 @@ define([
|
||||
option: 'mapCompact',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Help')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Help'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Manual').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Manual'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-book-reader fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Manual');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Shortcuts').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Shortcuts'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-keyboard fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Shortcuts');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Task-Manager').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Task-Manager'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-tasks fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowTaskManager');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Danger zone')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Danger zone'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-danger',
|
||||
id: Util.config.menuButtonMapDeleteId
|
||||
}).html(' Delete map').prepend(
|
||||
id: Util.config.menuButtonMapDeleteId,
|
||||
html: ' Delete map'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-trash fa-fw'
|
||||
})
|
||||
@@ -494,19 +476,24 @@ define([
|
||||
// init header ================================================================================================
|
||||
|
||||
// init slide menus
|
||||
let slideMenu = new $.slidebars({
|
||||
scrollLock: false
|
||||
});
|
||||
let slideBarsController = new SlideBars();
|
||||
slideBarsController.init();
|
||||
|
||||
// main menus
|
||||
$('.' + config.headMenuClass).on('click', function(e){
|
||||
e.preventDefault();
|
||||
slideMenu.slidebars.toggle('left');
|
||||
$('.' + config.pageClass).on('click.menuClose', function(e){
|
||||
slideBarsController.close();
|
||||
});
|
||||
|
||||
$('.' + config.headMapClass).on('click', function(e){
|
||||
$('.' + config.headMenuClass).on('click.menuOpen', function(e){
|
||||
e.preventDefault();
|
||||
slideMenu.slidebars.toggle('right');
|
||||
e.stopPropagation();
|
||||
slideBarsController.toggle(config.pageMenuLeftClass);
|
||||
});
|
||||
|
||||
$('.' + config.headMapClass).on('click.menuOpen', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
slideBarsController.toggle(config.pageMenuRightClass);
|
||||
});
|
||||
|
||||
// active pilots
|
||||
@@ -524,10 +511,9 @@ define([
|
||||
$(document).triggerMenuEvent('ShowTaskManager');
|
||||
});
|
||||
|
||||
// close menu
|
||||
// close all menus
|
||||
$(document).on('pf:closeMenu', function(e){
|
||||
// close all menus
|
||||
slideMenu.slidebars.close();
|
||||
slideBarsController.close();
|
||||
});
|
||||
|
||||
// tracking toggle
|
||||
@@ -601,7 +587,7 @@ define([
|
||||
/**
|
||||
* catch all global document events
|
||||
*/
|
||||
let setPageObserver = function(){
|
||||
let setPageObserver = () => {
|
||||
let documentElement = $(document);
|
||||
let bodyElement = $(document.body);
|
||||
|
||||
@@ -1233,9 +1219,9 @@ define([
|
||||
programStatusInterval = false;
|
||||
}
|
||||
|
||||
if( statusElement.data('status') !== status ){
|
||||
if(statusElement.data('status') !== status){
|
||||
// status has changed
|
||||
if(! programStatusInterval){
|
||||
if(!programStatusInterval){
|
||||
// check if timer exists if not -> set default (in case of the "init" ajax call failed
|
||||
let programStatusVisible = Init.timer ? Init.timer.PROGRAM_STATUS_VISIBLE : 5000;
|
||||
|
||||
@@ -1321,6 +1307,7 @@ define([
|
||||
};
|
||||
|
||||
return {
|
||||
loadPageStructure: loadPageStructure,
|
||||
initTabChangeObserver: initTabChangeObserver,
|
||||
renderMapContextMenus: renderMapContextMenus
|
||||
};
|
||||
|
||||
@@ -1,349 +1,467 @@
|
||||
// -----------------------------------
|
||||
// Slidebars
|
||||
// Version 0.10
|
||||
// http://plugins.adchsm.me/slidebars/
|
||||
//
|
||||
// Written by Adam Smith
|
||||
// http://www.adchsm.me/
|
||||
//
|
||||
// Released under MIT License
|
||||
// http://plugins.adchsm.me/slidebars/license.txt
|
||||
//
|
||||
// ---------------------
|
||||
// Index of Slidebars.js
|
||||
//
|
||||
// 001 - Default Settings
|
||||
// 002 - Feature Detection
|
||||
// 003 - User Agents
|
||||
// 004 - Setup
|
||||
// 005 - Animation
|
||||
// 006 - Operations
|
||||
// 007 - API
|
||||
// 008 - User Input
|
||||
/*!
|
||||
* Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars
|
||||
* Version: 2.0.2
|
||||
* Url: http://www.adchsm.com/slidebars/
|
||||
* Author: Adam Charles Smith
|
||||
* Author url: http://www.adchsm.com/
|
||||
* License: MIT
|
||||
* License url: http://www.adchsm.com/slidebars/license/
|
||||
*/
|
||||
|
||||
;(function($) {
|
||||
var slidebars = function () {
|
||||
|
||||
$.slidebars = function(options) {
|
||||
/**
|
||||
* Setup
|
||||
*/
|
||||
|
||||
// ----------------------
|
||||
// 001 - Default Settings
|
||||
// Cache all canvas elements
|
||||
var canvas = $( '[canvas]' ),
|
||||
|
||||
var settings = $.extend({
|
||||
siteClose: true, // true or false - Enable closing of Slidebars by clicking on #sb-site.
|
||||
scrollLock: false, // true or false - Prevent scrolling of site when a Slidebar is open.
|
||||
disableOver: false, // integer or false - Hide Slidebars over a specific width.
|
||||
hideControlClasses: false // true or false - Hide controls at same width as disableOver.
|
||||
}, options);
|
||||
// Object of Slidebars
|
||||
offCanvas = {},
|
||||
|
||||
// -----------------------
|
||||
// 002 - Feature Detection
|
||||
// Variables, permitted sides and styles
|
||||
init = false,
|
||||
registered = false,
|
||||
sides = [ 'top', 'right', 'bottom', 'left' ],
|
||||
styles = [ 'reveal', 'push', 'overlay', 'shift' ],
|
||||
|
||||
var test = document.createElement('div').style, // Create element to test on.
|
||||
supportTransition = false, // Variable for testing transitions.
|
||||
supportTransform = false; // variable for testing transforms.
|
||||
/**
|
||||
* Get Animation Properties
|
||||
*/
|
||||
|
||||
// Test for CSS Transitions
|
||||
if (test.MozTransition === '' || test.WebkitTransition === '' || test.OTransition === '' || test.transition === '') supportTransition = true;
|
||||
getAnimationProperties = function ( id ) {
|
||||
// Variables
|
||||
var elements = $(),
|
||||
amount = '0px, 0px',
|
||||
duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000;
|
||||
|
||||
// Test for CSS Transforms
|
||||
if (test.MozTransform === '' || test.WebkitTransform === '' || test.OTransform === '' || test.transform === '') supportTransform = true;
|
||||
|
||||
// -----------------
|
||||
// 003 - User Agents
|
||||
|
||||
var ua = navigator.userAgent, // Get user agent string.
|
||||
android = false, // Variable for storing android version.
|
||||
iOS = false; // Variable for storing iOS version.
|
||||
|
||||
if (/Android/.test(ua)) { // Detect Android in user agent string.
|
||||
android = ua.substr(ua.indexOf('Android')+8, 3); // Set version of Android.
|
||||
} else if (/(iPhone|iPod|iPad)/.test(ua)) { // Detect iOS in user agent string.
|
||||
iOS = ua.substr(ua.indexOf('OS ')+3, 3).replace('_', '.'); // Set version of iOS.
|
||||
}
|
||||
|
||||
if (android && android < 3 || iOS && iOS < 5) $('html').addClass('sb-static'); // Add helper class for older versions of Android & iOS.
|
||||
|
||||
// -----------
|
||||
// 004 - Setup
|
||||
|
||||
// Site container
|
||||
var $site = $('#sb-site, .sb-site-container'); // Cache the selector.
|
||||
|
||||
// Left Slidebar
|
||||
if ($('.sb-left').length) { // Check if the left Slidebar exists.
|
||||
var $left = $('.sb-left'), // Cache the selector.
|
||||
leftActive = false; // Used to check whether the left Slidebar is open or closed.
|
||||
}
|
||||
|
||||
// Right Slidebar
|
||||
if ($('.sb-right').length) { // Check if the right Slidebar exists.
|
||||
var $right = $('.sb-right'), // Cache the selector.
|
||||
rightActive = false; // Used to check whether the right Slidebar is open or closed.
|
||||
}
|
||||
|
||||
var init = false, // Initialisation variable.
|
||||
windowWidth = $(window).width(), // Get width of window.
|
||||
$controls = $('.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close'), // Cache the control classes.
|
||||
$slide = $('.sb-slide'); // Cache users elements to animate.
|
||||
|
||||
// Initailise Slidebars
|
||||
function initialise() {
|
||||
if (!settings.disableOver || (typeof settings.disableOver === 'number' && settings.disableOver >= windowWidth)) { // False or larger than window size.
|
||||
init = true; // true enabled Slidebars to open.
|
||||
$('html').addClass('sb-init'); // Add helper class.
|
||||
if (settings.hideControlClasses) $controls.removeClass('sb-hide'); // Remove class just incase Slidebars was originally disabled.
|
||||
css(); // Set required inline styles.
|
||||
} else if (typeof settings.disableOver === 'number' && settings.disableOver < windowWidth) { // Less than window size.
|
||||
init = false; // false stop Slidebars from opening.
|
||||
$('html').removeClass('sb-init'); // Remove helper class.
|
||||
if (settings.hideControlClasses) $controls.addClass('sb-hide'); // Hide controls
|
||||
$site.css('minHeight', ''); // Remove minimum height.
|
||||
if (leftActive || rightActive) close(); // Close Slidebars if open.
|
||||
// Elements to animate
|
||||
if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'shift' ) {
|
||||
elements = elements.add( canvas );
|
||||
}
|
||||
}
|
||||
initialise();
|
||||
|
||||
// Inline CSS
|
||||
function css() {
|
||||
// Set minimum height.
|
||||
$site.css('minHeight', ''); // Reset minimum height.
|
||||
$site.css('minHeight', $('html').height() + 'px'); // Set minimum height of the site to the minimum height of the html.
|
||||
|
||||
// Custom Slidebar widths.
|
||||
if ($left && $left.hasClass('sb-width-custom')) $left.css('width', $left.attr('data-sb-width')); // Set user custom width.
|
||||
if ($right && $right.hasClass('sb-width-custom')) $right.css('width', $right.attr('data-sb-width')); // Set user custom width.
|
||||
|
||||
// Set off-canvas margins for Slidebars with push and overlay animations.
|
||||
if ($left && ($left.hasClass('sb-style-push') || $left.hasClass('sb-style-overlay'))) $left.css('marginLeft', '-' + $left.css('width'));
|
||||
if ($right && ($right.hasClass('sb-style-push') || $right.hasClass('sb-style-overlay'))) $right.css('marginRight', '-' + $right.css('width'));
|
||||
|
||||
// Site scroll locking.
|
||||
if (settings.scrollLock) $('html').addClass('sb-scroll-lock');
|
||||
}
|
||||
|
||||
// Resize Functions
|
||||
$(window).resize(function() {
|
||||
var resizedWindowWidth = $(window).width(); // Get resized window width.
|
||||
if (windowWidth !== resizedWindowWidth) { // Slidebars is running and window was actually resized.
|
||||
windowWidth = resizedWindowWidth; // Set the new window width.
|
||||
initialise(); // Call initalise to see if Slidebars should still be running.
|
||||
if (leftActive) open('left'); // If left Slidebar is open, calling open will ensure it is the correct size.
|
||||
if (rightActive) open('right'); // If right Slidebar is open, calling open will ensure it is the correct size.
|
||||
|
||||
if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
|
||||
elements = elements.add( offCanvas[ id ].element );
|
||||
}
|
||||
});
|
||||
// I may include a height check along side a width check here in future.
|
||||
|
||||
// ---------------
|
||||
// 005 - Animation
|
||||
// Amount to animate
|
||||
if ( offCanvas[ id ].active ) {
|
||||
if ( offCanvas[ id ].side === 'top' ) {
|
||||
amount = '0px, ' + offCanvas[ id ].element.css( 'height' );
|
||||
} else if ( offCanvas[ id ].side === 'right' ) {
|
||||
amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px';
|
||||
} else if ( offCanvas[ id ].side === 'bottom' ) {
|
||||
amount = '0px, -' + offCanvas[ id ].element.css( 'height' );
|
||||
} else if ( offCanvas[ id ].side === 'left' ) {
|
||||
amount = offCanvas[ id ].element.css( 'width' ) + ', 0px';
|
||||
}
|
||||
}
|
||||
|
||||
var animation; // Animation type.
|
||||
// Return animation properties
|
||||
return { 'elements': elements, 'amount': amount, 'duration': duration };
|
||||
},
|
||||
|
||||
// Set animation type.
|
||||
if (supportTransition && supportTransform) { // Browser supports css transitions and transforms.
|
||||
animation = 'translate'; // Translate for browsers that support it.
|
||||
if (android && android < 4.4) animation = 'side'; // Android supports both, but can't translate any fixed positions, so use left instead.
|
||||
} else {
|
||||
animation = 'jQuery'; // Browsers that don't support css transitions and transitions.
|
||||
}
|
||||
/**
|
||||
* Slidebars Registration
|
||||
*/
|
||||
|
||||
// Animate mixin.
|
||||
function animate(object, amount, side) {
|
||||
// Choose selectors depending on animation style.
|
||||
var selector;
|
||||
|
||||
if (object.hasClass('sb-style-push')) {
|
||||
selector = $site.add(object).add($slide); // Push - Animate site, Slidebar and user elements.
|
||||
} else if (object.hasClass('sb-style-overlay')) {
|
||||
selector = object; // Overlay - Animate Slidebar only.
|
||||
registerSlidebar = function ( id, side, style, element ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
throw "Error registering Slidebar, a Slidebar with id '" + id + "' already exists.";
|
||||
}
|
||||
|
||||
// Register the Slidebar
|
||||
offCanvas[ id ] = {
|
||||
'id': id,
|
||||
'side': side,
|
||||
'style': style,
|
||||
'element': element,
|
||||
'active': false
|
||||
};
|
||||
},
|
||||
|
||||
isRegisteredSlidebar = function ( id ) {
|
||||
// Return if Slidebar is registered
|
||||
if ( offCanvas.hasOwnProperty( id ) ) {
|
||||
return true;
|
||||
} else {
|
||||
selector = $site.add($slide); // Reveal - Animate site and user elements.
|
||||
}
|
||||
|
||||
// Apply animation
|
||||
if (animation === 'translate') {
|
||||
selector.css('transform', 'translate(' + amount + ')'); // Apply the animation.
|
||||
|
||||
} else if (animation === 'side') {
|
||||
if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for side animations.
|
||||
if (amount !== '0px') selector.css(side, '0px'); // Add a 0 value so css transition works.
|
||||
setTimeout(function() { // Set a timeout to allow the 0 value to be applied above.
|
||||
selector.css(side, amount); // Apply the animation.
|
||||
}, 1);
|
||||
|
||||
} else if (animation === 'jQuery') {
|
||||
if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for jQuery animations.
|
||||
var properties = {};
|
||||
properties[side] = amount;
|
||||
selector.stop().animate(properties, 400); // Stop any current jQuery animation before starting another.
|
||||
}
|
||||
|
||||
// If closed, remove the inline styling on completion of the animation.
|
||||
setTimeout(function() {
|
||||
if (amount === '0px') {
|
||||
selector.removeAttr('style');
|
||||
css();
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// ----------------
|
||||
// 006 - Operations
|
||||
|
||||
// Open a Slidebar
|
||||
function open(side) {
|
||||
// Check to see if opposite Slidebar is open.
|
||||
if (side === 'left' && $left && rightActive || side === 'right' && $right && leftActive) { // It's open, close it, then continue.
|
||||
close();
|
||||
setTimeout(proceed, 400);
|
||||
} else { // Its not open, continue.
|
||||
proceed();
|
||||
}
|
||||
|
||||
// Open
|
||||
function proceed() {
|
||||
if (init && side === 'left' && $left) { // Slidebars is initiated, left is in use and called to open.
|
||||
$('html').addClass('sb-active sb-active-left'); // Add active classes.
|
||||
$left.addClass('sb-active');
|
||||
animate($left, $left.css('width'), 'left'); // Animation
|
||||
setTimeout(function() { leftActive = true; }, 400); // Set active variables.
|
||||
} else if (init && side === 'right' && $right) { // Slidebars is initiated, right is in use and called to open.
|
||||
$('html').addClass('sb-active sb-active-right'); // Add active classes.
|
||||
$right.addClass('sb-active');
|
||||
animate($right, '-' + $right.css('width'), 'right'); // Animation
|
||||
setTimeout(function() { rightActive = true; }, 400); // Set active variables.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close either Slidebar
|
||||
function close(link) {
|
||||
if (leftActive || rightActive) { // If a Slidebar is open.
|
||||
if (leftActive) {
|
||||
animate($left, '0px', 'left'); // Animation
|
||||
leftActive = false;
|
||||
}
|
||||
if (rightActive) {
|
||||
animate($right, '0px', 'right'); // Animation
|
||||
rightActive = false;
|
||||
}
|
||||
|
||||
setTimeout(function() { // Wait for closing animation to finish.
|
||||
$('html').removeClass('sb-active sb-active-left sb-active-right'); // Remove active classes.
|
||||
if ($left) $left.removeClass('sb-active');
|
||||
if ($right) $right.removeClass('sb-active');
|
||||
if (typeof link !== 'undefined') window.location = link; // If a link has been passed to the function, go to it.
|
||||
}, 400);
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle either Slidebar
|
||||
function toggle(side) {
|
||||
if (side === 'left' && $left) { // If left Slidebar is called and in use.
|
||||
if (!leftActive) {
|
||||
open('left'); // Slidebar is closed, open it.
|
||||
} else {
|
||||
close(); // Slidebar is open, close it.
|
||||
}
|
||||
}
|
||||
if (side === 'right' && $right) { // If right Slidebar is called and in use.
|
||||
if (!rightActive) {
|
||||
open('right'); // Slidebar is closed, open it.
|
||||
} else {
|
||||
close(); // Slidebar is open, close it.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------
|
||||
// 007 - API
|
||||
|
||||
this.slidebars = {
|
||||
open: open, // Maps user variable name to the open method.
|
||||
close: close, // Maps user variable name to the close method.
|
||||
toggle: toggle, // Maps user variable name to the toggle method.
|
||||
init: function() { // Returns true or false whether Slidebars are running or not.
|
||||
return init; // Returns true or false whether Slidebars are running.
|
||||
},
|
||||
active: function(side) { // Returns true or false whether Slidebar is open or closed.
|
||||
if (side === 'left' && $left) return leftActive;
|
||||
if (side === 'right' && $right) return rightActive;
|
||||
},
|
||||
destroy: function(side) { // Removes the Slidebar from the DOM.
|
||||
if (side === 'left' && $left) {
|
||||
if (leftActive) close(); // Close if its open.
|
||||
setTimeout(function() {
|
||||
$left.remove(); // Remove it.
|
||||
$left = false; // Set variable to false so it cannot be opened again.
|
||||
}, 400);
|
||||
}
|
||||
if (side === 'right' && $right) {
|
||||
if (rightActive) close(); // Close if its open.
|
||||
setTimeout(function() {
|
||||
$right.remove(); // Remove it.
|
||||
$right = false; // Set variable to false so it cannot be opened again.
|
||||
}, 400);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// ----------------
|
||||
// 008 - User Input
|
||||
|
||||
function eventHandler(event, selector) {
|
||||
event.stopPropagation(); // Stop event bubbling.
|
||||
event.preventDefault(); // Prevent default behaviour
|
||||
if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
|
||||
/**
|
||||
* Initialization
|
||||
*/
|
||||
|
||||
this.init = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( init ) {
|
||||
throw "Slidebars has already been initialized.";
|
||||
}
|
||||
|
||||
// Toggle left Slidebar
|
||||
$('.sb-toggle-left').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
toggle('left'); // Toggle the left Slidbar.
|
||||
});
|
||||
|
||||
// Toggle right Slidebar
|
||||
$('.sb-toggle-right').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
toggle('right'); // Toggle the right Slidbar.
|
||||
});
|
||||
|
||||
// Open left Slidebar
|
||||
$('.sb-open-left').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
open('left'); // Open the left Slidebar.
|
||||
});
|
||||
|
||||
// Open right Slidebar
|
||||
$('.sb-open-right').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
open('right'); // Open the right Slidebar.
|
||||
});
|
||||
|
||||
// Close a Slidebar
|
||||
$('.sb-close').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
var link;
|
||||
|
||||
// Close Slidebar via link
|
||||
if ( $(this).parents('.sb-slidebar') ) {
|
||||
if ( $(this).is('a') ) {
|
||||
link = $(this).attr('href');
|
||||
} else if ( $(this).children('a') ) {
|
||||
link = $(this).children('a').attr('href');
|
||||
|
||||
// Loop through and register Slidebars
|
||||
if ( ! registered ) {
|
||||
$( '[off-canvas]' ).each( function () {
|
||||
// Get Slidebar parameters
|
||||
var parameters = $( this ).attr( 'off-canvas' ).split( ' ', 3 );
|
||||
|
||||
// Make sure a valid id, side and style are specified
|
||||
if ( ! parameters || ! parameters[ 0 ] || sides.indexOf( parameters[ 1 ] ) === -1 || styles.indexOf( parameters[ 2 ] ) === -1 ) {
|
||||
throw "Error registering Slidebar, please specifiy a valid id, side and style'.";
|
||||
}
|
||||
|
||||
// Register Slidebar
|
||||
registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) );
|
||||
} );
|
||||
|
||||
// Set registered variable
|
||||
registered = true;
|
||||
}
|
||||
|
||||
// Set initialized variable
|
||||
init = true;
|
||||
|
||||
// Set CSS
|
||||
this.css();
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'init' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
this.exit = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Exit
|
||||
var exit = function () {
|
||||
// Set init variable
|
||||
init = false;
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'exit' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// Call exit, close open Slidebar if active
|
||||
if ( this.getActiveSlidebar() ) {
|
||||
this.close( exit );
|
||||
} else {
|
||||
exit();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* CSS
|
||||
*/
|
||||
|
||||
this.css = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Loop through Slidebars to set negative margins
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Calculate offset
|
||||
var offset;
|
||||
|
||||
if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) {
|
||||
offset = offCanvas[ id ].element.css( 'height' );
|
||||
} else {
|
||||
offset = offCanvas[ id ].element.css( 'width' );
|
||||
}
|
||||
|
||||
// Apply negative margins
|
||||
if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
|
||||
offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset );
|
||||
}
|
||||
}
|
||||
|
||||
close(link); // Close Slidebar and pass link.
|
||||
});
|
||||
|
||||
// Close Slidebar via site
|
||||
$site.on('touchend click', function(event) {
|
||||
if (settings.siteClose && (leftActive || rightActive)) { // If settings permit closing by site and left or right Slidebar is open.
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
close(); // Close it.
|
||||
}
|
||||
});
|
||||
|
||||
}; // End Slidebars function.
|
||||
}
|
||||
|
||||
}) (jQuery);
|
||||
// Reposition open Slidebars
|
||||
if ( this.getActiveSlidebar() ) {
|
||||
this.open( this.getActiveSlidebar() );
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'css' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Controls
|
||||
*/
|
||||
|
||||
this.open = function ( id, callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed or if Slidebar isn't registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error opening Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Open
|
||||
var open = function () {
|
||||
// Set active state to true
|
||||
offCanvas[ id ].active = true;
|
||||
|
||||
// Display the Slidebar
|
||||
offCanvas[ id ].element.css( 'display', 'block' );
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'opening', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Get animation properties
|
||||
var animationProperties = getAnimationProperties( id );
|
||||
|
||||
// Apply css
|
||||
animationProperties.elements.css( {
|
||||
'transition-duration': animationProperties.duration + 'ms',
|
||||
'transform': 'translate(' + animationProperties.amount + ')'
|
||||
} );
|
||||
|
||||
// Transition completed
|
||||
setTimeout( function () {
|
||||
// Trigger event
|
||||
$( events ).trigger( 'opened', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
}, animationProperties.duration );
|
||||
};
|
||||
|
||||
// Call open, close open Slidebar if active
|
||||
if ( this.getActiveSlidebar() && this.getActiveSlidebar() !== id ) {
|
||||
this.close( open );
|
||||
} else {
|
||||
open();
|
||||
}
|
||||
};
|
||||
|
||||
this.close = function ( id, callback ) {
|
||||
// Shift callback arguments
|
||||
if ( typeof id === 'function' ) {
|
||||
callback = id;
|
||||
id = null;
|
||||
}
|
||||
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id was passed but isn't a registered Slidebar
|
||||
if ( id && ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// If no id was passed, get the active Slidebar
|
||||
if ( ! id ) {
|
||||
id = this.getActiveSlidebar();
|
||||
}
|
||||
|
||||
// Close a Slidebar
|
||||
if ( id && offCanvas[ id ].active ) {
|
||||
// Set active state to false
|
||||
offCanvas[ id ].active = false;
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'closing', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Get animation properties
|
||||
var animationProperties = getAnimationProperties( id );
|
||||
|
||||
// Apply css
|
||||
animationProperties.elements.css( 'transform', '' );
|
||||
|
||||
// Transition completetion
|
||||
setTimeout( function () {
|
||||
// Remove transition duration
|
||||
animationProperties.elements.css( 'transition-duration', '' );
|
||||
|
||||
// Hide the Slidebar
|
||||
offCanvas[ id ].element.css( 'display', '' );
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'closed', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
}, animationProperties.duration );
|
||||
}
|
||||
};
|
||||
|
||||
this.toggle = function ( id, callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed or if Slidebar isn't registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error toggling Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Check Slidebar state
|
||||
if ( offCanvas[ id ].active ) {
|
||||
// It's open, close it
|
||||
this.close( id, function () {
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
} );
|
||||
} else {
|
||||
// It's closed, open it
|
||||
this.open( id, function () {
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Active States
|
||||
*/
|
||||
|
||||
this.isActive = function ( id ) {
|
||||
// Return init state
|
||||
return init;
|
||||
};
|
||||
|
||||
this.isActiveSlidebar = function ( id ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed
|
||||
if ( ! id ) {
|
||||
throw "You must provide a Slidebar id.";
|
||||
}
|
||||
|
||||
// Check if Slidebar is registered
|
||||
if ( ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Return the active state
|
||||
return offCanvas[ id ].active;
|
||||
};
|
||||
|
||||
this.getActiveSlidebar = function () {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Variable to return
|
||||
var active = false;
|
||||
|
||||
// Loop through Slidebars
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Check if it's active
|
||||
if ( offCanvas[ id ].active ) {
|
||||
// Set the active id
|
||||
active = offCanvas[ id ].id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Return
|
||||
return active;
|
||||
};
|
||||
|
||||
this.getSlidebars = function () {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Create an array for the Slidebars
|
||||
var slidebarsArray = [];
|
||||
|
||||
// Loop through Slidebars
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Add Slidebar id to array
|
||||
slidebarsArray.push( offCanvas[ id ].id );
|
||||
}
|
||||
}
|
||||
|
||||
// Return
|
||||
return slidebarsArray;
|
||||
};
|
||||
|
||||
this.getSlidebar = function ( id ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed
|
||||
if ( ! id ) {
|
||||
throw "You must pass a Slidebar id.";
|
||||
}
|
||||
|
||||
// Check if Slidebar is registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Return the Slidebar's properties
|
||||
return offCanvas[ id ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Events
|
||||
*/
|
||||
|
||||
this.events = {};
|
||||
var events = this.events;
|
||||
|
||||
/**
|
||||
* Resizes
|
||||
*/
|
||||
|
||||
$( window ).on( 'resize', this.css.bind( this ) );
|
||||
};
|
||||
|
||||
// AMD / RequireJS
|
||||
if (typeof define !== 'undefined' && define.amd) {
|
||||
define([], function () {
|
||||
return slidebars;
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@ requirejs.config({
|
||||
localForage: 'lib/localforage.min', // v1.7.3 localStorage library - https://localforage.github.io/localForage/
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin https://www.adchsm.com/slidebars/
|
||||
slidebars: 'lib/slidebars', // v2.0.2 Slidebars - side menu plugin https://www.adchsm.com/slidebars/
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
farahey: 'lib/farahey-0.5', // v0.5 jsPlumb "magnetizing" extension - https://github.com/jsplumb/farahey
|
||||
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr
|
||||
|
||||
@@ -39,7 +39,7 @@ define([
|
||||
Util.initDefaultEditableConfig();
|
||||
|
||||
// load page
|
||||
$('body').loadPageStructure().setGlobalShortcuts();
|
||||
Page.loadPageStructure().setGlobalShortcuts();
|
||||
|
||||
// show app information in browser console
|
||||
Util.showVersionInfo();
|
||||
|
||||
@@ -10,6 +10,7 @@ define([
|
||||
'mustache',
|
||||
'app/map/util',
|
||||
'app/map/contextmenu',
|
||||
'slidebars',
|
||||
'text!img/logo.svg!strip',
|
||||
'text!templates/modules/header.html',
|
||||
'text!templates/modules/footer.html',
|
||||
@@ -25,20 +26,16 @@ define([
|
||||
'dialog/delete_account',
|
||||
'dialog/credit',
|
||||
'xEditable',
|
||||
'slidebars',
|
||||
'app/module_map'
|
||||
], ($, Init, Util, Logging, Mustache, MapUtil, MapContextMenu, TplLogo, TplHead, TplFooter) => {
|
||||
], ($, Init, Util, Logging, Mustache, MapUtil, MapContextMenu, SlideBars, TplLogo, TplHead, TplFooter) => {
|
||||
|
||||
'use strict';
|
||||
|
||||
let config = {
|
||||
// page structure slidebars-menu classes
|
||||
pageId: 'sb-site',
|
||||
pageSlidebarClass: 'sb-slidebar',
|
||||
pageSlidebarLeftClass: 'sb-left', // class for left menu
|
||||
pageSlidebarRightClass: 'sb-right', // class for right menu
|
||||
pageSlideLeftWidth: '150px', // slide distance left menu
|
||||
pageSlideRightWidth: '150px', // slide distance right menu
|
||||
// page structure and slide menus
|
||||
pageMenuClass: 'pf-menu',
|
||||
pageMenuLeftClass: 'pf-menu-left', // class for left menu
|
||||
pageMenuRightClass: 'pf-menu-right', // class for right menu
|
||||
fullScreenClass: 'pf-fullscreen', // class for the "full screen" element
|
||||
|
||||
// page structure
|
||||
@@ -75,56 +72,46 @@ define([
|
||||
let programStatusCounter = 0; // current count down in s until next status change is possible
|
||||
let programStatusInterval = false; // interval timer until next status change is possible
|
||||
|
||||
|
||||
/**
|
||||
* load main page structure elements and navigation container into body
|
||||
* @returns {*|jQuery|HTMLElement}
|
||||
* @returns {*|w.fn.init|jQuery|HTMLElement}
|
||||
*/
|
||||
$.fn.loadPageStructure = function(){
|
||||
return this.each((i, body) => {
|
||||
body = $(body);
|
||||
let loadPageStructure = () => {
|
||||
let body = $('body');
|
||||
|
||||
// menu left
|
||||
body.prepend(
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
class: config.pageClass
|
||||
}).attr('canvas', 'container').append(
|
||||
Util.getMapModule(),
|
||||
$('<div>', {
|
||||
class: [config.pageSlidebarClass, config.pageSlidebarLeftClass, 'sb-style-push', 'sb-width-custom'].join(' ')
|
||||
}).attr('data-sb-width', config.pageSlideLeftWidth)
|
||||
);
|
||||
id: config.dynamicElementWrapperId
|
||||
})
|
||||
),
|
||||
$('<div>', {
|
||||
class: [config.pageMenuClass, config.pageMenuLeftClass].join(' ')
|
||||
}).attr('off-canvas', [config.pageMenuLeftClass, 'left', 'push'].join(' ')),
|
||||
$('<div>', {
|
||||
class: [config.pageMenuClass, config.pageMenuRightClass].join(' ')
|
||||
}).attr('off-canvas', [config.pageMenuRightClass, 'right', 'push'].join(' '))
|
||||
);
|
||||
|
||||
// menu right
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
class: [config.pageSlidebarClass, config.pageSlidebarRightClass, 'sb-style-push', 'sb-width-custom'].join(' ')
|
||||
}).attr('data-sb-width', config.pageSlideRightWidth)
|
||||
);
|
||||
// load footer
|
||||
$('.' + config.pageClass).loadHeader().loadFooter();
|
||||
|
||||
// main page
|
||||
body.prepend(
|
||||
$('<div>', {
|
||||
id: config.pageId,
|
||||
class: config.pageClass
|
||||
}).append(
|
||||
Util.getMapModule(),
|
||||
$('<div>', {
|
||||
id: config.dynamicElementWrapperId
|
||||
})
|
||||
)
|
||||
);
|
||||
// load left menu
|
||||
$('.' + config.pageMenuLeftClass).loadLeftMenu();
|
||||
|
||||
// load footer
|
||||
$('.' + config.pageClass).loadHeader().loadFooter();
|
||||
// load right menu
|
||||
$('.' + config.pageMenuRightClass).loadRightMenu();
|
||||
|
||||
// load left menu
|
||||
$('.' + config.pageSlidebarLeftClass).loadLeftMenu();
|
||||
// set page observer for global events
|
||||
setPageObserver();
|
||||
|
||||
// load right menu
|
||||
$('.' + config.pageSlidebarRightClass).loadRightMenu();
|
||||
|
||||
// set page observer for global events
|
||||
setPageObserver();
|
||||
});
|
||||
return body;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* set global shortcuts to <body> element
|
||||
*/
|
||||
@@ -203,67 +190,66 @@ define([
|
||||
}).append(
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
href: '/'
|
||||
}).html(' Home').prepend(
|
||||
href: '/',
|
||||
html: ' Home'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-home fa-fw'
|
||||
})
|
||||
)
|
||||
).append(
|
||||
getMenuHeadline('Information')
|
||||
).append(
|
||||
),
|
||||
getMenuHeadline('Information'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Statistics').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Statistics'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-chart-line fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowStatsDialog');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Effect info').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Effect info'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-crosshairs fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowSystemEffectInfo');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Jump info').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Jump info'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-space-shuttle fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowJumpInfo');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Settings')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Settings'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Account').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Account'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-user fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowSettingsDialog');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item hide', // trigger by js
|
||||
id: Util.config.menuButtonFullScreenId
|
||||
}).html(' Full screen').prepend(
|
||||
id: Util.config.menuButtonFullScreenId,
|
||||
html: ' Full screen'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-expand-arrows-alt fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
let fullScreenElement = $('body');
|
||||
requirejs(['jquery', 'fullScreen'], function($){
|
||||
requirejs(['jquery', 'fullScreen'], $ => {
|
||||
|
||||
if($.fullscreen.isFullScreen()){
|
||||
$.fullscreen.exit();
|
||||
@@ -271,47 +257,45 @@ define([
|
||||
fullScreenElement.fullscreen({overflow: 'scroll', toggleClass: config.fullScreenClass});
|
||||
}
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Notification test').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Notification test'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-volume-up fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('NotificationTest');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Danger zone')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Danger zone'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-danger'
|
||||
}).html(' Delete account').prepend(
|
||||
class: 'list-group-item list-group-item-danger',
|
||||
html: ' Delete account'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-user-times fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('DeleteAccount');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-warning'
|
||||
}).html(' Logout').prepend(
|
||||
class: 'list-group-item list-group-item-warning',
|
||||
html: ' Logout'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-sign-in-alt fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Logout', {clearCookies: 1});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<div>', {
|
||||
class: config.menuClockClass
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
requirejs(['fullScreen'], function(){
|
||||
requirejs(['fullScreen'], () => {
|
||||
if($.fullscreen.isNativelySupported() === true){
|
||||
$('#' + Util.config.menuButtonFullScreenId).removeClass('hide');
|
||||
}
|
||||
@@ -327,31 +311,31 @@ define([
|
||||
class: 'list-group'
|
||||
}).append(
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Information').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Information'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-street-view fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowMapInfo', {tab: 'information'});
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Configuration')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Configuration'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item'
|
||||
}).html(' Settings').prepend(
|
||||
class: 'list-group-item',
|
||||
html: ' Settings'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-cogs fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowMapSettings', {tab: 'settings'});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonGridId
|
||||
}).html(' Grid snapping').prepend(
|
||||
id: Util.config.menuButtonGridId,
|
||||
html:' Grid snapping'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-th fa-fw'
|
||||
})
|
||||
@@ -360,12 +344,12 @@ define([
|
||||
option: 'mapSnapToGrid',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonMagnetizerId
|
||||
}).html(' Magnetizing').prepend(
|
||||
id: Util.config.menuButtonMagnetizerId,
|
||||
html: ' Magnetizing'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-magnet fa-fw'
|
||||
})
|
||||
@@ -374,12 +358,12 @@ define([
|
||||
option: 'mapMagnetizer',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonEndpointId
|
||||
}).html(' Signatures').prepend(
|
||||
id: Util.config.menuButtonEndpointId,
|
||||
html: ' Signatures'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-link fa-fw'
|
||||
})
|
||||
@@ -388,12 +372,12 @@ define([
|
||||
option: 'mapEndpoint',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item',
|
||||
id: Util.config.menuButtonCompactId
|
||||
}).html(' Compact').prepend(
|
||||
id: Util.config.menuButtonCompactId,
|
||||
html: ' Compact'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-compress fa-fw'
|
||||
})
|
||||
@@ -407,46 +391,44 @@ define([
|
||||
option: 'mapCompact',
|
||||
toggle: true
|
||||
});
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Help')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Help'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Manual').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Manual'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-book-reader fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Manual');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Shortcuts').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Shortcuts'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-keyboard fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('Shortcuts');
|
||||
})
|
||||
).append(
|
||||
}),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-info'
|
||||
}).html(' Task-Manager').prepend(
|
||||
class: 'list-group-item list-group-item-info',
|
||||
html: ' Task-Manager'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-tasks fa-fw'
|
||||
})
|
||||
).on('click', function(){
|
||||
$(document).triggerMenuEvent('ShowTaskManager');
|
||||
})
|
||||
).append(
|
||||
getMenuHeadline('Danger zone')
|
||||
).append(
|
||||
}),
|
||||
getMenuHeadline('Danger zone'),
|
||||
$('<a>', {
|
||||
class: 'list-group-item list-group-item-danger',
|
||||
id: Util.config.menuButtonMapDeleteId
|
||||
}).html(' Delete map').prepend(
|
||||
id: Util.config.menuButtonMapDeleteId,
|
||||
html: ' Delete map'
|
||||
}).prepend(
|
||||
$('<i>',{
|
||||
class: 'fas fa-trash fa-fw'
|
||||
})
|
||||
@@ -494,19 +476,24 @@ define([
|
||||
// init header ================================================================================================
|
||||
|
||||
// init slide menus
|
||||
let slideMenu = new $.slidebars({
|
||||
scrollLock: false
|
||||
});
|
||||
let slideBarsController = new SlideBars();
|
||||
slideBarsController.init();
|
||||
|
||||
// main menus
|
||||
$('.' + config.headMenuClass).on('click', function(e){
|
||||
e.preventDefault();
|
||||
slideMenu.slidebars.toggle('left');
|
||||
$('.' + config.pageClass).on('click.menuClose', function(e){
|
||||
slideBarsController.close();
|
||||
});
|
||||
|
||||
$('.' + config.headMapClass).on('click', function(e){
|
||||
$('.' + config.headMenuClass).on('click.menuOpen', function(e){
|
||||
e.preventDefault();
|
||||
slideMenu.slidebars.toggle('right');
|
||||
e.stopPropagation();
|
||||
slideBarsController.toggle(config.pageMenuLeftClass);
|
||||
});
|
||||
|
||||
$('.' + config.headMapClass).on('click.menuOpen', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
slideBarsController.toggle(config.pageMenuRightClass);
|
||||
});
|
||||
|
||||
// active pilots
|
||||
@@ -524,10 +511,9 @@ define([
|
||||
$(document).triggerMenuEvent('ShowTaskManager');
|
||||
});
|
||||
|
||||
// close menu
|
||||
// close all menus
|
||||
$(document).on('pf:closeMenu', function(e){
|
||||
// close all menus
|
||||
slideMenu.slidebars.close();
|
||||
slideBarsController.close();
|
||||
});
|
||||
|
||||
// tracking toggle
|
||||
@@ -601,7 +587,7 @@ define([
|
||||
/**
|
||||
* catch all global document events
|
||||
*/
|
||||
let setPageObserver = function(){
|
||||
let setPageObserver = () => {
|
||||
let documentElement = $(document);
|
||||
let bodyElement = $(document.body);
|
||||
|
||||
@@ -1233,9 +1219,9 @@ define([
|
||||
programStatusInterval = false;
|
||||
}
|
||||
|
||||
if( statusElement.data('status') !== status ){
|
||||
if(statusElement.data('status') !== status){
|
||||
// status has changed
|
||||
if(! programStatusInterval){
|
||||
if(!programStatusInterval){
|
||||
// check if timer exists if not -> set default (in case of the "init" ajax call failed
|
||||
let programStatusVisible = Init.timer ? Init.timer.PROGRAM_STATUS_VISIBLE : 5000;
|
||||
|
||||
@@ -1321,6 +1307,7 @@ define([
|
||||
};
|
||||
|
||||
return {
|
||||
loadPageStructure: loadPageStructure,
|
||||
initTabChangeObserver: initTabChangeObserver,
|
||||
renderMapContextMenus: renderMapContextMenus
|
||||
};
|
||||
|
||||
@@ -1,349 +1,467 @@
|
||||
// -----------------------------------
|
||||
// Slidebars
|
||||
// Version 0.10
|
||||
// http://plugins.adchsm.me/slidebars/
|
||||
//
|
||||
// Written by Adam Smith
|
||||
// http://www.adchsm.me/
|
||||
//
|
||||
// Released under MIT License
|
||||
// http://plugins.adchsm.me/slidebars/license.txt
|
||||
//
|
||||
// ---------------------
|
||||
// Index of Slidebars.js
|
||||
//
|
||||
// 001 - Default Settings
|
||||
// 002 - Feature Detection
|
||||
// 003 - User Agents
|
||||
// 004 - Setup
|
||||
// 005 - Animation
|
||||
// 006 - Operations
|
||||
// 007 - API
|
||||
// 008 - User Input
|
||||
/*!
|
||||
* Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars
|
||||
* Version: 2.0.2
|
||||
* Url: http://www.adchsm.com/slidebars/
|
||||
* Author: Adam Charles Smith
|
||||
* Author url: http://www.adchsm.com/
|
||||
* License: MIT
|
||||
* License url: http://www.adchsm.com/slidebars/license/
|
||||
*/
|
||||
|
||||
;(function($) {
|
||||
var slidebars = function () {
|
||||
|
||||
$.slidebars = function(options) {
|
||||
/**
|
||||
* Setup
|
||||
*/
|
||||
|
||||
// ----------------------
|
||||
// 001 - Default Settings
|
||||
// Cache all canvas elements
|
||||
var canvas = $( '[canvas]' ),
|
||||
|
||||
var settings = $.extend({
|
||||
siteClose: true, // true or false - Enable closing of Slidebars by clicking on #sb-site.
|
||||
scrollLock: false, // true or false - Prevent scrolling of site when a Slidebar is open.
|
||||
disableOver: false, // integer or false - Hide Slidebars over a specific width.
|
||||
hideControlClasses: false // true or false - Hide controls at same width as disableOver.
|
||||
}, options);
|
||||
// Object of Slidebars
|
||||
offCanvas = {},
|
||||
|
||||
// -----------------------
|
||||
// 002 - Feature Detection
|
||||
// Variables, permitted sides and styles
|
||||
init = false,
|
||||
registered = false,
|
||||
sides = [ 'top', 'right', 'bottom', 'left' ],
|
||||
styles = [ 'reveal', 'push', 'overlay', 'shift' ],
|
||||
|
||||
var test = document.createElement('div').style, // Create element to test on.
|
||||
supportTransition = false, // Variable for testing transitions.
|
||||
supportTransform = false; // variable for testing transforms.
|
||||
/**
|
||||
* Get Animation Properties
|
||||
*/
|
||||
|
||||
// Test for CSS Transitions
|
||||
if (test.MozTransition === '' || test.WebkitTransition === '' || test.OTransition === '' || test.transition === '') supportTransition = true;
|
||||
getAnimationProperties = function ( id ) {
|
||||
// Variables
|
||||
var elements = $(),
|
||||
amount = '0px, 0px',
|
||||
duration = parseFloat( offCanvas[ id ].element.css( 'transitionDuration' ), 10 ) * 1000;
|
||||
|
||||
// Test for CSS Transforms
|
||||
if (test.MozTransform === '' || test.WebkitTransform === '' || test.OTransform === '' || test.transform === '') supportTransform = true;
|
||||
|
||||
// -----------------
|
||||
// 003 - User Agents
|
||||
|
||||
var ua = navigator.userAgent, // Get user agent string.
|
||||
android = false, // Variable for storing android version.
|
||||
iOS = false; // Variable for storing iOS version.
|
||||
|
||||
if (/Android/.test(ua)) { // Detect Android in user agent string.
|
||||
android = ua.substr(ua.indexOf('Android')+8, 3); // Set version of Android.
|
||||
} else if (/(iPhone|iPod|iPad)/.test(ua)) { // Detect iOS in user agent string.
|
||||
iOS = ua.substr(ua.indexOf('OS ')+3, 3).replace('_', '.'); // Set version of iOS.
|
||||
}
|
||||
|
||||
if (android && android < 3 || iOS && iOS < 5) $('html').addClass('sb-static'); // Add helper class for older versions of Android & iOS.
|
||||
|
||||
// -----------
|
||||
// 004 - Setup
|
||||
|
||||
// Site container
|
||||
var $site = $('#sb-site, .sb-site-container'); // Cache the selector.
|
||||
|
||||
// Left Slidebar
|
||||
if ($('.sb-left').length) { // Check if the left Slidebar exists.
|
||||
var $left = $('.sb-left'), // Cache the selector.
|
||||
leftActive = false; // Used to check whether the left Slidebar is open or closed.
|
||||
}
|
||||
|
||||
// Right Slidebar
|
||||
if ($('.sb-right').length) { // Check if the right Slidebar exists.
|
||||
var $right = $('.sb-right'), // Cache the selector.
|
||||
rightActive = false; // Used to check whether the right Slidebar is open or closed.
|
||||
}
|
||||
|
||||
var init = false, // Initialisation variable.
|
||||
windowWidth = $(window).width(), // Get width of window.
|
||||
$controls = $('.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close'), // Cache the control classes.
|
||||
$slide = $('.sb-slide'); // Cache users elements to animate.
|
||||
|
||||
// Initailise Slidebars
|
||||
function initialise() {
|
||||
if (!settings.disableOver || (typeof settings.disableOver === 'number' && settings.disableOver >= windowWidth)) { // False or larger than window size.
|
||||
init = true; // true enabled Slidebars to open.
|
||||
$('html').addClass('sb-init'); // Add helper class.
|
||||
if (settings.hideControlClasses) $controls.removeClass('sb-hide'); // Remove class just incase Slidebars was originally disabled.
|
||||
css(); // Set required inline styles.
|
||||
} else if (typeof settings.disableOver === 'number' && settings.disableOver < windowWidth) { // Less than window size.
|
||||
init = false; // false stop Slidebars from opening.
|
||||
$('html').removeClass('sb-init'); // Remove helper class.
|
||||
if (settings.hideControlClasses) $controls.addClass('sb-hide'); // Hide controls
|
||||
$site.css('minHeight', ''); // Remove minimum height.
|
||||
if (leftActive || rightActive) close(); // Close Slidebars if open.
|
||||
// Elements to animate
|
||||
if ( offCanvas[ id ].style === 'reveal' || offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'shift' ) {
|
||||
elements = elements.add( canvas );
|
||||
}
|
||||
}
|
||||
initialise();
|
||||
|
||||
// Inline CSS
|
||||
function css() {
|
||||
// Set minimum height.
|
||||
$site.css('minHeight', ''); // Reset minimum height.
|
||||
$site.css('minHeight', $('html').height() + 'px'); // Set minimum height of the site to the minimum height of the html.
|
||||
|
||||
// Custom Slidebar widths.
|
||||
if ($left && $left.hasClass('sb-width-custom')) $left.css('width', $left.attr('data-sb-width')); // Set user custom width.
|
||||
if ($right && $right.hasClass('sb-width-custom')) $right.css('width', $right.attr('data-sb-width')); // Set user custom width.
|
||||
|
||||
// Set off-canvas margins for Slidebars with push and overlay animations.
|
||||
if ($left && ($left.hasClass('sb-style-push') || $left.hasClass('sb-style-overlay'))) $left.css('marginLeft', '-' + $left.css('width'));
|
||||
if ($right && ($right.hasClass('sb-style-push') || $right.hasClass('sb-style-overlay'))) $right.css('marginRight', '-' + $right.css('width'));
|
||||
|
||||
// Site scroll locking.
|
||||
if (settings.scrollLock) $('html').addClass('sb-scroll-lock');
|
||||
}
|
||||
|
||||
// Resize Functions
|
||||
$(window).resize(function() {
|
||||
var resizedWindowWidth = $(window).width(); // Get resized window width.
|
||||
if (windowWidth !== resizedWindowWidth) { // Slidebars is running and window was actually resized.
|
||||
windowWidth = resizedWindowWidth; // Set the new window width.
|
||||
initialise(); // Call initalise to see if Slidebars should still be running.
|
||||
if (leftActive) open('left'); // If left Slidebar is open, calling open will ensure it is the correct size.
|
||||
if (rightActive) open('right'); // If right Slidebar is open, calling open will ensure it is the correct size.
|
||||
|
||||
if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
|
||||
elements = elements.add( offCanvas[ id ].element );
|
||||
}
|
||||
});
|
||||
// I may include a height check along side a width check here in future.
|
||||
|
||||
// ---------------
|
||||
// 005 - Animation
|
||||
// Amount to animate
|
||||
if ( offCanvas[ id ].active ) {
|
||||
if ( offCanvas[ id ].side === 'top' ) {
|
||||
amount = '0px, ' + offCanvas[ id ].element.css( 'height' );
|
||||
} else if ( offCanvas[ id ].side === 'right' ) {
|
||||
amount = '-' + offCanvas[ id ].element.css( 'width' ) + ', 0px';
|
||||
} else if ( offCanvas[ id ].side === 'bottom' ) {
|
||||
amount = '0px, -' + offCanvas[ id ].element.css( 'height' );
|
||||
} else if ( offCanvas[ id ].side === 'left' ) {
|
||||
amount = offCanvas[ id ].element.css( 'width' ) + ', 0px';
|
||||
}
|
||||
}
|
||||
|
||||
var animation; // Animation type.
|
||||
// Return animation properties
|
||||
return { 'elements': elements, 'amount': amount, 'duration': duration };
|
||||
},
|
||||
|
||||
// Set animation type.
|
||||
if (supportTransition && supportTransform) { // Browser supports css transitions and transforms.
|
||||
animation = 'translate'; // Translate for browsers that support it.
|
||||
if (android && android < 4.4) animation = 'side'; // Android supports both, but can't translate any fixed positions, so use left instead.
|
||||
} else {
|
||||
animation = 'jQuery'; // Browsers that don't support css transitions and transitions.
|
||||
}
|
||||
/**
|
||||
* Slidebars Registration
|
||||
*/
|
||||
|
||||
// Animate mixin.
|
||||
function animate(object, amount, side) {
|
||||
// Choose selectors depending on animation style.
|
||||
var selector;
|
||||
|
||||
if (object.hasClass('sb-style-push')) {
|
||||
selector = $site.add(object).add($slide); // Push - Animate site, Slidebar and user elements.
|
||||
} else if (object.hasClass('sb-style-overlay')) {
|
||||
selector = object; // Overlay - Animate Slidebar only.
|
||||
registerSlidebar = function ( id, side, style, element ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
throw "Error registering Slidebar, a Slidebar with id '" + id + "' already exists.";
|
||||
}
|
||||
|
||||
// Register the Slidebar
|
||||
offCanvas[ id ] = {
|
||||
'id': id,
|
||||
'side': side,
|
||||
'style': style,
|
||||
'element': element,
|
||||
'active': false
|
||||
};
|
||||
},
|
||||
|
||||
isRegisteredSlidebar = function ( id ) {
|
||||
// Return if Slidebar is registered
|
||||
if ( offCanvas.hasOwnProperty( id ) ) {
|
||||
return true;
|
||||
} else {
|
||||
selector = $site.add($slide); // Reveal - Animate site and user elements.
|
||||
}
|
||||
|
||||
// Apply animation
|
||||
if (animation === 'translate') {
|
||||
selector.css('transform', 'translate(' + amount + ')'); // Apply the animation.
|
||||
|
||||
} else if (animation === 'side') {
|
||||
if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for side animations.
|
||||
if (amount !== '0px') selector.css(side, '0px'); // Add a 0 value so css transition works.
|
||||
setTimeout(function() { // Set a timeout to allow the 0 value to be applied above.
|
||||
selector.css(side, amount); // Apply the animation.
|
||||
}, 1);
|
||||
|
||||
} else if (animation === 'jQuery') {
|
||||
if (amount[0] === '-') amount = amount.substr(1); // Remove the '-' from the passed amount for jQuery animations.
|
||||
var properties = {};
|
||||
properties[side] = amount;
|
||||
selector.stop().animate(properties, 400); // Stop any current jQuery animation before starting another.
|
||||
}
|
||||
|
||||
// If closed, remove the inline styling on completion of the animation.
|
||||
setTimeout(function() {
|
||||
if (amount === '0px') {
|
||||
selector.removeAttr('style');
|
||||
css();
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// ----------------
|
||||
// 006 - Operations
|
||||
|
||||
// Open a Slidebar
|
||||
function open(side) {
|
||||
// Check to see if opposite Slidebar is open.
|
||||
if (side === 'left' && $left && rightActive || side === 'right' && $right && leftActive) { // It's open, close it, then continue.
|
||||
close();
|
||||
setTimeout(proceed, 400);
|
||||
} else { // Its not open, continue.
|
||||
proceed();
|
||||
}
|
||||
|
||||
// Open
|
||||
function proceed() {
|
||||
if (init && side === 'left' && $left) { // Slidebars is initiated, left is in use and called to open.
|
||||
$('html').addClass('sb-active sb-active-left'); // Add active classes.
|
||||
$left.addClass('sb-active');
|
||||
animate($left, $left.css('width'), 'left'); // Animation
|
||||
setTimeout(function() { leftActive = true; }, 400); // Set active variables.
|
||||
} else if (init && side === 'right' && $right) { // Slidebars is initiated, right is in use and called to open.
|
||||
$('html').addClass('sb-active sb-active-right'); // Add active classes.
|
||||
$right.addClass('sb-active');
|
||||
animate($right, '-' + $right.css('width'), 'right'); // Animation
|
||||
setTimeout(function() { rightActive = true; }, 400); // Set active variables.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close either Slidebar
|
||||
function close(link) {
|
||||
if (leftActive || rightActive) { // If a Slidebar is open.
|
||||
if (leftActive) {
|
||||
animate($left, '0px', 'left'); // Animation
|
||||
leftActive = false;
|
||||
}
|
||||
if (rightActive) {
|
||||
animate($right, '0px', 'right'); // Animation
|
||||
rightActive = false;
|
||||
}
|
||||
|
||||
setTimeout(function() { // Wait for closing animation to finish.
|
||||
$('html').removeClass('sb-active sb-active-left sb-active-right'); // Remove active classes.
|
||||
if ($left) $left.removeClass('sb-active');
|
||||
if ($right) $right.removeClass('sb-active');
|
||||
if (typeof link !== 'undefined') window.location = link; // If a link has been passed to the function, go to it.
|
||||
}, 400);
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle either Slidebar
|
||||
function toggle(side) {
|
||||
if (side === 'left' && $left) { // If left Slidebar is called and in use.
|
||||
if (!leftActive) {
|
||||
open('left'); // Slidebar is closed, open it.
|
||||
} else {
|
||||
close(); // Slidebar is open, close it.
|
||||
}
|
||||
}
|
||||
if (side === 'right' && $right) { // If right Slidebar is called and in use.
|
||||
if (!rightActive) {
|
||||
open('right'); // Slidebar is closed, open it.
|
||||
} else {
|
||||
close(); // Slidebar is open, close it.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------
|
||||
// 007 - API
|
||||
|
||||
this.slidebars = {
|
||||
open: open, // Maps user variable name to the open method.
|
||||
close: close, // Maps user variable name to the close method.
|
||||
toggle: toggle, // Maps user variable name to the toggle method.
|
||||
init: function() { // Returns true or false whether Slidebars are running or not.
|
||||
return init; // Returns true or false whether Slidebars are running.
|
||||
},
|
||||
active: function(side) { // Returns true or false whether Slidebar is open or closed.
|
||||
if (side === 'left' && $left) return leftActive;
|
||||
if (side === 'right' && $right) return rightActive;
|
||||
},
|
||||
destroy: function(side) { // Removes the Slidebar from the DOM.
|
||||
if (side === 'left' && $left) {
|
||||
if (leftActive) close(); // Close if its open.
|
||||
setTimeout(function() {
|
||||
$left.remove(); // Remove it.
|
||||
$left = false; // Set variable to false so it cannot be opened again.
|
||||
}, 400);
|
||||
}
|
||||
if (side === 'right' && $right) {
|
||||
if (rightActive) close(); // Close if its open.
|
||||
setTimeout(function() {
|
||||
$right.remove(); // Remove it.
|
||||
$right = false; // Set variable to false so it cannot be opened again.
|
||||
}, 400);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// ----------------
|
||||
// 008 - User Input
|
||||
|
||||
function eventHandler(event, selector) {
|
||||
event.stopPropagation(); // Stop event bubbling.
|
||||
event.preventDefault(); // Prevent default behaviour
|
||||
if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
|
||||
/**
|
||||
* Initialization
|
||||
*/
|
||||
|
||||
this.init = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( init ) {
|
||||
throw "Slidebars has already been initialized.";
|
||||
}
|
||||
|
||||
// Toggle left Slidebar
|
||||
$('.sb-toggle-left').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
toggle('left'); // Toggle the left Slidbar.
|
||||
});
|
||||
|
||||
// Toggle right Slidebar
|
||||
$('.sb-toggle-right').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
toggle('right'); // Toggle the right Slidbar.
|
||||
});
|
||||
|
||||
// Open left Slidebar
|
||||
$('.sb-open-left').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
open('left'); // Open the left Slidebar.
|
||||
});
|
||||
|
||||
// Open right Slidebar
|
||||
$('.sb-open-right').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
open('right'); // Open the right Slidebar.
|
||||
});
|
||||
|
||||
// Close a Slidebar
|
||||
$('.sb-close').on('touchend click', function(event) {
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
var link;
|
||||
|
||||
// Close Slidebar via link
|
||||
if ( $(this).parents('.sb-slidebar') ) {
|
||||
if ( $(this).is('a') ) {
|
||||
link = $(this).attr('href');
|
||||
} else if ( $(this).children('a') ) {
|
||||
link = $(this).children('a').attr('href');
|
||||
|
||||
// Loop through and register Slidebars
|
||||
if ( ! registered ) {
|
||||
$( '[off-canvas]' ).each( function () {
|
||||
// Get Slidebar parameters
|
||||
var parameters = $( this ).attr( 'off-canvas' ).split( ' ', 3 );
|
||||
|
||||
// Make sure a valid id, side and style are specified
|
||||
if ( ! parameters || ! parameters[ 0 ] || sides.indexOf( parameters[ 1 ] ) === -1 || styles.indexOf( parameters[ 2 ] ) === -1 ) {
|
||||
throw "Error registering Slidebar, please specifiy a valid id, side and style'.";
|
||||
}
|
||||
|
||||
// Register Slidebar
|
||||
registerSlidebar( parameters[ 0 ], parameters[ 1 ], parameters[ 2 ], $( this ) );
|
||||
} );
|
||||
|
||||
// Set registered variable
|
||||
registered = true;
|
||||
}
|
||||
|
||||
// Set initialized variable
|
||||
init = true;
|
||||
|
||||
// Set CSS
|
||||
this.css();
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'init' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
this.exit = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Exit
|
||||
var exit = function () {
|
||||
// Set init variable
|
||||
init = false;
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'exit' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// Call exit, close open Slidebar if active
|
||||
if ( this.getActiveSlidebar() ) {
|
||||
this.close( exit );
|
||||
} else {
|
||||
exit();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* CSS
|
||||
*/
|
||||
|
||||
this.css = function ( callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Loop through Slidebars to set negative margins
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Calculate offset
|
||||
var offset;
|
||||
|
||||
if ( offCanvas[ id ].side === 'top' || offCanvas[ id ].side === 'bottom' ) {
|
||||
offset = offCanvas[ id ].element.css( 'height' );
|
||||
} else {
|
||||
offset = offCanvas[ id ].element.css( 'width' );
|
||||
}
|
||||
|
||||
// Apply negative margins
|
||||
if ( offCanvas[ id ].style === 'push' || offCanvas[ id ].style === 'overlay' || offCanvas[ id ].style === 'shift' ) {
|
||||
offCanvas[ id ].element.css( 'margin-' + offCanvas[ id ].side, '-' + offset );
|
||||
}
|
||||
}
|
||||
|
||||
close(link); // Close Slidebar and pass link.
|
||||
});
|
||||
|
||||
// Close Slidebar via site
|
||||
$site.on('touchend click', function(event) {
|
||||
if (settings.siteClose && (leftActive || rightActive)) { // If settings permit closing by site and left or right Slidebar is open.
|
||||
eventHandler(event, $(this)); // Handle the event.
|
||||
close(); // Close it.
|
||||
}
|
||||
});
|
||||
|
||||
}; // End Slidebars function.
|
||||
}
|
||||
|
||||
}) (jQuery);
|
||||
// Reposition open Slidebars
|
||||
if ( this.getActiveSlidebar() ) {
|
||||
this.open( this.getActiveSlidebar() );
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'css' );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Controls
|
||||
*/
|
||||
|
||||
this.open = function ( id, callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed or if Slidebar isn't registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error opening Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Open
|
||||
var open = function () {
|
||||
// Set active state to true
|
||||
offCanvas[ id ].active = true;
|
||||
|
||||
// Display the Slidebar
|
||||
offCanvas[ id ].element.css( 'display', 'block' );
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'opening', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Get animation properties
|
||||
var animationProperties = getAnimationProperties( id );
|
||||
|
||||
// Apply css
|
||||
animationProperties.elements.css( {
|
||||
'transition-duration': animationProperties.duration + 'ms',
|
||||
'transform': 'translate(' + animationProperties.amount + ')'
|
||||
} );
|
||||
|
||||
// Transition completed
|
||||
setTimeout( function () {
|
||||
// Trigger event
|
||||
$( events ).trigger( 'opened', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
}, animationProperties.duration );
|
||||
};
|
||||
|
||||
// Call open, close open Slidebar if active
|
||||
if ( this.getActiveSlidebar() && this.getActiveSlidebar() !== id ) {
|
||||
this.close( open );
|
||||
} else {
|
||||
open();
|
||||
}
|
||||
};
|
||||
|
||||
this.close = function ( id, callback ) {
|
||||
// Shift callback arguments
|
||||
if ( typeof id === 'function' ) {
|
||||
callback = id;
|
||||
id = null;
|
||||
}
|
||||
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id was passed but isn't a registered Slidebar
|
||||
if ( id && ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// If no id was passed, get the active Slidebar
|
||||
if ( ! id ) {
|
||||
id = this.getActiveSlidebar();
|
||||
}
|
||||
|
||||
// Close a Slidebar
|
||||
if ( id && offCanvas[ id ].active ) {
|
||||
// Set active state to false
|
||||
offCanvas[ id ].active = false;
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'closing', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Get animation properties
|
||||
var animationProperties = getAnimationProperties( id );
|
||||
|
||||
// Apply css
|
||||
animationProperties.elements.css( 'transform', '' );
|
||||
|
||||
// Transition completetion
|
||||
setTimeout( function () {
|
||||
// Remove transition duration
|
||||
animationProperties.elements.css( 'transition-duration', '' );
|
||||
|
||||
// Hide the Slidebar
|
||||
offCanvas[ id ].element.css( 'display', '' );
|
||||
|
||||
// Trigger event
|
||||
$( events ).trigger( 'closed', [ offCanvas[ id ].id ] );
|
||||
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
}, animationProperties.duration );
|
||||
}
|
||||
};
|
||||
|
||||
this.toggle = function ( id, callback ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed or if Slidebar isn't registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error toggling Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Check Slidebar state
|
||||
if ( offCanvas[ id ].active ) {
|
||||
// It's open, close it
|
||||
this.close( id, function () {
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
} );
|
||||
} else {
|
||||
// It's closed, open it
|
||||
this.open( id, function () {
|
||||
// Run callback
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Active States
|
||||
*/
|
||||
|
||||
this.isActive = function ( id ) {
|
||||
// Return init state
|
||||
return init;
|
||||
};
|
||||
|
||||
this.isActiveSlidebar = function ( id ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed
|
||||
if ( ! id ) {
|
||||
throw "You must provide a Slidebar id.";
|
||||
}
|
||||
|
||||
// Check if Slidebar is registered
|
||||
if ( ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Return the active state
|
||||
return offCanvas[ id ].active;
|
||||
};
|
||||
|
||||
this.getActiveSlidebar = function () {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Variable to return
|
||||
var active = false;
|
||||
|
||||
// Loop through Slidebars
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Check if it's active
|
||||
if ( offCanvas[ id ].active ) {
|
||||
// Set the active id
|
||||
active = offCanvas[ id ].id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Return
|
||||
return active;
|
||||
};
|
||||
|
||||
this.getSlidebars = function () {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Create an array for the Slidebars
|
||||
var slidebarsArray = [];
|
||||
|
||||
// Loop through Slidebars
|
||||
for ( var id in offCanvas ) {
|
||||
// Check if Slidebar is registered
|
||||
if ( isRegisteredSlidebar( id ) ) {
|
||||
// Add Slidebar id to array
|
||||
slidebarsArray.push( offCanvas[ id ].id );
|
||||
}
|
||||
}
|
||||
|
||||
// Return
|
||||
return slidebarsArray;
|
||||
};
|
||||
|
||||
this.getSlidebar = function ( id ) {
|
||||
// Check if Slidebars has been initialized
|
||||
if ( ! init ) {
|
||||
throw "Slidebars hasn't been initialized.";
|
||||
}
|
||||
|
||||
// Check if id wasn't passed
|
||||
if ( ! id ) {
|
||||
throw "You must pass a Slidebar id.";
|
||||
}
|
||||
|
||||
// Check if Slidebar is registered
|
||||
if ( ! id || ! isRegisteredSlidebar( id ) ) {
|
||||
throw "Error retrieving Slidebar, there is no Slidebar with id '" + id + "'.";
|
||||
}
|
||||
|
||||
// Return the Slidebar's properties
|
||||
return offCanvas[ id ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Events
|
||||
*/
|
||||
|
||||
this.events = {};
|
||||
var events = this.events;
|
||||
|
||||
/**
|
||||
* Resizes
|
||||
*/
|
||||
|
||||
$( window ).on( 'resize', this.css.bind( this ) );
|
||||
};
|
||||
|
||||
// AMD / RequireJS
|
||||
if (typeof define !== 'undefined' && define.amd) {
|
||||
define([], function () {
|
||||
return slidebars;
|
||||
});
|
||||
}
|
||||
@@ -653,21 +653,28 @@ table{
|
||||
|
||||
// page menu ======================================================================================
|
||||
.pf-site{
|
||||
//background:url("#{$base-url}/#{$body-background-image}") $body-background-color;
|
||||
background-color: $body-background-color;
|
||||
background-repeat: no-repeat;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.sb-slidebar{
|
||||
.pf-menu{
|
||||
color: $gray-light;
|
||||
background-color: $gray-dark;
|
||||
width: 150px;
|
||||
transition-duration: 180ms;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.sb-left{
|
||||
.pf-menu-left{
|
||||
.list-group-item{
|
||||
cursor: pointer;
|
||||
@include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
|
||||
}
|
||||
}
|
||||
|
||||
.sb-right{
|
||||
.pf-menu-right{
|
||||
.list-group-item{
|
||||
cursor: pointer;
|
||||
@include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
|
||||
|
||||
@@ -1,29 +1,18 @@
|
||||
/* -----------------------------------
|
||||
* Slidebars
|
||||
* Version 0..10
|
||||
* http://plugins.adchsm.me/slidebars/
|
||||
*
|
||||
* Written by Adam Smith
|
||||
* http://www.adchsm.me/
|
||||
*
|
||||
* Released under MIT License
|
||||
* http://plugins.adchsm.me/slidebars/license.txt
|
||||
*
|
||||
* -------------------
|
||||
* Slidebars CSS Index
|
||||
*
|
||||
* 001 - Box Model, Html & Body
|
||||
* 002 - Site
|
||||
* 003 - Slidebars
|
||||
* 004 - Animation
|
||||
* 005 - Helper Classes
|
||||
*
|
||||
* ----------------------------
|
||||
* 001 - Box Model, Html & Body
|
||||
/*!
|
||||
* Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars
|
||||
* Version: 2.0.2
|
||||
* Url: http://www.adchsm.com/slidebars/
|
||||
* Author: Adam Charles Smith
|
||||
* Author url: http://www.adchsm.com/
|
||||
* License: MIT
|
||||
* License url: http://www.adchsm.com/slidebars/license/
|
||||
*/
|
||||
|
||||
html, body, #sb-site, .sb-site-container, .sb-slidebar {
|
||||
/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
|
||||
/**
|
||||
* Box Model, Html & Body
|
||||
*/
|
||||
|
||||
html, body, [canvas=container], [off-canvas] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -33,177 +22,134 @@ html, body, #sb-site, .sb-site-container, .sb-slidebar {
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
overflow-x: hidden; /* Stops horizontal scrolling. */
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%; /* Site is as tall as device. */
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
position: relative; /* Required for static Slidebars to function properly. */
|
||||
}
|
||||
|
||||
html.sb-scroll-lock.sb-active:not(.sb-static) {
|
||||
overflow: hidden; /* Prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
|
||||
}
|
||||
|
||||
/* ----------
|
||||
* 002 - Site
|
||||
*/
|
||||
|
||||
#sb-site, .sb-site-container {
|
||||
/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1; /* Site sits above Slidebars */
|
||||
|
||||
//background:url("#{$base-url}/#{$body-background-image}") $body-background-color;
|
||||
background-color: $body-background-color;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
* 003 - Slidebars
|
||||
*/
|
||||
|
||||
.sb-slidebar {
|
||||
height: 100%;
|
||||
overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Canvas
|
||||
*/
|
||||
|
||||
[canvas] {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[canvas=container] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
background-color: white; /* Basic background color, overwrite this in your own css. */
|
||||
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
|
||||
}
|
||||
|
||||
[canvas=container]:before, [canvas=container]:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
/**
|
||||
* Off-Canavs
|
||||
*/
|
||||
|
||||
[off-canvas] {
|
||||
display: none;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: black; /* Basic background color, overwrite this in your own css. */
|
||||
color: white; /* Basic colors, overwrite this in your own css. */
|
||||
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
|
||||
}
|
||||
|
||||
[off-canvas*=top] {
|
||||
width: 100%;
|
||||
height: 255px;
|
||||
top: 0;
|
||||
z-index: 0; /* Slidebars sit behind sb-site. */
|
||||
display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
|
||||
background-color: $gray-dark; /* Default Slidebars background colour, overwrite this with your own css. */
|
||||
-webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */
|
||||
}
|
||||
|
||||
.sb-left {
|
||||
left: 0; /* Set Slidebar to the left. */
|
||||
@include box-shadow(inset -5px 0px 10px 0px rgba(0,0,0,0.4));
|
||||
[off-canvas*=right] {
|
||||
width: 255px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sb-right {
|
||||
right: 0; /* Set Slidebar to the right. */
|
||||
@include box-shadow(inset 5px 0px 10px 0px rgba(0,0,0,0.4));
|
||||
[off-canvas*=bottom] {
|
||||
width: 100%;
|
||||
height: 255px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
html.sb-static .sb-slidebar,
|
||||
.sb-slidebar.sb-static {
|
||||
position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
|
||||
[off-canvas*=left] {
|
||||
width: 255px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sb-slidebar.sb-active {
|
||||
display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
|
||||
[off-canvas*=reveal] {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sb-style-overlay {
|
||||
z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
|
||||
[off-canvas*=push] {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sb-momentum-scrolling {
|
||||
-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
|
||||
[off-canvas*=overlay] {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Slidebar widths for browsers/devices that don't support media queries. */
|
||||
.sb-slidebar {
|
||||
width: 30%;
|
||||
[off-canvas*=shift] {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) { /* Slidebar widths on extra small screens. */
|
||||
.sb-slidebar {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 481px) { /* Slidebar widths on small screens. */
|
||||
.sb-slidebar {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* Slidebar widths on medium screens. */
|
||||
.sb-slidebar {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) { /* Slidebar widths on large screens. */
|
||||
.sb-slidebar {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */
|
||||
.sb-slidebar {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.sb-width-thin {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.sb-width-wide {
|
||||
width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
* 004 - Animation
|
||||
/**
|
||||
* Animation
|
||||
*/
|
||||
|
||||
.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
|
||||
@include transition( transform 180ms ease-out );
|
||||
-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
|
||||
-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
|
||||
[canvas], [off-canvas] {
|
||||
-webkit-transform: translate( 0px, 0px );
|
||||
-ms-transform: translate( 0px, 0px );
|
||||
transform: translate( 0px, 0px );
|
||||
-webkit-transition: -webkit-transform 300ms;
|
||||
transition: transform 300ms ease-in-out;
|
||||
-webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
* 005 - Helper Classes
|
||||
[off-canvas*=shift][off-canvas*=top] {
|
||||
-webkit-transform: translate( 0px, 50% );
|
||||
transform: translate( 0px, 50% );
|
||||
}
|
||||
|
||||
[off-canvas*=shift][off-canvas*=right] {
|
||||
-webkit-transform: translate( -50%, 0px );
|
||||
transform: translate( -50%, 0px );
|
||||
}
|
||||
|
||||
[off-canvas*=shift][off-canvas*=bottom] {
|
||||
-webkit-transform: translate( 0px, -50% );
|
||||
transform: translate( 0px, -50% );
|
||||
}
|
||||
|
||||
[off-canvas*=shift][off-canvas*=left] {
|
||||
-webkit-transform: translate( 50%, 0px );
|
||||
transform: translate( 50%, 0px );
|
||||
}
|
||||
|
||||
/**
|
||||
* Print
|
||||
*/
|
||||
|
||||
.sb-hide {
|
||||
display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
|
||||
@media print {
|
||||
[canvas] {
|
||||
-webkit-transform: translate( 0px, 0px ) !important;
|
||||
-ms-transform: translate( 0px, 0px ) !important;
|
||||
transform: translate( 0px, 0px ) !important;
|
||||
}
|
||||
|
||||
[off-canvas] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user