Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added closeOnEscape, onClose, guiders.prev() and a "Back" button.

  • Loading branch information...
commit 8585868c5a4992f8a0faa1e098ebdd7213d09b3b 1 parent e2f5ffd
@jeff-optimizely authored
View
5 README.html
@@ -27,8 +27,8 @@
<!-- guiders.js requires jQuery as a prerequisite. Be sure to load guiders.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="guiders-1.2.7.js"></script>
- <link rel="stylesheet" href="guiders-1.2.7.css" type="text/css" />
+ <script type="text/javascript" src="guiders-1.2.8.js"></script>
+ <link rel="stylesheet" href="guiders-1.2.8.css" type="text/css" />
</head>
<body>
<br />
@@ -120,6 +120,7 @@
guiders.createGuider({
attachTo: "#clock",
buttons: [{name: "Exit Guide", onclick: guiders.hideAll},
+ {name: "Back"},
{name: "Continue", onclick: guiders.next}],
buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">Optional checkbox. (You can add one.)</label>",
description: "Other aspects of the guider can be customized as well, such as the button names, button onclick handlers, and dialog widths. You'd also want to modify the CSS to your own project's style.",
View
12 README.md
@@ -1,4 +1,4 @@
-Guiders.js (version 1.2.7)
+Guiders.js (version 1.2.8)
==========================
Guiders are a user experience design pattern for introducing users to a web application.
@@ -51,15 +51,18 @@ buttons: array of button objects
name: "Close",
classString: "primary-button",
onclick: callback function for when the button is clicked
- (if name is "close" or "next", onclick defaults to guiders.hideAll and guiders.next respectively)
+ (if name is "close", "next", or "prev", onclick defaults to guiders.hideAll, guiders.next, or guiders.prev respectively)
}
buttonCustomHTML: (optional) custom HTML that gets appended to the buttons div
classString: (optional) custom class name that the guider should additionally have
+closeOnEscape: (optional) if true, the escape key will close the currently open guider
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
offset: fine tune the position of the guider, e.g. { left:0, top: -10 }
-onShow: (optional) additional function to call before the guider is shown
+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
+onShow: (optional) additional function to call before the guider is shown
overlay: (optional) if true, an overlay will pop up between the guider and the rest of the page
position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element. Can also use a description keyword (such as "topLeft" for 11 or "bottom" for 6)
title: title of the guider
@@ -77,11 +80,12 @@ Besides creating guiders, here is sample code you can use in your application to
guiders.hideAll(); // hides all guiders
guiders.next(); // hides the last shown guider, if shown, and advances to the next guider
guiders.show(id); // shows the guider, given the id used at creation
+guiders.prev(); // shows the previous guider
~~~
You'll likely want to change the default values, such as the width (set to 400px). These can be found at the top of `guiders.js` in the `_defaultSettings` object. You'll also want to modify the css file to match your application's branding.
-Lastly, if the URL of the current window is of the form `http://www.myurl.com/mypage.html#guider=foo`, then the guider with id equal to `foo` will be shown automatically.
+Creating a multi-page tour? If the URL of the current window is of the form `http://www.myurl.com/mypage.html#guider=foo`, then the guider with id equal to `foo` will be shown automatically. To use this, you can set the onHide of the last guider to an anonymous function: function() { window.location.href=`http://www.myurl.com/mypage.html#guider=foo`; }
In Closing
View
0  guiders-1.2.7.css → guiders-1.2.8.css
File renamed without changes
View
115 guiders-1.2.7.js → guiders-1.2.8.js
@@ -1,7 +1,7 @@
/**
* guiders.js
*
- * version 1.2.7
+ * version 1.2.8
*
* Developed at Optimizely. (www.optimizely.com)
* We make A/B testing you'll actually use.
@@ -21,7 +21,7 @@
var guiders = (function($) {
var guiders = {};
- guiders.version = "1.2.7";
+ guiders.version = "1.2.8";
guiders._defaultSettings = {
attachTo: null, // Selector of the element to attach to.
@@ -29,6 +29,7 @@ var guiders = (function($) {
buttons: [{name: "Close"}],
buttonCustomHTML: "",
classString: null,
+ closeOnEscape: false,
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
highlight: null,
isHashable: true,
@@ -36,8 +37,9 @@ var guiders = (function($) {
top: null,
left: null
},
- onShow: null,
+ onClose: null,
onHide: null,
+ onShow: null,
overlay: false,
position: 0, // 1-12 follows an analog clock, 0 means centered.
title: "Sample title goes here",
@@ -60,6 +62,7 @@ var guiders = (function($) {
].join("");
guiders._arrowSize = 42; // This is the arrow's width and height.
+ guiders._backButtonTitle = "Back";
guiders._buttonElement = "<a></a>";
guiders._buttonAttributes = {"href": "javascript:void(0);"};
guiders._closeButtonTitle = "Close";
@@ -93,25 +96,40 @@ var guiders = (function($) {
for (var i = myGuider.buttons.length - 1; i >= 0; i--) {
var thisButton = myGuider.buttons[i];
- var thisButtonElem = $(guiders._buttonElement, $.extend({
- "class" : "guider_button",
- "html" : thisButton.name },
- guiders._buttonAttributes, thisButton.html || {}));
+ var thisButtonElem = $(guiders._buttonElement,
+ $.extend({"class" : "guider_button", "html" : thisButton.name }, guiders._buttonAttributes, thisButton.html || {})
+ );
if (typeof thisButton.classString !== "undefined" && thisButton.classString !== null) {
thisButtonElem.addClass(thisButton.classString);
}
guiderButtonsContainer.append(thisButtonElem);
-
+
+ var thisButtonName = thisButton.name.toLowerCase();
if (thisButton.onclick) {
thisButtonElem.bind("click", thisButton.onclick);
- } else if (!thisButton.onclick &&
- thisButton.name.toLowerCase() === guiders._closeButtonTitle.toLowerCase()) {
- thisButtonElem.bind("click", function() { guiders.hideAll(); });
- } else if (!thisButton.onclick &&
- thisButton.name.toLowerCase() === guiders._nextButtonTitle.toLowerCase()) {
- thisButtonElem.bind("click", function() { !myGuider.elem.data('locked') && guiders.next(); });
+ } else {
+ switch (thisButtonName) {
+ case guiders._closeButtonTitle.toLowerCase():
+ thisButtonElem.bind("click", function () {
+ guiders.hideAll();
+ if (myGuider.onClose) {
+ myGuider.onClose(myGuider, false /* close by button */);
+ }
+ });
+ break;
+ case guiders._nextButtonTitle.toLowerCase():
+ thisButtonElem.bind("click", function () {
+ !myGuider.elem.data('locked') && guiders.next();
+ });
+ break;
+ case guiders._backButtonTitle.toLowerCase():
+ thisButtonElem.bind("click", function () {
+ !myGuider.elem.data('locked') && guiders.prev();
+ });
+ break;
+ }
}
}
@@ -126,14 +144,35 @@ var guiders = (function($) {
};
guiders._addXButton = function(myGuider) {
- var xButtonContainer = myGuider.elem.find(".guider_close");
- var xButton = $("<div></div>", {
- "class" : "x_button",
- "role" : "button" });
- xButtonContainer.append(xButton);
- xButton.click(function() { guiders.hideAll(); });
+ var xButtonContainer = myGuider.elem.find(".guider_close");
+ var xButton = $("<div></div>", {
+ "class" : "x_button",
+ "role" : "button" });
+ xButtonContainer.append(xButton);
+ xButton.click(function() {
+ guiders.hideAll();
+ if (myGuider.onClose) {
+ myGuider.onClose(myGuider, true);
+ }
+ });
+ };
+
+ guiders._wireEscape = function (myGuider) {
+ $(document).keydown(function(event) {
+ if (event.keyCode == 27 || event.which == 27) {
+ guiders.hideAll();
+ if (myGuider.onClose) {
+ myGuider.onClose(myGuider, true /*close by X/Escape*/);
+ }
+ return false;
+ }
+ });
};
+ guiders._unWireEscape = function (myGuider) {
+ $(document).unbind("keydown");
+ };
+
guiders._attach = function(myGuider) {
if (typeof myGuider !== 'object') {
return;
@@ -341,6 +380,33 @@ var guiders = (function($) {
}
};
+ guiders.prev = function () {
+ var currentGuider = guiders._guiders[guiders._currentGuiderID];
+ if (typeof currentGuider === "undefined") {
+ // not what we think it is
+ return;
+ }
+ if (currentGuider.prev === null) {
+ // no previous to look at
+ return;
+ }
+
+ var prevGuider = guiders._guiders[currentGuider.prev];
+ prevGuider.elem.data('locked', true);
+
+ // Note we use prevGuider.id as "prevGuider" is _already_ looking at the previous guider
+ var prevGuiderId = prevGuider.id || null;
+ if (prevGuiderId !== null && prevGuiderId !== "") {
+ var myGuider = guiders._guiderById(prevGuiderId);
+ var omitHidingOverlay = myGuider.overlay ? true : false;
+ guiders.hideAll(omitHidingOverlay, true);
+ if (prevGuider && prevGuider.highlight) {
+ guiders._dehighlightElement(prevGuider.highlight);
+ }
+ guiders.show(prevGuiderId);
+ }
+ };
+
guiders.createGuider = function(passedSettings) {
if (passedSettings === null || passedSettings === undefined) {
passedSettings = {};
@@ -380,6 +446,9 @@ var guiders = (function($) {
guiders._initializeOverlay();
guiders._guiders[myGuider.id] = myGuider;
+ if (guiders._lastCreatedGuiderID != null) {
+ myGuider.prev = guiders._lastCreatedGuiderID;
+ }
guiders._lastCreatedGuiderID = myGuider.id;
/**
@@ -429,6 +498,12 @@ var guiders = (function($) {
guiders._highlightElement(myGuider.highlight);
}
}
+
+ if (myGuider.closeOnEscape) {
+ guiders._wireEscape(myGuider);
+ } else {
+ guiders._unWireEscape(myGuider);
+ }
// You can use an onShow function to take some action before the guider is shown.
if (myGuider.onShow) {
Please sign in to comment.
Something went wrong with that request. Please try again.