// Licensed to Cloudera, Inc. under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. Cloudera, Inc. licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/*
* jHue tour plugin
* Optionally depends on $.totalstorage for progress checking and $.jHueNotify for error notification
* Can be instantiated with
$.jHueTour({
tours: [ <-- array, the tours available for this page
{
name: "xxxx", <-- unique tour name (location.pathname scope)
desc: "Desc yyyy", <-- the label shown on the question mark
path: "beeswax/*", <-- string for the path to show this tour on
steps: [ <-- array, steps of the tour
{
arrowOn: "a[href='/beeswax']", <-- the element relative to the popover is positioned
expose: ".navbar-fixed-top", <-- optional, the exposed object. if not present, arrowOn will be exposed
title: "Welcome to Beeswax!", <-- popover title
content: "This is a tour of the Beeswax app. HTML is supported too!", <-- popover content, html enable
placement: "bottom", <-- popover placement
left: "100px", <-- popover absolute position (css string)
top: -20 <-- popover relative position (it adds that amount of pixels to the popover calculated position)
visitUrl: "blabla?tour=hello" <-- overrides everything, redirects to specific url
},
{
arrowOn: ".subnav-fixed",
title: "Beeswax sections",
content: "There are several sections in the Beeswax app",
placement: "bottom",
left: "100px"
}, ...
]
}, ...
]
});
Calling $.jHueTour({tours: [...]}) more than once will merge the tour data, so you can keep adding tours dinamically to the same page
You can interact with:
- $.jHueTour("start") / $.jHueTour("show") / $.jHueTour("play") : starts the first available tour
- $.jHueTour("stop") / $.jHueTour("close") / $.jHueTour("hide") / $.jHueTour("stop") : starts the first available tour
- $.jHueTour("reset") : removes stored tours and history
- $.jHueTour("clear") : removes current tours
- $.jHueTour("http://remote/hue/tour.hue") : loads a remote tour
- $.jHueTour("tourName", 1) : loads tour name and start at step 1
- $.jHueTour() : returns the available tours
*/
(function ($, window, document, undefined) {
var pluginName = "jHueTour",
defaults = {
labels: {
AVAILABLE_TOURS: "Available tours",
NO_AVAILABLE_TOURS: "None for this page"
},
tours: [],
showRemote: false,
questionMarkPlacement: "right",
hideIfNoneAvailable: true
};
function Plugin(element, options) {
this.element = element;
if (typeof jHueTourGlobals !== undefined) {
var extendedDefaults = $.extend({}, defaults, jHueTourGlobals);
extendedDefaults.labels = $.extend({}, defaults.labels, jHueTourGlobals.labels);
this.options = $.extend({}, extendedDefaults, options);
this.options = $.extend({}, defaults, this.options);
}
else {
this.options = $.extend({}, defaults, options);
}
this._defaults = defaults;
this._name = pluginName;
this.currentTour = {
name: "",
path: "",
remote: false,
steps: [],
shownStep: 0
};
this.init();
}
Plugin.prototype.init = function () {
var _this = this;
_this.initQuestionMark();
var _tourMask = $("
").attr("id", "jHueTourMask");
_tourMask.width($(document).width()).height($(document).height())
_tourMask.click(function () {
_this.closeCurtains();
});
_tourMask.appendTo($("body"));
$(document).on("keyup", function (e) {
var _code = (e.keyCode ? e.keyCode : e.which);
if ($("#jHueTourMask").is(":visible") && _code == 27) {
_this.performOperation("close");
}
});
};
Plugin.prototype.initQuestionMark = function () {
var _this = this;
$("#jHueTourQuestion").remove();
var _questionMark = $("
").attr("id", "jHueTourQuestion").html('').addClass("jHueTourBadge");
if (_this.options.questionMarkPlacement == "left"){
_questionMark.addClass("jHueTourBadgeLeft");
}
if ($.totalStorage("jHueTourExtras") != null) {
var _newTours = [];
$.each(_this.options.tours, function (cnt, tour) {
if (tour.remote == undefined || !tour.remote) {
_newTours.push(tour);
}
});
_this.options.tours = _newTours.concat($.totalStorage("jHueTourExtras"));
}
var _toursHtml = '
'
var _added = 0;
$.each(_this.options.tours, function (ctn, tour) {
if (tour.path === undefined || RegExp(tour.path).test(location.pathname)) {
var _tourDone = '';
var _removeTour = '';
if ($.totalStorage !== undefined) {
var _key = location.pathname;
if (tour.path !== undefined && tour.path != "") {
_key = tour.path;
}
_key += "_" + tour.name;
if ($.totalStorage("jHueTourHistory") != null && $.totalStorage("jHueTourHistory")[_key] == true) {
_tourDone = '