From 086eee92eca8952833350041eeccad66fe768ecf Mon Sep 17 00:00:00 2001 From: Aubrey Holland Date: Mon, 2 Dec 2013 16:19:47 -0500 Subject: [PATCH 01/11] move component.json to bower.json --- component.json => bower.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename component.json => bower.json (100%) diff --git a/component.json b/bower.json similarity index 100% rename from component.json rename to bower.json From 2c9adf251006ad36aee4a752c7c4271055d30775 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 22:29:53 -0500 Subject: [PATCH 02/11] Reduce places where the _guiders array is accessed directly by calling get() or getCurrentGuider() to find guiders. Also, simplify a few guider lookup tests to a simple truth test because the return from get() and getCurrentGuider() are normalized to null when a guider was not found in the _guiders array. --- guiders.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/guiders.js b/guiders.js index baad2e0..091f04a 100644 --- a/guiders.js +++ b/guiders.js @@ -468,7 +468,7 @@ var guiders = (function($) { }; guiders.getCurrentGuider = function() { - return guiders._guiders[guiders._currentGuiderID] || null; + return guiders.get(guiders._currentGuiderID); }; guiders.hideAll = function(omitHidingOverlay, next) { @@ -481,7 +481,7 @@ var guiders = (function($) { } }); $(".guider").fadeOut("fast"); - var currentGuider = guiders._guiders[guiders._currentGuiderID]; + var currentGuider = guiders.getCurrentGuider(); if (currentGuider && currentGuider.highlight) { guiders._dehighlightElement(currentGuider.highlight); } @@ -494,8 +494,8 @@ var guiders = (function($) { }; guiders.next = function() { - var currentGuider = guiders._guiders[guiders._currentGuiderID]; - if (typeof currentGuider === "undefined") { + var currentGuider = guiders.getCurrentGuider(); + if (!currentGuider) { return null; } currentGuider.elem.data("locked", true); @@ -522,8 +522,8 @@ var guiders = (function($) { }; guiders.prev = function () { - var currentGuider = guiders._guiders[guiders._currentGuiderID]; - if (typeof currentGuider === "undefined") { + var currentGuider = guiders.getCurrentGuider(); + if (!currentGuider) { // not what we think it is return null; } @@ -532,7 +532,7 @@ var guiders = (function($) { return null; } - var prevGuider = guiders._guiders[currentGuider.prev]; + var prevGuider = guiders.get(currentGuider.prev); prevGuider.elem.data("locked", true); // Note we use prevGuider.id as "prevGuider" is _already_ looking at the previous guider @@ -550,13 +550,13 @@ var guiders = (function($) { }; guiders.reposition = function() { - var currentGuider = guiders._guiders[guiders._currentGuiderID]; + var currentGuider = guiders.getCurrentGuider(); guiders._attach(currentGuider); }; guiders.scrollToCurrent = function() { - var currentGuider = guiders._guiders[guiders._currentGuiderID]; - if (typeof currentGuider === "undefined") { + var currentGuider = guiders.getCurrentGuider(); + if (!currentGuider) { return; } From 58570840311734254d1f679d67abf6bc352eaaab Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 22:35:18 -0500 Subject: [PATCH 03/11] If next() is called on a guider that should be skipped, the return value from next() should be the result from the recursive call to next(). --- guiders.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/guiders.js b/guiders.js index 091f04a..02d5c2b 100644 --- a/guiders.js +++ b/guiders.js @@ -511,8 +511,7 @@ var guiders = (function($) { if (nextGuider.shouldSkip && nextGuider.shouldSkip()) { guiders._currentGuiderID = nextGuider.id; - guiders.next(); - return guiders.getCurrentGuider(); + return guiders.next(); } else { guiders.show(nextGuiderId); From a8e2c785d39e8497c4c3f5ea9083c295f6748762 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 22:40:25 -0500 Subject: [PATCH 04/11] Use a counter instead of a random number to automatically assign guider IDs. The predictable ID numbering is handy when debugging. And this technique is a tad faster. --- guiders.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/guiders.js b/guiders.js index 02d5c2b..6471795 100644 --- a/guiders.js +++ b/guiders.js @@ -70,6 +70,7 @@ var guiders = (function($) { guiders._currentGuiderID = null; guiders._fixedOrAbsolute = "fixed"; guiders._guiders = {}; + guiders._autoNumber = 1; guiders._lastCreatedGuiderID = null; guiders._nextButtonTitle = "Next"; guiders._offsetNameMapping = { @@ -394,7 +395,7 @@ var guiders = (function($) { // Extend those settings with passedSettings myGuider = $.extend({}, guiders._defaultSettings, passedSettings); - myGuider.id = myGuider.id || "guider_random_" + String(Math.floor(Math.random() * 1000)); + myGuider.id = myGuider.id || "guider_auto_" + String(guiders._autoNumber++); var guiderElement = $("#" + myGuider.id); if (!guiderElement.length) { From c9b577547c9a10f7318623c31930f3b10d9785f5 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 22:42:13 -0500 Subject: [PATCH 05/11] Check for myGuider === null in _attach since typeof null is 'object'. --- guiders.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guiders.js b/guiders.js index 6471795..883f03c 100644 --- a/guiders.js +++ b/guiders.js @@ -169,7 +169,7 @@ var guiders = (function($) { }; guiders._attach = function(myGuider) { - if (typeof myGuider !== 'object') { + if (myGuider === null || typeof myGuider !== 'object') { return; } From b9a5ce2c1d110b6eb222995d8e8c44d6fff12b1c Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 23:06:21 -0500 Subject: [PATCH 06/11] When adding a guider after another and setting its prev ID, reciprocate by setting the previous guider's next ID. --- guiders.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/guiders.js b/guiders.js index 883f03c..7d12a3a 100644 --- a/guiders.js +++ b/guiders.js @@ -444,9 +444,17 @@ var guiders = (function($) { guiders._initializeOverlay(); guiders._guiders[myGuider.id] = myGuider; + if (guiders._lastCreatedGuiderID != null) { myGuider.prev = guiders._lastCreatedGuiderID; + + var prevGuider = guiders.get(guiders._lastCreatedGuiderID); + + if(prevGuider && !prevGuider.next) { + prevGuider.next = myGuider.id; + } } + guiders._lastCreatedGuiderID = myGuider.id; /** From 774fad6dbf1fbf2494cc34a834c66ec9aae435b4 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 23:27:02 -0500 Subject: [PATCH 07/11] Add events to observe guider prev/next navigation. --- guiders.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/guiders.js b/guiders.js index 7d12a3a..1629c05 100644 --- a/guiders.js +++ b/guiders.js @@ -523,6 +523,9 @@ var guiders = (function($) { return guiders.next(); } else { + // Trigger before show to allow observers to change the + // DOM before the new guider calculates its position + $("body").trigger("guidersNext"); guiders.show(nextGuiderId); return guiders.getCurrentGuider(); } @@ -552,6 +555,11 @@ var guiders = (function($) { if (prevGuider && prevGuider.highlight) { guiders._dehighlightElement(prevGuider.highlight); } + + // Trigger before show to allow observers to change the + // DOM before the new guider calculates its position + $("body").trigger("guidersPrev"); + guiders.show(prevGuiderId); return myGuider; } From ae0d90ac18c0f95d99d0cf4e9dcf5055a4fc2d3b Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 23:35:24 -0500 Subject: [PATCH 08/11] Since we de-highlight guider.highlight, we should be highlighting it instead of guider.attachTo. While it is common to set highlight to the same ID as attachTo, I often attach to one thing but highlight another--like the attachTo's container. Also, must the guider have an attachTo for a highlight to be valid? If not, the test of attachTo is also unnecessary. It's no harm right now, so I left it in. --- guiders.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guiders.js b/guiders.js index 1629c05..003aceb 100644 --- a/guiders.js +++ b/guiders.js @@ -596,7 +596,7 @@ var guiders = (function($) { guiders._showOverlay(myGuider); // if guider is attached to an element, make sure it's visible if (myGuider.highlight && myGuider.attachTo) { - guiders._highlightElement(myGuider.attachTo); + guiders._highlightElement(myGuider.highlight); } } From 349bbd59f093aaf0f471dee7a383faf512354570 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Tue, 18 Feb 2014 23:55:15 -0500 Subject: [PATCH 09/11] Reset _currentGuiderID to null when all guiders are hidden. --- guiders.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guiders.js b/guiders.js index 003aceb..2549787 100644 --- a/guiders.js +++ b/guiders.js @@ -499,6 +499,8 @@ var guiders = (function($) { } else { guiders._hideOverlay(); } + + guiders._currentGuiderID = null; // Set back to initial state return guiders; }; From db7545c38ccc44919f6504b4708de001c583eb3e Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Wed, 19 Feb 2014 00:06:15 -0500 Subject: [PATCH 10/11] Replace _dehighlightElement() with _removeHighlight() and call it in key places. Note that hideAll() was often called before _dehighlightElement(). So it makes sense to ensure that the highlight is cleared in hideAll(). I also remove the highlight before setting the next one, and in the top of show(). --- guiders.js | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/guiders.js b/guiders.js index 2549787..a0ada7e 100644 --- a/guiders.js +++ b/guiders.js @@ -258,18 +258,19 @@ var guiders = (function($) { return myGuider; }; - guiders._dehighlightElement = function(selector) { - $(selector).removeClass('guiders_highlight'); - }; - guiders._hideOverlay = function() { $("#guiders_overlay").fadeOut("fast"); }; guiders._highlightElement = function(selector) { + guiders._removeHighlight(); $(selector).addClass('guiders_highlight'); }; + guiders._removeHighlight = function () { + $(".guiders_highlight").removeClass('guiders_highlight'); + }; + guiders._initializeOverlay = function() { if ($("#guiders_overlay").length === 0) { $("
").hide().appendTo("body"); @@ -482,6 +483,7 @@ var guiders = (function($) { guiders.hideAll = function(omitHidingOverlay, next) { next = next || false; + guiders._removeHighlight(); $(".guider:visible").each(function(index, elem){ var myGuider = guiders.get($(elem).attr('id')); @@ -490,10 +492,6 @@ var guiders = (function($) { } }); $(".guider").fadeOut("fast"); - var currentGuider = guiders.getCurrentGuider(); - if (currentGuider && currentGuider.highlight) { - guiders._dehighlightElement(currentGuider.highlight); - } if (typeof omitHidingOverlay !== "undefined" && omitHidingOverlay === true) { // do nothing for now } else { @@ -516,9 +514,6 @@ var guiders = (function($) { var nextGuider = guiders.get(nextGuiderId); var omitHidingOverlay = nextGuider.overlay ? true : false; guiders.hideAll(omitHidingOverlay, true); - if (currentGuider && currentGuider.highlight) { - guiders._dehighlightElement(currentGuider.highlight); - } if (nextGuider.shouldSkip && nextGuider.shouldSkip()) { guiders._currentGuiderID = nextGuider.id; @@ -554,9 +549,6 @@ var guiders = (function($) { var myGuider = guiders.get(prevGuiderId); var omitHidingOverlay = myGuider.overlay ? true : false; guiders.hideAll(omitHidingOverlay, true); - if (prevGuider && prevGuider.highlight) { - guiders._dehighlightElement(prevGuider.highlight); - } // Trigger before show to allow observers to change the // DOM before the new guider calculates its position @@ -594,6 +586,8 @@ var guiders = (function($) { } var myGuider = guiders.get(id); + guiders._removeHighlight(); + if (myGuider.overlay) { guiders._showOverlay(myGuider); // if guider is attached to an element, make sure it's visible From 576d57116dc3f179733300aefe8efd8647e210e8 Mon Sep 17 00:00:00 2001 From: Stephen Farmer Date: Wed, 19 Feb 2014 00:32:39 -0500 Subject: [PATCH 11/11] Add descriptions for guider options that were not listed in the doc. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 4635cf7..629a060 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,9 @@ guiders.createGuider({ The parameters for creating guiders are: ~~~ +id: (optional) id string used as a key for the guider. If blank, an automatic id is assigned. +prev: (optional) id the previous guider. If left blank, this will point to the previously created guider. +next: (optional) id the next guider. If left blank, this will point to the next guider that is created. attachTo: (optional) selector of the html element you want to attach the guider to autoFocus: (optional) if you want the browser to scroll to the position of the guider, set this to true buttons: array of button objects @@ -59,6 +62,7 @@ closeOnEscape: (optional) if true, the escape key will close the currently open description: text description that shows up inside the guider highlight: (optional) selector of the html element you want to highlight (will cause element to be above the overlay) isHashable: (defaults to true) the guider will be shown auto-shown when a page is loaded with a url hash parameter #guider=guider_name +maxWidth: (optional) maximum width of the guider (can be a string ending with 'px' or a number of pixels) offset: fine tune the position of the guider, e.g. { left:0, top: -10 } onClose: (optional) additional function to call if a guider is closed by the x button, close button, or escape key onHide: (optional) additional function to call when the guider is hidden