Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add previous btn, memoize the las step, use jQuery.Cookie #7

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,8 @@ Guideline.Guide(name[, options]);

{
startOnUrl: '/home', // The URL on which the first page resists. Default: null
skipAsDefault: true // Whether or not the guide should initialize as 'skipped'. Meaning you must actively call the guide.start() method to start it. Default: true
skipAsDefault: true // Whether or not the guide should initialize as 'skipped'. Meaning you must actively call the guide.start() method to start it. Default: true,
memoizeLasStep: false // Default: false
}

#### Events
Expand Down Expand Up @@ -244,6 +245,7 @@ Guideline.Guide(name[, options]);
content: 'This is just...', // Adds content (text/html) to the step! Not shown if value is 'null'. Default null
showSkip: true, // Whether or not to show a 'Skip this step' button. Default: true
showContinue: false, // Whether or not to show a 'Continue' button on the step. Default: false
showPrevious: false, // Whether or not to show a 'Previous' button on the step. Default: false
showAt: '#button', // Selector for element to 'bubble' or 'overlay'. E.g. 'ul#menu li:first-child'. Can also be a callback function. If a function is provided, it will be polled until the function returns an element. Default: 'document'
align: 'left middle', // Determines how the bubble/overlay is aligned. Format '[x] [y]'. X = [left, center, right], Y = [top, middle, bottom]. E.g. 'center middle' or 'right bottom'. Default: 'right bottom'.
continueWhen: 'click #button', // Condition, when met, automatically continues to the next step on the page. Can be either a string in the format of '[event name] [css selector]', e.g. 'dblclick div#bottom li:last-child'. Can also be a callback function. If a function is provided, it will be polled until the function returns true. When the function returns true, the step continues. Default: 'click [showAt]' (but only if showAt is a string)
Expand Down Expand Up @@ -280,5 +282,5 @@ Guideline.Guide(name[, options]);
### Libraries

* [jQuery](http://jquery.com/) - Used throughout the library. Recommended jQuery version >=1.9.1.
* [LightShow.js](https://github.com/comfirm/LightShow.js) - Used whenever there is an overlay present.
* [jquery.scrollTo](https://github.com/flesler/jquery.scrollTo) - Used when scrolling to a certain window position.
* [jQuery Cookie](https://github.com/carhartl/jquery-cookie)
6 changes: 6 additions & 0 deletions examples/simple/css/bootstrap-theme.min.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions examples/simple/css/bootstrap.min.css

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions examples/simple/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link rel="stylesheet" href="../../src/guideline.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script src="../../lib/scrollto.jquery.js"></script>
<script src="../../lib/jquery.cookie.js"></script>
<script src="../../src/guideline.js"></script>
<script src="./simple.guideline.js"></script>
</head>
<body>
<div id="main">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-7">

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple example with <strong>Guideline.js</strong>.</p>
<p>
<a id="btn-more" href="https://github.com/amensouissi/Guideline.js"
class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="home-tab" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a id="profile-tab" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
82 changes: 82 additions & 0 deletions examples/simple/simple.guideline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// Example Guide

var simpleGuide = new Guideline.Guide("simple");

var maypage = simpleGuide.addPage("maypage");

maypage.addStep({
type: "overlay",
title: "My application",
showSkip: false,
content: (
"<p>This is a simple example with <strong>Guideline.js</strong></p>"+
"<button class='gl-continue btn btn-large btn-primary btn-alpha-blue hide-button'><i class='icon-circle-arrow-right'></i> Amazing... Show me more!</button>"+
"<br/>"+
"<a href='#' class='gl-skip'>I don't care. Skip this.</a>"
)
});


var next_btn = "<button type='button' class='btn btn-xs btn-primary'>"+
"Next"+
"</button>"

var prev_btn = "<button type='button' class='btn btn-xs btn-primary'>"+
"Previous"+
"</button>"

var stepControlContainer = "<div class='btn-group btn-group-xs step-control-container'/>"

maypage.addStep({
title: "Home!",
content: (
"<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>"+
"<br/>"
),
showAt: "#home-tab",
align: "center top",
continueHtml: next_btn,
previousHtml: prev_btn,
stepControlContainer,
showContinue: true,
showPrevious: true
});

maypage.addStep({
type: "overlay",
title: "Profile!",
content: (
"<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>"+
"<br/>"
),
showAt: "#profile-tab",
align: "right middle",
continueHtml: next_btn,
previousHtml: prev_btn,
stepControlContainer,
showContinue: true,
showPrevious: true
});


maypage.addStep({
type: "overlay",
title: "Learn more!",
content: (
"<p>For more infirmtions.</p>"+
"<br/>"
),
showAt: "#btn-more",
align: "center bottom",
continueHtml: next_btn,
previousHtml: prev_btn,
stepControlContainer,
showContinue: true,
showPrevious: true
});

simpleGuide.register();

$(document).ready(function(){
Guideline.setCurrentPage("maypage");
})
114 changes: 114 additions & 0 deletions lib/jquery.cookie.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2006, 2014 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD (Register as an anonymous module)
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var pluses = /\+/g;

function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}

function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}

function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}

function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}

try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}

function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}

var config = $.cookie = function (key, value, options) {

// Write

if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
}

return (document.cookie = [
encode(key), '=', stringifyCookieValue(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(''));
}

// Read

var result = key ? undefined : {},
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
cookies = document.cookie ? document.cookie.split('; ') : [],
i = 0,
l = cookies.length;

for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('=');

if (key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}

// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}

return result;
};

config.defaults = {};

$.removeCookie = function (key, options) {
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};

}));
3 changes: 0 additions & 3 deletions lib/lightshow.jquery.min.js

This file was deleted.

Loading