// 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"
}, ...
],
video: "http://player.vimeo.com/xxxxx", <-- instead of the steps you can specify a video and it will be displayed in a modal
blog: "http://gethue.tumblr.com/yyyyy" <-- if specified, a link to this with a "Read more about it..." label will be placed under the video in the modal. if video is empty, the link will be automagically opened
}, ...
]
});
Calling $.jHueTour({tours: [...]}) more than once will merge the tour data, so you can keep adding tours dynamically 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",
MORE_INFO: "Read more about it...",
TOOLTIP_TITLE: "Demo tutorials"
},
tours: [],
showRemote: false,
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: "",
desc: "",
remote: false,
steps: [],
shownStep: 0,
video: "",
blog: ""
};
this.init();
}
Plugin.prototype.init = function () {
var _this = this;
_this.initQuestionMark();
var _tourMask = $("