");
_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
" +
"
" +
"
New step
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());
});