pyams/pyams_skin: comparison src/pyams_skin/resources/js/myams.js

Mercurial Mercurial > pyams > pyams_skin / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/pyams_skin/resources/js/myams.js

changeset 248	86b71518e457
parent 245	79635dd71cca
child 251	475559f51ff6

equal deleted inserted replaced

-:9f1dded7e725
+:86b71518e457
 /*
 * MyAMS
 * « My Application Management Skin »
 *
-* $Tag: 0.1.11 $ (rev. 1)
+* $Tag$ (rev. 1)
 * A bootstrap based application/administration skin
 *
 * Custom administration and application skin tools
 * Released under Zope Public License ZPL 1.1
 * ©2014-2016 Thierry Florac <tflorac@ulthar.net>
 	};
 	/**
 	 * JQuery filter on parents class
+	 * This filter is often combined with ":not()" to select DOM objects which don't have
+	 * parents of a given class.
+	 * For example:
+	 *
+	 *   $('.hint:not(:parents(.nohints))', element);
+	 *
+	 * will select all elements with ".hint" class which don't have a parent with '.nohints' class.
 	 */
 	$.expr[':'].parents = function(obj, index, meta /*, stack*/) {
 		return $(obj).parents(meta[3]).length > 0;
 	};
 	/**
 	 * JQuery 'scrollbarWidth' function
-	 * Get width of vertical scrollbar
+	 * Get width of default vertical scrollbar
 	 */
 	if ($.scrollbarWidth === undefined) {
 		$.scrollbarWidth = function() {
 			var parent = $('<div style="width: 50px; height: 50px; overflow: auto"><div/></div>').appendTo('body');
 			var child = parent.children();
 	/**
 	 * MyAMS JQuery extensions
 	 */
 	$.fn.extend({
-		/*
+		/**
 		 * Check if current object is empty or not
 		 */
 		exists: function() {
 			return $(this).length > 0;
 		},
-		/*
+		/**
 		 * Get object if it supports given CSS class,
-		 * otherwise looks for parents
+		 * otherwise look for parents
 		 */
 		objectOrParentWithClass: function(klass) {
 			if (this.hasClass(klass)) {
 				return this;
 			} else {
 				return this.parents('.' + klass);
 			}
 		},
-		/*
+		/**
 		 * Build an array of attributes of the given selection
 		 */
 		listattr: function(attr) {
 			var result = [];
 			this.each(function() {
 				result.push($(this).attr(attr));
 			});
 			return result;
 		},
-		/*
+		/**
 		 * CSS style function
 		 * Code from Aram Kocharyan on stackoverflow.com
 		 */
 		style: function(styleName, value, priority) {
 			// DOM node
 				// Get CSSStyleDeclaration
 				return style;
 			}
 		},
-		/*
+		/**
 		 * Remove CSS classes starting with a given prefix
 		 */
 		removeClassPrefix: function (prefix) {
 			this.each(function (i, it) {
 				var classes = it.className.split(" ").map(function(item) {
 				it.className = $.trim(classes.join(" "));
 			});
 			return this;
 		},
-		/*
+		/**
 		 * Context menu handler
 		 */
 		contextMenu: function(settings) {
 			function getMenuPosition(mouse, direction, scrollDir) {
 		}
 		return globals.document.body.contains(element[0]);
 	};
 	/**
-	 * Get script or CSS file using browser cache
+	 * Get target URL matching given source
-	 * Script or CSS URLs can include variable names, given between braces, as in
+	 *
-	 * {MyAMS.baseURL}
+	 * Given URL can include variable names (with their namespace), given between braces, as in {MyAMS.baseURL}
 	 */
 	MyAMS.getSource = function(url) {
 		return url.replace(/{[^{}]*}/g, function(match) {
 			return ams.getFunctionByName(match.substr(1, match.length-2));
 		});
 	};
+	/**
+	 * Script loader function
+	 *
+	 * @param url: script URL
+	 * @param callback: a callback to be called after script loading
+	 * @param options: a set of options to be added to AJAX call
+	 */
 	MyAMS.getScript = function(url, callback, options) {
 		if (typeof(callback) === 'object') {
 			options = callback;
 			callback = null;
 		}
 		};
 		var settings = $.extend({}, defaults, options);
 		return $.ajax(settings);
 	};
+	/**
+	 * CSS file loader function
+	 *
+	 * @param url: CSS file URL
+	 * @param id: a unique ID given to CSS file
+	 */
 	MyAMS.getCSS = function(url, id) {
 		var head = $('HEAD');
 		var css = $('link[data-ams-id="' + id + '"]', head);
 		if (css.length === 0) {
 			var source = ams.getSource(url);
 	/**
 	 * Events management
 	 */
 	MyAMS.event = {
+		/**
+		 * Stop current event propagation
+		 */
 		stop: function(event) {
 			if (!event) {
 				event = window.event;
 			}
 			if (event) {
 	/**
 	 * Browser testing functions; mostly for IE...
 	 */
 	MyAMS.browser = {
+		/**
+		 * Get IE version
+		 */
 		getInternetExplorerVersion: function() {
 			var rv = -1;
 			if (navigator.appName === "Microsoft Internet Explorer") {
 				var ua = navigator.userAgent;
 				var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
 				}
 			}
 			return rv;
 		},
+		/**
+		 * Display alert for old IE version
+		 */
 		checkVersion: function() {
 			var msg = "You're not using Windows Internet Explorer.";
 			var ver = this.getInternetExplorerVersion();
 			if (ver > -1) {
 				if (ver >= 8) {
 			if (globals.alert) {
 				globals.alert(msg);
 			}
 		},
+		/**
+		 * Check if IE is in version 8 or lower
+		 */
 		isIE8orlower: function() {
 			var msg = "0";
 			var ver = this.getInternetExplorerVersion();
 			if (ver > -1) {
 				if (ver >= 9) {
 			}
 			return msg;
 		},
+		/**
+		 * Copy selection to clipboard
+		 *
+		 * If 'text' argument is provided, given text is copied to clipboard.
+		 * Otherwise, text ou event's source is copied.
+		 * Several methods are tested to do clipboard copy (based on browser features); il copy can't be done,
+		 * a prompt is displayed to allow user to make a manual copy.
+		 */
 		copyToClipboard: function(text) {
 			function doCopy(text) {
 				var copied = false;
 				if (window.clipboardData && window.clipboardData.setData) {
 									  {
 										  title: text.length > 1
 											  ? ams.i18n.CLIPBOARD_TEXT_COPY_OK
 											  : ams.i18n.CLIPBOARD_CHARACTER_COPY_OK,
 										  icon: 'fa fa-fw fa-info-circle font-xs align-top margin-top-10',
-										  timeout: 1000
+										  timeout: 3000
 									  });
 				} else if (globals.prompt) {
 					globals.prompt(MyAMS.i18n.CLIPBOARD_COPY, text);
 				}
 			}
 	MyAMS.ajax = {
 		/**
 		 * Check for given feature and download script if necessary
 		 *
-		 * @checker: pointer to a javascript object which will be downloaded in undefined
+		 * @param checker: pointer to a javascript object which will be downloaded in undefined
-		 * @source: URL of a javascript file containing requested feature
+		 * @param source: URL of a javascript file containing requested feature
-		 * @callback: pointer to a function which will be called after the script is downloaded. The first
+		 * @param callback: pointer to a function which will be called after the script is downloaded. The first
 		 *   argument of this callback is a boolean value indicating if the script was just downloaded (true)
 		 *   or if the requested object was already loaded (false)
-		 * @options: callback options
+		 * @param options: callback options
 		 */
 		check: function(checker, source, callback, options) {
 			function callCallbacks(firstLoad, options) {
 				if (callback === undefined) {
 			var message;
 			if (result.message) {
 				message = result.message;
 				if (typeof(message) === 'string') {
 					if ((status === 'info') || (status === 'success')) {
-						ams.skin.smallBox(status,
+						ams.skin.smallBox(status, {
-										  {
 											  title: message,
 											  icon: 'fa fa-fw fa-info-circle font-xs align-top margin-top-10',
 											  timeout: 3000
 										  });
 					} else {
 								   message.body,
 								   message.subtitle);
 				}
 			}
 			if (result.smallbox) {
-				ams.skin.smallBox(result.smallbox_status || status,
+				ams.skin.smallBox(result.smallbox_status || status, {
-								  {title: result.smallbox,
+									  title: result.smallbox,
-								   icon: 'fa fa-fw fa-info-circle font-xs align-top margin-top-10',
+									  icon: 'fa fa-fw fa-info-circle font-xs align-top margin-top-10',
-								   timeout: 3000});
+									  timeout: 3000
+								  });
 			}
 			if (result.messagebox) {
 				message = result.messagebox;
 				if (typeof(message) === 'string') {
-					ams.skin.messageBox('info',
+					ams.skin.messageBox('info', {
-										{
 											title: ams.i18n.ERROR_OCCURED,
 											content: message,
 											timeout: 10000
 										});
 				} else {
 					var messageStatus = message.status || 'info';
 					if (messageStatus === 'error' && form && target) {
 						ams.executeFunctionByName(form.data('ams-form-submit-error') || 'MyAMS.form.finalizeSubmitOnError', form, target);
 					}
-					ams.skin.messageBox(messageStatus,
+					ams.skin.messageBox(messageStatus, {
-										{title: message.title || ams.i18n.ERROR_OCCURED,
+											title: message.title || ams.i18n.ERROR_OCCURED,
-										 content: message.content,
+											content: message.content,
-										 icon: message.icon,
+											icon: message.icon,
-										 number: message.number,
+											number: message.number,
-										 timeout: message.timeout === null ? undefined : (message.timeout || 10000)});
+											timeout: message.timeout === null ? undefined : (message.timeout || 10000)
+										});
 				}
 			}
 			if (result.event) {
 				form.trigger(result.event, result.event_options);
 			}
 						var widget = $('[name="' + widgetData.name + '"]', form);
 						if (!widget.exists()) {
 							widget = $('[name="' + widgetData.name + ':list"]', form);
 						}
 						if (widget.exists()) {
+							// Update widget state
 							widget.parents('label:first')
 								  .removeClassPrefix('state-')
 								  .addClass('state-error')
 								  .after('<span for="name" class="state-error">' + widgetData.message + '</span>');
-						}
+						} else {
-						// complete form alert message
+							// complete form alert message
-						if (widgetData.label) {
+							if (widgetData.label) {
-							message.push(widgetData.label + ' : ' + widgetData.message);
+								message.push(widgetData.label + ' : ' + widgetData.message);
+							}
 						}
 						// mark parent tab (if any) with error status
 						var tabIndex = widget.parents('.tab-pane').index() + 1;
 						if (tabIndex > 0) {
 							var navTabs = $('.nav-tabs', $(widget).parents('.tabforms'));
 		},
 		/** Datetimepicker dialog cleaner callback */
 		datetimepickerDialogHiddenCallback: function() {
 			$('.datepicker, .timepicker, .datetimepicker', this).datetimepicker('destroy');
+		},
+		/** Set SEO status */
+		setSEOStatus: function() {
+			var input = $(this);
+			var progress = input.siblings('.progress').children('.progress-bar');
+			var length = Math.min(input.val().length, 100);
+			var status = 'success';
+			if (length < 20 || length > 80) {
+				status = 'danger';
+			} else if (length < 40 || length > 66) {
+				status = 'warning';
+			}
+			progress.removeClassPrefix('progress-bar')
+					.addClass('progress-bar')
+					.addClass('progress-bar-' + status)
+					.css('width', length + '%');
 		}
 	};
 	/**
 			if (button.exists() && button.parent().hasClass('input-file')) {
 				button.next('input[type="text"]').val(input.val());
 			}
 		});
+		// Always blur readonly inputs
+		$(document).on('focus', 'input[readonly="readonly"]', function() {
+			$(this).blur();
+		});
 		// Prevent bootstrap dialog from blocking TinyMCE focus
 		$(document).on('focusin', function(e) {
 			if ($(e.target).closest('.mce-window').length) {
 				e.stopImmediatePropagation();
 			}
 		});
 		// Disable clicks on disabled tabs
-		$("a[data-toggle=tab]", ".nav-tabs").on("click", function(e) {
+		$(document).on("click", '.nav-tabs a[data-toggle=tab]', function(e) {
 			if ($(this).parent('li').hasClass("disabled")) {
 				e.preventDefault();
 				return false;
 			}
+		});
+		// Automatically set orientation of dropdown menus
+		$(document).on('show.bs.dropdown', '.btn-group', function() {
+			var menu = $(this);
+			var ul = menu.children('.dropdown-menu');
+			var menuRect = menu.get(0).getBoundingClientRect();
+			var position = menuRect.top;
+			var buttonHeight = menuRect.height;
+			var menuHeight = ul.outerHeight();
+			if (position > menuHeight && $(window).height() - position < buttonHeight + menuHeight) {
+				menu.addClass("dropup");
+			}
+		}).on('hidden.bs.dropdown', '.btn-group', function() {
+			// always reset after close
+			$(this).removeClass('dropup');
 		});
 		// Enable tabs dynamic loading
 		$(document).on('show.bs.tab', function(e) {
 			var link = $(e.target);

pyams/pyams_skin