$("").appendTo($("head")); var _tbTour = { name: "", desc: "", path: location.pathname, steps: [] }; var _origTbTour = _tbTour; var _tb = $("
"); _tb.addClass("tourBuilder"); _tb.height($(window).height()); _tb.appendTo($("body")); var _tbCog = $("
").attr("id", "tbCog").html('').addClass("jHueTourBadge").css("top", "64px"); _tbCog.on("click", function () { _tb.show(); }); _tbCog.appendTo($("body")); var _html = "

General

" + "" + "" + "
ID:
Name:
Path:
" + "

New step

" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "
Visit URL:
 
Arrow on:
Expose:
Title:
Content:
Placement:
Left:Offset Abs
Top:Offset Abs
On shown:
Wait:
 Show Add to tour

Steps

" + "
" + "

JSON

" + "
Load from JSON

" + "


"; _tb.html(_html); var _managerHtml = ""; $(_managerHtml).appendTo($("body")); $("span[rel='tooltip']").tooltip({ placement: "left" }); _tb.find("input").on("change", function () { updateTour(); }); $("textarea").on("focus", function () { var $this = $(this); $this.select(); // Work around Chrome's little problem $this.mouseup(function () { // Prevent further mouseup intervention $this.unbind("mouseup"); return false; }); }); var _tbTourIsEditing = -1; var _tbTourIsStepEditing = -1; function updateTour() { _tbTour.name = $("#tbName").val(); _tbTour.desc = $("#tbDesc").val(); _tbTour.path = $("#tbPath").val(); if ($("#tbNewExpose").val() == "") { $("#tbNewExpose").val($("#tbNewArrow").val()); } function fillItem(item) { $("#tbNewURL").val(item.visitUrl); $("#tbNewArrow").val(item.arrowOn); $("#tbNewExpose").val(item.expose); $("#tbNewTitle").val(item.title); $("#tbNewContent").val(item.content); $("#tbNewPlacement").val(item.placement); $("#tbNewShown").val(item.onShown); if (item.waitForAction == true){ $("#tbNewWait").prop("checked", true); } else { $("#tbNewWait").prop("checked", false); } $("#tbNewOffsetTop").val(""); $("#tbNewAbsTop").val(""); $("#tbNewOffsetLeft").val(""); $("#tbNewAbsLeft").val(""); if (item.left != undefined && item.left != "") { if ($.isNumeric(item.left)) { $("#tbNewOffsetLeft").val(item.left); } else { $("#tbNewAbsLeft").val(item.left.substring(0, item.left.length - 2)); } } if (item.top != undefined && item.top != "") { if ($.isNumeric(item.top)) { $("#tbNewOffsetTop").val(item.top); } else { $("#tbNewAbsTop").val(item.top.substring(0, item.top.length - 2)); } } } $("#tbSteps").empty(); $(_tbTour.steps).each(function (cnt, item) { var _trow = $("
").html(" " + (item.visitUrl!="" && item.visitUrl!=undefined?"URL: " + item.visitUrl:"Title: "+item.title)); var _trowdelete = $(""); _trowdelete.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { _tbTour.steps.splice(cnt, 1); updateTour(); }); _trowdelete.prependTo(_trow); var _trowcopy = $(""); _trowcopy.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { fillItem(item); }); _trowcopy.prependTo(_trow); var _trowedit = $(""); _trowedit.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { fillItem(item); _tbTourIsStepEditing = cnt; $("#tbNewAdd").text("Update step"); }); _trowedit.prependTo(_trow); var _trowup = $(""); _trowup.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { var _newPos = cnt - 1; if (cnt == 0) { _newPos = _tbTour.steps.length - 1; } _tbTour.steps.move(cnt, _newPos); updateTour(); }); _trowup.prependTo(_trow); var _trowdown = $(""); _trowdown.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { var _newPos = cnt + 1; if (cnt == _tbTour.steps.length - 1) { _newPos = 0; } _tbTour.steps.move(cnt, _newPos); updateTour(); }); _trowdown.prependTo(_trow); _trow.appendTo($("#tbSteps")); }); $("#tbPreview").val(JSON.stringify(_tbTour)); $.totalStorage("jHueTourBuilderTemp", _tbTour); } $("#tbLoadJson").on("click", function () { _tbTourIsStepEditing = -1; try { _tbTour = JSON.parse($.trim($("#tbPreview").val())); $("#tbName").val(_tbTour.name); $("#tbDesc").val(_tbTour.desc); $("#tbPath").val(_tbTour.path); updateTour(); } catch (exception) { alert("It seems you don't eat JSON for breakfast:" + exception) } }); $("#tbLoadToursJson").on("click", function () { _tbTourIsEditing = -1; _tbTourIsStepEditing = -1; try { var _paste = $.trim($("#tbAvailableContent").val()); if (_paste.indexOf("$.jHueTour") > -1){ _paste = _paste.substr(11); } if (_paste[_paste.length - 1] == ";"){ _paste = _paste.substring(0, _paste.length - 2); } var _trz = JSON.parse(_paste); $.totalStorage("jHueTourBuilderTours", _trz.tours); $("#tbManageTours").click(); } catch (exception) { alert("It seems you don't eat JSON for breakfast:" + exception) } }); $("#tbNewShow").on("click", function () { $(".popover").remove(); _tbTourIsEditing = -1; _tbTourIsStepEditing = -1; $(".jHueTourExposed").removeClass("jHueTourExposed").css("position", ""); $("#jHueTourMask").width($(document).width()).height($(document).height()).show(); var _closeBtn = $(""); _closeBtn.addClass("btn").addClass("btn-mini").html('').css("float", "right").css("margin-top", "-4px").css("margin-right", "-6px"); _closeBtn.click(function () { $(".popover").remove(); $(".jHueTourExposed").removeClass("jHueTourExposed"); $("#jHueTourMask").hide(); }); if ($($("#tbNewArrow").val()).length > 0) { $($("#tbNewArrow").val()).popover('destroy').popover({ title: $("#tbNewTitle").val(), content: $("#tbNewContent").val() + "
", html: true, trigger: 'manual', placement: $("#tbNewPlacement").val() }).popover('show'); if ($("#tbNewOffsetTop").val() != "") { $(".popover").css("top", ($(".popover").position().top + ($("#tbNewOffsetTop").val() * 1)) + "px"); } if ($("#tbNewAbsTop").val() != "") { $(".popover").css("top", $("#tbNewAbsTop").val() + "px"); } if ($("#tbNewOffsetLeft").val() != "") { $(".popover").css("left", ($(".popover").position().left + ($("#tbNewOffsetLeft").val() * 1)) + "px"); } if ($("#tbNewAbsLeft").val() != "") { $(".popover").css("left", $("#tbNewAbsLeft").val() + "px"); } $(".popover-title").html($("#tbNewTitle").val()); _closeBtn.prependTo($(".popover-title")); $("
").appendTo($(".popover-content p")); } var _exposedElement = $($("#tbNewExpose").val()); if (_exposedElement.css("position") === undefined || _exposedElement.css("position") != "fixed") { _exposedElement.css("position", "relative"); } _exposedElement.addClass("jHueTourExposed"); if ($("#tbNewShown").val() != "") { window.setTimeout($("#tbNewShown").val(), 10); } }); Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { var k = new_index - this.length; while ((k--) + 1) { this.push(undefined); } } this.splice(new_index, 0, this.splice(old_index, 1)[0]); return this; }; $("#tbNewAdd").on("click", function () { var _newStep = { arrowOn: $("#tbNewArrow").val(), expose: $("#tbNewExpose").val(), title: $("#tbNewTitle").val(), content: $("#tbNewContent").val(), placement: $("#tbNewPlacement").val(), onShown: $("#tbNewShown").val(), waitForAction: $("#tbNewWait").is(":checked") }; if ($("#tbNewURL").val() != ""){ _newStep = { visitUrl: $("#tbNewURL").val() } } if ($("#tbNewOffsetTop").val() != "") { _newStep.top = $("#tbNewOffsetTop").val() * 1; } if ($("#tbNewAbsTop").val() != "") { _newStep.top = $("#tbNewAbsTop").val() + "px"; } if ($("#tbNewOffsetLeft").val() != "") { _newStep.left = $("#tbNewOffsetLeft").val() * 1; } if ($("#tbNewAbsLeft").val() != "") { _newStep.left = $("#tbNewAbsLeft").val() + "px"; } if (_tbTourIsStepEditing > -1) { _tbTour.steps[_tbTourIsStepEditing] = _newStep; _tbTourIsStepEditing = -1; $("#tbNewAdd").text("Add to tour"); } else { _tbTour.steps.push(_newStep); } updateTour(); $(".popover").remove(); $(".jHueTourExposed").removeClass("jHueTourExposed"); $("#jHueTourMask").hide(); $("#tbNewURL").val(""); $("#tbNewArrow").val(""); $("#tbNewExpose").val(""); $("#tbNewTitle").val(""); $("#tbNewContent").val(""); $("#tbNewShown").val(""); $("#tbNewWait").prop("checked", false); $("#tbNewPlacement").val(""); $("#tbNewOffsetTop").val(""); $("#tbNewAbsTop").val(""); $("#tbNewOffsetLeft").val(""); $("#tbNewAbsLeft").val(""); }); $("#tbTryTour").on("click", function () { $.jHueTour("clear"); $.jHueTour({ tours: [_tbTour]}); _tb.hide(); $.jHueTour("play"); }); $("#tbClearCache").on("click", function () { $.totalStorage("jHueTourBuilderTemp", null); _tbTour = _origTbTour; $("#tbName").val(_tbTour.name); $("#tbDesc").val(_tbTour.desc); $("#tbPath").val(_tbTour.path); updateTour(); }); $("#tbAddTour").on("click", function () { var _tbStoredTours = []; if ($.totalStorage("jHueTourBuilderTours") != null){ _tbStoredTours = $.totalStorage("jHueTourBuilderTours"); } if (_tbTourIsEditing > -1) { _tbStoredTours[_tbTourIsEditing] = _tbTour; _tbTourIsEditing = -1; $("#tbAddTour").html(""); } else { _tbStoredTours.push(_tbTour); } $.totalStorage("jHueTourBuilderTours", _tbStoredTours); $("#tbClearCache").click(); }); $("#tbManageTours").on("click", function () { $("#tbTourList").empty(); $($.totalStorage("jHueTourBuilderTours")).each(function (cnt, item) { var _trow = $("
").html(" Name: " + item.name + ", Desc: "+ item.desc + ", Path: "+ item.path); var _trowdelete = $(""); _trowdelete.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { var _tmpTrz = $.totalStorage("jHueTourBuilderTours"); _tmpTrz.splice(cnt, 1); $.totalStorage("jHueTourBuilderTours", _tmpTrz); $("#tbManageTours").click(); }); _trowdelete.prependTo(_trow); var _trowcopy = $(""); _trowcopy.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { $.totalStorage("jHueTourBuilderTemp", null); _tbTour = item; $("#tbName").val(_tbTour.name); $("#tbDesc").val(_tbTour.desc); $("#tbPath").val(_tbTour.path); updateTour(); $("#tbToursModal").modal("hide"); }); _trowcopy.prependTo(_trow); var _trowedit = $(""); _trowedit.addClass("btn").addClass("btn-mini").html("").css("margin", "3px").on("click", function () { $.totalStorage("jHueTourBuilderTemp", null); _tbTour = item; $("#tbName").val(_tbTour.name); $("#tbDesc").val(_tbTour.desc); $("#tbPath").val(_tbTour.path); updateTour(); _tbTourIsEditing = cnt; $("#tbAddTour").html(""); $("#tbToursModal").modal("hide"); }); _trowedit.prependTo(_trow); _trow.appendTo($("#tbTourList")); }); var _trz = { tours: $.totalStorage("jHueTourBuilderTours") }; $("#tbAvailableContent").val("$.jHueTour(" + JSON.stringify(_trz) + ");"); $("#tbToursModal").modal("show"); }); var _changeSide = $(""); _changeSide.addClass("btn").addClass("btn-mini").addClass("pull-right"); _changeSide.on("click", function (e) { e.preventDefault(); e.stopImmediatePropagation(); if (_tb.css("left") != "0px") { _tb.css("left", "0"); _tb.css("right", "auto"); $(this).html(""); } else { _tb.css("right", "0"); _tb.css("left", "auto"); $(this).html(""); } }); _changeSide.html(""); _changeSide.prependTo(_tb); var _hideTb = $(""); _hideTb.addClass("btn").addClass("btn-mini").addClass("pull-right").css("margin-left", "4px"); _hideTb.on("click", function (e) { e.preventDefault(); e.stopImmediatePropagation(); _tb.hide(); }); _hideTb.html(""); _hideTb.prependTo(_tb); // preload if ($.totalStorage("jHueTourBuilderTemp") != null){ _tbTour = $.totalStorage("jHueTourBuilderTemp"); $("#tbName").val(_tbTour.name); $("#tbDesc").val(_tbTour.desc); $("#tbPath").val(_tbTour.path); updateTour(); } if ($.totalStorage("jHueTourBuilderTours") == null){ $.totalStorage("jHueTourBuilderTours", []); } else { $($.totalStorage("jHueTourBuilderTours")).each(function (cnt, item) { if (item.name == _tbTour.name && item.path == _tbTour.path){ _tbTourIsEditing = cnt; $("#tbAddTour").html(""); } }); } $(window).resize(function () { _tb.height($(window).height()); });