smart-forms / js / tutorials2 / AddNewTutorial.ts

AddNewTutorial.ts in Smart Forms – when you need more than just a contact form trunk, at js/tutorials2/AddNewTutorial.ts

133 lines 6.9 KB

Raw Download Zip

1	import {SmartTutorial} from "./SmartTutorial/SmartTutorial";
2	import {HighlightAction} from "./SmartTutorial/Actions/HighlightAction";
3	import {Slide} from "./SmartTutorial/Slide";
4	import {TitleAction} from "./SmartTutorial/Actions/TitleAction";
5	import {DragAction} from "./SmartTutorial/Actions/DragAction";
6	import {ClickAction} from "./SmartTutorial/Actions/ClickAction";
7
8	declare let rnJQuery:JQueryStatic;
9	declare let smartFormsShowTutorial:string;
10	declare let ajaxurl:string;
11	export class AddNewTutorial{
12	private addNewInstance:any;
13	private $questionContainer:any;
14	private $container:JQuery;
15	constructor(){
16	}
17
18	public Initialize(addNewInstance:any,$container:JQuery){
19	this.$container=$container;
20	this.addNewInstance=addNewInstance;
21	/*if(smartFormsShowTutorial=="")
22	this.AskIfTutorialIsWanted();
23	else*/
24	this.OpenForm();
25
26	}
27
28	private OpenForm() {
29	rnJQuery('#rootContentDiv').removeClass('OpHidden');
30	rnJQuery('#loadingScreen').velocity({opacity:0},800,"easeOutExp",function(){rnJQuery('#loadingScreen').remove();});
31	this.$container.velocity({opacity:0},800,"easeOutExp",()=>{this.$container.remove();});
32	}
33
34	private AskIfTutorialIsWanted() {
35	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%;">
36	<span><strong>Hello =), </strong> is this your first time using Smart Forms?</span>
37	<div style="margin-top:20px;">
38	<button style="font-size:20px;padding: 10px 30px 10px 30px;" class="btn btn-success">Yes</button>
39	<button style="font-size:20px;padding: 10px 30px 10px 30px;" class="btn btn-danger">No</button>
40	</div>
41	</div>`);
42
43	this.$questionContainer.find('.btn-success').click(()=>{
44	this.$questionContainer.velocity({opacity:0},"easeOutExp",()=>{this.$questionContainer.empty();this.GenerateSecondQuestion();});
45	});
46
47	this.$questionContainer.find('.btn-danger').click(()=>{
48	rnJQuery.post(ajaxurl,{action:'smart_forms_skip_tutorial',nonce:saveNonce});
49	this.OpenForm();
50	});
51	this.$container.velocity({opacity:0},500,"easeInExp",()=>{
52	this.$container.remove();
53	rnJQuery('#loadingScreen').append(this.$questionContainer);
54	this.$questionContainer.velocity({opacity:1},500,"easeInExp");
55	});
56
57	}
58
59	private GenerateSecondQuestion() {
60	let $secondQuestion=rnJQuery(`<span><strong>Ah Welcome!</strong> can i give you a quick tutorial of the plugin?</span>
61	<div style="margin-top:20px;">
62	<button style="font-size:20px;padding: 10px 30px 10px 30px;" class="btn btn-success">Yes, show me</button>
63	<button style="font-size:20px;padding: 10px 30px 10px 30px;" class="btn btn-danger">No, thanks</button>
64	</div>
65	`);
66	this.$questionContainer.append($secondQuestion);
67	this.$questionContainer.velocity({opacity:1},"easeInExp");
68
69	this.$questionContainer.find('.btn-success').click(()=>{
70	this.$questionContainer.velocity({opacity:0},"easeOutExp",()=>{
71	this.$questionContainer.empty();
72	this.StartTutorialAccepted();
73	});
74	});
75
76	this.$questionContainer.find('.btn-danger').click(()=>{
77	rnJQuery.post(ajaxurl,{action:'smart_forms_skip_tutorial',nonce:saveNonce});
78	this.OpenForm();
79	});
80	}
81
82	private StartTutorialAccepted() {
83	this.$questionContainer.append(`<span>Alright <strong>Lets Start!</strong></span>`);
84	this.$questionContainer.velocity({opacity:1},"easeOutExp",()=>{
85	setTimeout(()=>{
86	this.StartTutorial();
87	},1000);
88	});
89
90	}
91
92	private StartTutorial() {
93	this.OpenForm();
94	let st:SmartTutorial=new SmartTutorial();
95	st.AddSlide(new Slide()
96	.AddAction(new HighlightAction(rnJQuery('#formSettingsScrollArea')).AddTooltip('Here are all the fields you can use',"right")));
97	st.AddSlide(new Slide()
98	.AddAction(new TitleAction('You just need to drag them'))
99	.AddAction(new HighlightAction(rnJQuery('#formSettingsScrollArea')))
100	.AddAction(new HighlightAction(rnJQuery('#newFormContainer')))
101	.AddAction(new DragAction(rnJQuery('#components .rednaotextinput'),rnJQuery('#redNaoElementlist'),()=>{
102	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>');
103	}))
104	);
105	st.AddSlide(new Slide()
106	.AddAction(new HighlightAction(rnJQuery('#components .redNaoSubmitButton')).AddTooltip("Remember to add a submit button, it is a draggable field just like the others","right"))
107	);
108	st.AddSlide(new Slide()
109	.AddAction(new HighlightAction(rnJQuery('#smartFormsAfterSubmitTab')))
110	.AddAction(new ClickAction(rnJQuery('#smartFormsAfterSubmitTab')).ClearAfterClick())
111	.AddAction(new HighlightAction(rnJQuery('#smartFormsAfterSubmitDiv')))
112	.AddAction(new HighlightAction(rnJQuery('#smartFormsAfterSubmitDiv tbody')).AddTooltip('Here you can configure what you want to happen after a form is submitted',"bottom"))
113	.AddAction(new HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(0)).AddTooltip('Send an email',"right"))
114	.AddAction(new HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(1)).AddTooltip('Redirect to another page (like a thank you page)',"right"))
115	.AddAction(new HighlightAction(rnJQuery('.sfAfterSubmitAction').eq(2)).AddTooltip('Show a message',"right"))
116	);
117	st.AddSlide(new Slide()
118	.AddAction(new HighlightAction(rnJQuery('#toplevel_page_smart_forms_menu li').eq(4))
119	.AddTooltip("And lastly, you can find a bunch of tutorials here","right")
120	.AfterExecute(()=>{rnJQuery('#toplevel_page_smart_forms_menu li').eq(4).css('background-color','darkred')})
121	.AfterClear(()=>{rnJQuery('#toplevel_page_smart_forms_menu li').eq(4).css('background-color','transparent')})
122	)
123	);
124	st.Start();
125	st.OnFinish(()=>{
126	rnJQuery('#smartFormsGeneralTab').click();
127	rnJQuery.post(ajaxurl,{action:'smart_forms_skip_tutorial',nonce:saveNonce});
128	})
129
130	}
131	}
132
133	(<any>window).SmartFormsAddNewTutorial=new AddNewTutorial();