From 2bd1bf389d9ffc1e79722c70023b4b3e067e1523 Mon Sep 17 00:00:00 2001 From: "Matthias P. Braendli" Date: Tue, 5 Jun 2018 11:51:56 +0200 Subject: Add web UI --- gui/static/js/jquery.gritter.js | 408 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 408 insertions(+) create mode 100644 gui/static/js/jquery.gritter.js (limited to 'gui/static/js/jquery.gritter.js') diff --git a/gui/static/js/jquery.gritter.js b/gui/static/js/jquery.gritter.js new file mode 100644 index 0000000..6f78775 --- /dev/null +++ b/gui/static/js/jquery.gritter.js @@ -0,0 +1,408 @@ +/* + * Gritter for jQuery + * http://www.boedesign.com/ + * + * Copyright (c) 2011 Jordan Boesch + * Dual licensed under the MIT and GPL licenses. + * + * Date: December 8, 2011 + * Version: 1.7.3 + */ + +(function($){ + + /** + * Set it up as an object under the jQuery namespace + */ + $.gritter = {}; + + /** + * Set up global options that the user can over-ride + */ + $.gritter.options = { + position: '', + class_name: '', // could be set to 'gritter-light' to use white notifications + fade_in_speed: 'medium', // how fast notifications fade in + fade_out_speed: 1000, // how fast the notices fade out + time: 6000 // hang on the screen for... + } + + /** + * Add a gritter notification to the screen + * @see Gritter#add(); + */ + $.gritter.add = function(params){ + + try { + return Gritter.add(params || {}); + } catch(e) { + + var err = 'Gritter Error: ' + e; + (typeof(console) != 'undefined' && console.error) ? + console.error(err, params) : + alert(err); + + } + + } + + /** + * Remove a gritter notification from the screen + * @see Gritter#removeSpecific(); + */ + $.gritter.remove = function(id, params){ + Gritter.removeSpecific(id, params || {}); + } + + /** + * Remove all notifications + * @see Gritter#stop(); + */ + $.gritter.removeAll = function(params){ + Gritter.stop(params || {}); + } + + /** + * Big fat Gritter object + * @constructor (not really since its object literal) + */ + var Gritter = { + + // Public - options to over-ride with $.gritter.options in "add" + position: '', + fade_in_speed: '', + fade_out_speed: '', + time: '', + + // Private - no touchy the private parts + _custom_timer: 0, + _item_count: 0, + _is_setup: 0, + _tpl_close: '
', + _tpl_item: '', + _tpl_wrap: '
', + + /** + * Add a gritter notification to the screen + * @param {Object} params The object that contains all the options for drawing the notification + * @return {Integer} The specific numeric id to that gritter notification + */ + add: function(params){ + + // We might have some issues if we don't have a title or text! + if(!params.title || !params.text){ + throw 'You need to fill out the first 2 params: "title" and "text"'; + } + + // Check the options and set them once + if(!this._is_setup){ + this._runSetup(); + } + + // Basics + var user = params.title, + text = params.text, + image = params.image || '', + sticky = params.sticky || false, + item_class = params.class_name || $.gritter.options.class_name, + position = $.gritter.options.position, + time_alive = params.time || ''; + + this._verifyWrapper(); + + this._item_count++; + var number = this._item_count, + tmp = this._tpl_item; + + // Assign callbacks + $(['before_open', 'after_open', 'before_close', 'after_close']).each(function(i, val){ + Gritter['_' + val + '_' + number] = ($.isFunction(params[val])) ? params[val] : function(){} + }); + + // Reset + this._custom_timer = 0; + + // A custom fade time set + if(time_alive){ + this._custom_timer = time_alive; + } + + var image_str = (image != '') ? '' : '', + class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image'; + + // String replacements on the template + tmp = this._str_replace( + ['[[username]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'], + [user, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp + ); + + // If it's false, don't show another gritter message + if(this['_before_open_' + number]() === false){ + return false; + } + + $('#gritter-notice-wrapper').addClass(position).append(tmp); + + var item = $('#gritter-item-' + this._item_count); + + item.fadeIn(this.fade_in_speed, function(){ + Gritter['_after_open_' + number]($(this)); + }); + + if(!sticky){ + this._setFadeTimer(item, number); + } + + // Bind the hover/unhover states + $(item).bind('mouseenter mouseleave', function(event){ + if(event.type == 'mouseenter'){ + if(!sticky){ + Gritter._restoreItemIfFading($(this), number); + } + } + else { + if(!sticky){ + Gritter._setFadeTimer($(this), number); + } + } + Gritter._hoverState($(this), event.type); + }); + + return number; + + }, + + /** + * If we don't have any more gritter notifications, get rid of the wrapper using this check + * @private + * @param {Integer} unique_id The ID of the element that was just deleted, use it for a callback + * @param {Object} e The jQuery element that we're going to perform the remove() action on + * @param {Boolean} manual_close Did we close the gritter dialog with the (X) button + */ + _countRemoveWrapper: function(unique_id, e, manual_close){ + + // Remove it then run the callback function + e.remove(); + this['_after_close_' + unique_id](e, manual_close); + + // Check if the wrapper is empty, if it is.. remove the wrapper + if($('.gritter-item-wrapper').length == 0){ + $('#gritter-notice-wrapper').remove(); + } + + }, + + /** + * Fade out an element after it's been on the screen for x amount of time + * @private + * @param {Object} e The jQuery element to get rid of + * @param {Integer} unique_id The id of the element to remove + * @param {Object} params An optional list of params to set fade speeds etc. + * @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X) + */ + _fade: function(e, unique_id, params, unbind_events){ + + var params = params || {}, + fade = (typeof(params.fade) != 'undefined') ? params.fade : true; + fade_out_speed = params.speed || this.fade_out_speed, + manual_close = unbind_events; + + this['_before_close_' + unique_id](e, manual_close); + + // If this is true, then we are coming from clicking the (X) + if(unbind_events){ + e.unbind('mouseenter mouseleave'); + } + + // Fade it out or remove it + if(fade){ + + e.animate({ + opacity: 0 + }, fade_out_speed, function(){ + e.animate({ height: 0 }, 300, function(){ + Gritter._countRemoveWrapper(unique_id, e, manual_close); + }) + }) + + } + else { + + this._countRemoveWrapper(unique_id, e); + + } + + }, + + /** + * Perform actions based on the type of bind (mouseenter, mouseleave) + * @private + * @param {Object} e The jQuery element + * @param {String} type The type of action we're performing: mouseenter or mouseleave + */ + _hoverState: function(e, type){ + + // Change the border styles and add the (X) close button when you hover + if(type == 'mouseenter'){ + + e.addClass('hover'); + + // Show close button + e.find('.gritter-close').show(); + + // Clicking (X) makes the perdy thing close + e.find('.gritter-close').click(function(){ + var unique_id = e.attr('id').split('-')[2]; + Gritter.removeSpecific(unique_id, {}, e, true); + }); + + } + // Remove the border styles and hide (X) close button when you mouse out + else { + + e.removeClass('hover'); + + // Hide close button + e.find('.gritter-close').hide(); + + } + + }, + + /** + * Remove a specific notification based on an ID + * @param {Integer} unique_id The ID used to delete a specific notification + * @param {Object} params A set of options passed in to determine how to get rid of it + * @param {Object} e The jQuery element that we're "fading" then removing + * @param {Boolean} unbind_events If we clicked on the (X) we set this to true to unbind mouseenter/mouseleave + */ + removeSpecific: function(unique_id, params, e, unbind_events){ + + if(!e){ + var e = $('#gritter-item-' + unique_id); + } + + // We set the fourth param to let the _fade function know to + // unbind the "mouseleave" event. Once you click (X) there's no going back! + this._fade(e, unique_id, params || {}, unbind_events); + + }, + + /** + * If the item is fading out and we hover over it, restore it! + * @private + * @param {Object} e The HTML element to remove + * @param {Integer} unique_id The ID of the element + */ + _restoreItemIfFading: function(e, unique_id){ + + clearTimeout(this['_int_id_' + unique_id]); + e.stop().css({ opacity: '', height: '' }); + + }, + + /** + * Setup the global options - only once + * @private + */ + _runSetup: function(){ + + for(opt in $.gritter.options){ + this[opt] = $.gritter.options[opt]; + } + this._is_setup = 1; + + }, + + /** + * Set the notification to fade out after a certain amount of time + * @private + * @param {Object} item The HTML element we're dealing with + * @param {Integer} unique_id The ID of the element + */ + _setFadeTimer: function(e, unique_id){ + + var timer_str = (this._custom_timer) ? this._custom_timer : this.time; + this['_int_id_' + unique_id] = setTimeout(function(){ + Gritter._fade(e, unique_id); + }, timer_str); + + }, + + /** + * Bring everything to a halt + * @param {Object} params A list of callback functions to pass when all notifications are removed + */ + stop: function(params){ + + // callbacks (if passed) + var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){}; + var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){}; + + var wrap = $('#gritter-notice-wrapper'); + before_close(wrap); + wrap.fadeOut(function(){ + $(this).remove(); + after_close(); + }); + + }, + + /** + * An extremely handy PHP function ported to JS, works well for templating + * @private + * @param {String/Array} search A list of things to search for + * @param {String/Array} replace A list of things to replace the searches with + * @return {String} sa The output + */ + _str_replace: function(search, replace, subject, count){ + + var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0, + f = [].concat(search), + r = [].concat(replace), + s = subject, + ra = r instanceof Array, sa = s instanceof Array; + s = [].concat(s); + + if(count){ + this.window[count] = 0; + } + + for(i = 0, sl = s.length; i < sl; i++){ + + if(s[i] === ''){ + continue; + } + + for (j = 0, fl = f.length; j < fl; j++){ + + temp = s[i] + ''; + repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0]; + s[i] = (temp).split(f[j]).join(repl); + + if(count && s[i] !== temp){ + this.window[count] += (temp.length-s[i].length) / f[j].length; + } + + } + } + + return sa ? s : s[0]; + + }, + + /** + * A check to make sure we have something to wrap our notices with + * @private + */ + _verifyWrapper: function(){ + + if($('#gritter-notice-wrapper').length == 0){ + $('body').append(this._tpl_wrap); + } + + } + + } + +})(jQuery); -- cgit v1.2.3