| 1 |
"use strict"; |
| 2 |
Object.defineProperty(exports, "__esModule", { value: true }); |
| 3 |
var SmartTutorial_1 = require("./SmartTutorial/SmartTutorial"); |
| 4 |
var HighlightAction_1 = require("./SmartTutorial/Actions/HighlightAction"); |
| 5 |
var Slide_1 = require("./SmartTutorial/Slide"); |
| 6 |
var TitleAction_1 = require("./SmartTutorial/Actions/TitleAction"); |
| 7 |
var DragAction_1 = require("./SmartTutorial/Actions/DragAction"); |
| 8 |
var ClickAction_1 = require("./SmartTutorial/Actions/ClickAction"); |
| 9 |
var AddNewTutorial = /** @class */ (function () { |
| 10 |
function AddNewTutorial() { |
| 11 |
} |
| 12 |
AddNewTutorial.prototype.Initialize = function (addNewInstance, $container) { |
| 13 |
this.$container = $container; |
| 14 |
this.addNewInstance = addNewInstance; |
| 15 |
/*if(smartFormsShowTutorial=="") |
| 16 |
this.AskIfTutorialIsWanted(); |
| 17 |
else*/ |
| 18 |
this.OpenForm(); |
| 19 |
}; |
| 20 |
AddNewTutorial.prototype.OpenForm = function () { |
| 21 |
var _this = this; |
| 22 |
rnJQuery('#rootContentDiv').removeClass('OpHidden'); |
| 23 |
rnJQuery('#loadingScreen').velocity({ opacity: 0 }, 800, "easeOutExp", function () { rnJQuery('#loadingScreen').remove(); }); |
| 24 |
this.$container.velocity({ opacity: 0 }, 800, "easeOutExp", function () { _this.$container.remove(); }); |
| 25 |
}; |
| 26 |
AddNewTutorial.prototype.AskIfTutorialIsWanted = function () { |
| 27 |
var _this = this; |
| 28 |
this.$questionContainer = rnJQuery("<div class=\"bootstrap-wrapper\" style=\"position: absolute;top:200px;text-align: center;opacity: 0;font-family: Verdana,serif;font-size: 25px;width:100%;\"> \n <span><strong>Hello =), </strong> is this your first time using Smart Forms?</span>\n <div style=\"margin-top:20px;\">\n <button style=\"font-size:20px;padding: 10px 30px 10px 30px;\" class=\"btn btn-success\">Yes</button>\n <button style=\"font-size:20px;padding: 10px 30px 10px 30px;\" class=\"btn btn-danger\">No</button>\n </div>\n </div>"); |
| 29 |
this.$questionContainer.find('.btn-success').click(function () { |
| 30 |
_this.$questionContainer.velocity({ opacity: 0 }, "easeOutExp", function () { _this.$questionContainer.empty(); _this.GenerateSecondQuestion(); }); |
| 31 |
}); |
| 32 |
this.$questionContainer.find('.btn-danger').click(function () { |
| 33 |
rnJQuery.post(ajaxurl, { action: 'smart_forms_skip_tutorial', nonce: saveNonce }); |
| 34 |
_this.OpenForm(); |
| 35 |
}); |
| 36 |
this.$container.velocity({ opacity: 0 }, 500, "easeInExp", function () { |
| 37 |
_this.$container.remove(); |
| 38 |
rnJQuery('#loadingScreen').append(_this.$questionContainer); |
| 39 |
_this.$questionContainer.velocity({ opacity: 1 }, 500, "easeInExp"); |
| 40 |
}); |
| 41 |
}; |
| 42 |
AddNewTutorial.prototype.GenerateSecondQuestion = function () { |
| 43 |
var _this = this; |
| 44 |
var $secondQuestion = rnJQuery("<span><strong>Ah Welcome!</strong> can i give you a quick tutorial of the plugin?</span>\n <div style=\"margin-top:20px;\">\n <button style=\"font-size:20px;padding: 10px 30px 10px 30px;\" class=\"btn btn-success\">Yes, show me</button>\n <button style=\"font-size:20px;padding: 10px 30px 10px 30px;\" class=\"btn btn-danger\">No, thanks</button>\n </div>\n "); |
| 45 |
this.$questionContainer.append($secondQuestion); |
| 46 |
this.$questionContainer.velocity({ opacity: 1 }, "easeInExp"); |
| 47 |
this.$questionContainer.find('.btn-success').click(function () { |
| 48 |
_this.$questionContainer.velocity({ opacity: 0 }, "easeOutExp", function () { |
| 49 |
_this.$questionContainer.empty(); |
| 50 |
_this.StartTutorialAccepted(); |
| 51 |
}); |
| 52 |
}); |
| 53 |
this.$questionContainer.find('.btn-danger').click(function () { |
| 54 |
rnJQuery.post(ajaxurl, { action: 'smart_forms_skip_tutorial', nonce: saveNonce }); |
| 55 |
_this.OpenForm(); |
| 56 |
}); |
| 57 |
}; |
| 58 |
AddNewTutorial.prototype.StartTutorialAccepted = function () { |
| 59 |
var _this = this; |
| 60 |
this.$questionContainer.append("<span>Alright <strong>Lets Start!</strong></span>"); |
| 61 |
this.$questionContainer.velocity({ opacity: 1 }, "easeOutExp", function () { |
| 62 |
setTimeout(function () { |
| 63 |
_this.StartTutorial(); |
| 64 |
}, 1000); |
| 65 |
}); |
| 66 |
}; |
| 67 |
AddNewTutorial.prototype.StartTutorial = function () { |
| 68 |
this.OpenForm(); |
| 69 |
var st = new SmartTutorial_1.SmartTutorial(); |
| 70 |
st.AddSlide(new Slide_1.Slide() |
| 71 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#formSettingsScrollArea')).AddTooltip('Here are all the fields you can use', "right"))); |
| 72 |
st.AddSlide(new Slide_1.Slide() |
| 73 |
.AddAction(new TitleAction_1.TitleAction('You just need to drag them')) |
| 74 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#formSettingsScrollArea'))) |
| 75 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#newFormContainer'))) |
| 76 |
.AddAction(new DragAction_1.DragAction(rnJQuery('#components .rednaotextinput'), rnJQuery('#redNaoElementlist'), function () { |
| 77 |
return rnJQuery('<div class="tutorialDraggedelement bootstrap-wrapper"><div class="form-horizontal span6 temp tempForm" style="opacity: .2;position:static !important;" >' + rnJQuery('#components .rednaotextinput').html() + '</div></div>'); |
| 78 |
}))); |
| 79 |
st.AddSlide(new Slide_1.Slide() |
| 80 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#components .redNaoSubmitButton')).AddTooltip("Remember to add a submit button, it is a draggable field just like the others", "right"))); |
| 81 |
st.AddSlide(new Slide_1.Slide() |
| 82 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#smartFormsAfterSubmitTab'))) |
| 83 |
.AddAction(new ClickAction_1.ClickAction(rnJQuery('#smartFormsAfterSubmitTab')).ClearAfterClick()) |
| 84 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#smartFormsAfterSubmitDiv'))) |
| 85 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#smartFormsAfterSubmitDiv tbody')).AddTooltip('Here you can configure what you want to happen after a form is submitted', "bottom")) |
| 86 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(0)).AddTooltip('Send an email', "right")) |
| 87 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(1)).AddTooltip('Redirect to another page (like a thank you page)', "right")) |
| 88 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(2)).AddTooltip('Show a message', "right"))); |
| 89 |
st.AddSlide(new Slide_1.Slide() |
| 90 |
.AddAction(new HighlightAction_1.HighlightAction(rnJQuery('#toplevel_page_smart_forms_menu li').eq(4)) |
| 91 |
.AddTooltip("And lastly, you can find a bunch of tutorials here", "right") |
| 92 |
.AfterExecute(function () { rnJQuery('#toplevel_page_smart_forms_menu li').eq(4).css('background-color', 'darkred'); }) |
| 93 |
.AfterClear(function () { rnJQuery('#toplevel_page_smart_forms_menu li').eq(4).css('background-color', 'transparent'); }))); |
| 94 |
st.Start(); |
| 95 |
st.OnFinish(function () { |
| 96 |
rnJQuery('#smartFormsGeneralTab').click(); |
| 97 |
rnJQuery.post(ajaxurl, { action: 'smart_forms_skip_tutorial', nonce: saveNonce }); |
| 98 |
}); |
| 99 |
}; |
| 100 |
return AddNewTutorial; |
| 101 |
}()); |
| 102 |
exports.AddNewTutorial = AddNewTutorial; |
| 103 |
window.SmartFormsAddNewTutorial = new AddNewTutorial(); |
| 104 |
//# sourceMappingURL=AddNewTutorial.js.map |
