UNPKG

jspanel

Version:

A jQuery Plugin to create highly configurable multifunctional floating panels

1,474 lines (1,215 loc) 202 kB
/* * Foundation Responsive Library * http://foundation.zurb.com * Copyright 2014, ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ (function ($, window, document, undefined) { 'use strict'; var header_helpers = function (class_array) { var i = class_array.length; var head = $('head'); while (i--) { if(head.has('.' + class_array[i]).length === 0) { head.append('<meta class="' + class_array[i] + '" />'); } } }; header_helpers([ 'foundation-mq-small', 'foundation-mq-small-only', 'foundation-mq-medium', 'foundation-mq-medium-only', 'foundation-mq-large', 'foundation-mq-large-only', 'foundation-mq-xlarge', 'foundation-mq-xlarge-only', 'foundation-mq-xxlarge', 'foundation-data-attribute-namespace']); // Enable FastClick if present $(function() { if (typeof FastClick !== 'undefined') { // Don't attach to body if undefined if (typeof document.body !== 'undefined') { FastClick.attach(document.body); } } }); // private Fast Selector wrapper, // returns jQuery object. Only use where // getElementById is not available. var S = function (selector, context) { if (typeof selector === 'string') { if (context) { var cont; if (context.jquery) { cont = context[0]; if (!cont) return context; } else { cont = context; } return $(cont.querySelectorAll(selector)); } return $(document.querySelectorAll(selector)); } return $(selector, context); }; // Namespace functions. var attr_name = function (init) { var arr = []; if (!init) arr.push('data'); if (this.namespace.length > 0) arr.push(this.namespace); arr.push(this.name); return arr.join('-'); }; var add_namespace = function (str) { var parts = str.split('-'), i = parts.length, arr = []; while (i--) { if (i !== 0) { arr.push(parts[i]); } else { if (this.namespace.length > 0) { arr.push(this.namespace, parts[i]); } else { arr.push(parts[i]); } } } return arr.reverse().join('-'); }; // Event binding and data-options updating. var bindings = function (method, options) { var self = this, should_bind_events = !S(this).data(this.attr_name(true)); if (S(this.scope).is('[' + this.attr_name() +']')) { S(this.scope).data(this.attr_name(true) + '-init', $.extend({}, this.settings, (options || method), this.data_options(S(this.scope)))); if (should_bind_events) { this.events(this.scope); } } else { S('[' + this.attr_name() +']', this.scope).each(function () { var should_bind_events = !S(this).data(self.attr_name(true) + '-init'); S(this).data(self.attr_name(true) + '-init', $.extend({}, self.settings, (options || method), self.data_options(S(this)))); if (should_bind_events) { self.events(this); } }); } // # Patch to fix #5043 to move this *after* the if/else clause in order for Backbone and similar frameworks to have improved control over event binding and data-options updating. if (typeof method === 'string') { return this[method].call(this, options); } }; var single_image_loaded = function (image, callback) { function loaded () { callback(image[0]); } function bindLoad () { this.one('load', loaded); if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { var src = this.attr( 'src' ), param = src.match( /\?/ ) ? '&' : '?'; param += 'random=' + (new Date()).getTime(); this.attr('src', src + param); } } if (!image.attr('src')) { loaded(); return; } if (image[0].complete || image[0].readyState === 4) { loaded(); } else { bindLoad.call(image); } }; /* https://github.com/paulirish/matchMedia.js */ window.matchMedia = window.matchMedia || (function( doc ) { 'use strict'; var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, // fakeBody required for <FF4 when executed in <head> fakeBody = doc.createElement( 'body' ), div = doc.createElement( 'div' ); div.id = 'mq-test-1'; div.style.cssText = 'position:absolute;top:-100em'; fakeBody.style.background = 'none'; fakeBody.appendChild(div); return function (q) { div.innerHTML = '&shy;<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>'; docElem.insertBefore( fakeBody, refNode ); bool = div.offsetWidth === 42; docElem.removeChild( fakeBody ); return { matches: bool, media: q }; }; }( document )); /* * jquery.requestAnimationFrame * https://github.com/gnarf37/jquery-requestAnimationFrame * Requires jQuery 1.8+ * * Copyright (c) 2012 Corey Frang * Licensed under the MIT license. */ (function($) { // requestAnimationFrame polyfill adapted from Erik Möller // fixes from Paul Irish and Tino Zijdel // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating var animating, lastTime = 0, vendors = ['webkit', 'moz'], requestAnimationFrame = window.requestAnimationFrame, cancelAnimationFrame = window.cancelAnimationFrame, jqueryFxAvailable = 'undefined' !== typeof jQuery.fx; for (; lastTime < vendors.length && !requestAnimationFrame; lastTime++) { requestAnimationFrame = window[ vendors[lastTime] + 'RequestAnimationFrame' ]; cancelAnimationFrame = cancelAnimationFrame || window[ vendors[lastTime] + 'CancelAnimationFrame' ] || window[ vendors[lastTime] + 'CancelRequestAnimationFrame' ]; } function raf() { if (animating) { requestAnimationFrame(raf); if (jqueryFxAvailable) { jQuery.fx.tick(); } } } if (requestAnimationFrame) { // use rAF window.requestAnimationFrame = requestAnimationFrame; window.cancelAnimationFrame = cancelAnimationFrame; if (jqueryFxAvailable) { jQuery.fx.timer = function (timer) { if (timer() && jQuery.timers.push(timer) && !animating) { animating = true; raf(); } }; jQuery.fx.stop = function () { animating = false; }; } } else { // polyfill window.requestAnimationFrame = function (callback) { var currTime = new Date().getTime(), timeToCall = Math.max(0, 16 - (currTime - lastTime)), id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; window.cancelAnimationFrame = function (id) { clearTimeout(id); }; } }( jQuery )); function removeQuotes (string) { if (typeof string === 'string' || string instanceof String) { string = string.replace(/^['\\/"]+|(;\s?})+|['\\/"]+$/g, ''); } return string; } window.Foundation = { name : 'Foundation', version : '5.5.0', media_queries : { 'small' : S('.foundation-mq-small').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'small-only' : S('.foundation-mq-small-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'medium' : S('.foundation-mq-medium').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'medium-only' : S('.foundation-mq-medium-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'large' : S('.foundation-mq-large').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'large-only' : S('.foundation-mq-large-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'xlarge' : S('.foundation-mq-xlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'xlarge-only' : S('.foundation-mq-xlarge-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'xxlarge' : S('.foundation-mq-xxlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '') }, stylesheet : $('<style></style>').appendTo('head')[0].sheet, global: { namespace: undefined }, init : function (scope, libraries, method, options, response) { var args = [scope, method, options, response], responses = []; // check RTL this.rtl = /rtl/i.test(S('html').attr('dir')); // set foundation global scope this.scope = scope || this.scope; this.set_namespace(); if (libraries && typeof libraries === 'string' && !/reflow/i.test(libraries)) { if (this.libs.hasOwnProperty(libraries)) { responses.push(this.init_lib(libraries, args)); } } else { for (var lib in this.libs) { responses.push(this.init_lib(lib, libraries)); } } S(window).load(function(){ S(window) .trigger('resize.fndtn.clearing') .trigger('resize.fndtn.dropdown') .trigger('resize.fndtn.equalizer') .trigger('resize.fndtn.interchange') .trigger('resize.fndtn.joyride') .trigger('resize.fndtn.magellan') .trigger('resize.fndtn.topbar') .trigger('resize.fndtn.slider'); }); return scope; }, init_lib : function (lib, args) { if (this.libs.hasOwnProperty(lib)) { this.patch(this.libs[lib]); if (args && args.hasOwnProperty(lib)) { if (typeof this.libs[lib].settings !== 'undefined') { $.extend(true, this.libs[lib].settings, args[lib]); } else if (typeof this.libs[lib].defaults !== 'undefined') { $.extend(true, this.libs[lib].defaults, args[lib]); } return this.libs[lib].init.apply(this.libs[lib], [this.scope, args[lib]]); } args = args instanceof Array ? args : new Array(args); return this.libs[lib].init.apply(this.libs[lib], args); } return function () {}; }, patch : function (lib) { lib.scope = this.scope; lib.namespace = this.global.namespace; lib.rtl = this.rtl; lib['data_options'] = this.utils.data_options; lib['attr_name'] = attr_name; lib['add_namespace'] = add_namespace; lib['bindings'] = bindings; lib['S'] = this.utils.S; }, inherit : function (scope, methods) { var methods_arr = methods.split(' '), i = methods_arr.length; while (i--) { if (this.utils.hasOwnProperty(methods_arr[i])) { scope[methods_arr[i]] = this.utils[methods_arr[i]]; } } }, set_namespace: function () { // Description: // Don't bother reading the namespace out of the meta tag // if the namespace has been set globally in javascript // // Example: // Foundation.global.namespace = 'my-namespace'; // or make it an empty string: // Foundation.global.namespace = ''; // // // If the namespace has not been set (is undefined), try to read it out of the meta element. // Otherwise use the globally defined namespace, even if it's empty ('') var namespace = ( this.global.namespace === undefined ) ? $('.foundation-data-attribute-namespace').css('font-family') : this.global.namespace; // Finally, if the namsepace is either undefined or false, set it to an empty string. // Otherwise use the namespace value. this.global.namespace = ( namespace === undefined || /false/i.test(namespace) ) ? '' : namespace; }, libs : {}, // methods that can be inherited in libraries utils : { // Description: // Fast Selector wrapper returns jQuery object. Only use where getElementById // is not available. // // Arguments: // Selector (String): CSS selector describing the element(s) to be // returned as a jQuery object. // // Scope (String): CSS selector describing the area to be searched. Default // is document. // // Returns: // Element (jQuery Object): jQuery object containing elements matching the // selector within the scope. S : S, // Description: // Executes a function a max of once every n milliseconds // // Arguments: // Func (Function): Function to be throttled. // // Delay (Integer): Function execution threshold in milliseconds. // // Returns: // Lazy_function (Function): Function with throttling applied. throttle : function (func, delay) { var timer = null; return function () { var context = this, args = arguments; if (timer == null) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } }; }, // Description: // Executes a function when it stops being invoked for n seconds // Modified version of _.debounce() http://underscorejs.org // // Arguments: // Func (Function): Function to be debounced. // // Delay (Integer): Function execution threshold in milliseconds. // // Immediate (Bool): Whether the function should be called at the beginning // of the delay instead of the end. Default is false. // // Returns: // Lazy_function (Function): Function with debouncing applied. debounce : function (func, delay, immediate) { var timeout, result; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) result = func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, delay); if (callNow) result = func.apply(context, args); return result; }; }, // Description: // Parses data-options attribute // // Arguments: // El (jQuery Object): Element to be parsed. // // Returns: // Options (Javascript Object): Contents of the element's data-options // attribute. data_options : function (el, data_attr_name) { data_attr_name = data_attr_name || 'options'; var opts = {}, ii, p, opts_arr, data_options = function (el) { var namespace = Foundation.global.namespace; if (namespace.length > 0) { return el.data(namespace + '-' + data_attr_name); } return el.data(data_attr_name); }; var cached_options = data_options(el); if (typeof cached_options === 'object') { return cached_options; } opts_arr = (cached_options || ':').split(';'); ii = opts_arr.length; function isNumber (o) { return ! isNaN (o-0) && o !== null && o !== '' && o !== false && o !== true; } function trim (str) { if (typeof str === 'string') return $.trim(str); return str; } while (ii--) { p = opts_arr[ii].split(':'); p = [p[0], p.slice(1).join(':')]; if (/true/i.test(p[1])) p[1] = true; if (/false/i.test(p[1])) p[1] = false; if (isNumber(p[1])) { if (p[1].indexOf('.') === -1) { p[1] = parseInt(p[1], 10); } else { p[1] = parseFloat(p[1]); } } if (p.length === 2 && p[0].length > 0) { opts[trim(p[0])] = trim(p[1]); } } return opts; }, // Description: // Adds JS-recognizable media queries // // Arguments: // Media (String): Key string for the media query to be stored as in // Foundation.media_queries // // Class (String): Class name for the generated <meta> tag register_media : function (media, media_class) { if(Foundation.media_queries[media] === undefined) { $('head').append('<meta class="' + media_class + '"/>'); Foundation.media_queries[media] = removeQuotes($('.' + media_class).css('font-family')); } }, // Description: // Add custom CSS within a JS-defined media query // // Arguments: // Rule (String): CSS rule to be appended to the document. // // Media (String): Optional media query string for the CSS rule to be // nested under. add_custom_rule : function (rule, media) { if (media === undefined && Foundation.stylesheet) { Foundation.stylesheet.insertRule(rule, Foundation.stylesheet.cssRules.length); } else { var query = Foundation.media_queries[media]; if (query !== undefined) { Foundation.stylesheet.insertRule('@media ' + Foundation.media_queries[media] + '{ ' + rule + ' }'); } } }, // Description: // Performs a callback function when an image is fully loaded // // Arguments: // Image (jQuery Object): Image(s) to check if loaded. // // Callback (Function): Function to execute when image is fully loaded. image_loaded : function (images, callback) { var self = this, unloaded = images.length; if (unloaded === 0) { callback(images); } images.each(function () { single_image_loaded(self.S(this), function () { unloaded -= 1; if (unloaded === 0) { callback(images); } }); }); }, // Description: // Returns a random, alphanumeric string // // Arguments: // Length (Integer): Length of string to be generated. Defaults to random // integer. // // Returns: // Rand (String): Pseudo-random, alphanumeric string. random_str : function () { if (!this.fidx) this.fidx = 0; this.prefix = this.prefix || [(this.name || 'F'), (+new Date).toString(36)].join('-'); return this.prefix + (this.fidx++).toString(36); }, // Description: // Helper for window.matchMedia // // Arguments: // mq (String): Media query // // Returns: // (Boolean): Whether the media query passes or not match : function (mq) { return window.matchMedia(mq).matches; }, // Description: // Helpers for checking Foundation default media queries with JS // // Returns: // (Boolean): Whether the media query passes or not is_small_up : function () { return this.match(Foundation.media_queries.small); }, is_medium_up : function () { return this.match(Foundation.media_queries.medium); }, is_large_up : function () { return this.match(Foundation.media_queries.large); }, is_xlarge_up : function () { return this.match(Foundation.media_queries.xlarge); }, is_xxlarge_up : function () { return this.match(Foundation.media_queries.xxlarge); }, is_small_only : function () { return !this.is_medium_up() && !this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up(); }, is_medium_only : function () { return this.is_medium_up() && !this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up(); }, is_large_only : function () { return this.is_medium_up() && this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up(); }, is_xlarge_only : function () { return this.is_medium_up() && this.is_large_up() && this.is_xlarge_up() && !this.is_xxlarge_up(); }, is_xxlarge_only : function () { return this.is_medium_up() && this.is_large_up() && this.is_xlarge_up() && this.is_xxlarge_up(); } } }; $.fn.foundation = function () { var args = Array.prototype.slice.call(arguments, 0); return this.each(function () { Foundation.init.apply(Foundation, [this].concat(args)); return this; }); }; }(jQuery, window, window.document)); ;(function ($, window, document, undefined) { 'use strict'; Foundation.libs.slider = { name : 'slider', version : '5.5.0', settings: { start: 0, end: 100, step: 1, precision: null, initial: null, display_selector: '', vertical: false, trigger_input_change: false, on_change: function(){} }, cache : {}, init : function (scope, method, options) { Foundation.inherit(this,'throttle'); this.bindings(method, options); this.reflow(); }, events : function() { var self = this; $(this.scope) .off('.slider') .on('mousedown.fndtn.slider touchstart.fndtn.slider pointerdown.fndtn.slider', '[' + self.attr_name() + ']:not(.disabled, [disabled]) .range-slider-handle', function(e) { if (!self.cache.active) { e.preventDefault(); self.set_active_slider($(e.target)); } }) .on('mousemove.fndtn.slider touchmove.fndtn.slider pointermove.fndtn.slider', function(e) { if (!!self.cache.active) { e.preventDefault(); if ($.data(self.cache.active[0], 'settings').vertical) { var scroll_offset = 0; if (!e.pageY) { scroll_offset = window.scrollY; } self.calculate_position(self.cache.active, self.get_cursor_position(e, 'y') + scroll_offset); } else { self.calculate_position(self.cache.active, self.get_cursor_position(e, 'x')); } } }) .on('mouseup.fndtn.slider touchend.fndtn.slider pointerup.fndtn.slider', function(e) { self.remove_active_slider(); }) .on('change.fndtn.slider', function(e) { self.settings.on_change(); }); self.S(window) .on('resize.fndtn.slider', self.throttle(function(e) { self.reflow(); }, 300)); }, get_cursor_position : function(e, xy) { var pageXY = 'page' + xy.toUpperCase(), clientXY = 'client' + xy.toUpperCase(), position; if (typeof e[pageXY] !== 'undefined') { position = e[pageXY]; } else if (typeof e.originalEvent[clientXY] !== 'undefined') { position = e.originalEvent[clientXY]; } else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0][clientXY] !== 'undefined') { position = e.originalEvent.touches[0][clientXY]; } else if(e.currentPoint && typeof e.currentPoint[xy] !== 'undefined') { position = e.currentPoint[xy]; } return position; }, set_active_slider : function($handle) { this.cache.active = $handle; }, remove_active_slider : function() { this.cache.active = null; }, calculate_position : function($handle, cursor_x) { var self = this, settings = $.data($handle[0], 'settings'), handle_l = $.data($handle[0], 'handle_l'), handle_o = $.data($handle[0], 'handle_o'), bar_l = $.data($handle[0], 'bar_l'), bar_o = $.data($handle[0], 'bar_o'); requestAnimationFrame(function(){ var pct; if (Foundation.rtl && !settings.vertical) { pct = self.limit_to(((bar_o+bar_l-cursor_x)/bar_l),0,1); } else { pct = self.limit_to(((cursor_x-bar_o)/bar_l),0,1); } pct = settings.vertical ? 1-pct : pct; var norm = self.normalized_value(pct, settings.start, settings.end, settings.step, settings.precision); self.set_ui($handle, norm); }); }, set_ui : function($handle, value) { var settings = $.data($handle[0], 'settings'), handle_l = $.data($handle[0], 'handle_l'), bar_l = $.data($handle[0], 'bar_l'), norm_pct = this.normalized_percentage(value, settings.start, settings.end), handle_offset = norm_pct*(bar_l-handle_l)-1, progress_bar_length = norm_pct*100, $handle_parent = $handle.parent(), $hidden_inputs = $handle.parent().children('input[type=hidden]'); if (Foundation.rtl && !settings.vertical) { handle_offset = -handle_offset; } handle_offset = settings.vertical ? -handle_offset + bar_l - handle_l + 1 : handle_offset; this.set_translate($handle, handle_offset, settings.vertical); if (settings.vertical) { $handle.siblings('.range-slider-active-segment').css('height', progress_bar_length + '%'); } else { $handle.siblings('.range-slider-active-segment').css('width', progress_bar_length + '%'); } $handle_parent.attr(this.attr_name(), value).trigger('change').trigger('change.fndtn.slider'); $hidden_inputs.val(value); if (settings.trigger_input_change) { $hidden_inputs.trigger('change'); } if (!$handle[0].hasAttribute('aria-valuemin')) { $handle.attr({ 'aria-valuemin': settings.start, 'aria-valuemax': settings.end }); } $handle.attr('aria-valuenow', value); if (settings.display_selector != '') { $(settings.display_selector).each(function(){ if (this.hasOwnProperty('value')) { $(this).val(value); } else { $(this).text(value); } }); } }, normalized_percentage : function(val, start, end) { return Math.min(1, (val - start)/(end - start)); }, normalized_value : function(val, start, end, step, precision) { var range = end - start, point = val*range, mod = (point-(point%step)) / step, rem = point % step, round = ( rem >= step*0.5 ? step : 0); return ((mod*step + round) + start).toFixed(precision); }, set_translate : function(ele, offset, vertical) { if (vertical) { $(ele) .css('-webkit-transform', 'translateY('+offset+'px)') .css('-moz-transform', 'translateY('+offset+'px)') .css('-ms-transform', 'translateY('+offset+'px)') .css('-o-transform', 'translateY('+offset+'px)') .css('transform', 'translateY('+offset+'px)'); } else { $(ele) .css('-webkit-transform', 'translateX('+offset+'px)') .css('-moz-transform', 'translateX('+offset+'px)') .css('-ms-transform', 'translateX('+offset+'px)') .css('-o-transform', 'translateX('+offset+'px)') .css('transform', 'translateX('+offset+'px)'); } }, limit_to : function(val, min, max) { return Math.min(Math.max(val, min), max); }, initialize_settings : function(handle) { var settings = $.extend({}, this.settings, this.data_options($(handle).parent())), decimal_places_match_result; if (settings.precision === null) { decimal_places_match_result = ('' + settings.step).match(/\.([\d]*)/); settings.precision = decimal_places_match_result && decimal_places_match_result[1] ? decimal_places_match_result[1].length : 0; } if (settings.vertical) { $.data(handle, 'bar_o', $(handle).parent().offset().top); $.data(handle, 'bar_l', $(handle).parent().outerHeight()); $.data(handle, 'handle_o', $(handle).offset().top); $.data(handle, 'handle_l', $(handle).outerHeight()); } else { $.data(handle, 'bar_o', $(handle).parent().offset().left); $.data(handle, 'bar_l', $(handle).parent().outerWidth()); $.data(handle, 'handle_o', $(handle).offset().left); $.data(handle, 'handle_l', $(handle).outerWidth()); } $.data(handle, 'bar', $(handle).parent()); $.data(handle, 'settings', settings); }, set_initial_position : function($ele) { var settings = $.data($ele.children('.range-slider-handle')[0], 'settings'), initial = ((typeof settings.initial == 'number' && !isNaN(settings.initial)) ? settings.initial : Math.floor((settings.end-settings.start)*0.5/settings.step)*settings.step+settings.start), $handle = $ele.children('.range-slider-handle'); this.set_ui($handle, initial); }, set_value : function(value) { var self = this; $('[' + self.attr_name() + ']', this.scope).each(function(){ $(this).attr(self.attr_name(), value); }); if (!!$(this.scope).attr(self.attr_name())) { $(this.scope).attr(self.attr_name(), value); } self.reflow(); }, reflow : function() { var self = this; self.S('[' + this.attr_name() + ']').each(function() { var handle = $(this).children('.range-slider-handle')[0], val = $(this).attr(self.attr_name()); self.initialize_settings(handle); if (val) { self.set_ui($(handle), parseFloat(val)); } else { self.set_initial_position($(this)); } }); } }; }(jQuery, window, window.document)); ;(function ($, window, document, undefined) { 'use strict'; var Modernizr = Modernizr || false; Foundation.libs.joyride = { name : 'joyride', version : '5.5.0', defaults : { expose : false, // turn on or off the expose feature modal : true, // Whether to cover page with modal during the tour keyboard : true, // enable left, right and esc keystrokes tip_location : 'bottom', // 'top' or 'bottom' in relation to parent nub_position : 'auto', // override on a per tooltip bases scroll_speed : 1500, // Page scrolling speed in milliseconds, 0 = no scroll animation scroll_animation : 'linear', // supports 'swing' and 'linear', extend with jQuery UI. timer : 0, // 0 = no timer , all other numbers = timer in milliseconds start_timer_on_click : true, // true or false - true requires clicking the first button start the timer start_offset : 0, // the index of the tooltip you want to start on (index of the li) next_button : true, // true or false to control whether a next button is used prev_button : true, // true or false to control whether a prev button is used tip_animation : 'fade', // 'pop' or 'fade' in each tip pause_after : [], // array of indexes where to pause the tour after exposed : [], // array of expose elements tip_animation_fade_speed : 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition cookie_monster : false, // true or false to control whether cookies are used cookie_name : 'joyride', // Name the cookie you'll use cookie_domain : false, // Will this cookie be attached to a domain, ie. '.notableapp.com' cookie_expires : 365, // set when you would like the cookie to expire. tip_container : 'body', // Where will the tip be attached abort_on_close : true, // When true, the close event will not fire any callback tip_location_patterns : { top: ['bottom'], bottom: [], // bottom should not need to be repositioned left: ['right', 'top', 'bottom'], right: ['left', 'top', 'bottom'] }, post_ride_callback : function (){}, // A method to call once the tour closes (canceled or complete) post_step_callback : function (){}, // A method to call after each step pre_step_callback : function (){}, // A method to call before each step pre_ride_callback : function (){}, // A method to call before the tour starts (passed index, tip, and cloned exposed element) post_expose_callback : function (){}, // A method to call after an element has been exposed template : { // HTML segments for tip layout link : '<a href="#close" class="joyride-close-tip">&times;</a>', timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>', tip : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>', wrapper : '<div class="joyride-content-wrapper"></div>', button : '<a href="#" class="small button joyride-next-tip"></a>', prev_button : '<a href="#" class="small button joyride-prev-tip"></a>', modal : '<div class="joyride-modal-bg"></div>', expose : '<div class="joyride-expose-wrapper"></div>', expose_cover : '<div class="joyride-expose-cover"></div>' }, expose_add_class : '' // One or more space-separated class names to be added to exposed element }, init : function (scope, method, options) { Foundation.inherit(this, 'throttle random_str'); this.settings = this.settings || $.extend({}, this.defaults, (options || method)); this.bindings(method, options) }, go_next : function() { if (this.settings.$li.next().length < 1) { this.end(); } else if (this.settings.timer > 0) { clearTimeout(this.settings.automate); this.hide(); this.show(); this.startTimer(); } else { this.hide(); this.show(); } }, go_prev : function() { if (this.settings.$li.prev().length < 1) { // Do nothing if there are no prev element } else if (this.settings.timer > 0) { clearTimeout(this.settings.automate); this.hide(); this.show(null, true); this.startTimer(); } else { this.hide(); this.show(null, true); } }, events : function () { var self = this; $(this.scope) .off('.joyride') .on('click.fndtn.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) { e.preventDefault(); this.go_next() }.bind(this)) .on('click.fndtn.joyride', '.joyride-prev-tip', function (e) { e.preventDefault(); this.go_prev(); }.bind(this)) .on('click.fndtn.joyride', '.joyride-close-tip', function (e) { e.preventDefault(); this.end(this.settings.abort_on_close); }.bind(this)) .on('keyup.fndtn.joyride', function(e) { // Don't do anything if keystrokes are disabled // or if the joyride is not being shown if (!this.settings.keyboard || !this.settings.riding) return; switch (e.which) { case 39: // right arrow e.preventDefault(); this.go_next(); break; case 37: // left arrow e.preventDefault(); this.go_prev(); break; case 27: // escape e.preventDefault(); this.end(this.settings.abort_on_close); } }.bind(this)); $(window) .off('.joyride') .on('resize.fndtn.joyride', self.throttle(function () { if ($('[' + self.attr_name() + ']').length > 0 && self.settings.$next_tip && self.settings.riding) { if (self.settings.exposed.length > 0) { var $els = $(self.settings.exposed); $els.each(function () { var $this = $(this); self.un_expose($this); self.expose($this); }); } if (self.is_phone()) { self.pos_phone(); } else { self.pos_default(false); } } }, 100)); }, start : function () { var self = this, $this = $('[' + this.attr_name() + ']', this.scope), integer_settings = ['timer', 'scrollSpeed', 'startOffset', 'tipAnimationFadeSpeed', 'cookieExpires'], int_settings_count = integer_settings.length; if (!$this.length > 0) return; if (!this.settings.init) this.events(); this.settings = $this.data(this.attr_name(true) + '-init'); // non configureable settings this.settings.$content_el = $this; this.settings.$body = $(this.settings.tip_container); this.settings.body_offset = $(this.settings.tip_container).position(); this.settings.$tip_content = this.settings.$content_el.find('> li'); this.settings.paused = false; this.settings.attempts = 0; this.settings.riding = true; // can we create cookies? if (typeof $.cookie !== 'function') { this.settings.cookie_monster = false; } // generate the tips and insert into dom. if (!this.settings.cookie_monster || this.settings.cookie_monster && !$.cookie(this.settings.cookie_name)) { this.settings.$tip_content.each(function (index) { var $this = $(this); this.settings = $.extend({}, self.defaults, self.data_options($this)); // Make sure that settings parsed from data_options are integers where necessary var i = int_settings_count; while (i--) { self.settings[integer_settings[i]] = parseInt(self.settings[integer_settings[i]], 10); } self.create({$li : $this, index : index}); }); // show first tip if (!this.settings.start_timer_on_click && this.settings.timer > 0) { this.show('init'); this.startTimer(); } else { this.show('init'); } } }, resume : function () { this.set_li(); this.show(); }, tip_template : function (opts) { var $blank, content; opts.tip_class = opts.tip_class || ''; $blank = $(this.settings.template.tip).addClass(opts.tip_class); content = $.trim($(opts.li).html()) + this.prev_button_text(opts.prev_button_text, opts.index) + this.button_text(opts.button_text) + this.settings.template.link + this.timer_instance(opts.index); $blank.append($(this.settings.template.wrapper)); $blank.first().attr(this.add_namespace('data-index'), opts.index); $('.joyride-content-wrapper', $blank).append(content); return $blank[0]; }, timer_instance : function (index) { var txt; if ((index === 0 && this.settings.start_timer_on_click && this.settings.timer > 0) || this.settings.timer === 0) { txt = ''; } else { txt = $(this.settings.template.timer)[0].outerHTML; } return txt; }, button_text : function (txt) { if (this.settings.tip_settings.next_button) { txt = $.trim(txt) || 'Next'; txt = $(this.settings.template.button).append(txt)[0].outerHTML; } else { txt = ''; } return txt; }, prev_button_text : function (txt, idx) { if (this.settings.tip_settings.prev_button) { txt = $.trim(txt) || 'Previous'; // Add the disabled class to the button if it's the first element if (idx == 0) txt = $(this.settings.template.prev_button).append(txt).addClass('disabled')[0].outerHTML; else txt = $(this.settings.template.prev_button).append(txt)[0].outerHTML; } else { txt = ''; } return txt; }, create : function (opts) { this.settings.tip_settings = $.extend({}, this.settings, this.data_options(opts.$li)); var buttonText = opts.$li.attr(this.add_namespace('data-button')) || opts.$li.attr(this.add_namespace('data-text')), prevButtonText = opts.$li.attr(this.add_namespace('data-button-prev')) || opts.$li.attr(this.add_namespace('data-prev-text')), tipClass = opts.$li.attr('class'), $tip_content = $(this.tip_template({ tip_class : tipClass, index : opts.index, button_text : buttonText, prev_button_text : prevButtonText, li : opts.$li })); $(this.settings.tip_container).append($tip_content); }, show : function (init, is_prev) { var $timer = null; // are we paused? if (this.settings.$li === undefined || ($.inArray(this.settings.$li.index(), this.settings.pause_after) === -1)) { // don't go to the next li if the tour was paused if (this.settings.paused) { this.settings.paused = false; } else { this.set_li(init, is_prev); } this.settings.attempts = 0; if (this.settings.$li.length && this.settings.$target.length > 0) { if (init) { //run when we first start this.settings.pre_ride_callback(this.settings.$li.index(), this.settings.$next_tip); if (this.settings.modal) { this.show_modal(); } } this.settings.pre_step_callback(this.settings.$li.index(), this.settings.$next_tip); if (this.settings.modal && this.settings.expose) { this.expose(); } this.settings.tip_settings = $.extend({}, this.settings, this.data_options(this.settings.$li)); this.settings.timer = parseInt(this.settings.timer, 10); this.settings.tip_settings.tip_location_pattern = this.settings.tip_location_patterns[this.settings.tip_settings.tip_location]; // scroll and hide bg if not modal if (!/body/i.test(this.settings.$target.selector)) { var joyridemodalbg = $('.joyride-modal-bg'); if (/pop/i.test(this.settings.tipAnimation)) { joyridemodalbg.hide(); } else { joyridemodalbg.fadeOut(this.settings.tipAnimationFadeSpeed); } this.scroll_to(); } if (this.is_phone()) { this.pos_phone(true); } else { this.pos_default(true); } $timer = this.settings.$next_tip.find('.joyride-timer-indicator'); if (/pop/i.test(this.settings.tip_animation)) { $timer.width(0); if (this.settings.timer > 0) { this.settings.$next_tip.show(); setTimeout(function () { $timer.animate({ width: $timer.parent().width() }, this.settings.timer, 'linear'); }.bind(this), this.settings.tip_animation_fade_speed); } else { this.settings.$next_tip.show(); } } else if (/fade/i.test(this.settings.tip_animation)) { $timer.width(0); if (this.settings.timer > 0) { this.settings.$next_tip .fadeIn(this.settings.tip_animation_fade_speed) .show(); setTimeout(function () { $timer.animate({ width: $timer.parent().width() }, this.settings.timer, 'linear'); }.bind(this), this.settings.tip_animation_fade_speed); } else { this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed); } } this.settings.$current_tip = this.settings.$next_tip; // skip non-existant targets } else if (this.settings.$li && this.settings.$target.length < 1) { this.show(init, is_prev); } else { this.end(); } } else { this.settings.paused = true; } }, is_phone : function () { return matchMedia(Foundation.media_queries.small).matches && !matchMedia(Foundation.media_queries.medium).matches; }, hide : function () { if (this.settings.modal && this.settings.expose) { this.un_expose(); } if (!this.settings.modal) { $('.joyride-modal-bg').hide(); } // Prevent scroll bouncing...wait to remove from layout this.settings.$current_tip.css('visibility', 'hidden'); setTimeout($.proxy(function() { this.hide(); this.css('visibility', 'visible'); }, this.settings.$current_tip), 0); this.settings.post_step_callback(this.settings.$li.index(), this.settings.$current_tip); }, set_li : function (init, is_prev) { if (init) { this.settings.$li = this.settings.$tip_content.eq(this.settings.start_offset); this.set_next_tip(); this.settings.$current_tip = this.settings.$next_tip; } else { if (is_prev) this.settings.$li = this.settings.$li.prev(); else this.settings.$li = this.settings.$li.next(); this.set_next_tip(); } this.set_target(); }, set_next_tip : function () { this.settings.$next_tip = $('.joyride-tip-guide').eq(this.settings.$li.index()); this.settings.$next_tip.data('closed', ''); }, set_target : function () { var cl = this.settings.$li.attr(this.add_namespace('data-class')), id = this.settings.$li.attr(this.add_namespace('data-id')), $sel = function () { if (id) { return $(document.getElementById(id)); } else if (cl) { return $('.' + cl).first(); } else { return $('body'); } }; this.settings.$target = $sel(); }, scroll_to : function () { var window_half, tipOffset; window_half = $(window).height() / 2; tipOffset = Math.ceil(this.settings.$target.offset().top - window_half + this.settings.$next_tip.outerHeight()); if (tipOffset != 0) { $('html, body').stop().animate({ scrollTop: tipOffset }, this.settings.scroll_speed, 'swing'); } }, paused : function () { return ($.inArray((this.settings.$li.index() + 1), this.settings.pause_after) === -1); }, restart : function () { this.hide(); this.settings.$li = undefined; this.show('init'); }, pos_default : function (init) { var $nub = this.settings.$next_tip.find('.joyride-nub'), nub_width = Math.ceil($nub.outerWidth() / 2), nub_height = Math.ceil($nub.outerHeight() / 2), toggle = init || false; // tip must not be "display: none" to calculate position if (toggle) { this.settings.$next_tip.css('visibility', 'hidden'); this.settings.$next_tip.show(); } if (!/body/i.test(this.settings.$target.selector)) { var topAdjustment = this.settings.tip_settings.tipAdjustmentY ? parseInt(this.settings.tip_settings.tipAdjustmentY) : 0, leftAdjustment = this.settings.tip_settings.tipAdjustmentX ? parseInt(this.settings.tip_settings.tipAdjustmentX) : 0; if (this.bottom()) { if (this.rtl) { this.settings.$next_tip.css({ top: (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment), left: this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth() + leftAdjustment}); } else { this.settings.$next_tip.css({ top: (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment), left: this.settings.$target.offset().left + leftAdjustment}); } this.nub_position($nub, this.settings.tip_settings.nub_position, 'top'); } else if (this.top()) { if (this.rtl) {