'
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '
';
- } else {
- html += ''
- + ''
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '
';
- } else {
- html += ''
- + ''
- },
-
- regExp : {
- escape : /[-[\]{}()*+?.,\\^$|#\s:=@]/g
- },
-
- metadata : {
- tab : 'tab',
- loaded : 'loaded',
- promise: 'promise'
- },
-
- className : {
- loading : 'loading',
- active : 'active'
- },
-
- selector : {
- tabs : '.ui.tab',
- ui : '.ui'
- }
-
-};
-
-})( jQuery, window, document );
-
-/*!
- * # Fomantic-UI - Toast
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.toast = function(parameters) {
- var
- $allModules = $(this),
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
- returnedValue
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.toast.settings, parameters)
- : $.extend({}, $.fn.toast.settings),
-
- className = settings.className,
- selector = settings.selector,
- error = settings.error,
- namespace = settings.namespace,
- fields = settings.fields,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
- $toastBox,
- $toast,
- $actions,
- $progress,
- $progressBar,
- $animationObject,
- $close,
- $context = (settings.context)
- ? $(settings.context)
- : $('body'),
-
- isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
-
- element = this,
- instance = isToastComponent ? $module.data(moduleNamespace) : undefined,
-
- module
- ;
- module = {
-
- initialize: function() {
- module.verbose('Initializing element');
- if (!module.has.container()) {
- module.create.container();
- }
- if(isToastComponent || settings.message !== '' || settings.title !== '' || module.get.iconClass() !== '' || settings.showImage || module.has.configActions()) {
- if(typeof settings.showProgress !== 'string' || [className.top,className.bottom].indexOf(settings.showProgress) === -1 ) {
- settings.showProgress = false;
- }
- module.create.toast();
- if(settings.closeOnClick && (settings.closeIcon || $($toast).find(selector.input).length > 0 || module.has.configActions())){
- settings.closeOnClick = false;
- }
- if(!settings.closeOnClick) {
- $toastBox.addClass(className.unclickable);
- }
- module.bind.events();
- }
- module.instantiate();
- if($toastBox) {
- module.show();
- }
- },
-
- instantiate: function() {
- module.verbose('Storing instance of toast');
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- if($toastBox) {
- module.debug('Removing toast', $toastBox);
- module.unbind.events();
- $toastBox.remove();
- $toastBox = undefined;
- $toast = undefined;
- $animationObject = undefined;
- settings.onRemove.call($toastBox, element);
- $progress = undefined;
- $progressBar = undefined;
- $close = undefined;
- }
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- show: function(callback) {
- callback = callback || function(){};
- module.debug('Showing toast');
- if(settings.onShow.call($toastBox, element) === false) {
- module.debug('onShow callback returned false, cancelling toast animation');
- return;
- }
- module.animate.show(callback);
- },
-
- close: function(callback) {
- callback = callback || function(){};
- module.remove.visible();
- module.unbind.events();
- module.animate.close(callback);
-
- },
-
- create: {
- container: function() {
- module.verbose('Creating container');
- $context.append($('',{class: settings.position + ' ' + className.container}));
- },
- toast: function() {
- $toastBox = $('', {class: className.box});
- if (!isToastComponent) {
- module.verbose('Creating toast');
- $toast = $('');
- var $content = $('', {class: className.content});
- var iconClass = module.get.iconClass();
- if (iconClass !== '') {
- $toast.append($('', {class: iconClass + ' ' + className.icon}));
- }
-
- if (settings.showImage) {
- $toast.append($('![]()
', {
- class: className.image + ' ' + settings.classImage,
- src: settings.showImage
- }));
- }
- if (settings.title !== '') {
- $content.append($('', {
- class: className.title,
- text: settings.title
- }));
- }
-
- $content.append($('', {html: module.helpers.escape(settings.message, settings.preserveHTML)}));
-
- $toast
- .addClass(settings.class + ' ' + className.toast)
- .append($content)
- ;
- $toast.css('opacity', settings.opacity);
- if (settings.closeIcon) {
- $close = $('', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
- if($close.hasClass(className.left)) {
- $toast.prepend($close);
- } else {
- $toast.append($close);
- }
- }
- } else {
- $toast = settings.cloneModule ? $module.clone().removeAttr('id') : $module;
- $close = $toast.find('> i'+module.helpers.toClass(className.close));
- settings.closeIcon = ($close.length > 0);
- }
- if ($toast.hasClass(className.compact)) {
- settings.compact = true;
- }
- if ($toast.hasClass('card')) {
- settings.compact = false;
- }
- $actions = $toast.find('.actions');
- if (module.has.configActions()) {
- if ($actions.length === 0) {
- $actions = $('', {class: className.actions + ' ' + (settings.classActions || '')}).appendTo($toast);
- }
- if($toast.hasClass('card') && !$actions.hasClass(className.attached)) {
- $actions.addClass(className.extraContent);
- if($actions.hasClass(className.vertical)) {
- $actions.removeClass(className.vertical);
- module.error(error.verticalCard);
- }
- }
- settings.actions.forEach(function (el) {
- var icon = el[fields.icon] ? '' : '',
- text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
- cls = module.helpers.deQuote(el[fields.class] || ''),
- click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
- $actions.append($('', {
- html: icon + text,
- class: className.button + ' ' + cls,
- click: function () {
- if (click.call(element, $module) === false) {
- return;
- }
- module.close();
- }
- }));
- });
- }
- if ($actions && $actions.hasClass(className.vertical)) {
- $toast.addClass(className.vertical);
- }
- if($actions.length > 0 && !$actions.hasClass(className.attached)) {
- if ($actions && (!$actions.hasClass(className.basic) || $actions.hasClass(className.left))) {
- $toast.addClass(className.actions);
- }
- }
- if(settings.displayTime === 'auto'){
- settings.displayTime = Math.max(settings.minDisplayTime, $toast.text().split(" ").length / settings.wordsPerMinute * 60000);
- }
- $toastBox.append($toast);
-
- if($actions.length > 0 && $actions.hasClass(className.attached)) {
- $actions.addClass(className.buttons);
- $actions.detach();
- $toast.addClass(className.attached);
- if (!$actions.hasClass(className.vertical)) {
- if ($actions.hasClass(className.top)) {
- $toastBox.prepend($actions);
- $toast.addClass(className.bottom);
- } else {
- $toastBox.append($actions);
- $toast.addClass(className.top);
- }
- } else {
- $toast.wrap(
- $('',{
- class:className.vertical + ' ' +
- className.attached + ' ' +
- (settings.compact ? className.compact : '')
- })
- );
- if($actions.hasClass(className.left)) {
- $toast.addClass(className.left).parent().addClass(className.left).prepend($actions);
- } else {
- $toast.parent().append($actions);
- }
- }
- }
- if($module !== $toast) {
- $module = $toast;
- element = $toast[0];
- }
- if(settings.displayTime > 0) {
- var progressingClass = className.progressing+' '+(settings.pauseOnHover ? className.pausable:'');
- if (!!settings.showProgress) {
- $progress = $('', {
- class: className.progress + ' ' + (settings.classProgress || settings.class),
- 'data-percent': ''
- });
- if(!settings.classProgress) {
- if ($toast.hasClass('toast') && !$toast.hasClass(className.inverted)) {
- $progress.addClass(className.inverted);
- } else {
- $progress.removeClass(className.inverted);
- }
- }
- $progressBar = $('', {class: 'bar '+(settings.progressUp ? 'up ' : 'down ')+progressingClass});
- $progress
- .addClass(settings.showProgress)
- .append($progressBar);
- if ($progress.hasClass(className.top)) {
- $toastBox.prepend($progress);
- } else {
- $toastBox.append($progress);
- }
- $progressBar.css('animation-duration', settings.displayTime / 1000 + 's');
- }
- $animationObject = $('',{class:'wait '+progressingClass});
- $animationObject.css('animation-duration', settings.displayTime / 1000 + 's');
- $animationObject.appendTo($toast);
- }
- if (settings.compact) {
- $toastBox.addClass(className.compact);
- $toast.addClass(className.compact);
- if($progress) {
- $progress.addClass(className.compact);
- }
- }
- if (settings.newestOnTop) {
- $toastBox.prependTo(module.get.container());
- }
- else {
- $toastBox.appendTo(module.get.container());
- }
- }
- },
-
- bind: {
- events: function() {
- module.debug('Binding events to toast');
- if(settings.closeOnClick || settings.closeIcon) {
- (settings.closeIcon ? $close : $toast)
- .on('click' + eventNamespace, module.event.click)
- ;
- }
- if($animationObject) {
- $animationObject.on('animationend' + eventNamespace, module.close);
- }
- $toastBox
- .on('click' + eventNamespace, selector.approve, module.event.approve)
- .on('click' + eventNamespace, selector.deny, module.event.deny)
- ;
- }
- },
-
- unbind: {
- events: function() {
- module.debug('Unbinding events to toast');
- if(settings.closeOnClick || settings.closeIcon) {
- (settings.closeIcon ? $close : $toast)
- .off('click' + eventNamespace)
- ;
- }
- if($animationObject) {
- $animationObject.off('animationend' + eventNamespace);
- }
- $toastBox
- .off('click' + eventNamespace)
- ;
- }
- },
-
- animate: {
- show: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
- module.set.visible();
- $toastBox
- .transition({
- animation : settings.transition.showMethod + ' in',
- queue : false,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.transition.showDuration,
- onComplete : function() {
- callback.call($toastBox, element);
- settings.onVisible.call($toastBox, element);
- }
- })
- ;
- }
- },
- close: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- module.debug('Closing toast');
- if(settings.onHide.call($toastBox, element) === false) {
- module.debug('onHide callback returned false, cancelling toast animation');
- return;
- }
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- $toastBox
- .transition({
- animation : settings.transition.hideMethod + ' out',
- queue : false,
- duration : settings.transition.hideDuration,
- debug : settings.debug,
- verbose : settings.verbose,
- interval : 50,
-
- onBeforeHide: function(callback){
- callback = $.isFunction(callback)?callback : function(){};
- if(settings.transition.closeEasing !== ''){
- if($toastBox) {
- $toastBox.css('opacity', 0);
- $toastBox.wrap('').parent().slideUp(500, settings.transition.closeEasing, function () {
- if ($toastBox) {
- $toastBox.parent().remove();
- callback.call($toastBox);
- }
- });
- }
- } else {
- callback.call($toastBox);
- }
- },
- onComplete : function() {
- callback.call($toastBox, element);
- settings.onHidden.call($toastBox, element);
- module.destroy();
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- },
- pause: function() {
- $animationObject.css('animationPlayState','paused');
- if($progressBar) {
- $progressBar.css('animationPlayState', 'paused');
- }
- },
- continue: function() {
- $animationObject.css('animationPlayState','running');
- if($progressBar) {
- $progressBar.css('animationPlayState', 'running');
- }
- }
- },
-
- has: {
- container: function() {
- module.verbose('Determining if there is already a container');
- return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
- },
- toast: function(){
- return !!module.get.toast();
- },
- toasts: function(){
- return module.get.toasts().length > 0;
- },
- configActions: function () {
- return Array.isArray(settings.actions) && settings.actions.length > 0;
- }
- },
-
- get: {
- container: function() {
- return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
- },
- toastBox: function() {
- return $toastBox || null;
- },
- toast: function() {
- return $toast || null;
- },
- toasts: function() {
- return $(module.get.container()).find(selector.box);
- },
- iconClass: function() {
- return typeof settings.showIcon === 'string' ? settings.showIcon : settings.showIcon && settings.icons[settings.class] ? settings.icons[settings.class] : '';
- },
- remainingTime: function() {
- return $animationObject ? $animationObject.css('opacity') * settings.displayTime : 0;
- }
- },
-
- set: {
- visible: function() {
- $toast.addClass(className.visible);
- }
- },
-
- remove: {
- visible: function() {
- $toast.removeClass(className.visible);
- }
- },
-
- event: {
- click: function(event) {
- if($(event.target).closest('a').length === 0) {
- settings.onClick.call($toastBox, element);
- module.close();
- }
- },
- approve: function() {
- if(settings.onApprove.call(element, $module) === false) {
- module.verbose('Approve callback returned false cancelling close');
- return;
- }
- module.close();
- },
- deny: function() {
- if(settings.onDeny.call(element, $module) === false) {
- module.verbose('Deny callback returned false cancelling close');
- return;
- }
- module.close();
- }
- },
-
- helpers: {
- toClass: function(selector) {
- var
- classes = selector.split(' '),
- result = ''
- ;
-
- classes.forEach(function (element) {
- result += '.' + element;
- });
-
- return result;
- },
- deQuote: function(string) {
- return String(string).replace(/"/g,"");
- },
- escape: function(string, preserveHTML) {
- if (preserveHTML){
- return string;
- }
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "<",
- ">": ">",
- '"': """,
- "'": "'",
- "`": "`"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&");
- return string.replace(badChars, escapedChar);
- }
- return string;
- }
- },
-
- can: {
- useElement: function(element){
- if ($.fn[element] !== undefined) {
- return true;
- }
- module.error(error.noElement.replace('{element}',element));
- return false;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- settings[name] = value;
- }
- }
- else {
- return settings[name];
- }
- },
- internal: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else if(value !== undefined) {
- module[name] = value;
- }
- else {
- return module[name];
- }
- },
- debug: function() {
- if(!settings.silent && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.debug.apply(console, arguments);
- }
- }
- },
- verbose: function() {
- if(!settings.silent && settings.verbose && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.verbose.apply(console, arguments);
- }
- }
- },
- error: function() {
- if(!settings.silent) {
- module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
- module.error.apply(console, arguments);
- }
- },
- performance: {
- log: function(message) {
- var
- currentTime,
- executionTime,
- previousTime
- ;
- if(settings.performance) {
- currentTime = new Date().getTime();
- previousTime = time || currentTime;
- executionTime = currentTime - previousTime;
- time = currentTime;
- performance.push({
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- 'Element' : element,
- 'Execution Time' : executionTime
- });
- }
- clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 500);
- },
- display: function() {
- var
- title = settings.name + ':',
- totalTime = 0
- ;
- time = false;
- clearTimeout(module.performance.timer);
- $.each(performance, function(index, data) {
- totalTime += data['Execution Time'];
- });
- title += ' ' + totalTime + 'ms';
- if(moduleSelector) {
- title += ' \'' + moduleSelector + '\'';
- }
- if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
- console.groupCollapsed(title);
- if(console.table) {
- console.table(performance);
- }
- else {
- $.each(performance, function(index, data) {
- console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
- });
- }
- console.groupEnd();
- }
- performance = [];
- }
- },
- invoke: function(query, passedArguments, context) {
- var
- object = instance,
- maxDepth,
- found,
- response
- ;
- passedArguments = passedArguments || queryArguments;
- context = element || context;
- if(typeof query == 'string' && object !== undefined) {
- query = query.split(/[\. ]/);
- maxDepth = query.length - 1;
- $.each(query, function(depth, value) {
- var camelCaseValue = (depth != maxDepth)
- ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
- : query
- ;
- if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
- object = object[camelCaseValue];
- }
- else if( object[camelCaseValue] !== undefined ) {
- found = object[camelCaseValue];
- return false;
- }
- else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
- object = object[value];
- }
- else if( object[value] !== undefined ) {
- found = object[value];
- return false;
- }
- else {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
-
- if(methodInvoked) {
- if(instance === undefined) {
- module.initialize();
- }
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- returnedValue = $module;
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.toast.settings = {
-
- name : 'Toast',
- namespace : 'toast',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- context : 'body',
-
- position : 'top right',
- class : 'neutral',
- classProgress : false,
- classActions : false,
- classImage : 'mini',
-
- title : '',
- message : '',
- displayTime : 3000, // set to zero to require manually dismissal, otherwise hides on its own
- minDisplayTime : 1000, // minimum displaytime in case displayTime is set to 'auto'
- wordsPerMinute : 120,
- showIcon : false,
- newestOnTop : false,
- showProgress : false,
- pauseOnHover : true,
- progressUp : false, //if true, the bar will start at 0% and increase to 100%
- opacity : 1,
- compact : true,
- closeIcon : false,
- closeOnClick : true,
- cloneModule : true,
- actions : false,
- preserveHTML : true,
- showImage : false,
-
- // transition settings
- transition : {
- showMethod : 'scale',
- showDuration : 500,
- hideMethod : 'scale',
- hideDuration : 500,
- closeEasing : 'easeOutCubic' //Set to empty string to stack the closed toast area immediately (old behaviour)
- },
-
- error: {
- method : 'The method you called is not defined.',
- noElement : 'This module requires ui {element}',
- verticalCard : 'Vertical but not attached actions are not supported for card layout'
- },
-
- className : {
- container : 'ui toast-container',
- box : 'floating toast-box',
- progress : 'ui attached active progress',
- toast : 'ui toast',
- icon : 'centered icon',
- visible : 'visible',
- content : 'content',
- title : 'ui header',
- actions : 'actions',
- extraContent : 'extra content',
- button : 'ui button',
- buttons : 'ui buttons',
- close : 'close icon',
- image : 'ui image',
- vertical : 'vertical',
- attached : 'attached',
- inverted : 'inverted',
- compact : 'compact',
- pausable : 'pausable',
- progressing : 'progressing',
- top : 'top',
- bottom : 'bottom',
- left : 'left',
- basic : 'basic',
- unclickable : 'unclickable'
- },
-
- icons : {
- info : 'info',
- success : 'checkmark',
- warning : 'warning',
- error : 'times'
- },
-
- selector : {
- container : '.ui.toast-container',
- box : '.toast-box',
- toast : '.ui.toast',
- input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
- approve : '.actions .positive, .actions .approve, .actions .ok',
- deny : '.actions .negative, .actions .deny, .actions .cancel'
- },
-
- fields : {
- class : 'class',
- text : 'text',
- icon : 'icon',
- click : 'click'
- },
-
- // callbacks
- onShow : function(){},
- onVisible : function(){},
- onClick : function(){},
- onHide : function(){},
- onHidden : function(){},
- onRemove : function(){},
- onApprove : function(){},
- onDeny : function(){}
-};
-
-$.extend( $.easing, {
- easeOutBounce: function (x, t, b, c, d) {
- if ((t/=d) < (1/2.75)) {
- return c*(7.5625*t*t) + b;
- } else if (t < (2/2.75)) {
- return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- } else if (t < (2.5/2.75)) {
- return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
- } else {
- return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
- }
- },
- easeOutCubic: function (t) {
- return (--t)*t*t+1;
- }
-});
-
-
-})( jQuery, window, document );
-
-/*!
- * # Fomantic-UI - Transition
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.transition = function() {
- var
- $allModules = $(this),
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- moduleArguments = arguments,
- query = moduleArguments[0],
- queryArguments = [].slice.call(arguments, 1),
- methodInvoked = (typeof query === 'string'),
-
- returnedValue
- ;
- $allModules
- .each(function(index) {
- var
- $module = $(this),
- element = this,
-
- // set at run time
- settings,
- instance,
-
- error,
- className,
- metadata,
- animationEnd,
-
- moduleNamespace,
- eventNamespace,
- module
- ;
-
- module = {
-
- initialize: function() {
-
- // get full settings
- settings = module.get.settings.apply(element, moduleArguments);
-
- // shorthand
- className = settings.className;
- error = settings.error;
- metadata = settings.metadata;
-
- // define namespace
- eventNamespace = '.' + settings.namespace;
- moduleNamespace = 'module-' + settings.namespace;
- instance = $module.data(moduleNamespace) || module;
-
- // get vendor specific events
- animationEnd = module.get.animationEndEvent();
-
- if(methodInvoked) {
- methodInvoked = module.invoke(query);
- }
-
- // method not invoked, lets run an animation
- if(methodInvoked === false) {
- module.verbose('Converted arguments into settings object', settings);
- if(settings.interval) {
- module.delay(settings.animate);
- }
- else {
- module.animate();
- }
- module.instantiate();
- }
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', element);
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing display type on next animation');
- delete module.displayType;
- },
-
- forceRepaint: function() {
- module.verbose('Forcing element repaint');
- var
- $parentElement = $module.parent(),
- $nextElement = $module.next()
- ;
- if($nextElement.length === 0) {
- $module.detach().appendTo($parentElement);
- }
- else {
- $module.detach().insertBefore($nextElement);
- }
- },
-
- repaint: function() {
- module.verbose('Repainting element');
- var
- fakeAssignment = element.offsetWidth
- ;
- },
-
- delay: function(interval) {
- var
- direction = module.get.animationDirection(),
- shouldReverse,
- delay
- ;
- if(!direction) {
- direction = module.can.transition()
- ? module.get.direction()
- : 'static'
- ;
- }
- interval = (interval !== undefined)
- ? interval
- : settings.interval
- ;
- shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
- delay = (shouldReverse || settings.reverse == true)
- ? ($allModules.length - index) * settings.interval
- : index * settings.interval
- ;
- module.debug('Delaying animation by', delay);
- setTimeout(module.animate, delay);
- },
-
- animate: function(overrideSettings) {
- settings = overrideSettings || settings;
- if(!module.is.supported()) {
- module.error(error.support);
- return false;
- }
- module.debug('Preparing animation', settings.animation);
- if(module.is.animating()) {
- if(settings.queue) {
- if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
- module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
- }
- else {
- module.queue(settings.animation);
- }
- return false;
- }
- else if(!settings.allowRepeats && module.is.occurring()) {
- module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
- return false;
- }
- else {
- module.debug('New animation started, completing previous early', settings.animation);
- instance.complete();
- }
- }
- if( module.can.animate() ) {
- module.set.animating(settings.animation);
- }
- else {
- module.error(error.noAnimation, settings.animation, element);
- }
- },
-
- reset: function() {
- module.debug('Resetting animation to beginning conditions');
- module.remove.animationCallbacks();
- module.restore.conditions();
- module.remove.animating();
- },
-
- queue: function(animation) {
- module.debug('Queueing animation of', animation);
- module.queuing = true;
- $module
- .one(animationEnd + '.queue' + eventNamespace, function() {
- module.queuing = false;
- module.repaint();
- module.animate.apply(this, settings);
- })
- ;
- },
-
- complete: function (event) {
- if(event && event.target === element) {
- event.stopPropagation();
- }
- module.debug('Animation complete', settings.animation);
- module.remove.completeCallback();
- module.remove.failSafe();
- if(!module.is.looping()) {
- if( module.is.outward() ) {
- module.verbose('Animation is outward, hiding element');
- module.restore.conditions();
- module.hide();
- }
- else if( module.is.inward() ) {
- module.verbose('Animation is outward, showing element');
- module.restore.conditions();
- module.show();
- }
- else {
- module.verbose('Static animation completed');
- module.restore.conditions();
- settings.onComplete.call(element);
- }
- }
- },
-
- force: {
- visible: function() {
- var
- style = $module.attr('style'),
- userStyle = module.get.userStyle(style),
- displayType = module.get.displayType(),
- overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
- inlineDisplay = $module[0].style.display,
- mustStayHidden = !displayType || (inlineDisplay === 'none' && settings.skipInlineHidden) || $module[0].tagName.match(/(script|link|style)/i)
- ;
- if (mustStayHidden){
- module.remove.transition();
- return false;
- }
- module.verbose('Overriding default display to show element', displayType);
- $module
- .attr('style', overrideStyle)
- ;
- return true;
- },
- hidden: function() {
- var
- style = $module.attr('style'),
- currentDisplay = $module.css('display'),
- emptyStyle = (style === undefined || style === '')
- ;
- if(currentDisplay !== 'none' && !module.is.hidden()) {
- module.verbose('Overriding default display to hide element');
- $module
- .css('display', 'none')
- ;
- }
- else if(emptyStyle) {
- $module
- .removeAttr('style')
- ;
- }
- }
- },
-
- has: {
- direction: function(animation) {
- var
- hasDirection = false
- ;
- animation = animation || settings.animation;
- if(typeof animation === 'string') {
- animation = animation.split(' ');
- $.each(animation, function(index, word){
- if(word === className.inward || word === className.outward) {
- hasDirection = true;
- }
- });
- }
- return hasDirection;
- },
- inlineDisplay: function() {
- var
- style = $module.attr('style') || ''
- ;
- return Array.isArray(style.match(/display.*?;/, ''));
- }
- },
-
- set: {
- animating: function(animation) {
- // remove previous callbacks
- module.remove.completeCallback();
-
- // determine exact animation
- animation = animation || settings.animation;
- var animationClass = module.get.animationClass(animation);
-
- // save animation class in cache to restore class names
- module.save.animation(animationClass);
-
- if(module.force.visible()) {
- module.remove.hidden();
- module.remove.direction();
-
- module.start.animation(animationClass);
- }
- },
- duration: function(animationName, duration) {
- duration = duration || settings.duration;
- duration = (typeof duration == 'number')
- ? duration + 'ms'
- : duration
- ;
- if(duration || duration === 0) {
- module.verbose('Setting animation duration', duration);
- $module
- .css({
- 'animation-duration': duration
- })
- ;
- }
- },
- direction: function(direction) {
- direction = direction || module.get.direction();
- if(direction == className.inward) {
- module.set.inward();
- }
- else {
- module.set.outward();
- }
- },
- looping: function() {
- module.debug('Transition set to loop');
- $module
- .addClass(className.looping)
- ;
- },
- hidden: function() {
- $module
- .addClass(className.transition)
- .addClass(className.hidden)
- ;
- },
- inward: function() {
- module.debug('Setting direction to inward');
- $module
- .removeClass(className.outward)
- .addClass(className.inward)
- ;
- },
- outward: function() {
- module.debug('Setting direction to outward');
- $module
- .removeClass(className.inward)
- .addClass(className.outward)
- ;
- },
- visible: function() {
- $module
- .addClass(className.transition)
- .addClass(className.visible)
- ;
- }
- },
-
- start: {
- animation: function(animationClass) {
- animationClass = animationClass || module.get.animationClass();
- module.debug('Starting tween', animationClass);
- $module
- .addClass(animationClass)
- .one(animationEnd + '.complete' + eventNamespace, module.complete)
- ;
- if(settings.useFailSafe) {
- module.add.failSafe();
- }
- module.set.duration(settings.duration);
- settings.onStart.call(element);
- }
- },
-
- save: {
- animation: function(animation) {
- if(!module.cache) {
- module.cache = {};
- }
- module.cache.animation = animation;
- },
- displayType: function(displayType) {
- if(displayType !== 'none') {
- $module.data(metadata.displayType, displayType);
- }
- },
- transitionExists: function(animation, exists) {
- $.fn.transition.exists[animation] = exists;
- module.verbose('Saving existence of transition', animation, exists);
- }
- },
-
- restore: {
- conditions: function() {
- var
- animation = module.get.currentAnimation()
- ;
- if(animation) {
- $module
- .removeClass(animation)
- ;
- module.verbose('Removing animation class', module.cache);
- }
- module.remove.duration();
- }
- },
-
- add: {
- failSafe: function() {
- var
- duration = module.get.duration()
- ;
- module.timer = setTimeout(function() {
- $module.triggerHandler(animationEnd);
- }, duration + settings.failSafeDelay);
- module.verbose('Adding fail safe timer', module.timer);
- }
- },
-
- remove: {
- animating: function() {
- $module.removeClass(className.animating);
- },
- animationCallbacks: function() {
- module.remove.queueCallback();
- module.remove.completeCallback();
- },
- queueCallback: function() {
- $module.off('.queue' + eventNamespace);
- },
- completeCallback: function() {
- $module.off('.complete' + eventNamespace);
- },
- display: function() {
- $module.css('display', '');
- },
- direction: function() {
- $module
- .removeClass(className.inward)
- .removeClass(className.outward)
- ;
- },
- duration: function() {
- $module
- .css('animation-duration', '')
- ;
- },
- failSafe: function() {
- module.verbose('Removing fail safe timer', module.timer);
- if(module.timer) {
- clearTimeout(module.timer);
- }
- },
- hidden: function() {
- $module.removeClass(className.hidden);
- },
- visible: function() {
- $module.removeClass(className.visible);
- },
- looping: function() {
- module.debug('Transitions are no longer looping');
- if( module.is.looping() ) {
- module.reset();
- $module
- .removeClass(className.looping)
- ;
- }
- },
- transition: function() {
- $module
- .removeClass(className.transition)
- .removeClass(className.visible)
- .removeClass(className.hidden)
- ;
- }
- },
- get: {
- settings: function(animation, duration, onComplete) {
- // single settings object
- if(typeof animation == 'object') {
- return $.extend(true, {}, $.fn.transition.settings, animation);
- }
- // all arguments provided
- else if(typeof onComplete == 'function') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- onComplete : onComplete,
- duration : duration
- });
- }
- // only duration provided
- else if(typeof duration == 'string' || typeof duration == 'number') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- duration : duration
- });
- }
- // duration is actually settings object
- else if(typeof duration == 'object') {
- return $.extend({}, $.fn.transition.settings, duration, {
- animation : animation
- });
- }
- // duration is actually callback
- else if(typeof duration == 'function') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- onComplete : duration
- });
- }
- // only animation provided
- else {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation
- });
- }
- },
- animationClass: function(animation) {
- var
- animationClass = animation || settings.animation,
- directionClass = (module.can.transition() && !module.has.direction())
- ? module.get.direction() + ' '
- : ''
- ;
- return className.animating + ' '
- + className.transition + ' '
- + directionClass
- + animationClass
- ;
- },
- currentAnimation: function() {
- return (module.cache && module.cache.animation !== undefined)
- ? module.cache.animation
- : false
- ;
- },
- currentDirection: function() {
- return module.is.inward()
- ? className.inward
- : className.outward
- ;
- },
- direction: function() {
- return module.is.hidden() || !module.is.visible()
- ? className.inward
- : className.outward
- ;
- },
- animationDirection: function(animation) {
- var
- direction
- ;
- animation = animation || settings.animation;
- if(typeof animation === 'string') {
- animation = animation.split(' ');
- // search animation name for out/in class
- $.each(animation, function(index, word){
- if(word === className.inward) {
- direction = className.inward;
- }
- else if(word === className.outward) {
- direction = className.outward;
- }
- });
- }
- // return found direction
- if(direction) {
- return direction;
- }
- return false;
- },
- duration: function(duration) {
- duration = duration || settings.duration;
- if(duration === false) {
- duration = $module.css('animation-duration') || 0;
- }
- return (typeof duration === 'string')
- ? (duration.indexOf('ms') > -1)
- ? parseFloat(duration)
- : parseFloat(duration) * 1000
- : duration
- ;
- },
- displayType: function(shouldDetermine) {
- shouldDetermine = (shouldDetermine !== undefined)
- ? shouldDetermine
- : true
- ;
- if(settings.displayType) {
- return settings.displayType;
- }
- if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
- var currentDisplay = $module.css('display');
- if(currentDisplay === '' || currentDisplay === 'none'){
- // create fake element to determine display state
- module.can.transition(true);
- } else {
- module.save.displayType(currentDisplay);
- }
- }
- return $module.data(metadata.displayType);
- },
- userStyle: function(style) {
- style = style || $module.attr('style') || '';
- return style.replace(/display.*?;/, '');
- },
- transitionExists: function(animation) {
- return $.fn.transition.exists[animation];
- },
- animationStartEvent: function() {
- var
- element = document.createElement('div'),
- animations = {
- 'animation' :'animationstart',
- 'OAnimation' :'oAnimationStart',
- 'MozAnimation' :'mozAnimationStart',
- 'WebkitAnimation' :'webkitAnimationStart'
- },
- animation
- ;
- for(animation in animations){
- if( element.style[animation] !== undefined ){
- return animations[animation];
- }
- }
- return false;
- },
- animationEndEvent: function() {
- var
- element = document.createElement('div'),
- animations = {
- 'animation' :'animationend',
- 'OAnimation' :'oAnimationEnd',
- 'MozAnimation' :'mozAnimationEnd',
- 'WebkitAnimation' :'webkitAnimationEnd'
- },
- animation
- ;
- for(animation in animations){
- if( element.style[animation] !== undefined ){
- return animations[animation];
- }
- }
- return false;
- }
-
- },
-
- can: {
- transition: function(forced) {
- var
- animation = settings.animation,
- transitionExists = module.get.transitionExists(animation),
- displayType = module.get.displayType(false),
- elementClass,
- tagName,
- $clone,
- currentAnimation,
- inAnimation,
- directionExists
- ;
- if( transitionExists === undefined || forced) {
- module.verbose('Determining whether animation exists');
- elementClass = $module.attr('class');
- tagName = $module.prop('tagName');
-
- $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
- currentAnimation = $clone
- .addClass(animation)
- .removeClass(className.inward)
- .removeClass(className.outward)
- .addClass(className.animating)
- .addClass(className.transition)
- .css('animationName')
- ;
- inAnimation = $clone
- .addClass(className.inward)
- .css('animationName')
- ;
- if(!displayType) {
- displayType = $clone
- .attr('class', elementClass)
- .removeAttr('style')
- .removeClass(className.hidden)
- .removeClass(className.visible)
- .show()
- .css('display')
- ;
- module.verbose('Determining final display state', displayType);
- module.save.displayType(displayType);
- }
-
- $clone.remove();
- if(currentAnimation != inAnimation) {
- module.debug('Direction exists for animation', animation);
- directionExists = true;
- }
- else if(currentAnimation == 'none' || !currentAnimation) {
- module.debug('No animation defined in css', animation);
- return;
- }
- else {
- module.debug('Static animation found', animation, displayType);
- directionExists = false;
- }
- module.save.transitionExists(animation, directionExists);
- }
- return (transitionExists !== undefined)
- ? transitionExists
- : directionExists
- ;
- },
- animate: function() {
- // can transition does not return a value if animation does not exist
- return (module.can.transition() !== undefined);
- }
- },
-
- is: {
- animating: function() {
- return $module.hasClass(className.animating);
- },
- inward: function() {
- return $module.hasClass(className.inward);
- },
- outward: function() {
- return $module.hasClass(className.outward);
- },
- looping: function() {
- return $module.hasClass(className.looping);
- },
- occurring: function(animation) {
- animation = animation || settings.animation;
- animation = '.' + animation.replace(' ', '.');
- return ( $module.filter(animation).length > 0 );
- },
- visible: function() {
- return $module.is(':visible');
- },
- hidden: function() {
- return $module.css('visibility') === 'hidden';
- },
- supported: function() {
- return(animationEnd !== false);
- }
- },
-
- hide: function() {
- module.verbose('Hiding element');
- if( module.is.animating() ) {
- module.reset();
- }
- element.blur(); // IE will trigger focus change if element is not blurred before hiding
- module.remove.display();
- module.remove.visible();
- if($.isFunction(settings.onBeforeHide)){
- settings.onBeforeHide.call(element,function(){
- module.hideNow();
- });
- } else {
- module.hideNow();
- }
-
- },
-
- hideNow: function() {
- module.set.hidden();
- module.force.hidden();
- settings.onHide.call(element);
- settings.onComplete.call(element);
- // module.repaint();
- },
-
- show: function(display) {
- module.verbose('Showing element', display);
- if(module.force.visible()) {
- module.remove.hidden();
- module.set.visible();
- settings.onShow.call(element);
- settings.onComplete.call(element);
- // module.repaint();
- }
- },
-
- toggle: function() {
- if( module.is.visible() ) {
- module.hide();
- }
- else {
- module.show();
- }
- },
-
- stop: function() {
- module.debug('Stopping current animation');
- $module.triggerHandler(animationEnd);
- },
-
- stopAll: function() {
- module.debug('Stopping all animation');
- module.remove.queueCallback();
- $module.triggerHandler(animationEnd);
- },
-
- clear: {
- queue: function() {
- module.debug('Clearing animation queue');
- module.remove.queueCallback();
- }
- },
-
- enable: function() {
- module.verbose('Starting animation');
- $module.removeClass(className.disabled);
- },
-
- disable: function() {
- module.debug('Stopping animation');
- $module.addClass(className.disabled);
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- settings[name] = value;
- }
- }
- else {
- return settings[name];
- }
- },
- internal: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else if(value !== undefined) {
- module[name] = value;
- }
- else {
- return module[name];
- }
- },
- debug: function() {
- if(!settings.silent && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.debug.apply(console, arguments);
- }
- }
- },
- verbose: function() {
- if(!settings.silent && settings.verbose && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.verbose.apply(console, arguments);
- }
- }
- },
- error: function() {
- if(!settings.silent) {
- module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
- module.error.apply(console, arguments);
- }
- },
- performance: {
- log: function(message) {
- var
- currentTime,
- executionTime,
- previousTime
- ;
- if(settings.performance) {
- currentTime = new Date().getTime();
- previousTime = time || currentTime;
- executionTime = currentTime - previousTime;
- time = currentTime;
- performance.push({
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- 'Element' : element,
- 'Execution Time' : executionTime
- });
- }
- clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 500);
- },
- display: function() {
- var
- title = settings.name + ':',
- totalTime = 0
- ;
- time = false;
- clearTimeout(module.performance.timer);
- $.each(performance, function(index, data) {
- totalTime += data['Execution Time'];
- });
- title += ' ' + totalTime + 'ms';
- if(moduleSelector) {
- title += ' \'' + moduleSelector + '\'';
- }
- if($allModules.length > 1) {
- title += ' ' + '(' + $allModules.length + ')';
- }
- if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
- console.groupCollapsed(title);
- if(console.table) {
- console.table(performance);
- }
- else {
- $.each(performance, function(index, data) {
- console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
- });
- }
- console.groupEnd();
- }
- performance = [];
- }
- },
- // modified for transition to return invoke success
- invoke: function(query, passedArguments, context) {
- var
- object = instance,
- maxDepth,
- found,
- response
- ;
- passedArguments = passedArguments || queryArguments;
- context = element || context;
- if(typeof query == 'string' && object !== undefined) {
- query = query.split(/[\. ]/);
- maxDepth = query.length - 1;
- $.each(query, function(depth, value) {
- var camelCaseValue = (depth != maxDepth)
- ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
- : query
- ;
- if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
- object = object[camelCaseValue];
- }
- else if( object[camelCaseValue] !== undefined ) {
- found = object[camelCaseValue];
- return false;
- }
- else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
- object = object[value];
- }
- else if( object[value] !== undefined ) {
- found = object[value];
- return false;
- }
- else {
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
-
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return (found !== undefined)
- ? found
- : false
- ;
- }
- };
- module.initialize();
- })
- ;
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-// Records if CSS transition is available
-$.fn.transition.exists = {};
-
-$.fn.transition.settings = {
-
- // module info
- name : 'Transition',
-
- // hide all output from this component regardless of other settings
- silent : false,
-
- // debug content outputted to console
- debug : false,
-
- // verbose debug output
- verbose : false,
-
- // performance data output
- performance : true,
-
- // event namespace
- namespace : 'transition',
-
- // delay between animations in group
- interval : 0,
-
- // whether group animations should be reversed
- reverse : 'auto',
-
- // animation callback event
- onStart : function() {},
- onComplete : function() {},
- onShow : function() {},
- onHide : function() {},
-
- // whether timeout should be used to ensure callback fires in cases animationend does not
- useFailSafe : true,
-
- // delay in ms for fail safe
- failSafeDelay : 100,
-
- // whether EXACT animation can occur twice in a row
- allowRepeats : false,
-
- // Override final display type on visible
- displayType : false,
-
- // animation duration
- animation : 'fade',
- duration : false,
-
- // new animations will occur after previous ones
- queue : true,
-
-// whether initially inline hidden objects should be skipped for transition
- skipInlineHidden: false,
-
- metadata : {
- displayType: 'display'
- },
-
- className : {
- animating : 'animating',
- disabled : 'disabled',
- hidden : 'hidden',
- inward : 'in',
- loading : 'loading',
- looping : 'looping',
- outward : 'out',
- transition : 'transition',
- visible : 'visible'
- },
-
- // possible errors
- error: {
- noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
- repeated : 'That animation is already occurring, cancelling repeated animation',
- method : 'The method you called is not defined',
- support : 'This browser does not support CSS animations'
- }
-
-};
-
-
-})( jQuery, window, document );
-
-/*!
- * # Fomantic-UI - API
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isWindow = $.isWindow || function(obj) {
- return obj != null && obj === obj.window;
-};
-
- window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.api = $.fn.api = function(parameters) {
-
- var
- // use window context if none specified
- $allModules = $.isFunction(this)
- ? $(window)
- : $(this),
- moduleSelector = $allModules.selector || '',
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- returnedValue
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.api.settings, parameters)
- : $.extend({}, $.fn.api.settings),
-
- // internal aliases
- namespace = settings.namespace,
- metadata = settings.metadata,
- selector = settings.selector,
- error = settings.error,
- className = settings.className,
-
- // define namespaces for modules
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- // element that creates request
- $module = $(this),
- $form = $module.closest(selector.form),
-
- // context used for state
- $context = (settings.stateContext)
- ? $(settings.stateContext)
- : $module,
-
- // request details
- ajaxSettings,
- requestSettings,
- url,
- data,
- requestStartTime,
-
- // standard module
- element = this,
- context = $context[0],
- instance = $module.data(moduleNamespace),
- module
- ;
-
- module = {
-
- initialize: function() {
- if(!methodInvoked) {
- module.bind.events();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', element);
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- bind: {
- events: function() {
- var
- triggerEvent = module.get.event()
- ;
- if( triggerEvent ) {
- module.verbose('Attaching API events to element', triggerEvent);
- $module
- .on(triggerEvent + eventNamespace, module.event.trigger)
- ;
- }
- else if(settings.on == 'now') {
- module.debug('Querying API endpoint immediately');
- module.query();
- }
- }
- },
-
- decode: {
- json: function(response) {
- if(response !== undefined && typeof response == 'string') {
- try {
- response = JSON.parse(response);
- }
- catch(e) {
- // isnt json string
- }
- }
- return response;
- }
- },
-
- read: {
- cachedResponse: function(url) {
- var
- response
- ;
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- response = sessionStorage.getItem(url);
- module.debug('Using cached response', url, response);
- response = module.decode.json(response);
- return response;
- }
- },
- write: {
- cachedResponse: function(url, response) {
- if(response && response === '') {
- module.debug('Response empty, not caching', response);
- return;
- }
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- if( $.isPlainObject(response) ) {
- response = JSON.stringify(response);
- }
- sessionStorage.setItem(url, response);
- module.verbose('Storing cached response for url', url, response);
- }
- },
-
- query: function() {
-
- if(module.is.disabled()) {
- module.debug('Element is disabled API request aborted');
- return;
- }
-
- if(module.is.loading()) {
- if(settings.interruptRequests) {
- module.debug('Interrupting previous request');
- module.abort();
- }
- else {
- module.debug('Cancelling request, previous request is still pending');
- return;
- }
- }
-
- // pass element metadata to url (value, text)
- if(settings.defaultData) {
- $.extend(true, settings.urlData, module.get.defaultData());
- }
-
- // Add form content
- if(settings.serializeForm) {
- settings.data = module.add.formData(settings.data);
- }
-
- // call beforesend and get any settings changes
- requestSettings = module.get.settings();
-
- // check if before send cancelled request
- if(requestSettings === false) {
- module.cancelled = true;
- module.error(error.beforeSend);
- return;
- }
- else {
- module.cancelled = false;
- }
-
- // get url
- url = module.get.templatedURL();
-
- if(!url && !module.is.mocked()) {
- module.error(error.missingURL);
- return;
- }
-
- // replace variables
- url = module.add.urlData( url );
- // missing url parameters
- if( !url && !module.is.mocked()) {
- return;
- }
-
- requestSettings.url = settings.base + url;
-
- // look for jQuery ajax parameters in settings
- ajaxSettings = $.extend(true, {}, settings, {
- type : settings.method || settings.type,
- data : data,
- url : settings.base + url,
- beforeSend : settings.beforeXHR,
- success : function() {},
- failure : function() {},
- complete : function() {}
- });
-
- module.debug('Querying URL', ajaxSettings.url);
- module.verbose('Using AJAX settings', ajaxSettings);
- if(settings.cache === 'local' && module.read.cachedResponse(url)) {
- module.debug('Response returned from local cache');
- module.request = module.create.request();
- module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
- return;
- }
-
- if( !settings.throttle ) {
- module.debug('Sending request', data, ajaxSettings.method);
- module.send.request();
- }
- else {
- if(!settings.throttleFirstRequest && !module.timer) {
- module.debug('Sending request', data, ajaxSettings.method);
- module.send.request();
- module.timer = setTimeout(function(){}, settings.throttle);
- }
- else {
- module.debug('Throttling request', settings.throttle);
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- if(module.timer) {
- delete module.timer;
- }
- module.debug('Sending throttled request', data, ajaxSettings.method);
- module.send.request();
- }, settings.throttle);
- }
- }
-
- },
-
- should: {
- removeError: function() {
- return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );
- }
- },
-
- is: {
- disabled: function() {
- return ($module.filter(selector.disabled).length > 0);
- },
- expectingJSON: function() {
- return settings.dataType === 'json' || settings.dataType === 'jsonp';
- },
- form: function() {
- return $module.is('form') || $context.is('form');
- },
- mocked: function() {
- return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);
- },
- input: function() {
- return $module.is('input');
- },
- loading: function() {
- return (module.request)
- ? (module.request.state() == 'pending')
- : false
- ;
- },
- abortedRequest: function(xhr) {
- if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {
- module.verbose('XHR request determined to be aborted');
- return true;
- }
- else {
- module.verbose('XHR request was not aborted');
- return false;
- }
- },
- validResponse: function(response) {
- if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {
- module.verbose('Response is not JSON, skipping validation', settings.successTest, response);
- return true;
- }
- module.debug('Checking JSON returned success', settings.successTest, response);
- if( settings.successTest(response) ) {
- module.debug('Response passed success test', response);
- return true;
- }
- else {
- module.debug('Response failed success test', response);
- return false;
- }
- }
- },
-
- was: {
- cancelled: function() {
- return (module.cancelled || false);
- },
- succesful: function() {
- module.verbose('This behavior will be deleted due to typo. Use "was successful" instead.');
- return module.was.successful();
- },
- successful: function() {
- return (module.request && module.request.state() == 'resolved');
- },
- failure: function() {
- return (module.request && module.request.state() == 'rejected');
- },
- complete: function() {
- return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );
- }
- },
-
- add: {
- urlData: function(url, urlData) {
- var
- requiredVariables,
- optionalVariables
- ;
- if(url) {
- requiredVariables = url.match(settings.regExp.required);
- optionalVariables = url.match(settings.regExp.optional);
- urlData = urlData || settings.urlData;
- if(requiredVariables) {
- module.debug('Looking for required URL variables', requiredVariables);
- $.each(requiredVariables, function(index, templatedString) {
- var
- // allow legacy {$var} style
- variable = (templatedString.indexOf('$') !== -1)
- ? templatedString.substr(2, templatedString.length - 3)
- : templatedString.substr(1, templatedString.length - 2),
- value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
- ? urlData[variable]
- : ($module.data(variable) !== undefined)
- ? $module.data(variable)
- : ($context.data(variable) !== undefined)
- ? $context.data(variable)
- : urlData[variable]
- ;
- // remove value
- if(value === undefined) {
- module.error(error.requiredParameter, variable, url);
- url = false;
- return false;
- }
- else {
- module.verbose('Found required variable', variable, value);
- value = (settings.encodeParameters)
- ? module.get.urlEncodedValue(value)
- : value
- ;
- url = url.replace(templatedString, value);
- }
- });
- }
- if(optionalVariables) {
- module.debug('Looking for optional URL variables', requiredVariables);
- $.each(optionalVariables, function(index, templatedString) {
- var
- // allow legacy {/$var} style
- variable = (templatedString.indexOf('$') !== -1)
- ? templatedString.substr(3, templatedString.length - 4)
- : templatedString.substr(2, templatedString.length - 3),
- value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
- ? urlData[variable]
- : ($module.data(variable) !== undefined)
- ? $module.data(variable)
- : ($context.data(variable) !== undefined)
- ? $context.data(variable)
- : urlData[variable]
- ;
- // optional replacement
- if(value !== undefined) {
- module.verbose('Optional variable Found', variable, value);
- url = url.replace(templatedString, value);
- }
- else {
- module.verbose('Optional variable not found', variable);
- // remove preceding slash if set
- if(url.indexOf('/' + templatedString) !== -1) {
- url = url.replace('/' + templatedString, '');
- }
- else {
- url = url.replace(templatedString, '');
- }
- }
- });
- }
- }
- return url;
- },
- formData: function(data) {
- var
- canSerialize = ($.fn.serializeObject !== undefined),
- formData = (canSerialize)
- ? $form.serializeObject()
- : $form.serialize(),
- hasOtherData
- ;
- data = data || settings.data;
- hasOtherData = $.isPlainObject(data);
-
- if(hasOtherData) {
- if(canSerialize) {
- module.debug('Extending existing data with form data', data, formData);
- data = $.extend(true, {}, data, formData);
- }
- else {
- module.error(error.missingSerialize);
- module.debug('Cant extend data. Replacing data with form data', data, formData);
- data = formData;
- }
- }
- else {
- module.debug('Adding form data', formData);
- data = formData;
- }
- return data;
- }
- },
-
- send: {
- request: function() {
- module.set.loading();
- module.request = module.create.request();
- if( module.is.mocked() ) {
- module.mockedXHR = module.create.mockedXHR();
- }
- else {
- module.xhr = module.create.xhr();
- }
- settings.onRequest.call(context, module.request, module.xhr);
- }
- },
-
- event: {
- trigger: function(event) {
- module.query();
- if(event.type == 'submit' || event.type == 'click') {
- event.preventDefault();
- }
- },
- xhr: {
- always: function() {
- // nothing special
- },
- done: function(response, textStatus, xhr) {
- var
- context = this,
- elapsedTime = (new Date().getTime() - requestStartTime),
- timeLeft = (settings.loadingDuration - elapsedTime),
- translatedResponse = ( $.isFunction(settings.onResponse) )
- ? module.is.expectingJSON() && !settings.rawResponse
- ? settings.onResponse.call(context, $.extend(true, {}, response))
- : settings.onResponse.call(context, response)
- : false
- ;
- timeLeft = (timeLeft > 0)
- ? timeLeft
- : 0
- ;
- if(translatedResponse) {
- module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);
- response = translatedResponse;
- }
- if(timeLeft > 0) {
- module.debug('Response completed early delaying state change by', timeLeft);
- }
- setTimeout(function() {
- if( module.is.validResponse(response) ) {
- module.request.resolveWith(context, [response, xhr]);
- }
- else {
- module.request.rejectWith(context, [xhr, 'invalid']);
- }
- }, timeLeft);
- },
- fail: function(xhr, status, httpMessage) {
- var
- context = this,
- elapsedTime = (new Date().getTime() - requestStartTime),
- timeLeft = (settings.loadingDuration - elapsedTime)
- ;
- timeLeft = (timeLeft > 0)
- ? timeLeft
- : 0
- ;
- if(timeLeft > 0) {
- module.debug('Response completed early delaying state change by', timeLeft);
- }
- setTimeout(function() {
- if( module.is.abortedRequest(xhr) ) {
- module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);
- }
- else {
- module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);
- }
- }, timeLeft);
- }
- },
- request: {
- done: function(response, xhr) {
- module.debug('Successful API Response', response);
- if(settings.cache === 'local' && url) {
- module.write.cachedResponse(url, response);
- module.debug('Saving server response locally', module.cache);
- }
- settings.onSuccess.call(context, response, $module, xhr);
- },
- complete: function(firstParameter, secondParameter) {
- var
- xhr,
- response
- ;
- // have to guess callback parameters based on request success
- if( module.was.successful() ) {
- response = firstParameter;
- xhr = secondParameter;
- }
- else {
- xhr = firstParameter;
- response = module.get.responseFromXHR(xhr);
- }
- module.remove.loading();
- settings.onComplete.call(context, response, $module, xhr);
- },
- fail: function(xhr, status, httpMessage) {
- var
- // pull response from xhr if available
- response = module.get.responseFromXHR(xhr),
- errorMessage = module.get.errorFromRequest(response, status, httpMessage)
- ;
- if(status == 'aborted') {
- module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);
- settings.onAbort.call(context, status, $module, xhr);
- return true;
- }
- else if(status == 'invalid') {
- module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);
- }
- else if(status == 'error') {
- if(xhr !== undefined) {
- module.debug('XHR produced a server error', status, httpMessage);
- // make sure we have an error to display to console
- if( (xhr.status < 200 || xhr.status >= 300) && httpMessage !== undefined && httpMessage !== '') {
- module.error(error.statusMessage + httpMessage, ajaxSettings.url);
- }
- settings.onError.call(context, errorMessage, $module, xhr);
- }
- }
-
- if(settings.errorDuration && status !== 'aborted') {
- module.debug('Adding error state');
- module.set.error();
- if( module.should.removeError() ) {
- setTimeout(module.remove.error, settings.errorDuration);
- }
- }
- module.debug('API Request failed', errorMessage, xhr);
- settings.onFailure.call(context, response, $module, xhr);
- }
- }
- },
-
- create: {
-
- request: function() {
- // api request promise
- return $.Deferred()
- .always(module.event.request.complete)
- .done(module.event.request.done)
- .fail(module.event.request.fail)
- ;
- },
-
- mockedXHR: function () {
- var
- // xhr does not simulate these properties of xhr but must return them
- textStatus = false,
- status = false,
- httpMessage = false,
- responder = settings.mockResponse || settings.response,
- asyncResponder = settings.mockResponseAsync || settings.responseAsync,
- asyncCallback,
- response,
- mockedXHR
- ;
-
- mockedXHR = $.Deferred()
- .always(module.event.xhr.complete)
- .done(module.event.xhr.done)
- .fail(module.event.xhr.fail)
- ;
-
- if(responder) {
- if( $.isFunction(responder) ) {
- module.debug('Using specified synchronous callback', responder);
- response = responder.call(context, requestSettings);
- }
- else {
- module.debug('Using settings specified response', responder);
- response = responder;
- }
- // simulating response
- mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
- }
- else if( $.isFunction(asyncResponder) ) {
- asyncCallback = function(response) {
- module.debug('Async callback returned response', response);
-
- if(response) {
- mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
- }
- else {
- mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);
- }
- };
- module.debug('Using specified async response callback', asyncResponder);
- asyncResponder.call(context, requestSettings, asyncCallback);
- }
- return mockedXHR;
- },
-
- xhr: function() {
- var
- xhr
- ;
- // ajax request promise
- xhr = $.ajax(ajaxSettings)
- .always(module.event.xhr.always)
- .done(module.event.xhr.done)
- .fail(module.event.xhr.fail)
- ;
- module.verbose('Created server request', xhr, ajaxSettings);
- return xhr;
- }
- },
-
- set: {
- error: function() {
- module.verbose('Adding error state to element', $context);
- $context.addClass(className.error);
- },
- loading: function() {
- module.verbose('Adding loading state to element', $context);
- $context.addClass(className.loading);
- requestStartTime = new Date().getTime();
- }
- },
-
- remove: {
- error: function() {
- module.verbose('Removing error state from element', $context);
- $context.removeClass(className.error);
- },
- loading: function() {
- module.verbose('Removing loading state from element', $context);
- $context.removeClass(className.loading);
- }
- },
-
- get: {
- responseFromXHR: function(xhr) {
- return $.isPlainObject(xhr)
- ? (module.is.expectingJSON())
- ? module.decode.json(xhr.responseText)
- : xhr.responseText
- : false
- ;
- },
- errorFromRequest: function(response, status, httpMessage) {
- return ($.isPlainObject(response) && response.error !== undefined)
- ? response.error // use json error message
- : (settings.error[status] !== undefined) // use server error message
- ? settings.error[status]
- : httpMessage
- ;
- },
- request: function() {
- return module.request || false;
- },
- xhr: function() {
- return module.xhr || false;
- },
- settings: function() {
- var
- runSettings
- ;
- runSettings = settings.beforeSend.call($module, settings);
- if(runSettings) {
- if(runSettings.success !== undefined) {
- module.debug('Legacy success callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.success);
- runSettings.onSuccess = runSettings.success;
- }
- if(runSettings.failure !== undefined) {
- module.debug('Legacy failure callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.failure);
- runSettings.onFailure = runSettings.failure;
- }
- if(runSettings.complete !== undefined) {
- module.debug('Legacy complete callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.complete);
- runSettings.onComplete = runSettings.complete;
- }
- }
- if(runSettings === undefined) {
- module.error(error.noReturnedValue);
- }
- if(runSettings === false) {
- return runSettings;
- }
- return (runSettings !== undefined)
- ? $.extend(true, {}, runSettings)
- : $.extend(true, {}, settings)
- ;
- },
- urlEncodedValue: function(value) {
- var
- decodedValue = window.decodeURIComponent(value),
- encodedValue = window.encodeURIComponent(value),
- alreadyEncoded = (decodedValue !== value)
- ;
- if(alreadyEncoded) {
- module.debug('URL value is already encoded, avoiding double encoding', value);
- return value;
- }
- module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
- return encodedValue;
- },
- defaultData: function() {
- var
- data = {}
- ;
- if( !$.isWindow(element) ) {
- if( module.is.input() ) {
- data.value = $module.val();
- }
- else if( module.is.form() ) {
-
- }
- else {
- data.text = $module.text();
- }
- }
- return data;
- },
- event: function() {
- if( $.isWindow(element) || settings.on == 'now' ) {
- module.debug('API called without element, no events attached');
- return false;
- }
- else if(settings.on == 'auto') {
- if( $module.is('input') ) {
- return (element.oninput !== undefined)
- ? 'input'
- : (element.onpropertychange !== undefined)
- ? 'propertychange'
- : 'keyup'
- ;
- }
- else if( $module.is('form') ) {
- return 'submit';
- }
- else {
- return 'click';
- }
- }
- else {
- return settings.on;
- }
- },
- templatedURL: function(action) {
- action = action || $module.data(metadata.action) || settings.action || false;
- url = $module.data(metadata.url) || settings.url || false;
- if(url) {
- module.debug('Using specified url', url);
- return url;
- }
- if(action) {
- module.debug('Looking up url for action', action, settings.api);
- if(settings.api[action] === undefined && !module.is.mocked()) {
- module.error(error.missingAction, settings.action, settings.api);
- return;
- }
- url = settings.api[action];
- }
- else if( module.is.form() ) {
- url = $module.attr('action') || $context.attr('action') || false;
- module.debug('No url or action specified, defaulting to form action', url);
- }
- return url;
- }
- },
-
- abort: function() {
- var
- xhr = module.get.xhr()
- ;
- if( xhr && xhr.state() !== 'resolved') {
- module.debug('Cancelling API request');
- xhr.abort();
- }
- },
-
- // reset state
- reset: function() {
- module.remove.error();
- module.remove.loading();
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- settings[name] = value;
- }
- }
- else {
- return settings[name];
- }
- },
- internal: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else if(value !== undefined) {
- module[name] = value;
- }
- else {
- return module[name];
- }
- },
- debug: function() {
- if(!settings.silent && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.debug.apply(console, arguments);
- }
- }
- },
- verbose: function() {
- if(!settings.silent && settings.verbose && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.verbose.apply(console, arguments);
- }
- }
- },
- error: function() {
- if(!settings.silent) {
- module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
- module.error.apply(console, arguments);
- }
- },
- performance: {
- log: function(message) {
- var
- currentTime,
- executionTime,
- previousTime
- ;
- if(settings.performance) {
- currentTime = new Date().getTime();
- previousTime = time || currentTime;
- executionTime = currentTime - previousTime;
- time = currentTime;
- performance.push({
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- //'Element' : element,
- 'Execution Time' : executionTime
- });
- }
- clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 500);
- },
- display: function() {
- var
- title = settings.name + ':',
- totalTime = 0
- ;
- time = false;
- clearTimeout(module.performance.timer);
- $.each(performance, function(index, data) {
- totalTime += data['Execution Time'];
- });
- title += ' ' + totalTime + 'ms';
- if(moduleSelector) {
- title += ' \'' + moduleSelector + '\'';
- }
- if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
- console.groupCollapsed(title);
- if(console.table) {
- console.table(performance);
- }
- else {
- $.each(performance, function(index, data) {
- console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
- });
- }
- console.groupEnd();
- }
- performance = [];
- }
- },
- invoke: function(query, passedArguments, context) {
- var
- object = instance,
- maxDepth,
- found,
- response
- ;
- passedArguments = passedArguments || queryArguments;
- context = element || context;
- if(typeof query == 'string' && object !== undefined) {
- query = query.split(/[\. ]/);
- maxDepth = query.length - 1;
- $.each(query, function(depth, value) {
- var camelCaseValue = (depth != maxDepth)
- ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
- : query
- ;
- if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
- object = object[camelCaseValue];
- }
- else if( object[camelCaseValue] !== undefined ) {
- found = object[camelCaseValue];
- return false;
- }
- else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
- object = object[value];
- }
- else if( object[value] !== undefined ) {
- found = object[value];
- return false;
- }
- else {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
-
- if(methodInvoked) {
- if(instance === undefined) {
- module.initialize();
- }
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.api.settings = {
-
- name : 'API',
- namespace : 'api',
-
- debug : false,
- verbose : false,
- performance : true,
-
- // object containing all templates endpoints
- api : {},
-
- // whether to cache responses
- cache : true,
-
- // whether new requests should abort previous requests
- interruptRequests : true,
-
- // event binding
- on : 'auto',
-
- // context for applying state classes
- stateContext : false,
-
- // duration for loading state
- loadingDuration : 0,
-
- // whether to hide errors after a period of time
- hideError : 'auto',
-
- // duration for error state
- errorDuration : 2000,
-
- // whether parameters should be encoded with encodeURIComponent
- encodeParameters : true,
-
- // API action to use
- action : false,
-
- // templated URL to use
- url : false,
-
- // base URL to apply to all endpoints
- base : '',
-
- // data that will
- urlData : {},
-
- // whether to add default data to url data
- defaultData : true,
-
- // whether to serialize closest form
- serializeForm : false,
-
- // how long to wait before request should occur
- throttle : 0,
-
- // whether to throttle first request or only repeated
- throttleFirstRequest : true,
-
- // standard ajax settings
- method : 'get',
- data : {},
- dataType : 'json',
-
- // mock response
- mockResponse : false,
- mockResponseAsync : false,
-
- // aliases for mock
- response : false,
- responseAsync : false,
-
-// whether onResponse should work with response value without force converting into an object
- rawResponse : false,
-
- // callbacks before request
- beforeSend : function(settings) { return settings; },
- beforeXHR : function(xhr) {},
- onRequest : function(promise, xhr) {},
-
- // after request
- onResponse : false, // function(response) { },
-
- // response was successful, if JSON passed validation
- onSuccess : function(response, $module) {},
-
- // request finished without aborting
- onComplete : function(response, $module) {},
-
- // failed JSON success test
- onFailure : function(response, $module) {},
-
- // server error
- onError : function(errorMessage, $module) {},
-
- // request aborted
- onAbort : function(errorMessage, $module) {},
-
- successTest : false,
-
- // errors
- error : {
- beforeSend : 'The before send function has aborted the request',
- error : 'There was an error with your request',
- exitConditions : 'API Request Aborted. Exit conditions met',
- JSONParse : 'JSON could not be parsed during error handling',
- legacyParameters : 'You are using legacy API success callback names',
- method : 'The method you called is not defined',
- missingAction : 'API action used but no url was defined',
- missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',
- missingURL : 'No URL specified for api event',
- noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
- noStorage : 'Caching responses locally requires session storage',
- parseError : 'There was an error parsing your request',
- requiredParameter : 'Missing a required URL parameter: ',
- statusMessage : 'Server gave an error: ',
- timeout : 'Your request timed out'
- },
-
- regExp : {
- required : /\{\$*[A-z0-9]+\}/g,
- optional : /\{\/\$*[A-z0-9]+\}/g,
- },
-
- className: {
- loading : 'loading',
- error : 'error'
- },
-
- selector: {
- disabled : '.disabled',
- form : 'form'
- },
-
- metadata: {
- action : 'action',
- url : 'url'
- }
-};
-
-
-
-})( jQuery, window, document );
-
-/*!
- * # Fomantic-UI - State
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-"use strict";
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.state = function(parameters) {
- var
- $allModules = $(this),
-
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- returnedValue
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.state.settings, parameters)
- : $.extend({}, $.fn.state.settings),
-
- error = settings.error,
- metadata = settings.metadata,
- className = settings.className,
- namespace = settings.namespace,
- states = settings.states,
- text = settings.text,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- module
- ;
- module = {
-
- initialize: function() {
- module.verbose('Initializing module');
-
- // allow module to guess desired state based on element
- if(settings.automatic) {
- module.add.defaults();
- }
-
- // bind events with delegated events
- if(settings.context && moduleSelector !== '') {
- $(settings.context)
- .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
- .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
- .on(moduleSelector, 'click' + eventNamespace, module.toggle.state)
- ;
- }
- else {
- $module
- .on('mouseenter' + eventNamespace, module.change.text)
- .on('mouseleave' + eventNamespace, module.reset.text)
- .on('click' + eventNamespace, module.toggle.state)
- ;
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module', instance);
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache');
- $module = $(element);
- },
-
- add: {
- defaults: function() {
- var
- userStates = parameters && $.isPlainObject(parameters.states)
- ? parameters.states
- : {}
- ;
- $.each(settings.defaults, function(type, typeStates) {
- if( module.is[type] !== undefined && module.is[type]() ) {
- module.verbose('Adding default states', type, element);
- $.extend(settings.states, typeStates, userStates);
- }
- });
- }
- },
-
- is: {
-
- active: function() {
- return $module.hasClass(className.active);
- },
- loading: function() {
- return $module.hasClass(className.loading);
- },
- inactive: function() {
- return !( $module.hasClass(className.active) );
- },
- state: function(state) {
- if(className[state] === undefined) {
- return false;
- }
- return $module.hasClass( className[state] );
- },
-
- enabled: function() {
- return !( $module.is(settings.filter.active) );
- },
- disabled: function() {
- return ( $module.is(settings.filter.active) );
- },
- textEnabled: function() {
- return !( $module.is(settings.filter.text) );
- },
-
- // definitions for automatic type detection
- button: function() {
- return $module.is('.button:not(a, .submit)');
- },
- input: function() {
- return $module.is('input');
- },
- progress: function() {
- return $module.is('.ui.progress');
- }
- },
-
- allow: function(state) {
- module.debug('Now allowing state', state);
- states[state] = true;
- },
- disallow: function(state) {
- module.debug('No longer allowing', state);
- states[state] = false;
- },
-
- allows: function(state) {
- return states[state] || false;
- },
-
- enable: function() {
- $module.removeClass(className.disabled);
- },
-
- disable: function() {
- $module.addClass(className.disabled);
- },
-
- setState: function(state) {
- if(module.allows(state)) {
- $module.addClass( className[state] );
- }
- },
-
- removeState: function(state) {
- if(module.allows(state)) {
- $module.removeClass( className[state] );
- }
- },
-
- toggle: {
- state: function() {
- var
- apiRequest,
- requestCancelled
- ;
- if( module.allows('active') && module.is.enabled() ) {
- module.refresh();
- if($.fn.api !== undefined) {
- apiRequest = $module.api('get request');
- requestCancelled = $module.api('was cancelled');
- if( requestCancelled ) {
- module.debug('API Request cancelled by beforesend');
- settings.activateTest = function(){ return false; };
- settings.deactivateTest = function(){ return false; };
- }
- else if(apiRequest) {
- module.listenTo(apiRequest);
- return;
- }
- }
- module.change.state();
- }
- }
- },
-
- listenTo: function(apiRequest) {
- module.debug('API request detected, waiting for state signal', apiRequest);
- if(apiRequest) {
- if(text.loading) {
- module.update.text(text.loading);
- }
- $.when(apiRequest)
- .then(function() {
- if(apiRequest.state() == 'resolved') {
- module.debug('API request succeeded');
- settings.activateTest = function(){ return true; };
- settings.deactivateTest = function(){ return true; };
- }
- else {
- module.debug('API request failed');
- settings.activateTest = function(){ return false; };
- settings.deactivateTest = function(){ return false; };
- }
- module.change.state();
- })
- ;
- }
- },
-
- // checks whether active/inactive state can be given
- change: {
-
- state: function() {
- module.debug('Determining state change direction');
- // inactive to active change
- if( module.is.inactive() ) {
- module.activate();
- }
- else {
- module.deactivate();
- }
- if(settings.sync) {
- module.sync();
- }
- settings.onChange.call(element);
- },
-
- text: function() {
- if( module.is.textEnabled() ) {
- if(module.is.disabled() ) {
- module.verbose('Changing text to disabled text', text.hover);
- module.update.text(text.disabled);
- }
- else if( module.is.active() ) {
- if(text.hover) {
- module.verbose('Changing text to hover text', text.hover);
- module.update.text(text.hover);
- }
- else if(text.deactivate) {
- module.verbose('Changing text to deactivating text', text.deactivate);
- module.update.text(text.deactivate);
- }
- }
- else {
- if(text.hover) {
- module.verbose('Changing text to hover text', text.hover);
- module.update.text(text.hover);
- }
- else if(text.activate){
- module.verbose('Changing text to activating text', text.activate);
- module.update.text(text.activate);
- }
- }
- }
- }
-
- },
-
- activate: function() {
- if( settings.activateTest.call(element) ) {
- module.debug('Setting state to active');
- $module
- .addClass(className.active)
- ;
- module.update.text(text.active);
- settings.onActivate.call(element);
- }
- },
-
- deactivate: function() {
- if( settings.deactivateTest.call(element) ) {
- module.debug('Setting state to inactive');
- $module
- .removeClass(className.active)
- ;
- module.update.text(text.inactive);
- settings.onDeactivate.call(element);
- }
- },
-
- sync: function() {
- module.verbose('Syncing other buttons to current state');
- if( module.is.active() ) {
- $allModules
- .not($module)
- .state('activate');
- }
- else {
- $allModules
- .not($module)
- .state('deactivate')
- ;
- }
- },
-
- get: {
- text: function() {
- return (settings.selector.text)
- ? $module.find(settings.selector.text).text()
- : $module.html()
- ;
- },
- textFor: function(state) {
- return text[state] || false;
- }
- },
-
- flash: {
- text: function(text, duration, callback) {
- var
- previousText = module.get.text()
- ;
- module.debug('Flashing text message', text, duration);
- text = text || settings.text.flash;
- duration = duration || settings.flashDuration;
- callback = callback || function() {};
- module.update.text(text);
- setTimeout(function(){
- module.update.text(previousText);
- callback.call(element);
- }, duration);
- }
- },
-
- reset: {
- // on mouseout sets text to previous value
- text: function() {
- var
- activeText = text.active || $module.data(metadata.storedText),
- inactiveText = text.inactive || $module.data(metadata.storedText)
- ;
- if( module.is.textEnabled() ) {
- if( module.is.active() && activeText) {
- module.verbose('Resetting active text', activeText);
- module.update.text(activeText);
- }
- else if(inactiveText) {
- module.verbose('Resetting inactive text', activeText);
- module.update.text(inactiveText);
- }
- }
- }
- },
-
- update: {
- text: function(text) {
- var
- currentText = module.get.text()
- ;
- if(text && text !== currentText) {
- module.debug('Updating text', text);
- if(settings.selector.text) {
- $module
- .data(metadata.storedText, text)
- .find(settings.selector.text)
- .text(text)
- ;
- }
- else {
- $module
- .data(metadata.storedText, text)
- .html(text)
- ;
- }
- }
- else {
- module.debug('Text is already set, ignoring update', text);
- }
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- settings[name] = value;
- }
- }
- else {
- return settings[name];
- }
- },
- internal: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else if(value !== undefined) {
- module[name] = value;
- }
- else {
- return module[name];
- }
- },
- debug: function() {
- if(!settings.silent && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.debug.apply(console, arguments);
- }
- }
- },
- verbose: function() {
- if(!settings.silent && settings.verbose && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.verbose.apply(console, arguments);
- }
- }
- },
- error: function() {
- if(!settings.silent) {
- module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
- module.error.apply(console, arguments);
- }
- },
- performance: {
- log: function(message) {
- var
- currentTime,
- executionTime,
- previousTime
- ;
- if(settings.performance) {
- currentTime = new Date().getTime();
- previousTime = time || currentTime;
- executionTime = currentTime - previousTime;
- time = currentTime;
- performance.push({
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- 'Element' : element,
- 'Execution Time' : executionTime
- });
- }
- clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 500);
- },
- display: function() {
- var
- title = settings.name + ':',
- totalTime = 0
- ;
- time = false;
- clearTimeout(module.performance.timer);
- $.each(performance, function(index, data) {
- totalTime += data['Execution Time'];
- });
- title += ' ' + totalTime + 'ms';
- if(moduleSelector) {
- title += ' \'' + moduleSelector + '\'';
- }
- if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
- console.groupCollapsed(title);
- if(console.table) {
- console.table(performance);
- }
- else {
- $.each(performance, function(index, data) {
- console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
- });
- }
- console.groupEnd();
- }
- performance = [];
- }
- },
- invoke: function(query, passedArguments, context) {
- var
- object = instance,
- maxDepth,
- found,
- response
- ;
- passedArguments = passedArguments || queryArguments;
- context = element || context;
- if(typeof query == 'string' && object !== undefined) {
- query = query.split(/[\. ]/);
- maxDepth = query.length - 1;
- $.each(query, function(depth, value) {
- var camelCaseValue = (depth != maxDepth)
- ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
- : query
- ;
- if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
- object = object[camelCaseValue];
- }
- else if( object[camelCaseValue] !== undefined ) {
- found = object[camelCaseValue];
- return false;
- }
- else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
- object = object[value];
- }
- else if( object[value] !== undefined ) {
- found = object[value];
- return false;
- }
- else {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
-
- if(methodInvoked) {
- if(instance === undefined) {
- module.initialize();
- }
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.state.settings = {
-
- // module info
- name : 'State',
-
- // debug output
- debug : false,
-
- // verbose debug output
- verbose : false,
-
- // namespace for events
- namespace : 'state',
-
- // debug data includes performance
- performance : true,
-
- // callback occurs on state change
- onActivate : function() {},
- onDeactivate : function() {},
- onChange : function() {},
-
- // state test functions
- activateTest : function() { return true; },
- deactivateTest : function() { return true; },
-
- // whether to automatically map default states
- automatic : true,
-
- // activate / deactivate changes all elements instantiated at same time
- sync : false,
-
- // default flash text duration, used for temporarily changing text of an element
- flashDuration : 1000,
-
- // selector filter
- filter : {
- text : '.loading, .disabled',
- active : '.disabled'
- },
-
- context : false,
-
- // error
- error: {
- beforeSend : 'The before send function has cancelled state change',
- method : 'The method you called is not defined.'
- },
-
- // metadata
- metadata: {
- promise : 'promise',
- storedText : 'stored-text'
- },
-
- // change class on state
- className: {
- active : 'active',
- disabled : 'disabled',
- error : 'error',
- loading : 'loading',
- success : 'success',
- warning : 'warning'
- },
-
- selector: {
- // selector for text node
- text: false
- },
-
- defaults : {
- input: {
- disabled : true,
- loading : true,
- active : true
- },
- button: {
- disabled : true,
- loading : true,
- active : true,
- },
- progress: {
- active : true,
- success : true,
- warning : true,
- error : true
- }
- },
-
- states : {
- active : true,
- disabled : true,
- error : true,
- loading : true,
- success : true,
- warning : true
- },
-
- text : {
- disabled : false,
- flash : false,
- hover : false,
- active : false,
- inactive : false,
- activate : false,
- deactivate : false
- }
-
-};
-
-
-
-})( jQuery, window, document );
-
-/*!
- * # Fomantic-UI - Visibility
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.visibility = function(parameters) {
- var
- $allModules = $(this),
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
- returnedValue,
-
- moduleCount = $allModules.length,
- loadedCount = 0
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.visibility.settings, parameters)
- : $.extend({}, $.fn.visibility.settings),
-
- className = settings.className,
- namespace = settings.namespace,
- error = settings.error,
- metadata = settings.metadata,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $window = $(window),
-
- $module = $(this),
- $context = $(settings.context),
-
- $placeholder,
-
- instance = $module.data(moduleNamespace),
-
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
- element = this,
- disabled = false,
-
- contextObserver,
- observer,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing', settings);
-
- module.setup.cache();
-
- if( module.should.trackChanges() ) {
-
- if(settings.type == 'image') {
- module.setup.image();
- }
- if(settings.type == 'fixed') {
- module.setup.fixed();
- }
-
- if(settings.observeChanges) {
- module.observeChanges();
- }
- module.bind.events();
- }
-
- module.save.position();
- if( !module.is.visible() ) {
- module.error(error.visible, $module);
- }
-
- if(settings.initialCheck) {
- module.checkVisibility();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.debug('Storing instance', module);
- $module
- .data(moduleNamespace, module)
- ;
- instance = module;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module');
- if(observer) {
- observer.disconnect();
- }
- if(contextObserver) {
- contextObserver.disconnect();
- }
- $window
- .off('load' + eventNamespace, module.event.load)
- .off('resize' + eventNamespace, module.event.resize)
- ;
- $context
- .off('scroll' + eventNamespace, module.event.scroll)
- .off('scrollchange' + eventNamespace, module.event.scrollchange)
- ;
- if(settings.type == 'fixed') {
- module.resetFixed();
- module.remove.placeholder();
- }
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- contextObserver = new MutationObserver(module.event.contextChanged);
- observer = new MutationObserver(module.event.changed);
- contextObserver.observe(document, {
- childList : true,
- subtree : true
- });
- observer.observe(element, {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', observer);
- }
- },
-
- bind: {
- events: function() {
- module.verbose('Binding visibility events to scroll and resize');
- if(settings.refreshOnLoad) {
- $window
- .on('load' + eventNamespace, module.event.load)
- ;
- }
- $window
- .on('resize' + eventNamespace, module.event.resize)
- ;
- // pub/sub pattern
- $context
- .off('scroll' + eventNamespace)
- .on('scroll' + eventNamespace, module.event.scroll)
- .on('scrollchange' + eventNamespace, module.event.scrollchange)
- ;
- }
- },
-
- event: {
- changed: function(mutations) {
- module.verbose('DOM tree modified, updating visibility calculations');
- module.timer = setTimeout(function() {
- module.verbose('DOM tree modified, updating sticky menu');
- module.refresh();
- }, 100);
- },
- contextChanged: function(mutations) {
- [].forEach.call(mutations, function(mutation) {
- if(mutation.removedNodes) {
- [].forEach.call(mutation.removedNodes, function(node) {
- if(node == element || $(node).find(element).length > 0) {
- module.debug('Element removed from DOM, tearing down events');
- module.destroy();
- }
- });
- }
- });
- },
- resize: function() {
- module.debug('Window resized');
- if(settings.refreshOnResize) {
- requestAnimationFrame(module.refresh);
- }
- },
- load: function() {
- module.debug('Page finished loading');
- requestAnimationFrame(module.refresh);
- },
- // publishes scrollchange event on one scroll
- scroll: function() {
- if(settings.throttle) {
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
- }, settings.throttle);
- }
- else {
- requestAnimationFrame(function() {
- $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
- });
- }
- },
- // subscribes to scrollchange
- scrollchange: function(event, scrollPosition) {
- module.checkVisibility(scrollPosition);
- },
- },
-
- precache: function(images, callback) {
- if (!(images instanceof Array)) {
- images = [images];
- }
- var
- imagesLength = images.length,
- loadedCounter = 0,
- cache = [],
- cacheImage = document.createElement('img'),
- handleLoad = function() {
- loadedCounter++;
- if (loadedCounter >= images.length) {
- if ($.isFunction(callback)) {
- callback();
- }
- }
- }
- ;
- while (imagesLength--) {
- cacheImage = document.createElement('img');
- cacheImage.onload = handleLoad;
- cacheImage.onerror = handleLoad;
- cacheImage.src = images[imagesLength];
- cache.push(cacheImage);
- }
- },
-
- enableCallbacks: function() {
- module.debug('Allowing callbacks to occur');
- disabled = false;
- },
-
- disableCallbacks: function() {
- module.debug('Disabling all callbacks temporarily');
- disabled = true;
- },
-
- should: {
- trackChanges: function() {
- if(methodInvoked) {
- module.debug('One time query, no need to bind events');
- return false;
- }
- module.debug('Callbacks being attached');
- return true;
- }
- },
-
- setup: {
- cache: function() {
- module.cache = {
- occurred : {},
- screen : {},
- element : {},
- };
- },
- image: function() {
- var
- src = $module.data(metadata.src)
- ;
- if(src) {
- module.verbose('Lazy loading image', src);
- settings.once = true;
- settings.observeChanges = false;
-
- // show when top visible
- settings.onOnScreen = function() {
- module.debug('Image on screen', element);
- module.precache(src, function() {
- module.set.image(src, function() {
- loadedCount++;
- if(loadedCount == moduleCount) {
- settings.onAllLoaded.call(this);
- }
- settings.onLoad.call(this);
- });
- });
- };
- }
- },
- fixed: function() {
- module.debug('Setting up fixed');
- settings.once = false;
- settings.observeChanges = false;
- settings.initialCheck = true;
- settings.refreshOnLoad = true;
- if(!parameters.transition) {
- settings.transition = false;
- }
- module.create.placeholder();
- module.debug('Added placeholder', $placeholder);
- settings.onTopPassed = function() {
- module.debug('Element passed, adding fixed position', $module);
- module.show.placeholder();
- module.set.fixed();
- if(settings.transition) {
- if($.fn.transition !== undefined) {
- $module.transition(settings.transition, settings.duration);
- }
- }
- };
- settings.onTopPassedReverse = function() {
- module.debug('Element returned to position, removing fixed', $module);
- module.hide.placeholder();
- module.remove.fixed();
- };
- }
- },
-
- create: {
- placeholder: function() {
- module.verbose('Creating fixed position placeholder');
- $placeholder = $module
- .clone(false)
- .css('display', 'none')
- .addClass(className.placeholder)
- .insertAfter($module)
- ;
- }
- },
-
- show: {
- placeholder: function() {
- module.verbose('Showing placeholder');
- $placeholder
- .css('display', 'block')
- .css('visibility', 'hidden')
- ;
- }
- },
- hide: {
- placeholder: function() {
- module.verbose('Hiding placeholder');
- $placeholder
- .css('display', 'none')
- .css('visibility', '')
- ;
- }
- },
-
- set: {
- fixed: function() {
- module.verbose('Setting element to fixed position');
- $module
- .addClass(className.fixed)
- .css({
- position : 'fixed',
- top : settings.offset + 'px',
- left : 'auto',
- zIndex : settings.zIndex
- })
- ;
- settings.onFixed.call(element);
- },
- image: function(src, callback) {
- $module
- .attr('src', src)
- ;
- if(settings.transition) {
- if( $.fn.transition !== undefined) {
- if($module.hasClass(className.visible)) {
- module.debug('Transition already occurred on this image, skipping animation');
- return;
- }
- $module.transition(settings.transition, settings.duration, callback);
- }
- else {
- $module.fadeIn(settings.duration, callback);
- }
- }
- else {
- $module.show();
- }
- }
- },
-
- is: {
- onScreen: function() {
- var
- calculations = module.get.elementCalculations()
- ;
- return calculations.onScreen;
- },
- offScreen: function() {
- var
- calculations = module.get.elementCalculations()
- ;
- return calculations.offScreen;
- },
- visible: function() {
- if(module.cache && module.cache.element) {
- return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);
- }
- return false;
- },
- verticallyScrollableContext: function() {
- var
- overflowY = ($context.get(0) !== window)
- ? $context.css('overflow-y')
- : false
- ;
- return (overflowY == 'auto' || overflowY == 'scroll');
- },
- horizontallyScrollableContext: function() {
- var
- overflowX = ($context.get(0) !== window)
- ? $context.css('overflow-x')
- : false
- ;
- return (overflowX == 'auto' || overflowX == 'scroll');
- }
- },
-
- refresh: function() {
- module.debug('Refreshing constants (width/height)');
- if(settings.type == 'fixed') {
- module.resetFixed();
- }
- module.reset();
- module.save.position();
- if(settings.checkOnRefresh) {
- module.checkVisibility();
- }
- settings.onRefresh.call(element);
- },
-
- resetFixed: function () {
- module.remove.fixed();
- module.remove.occurred();
- },
-
- reset: function() {
- module.verbose('Resetting all cached values');
- if( $.isPlainObject(module.cache) ) {
- module.cache.screen = {};
- module.cache.element = {};
- }
- },
-
- checkVisibility: function(scroll) {
- module.verbose('Checking visibility of element', module.cache.element);
-
- if( !disabled && module.is.visible() ) {
-
- // save scroll position
- module.save.scroll(scroll);
-
- // update calculations derived from scroll
- module.save.calculations();
-
- // percentage
- module.passed();
-
- // reverse (must be first)
- module.passingReverse();
- module.topVisibleReverse();
- module.bottomVisibleReverse();
- module.topPassedReverse();
- module.bottomPassedReverse();
-
- // one time
- module.onScreen();
- module.offScreen();
- module.passing();
- module.topVisible();
- module.bottomVisible();
- module.topPassed();
- module.bottomPassed();
-
- // on update callback
- if(settings.onUpdate) {
- settings.onUpdate.call(element, module.get.elementCalculations());
- }
- }
- },
-
- passed: function(amount, newCallback) {
- var
- calculations = module.get.elementCalculations()
- ;
- // assign callback
- if(amount && newCallback) {
- settings.onPassed[amount] = newCallback;
- }
- else if(amount !== undefined) {
- return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);
- }
- else if(calculations.passing) {
- $.each(settings.onPassed, function(amount, callback) {
- if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {
- module.execute(callback, amount);
- }
- else if(!settings.once) {
- module.remove.occurred(callback);
- }
- });
- }
- },
-
- onScreen: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onOnScreen,
- callbackName = 'onScreen'
- ;
- if(newCallback) {
- module.debug('Adding callback for onScreen', newCallback);
- settings.onOnScreen = newCallback;
- }
- if(calculations.onScreen) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback !== undefined) {
- return calculations.onOnScreen;
- }
- },
-
- offScreen: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onOffScreen,
- callbackName = 'offScreen'
- ;
- if(newCallback) {
- module.debug('Adding callback for offScreen', newCallback);
- settings.onOffScreen = newCallback;
- }
- if(calculations.offScreen) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback !== undefined) {
- return calculations.onOffScreen;
- }
- },
-
- passing: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onPassing,
- callbackName = 'passing'
- ;
- if(newCallback) {
- module.debug('Adding callback for passing', newCallback);
- settings.onPassing = newCallback;
- }
- if(calculations.passing) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback !== undefined) {
- return calculations.passing;
- }
- },
-
-
- topVisible: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onTopVisible,
- callbackName = 'topVisible'
- ;
- if(newCallback) {
- module.debug('Adding callback for top visible', newCallback);
- settings.onTopVisible = newCallback;
- }
- if(calculations.topVisible) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return calculations.topVisible;
- }
- },
-
- bottomVisible: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onBottomVisible,
- callbackName = 'bottomVisible'
- ;
- if(newCallback) {
- module.debug('Adding callback for bottom visible', newCallback);
- settings.onBottomVisible = newCallback;
- }
- if(calculations.bottomVisible) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return calculations.bottomVisible;
- }
- },
-
- topPassed: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onTopPassed,
- callbackName = 'topPassed'
- ;
- if(newCallback) {
- module.debug('Adding callback for top passed', newCallback);
- settings.onTopPassed = newCallback;
- }
- if(calculations.topPassed) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return calculations.topPassed;
- }
- },
-
- bottomPassed: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onBottomPassed,
- callbackName = 'bottomPassed'
- ;
- if(newCallback) {
- module.debug('Adding callback for bottom passed', newCallback);
- settings.onBottomPassed = newCallback;
- }
- if(calculations.bottomPassed) {
- module.execute(callback, callbackName);
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return calculations.bottomPassed;
- }
- },
-
- passingReverse: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onPassingReverse,
- callbackName = 'passingReverse'
- ;
- if(newCallback) {
- module.debug('Adding callback for passing reverse', newCallback);
- settings.onPassingReverse = newCallback;
- }
- if(!calculations.passing) {
- if(module.get.occurred('passing')) {
- module.execute(callback, callbackName);
- }
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback !== undefined) {
- return !calculations.passing;
- }
- },
-
-
- topVisibleReverse: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onTopVisibleReverse,
- callbackName = 'topVisibleReverse'
- ;
- if(newCallback) {
- module.debug('Adding callback for top visible reverse', newCallback);
- settings.onTopVisibleReverse = newCallback;
- }
- if(!calculations.topVisible) {
- if(module.get.occurred('topVisible')) {
- module.execute(callback, callbackName);
- }
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return !calculations.topVisible;
- }
- },
-
- bottomVisibleReverse: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onBottomVisibleReverse,
- callbackName = 'bottomVisibleReverse'
- ;
- if(newCallback) {
- module.debug('Adding callback for bottom visible reverse', newCallback);
- settings.onBottomVisibleReverse = newCallback;
- }
- if(!calculations.bottomVisible) {
- if(module.get.occurred('bottomVisible')) {
- module.execute(callback, callbackName);
- }
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return !calculations.bottomVisible;
- }
- },
-
- topPassedReverse: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onTopPassedReverse,
- callbackName = 'topPassedReverse'
- ;
- if(newCallback) {
- module.debug('Adding callback for top passed reverse', newCallback);
- settings.onTopPassedReverse = newCallback;
- }
- if(!calculations.topPassed) {
- if(module.get.occurred('topPassed')) {
- module.execute(callback, callbackName);
- }
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return !calculations.onTopPassed;
- }
- },
-
- bottomPassedReverse: function(newCallback) {
- var
- calculations = module.get.elementCalculations(),
- callback = newCallback || settings.onBottomPassedReverse,
- callbackName = 'bottomPassedReverse'
- ;
- if(newCallback) {
- module.debug('Adding callback for bottom passed reverse', newCallback);
- settings.onBottomPassedReverse = newCallback;
- }
- if(!calculations.bottomPassed) {
- if(module.get.occurred('bottomPassed')) {
- module.execute(callback, callbackName);
- }
- }
- else if(!settings.once) {
- module.remove.occurred(callbackName);
- }
- if(newCallback === undefined) {
- return !calculations.bottomPassed;
- }
- },
-
- execute: function(callback, callbackName) {
- var
- calculations = module.get.elementCalculations(),
- screen = module.get.screenCalculations()
- ;
- callback = callback || false;
- if(callback) {
- if(settings.continuous) {
- module.debug('Callback being called continuously', callbackName, calculations);
- callback.call(element, calculations, screen);
- }
- else if(!module.get.occurred(callbackName)) {
- module.debug('Conditions met', callbackName, calculations);
- callback.call(element, calculations, screen);
- }
- }
- module.save.occurred(callbackName);
- },
-
- remove: {
- fixed: function() {
- module.debug('Removing fixed position');
- $module
- .removeClass(className.fixed)
- .css({
- position : '',
- top : '',
- left : '',
- zIndex : ''
- })
- ;
- settings.onUnfixed.call(element);
- },
- placeholder: function() {
- module.debug('Removing placeholder content');
- if($placeholder) {
- $placeholder.remove();
- }
- },
- occurred: function(callback) {
- if(callback) {
- var
- occurred = module.cache.occurred
- ;
- if(occurred[callback] !== undefined && occurred[callback] === true) {
- module.debug('Callback can now be called again', callback);
- module.cache.occurred[callback] = false;
- }
- }
- else {
- module.cache.occurred = {};
- }
- }
- },
-
- save: {
- calculations: function() {
- module.verbose('Saving all calculations necessary to determine positioning');
- module.save.direction();
- module.save.screenCalculations();
- module.save.elementCalculations();
- },
- occurred: function(callback) {
- if(callback) {
- if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {
- module.verbose('Saving callback occurred', callback);
- module.cache.occurred[callback] = true;
- }
- }
- },
- scroll: function(scrollPosition) {
- scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;
- module.cache.scroll = scrollPosition;
- },
- direction: function() {
- var
- scroll = module.get.scroll(),
- lastScroll = module.get.lastScroll(),
- direction
- ;
- if(scroll > lastScroll && lastScroll) {
- direction = 'down';
- }
- else if(scroll < lastScroll && lastScroll) {
- direction = 'up';
- }
- else {
- direction = 'static';
- }
- module.cache.direction = direction;
- return module.cache.direction;
- },
- elementPosition: function() {
- var
- element = module.cache.element,
- screen = module.get.screenSize()
- ;
- module.verbose('Saving element position');
- // (quicker than $.extend)
- element.fits = (element.height < screen.height);
- element.offset = $module.offset();
- element.width = $module.outerWidth();
- element.height = $module.outerHeight();
- // compensate for scroll in context
- if(module.is.verticallyScrollableContext()) {
- element.offset.top += $context.scrollTop() - $context.offset().top;
- }
- if(module.is.horizontallyScrollableContext()) {
- element.offset.left += $context.scrollLeft() - $context.offset().left;
- }
- // store
- module.cache.element = element;
- return element;
- },
- elementCalculations: function() {
- var
- screen = module.get.screenCalculations(),
- element = module.get.elementPosition()
- ;
- // offset
- if(settings.includeMargin) {
- element.margin = {};
- element.margin.top = parseInt($module.css('margin-top'), 10);
- element.margin.bottom = parseInt($module.css('margin-bottom'), 10);
- element.top = element.offset.top - element.margin.top;
- element.bottom = element.offset.top + element.height + element.margin.bottom;
- }
- else {
- element.top = element.offset.top;
- element.bottom = element.offset.top + element.height;
- }
-
- // visibility
- element.topPassed = (screen.top >= element.top);
- element.bottomPassed = (screen.top >= element.bottom);
- element.topVisible = (screen.bottom >= element.top) && !element.topPassed;
- element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed;
- element.pixelsPassed = 0;
- element.percentagePassed = 0;
-
- // meta calculations
- element.onScreen = ((element.topVisible || element.passing) && !element.bottomPassed);
- element.passing = (element.topPassed && !element.bottomPassed);
- element.offScreen = (!element.onScreen);
-
- // passing calculations
- if(element.passing) {
- element.pixelsPassed = (screen.top - element.top);
- element.percentagePassed = (screen.top - element.top) / element.height;
- }
- module.cache.element = element;
- module.verbose('Updated element calculations', element);
- return element;
- },
- screenCalculations: function() {
- var
- scroll = module.get.scroll()
- ;
- module.save.direction();
- module.cache.screen.top = scroll;
- module.cache.screen.bottom = scroll + module.cache.screen.height;
- return module.cache.screen;
- },
- screenSize: function() {
- module.verbose('Saving window position');
- module.cache.screen = {
- height: $context.height()
- };
- },
- position: function() {
- module.save.screenSize();
- module.save.elementPosition();
- }
- },
-
- get: {
- pixelsPassed: function(amount) {
- var
- element = module.get.elementCalculations()
- ;
- if(amount.search('%') > -1) {
- return ( element.height * (parseInt(amount, 10) / 100) );
- }
- return parseInt(amount, 10);
- },
- occurred: function(callback) {
- return (module.cache.occurred !== undefined)
- ? module.cache.occurred[callback] || false
- : false
- ;
- },
- direction: function() {
- if(module.cache.direction === undefined) {
- module.save.direction();
- }
- return module.cache.direction;
- },
- elementPosition: function() {
- if(module.cache.element === undefined) {
- module.save.elementPosition();
- }
- return module.cache.element;
- },
- elementCalculations: function() {
- if(module.cache.element === undefined) {
- module.save.elementCalculations();
- }
- return module.cache.element;
- },
- screenCalculations: function() {
- if(module.cache.screen === undefined) {
- module.save.screenCalculations();
- }
- return module.cache.screen;
- },
- screenSize: function() {
- if(module.cache.screen === undefined) {
- module.save.screenSize();
- }
- return module.cache.screen;
- },
- scroll: function() {
- if(module.cache.scroll === undefined) {
- module.save.scroll();
- }
- return module.cache.scroll;
- },
- lastScroll: function() {
- if(module.cache.screen === undefined) {
- module.debug('First scroll event, no last scroll could be found');
- return false;
- }
- return module.cache.screen.top;
- }
- },
-
- setting: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- settings[name] = value;
- }
- else {
- return settings[name];
- }
- },
- internal: function(name, value) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else if(value !== undefined) {
- module[name] = value;
- }
- else {
- return module[name];
- }
- },
- debug: function() {
- if(!settings.silent && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.debug.apply(console, arguments);
- }
- }
- },
- verbose: function() {
- if(!settings.silent && settings.verbose && settings.debug) {
- if(settings.performance) {
- module.performance.log(arguments);
- }
- else {
- module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
- module.verbose.apply(console, arguments);
- }
- }
- },
- error: function() {
- if(!settings.silent) {
- module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
- module.error.apply(console, arguments);
- }
- },
- performance: {
- log: function(message) {
- var
- currentTime,
- executionTime,
- previousTime
- ;
- if(settings.performance) {
- currentTime = new Date().getTime();
- previousTime = time || currentTime;
- executionTime = currentTime - previousTime;
- time = currentTime;
- performance.push({
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- 'Element' : element,
- 'Execution Time' : executionTime
- });
- }
- clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 500);
- },
- display: function() {
- var
- title = settings.name + ':',
- totalTime = 0
- ;
- time = false;
- clearTimeout(module.performance.timer);
- $.each(performance, function(index, data) {
- totalTime += data['Execution Time'];
- });
- title += ' ' + totalTime + 'ms';
- if(moduleSelector) {
- title += ' \'' + moduleSelector + '\'';
- }
- if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
- console.groupCollapsed(title);
- if(console.table) {
- console.table(performance);
- }
- else {
- $.each(performance, function(index, data) {
- console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
- });
- }
- console.groupEnd();
- }
- performance = [];
- }
- },
- invoke: function(query, passedArguments, context) {
- var
- object = instance,
- maxDepth,
- found,
- response
- ;
- passedArguments = passedArguments || queryArguments;
- context = element || context;
- if(typeof query == 'string' && object !== undefined) {
- query = query.split(/[\. ]/);
- maxDepth = query.length - 1;
- $.each(query, function(depth, value) {
- var camelCaseValue = (depth != maxDepth)
- ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
- : query
- ;
- if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
- object = object[camelCaseValue];
- }
- else if( object[camelCaseValue] !== undefined ) {
- found = object[camelCaseValue];
- return false;
- }
- else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
- object = object[value];
- }
- else if( object[value] !== undefined ) {
- found = object[value];
- return false;
- }
- else {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
-
- if(methodInvoked) {
- if(instance === undefined) {
- module.initialize();
- }
- instance.save.scroll();
- instance.save.calculations();
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.visibility.settings = {
-
- name : 'Visibility',
- namespace : 'visibility',
-
- debug : false,
- verbose : false,
- performance : true,
-
- // whether to use mutation observers to follow changes
- observeChanges : true,
-
- // check position immediately on init
- initialCheck : true,
-
- // whether to refresh calculations after all page images load
- refreshOnLoad : true,
-
- // whether to refresh calculations after page resize event
- refreshOnResize : true,
-
- // should call callbacks on refresh event (resize, etc)
- checkOnRefresh : true,
-
- // callback should only occur one time
- once : true,
-
- // callback should fire continuously whe evaluates to true
- continuous : false,
-
- // offset to use with scroll top
- offset : 0,
-
- // whether to include margin in elements position
- includeMargin : false,
-
- // scroll context for visibility checks
- context : window,
-
- // visibility check delay in ms (defaults to animationFrame)
- throttle : false,
-
- // special visibility type (image, fixed)
- type : false,
-
- // z-index to use with visibility 'fixed'
- zIndex : '10',
-
- // image only animation settings
- transition : 'fade in',
- duration : 1000,
-
- // array of callbacks for percentage
- onPassed : {},
-
- // standard callbacks
- onOnScreen : false,
- onOffScreen : false,
- onPassing : false,
- onTopVisible : false,
- onBottomVisible : false,
- onTopPassed : false,
- onBottomPassed : false,
-
- // reverse callbacks
- onPassingReverse : false,
- onTopVisibleReverse : false,
- onBottomVisibleReverse : false,
- onTopPassedReverse : false,
- onBottomPassedReverse : false,
-
- // special callbacks for image
- onLoad : function() {},
- onAllLoaded : function() {},
-
- // special callbacks for fixed position
- onFixed : function() {},
- onUnfixed : function() {},
-
- // utility callbacks
- onUpdate : false, // disabled by default for performance
- onRefresh : function(){},
-
- metadata : {
- src: 'src'
- },
-
- className: {
- fixed : 'fixed',
- placeholder : 'constraint',
- visible : 'visible'
- },
-
- error : {
- method : 'The method you called is not defined.',
- visible : 'Element is hidden, you must call refresh after element becomes visible'
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/frontend/static/jscn/smoothie.js b/frontend/static/jscn/smoothie.js
deleted file mode 100644
index 6ef566f..0000000
--- a/frontend/static/jscn/smoothie.js
+++ /dev/null
@@ -1,1113 +0,0 @@
-// MIT License:
-//
-// Copyright (c) 2010-2013, Joe Walnes
-// 2013-2018, Drew Noakes
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-/**
- * Smoothie Charts - http://smoothiecharts.org/
- * (c) 2010-2013, Joe Walnes
- * 2013-2018, Drew Noakes
- *
- * v1.0: Main charting library, by Joe Walnes
- * v1.1: Auto scaling of axis, by Neil Dunn
- * v1.2: fps (frames per second) option, by Mathias Petterson
- * v1.3: Fix for divide by zero, by Paul Nikitochkin
- * v1.4: Set minimum, top-scale padding, remove timeseries, add optional timer to reset bounds, by Kelley Reynolds
- * v1.5: Set default frames per second to 50... smoother.
- * .start(), .stop() methods for conserving CPU, by Dmitry Vyal
- * options.interpolation = 'bezier' or 'line', by Dmitry Vyal
- * options.maxValue to fix scale, by Dmitry Vyal
- * v1.6: minValue/maxValue will always get converted to floats, by Przemek Matylla
- * v1.7: options.grid.fillStyle may be a transparent color, by Dmitry A. Shashkin
- * Smooth rescaling, by Kostas Michalopoulos
- * v1.8: Set max length to customize number of live points in the dataset with options.maxDataSetLength, by Krishna Narni
- * v1.9: Display timestamps along the bottom, by Nick and Stev-io
- * (https://groups.google.com/forum/?fromgroups#!topic/smoothie-charts/-Ywse8FCpKI%5B1-25%5D)
- * Refactored by Krishna Narni, to support timestamp formatting function
- * v1.10: Switch to requestAnimationFrame, removed the now obsoleted options.fps, by Gergely Imreh
- * v1.11: options.grid.sharpLines option added, by @drewnoakes
- * Addressed warning seen in Firefox when seriesOption.fillStyle undefined, by @drewnoakes
- * v1.12: Support for horizontalLines added, by @drewnoakes
- * Support for yRangeFunction callback added, by @drewnoakes
- * v1.13: Fixed typo (#32), by @alnikitich
- * v1.14: Timer cleared when last TimeSeries removed (#23), by @davidgaleano
- * Fixed diagonal line on chart at start/end of data stream, by @drewnoakes
- * v1.15: Support for npm package (#18), by @dominictarr
- * Fixed broken removeTimeSeries function (#24) by @davidgaleano
- * Minor performance and tidying, by @drewnoakes
- * v1.16: Bug fix introduced in v1.14 relating to timer creation/clearance (#23), by @drewnoakes
- * TimeSeries.append now deals with out-of-order timestamps, and can merge duplicates, by @zacwitte (#12)
- * Documentation and some local variable renaming for clarity, by @drewnoakes
- * v1.17: Allow control over font size (#10), by @drewnoakes
- * Timestamp text won't overlap, by @drewnoakes
- * v1.18: Allow control of max/min label precision, by @drewnoakes
- * Added 'borderVisible' chart option, by @drewnoakes
- * Allow drawing series with fill but no stroke (line), by @drewnoakes
- * v1.19: Avoid unnecessary repaints, and fixed flicker in old browsers having multiple charts in document (#40), by @asbai
- * v1.20: Add SmoothieChart.getTimeSeriesOptions and SmoothieChart.bringToFront functions, by @drewnoakes
- * v1.21: Add 'step' interpolation mode, by @drewnoakes
- * v1.22: Add support for different pixel ratios. Also add optional y limit formatters, by @copacetic
- * v1.23: Fix bug introduced in v1.22 (#44), by @drewnoakes
- * v1.24: Fix bug introduced in v1.23, re-adding parseFloat to y-axis formatter defaults, by @siggy_sf
- * v1.25: Fix bug seen when adding a data point to TimeSeries which is older than the current data, by @Nking92
- * Draw time labels on top of series, by @comolosabia
- * Add TimeSeries.clear function, by @drewnoakes
- * v1.26: Add support for resizing on high device pixel ratio screens, by @copacetic
- * v1.27: Fix bug introduced in v1.26 for non whole number devicePixelRatio values, by @zmbush
- * v1.28: Add 'minValueScale' option, by @megawac
- * Fix 'labelPos' for different size of 'minValueString' 'maxValueString', by @henryn
- * v1.29: Support responsive sizing, by @drewnoakes
- * v1.29.1: Include types in package, and make property optional, by @TrentHouliston
- * v1.30: Fix inverted logic in devicePixelRatio support, by @scanlime
- * v1.31: Support tooltips, by @Sly1024 and @drewnoakes
- * v1.32: Support frame rate limit, by @dpuyosa
- * v1.33: Use Date static method instead of instance, by @nnnoel
- * Fix bug with tooltips when multiple charts on a page, by @jpmbiz70
- * v1.34: Add disabled option to TimeSeries, by @TechGuard (#91)
- * Add nonRealtimeData option, by @annazhelt (#92, #93)
- * Add showIntermediateLabels option, by @annazhelt (#94)
- * Add displayDataFromPercentile option, by @annazhelt (#95)
- * Fix bug when hiding tooltip element, by @ralphwetzel (#96)
- * Support intermediate y-axis labels, by @beikeland (#99)
- * v1.35: Fix issue with responsive mode at high DPI, by @drewnoakes (#101)
- * v1.36: Add tooltipLabel to ITimeSeriesPresentationOptions.
- * If tooltipLabel is present, tooltipLabel displays inside tooltip
- * next to value, by @jackdesert (#102)
- * Fix bug rendering issue in series fill when using scroll backwards, by @olssonfredrik
- * Add title option, by @mesca
- * Fix data drop stoppage by rejecting NaNs in append(), by @timdrysdale
- * Allow setting interpolation per time series, by @WofWca (#123)
- */
-
-;(function(exports) {
-
- // Date.now polyfill
- Date.now = Date.now || function() { return new Date().getTime(); };
-
- var Util = {
- extend: function() {
- arguments[0] = arguments[0] || {};
- for (var i = 1; i < arguments.length; i++)
- {
- for (var key in arguments[i])
- {
- if (arguments[i].hasOwnProperty(key))
- {
- if (typeof(arguments[i][key]) === 'object') {
- if (arguments[i][key] instanceof Array) {
- arguments[0][key] = arguments[i][key];
- } else {
- arguments[0][key] = Util.extend(arguments[0][key], arguments[i][key]);
- }
- } else {
- arguments[0][key] = arguments[i][key];
- }
- }
- }
- }
- return arguments[0];
- },
- binarySearch: function(data, value) {
- var low = 0,
- high = data.length;
- while (low < high) {
- var mid = (low + high) >> 1;
- if (value < data[mid][0])
- high = mid;
- else
- low = mid + 1;
- }
- return low;
- }
- };
-
- /**
- * Initialises a new TimeSeries with optional data options.
- *
- * Options are of the form (defaults shown):
- *
- *
- * {
- * resetBounds: true, // enables/disables automatic scaling of the y-axis
- * resetBoundsInterval: 3000 // the period between scaling calculations, in millis
- * }
- *
- *
- * Presentation options for TimeSeries are specified as an argument to SmoothieChart.addTimeSeries.
- *
- * @constructor
- */
- function TimeSeries(options) {
- this.options = Util.extend({}, TimeSeries.defaultOptions, options);
- this.disabled = false;
- this.clear();
- }
-
- TimeSeries.defaultOptions = {
- resetBoundsInterval: 3000,
- resetBounds: true
- };
-
- /**
- * Clears all data and state from this TimeSeries object.
- */
- TimeSeries.prototype.clear = function() {
- this.data = [];
- this.maxValue = Number.NaN; // The maximum value ever seen in this TimeSeries.
- this.minValue = Number.NaN; // The minimum value ever seen in this TimeSeries.
- };
-
- /**
- * Recalculate the min/max values for this TimeSeries object.
- *
- * This causes the graph to scale itself in the y-axis.
- */
- TimeSeries.prototype.resetBounds = function() {
- if (this.data.length) {
- // Walk through all data points, finding the min/max value
- this.maxValue = this.data[0][1];
- this.minValue = this.data[0][1];
- for (var i = 1; i < this.data.length; i++) {
- var value = this.data[i][1];
- if (value > this.maxValue) {
- this.maxValue = value;
- }
- if (value < this.minValue) {
- this.minValue = value;
- }
- }
- } else {
- // No data exists, so set min/max to NaN
- this.maxValue = Number.NaN;
- this.minValue = Number.NaN;
- }
- };
-
- /**
- * Adds a new data point to the TimeSeries, preserving chronological order.
- *
- * @param timestamp the position, in time, of this data point
- * @param value the value of this data point
- * @param sumRepeatedTimeStampValues if timestamp has an exact match in the series, this flag controls
- * whether it is replaced, or the values summed (defaults to false.)
- */
- TimeSeries.prototype.append = function(timestamp, value, sumRepeatedTimeStampValues) {
- // Reject NaN
- if (isNaN(timestamp) || isNaN(value)){
- return
- }
- // Rewind until we hit an older timestamp
- var i = this.data.length - 1;
- while (i >= 0 && this.data[i][0] > timestamp) {
- i--;
- }
-
- if (i === -1) {
- // This new item is the oldest data
- this.data.splice(0, 0, [timestamp, value]);
- } else if (this.data.length > 0 && this.data[i][0] === timestamp) {
- // Update existing values in the array
- if (sumRepeatedTimeStampValues) {
- // Sum this value into the existing 'bucket'
- this.data[i][1] += value;
- value = this.data[i][1];
- } else {
- // Replace the previous value
- this.data[i][1] = value;
- }
- } else if (i < this.data.length - 1) {
- // Splice into the correct position to keep timestamps in order
- this.data.splice(i + 1, 0, [timestamp, value]);
- } else {
- // Add to the end of the array
- this.data.push([timestamp, value]);
- }
-
- this.maxValue = isNaN(this.maxValue) ? value : Math.max(this.maxValue, value);
- this.minValue = isNaN(this.minValue) ? value : Math.min(this.minValue, value);
- };
-
- TimeSeries.prototype.dropOldData = function(oldestValidTime, maxDataSetLength) {
- // We must always keep one expired data point as we need this to draw the
- // line that comes into the chart from the left, but any points prior to that can be removed.
- var removeCount = 0;
- while (this.data.length - removeCount >= maxDataSetLength && this.data[removeCount + 1][0] < oldestValidTime) {
- removeCount++;
- }
- if (removeCount !== 0) {
- this.data.splice(0, removeCount);
- }
- };
-
- /**
- * Initialises a new SmoothieChart.
- *
- * Options are optional, and should be of the form below. Just specify the values you
- * need and the rest will be given sensible defaults as shown:
- *
- *
- * {
- * minValue: undefined, // specify to clamp the lower y-axis to a given value
- * maxValue: undefined, // specify to clamp the upper y-axis to a given value
- * maxValueScale: 1, // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
- * minValueScale: 1, // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.
- * yRangeFunction: undefined, // function({min: , max: }) { return {min: , max: }; }
- * scaleSmoothing: 0.125, // controls the rate at which y-value zoom animation occurs
- * millisPerPixel: 20, // sets the speed at which the chart pans by
- * enableDpiScaling: true, // support rendering at different DPI depending on the device
- * yMinFormatter: function(min, precision) { // callback function that formats the min y value label
- * return parseFloat(min).toFixed(precision);
- * },
- * yMaxFormatter: function(max, precision) { // callback function that formats the max y value label
- * return parseFloat(max).toFixed(precision);
- * },
- * yIntermediateFormatter: function(intermediate, precision) { // callback function that formats the intermediate y value labels
- * return parseFloat(intermediate).toFixed(precision);
- * },
- * maxDataSetLength: 2,
- * interpolation: 'bezier' // one of 'bezier', 'linear', or 'step'
- * timestampFormatter: null, // optional function to format time stamps for bottom of chart
- * // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }
- * scrollBackwards: false, // reverse the scroll direction of the chart
- * horizontalLines: [], // [ { value: 0, color: '#ffffff', lineWidth: 1 } ]
- * grid:
- * {
- * fillStyle: '#000000', // the background colour of the chart
- * lineWidth: 1, // the pixel width of grid lines
- * strokeStyle: '#777777', // colour of grid lines
- * millisPerLine: 1000, // distance between vertical grid lines
- * sharpLines: false, // controls whether grid lines are 1px sharp, or softened
- * verticalSections: 2, // number of vertical sections marked out by horizontal grid lines
- * borderVisible: true // whether the grid lines trace the border of the chart or not
- * },
- * labels
- * {
- * disabled: false, // enables/disables labels showing the min/max values
- * fillStyle: '#ffffff', // colour for text of labels,
- * fontSize: 15,
- * fontFamily: 'sans-serif',
- * precision: 2,
- * showIntermediateLabels: false, // shows intermediate labels between min and max values along y axis
- * intermediateLabelSameAxis: true,
- * },
- * title
- * {
- * text: '', // the text to display on the left side of the chart
- * fillStyle: '#ffffff', // colour for text
- * fontSize: 15,
- * fontFamily: 'sans-serif',
- * verticalAlign: 'middle' // one of 'top', 'middle', or 'bottom'
- * },
- * tooltip: false // show tooltip when mouse is over the chart
- * tooltipLine: { // properties for a vertical line at the cursor position
- * lineWidth: 1,
- * strokeStyle: '#BBBBBB'
- * },
- * tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text
- * nonRealtimeData: false, // use time of latest data as current time
- * displayDataFromPercentile: 1, // display not latest data, but data from the given percentile
- * // useful when trying to see old data saved by setting a high value for maxDataSetLength
- * // should be a value between 0 and 1
- * responsive: false, // whether the chart should adapt to the size of the canvas
- * limitFPS: 0 // maximum frame rate the chart will render at, in FPS (zero means no limit)
- * }
- *
- *
- * @constructor
- */
- function SmoothieChart(options) {
- this.options = Util.extend({}, SmoothieChart.defaultChartOptions, options);
- this.seriesSet = [];
- this.currentValueRange = 1;
- this.currentVisMinValue = 0;
- this.lastRenderTimeMillis = 0;
- this.lastChartTimestamp = 0;
-
- this.mousemove = this.mousemove.bind(this);
- this.mouseout = this.mouseout.bind(this);
- }
-
- /** Formats the HTML string content of the tooltip. */
- SmoothieChart.tooltipFormatter = function (timestamp, data) {
- var timestampFormatter = this.options.timestampFormatter || SmoothieChart.timeFormatter,
- lines = [timestampFormatter(new Date(timestamp))],
- label;
-
- for (var i = 0; i < data.length; ++i) {
- label = data[i].series.options.tooltipLabel || ''
- if (label !== ''){
- label = label + ' ';
- }
- lines.push('' +
- label +
- this.options.yMaxFormatter(data[i].value, this.options.labels.precision) + '');
- }
-
- return lines.join('
');
- };
-
- SmoothieChart.defaultChartOptions = {
- millisPerPixel: 20,
- enableDpiScaling: true,
- yMinFormatter: function(min, precision) {
- return parseFloat(min).toFixed(precision);
- },
- yMaxFormatter: function(max, precision) {
- return parseFloat(max).toFixed(precision);
- },
- yIntermediateFormatter: function(intermediate, precision) {
- return parseFloat(intermediate).toFixed(precision);
- },
- maxValueScale: 1,
- minValueScale: 1,
- interpolation: 'bezier',
- scaleSmoothing: 0.125,
- maxDataSetLength: 2,
- scrollBackwards: false,
- displayDataFromPercentile: 1,
- grid: {
- fillStyle: '#000000',
- strokeStyle: '#777777',
- lineWidth: 1,
- sharpLines: false,
- millisPerLine: 1000,
- verticalSections: 2,
- borderVisible: true
- },
- labels: {
- fillStyle: '#ffffff',
- disabled: false,
- fontSize: 10,
- fontFamily: 'monospace',
- precision: 2,
- showIntermediateLabels: false,
- intermediateLabelSameAxis: true,
- },
- title: {
- text: '',
- fillStyle: '#ffffff',
- fontSize: 15,
- fontFamily: 'monospace',
- verticalAlign: 'middle'
- },
- horizontalLines: [],
- tooltip: false,
- tooltipLine: {
- lineWidth: 1,
- strokeStyle: '#BBBBBB'
- },
- tooltipFormatter: SmoothieChart.tooltipFormatter,
- nonRealtimeData: false,
- responsive: false,
- limitFPS: 0
- };
-
- // Based on http://inspirit.github.com/jsfeat/js/compatibility.js
- SmoothieChart.AnimateCompatibility = (function() {
- var requestAnimationFrame = function(callback, element) {
- var requestAnimationFrame =
- window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(callback) {
- return window.setTimeout(function() {
- callback(Date.now());
- }, 16);
- };
- return requestAnimationFrame.call(window, callback, element);
- },
- cancelAnimationFrame = function(id) {
- var cancelAnimationFrame =
- window.cancelAnimationFrame ||
- function(id) {
- clearTimeout(id);
- };
- return cancelAnimationFrame.call(window, id);
- };
-
- return {
- requestAnimationFrame: requestAnimationFrame,
- cancelAnimationFrame: cancelAnimationFrame
- };
- })();
-
- SmoothieChart.defaultSeriesPresentationOptions = {
- lineWidth: 1,
- strokeStyle: '#ffffff'
- };
-
- /**
- * Adds a TimeSeries to this chart, with optional presentation options.
- *
- * Presentation options should be of the form (defaults shown):
- *
- *
- * {
- * lineWidth: 1,
- * strokeStyle: '#ffffff',
- * fillStyle: undefined,
- * interpolation: undefined;
- * tooltipLabel: undefined
- * }
- *
- */
- SmoothieChart.prototype.addTimeSeries = function(timeSeries, options) {
- this.seriesSet.push({timeSeries: timeSeries, options: Util.extend({}, SmoothieChart.defaultSeriesPresentationOptions, options)});
- if (timeSeries.options.resetBounds && timeSeries.options.resetBoundsInterval > 0) {
- timeSeries.resetBoundsTimerId = setInterval(
- function() {
- timeSeries.resetBounds();
- },
- timeSeries.options.resetBoundsInterval
- );
- }
- };
-
- /**
- * Removes the specified TimeSeries from the chart.
- */
- SmoothieChart.prototype.removeTimeSeries = function(timeSeries) {
- // Find the correct timeseries to remove, and remove it
- var numSeries = this.seriesSet.length;
- for (var i = 0; i < numSeries; i++) {
- if (this.seriesSet[i].timeSeries === timeSeries) {
- this.seriesSet.splice(i, 1);
- break;
- }
- }
- // If a timer was operating for that timeseries, remove it
- if (timeSeries.resetBoundsTimerId) {
- // Stop resetting the bounds, if we were
- clearInterval(timeSeries.resetBoundsTimerId);
- }
- };
-
- /**
- * Gets render options for the specified TimeSeries.
- *
- * As you may use a single TimeSeries in multiple charts with different formatting in each usage,
- * these settings are stored in the chart.
- */
- SmoothieChart.prototype.getTimeSeriesOptions = function(timeSeries) {
- // Find the correct timeseries to remove, and remove it
- var numSeries = this.seriesSet.length;
- for (var i = 0; i < numSeries; i++) {
- if (this.seriesSet[i].timeSeries === timeSeries) {
- return this.seriesSet[i].options;
- }
- }
- };
-
- /**
- * Brings the specified TimeSeries to the top of the chart. It will be rendered last.
- */
- SmoothieChart.prototype.bringToFront = function(timeSeries) {
- // Find the correct timeseries to remove, and remove it
- var numSeries = this.seriesSet.length;
- for (var i = 0; i < numSeries; i++) {
- if (this.seriesSet[i].timeSeries === timeSeries) {
- var set = this.seriesSet.splice(i, 1);
- this.seriesSet.push(set[0]);
- break;
- }
- }
- };
-
- /**
- * Instructs the SmoothieChart to start rendering to the provided canvas, with specified delay.
- *
- * @param canvas the target canvas element
- * @param delayMillis an amount of time to wait before a data point is shown. This can prevent the end of the series
- * from appearing on screen, with new values flashing into view, at the expense of some latency.
- */
- SmoothieChart.prototype.streamTo = function(canvas, delayMillis) {
- this.canvas = canvas;
- this.delay = delayMillis;
- this.start();
- };
-
- SmoothieChart.prototype.getTooltipEl = function () {
- // Create the tool tip element lazily
- if (!this.tooltipEl) {
- this.tooltipEl = document.createElement('div');
- this.tooltipEl.className = 'smoothie-chart-tooltip';
- this.tooltipEl.style.pointerEvents = 'none';
- this.tooltipEl.style.position = 'absolute';
- this.tooltipEl.style.display = 'none';
- document.body.appendChild(this.tooltipEl);
- }
- return this.tooltipEl;
- };
-
- SmoothieChart.prototype.updateTooltip = function () {
- if(!this.options.tooltip){
- return;
- }
- var el = this.getTooltipEl();
-
- if (!this.mouseover || !this.options.tooltip) {
- el.style.display = 'none';
- return;
- }
-
- var time = this.lastChartTimestamp;
-
- // x pixel to time
- var t = this.options.scrollBackwards
- ? time - this.mouseX * this.options.millisPerPixel
- : time - (this.canvas.offsetWidth - this.mouseX) * this.options.millisPerPixel;
-
- var data = [];
-
- // For each data set...
- for (var d = 0; d < this.seriesSet.length; d++) {
- var timeSeries = this.seriesSet[d].timeSeries;
- if (timeSeries.disabled) {
- continue;
- }
-
- // find datapoint closest to time 't'
- var closeIdx = Util.binarySearch(timeSeries.data, t);
- if (closeIdx > 0 && closeIdx < timeSeries.data.length) {
- data.push({ series: this.seriesSet[d], index: closeIdx, value: timeSeries.data[closeIdx][1] });
- }
- }
-
- if (data.length) {
- el.innerHTML = this.options.tooltipFormatter.call(this, t, data);
- el.style.display = 'block';
- } else {
- el.style.display = 'none';
- }
- };
-
- SmoothieChart.prototype.mousemove = function (evt) {
- this.mouseover = true;
- this.mouseX = evt.offsetX;
- this.mouseY = evt.offsetY;
- this.mousePageX = evt.pageX;
- this.mousePageY = evt.pageY;
- if(!this.options.tooltip){
- return;
- }
- var el = this.getTooltipEl();
- el.style.top = Math.round(this.mousePageY) + 'px';
- el.style.left = Math.round(this.mousePageX) + 'px';
- this.updateTooltip();
- };
-
- SmoothieChart.prototype.mouseout = function () {
- this.mouseover = false;
- this.mouseX = this.mouseY = -1;
- if (this.tooltipEl)
- this.tooltipEl.style.display = 'none';
- };
-
- /**
- * Make sure the canvas has the optimal resolution for the device's pixel ratio.
- */
- SmoothieChart.prototype.resize = function () {
- var dpr = !this.options.enableDpiScaling || !window ? 1 : window.devicePixelRatio,
- width, height;
- if (this.options.responsive) {
- // Newer behaviour: Use the canvas's size in the layout, and set the internal
- // resolution according to that size and the device pixel ratio (eg: high DPI)
- width = this.canvas.offsetWidth;
- height = this.canvas.offsetHeight;
-
- if (width !== this.lastWidth) {
- this.lastWidth = width;
- this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());
- this.canvas.getContext('2d').scale(dpr, dpr);
- }
- if (height !== this.lastHeight) {
- this.lastHeight = height;
- this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());
- this.canvas.getContext('2d').scale(dpr, dpr);
- }
- } else if (dpr !== 1) {
- // Older behaviour: use the canvas's inner dimensions and scale the element's size
- // according to that size and the device pixel ratio (eg: high DPI)
- width = parseInt(this.canvas.getAttribute('width'));
- height = parseInt(this.canvas.getAttribute('height'));
-
- if (!this.originalWidth || (Math.floor(this.originalWidth * dpr) !== width)) {
- this.originalWidth = width;
- this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());
- this.canvas.style.width = width + 'px';
- this.canvas.getContext('2d').scale(dpr, dpr);
- }
-
- if (!this.originalHeight || (Math.floor(this.originalHeight * dpr) !== height)) {
- this.originalHeight = height;
- this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());
- this.canvas.style.height = height + 'px';
- this.canvas.getContext('2d').scale(dpr, dpr);
- }
- }
- };
-
- /**
- * Starts the animation of this chart.
- */
- SmoothieChart.prototype.start = function() {
- if (this.frame) {
- // We're already running, so just return
- return;
- }
-
- this.canvas.addEventListener('mousemove', this.mousemove);
- this.canvas.addEventListener('mouseout', this.mouseout);
-
- // Renders a frame, and queues the next frame for later rendering
- var animate = function() {
- this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
- if(this.options.nonRealtimeData){
- var dateZero = new Date(0);
- // find the data point with the latest timestamp
- var maxTimeStamp = this.seriesSet.reduce(function(max, series){
- var dataSet = series.timeSeries.data;
- var indexToCheck = Math.round(this.options.displayDataFromPercentile * dataSet.length) - 1;
- indexToCheck = indexToCheck >= 0 ? indexToCheck : 0;
- indexToCheck = indexToCheck <= dataSet.length -1 ? indexToCheck : dataSet.length -1;
- if(dataSet && dataSet.length > 0)
- {
- // timestamp corresponds to element 0 of the data point
- var lastDataTimeStamp = dataSet[indexToCheck][0];
- max = max > lastDataTimeStamp ? max : lastDataTimeStamp;
- }
- return max;
- }.bind(this), dateZero);
- // use the max timestamp as current time
- this.render(this.canvas, maxTimeStamp > dateZero ? maxTimeStamp : null);
- } else {
- this.render();
- }
- animate();
- }.bind(this));
- }.bind(this);
-
- animate();
- };
-
- /**
- * Stops the animation of this chart.
- */
- SmoothieChart.prototype.stop = function() {
- if (this.frame) {
- SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
- delete this.frame;
- this.canvas.removeEventListener('mousemove', this.mousemove);
- this.canvas.removeEventListener('mouseout', this.mouseout);
- }
- };
-
- SmoothieChart.prototype.updateValueRange = function() {
- // Calculate the current scale of the chart, from all time series.
- var chartOptions = this.options,
- chartMaxValue = Number.NaN,
- chartMinValue = Number.NaN;
-
- for (var d = 0; d < this.seriesSet.length; d++) {
- // TODO(ndunn): We could calculate / track these values as they stream in.
- var timeSeries = this.seriesSet[d].timeSeries;
- if (timeSeries.disabled) {
- continue;
- }
-
- if (!isNaN(timeSeries.maxValue)) {
- chartMaxValue = !isNaN(chartMaxValue) ? Math.max(chartMaxValue, timeSeries.maxValue) : timeSeries.maxValue;
- }
-
- if (!isNaN(timeSeries.minValue)) {
- chartMinValue = !isNaN(chartMinValue) ? Math.min(chartMinValue, timeSeries.minValue) : timeSeries.minValue;
- }
- }
-
- // Scale the chartMaxValue to add padding at the top if required
- if (chartOptions.maxValue != null) {
- chartMaxValue = chartOptions.maxValue;
- } else {
- chartMaxValue *= chartOptions.maxValueScale;
- }
-
- // Set the minimum if we've specified one
- if (chartOptions.minValue != null) {
- chartMinValue = chartOptions.minValue;
- } else {
- chartMinValue -= Math.abs(chartMinValue * chartOptions.minValueScale - chartMinValue);
- }
-
- // If a custom range function is set, call it
- if (this.options.yRangeFunction) {
- var range = this.options.yRangeFunction({min: chartMinValue, max: chartMaxValue});
- chartMinValue = range.min;
- chartMaxValue = range.max;
- }
-
- if (!isNaN(chartMaxValue) && !isNaN(chartMinValue)) {
- var targetValueRange = chartMaxValue - chartMinValue;
- var valueRangeDiff = (targetValueRange - this.currentValueRange);
- var minValueDiff = (chartMinValue - this.currentVisMinValue);
- this.isAnimatingScale = Math.abs(valueRangeDiff) > 0.1 || Math.abs(minValueDiff) > 0.1;
- this.currentValueRange += chartOptions.scaleSmoothing * valueRangeDiff;
- this.currentVisMinValue += chartOptions.scaleSmoothing * minValueDiff;
- }
-
- this.valueRange = { min: chartMinValue, max: chartMaxValue };
- };
-
- SmoothieChart.prototype.render = function(canvas, time) {
- var nowMillis = Date.now();
-
- // Respect any frame rate limit.
- if (this.options.limitFPS > 0 && nowMillis - this.lastRenderTimeMillis < (1000/this.options.limitFPS))
- return;
-
- if (!this.isAnimatingScale) {
- // We're not animating. We can use the last render time and the scroll speed to work out whether
- // we actually need to paint anything yet. If not, we can return immediately.
-
- // Render at least every 1/6th of a second. The canvas may be resized, which there is
- // no reliable way to detect.
- var maxIdleMillis = Math.min(1000/6, this.options.millisPerPixel);
-
- if (nowMillis - this.lastRenderTimeMillis < maxIdleMillis) {
- return;
- }
- }
-
- this.resize();
- this.updateTooltip();
-
- this.lastRenderTimeMillis = nowMillis;
-
- canvas = canvas || this.canvas;
- time = time || nowMillis - (this.delay || 0);
-
- // Round time down to pixel granularity, so motion appears smoother.
- time -= time % this.options.millisPerPixel;
-
- this.lastChartTimestamp = time;
-
- var context = canvas.getContext('2d'),
- chartOptions = this.options,
- dimensions = { top: 0, left: 0, width: canvas.clientWidth, height: canvas.clientHeight },
- // Calculate the threshold time for the oldest data points.
- oldestValidTime = time - (dimensions.width * chartOptions.millisPerPixel),
- valueToYPixel = function(value) {
- var offset = value - this.currentVisMinValue;
- return this.currentValueRange === 0
- ? dimensions.height
- : dimensions.height - (Math.round((offset / this.currentValueRange) * dimensions.height));
- }.bind(this),
- timeToXPixel = function(t) {
- if(chartOptions.scrollBackwards) {
- return Math.round((time - t) / chartOptions.millisPerPixel);
- }
- return Math.round(dimensions.width - ((time - t) / chartOptions.millisPerPixel));
- };
-
- this.updateValueRange();
-
- context.font = chartOptions.labels.fontSize + 'px ' + chartOptions.labels.fontFamily;
-
- // Save the state of the canvas context, any transformations applied in this method
- // will get removed from the stack at the end of this method when .restore() is called.
- context.save();
-
- // Move the origin.
- context.translate(dimensions.left, dimensions.top);
-
- // Create a clipped rectangle - anything we draw will be constrained to this rectangle.
- // This prevents the occasional pixels from curves near the edges overrunning and creating
- // screen cheese (that phrase should need no explanation).
- context.beginPath();
- context.rect(0, 0, dimensions.width, dimensions.height);
- context.clip();
-
- // Clear the working area.
- context.save();
- context.fillStyle = chartOptions.grid.fillStyle;
- context.clearRect(0, 0, dimensions.width, dimensions.height);
- context.fillRect(0, 0, dimensions.width, dimensions.height);
- context.restore();
-
- // Grid lines...
- context.save();
- context.lineWidth = chartOptions.grid.lineWidth;
- context.strokeStyle = chartOptions.grid.strokeStyle;
- // Vertical (time) dividers.
- if (chartOptions.grid.millisPerLine > 0) {
- context.beginPath();
- for (var t = time - (time % chartOptions.grid.millisPerLine);
- t >= oldestValidTime;
- t -= chartOptions.grid.millisPerLine) {
- var gx = timeToXPixel(t);
- if (chartOptions.grid.sharpLines) {
- gx -= 0.5;
- }
- context.moveTo(gx, 0);
- context.lineTo(gx, dimensions.height);
- }
- context.stroke();
- context.closePath();
- }
-
- // Horizontal (value) dividers.
- for (var v = 1; v < chartOptions.grid.verticalSections; v++) {
- var gy = Math.round(v * dimensions.height / chartOptions.grid.verticalSections);
- if (chartOptions.grid.sharpLines) {
- gy -= 0.5;
- }
- context.beginPath();
- context.moveTo(0, gy);
- context.lineTo(dimensions.width, gy);
- context.stroke();
- context.closePath();
- }
- // Bounding rectangle.
- if (chartOptions.grid.borderVisible) {
- context.beginPath();
- context.strokeRect(0, 0, dimensions.width, dimensions.height);
- context.closePath();
- }
- context.restore();
-
- // Draw any horizontal lines...
- if (chartOptions.horizontalLines && chartOptions.horizontalLines.length) {
- for (var hl = 0; hl < chartOptions.horizontalLines.length; hl++) {
- var line = chartOptions.horizontalLines[hl],
- hly = Math.round(valueToYPixel(line.value)) - 0.5;
- context.strokeStyle = line.color || '#ffffff';
- context.lineWidth = line.lineWidth || 1;
- context.beginPath();
- context.moveTo(0, hly);
- context.lineTo(dimensions.width, hly);
- context.stroke();
- context.closePath();
- }
- }
-
- // For each data set...
- for (var d = 0; d < this.seriesSet.length; d++) {
- context.save();
- var timeSeries = this.seriesSet[d].timeSeries;
- if (timeSeries.disabled) {
- continue;
- }
-
- var dataSet = timeSeries.data,
- seriesOptions = this.seriesSet[d].options;
-
- // Delete old data that's moved off the left of the chart.
- timeSeries.dropOldData(oldestValidTime, chartOptions.maxDataSetLength);
-
- // Set style for this dataSet.
- context.lineWidth = seriesOptions.lineWidth;
- context.strokeStyle = seriesOptions.strokeStyle;
- // Draw the line...
- context.beginPath();
- // Retain lastX, lastY for calculating the control points of bezier curves.
- var firstX = 0, firstY = 0, lastX = 0, lastY = 0;
- for (var i = 0; i < dataSet.length && dataSet.length !== 1; i++) {
- var x = timeToXPixel(dataSet[i][0]),
- y = valueToYPixel(dataSet[i][1]);
-
- if (i === 0) {
- firstX = x;
- firstY = y;
- context.moveTo(x, y);
- } else {
- switch (seriesOptions.interpolation || chartOptions.interpolation) {
- case "linear":
- case "line": {
- context.lineTo(x,y);
- break;
- }
- case "bezier":
- default: {
- // Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves
- //
- // Assuming A was the last point in the line plotted and B is the new point,
- // we draw a curve with control points P and Q as below.
- //
- // A---P
- // |
- // |
- // |
- // Q---B
- //
- // Importantly, A and P are at the same y coordinate, as are B and Q. This is
- // so adjacent curves appear to flow as one.
- //
- context.bezierCurveTo( // startPoint (A) is implicit from last iteration of loop
- Math.round((lastX + x) / 2), lastY, // controlPoint1 (P)
- Math.round((lastX + x)) / 2, y, // controlPoint2 (Q)
- x, y); // endPoint (B)
- break;
- }
- case "step": {
- context.lineTo(x,lastY);
- context.lineTo(x,y);
- break;
- }
- }
- }
-
- lastX = x; lastY = y;
- }
-
- if (dataSet.length > 1) {
- if (seriesOptions.fillStyle) {
- // Close up the fill region.
- if (chartOptions.scrollBackwards) {
- context.lineTo(lastX, dimensions.height + seriesOptions.lineWidth);
- context.lineTo(firstX, dimensions.height + seriesOptions.lineWidth);
- context.lineTo(firstX, firstY);
- } else {
- context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, lastY);
- context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, dimensions.height + seriesOptions.lineWidth + 1);
- context.lineTo(firstX, dimensions.height + seriesOptions.lineWidth);
- }
- context.fillStyle = seriesOptions.fillStyle;
- context.fill();
- }
-
- if (seriesOptions.strokeStyle && seriesOptions.strokeStyle !== 'none') {
- context.stroke();
- }
- context.closePath();
- }
- context.restore();
- }
-
- if (chartOptions.tooltip && this.mouseX >= 0) {
- // Draw vertical bar to show tooltip position
- context.lineWidth = chartOptions.tooltipLine.lineWidth;
- context.strokeStyle = chartOptions.tooltipLine.strokeStyle;
- context.beginPath();
- context.moveTo(this.mouseX, 0);
- context.lineTo(this.mouseX, dimensions.height);
- context.closePath();
- context.stroke();
- this.updateTooltip();
- }
-
- // Draw the axis values on the chart.
- if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)) {
- var maxValueString = chartOptions.yMaxFormatter(this.valueRange.max, chartOptions.labels.precision),
- minValueString = chartOptions.yMinFormatter(this.valueRange.min, chartOptions.labels.precision),
- maxLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2,
- minLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(minValueString).width - 2;
- context.fillStyle = chartOptions.labels.fillStyle;
- context.fillText(maxValueString, maxLabelPos, chartOptions.labels.fontSize);
- context.fillText(minValueString, minLabelPos, dimensions.height - 2);
- }
-
- // Display intermediate y axis labels along y-axis to the left of the chart
- if ( chartOptions.labels.showIntermediateLabels
- && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)
- && chartOptions.grid.verticalSections > 0) {
- // show a label above every vertical section divider
- var step = (this.valueRange.max - this.valueRange.min) / chartOptions.grid.verticalSections;
- var stepPixels = dimensions.height / chartOptions.grid.verticalSections;
- for (var v = 1; v < chartOptions.grid.verticalSections; v++) {
- var gy = dimensions.height - Math.round(v * stepPixels);
- if (chartOptions.grid.sharpLines) {
- gy -= 0.5;
- }
- var yValue = chartOptions.yIntermediateFormatter(this.valueRange.min + (v * step), chartOptions.labels.precision);
- //left of right axis?
- intermediateLabelPos =
- chartOptions.labels.intermediateLabelSameAxis
- ? (chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(yValue).width - 2)
- : (chartOptions.scrollBackwards ? dimensions.width - context.measureText(yValue).width - 2 : 0);
-
- context.fillText(yValue, intermediateLabelPos, gy - chartOptions.grid.lineWidth);
- }
- }
-
- // Display timestamps along x-axis at the bottom of the chart.
- if (chartOptions.timestampFormatter && chartOptions.grid.millisPerLine > 0) {
- var textUntilX = chartOptions.scrollBackwards
- ? context.measureText(minValueString).width
- : dimensions.width - context.measureText(minValueString).width + 4;
- for (var t = time - (time % chartOptions.grid.millisPerLine);
- t >= oldestValidTime;
- t -= chartOptions.grid.millisPerLine) {
- var gx = timeToXPixel(t);
- // Only draw the timestamp if it won't overlap with the previously drawn one.
- if ((!chartOptions.scrollBackwards && gx < textUntilX) || (chartOptions.scrollBackwards && gx > textUntilX)) {
- // Formats the timestamp based on user specified formatting function
- // SmoothieChart.timeFormatter function above is one such formatting option
- var tx = new Date(t),
- ts = chartOptions.timestampFormatter(tx),
- tsWidth = context.measureText(ts).width;
-
- textUntilX = chartOptions.scrollBackwards
- ? gx + tsWidth + 2
- : gx - tsWidth - 2;
-
- context.fillStyle = chartOptions.labels.fillStyle;
- if(chartOptions.scrollBackwards) {
- context.fillText(ts, gx, dimensions.height - 2);
- } else {
- context.fillText(ts, gx - tsWidth, dimensions.height - 2);
- }
- }
- }
- }
-
- // Display title.
- if (chartOptions.title.text !== '') {
- context.font = chartOptions.title.fontSize + 'px ' + chartOptions.title.fontFamily;
- var titleXPos = chartOptions.scrollBackwards ? dimensions.width - context.measureText(chartOptions.title.text).width - 2 : 2;
- if (chartOptions.title.verticalAlign == 'bottom') {
- context.textBaseline = 'bottom';
- var titleYPos = dimensions.height;
- } else if (chartOptions.title.verticalAlign == 'middle') {
- context.textBaseline = 'middle';
- var titleYPos = dimensions.height / 2;
- } else {
- context.textBaseline = 'top';
- var titleYPos = 0;
- }
- context.fillStyle = chartOptions.title.fillStyle;
- context.fillText(chartOptions.title.text, titleXPos, titleYPos);
- }
-
- context.restore(); // See .save() above.
- };
-
- // Sample timestamp formatting function
- SmoothieChart.timeFormatter = function(date) {
- function pad2(number) { return (number < 10 ? '0' : '') + number }
- return pad2(date.getHours()) + ':' + pad2(date.getMinutes()) + ':' + pad2(date.getSeconds());
- };
-
- exports.TimeSeries = TimeSeries;
- exports.SmoothieChart = SmoothieChart;
-
-})(typeof exports === 'undefined' ? this : exports);
-
diff --git a/frontend/static/jscn/supervisor.js b/frontend/static/jscn/supervisor.js
deleted file mode 100644
index 628bdd8..0000000
--- a/frontend/static/jscn/supervisor.js
+++ /dev/null
@@ -1,581 +0,0 @@
-let grafstyl = {
- responsive: true,
- minValue: 0,
- maxValue: 100,
- grid: {
- strokeStyle: '#c0c0c0',
- fillStyle: 'rgba(0, 0, 0, 0)',
- lineWidth: 1,
- millisPerLine: 250,
- verticalSections: 10,
- },
- labels: {
- fillStyle: '#008080'
- }
-};
-
-let linestyl = {
- strokeStyle: '#00c080',
- fillStyle: 'rgba(0, 128, 128, 0.25)',
- lineWidth: 2
-};
-
-function SwitchTab (head, sect) {
- let sectlist = {
- "cpuu": {
- "cpuu-usej-ttle": "cpuu-usej-body",
- "cpuu-cycl-ttle": "cpuu-cycl-body",
- "cpuu-time-ttle": "cpuu-time-body",
- "cpuu-stat-ttle": "cpuu-stat-body"
- },
- "memo": {
- "memo-over-ttle": "memo-over-body",
- "memo-phys-ttle": "memo-phys-body",
- "memo-virt-ttle": "memo-virt-body",
- },
- "disk": {
- "disk-usej-ttle": "disk-usej-body",
- "disk-part-ttle": "disk-part-body",
- },
- "netw": {
- "netw-usej-ttle": "netw-usej-body",
- "netw-stat-ttle": "netw-stat-body",
- "netw-addr-ttle": "netw-addr-body",
- },
- "sens": {
- "sens-batt-ttle": "sens-batt-body",
- "sens-fans-ttle": "sens-fans-body",
- "sens-thrm-ttle": "sens-thrm-body",
- }
- };
- for (indx in sectlist[sect]) {
- if (indx !== head) {
- $("#" + indx).removeClass("active");
- $("#" + sectlist[sect][indx]).removeClass("active");
- }
- }
- $("#" + head).addClass("active");
- $("#" + sectlist[sect][head]).addClass("active");
-}
-
-function AskForAJAXServiceEndpoint () {
- $("#restwarn").modal("setting", "closable", false).modal("show");
-}
-
-function FetchAJAXServiceEndpoint () {
- credjson = {
- "vsonsuri": document.getElementById("vsonsuri").value,
- "passcode": document.getElementById("passcode").value,
- }
- sessionStorage.setItem("vsoniden", JSON.stringify(credjson));
- OverviewGraphAJAX();
-}
-
-async function OverviewGraphAJAX () {
- let cpusgraf = new SmoothieChart(grafstyl);
- let physgraf = new SmoothieChart(grafstyl);
- let swapgraf = new SmoothieChart(grafstyl);
- let battgraf = new SmoothieChart(grafstyl);
- let snbtgraf = new SmoothieChart(grafstyl);
- let dediphys = new SmoothieChart(grafstyl);
- let dedivirt = new SmoothieChart(grafstyl);
- let cpusline = new TimeSeries();
- let physline = new TimeSeries();
- let swapline = new TimeSeries();
- let battline = new TimeSeries();
- let snbtline = new TimeSeries();
- let depyline = new TimeSeries();
- let devtline = new TimeSeries();
- cpusgraf.addTimeSeries(cpusline, linestyl);
- physgraf.addTimeSeries(physline, linestyl);
- swapgraf.addTimeSeries(swapline, linestyl);
- battgraf.addTimeSeries(battline, linestyl);
- snbtgraf.addTimeSeries(snbtline, linestyl);
- dediphys.addTimeSeries(depyline, linestyl);
- dedivirt.addTimeSeries(devtline, linestyl);
- let prcpgraf = [];
- let prcpline = [];
- let cyclgraf = [];
- let cyclline = [];
- let cpuquant = 0;
- await $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "deadsync", {
- passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === "deny") {
- $("#wrngiden").modal("setting", "closable", false).modal("show");
- } else {
- let deadobjc = data;
- cpuquant = parseInt(deadobjc["cpuquant"]);
- // Rendered DOM for every temperature sensor and setting stage for live updating
- for (let indx in deadobjc["sensread"]["senstemp"]) {
- $("#sens-thrm-body").append(
- "" +
- "" + indx + " |
|---|
" +
- "" + "" + "
"
- );
- for (let jndx in deadobjc["sensread"]["senstemp"][indx]) {
- $("#sens-thrm-devc-" + indx).append(
- "" + "| " + deadobjc["sensread"]["senstemp"][indx][jndx]["label"] + " | " +
- "TNOW " + deadobjc["sensread"]["senstemp"][indx][jndx]["current"] + " C | " +
- "HIGH " + deadobjc["sensread"]["senstemp"][indx][jndx]["high"] + " C | " +
- "CRIT " + deadobjc["sensread"]["senstemp"][indx][jndx]["critical"] + " C | " +
- "
"
- );
- }
- }
- // Rendered DOM for every fan and setting stage for live updating
- for (let indx in deadobjc["sensread"]["fanspeed"]) {
- $("#sens-fans-body").append(
- "" +
- "" + indx + " |
|---|
" +
- "" + "
"
- );
- for (let jndx in deadobjc["sensread"]["fanspeed"][indx]) {
- $("#sens-fans-devc-" + indx).append(
- "" +
- "| " + deadobjc["sensread"]["fanspeed"][indx][jndx]["label"] + " | " +
- "" + deadobjc["sensread"]["fanspeed"][indx][jndx]["current"] + " RPM | " +
- "
"
- );
- }
- }
- // Rendered DOM for every disk partition and setting stage for live updating
- for (let indx in deadobjc["diousage"]) {
- $("#disk-usej-body").append(
- "" + "" + "" +
- "" + indx + " | " +
- " | " +
- "
" + "" + "" + "" +
- " | " +
- " | " +
- " | " +
- " | " +
- "
" + "" +
- " | " +
- " | " +
- " | " +
- " | " +
- "
" + "" + "
"
- );
- }
- // Rendered DOM for every network interface card and setting stage for live updating
- for (let indx in deadobjc["netusage"]) {
- $("#netw-usej-body").append(
- "" + "" + "" +
- "" + "" + indx + "" +
- "SNIC " + " | " +
- "BSNT 0 bytes | " +
- "PSNT 0 packets | " +
- "
" + "" + " | " +
- "BRCV 0 bytes | " +
- "PRCV 0 packets | " +
- "
" + "" + "
"
- );
- }
- // One-time rendering of network interface addresses
- for (let indx in deadobjc["netaddrs"]) {
- $("#netw-addr-body").append(
- "" +
- "" + indx + " |
|---|
" +
- "" + "" + "
"
- );
- for (let jndx in deadobjc["netaddrs"][indx]) {
- $("#netw-addr-tabl-" + indx).append(
- "" +
- "| " + deadobjc["netaddrs"][indx][jndx]["address"] + " | " +
- " " + deadobjc["netaddrs"][indx][jndx]["netmask"] + " | " +
- " " + deadobjc["netaddrs"][indx][jndx]["broadcast"] + " | " +
- " " + deadobjc["netaddrs"][indx][jndx]["ptp"] + " | " +
- "
"
- );
- }
- }
- // One-time rendering of network statistics
- for (let indx in deadobjc["netstats"]) {
- $("#netw-stat-body").append(
- "" +
- "" +
- "" +
- "" +
- "" + indx + "" +
- "" + deadobjc["netstats"][indx]["isup"] + " " +
- " | " +
- "NSPD " + deadobjc["netstats"][indx]["speed"] + " | " +
- "
" +
- " | " +
- "NMTU " + deadobjc["netstats"][indx]["mtu"] + " | " +
- "
" +
- "" +
- "" +
- "
"
- );
- }
- // One-time rendering of disk partitions
- for (let indx = 0; indx < deadobjc.diskpart.length; indx ++) {
- $("#disk-part-body").append(
- "" + "" + "" + "" +
- "" + deadobjc.diskpart[indx]["device"] + "" +
- "" + deadobjc.diskpart[indx]["fstype"] + " " + " | " +
- "MLOC " + deadobjc.diskpart[indx]["mountpoint"] + " | " +
- "
" + "" + " | " +
- "OPTS " + deadobjc.diskpart[indx]["opts"] + " | " +
- "
" + "" + "
"
- );
- }
- for (let indx = 0; indx < cpuquant; indx++) {
- $("#prcpgraf").append(
- "" +
- "
" + "
CPU #" + indx + "
" +
- "
0% in use
" + "
" +
- "" +
- "
" + "
" + "
" +
- "
" + "
CPU #" + indx + "
" +
- "
0MHz (0/0)
" +
- "
" + "" +
- "
" + "
" + "
" +
- "| CPU #" + indx + " | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "Unavailable | " +
- "
"
- );
- }
- while (1) {
- await new Promise(r => setTimeout(r, 1000));
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "livesync", {
- passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === "deny") {
- $("#wrngiden").modal("setting", "closable", false).modal("show");
- } else {
- let liveobjc = data;
- for (let indx in liveobjc.cpuprcnt) {
- cpusline.append(new Date().getTime(), parseFloat(liveobjc.cpuprcnt[indx]).toPrecision(3));
- document.getElementById("cpusvalu").innerText = parseFloat(liveobjc.cpuprcnt[indx]).toPrecision(3);
- }
- depyline.append(new Date().getTime(), parseFloat(liveobjc.virtdata["percent"]).toPrecision(3));
- document.getElementById("phys-dedi-byte").innerText = parseInt(liveobjc.virtdata["used"]) + " of " + parseInt(liveobjc.virtdata["total"]);
- physline.append(new Date().getTime(), parseFloat(liveobjc.virtdata["percent"]).toPrecision(3));
- document.getElementById("physvalu").innerText = parseFloat(liveobjc.virtdata["percent"]).toPrecision(3);
- document.getElementById("phys-dedi-perc").innerText = parseFloat(liveobjc.virtdata["percent"]).toPrecision(3);
- devtline.append(new Date().getTime(), parseFloat(liveobjc.swapinfo["percent"]).toPrecision(3));
- document.getElementById("virt-dedi-byte").innerText = parseInt(liveobjc.swapinfo["used"]) + " of " + parseInt(liveobjc.swapinfo["total"]);
- swapline.append(new Date().getTime(), parseFloat(liveobjc.swapinfo["percent"]).toPrecision(3));
- document.getElementById("swapvalu").innerText = parseFloat(liveobjc.swapinfo["percent"]).toPrecision(3);
- document.getElementById("virt-dedi-perc").innerText = parseFloat(liveobjc.swapinfo["percent"]).toPrecision(3);
- battline.append(new Date().getTime(), parseFloat(liveobjc.sensread.battstat["percent"]).toPrecision(3));
- document.getElementById("battvalu").innerText = parseFloat(liveobjc.sensread.battstat["percent"]).toPrecision(3);
- for (let indx = 0; indx < cpuquant; indx++) {
- prcpline[indx].append(new Date().getTime(), parseFloat(liveobjc.cpuprcnt[indx]).toPrecision(3));
- document.getElementById("cpuu-perc-" + indx).innerText = parseFloat(liveobjc.cpuprcnt[indx]).toPrecision(3);
- cyclline[indx].append(new Date().getTime(), parseFloat(liveobjc.cpuclock[indx]["current"]).toPrecision(5));
- document.getElementById("cpuu-cycl-curt-" + indx).innerText = parseFloat(liveobjc.cpuclock[indx]["current"]).toPrecision(5);
- document.getElementById("cpuu-cycl-mine-" + indx).innerText = parseFloat(liveobjc.cpuclock[indx]["min"]).toPrecision(5);
- document.getElementById("cpuu-cycl-maxe-" + indx).innerText = parseFloat(liveobjc.cpuclock[indx]["max"]).toPrecision(5);
- }
- document.getElementById("cpuu-stat-ctxs").innerText = liveobjc.cpustats["ctx_switches"];
- document.getElementById("cpuu-stat-intr").innerText = liveobjc.cpustats["interrupts"];
- document.getElementById("cpuu-stat-soft").innerText = liveobjc.cpustats["soft_interrupts"];
- document.getElementById("cpuu-stat-syst").innerText = liveobjc.cpustats["syscalls"];
- // Sensor battery section updater
- document.getElementById("sens-batt-plug").innerText = liveobjc.sensread.battstat["power_plugged"].toString().toUpperCase();
- document.getElementById("sens-batt-perc").innerText = parseFloat(liveobjc.sensread.battstat["percent"]).toPrecision(3);
- document.getElementById("sens-batt-time").innerText = liveobjc.sensread.battstat["secsleft"];
- snbtline.append(new Date().getTime(), parseFloat(liveobjc.sensread.battstat["percent"]).toPrecision(3));
- $("#sens-batt-prog").progress({
- percent: parseFloat(liveobjc.sensread.battstat["percent"]).toPrecision(3)
- });
- // Network usage secion updater
- for (let indx in liveobjc["netusage"]) {
- document.getElementById("netw-usej-bsnt-" + indx).innerText = liveobjc["netusage"][indx]["bytes_sent"];
- document.getElementById("netw-usej-psnt-" + indx).innerText = liveobjc["netusage"][indx]["packets_sent"];
- document.getElementById("netw-usej-brcv-" + indx).innerText = liveobjc["netusage"][indx]["bytes_recv"];
- document.getElementById("netw-usej-prcv-" + indx).innerText = liveobjc["netusage"][indx]["packets_recv"];
- }
- // Physical memory dedicated statistics table updater
- document.getElementById("memo-phys-totl").innerText = liveobjc.virtdata["total"];
- document.getElementById("memo-phys-free").innerText = liveobjc.virtdata["available"];
- document.getElementById("memo-phys-used").innerText = liveobjc.virtdata["used"];
- document.getElementById("memo-phys-actv").innerText = liveobjc.virtdata["active"];
- document.getElementById("memo-phys-inac").innerText = liveobjc.virtdata["inactive"];
- document.getElementById("memo-phys-buff").innerText = liveobjc.virtdata["buffers"];
- document.getElementById("memo-phys-cach").innerText = liveobjc.virtdata["cached"];
- document.getElementById("memo-phys-shar").innerText = liveobjc.virtdata["shared"];
- document.getElementById("memo-phys-slab").innerText = liveobjc.virtdata["slab"];
- // Virtual memory dedicated statistics table updater
- document.getElementById("memo-virt-totl").innerText = liveobjc.swapinfo["total"];
- document.getElementById("memo-virt-free").innerText = liveobjc.swapinfo["free"];
- document.getElementById("memo-virt-used").innerText = liveobjc.swapinfo["used"];
- document.getElementById("memo-virt-sine").innerText = liveobjc.swapinfo["sin"];
- document.getElementById("memo-virt-sout").innerText = liveobjc.swapinfo["sout"];
- // Fan speed sensor section updater
- for (let indx in liveobjc["sensread"]["fanspeed"]) {
- for (let jndx in liveobjc["sensread"]["fanspeed"][indx]) {
- document.getElementById("sens-fans-devc-curt-" + indx + "-" + jndx).innerText = liveobjc["sensread"]["fanspeed"][indx][jndx]["current"];
- }
- }
- // Thermal sensor section updater
- for (let indx in liveobjc["sensread"]["senstemp"]) {
- for (let jndx in liveobjc["sensread"]["senstemp"][indx]) {
- document.getElementById("sens-thrm-devc-tnow-" + indx + "-" + jndx).innerText = liveobjc["sensread"]["senstemp"][indx][jndx]["current"];
- document.getElementById("sens-thrm-devc-high-" + indx + "-" + jndx).innerText = liveobjc["sensread"]["senstemp"][indx][jndx]["high"];
- document.getElementById("sens-thrm-devc-crit-" + indx + "-" + jndx).innerText = liveobjc["sensread"]["senstemp"][indx][jndx]["critical"];
- }
- }
- // Disk usage body updater
- for (let indx in liveobjc["diousage"]) {
- document.getElementById("disk-usej-name-" + indx).innerText = indx;
- document.getElementById("disk-usej-bstm-" + indx).innerText = liveobjc["diousage"][indx]["busy_time"];
- document.getElementById("disk-usej-rdct-" + indx).innerText = liveobjc["diousage"][indx]["read_count"];
- document.getElementById("disk-usej-wrct-" + indx).innerText = liveobjc["diousage"][indx]["write_count"];
- document.getElementById("disk-usej-rdbt-" + indx).innerText = liveobjc["diousage"][indx]["read_bytes"];
- document.getElementById("disk-usej-wrbt-" + indx).innerText = liveobjc["diousage"][indx]["write_bytes"];
- document.getElementById("disk-usej-rdtm-" + indx).innerText = liveobjc["diousage"][indx]["read_time"];
- document.getElementById("disk-usej-wrtm-" + indx).innerText = liveobjc["diousage"][indx]["write_time"];
- document.getElementById("disk-usej-rdmc-" + indx).innerText = liveobjc["diousage"][indx]["read_merged_count"];
- document.getElementById("disk-usej-wrmc-" + indx).innerText = liveobjc["diousage"][indx]["write_merged_count"];
- }
- // Process listing live rendering
- document.getElementById("proc-tabl-dvsn").innerHTML = "";
- for (let indx in liveobjc["procinfo"]) {
- $("#proc-tabl-main").append(
- "" +
- "| " + indx + " | " +
- "" + liveobjc["procinfo"][indx]["name"] + " | " +
- "" + liveobjc["procinfo"][indx]["username"] + " | " +
- "" + parseFloat(liveobjc["procinfo"][indx]["memory_percent"]).toPrecision(3) + "% | " +
- "" + parseFloat(liveobjc["procinfo"][indx]["cpu_percent"]).toPrecision(3) + "% | " +
- "
"
- );
- }
- // Stream graphs to DOM Canvas elements
- cpusgraf.streamTo(document.getElementById("cpusover"), 1000);
- physgraf.streamTo(document.getElementById("physover"), 1000);
- swapgraf.streamTo(document.getElementById("swapover"), 1000);
- battgraf.streamTo(document.getElementById("battover"), 1000);
- dediphys.streamTo(document.getElementById("phys-dedi-graf"), 1000);
- dedivirt.streamTo(document.getElementById("virt-dedi-graf"), 1000);
- snbtgraf.streamTo(document.getElementById("sens-batt-graf"), 1000);
- for (let indx = 0; indx < cpuquant; indx++) {
- cyclgraf[indx].streamTo(document.getElementById("cpuu-cygf-" + indx), 1000);
- prcpgraf[indx].streamTo(document.getElementById("cpuu-graf-" + indx), 1000);
- }
- for (let indx = 0; indx < cpuquant; indx++) {
- document.getElementById("cpuu-time-user-" + indx).innerText = liveobjc.cputimes[indx]["user"];
- document.getElementById("cpuu-time-nice-" + indx).innerText = liveobjc.cputimes[indx]["nice"];
- document.getElementById("cpuu-time-syst-" + indx).innerText = liveobjc.cputimes[indx]["system"];
- document.getElementById("cpuu-time-idle-" + indx).innerText = liveobjc.cputimes[indx]["idle"];
- document.getElementById("cpuu-time-iowt-" + indx).innerText = liveobjc.cputimes[indx]["iowait"];
- document.getElementById("cpuu-time-ireq-" + indx).innerText = liveobjc.cputimes[indx]["irq"];
- document.getElementById("cpuu-time-soft-" + indx).innerText = liveobjc.cputimes[indx]["softirq"];
- document.getElementById("cpuu-time-stel-" + indx).innerText = liveobjc.cputimes[indx]["steal"];
- document.getElementById("cpuu-time-gest-" + indx).innerText = liveobjc.cputimes[indx]["guest"];
- document.getElementById("cpuu-time-gtnc-" + indx).innerText = liveobjc.cputimes[indx]["guest_nice"];
- }
- }
- }).fail(function () {
- $("#connlost").modal("setting", "closable", false).modal("show");
- }
- );
- }
-}
-
-function ViewProcessInfo (prociden) {
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "procinfo", {
- prociden: prociden, passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === "deny") {
- $("#wrngiden").modal("setting", "closable", false).modal("show");
- } else {
- document.getElementById("proc-info-name").innerText = data["name"];
- document.getElementById("proc-info-iden").innerText = "#" + data["pid"];
- document.getElementById("proc-info-cpuu-perc").innerText = parseFloat(data["cpu_percent"]).toPrecision(3) + "%";
- document.getElementById("proc-info-memo-perc").innerText = parseFloat(data["memory_percent"]).toPrecision(3) + "%";
- // Data section renderer
- document.getElementById("proc-info-data-user").innerText = data["username"];
- document.getElementById("proc-info-data-time").innerText = data["create_time"];
- document.getElementById("proc-info-data-stat").innerText = data["status"];
- document.getElementById("proc-info-data-term").innerText = data["terminal"];
- document.getElementById("proc-info-data-last").innerText = new Date().toLocaleString();
- // Memory info renderer
- document.getElementById("proc-info-memo-rsts").innerText = data["memory_info"]["rss"] + " bytes";
- document.getElementById("proc-info-memo-vmsz").innerText = data["memory_info"]["vms"] + " bytes";
- document.getElementById("proc-info-memo-shsz").innerText = data["memory_info"]["shared"] + " bytes";
- document.getElementById("proc-info-memo-text").innerText = data["memory_info"]["text"] + " bytes";
- document.getElementById("proc-info-memo-data").innerText = data["memory_info"]["data"] + " bytes";
- document.getElementById("proc-info-memo-libs").innerText = data["memory_info"]["lib"] + " bytes";
- document.getElementById("proc-info-memo-dirt").innerText = data["memory_info"]["dirty"] + " pages";
- // CPU times renderer
- document.getElementById("proc-info-time-user").innerText = data["cpu_times"]["user"];
- document.getElementById("proc-info-time-syst").innerText = data["cpu_times"]["system"];
- document.getElementById("proc-info-time-cusr").innerText = data["cpu_times"]["children_user"];
- document.getElementById("proc-info-time-csys").innerText = data["cpu_times"]["children_system"];
- document.getElementById("proc-info-time-iowt").innerText = data["cpu_times"]["iowait"];
- // Context switch renderer
- document.getElementById("proc-info-ctxs-volu").innerText = data["num_ctx_switches"]["voluntary"];
- document.getElementById("proc-info-ctxs-volu").innerText = data["num_ctx_switches"]["involuntary"];
- // Group IDs renderer
- document.getElementById("proc-info-gids-eftv").innerText = data["gids"]["effective"];
- document.getElementById("proc-info-gids-real").innerText = data["gids"]["real"];
- document.getElementById("proc-info-gids-save").innerText = data["gids"]["saved"];
- // User IDs renderer
- document.getElementById("proc-info-uids-eftv").innerText = data["uids"]["effective"];
- document.getElementById("proc-info-uids-real").innerText = data["uids"]["real"];
- document.getElementById("proc-info-uids-save").innerText = data["uids"]["saved"];
- document.getElementById("proc-mode-kill").setAttribute("onclick", "KillProcess(" + data["pid"] + ")");
- document.getElementById("proc-mode-term").setAttribute("onclick", "TerminateProcess(" + data["pid"] + ")");
- document.getElementById("proc-mode-susp").setAttribute("onclick", "SuspendProcess(" + data["pid"] + ")");
- document.getElementById("proc-mode-resm").setAttribute("onclick", "ResumeProcess(" + data["pid"] + ")");
- $("#procinfo").modal("setting", "closable", false).modal("show");
- }
- }).fail(function () {
- $("body").toast({
- position: "bottom right",
- message: "Process information could not be retrieved"
- });
- });
-}
-
-function KillProcess (prociden) {
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "killproc", {
- prociden: prociden, passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === true) {
- $("body").toast({
- position: "bottom right",
- message: "Process kill was conveyed"
- });
- } else {
- $("body").toast({
- position: "bottom right",
- message: "Process kill could not be conveyed"
- });
- }
- }).fail(function () {
- $("body").toast({
- position: "bottom right",
- message: "Process kill could not be conveyed"
- });
- });
- $("#procinfo").modal("hide");
-}
-
-function TerminateProcess (prociden) {
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "termproc", {
- prociden: prociden, passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === true) {
- $("body").toast({
- position: "bottom right",
- message: "Process termination was conveyed"
- });
- } else {
- $("body").toast({
- position: "bottom right",
- message: "Process termination could not be conveyed"
- });
- }
- }).fail(function () {
- $("body").toast({
- position: "bottom right",
- message: "Process termination could not be conveyed"
- });
- });
- $("#procinfo").modal("hide");
-}
-
-function SuspendProcess (prociden) {
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "suspproc", {
- prociden: prociden, passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === true) {
- $("body").toast({
- position: "bottom right",
- message: "Process suspension was conveyed"
- });
- } else {
- $("body").toast({
- position: "bottom right",
- message: "Process suspension could not be conveyed"
- });
- }
- }).fail(function () {
- $("body").toast({
- position: "bottom right",
- message: "Process suspension could not be conveyed"
- });
- });
- $("#procinfo").modal("hide");
-}
-
-function ResumeProcess (prociden) {
- $.getJSON(JSON.parse(sessionStorage.getItem("vsoniden"))["vsonsuri"] + "resmproc", {
- prociden: prociden, passcode: JSON.parse(sessionStorage.getItem("vsoniden"))["passcode"]
- }, function (data) {
- if (data["retnmesg"] === true) {
- $("body").toast({
- position: "bottom right",
- message: "Process resuming was conveyed"
- });
- } else {
- $("body").toast({
- position: "bottom right",
- message: "Process resuming could not be conveyed"
- });
- }
- }).fail(function () {
- $("body").toast({
- position: "bottom right",
- message: "Process resuming could not be conveyed"
- });
- });
- $("#procinfo").modal("hide");
-}
\ No newline at end of file
diff --git a/frontend/templates/maingotm.html b/frontend/templates/maingotm.html
deleted file mode 100644
index 59bf96a..0000000
--- a/frontend/templates/maingotm.html
+++ /dev/null
@@ -1,187 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- SuperVisor
-
-
-
-
- SuperVisor
-
-
-
-
-
-
-
-
- | Username | Unavailable |
- | System name | Unavailable |
- | Host name | Unavailable |
- | Version | Unavailable |
- | Boot time | Unavailable |
-
-
-
-
-
-
-
-
CPU Usage
-
0% in use
-
-
-
-
-
-
-
-
Physical memory
-
0% in use
-
-
-
-
-
-
-
-
Virtual memory
-
0% in use
-
-
-
-
-
-
-
-
Battery
-
0% remaining
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
- USER | NICE | SYST | IDLE | IOWT |
- IREQ | SOFT | STEL | GEST | GTNC |
-
-
-
-
-
-
-
-
Hello
-
-
-
-
Connect
-
-
- Enable the SuperVisor driver service on your remote device first. Once the driver has been set up,
- take a note of the uniform resource identifier and the connector passphrase enter it here to begin
- monitoring its performance.
-
-
-
-
-
-
Access denied
-
-
- The connector passphrase provided does not match with that of the driver service.
- Please reload the page and try entering the passphrase correctly.
-
-
-
-
- SuperVisor
-
-
-
-
-
-
-
-
- | Username | Unavailable |
- | System name | Unavailable |
- | Host name | Unavailable |
- | Version | Unavailable |
- | Boot time | Unavailable |
-
-
-
-
-
-
-
-
-
Physical memory
-
-
0%
-
-
-
-
-
-
-
Virtual memory
-
-
0%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
- USER | NICE | SYST | IDLE | IOWT |
- IREQ | SOFT | STEL | GEST | GTNC |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Physical memory
-
0 bytes in use
-
-
0%
-
-
-
-
-
-
-
Virtual memory
-
0 bytes in use
-
-
0%
-
-
-
-
-
-
-
-
- | Total | 0 bytes |
- | Free | 0 bytes |
- | Used | 0 bytes |
- | Active | 0 bytes |
- | Inactive | 0 bytes |
- | Buffers | 0 bytes |
- | Cached | 0 bytes |
- | Shared | 0 bytes |
- | Slab | 0 bytes |
-
-
-
-
- | Total | 0 bytes |
- | Free | 0 bytes |
- | Used | 0 bytes |
- | Swapped in | 0 bytes |
- | Swapped out | 0 bytes |
-
-
-
-
-
-
-
-
-
-
-
-
-
Battery
-
Plugged 0 | Standby 0 secs
-
-
-
-
-
-
-
-
-
Connect now
-
-
- Enable the SuperVisor driver service on your remote device first. Once the driver has been set up,
- take a note of the uniform resource identifier and the connector passphrase enter it here to begin
- monitoring its performance.
-
-
-
-
-
-
Access denied
-
-
- The connector passphrase provided does not match with that of the driver service.
- Please reload the page and try entering the passphrase correctly.
-
-
-
-
-
Connection lost
-
-
- The web interface is no longer connected to the driver service endpoint.
- Please reload the page and try establishing the connection again.
-
-
-
-
-
Process information
-
-
-
-
-
- |
-
- |
-
-
-
-
- |
-
- |
-
-
- |
-
-
-
-
-
-
- | Username |
- Invalid |
-
-
- | Created on |
- Invalid |
-
-
- | Current state |
- Invalid |
-
-
- | Terminal |
- Invalid |
-
-
- | Last updated on |
- Invalid |
-
-
-
-
-
-
- | Memory information |
-
-
-
-
- | Resident set size |
- 0 bytes |
-
-
- | Virtual memory size |
- 0 bytes |
-
-
- | Shared size |
- 0 bytes |
-
-
- | Text resident size |
- 0 bytes |
-
-
- | Data resident size |
- 0 bytes |
-
-
- | Shared libraries size |
- 0 bytes |
-
-
- | Dirty pages |
- 0 pages |
-
-
-
-
-
-
- | CPU times |
-
-
-
-
- | USER |
- SYST |
- CUSR |
- CSYS |
- IOWT |
-
-
- | 0 |
- 0 |
- 0 |
- 0 |
- 0 |
-
-
-
-
-
-
- | Context switches |
-
-
-
-
- | VOLUNTARY |
- INVOLUNTARY |
-
-
- | 0 |
- 0 |
-
-
-
-
-
- | Group IDs |
|---|
-
-
-
- | EFTV |
- REAL |
- SAVE |
-
-
- | 0 |
- 0 |
- 0 |
-
-
-
-
-
-
- | User IDs |
-
-
-
-
- | EFTV |
- REAL |
- SAVE |
-
-
- | 0 |
- 0 |
- 0 |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Menu
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {'"a benevolent smile"'}
+
+
+
+
+
+
+ );
+}
diff --git a/visual/src/comp/head.tsx b/visual/src/comp/head.tsx
new file mode 100644
index 0000000..8f12d2a
--- /dev/null
+++ b/visual/src/comp/head.tsx
@@ -0,0 +1,26 @@
+import { useLocation } from "react-router";
+
+export default function ObtainHeader() {
+ const location = useLocation();
+
+ const header = () => {
+ switch (location.pathname) {
+ case "/":
+ return "Resources";
+ case "/page_task":
+ return "Activities";
+ case "/page_proc":
+ return "Processing";
+ case "/page_memo":
+ return "Performance";
+ case "/page_ntwk":
+ return "Connections";
+ case "/page_disk":
+ return "Partitions";
+ default:
+ return "Resources";
+ }
+ };
+
+ return <>{header()};
+}
diff --git a/visual/src/comp/side.tsx b/visual/src/comp/side.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/visual/src/core.tsx b/visual/src/core.tsx
new file mode 100644
index 0000000..28fee1d
--- /dev/null
+++ b/visual/src/core.tsx
@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { BrowserRouter, Route, Routes } from "react-router";
+
+import packInfo from "../package.json";
+import Disk from "./path/disk.tsx";
+import Memo from "./path/memo.tsx";
+import MainMenu from "./path/menu.tsx";
+import Ntwk from "./path/ntwk.tsx";
+import Over from "./path/over.tsx";
+import Proc from "./path/proc.tsx";
+import Task from "./path/task.tsx";
+
+export default function Core() {
+ useEffect(() => {
+ document.title = `Observer v${packInfo.version}`;
+ }, []);
+
+ return (
+ <>
+
+
+ } path="/">
+ } index />
+ } path="/page_task" />
+ } path="/page_proc" />
+ } path="/page_memo" />
+ } path="/page_ntwk" />
+ } path="/page_disk" />
+
+
+
+
+ );
+}
diff --git a/visual/src/cssc/core.css b/visual/src/cssc/core.css
new file mode 100644
index 0000000..8a6ad58
--- /dev/null
+++ b/visual/src/cssc/core.css
@@ -0,0 +1,116 @@
+/*
+SysMon
+Copyright (C) 2024 Akashdeep Dhar
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option) any
+later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see .
+
+Any Red Hat trademarks that are incorporated in the codebase or documentation
+are not subject to the GNU Affero General Public License and may only be used
+or replicated with the express permission of Red Hat, Inc.
+*/
+
+@font-face {
+ font-family: "Inter";
+ font-weight: 400;
+ font-style: normal;
+ src: url("../font/sans_rlar.ttf");
+}
+
+@font-face {
+ font-family: "Inter";
+ font-weight: 400;
+ font-style: italic;
+ src: url("../font/sans_rlit.ttf");
+}
+
+@font-face {
+ font-family: "Inter";
+ font-weight: 700;
+ font-style: normal;
+ src: url("../font/sans_bold.ttf");
+}
+
+@font-face {
+ font-family: "Inter";
+ font-weight: 700;
+ font-style: italic;
+ src: url("../font/sans_bdit.ttf");
+}
+
+@font-face {
+ font-family: "JetBrains Mono";
+ font-weight: 400;
+ font-style: normal;
+ src: url("../font/mono_rlar.ttf");
+}
+
+@font-face {
+ font-family: "JetBrains Mono";
+ font-weight: 400;
+ font-style: italic;
+ src: url("../font/mono_rlit.ttf");
+}
+
+@font-face {
+ font-family: "JetBrains Mono";
+ font-weight: 700;
+ font-style: normal;
+ src: url("../font/mono_bold.ttf");
+}
+
+@font-face {
+ font-family: "JetBrains Mono";
+ font-weight: 700;
+ font-style: italic;
+ src: url("../font/mono_bdit.ttf");
+}
+
+@font-face {
+ font-family: "DIN 1451 Std Engschrift";
+ font-weight: 700;
+ font-style: normal;
+ src: url("../font/dine_rlar.otf");
+}
+
+@font-face {
+ font-family: "DIN 1451 Std Mittelschrift";
+ font-weight: 700;
+ font-style: normal;
+ src: url("../font/dinm_rlar.otf");
+}
+
+.headelem {
+ font-family: "DIN 1451 Std Mittelschrift", sans-serif;
+}
+
+.dataelem {
+ font-family: "DIN 1451 Std Engschrift", sans-serif;
+}
+
+body {
+ font-family: "Inter", sans-serif !important;
+}
+
+.sidelink {
+ all: unset;
+}
+
+.sidelink.active {
+ display: block;
+ background-color: rgba(224, 224, 224, 0.5);
+}
+
+html {
+ background-color: rgba(224, 224, 224, 0.5);
+}
\ No newline at end of file
diff --git a/visual/src/main.tsx b/visual/src/main.tsx
new file mode 100644
index 0000000..e3500c5
--- /dev/null
+++ b/visual/src/main.tsx
@@ -0,0 +1,16 @@
+import "./cssc/core.css";
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+
+import Core from "./core.tsx";
+import { data } from "./util/data.tsx";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+);
diff --git a/visual/src/path/disk.tsx b/visual/src/path/disk.tsx
new file mode 100644
index 0000000..2dbf75f
--- /dev/null
+++ b/visual/src/path/disk.tsx
@@ -0,0 +1,400 @@
+import { Contrast, North, PieChart, South, Storage, TableChart, Tag } from "@mui/icons-material";
+import { CardHeader, Grid2 as Grid } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText from "@mui/material/ListItemText";
+import { useCallback, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { Tooltip as RCTooltip } from "recharts";
+
+import { EaseSize } from "../util/conv.tsx";
+import { makeDiskNumb, makeDiskPart, makeDiskRcrd, makeDiskTint } from "../util/part.tsx";
+
+export default function Disk() {
+ const dispatch = useDispatch();
+ const freq = useSelector((area) => area.area.freq);
+ const disk = useSelector((area) => area.area.disk);
+ const vibe = useSelector((area) => area.area.vibe);
+
+ const obtain_data = useCallback(async () => {
+ const intervalPart = fetch("/disk/part", { method: "GET", credentials: "include" }).then(async (response) => {
+ if (response.status === 200) {
+ return await response.json();
+ }
+ });
+
+ const intervalNumb = fetch("/disk/numb", { method: "GET", credentials: "include" }).then(async (response) => {
+ if (response.status === 200) {
+ return await response.json();
+ }
+ });
+
+ const [dataPart, dataNumb] = await Promise.all([intervalPart, intervalNumb]);
+ dispatch(makeDiskPart(dataPart));
+ dispatch(makeDiskNumb(dataNumb));
+ dispatch(makeDiskRcrd());
+ dispatch(makeDiskTint());
+ }, [dispatch]);
+
+ useEffect(() => {
+ const interval = setInterval(obtain_data, freq);
+ return () => {
+ clearInterval(interval);
+ };
+ }, [obtain_data, freq]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Occurrences"
+ subheader="Storage activities right now"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.numb.rd * 100) / (disk.numb.numb.rd + disk.numb.numb.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.numb.wt * 100) / (disk.numb.numb.rd + disk.numb.numb.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Occurrences"
+ subheader="Storage activities over time"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data} activities`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Size"
+ subheader="Storage activities in size right now"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.size.rd * 100) / (disk.numb.size.rd + disk.numb.size.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.size.wt * 100) / (disk.numb.size.rd + disk.numb.size.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Time"
+ subheader="Storage activities in time right now"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.time.rd * 100) / (disk.numb.time.rd + disk.numb.time.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+ {`${((disk.numb.time.wt * 100) / (disk.numb.time.rd + disk.numb.time.wt)).toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Size"
+ subheader="Storage activities in size over time"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${EaseSize(data)}`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Time"
+ subheader="Storage activities in time over time"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data} secs`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Occurrences"
+ subheader="Storage activities right now"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+ {disk.part.numb > 0 ? (
+ Object.entries(disk.part.data).map(([item, data]) => (
+
+
+
+
+
+
+
+
+ {data.size.relative.toFixed(1)}%
+
+
+ ))
+ ) : (
+
+
+ !
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Memory"
+ subheader="Physical"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ 100.0%
+
+
+
+
+
+
+
+
+
+
+ {memo.physical.relative.toFixed(1)}%
+
+
+
+
+
+
+
+
+
+
+ {(100 - memo.physical.relative).toFixed(1)}%
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Memory"
+ subheader="Overflow"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ 100.0%
+
+
+
+
+
+
+
+
+
+
+ {memo.overflow.relative.toFixed(1)}%
+
+
+
+
+
+
+
+
+
+
+ {(100 - memo.overflow.relative).toFixed(1)}%
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Memory"
+ subheader="Physical"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${EaseSize(data)}`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Memory"
+ subheader="Overflow"
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${EaseSize(data)}`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+ Observer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title={`${proc.unit.meta.name}`}
+ subheader={`${proc.unit.meta.vend} (${proc.unit.meta.arch})`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {`${proc.unit.cent.toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Frequency"
+ subheader={`${proc.unit.freq.curt.toFixed(2)}MHz`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data.toFixed(2)}MHz`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Usage"
+ subheader={`${proc.unit.cent.toFixed(2)}%`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data.toFixed(2)}%`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Frequencies"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data.toFixed(2)}MHz`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+ {Array.from({ length: proc.full.core }, (_, indx) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Usages"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+ `${data.toFixed(2)}%`}
+ contentStyle={{ fontSize: "10px", padding: "6px" }}
+ itemStyle={{ padding: "0" }}
+ />
+
+ {Array.from({ length: proc.full.core }, (_, indx) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Cycles"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+ {Object.keys(proc.full.data).length > 0 ? (
+ Object.entries(proc.full.data).map(([item, data]) => (
+
+
+
+ {item}
+
+
+
+
+ {data.cent.toFixed(1)}%
+
+
+ ))
+ ) : (
+
+
+ !
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Efficiency"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+ {Object.keys(proc.full.data).length > 0 ? (
+ Object.entries(proc.full.data).map(([item, data]) => (
+
+
+
+ {item}
+
+
+
+
+ #
+
+
+ ))
+ ) : (
+
+
+ !
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Statistics"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={
+
+
+
+
+
+ }
+ title="Load"
+ subheader={`Across ${proc.full.core} logical processor(s)`}
+ style={{ padding: "6px 10px 6px 10px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ 01m
+
+
+
+
+
+
+
+
+
+
+ 05m
+
+
+
+
+
+
+
+
+
+
+ 15m
+
+
+
+
+
+
+
+
+
-
