jquery.tour.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. /*
  17. * jHue tour plugin
  18. * Optionally depends on $.totalstorage for progress checking and $.jHueNotify for error notification
  19. * Can be instantiated with
  20. $.jHueTour({
  21. tours: [ <-- array, the tours available for this page
  22. {
  23. name: "xxxx", <-- unique tour name (location.pathname scope)
  24. desc: "Desc yyyy", <-- the label shown on the question mark
  25. path: "beeswax/*", <-- string for the path to show this tour on
  26. steps: [ <-- array, steps of the tour
  27. {
  28. arrowOn: "a[href='/beeswax']", <-- the element relative to the popover is positioned
  29. expose: ".navbar-fixed-top", <-- optional, the exposed object. if not present, arrowOn will be exposed
  30. title: "Welcome to Beeswax!", <-- popover title
  31. content: "This is a tour of the Beeswax app. <br/><b>HTML</b> is supported <em>too!</em>", <-- popover content, html enable
  32. placement: "bottom", <-- popover placement
  33. left: "100px", <-- popover absolute position (css string)
  34. top: -20 <-- popover relative position (it adds that amount of pixels to the popover calculated position)
  35. visitUrl: "blabla?tour=hello" <-- overrides everything, redirects to specific url
  36. },
  37. {
  38. arrowOn: ".subnav-fixed",
  39. title: "Beeswax sections",
  40. content: "There are several sections in the Beeswax app",
  41. placement: "bottom",
  42. left: "100px"
  43. }, ...
  44. ]
  45. }, ...
  46. ]
  47. });
  48. Calling $.jHueTour({tours: [...]}) more than once will merge the tour data, so you can keep adding tours dinamically to the same page
  49. You can interact with:
  50. - $.jHueTour("start") / $.jHueTour("show") / $.jHueTour("play") : starts the first available tour
  51. - $.jHueTour("stop") / $.jHueTour("close") / $.jHueTour("hide") / $.jHueTour("stop") : starts the first available tour
  52. - $.jHueTour("reset") : removes stored tours and history
  53. - $.jHueTour("clear") : removes current tours
  54. - $.jHueTour("http://remote/hue/tour.hue") : loads a remote tour
  55. - $.jHueTour("tourName", 1) : loads tour name and start at step 1
  56. - $.jHueTour() : returns the available tours
  57. */
  58. (function ($, window, document, undefined) {
  59. var pluginName = "jHueTour",
  60. defaults = {
  61. labels: {
  62. AVAILABLE_TOURS: "Available tours",
  63. NO_AVAILABLE_TOURS: "None for this page"
  64. },
  65. tours: [],
  66. showRemote: false,
  67. questionMarkPlacement: "right",
  68. hideIfNoneAvailable: true
  69. };
  70. function Plugin(element, options) {
  71. this.element = element;
  72. if (typeof jHueTourGlobals !== undefined) {
  73. var extendedDefaults = $.extend({}, defaults, jHueTourGlobals);
  74. extendedDefaults.labels = $.extend({}, defaults.labels, jHueTourGlobals.labels);
  75. this.options = $.extend({}, extendedDefaults, options);
  76. this.options = $.extend({}, defaults, this.options);
  77. }
  78. else {
  79. this.options = $.extend({}, defaults, options);
  80. }
  81. this._defaults = defaults;
  82. this._name = pluginName;
  83. this.currentTour = {
  84. name: "",
  85. path: "",
  86. remote: false,
  87. steps: [],
  88. shownStep: 0
  89. };
  90. this.init();
  91. }
  92. Plugin.prototype.init = function () {
  93. var _this = this;
  94. _this.initQuestionMark();
  95. var _tourMask = $("<div>").attr("id", "jHueTourMask");
  96. _tourMask.width($(document).width()).height($(document).height())
  97. _tourMask.click(function () {
  98. _this.closeCurtains();
  99. });
  100. _tourMask.appendTo($("body"));
  101. $(document).on("keyup", function (e) {
  102. var _code = (e.keyCode ? e.keyCode : e.which);
  103. if ($("#jHueTourMask").is(":visible") && _code == 27) {
  104. _this.performOperation("close");
  105. }
  106. });
  107. };
  108. Plugin.prototype.initQuestionMark = function () {
  109. var _this = this;
  110. $("#jHueTourQuestion").remove();
  111. var _questionMark = $("<div>").attr("id", "jHueTourQuestion").html('<i class="icon-flag-checkered" style=""></i>').addClass("jHueTourBadge");
  112. if (_this.options.questionMarkPlacement == "left"){
  113. _questionMark.addClass("jHueTourBadgeLeft");
  114. }
  115. if ($.totalStorage("jHueTourExtras") != null) {
  116. var _newTours = [];
  117. $.each(_this.options.tours, function (cnt, tour) {
  118. if (tour.remote == undefined || !tour.remote) {
  119. _newTours.push(tour);
  120. }
  121. });
  122. _this.options.tours = _newTours.concat($.totalStorage("jHueTourExtras"));
  123. }
  124. var _toursHtml = '<ul class="nav nav-pills nav-stacked">'
  125. var _added = 0;
  126. $.each(_this.options.tours, function (ctn, tour) {
  127. if (tour.path === undefined || RegExp(tour.path).test(location.pathname)) {
  128. var _tourDone = '';
  129. var _removeTour = '';
  130. if ($.totalStorage !== undefined) {
  131. var _key = location.pathname;
  132. if (tour.path !== undefined && tour.path != "") {
  133. _key = tour.path;
  134. }
  135. _key += "_" + tour.name;
  136. if ($.totalStorage("jHueTourHistory") != null && $.totalStorage("jHueTourHistory")[_key] == true) {
  137. _tourDone = '<div style="color:green;float:right;margin:4px"><i class="icon-check-sign"></i></div>';
  138. }
  139. }
  140. if (tour.remote) {
  141. _removeTour = '<div style="color:red;float:right;margin:4px;cursor: pointer" onclick="javascript:$.jHueTour(\'remove_' + tour.name + '\')"><i class="icon-remove-sign"></i></div>';
  142. }
  143. _toursHtml += '<li>' + _removeTour + _tourDone + '<a href="javascript:$.jHueTour(\'' + tour.name + '\', 1)" style="padding-left:0">' + tour.desc + '</a></li>';
  144. _added++;
  145. }
  146. });
  147. if (_added == 0) {
  148. if (_this.options.hideIfNoneAvailable){
  149. _questionMark.css("display", "none");
  150. }
  151. else {
  152. _toursHtml += '<li>' + _this.options.labels.NO_AVAILABLE_TOURS + '</li>';
  153. }
  154. }
  155. if (_added > 0 && typeof $.totalStorage !== "undefined" && ($.totalStorage("jHueTourHideModal") == null || $.totalStorage("jHueTourHideModal") == false)) {
  156. $(document).ready(function () {
  157. $("#jHueTourModal").modal();
  158. $.totalStorage("jHueTourHideModal", true);
  159. $("#jHueTourModalChk").attr("checked", "checked");
  160. $("#jHueTourModalChk").on("change", function () {
  161. $.totalStorage("jHueTourHideModal", $(this).is(":checked"));
  162. });
  163. });
  164. }
  165. if (_this.options.showRemote){
  166. _toursHtml += '<li>' +
  167. ' <div class="input-append" style="margin-top: 10px">' +
  168. ' <input id="jHueTourRemoteTutorial" style="width:70%" type="text" placeholder="URL">' +
  169. ' <button id="jHueTourRemoteTutorialBtn" class="btn" type="button" onclick="javascript:$.jHueTour($(\'#jHueTourRemoteTutorial\').val())">' +
  170. ' <i class="icon-cloud-download"></i></button>' +
  171. ' </div>' +
  172. '</li>';
  173. }
  174. _toursHtml += '</ul>';
  175. _questionMark.click(function () {
  176. var _closeBtn = $("<a>");
  177. _closeBtn.addClass("btn").addClass("btn-mini").html('<i class="icon-remove"></i>').css("float", "right").css("margin-top", "-4px").css("margin-right", "-6px");
  178. _closeBtn.click(function () {
  179. $(".popover").remove();
  180. });
  181. _questionMark.popover("destroy").popover({
  182. title: _this.options.labels.AVAILABLE_TOURS,
  183. content: _toursHtml,
  184. html: true,
  185. trigger: "manual",
  186. placement: _this.options.questionMarkPlacement == "left"?"right":"left"
  187. }).popover("show");
  188. if ($(".popover").position().top <= 0) {
  189. $(".popover").css("top", "10px");
  190. }
  191. _closeBtn.prependTo($(".popover-title"));
  192. });
  193. _questionMark.appendTo($("body"));
  194. };
  195. Plugin.prototype.addTours = function (options) {
  196. var _this = this;
  197. var _addableTours = [];
  198. if (options.tours != null) {
  199. $.each(options.tours, function (cnt, tour) {
  200. var _add = true;
  201. if (_this.options.tours != null) {
  202. $.each(_this.options.tours, function (icnt, itour) {
  203. if (itour.name == tour.name) {
  204. _add = false;
  205. }
  206. });
  207. }
  208. if (_add) {
  209. _addableTours.push(tour);
  210. }
  211. });
  212. }
  213. _this.options.tours = _this.options.tours.concat(_addableTours);
  214. };
  215. Plugin.prototype.availableTours = function () {
  216. return this.options.tours;
  217. };
  218. Plugin.prototype.performOperation = function (operation) {
  219. var _this = this;
  220. var _op = operation.toLowerCase();
  221. if (_op.indexOf("http:") == 0) {
  222. $("#jHueTourRemoteTutorial").attr("disabled", "disabled");
  223. $("#jHueTourRemoteTutorialBtn").attr("disabled", "disabled");
  224. $.ajax({
  225. type: "GET",
  226. url: operation + "?callback=?",
  227. async: false,
  228. jsonpCallback: "jHueRemoteTour",
  229. contentType: "application/json",
  230. dataType: "jsonp",
  231. success: function (json) {
  232. if ($.totalStorage !== undefined) {
  233. if ($.totalStorage("jHueTourExtras") == null) {
  234. $.totalStorage("jHueTourExtras", []);
  235. }
  236. var _newStoredArray = [];
  237. if (json.tours != null) {
  238. _newStoredArray = json.tours;
  239. $.each($.totalStorage("jHueTourExtras"), function (cnt, tour) {
  240. var _found = false;
  241. $.each(json.tours, function (icnt, itour) {
  242. if (itour.name == tour.name) {
  243. _found = true;
  244. }
  245. });
  246. if (!_found) {
  247. _newStoredArray.push(tour);
  248. }
  249. });
  250. }
  251. $.totalStorage("jHueTourExtras", _newStoredArray);
  252. }
  253. $("#jHueTourQuestion").popover("destroy");
  254. _this.initQuestionMark();
  255. $("#jHueTourQuestion").click();
  256. },
  257. error: function (e) {
  258. if ($.jHueNotify !== undefined) {
  259. $.jHueNotify.error(e.message)
  260. }
  261. $("#jHueTourRemoteTutorial").removeAttr("disabled");
  262. $("#jHueTourRemoteTutorialBtn").removeAttr("disabled");
  263. }
  264. });
  265. }
  266. if (_op.indexOf("remove_") == 0) {
  267. var _tourName = _op.substr(7);
  268. if ($.totalStorage !== undefined) {
  269. var _newStoredArray = [];
  270. $.each($.totalStorage("jHueTourExtras"), function (cnt, tour) {
  271. if (tour.name != _tourName) {
  272. _newStoredArray.push(tour);
  273. }
  274. });
  275. $.totalStorage("jHueTourExtras", _newStoredArray);
  276. $("#jHueTourQuestion").popover("destroy");
  277. _this.initQuestionMark();
  278. $("#jHueTourQuestion").click();
  279. }
  280. }
  281. if (_op == "start" || _op == "show" || _op == "play") {
  282. if (_this.options.tours.length > 0 && _this.currentTour.name == "") {
  283. _this.currentTour.name = _this.options.tours[0].name;
  284. _this.currentTour.path = _this.options.tours[0].path;
  285. _this.currentTour.steps = _this.options.tours[0].steps;
  286. }
  287. this.showStep(1);
  288. }
  289. if (_op == "reset") {
  290. if ($.totalStorage !== undefined) {
  291. $.totalStorage("jHueTourHistory", null);
  292. $.totalStorage("jHueTourExtras", null);
  293. }
  294. }
  295. if (_op == "clear") {
  296. _this.options.tours = [];
  297. }
  298. if (_op == "end" || _op == "hide" || _op == "close" || _op == "stop") {
  299. _this.closeCurtains();
  300. }
  301. };
  302. Plugin.prototype.closeCurtains = function () {
  303. $(".popover").remove();
  304. $(".jHueTourExposed").removeClass("jHueTourExposed");
  305. $("#jHueTourMask").hide();
  306. };
  307. Plugin.prototype.showTour = function (tourName, stepNo) {
  308. var _this = this;
  309. if (_this.options.tours != null) {
  310. $.each(_this.options.tours, function (cnt, tour) {
  311. if (tour.name == tourName && (tour.path === undefined || RegExp(tour.path).test(location.pathname))) {
  312. _this.currentTour.name = tour.name;
  313. _this.currentTour.path = tour.path;
  314. _this.currentTour.steps = tour.steps;
  315. if (stepNo === undefined) {
  316. _this.showStep(1);
  317. }
  318. else {
  319. _this.showStep(stepNo);
  320. }
  321. return;
  322. }
  323. });
  324. }
  325. };
  326. Plugin.prototype.showStep = function (stepNo) {
  327. var _this = this;
  328. if (_this.currentTour.steps[stepNo - 1] != null) {
  329. var _step = _this.currentTour.steps[stepNo - 1];
  330. _this.currentTour.shownStep = stepNo;
  331. var _navigation = "";
  332. if (_step.visitUrl != undefined) {
  333. location.href = _step.visitUrl;
  334. }
  335. if (_step.onShown != undefined) {
  336. window.setTimeout(_step.onShown, 10);
  337. }
  338. $(".popover").remove();
  339. $(".jHueTourExposed").removeClass("jHueTourExposed");
  340. if ($(".jHueTourExposed").css("position") == "relative") {
  341. $(".jHueTourExposed").css("position", "relative");
  342. }
  343. $("#jHueTourMask").width($(document).width()).height($(document).height()).show();
  344. var _closeBtn = $("<a>");
  345. _closeBtn.addClass("btn").addClass("btn-mini").html('<i class="icon-remove"></i>').css("float", "right").css("margin-top", "-4px").css("margin-right", "-6px");
  346. _closeBtn.click(function () {
  347. _this.performOperation("close");
  348. });
  349. var _nextBtn = $("<a>");
  350. _nextBtn.addClass("btn").addClass("btn-mini").html('<i class="icon-chevron-sign-right"></i>').css("margin-top", "10px");
  351. _nextBtn.click(function () {
  352. _this.showStep(_this.currentTour.shownStep + 1);
  353. });
  354. var _prevBtn = $("<a>");
  355. _prevBtn.addClass("btn").addClass("btn-mini").html('<i class="icon-chevron-sign-left"></i>').css("margin-top", "10px").css("margin-right", "10px");
  356. _prevBtn.click(function () {
  357. _this.showStep(_this.currentTour.shownStep - 1);
  358. });
  359. var _arrowOn = _step.arrowOn;
  360. var _additionalContent = "";
  361. if ($(_arrowOn).length == 0 || !($(_arrowOn).is(":visible"))){
  362. _arrowOn = "body";
  363. _additionalContent = "<b>MISSING POINTER OF STEP "+ _this.currentTour.shownStep +"</b> ";
  364. }
  365. $(_arrowOn).popover('destroy').popover({
  366. title: _step.title,
  367. content: _additionalContent + _step.content + "<br/>",
  368. html: true,
  369. trigger: 'manual',
  370. placement: (_step.placement != "" && _step.placement != undefined) ? _step.placement : "left"
  371. }).popover('show');
  372. if (_step.top != undefined) {
  373. if ($.isNumeric(_step.top)) {
  374. $(".popover").css("top", ($(".popover").position().top + _step.top) + "px");
  375. }
  376. else {
  377. $(".popover").css("top", _step.top);
  378. }
  379. }
  380. if (_step.left != undefined) {
  381. if ($.isNumeric(_step.left)) {
  382. $(".popover").css("left", ($(".popover").position().left + _step.left) + "px");
  383. }
  384. else {
  385. $(".popover").css("left", _step.left);
  386. }
  387. }
  388. $(".popover-title").html(_step.title);
  389. _closeBtn.prependTo($(".popover-title"));
  390. if (_this.currentTour.shownStep > 1) {
  391. _prevBtn.appendTo($(".popover-content p"));
  392. }
  393. if (_this.currentTour.shownStep < _this.currentTour.steps.length && (_step.waitForAction == undefined || _step.waitForAction == false)) {
  394. _nextBtn.appendTo($(".popover-content p"));
  395. }
  396. // last step, mark tour/tutorial as done
  397. if ($.totalStorage !== undefined && _this.currentTour.shownStep == _this.currentTour.steps.length) {
  398. var _key = location.pathname;
  399. if (_this.currentTour.path !== undefined && _this.currentTour.path != "") {
  400. _key = _this.currentTour.path;
  401. }
  402. _key += "_" + _this.currentTour.name;
  403. var _history = $.totalStorage("jHueTourHistory");
  404. if (_history == null) {
  405. _history = {}
  406. }
  407. _history[_key] = true;
  408. $.totalStorage("jHueTourHistory", _history);
  409. }
  410. var _exposedElement = $((_step.expose != undefined && _step.expose != "" ? _step.expose : _arrowOn));
  411. if (_exposedElement.css("position") === undefined || _exposedElement.css("position") != "fixed") {
  412. _exposedElement.css("position", "relative");
  413. }
  414. _exposedElement.addClass("jHueTourExposed");
  415. }
  416. };
  417. $[pluginName] = function (options, stepNo) {
  418. var _el = $("body");
  419. if (!$("body").data('plugin_' + pluginName)) {
  420. $("body").data('plugin_' + pluginName, new Plugin(_el, options));
  421. }
  422. if (options === undefined) {
  423. return $("body").data('plugin_' + pluginName).availableTours();
  424. }
  425. if (typeof options == "string") {
  426. if (stepNo === undefined) {
  427. $("body").data('plugin_' + pluginName).performOperation(options);
  428. }
  429. else if ($.isNumeric(stepNo)) {
  430. $("body").data('plugin_' + pluginName).showTour(options, stepNo);
  431. }
  432. }
  433. else if ($.isNumeric(options)) {
  434. $("body").data('plugin_' + pluginName).showStep(options);
  435. }
  436. else {
  437. $("body").data('plugin_' + pluginName).addTours(options);
  438. }
  439. };
  440. })(jQuery, window, document);