Permalink
Browse files

First commit of joyride v2 changes.

  • Loading branch information...
1 parent 15d709c commit 0d0240640c9eb15731ca917404ce5280e16d925e @mrsweaters mrsweaters committed Aug 14, 2012
Showing with 120 additions and 391 deletions.
  1. +1 −1 demo/demo.html
  2. +66 −34 jquery.cookie.js
  3. +53 −356 jquery.joyride-1.0.5.js
View
2 demo/demo.html
@@ -116,7 +116,7 @@ <h3 id="numero2">Customize Each Stop Along the Way</h3>
<script type="text/javascript" src="../jquery.joyride-1.0.5.js"></script>
<script type="text/javascript">
$(window).load(function() {
- $(this).joyride();
+ $('#joyRideTipContent').joyride();
});
</script>
View
100 jquery.cookie.js
@@ -1,40 +1,72 @@
-// +++++++++++++++++++++++++++++
-// jQuery Cookie plugin
-// +++++++++++++++++++++++++++++
-
-// Copyright (c) 2010 Klaus Hartl (stilbuero.de)
-// Dual licensed under the MIT and GPL licenses:
-// http://www.opensource.org/licenses/mit-license.php
-// http://www.gnu.org/licenses/gpl.html
-jQuery.cookie = function (key, value, options) {
-
- // key and at least value given, set cookie...
- if (arguments.length > 1 && String(value) !== "[object Object]") {
- options = jQuery.extend({}, options);
-
- if (value === null || value === undefined) {
- options.expires = -1;
+/*jshint eqnull:true */
+/*!
+ * jQuery Cookie Plugin v1.2
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2011, Klaus Hartl
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/GPL-2.0
+ */
+(function ($, document, undefined) {
+
+ var pluses = /\+/g;
+
+ function raw(s) {
+ return s;
+ }
+
+ function decoded(s) {
+ return decodeURIComponent(s.replace(pluses, ' '));
+ }
+
+ $.cookie = function (key, value, options) {
+
+ // key and at least value given, set cookie...
+ if (value !== undefined && !/Object/.test(Object.prototype.toString.call(value))) {
+ options = $.extend({}, $.cookie.defaults, options);
+
+ if (value === null) {
+ options.expires = -1;
+ }
+
+ if (typeof options.expires === 'number') {
+ var days = options.expires, t = options.expires = new Date();
+ t.setDate(t.getDate() + days);
+ }
+
+ value = String(value);
+
+ return (document.cookie = [
+ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
+ options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+ options.path ? '; path=' + options.path : '',
+ options.domain ? '; domain=' + options.domain : '',
+ options.secure ? '; secure' : ''
+ ].join(''));
}
- if (typeof options.expires === 'number') {
- var days = options.expires, t = options.expires = new Date();
- t.setDate(t.getDate() + days);
+ // key and possibly options given, get cookie...
+ options = value || $.cookie.defaults || {};
+ var decode = options.raw ? raw : decoded;
+ var cookies = document.cookie.split('; ');
+ for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
+ if (decode(parts.shift()) === key) {
+ return decode(parts.join('='));
+ }
}
- value = String(value);
+ return null;
+ };
- return (document.cookie = [
- encodeURIComponent(key), '=',
- options.raw ? value : encodeURIComponent(value),
- options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
- options.path ? '; path=' + options.path : '',
- options.domain ? '; domain=' + options.domain : '',
- options.secure ? '; secure' : ''
- ].join(''));
- }
+ $.cookie.defaults = {};
+
+ $.removeCookie = function (key, options) {
+ if ($.cookie(key, options) !== null) {
+ $.cookie(key, null, options);
+ return true;
+ }
+ return false;
+ };
- // key and possibly options given, get cookie...
- options = value || {};
- var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
- return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
-};
+})(jQuery, document);
View
409 jquery.joyride-1.0.5.js
@@ -1,15 +1,16 @@
/*
- * jQuery Joyride Plugin 1.0.5
- * www.ZURB.com/playground
- * Copyright 2011, ZURB
+ * jQuery Foundation Tooltip Plugin 2.0.0
+ * http://foundation.zurb.com
+ * Copyright 2012, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
-(function($) {
- $.fn.joyride = function(options) {
+/*jslint unparam: true, browser: true, indent: 2 */
- // +++++++++++++++++++
+;(function ($) {
+ 'use strict';
+ // +++++++++++++++++++
// Defaults
// +++++++++++++++++++
var settings = {
@@ -25,366 +26,62 @@
'cookieDomain': false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
'tipContainer': 'body', // Where will the tip be attached if not inline
'inline': false, // true or false, if true the tip will be attached after the element
- 'tipContent': '#joyRideTipContent', // What is the ID of the <ol> you put the content in
'postRideCallback': $.noop, // A method to call once the tour closes (canceled or complete)
'postStepCallback': $.noop // A method to call after each step
- };
-
- var options = $.extend(settings, options);
-
- return this.each(function() {
-
- if ($(options.tipContent).length === 0) return;
-
- $(options.tipContent).hide();
-
- var bodyOffset = $(options.tipContainer).children('*').first().position(),
- tipContent = $(options.tipContent + ' li'),
- count = skipCount = 0,
- prevCount = -1,
- timerIndicatorInstance,
- timerIndicatorTemplate = '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>';
-
- var tipTemplate = function(tipClass, index, buttonText, self) {
- return '<div class="joyride-tip-guide ' +
- tipClass + '" id="joyRidePopup' + index + '"><span class="joyride-nub"></span><div class="joyride-content-wrapper">' +
- $(self).html() + buttonText + '<a href="#close" class="joyride-close-tip">X</a>' +
- timerIndicatorInstance + '</div></div>';
- };
-
- var tipLayout = function(tipClass, index, buttonText, self) {
- if (index == 0 && settings.startTimerOnClick && settings.timer > 0 || settings.timer == 0) {
- timerIndicatorInstance = '';
- } else {
- timerIndicatorInstance = timerIndicatorTemplate;
- }
-
- if (!tipClass) {
- tipClass = '';
- }
-
- if (buttonText) {
- buttonText = '<a href="#" class="joyride-next-tip small nice radius yellow button">' + buttonText + '</a>'
+ },
+ methods = {
+ init : function (opts) {
+ return this.each(function () {
+ settings = $.extend(settings, opts);
+
+ // non configureable settings
+ settings.$content_el = $(this);
+ settings.body_offset = $(settings.tipContainer).children('*').first().position();
+ settings.$tip_content = $('li', settings.$content_el);
+ settings.cnt = settings.skip_cnt = 0;
+ settings.prev_cnt = -1;
+
+ console.log(methods.tip_template({tip_class : 'yay', index : 1, tip : settings.$tip_content.first(), timer_instance : ''}))
+
+ });
+ },
+ tip_template : function (opts) {
+ var $blank, content;
+
+ opts = opts || {};
+
+ if (settings.nextButton) {
+ opts.button_text = opts.button_text || 'Next';
+ opts.button_text = '<a href="#" class="joyride-next-tip small nice radius yellow button">' + opts.button_text + '</a>';
} else {
- buttonText = '';
+ opts.button_text = '';
}
+
+ opts.timer_instance = opts.timer_instance || '';
+ opts.tip_class = opts.tip_class || '';
+ opts.index = opts.index || 0;
- if (settings.inline) {
- $(tipTemplate(tipClass, index, buttonText, self)).insertAfter('#' + $(self).data('id'));
+ if (settings.index === 0 && settings.startTimerOnClick && settings.timer > 0 || settings.timer === 0) {
+ opts.timer_instance = '';
} else {
- $(options.tipContainer).append(tipTemplate(tipClass, index, buttonText, self));
- }
- };
-
- if(!settings.cookieMonster || !$.cookie(settings.cookieName)) {
-
- tipContent.each(function(index) {
- var buttonText = $(this).data('text'),
- tipClass = $(this).attr('class'),
- self = this;
-
- if (settings.nextButton && !buttonText) {
- buttonText = 'Next';
- }
-
- if (settings.nextButton || !settings.nextButton && settings.startTimerOnClick) {
- if ($(this).attr('class')) {
- tipLayout(tipClass, index, buttonText, self);
- } else {
- tipLayout(false, index, buttonText, self);
- }
- } else if (!settings.nextButton) {
- if ($(this).attr('class')) {
- tipLayout(tipClass, index, '', self);
- } else {
- tipLayout(false, index, '', self);
- }
- }
- $('#joyRidePopup' + index).hide();
- });
- }
-
- showNextTip = function() {
- var parentElementID = $(tipContent[count]).data('id'),
- parentElement = $('#' + parentElementID),
- opt = {};
-
- // Parse the options string
- $.each(($(tipContent[count]).data('options') || ':').split(';'),
- function (i, s) {
- var p = s.split(':');
- if (p.length == 2) {
- opt[$.trim(p[0])] = $.trim(p[1]);
- }
- }
- );
-
- var tipSettings = $.extend({}, settings, opt);
-
- while (parentElement.offset() === null) {
- count++;
- skipCount++;
- if ((tipContent.length - 1) > prevCount) {
- prevCount++;
- }
- parentElementID = $(tipContent[count]).data('id'),
- parentElement = $('#' + parentElementID);
-
- if ($(tipContent).length < count) {
- break;
- }
+ opts.timer_instance = $('<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator">')[0];
}
- var windowHalf = Math.ceil($(window).height() / 2),
- currentTip = $('#joyRidePopup' + count),
- currentTipPosition = parentElement.offset(),
- currentParentHeight = parentElement.outerHeight(),
- currentTipHeight = currentTip.outerHeight(),
- nubHeight = Math.ceil($('.joyride-nub').outerHeight() / 2),
- tipOffset = 0;
- if (currentTip.length === 0) {
- return;
- }
-
- if (count < tipContent.length) {
- if (settings.tipAnimation == "pop") {
- $('.joyride-timer-indicator').width(0);
- if (settings.timer > 0) {
- currentTip.show().children('.joyride-timer-indicator-wrap')
- .children('.joyride-timer-indicator')
- .animate({width: $('.joyride-timer-indicator-wrap')
- .width()}, settings.timer);
- } else {
- currentTip.show();
- }
- } else if (settings.tipAnimation == "fade") {
- $('.joyride-timer-indicator').width(0);
- if (settings.timer > 0) {
- currentTip.fadeIn(settings.tipAnimationFadeSpeed)
- .children('.joyride-timer-indicator-wrap')
- .children('.joyride-timer-indicator')
- .animate({width: $('.joyride-timer-indicator-wrap')
- .width()}, settings.timer);
- } else {
- currentTip.fadeIn(settings.tipAnimationFadeSpeed);
- }
- }
-
- // ++++++++++++++++++
- // Tip Location
- // ++++++++++++++++++
- var nub = currentTip.children('.joyride-nub');
- var left = currentTipPosition.left - bodyOffset.left;
- nub.removeClass('bottom')
- .removeClass('top')
- .removeClass('right');
-
- // Update the tip position so it is in the same position
- // but the nub is right aligned.
- if ($(window).scrollLeft() + $(window).width() < left + currentTip.width()) {
- left -= (currentTip.width() - nub.offset().left * 2);
- nub.addClass("right");
- }
-
- if (Modernizr.mq('only screen and (max-width: 769px)')) {
- //If the user is "mobile"
- if (tipSettings.tipLocation.indexOf("top") != -1 ) {
- if (currentTipHeight >= currentTipPosition.top) {
- currentTip.offset({top: ((currentTipPosition.top + currentParentHeight + nubHeight) - bodyOffset.top)});
- nub.addClass('top').css({ left: left });
- } else {
- currentTip.offset({top: ((currentTipPosition.top) - (currentTipHeight + bodyOffset.top + nubHeight))});
- nub.addClass('bottom').css({ left: left });
- }
- } else {
- // Default is bottom alignment.
- currentTip.offset({top: (currentTipPosition.top + currentParentHeight + nubHeight)});
- nub.addClass('top').css({ left: left });
- }
- } else {
- if (tipSettings.tipLocation == "top") {
- if (currentTipHeight >= currentTipPosition.top) {
- currentTip.offset({
- top: ((currentTipPosition.top + currentParentHeight + nubHeight) - bodyOffset.top),
- left: left
- });
- nub.addClass('top');
- } else {
- currentTip.offset({
- top: ((currentTipPosition.top) - (currentTipHeight + bodyOffset.top + nubHeight)),
- left: left
- });
- nub.addClass('bottom');
- }
- } else {
- // Default is bottom alignment.
- currentTip.offset({
- top: (currentTipPosition.top + currentParentHeight + nubHeight),
- left: left
- });
- nub.addClass('top');
- }
- }
-
- // Default is left alignment.
- if (tipSettings.tipLocation.indexOf("right") != -1) {
- // Here we ignore the viewport alignment.
- currentTip.offset({left: (currentTipPosition.left - bodyOffset.left - currentTip.width() + parentElement.width())});
- currentTip.children('.joyride-nub').addClass('right');
- }
-
- // Animate Scrolling when tip is off screen
- tipOffset = Math.ceil(currentTip.offset().top - windowHalf);
- $("html, body").animate({
- scrollTop: tipOffset
- }, settings.scrollSpeed);
+ $blank = $('<div class="joyride-tipe-guide"><span class="joyride-nub"></span><div class="joyride-content-wrapper">'),
+ content = $.trim($(opts.tip).html()) + opts.button_text + '<a href="#close" class="joyride-close-tip">X</a>' + opts.timer_instance;
- if (count > 0) {
- if (skipCount > 0) {
- var hideCount = prevCount - skipCount;
- skipCount = 0;
- } else {
- var hideCount = prevCount;
- }
- if (settings.tipAnimation == "pop") {
- $('#joyRidePopup' + hideCount).hide();
- } else if (settings.tipAnimation == "fade") {
- $('#joyRidePopup' + hideCount).fadeOut(settings.tipAnimationFadeSpeed);
- }
- }
-
- // Hide the last tip when clicked
- } else if ((tipContent.length - 1) < count) {
- var hideCnt;
- if (skipCount > 0) {
- hideCount = prevCount - skipCount;
- skipCount = 0;
- } else {
- hideCount = prevCount;
- }
- if (settings.cookieMonster == true) {
- $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
- }
- if (settings.tipAnimation == "pop") {
- $('#joyRidePopup' + hideCount).fadeTo(0, 0);
- } else if (settings.tipAnimation == "fade") {
- $('#joyRidePopup' + hideCount).fadeTo(settings.tipAnimationFadeSpeed, 0);
- }
- }
- count++;
- if (prevCount < 0) {
- prevCount = 0;
- } else if ((tipContent.length - 1) > prevCount) {
- prevCount++;
- }
- if (settings.postStepCallback != $.noop) {
- settings.postStepCallback(prevCount);
- }
+ $blank.attr('id', 'joyRidePopup' + opts.index);
+ return $('.joyride-content-wrapper', $blank).append(content)[0];
}
+ };
- if (!settings.inline || !settings.cookieMonster || !$.cookie(settings.cookieName)) {
- $(window).resize(function () {
- var parentElementID = $(tipContent[prevCount]).data('id'),
- currentTipPosition = $('#' + parentElementID).offset(),
- currentParentHeight = $('#' + parentElementID).outerHeight(),
- currentTipHeight = $('#joyRidePopup' + prevCount).outerHeight(),
- nubHeight = Math.ceil($('.joyride-nub').outerHeight() / 2);
- if (Modernizr.mq('only screen and (max-width: 769px)')) {
- if (settings.tipLocation == "bottom") {
- $('#joyRidePopup' + prevCount).offset({
- top: (currentTipPosition.top + currentParentHeight + nubHeight),
- left: 0
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('top').removeClass('bottom').css({ left: (currentTipPosition.left - bodyOffset.left) });
- } else if (settings.tipLocation == "top") {
- if (currentTipPosition.top <= currentTipHeight) {
- $('#joyRidePopup' + prevCount).offset({
- top: (currentTipPosition.top + nubHeight + currentParentHeight),
- left: 0
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('top').removeClass('bottom').css({ left: (currentTipPosition.left - bodyOffset.left) });
-
- } else {
- $('#joyRidePopup' + prevCount).offset({
- top: ((currentTipPosition.top) - (currentTipHeight + nubHeight)),
- left: 0
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('bottom').removeClass('top').css({ left: (currentTipPosition.left - bodyOffset.left) });
- }
- }
- } else {
- if (settings.tipLocation == "bottom") {
- $('#joyRidePopup' + prevCount).offset({
- top: (currentTipPosition.top + currentParentHeight + nubHeight),
- left: currentTipPosition.left
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('top').removeClass('bottom').css({ left: '' });
- } else if (settings.tipLocation == "top") {
- if (currentTipPosition.top <= currentTipHeight) {
- $('#joyRidePopup' + prevCount).offset({
- top: (currentTipPosition.top + nubHeight + currentParentHeight),
- left: currentTipPosition.left
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('top').removeClass('bottom').css({ left: '' });
- }
- else {
- $('#joyRidePopup' + prevCount).offset({
- top: ((currentTipPosition.top) - (currentTipHeight + nubHeight)),
- left: currentTipPosition.left
- });
- $('#joyRidePopup' + prevCount).children('.joyride-nub').addClass('bottom').removeClass('top').css({ left: '' });
- }
- }
- }
- });
+ $.fn.joyride = function (method) {
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else if (typeof method === 'object' || !method) {
+ return methods.init.apply(this, arguments);
+ } else {
+ $.error('Method ' + method + ' does not exist on jQuery.joyride');
}
-
- // +++++++++++++++
- // Timer
- // +++++++++++++++
-
- var interval_id = null,
- showTimerState = false;
-
- if (!settings.startTimerOnClick && settings.timer > 0){
- showNextTip();
- interval_id = setInterval(function() {showNextTip()}, settings.timer);
- } else {
- showNextTip();
- }
- var endTip = function(e, interval_id, cookie, self) {
- e.preventDefault();
- clearInterval(interval_id);
- if (cookie) {
- $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
- }
- $(self).parent().parent().hide();
- if (settings.postRideCallback != $.noop) {
- settings.postRideCallback();
- }
- }
- $('.joyride-close-tip').click(function(e) {
- endTip(e, interval_id, settings.cookieMonster, this);
- });
-
- // When the next button is clicked, show the next tip, only when cookie isn't present
- $('.joyride-next-tip').click(function(e) {
- e.preventDefault();
- if (count >= tipContent.length) {
- endTip(e, interval_id, settings.cookieMonster, this);
- }
- if (settings.timer > 0 && settings.startTimerOnClick) {
- showNextTip();
- clearInterval(interval_id);
- interval_id = setInterval(function() {showNextTip()}, settings.timer);
- } else if (settings.timer > 0 && !settings.startTimerOnClick){
- clearInterval(interval_id);
- interval_id = setInterval(function() {showNextTip()}, settings.timer);
- } else {
- showNextTip();
- }
- });
- });
};
-
-})(jQuery);
+}(jQuery));

0 comments on commit 0d02406

Please sign in to comment.