15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Auto form detection
64 |
65 |
66 | ....
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
82 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/docs/browser-autofill.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Edit previous submitted user answers
64 |
65 |
66 | Click on a user response to edit it.
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
103 |
104 |
105 |
106 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/docs/conditional-flow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Conditional flow
64 |
65 |
66 | Using attr: cf-conditional to make conditional form flows. For documentation and more info see Wiki
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
232 |
233 |
234 |
235 |
236 |
239 |
240 |
241 |
242 |
271 |
272 |
273 |
274 |
--------------------------------------------------------------------------------
/docs/empty-form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 |
40 |
41 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
60 |
63 |
64 | Test empty form element
65 |
66 |
67 | Check dev console.
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
78 |
79 |
80 |
81 |
82 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/docs/examples.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 |
40 |
41 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
60 |
63 |
64 | Examples overview
65 |
66 |
67 | On the right you will find a list of examples.
68 |
69 |
70 |
71 |
72 |
81 |
82 |
83 |
84 |
85 |
86 |
97 |
98 |
99 |
100 |
101 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/docs/exit-message.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
31 |
55 |
56 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
72 |
73 |
74 |
75 |
78 |
79 | Add an exit message
80 |
81 |
82 | And style it like a champ
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
96 |
97 |
98 |
99 |
100 |
103 |
104 |
105 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/docs/feature-cf-placeholder.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Custom placeholder text
64 |
65 |
66 | cf-input-placeholder="Place holder text.."
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
82 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/docs/files/formless.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "preventAutoAppend": true,
4 | "submitCallback": "window.onFormlessSubmited"
5 | },
6 | "tags": [
7 | {
8 | "tag": "input",
9 | "type": "text",
10 | "value": "Prefilled value here",
11 | "cf-questions": "Input w. prefilled value"
12 | },
13 | {
14 | "tag": "select",
15 | "cf-input-placeholder": "Choose one of the above",
16 | "multiple": "multiple",
17 | "cf-questions": "Choose multiple of the elements from the list",
18 | "children":[
19 | {
20 | "tag": "option",
21 | "name": "option-dropdown-1",
22 | "cf-label": "option-1",
23 | "value": "-1"
24 | },
25 | {
26 | "tag": "option",
27 | "name": "option-dropdown-1",
28 | "cf-label": "option-2",
29 | "value": "-2"
30 | }
31 | ]
32 | },
33 | {
34 | "tag": "fieldset",
35 | "type": "Radio buttons",
36 | "cf-input-placeholder": "Choose one of the above",
37 | "cf-questions": "Choose one of the radioss",
38 | "children":[
39 | {
40 | "tag": "input",
41 | "type": "radio",
42 | "name": "radio-buttons-1",
43 | "cf-label": "radio-1",
44 | "checked": "checked"
45 | },
46 | {
47 | "tag": "input",
48 | "type": "radio",
49 | "name": "radio-buttons-1",
50 | "cf-label": "radio-2"
51 | }
52 | ]
53 | },
54 | {
55 | "tag": "fieldset",
56 | "type": "Checkboxes",
57 | "cf-input-placeholder": "Choose above",
58 | "cf-questions": "Choose some checkboxes",
59 | "children":[
60 | {
61 | "tag": "input",
62 | "type": "checkbox",
63 | "name": "checkboxes-buttons-1",
64 | "cf-label": "checkbox-1",
65 | "checked": "checked"
66 | },
67 | {
68 | "tag": "input",
69 | "type": "checkbox",
70 | "name": "checkboxes-buttons-1",
71 | "cf-label": "checkbox-2"
72 | }
73 | ]
74 | },
75 | {
76 | "tag": "input",
77 | "type": "password",
78 | "cf-input-placeholder": "Password field",
79 | "cf-questions": "Write a password"
80 | },
81 | {
82 | "tag": "input",
83 | "type": "text",
84 | "pattern": ".{5,10}",
85 | "cf-input-placeholder": "Input w. pattern attribute",
86 | "cf-error": "No less than 5 and no more than 10 characters",
87 | "cf-questions": "Keep between 5-10 characters"
88 | },
89 | {
90 | "tag": "input",
91 | "type": "text",
92 | "required": "required",
93 | "cf-questions": "This field is required (attribute)",
94 | "cf-error": "Please write something"
95 | },
96 | {
97 | "tag": "input",
98 | "type": "text",
99 | "required": "required",
100 | "cf-questions": "This field uses window.testValidation",
101 | "cf-validation": "window.testValidation",
102 | "cf-error": "Check the window.testValidation method"
103 | }
104 | ]
105 | }
--------------------------------------------------------------------------------
/docs/formless.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Formless form
64 |
65 |
66 | A Conversational Form generated from JSON, see file formless.json
67 | Options and tag attributes are 1:1 with a form tag.
68 | Example here also mimics calls to a server and injecting of server created tags.
69 | This can be used to validate and create custom flows Server Side.
70 |
71 |
72 |
73 |
74 |
75 |
76 |
No form, it's all JS
77 |
78 |
79 |
80 |
81 |
84 |
85 |
86 |
87 |
88 |
89 |
201 |
202 |
203 |
--------------------------------------------------------------------------------
/docs/image-answers.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
42 |
43 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
59 |
60 |
61 |
62 |
65 |
66 | Init Conversational Form with jQuery
67 |
68 |
69 | jQuery plugin
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
83 |
84 |
85 |
86 |
87 |
90 |
91 |
92 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/docs/manual-start.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Manual start the conversation
64 |
65 |
66 | Delay the Conversational Form start.
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
82 |
85 |
86 |
87 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
/docs/multi-form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
70 |
94 |
95 |
96 |
97 |
99 |
100 |
103 |
104 |
105 |
106 |
107 |
108 |
111 |
112 |
113 |
114 |
117 |
118 | Multiple forms
119 |
120 |
121 | How to have multiple forms running on the same page
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
132 |
133 |
137 |
138 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
--------------------------------------------------------------------------------
/docs/overwrite-dictionary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Overwrite dictionary when instantiating Conversational Form
64 |
65 |
66 | ....
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
84 |
85 |
86 |
87 |
88 |
91 |
92 |
93 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/docs/scripts/conversational-form-docs.min.js:
--------------------------------------------------------------------------------
1 | var ConversationalForm=function(){function t(){}return t}(),ConversationalFormDocs=function(){function t(){this.introTimer=0,this.el=document.querySelector("main.content"),null!==document.getElementById("conversational-form-development")&&this.el.classList.add("development"),this.h1writer=new H1Writer({el:document.getElementById("writer")}),"none"!=window.getComputedStyle(document.getElementById("small-screen-menu")).getPropertyValue("display")?this.introFlow1():this.introFlow2()}return t.prototype.introFlow1=function(){var t=this,e=null!==document.getElementById("conversational-form-development");this.introTimer=setTimeout(function(){t.toggleMenuState(),t.h1writer.start(),t.introTimer=setTimeout(function(){t.toggleConversation()},e?0:2500)},e?0:500)},t.prototype.introFlow2=function(){var t=this,e=null!==document.getElementById("conversational-form-development");this.h1writer.start(),this.introTimer=setTimeout(function(){document.getElementById("info").classList.add("show"),t.introTimer=setTimeout(function(){document.querySelector("section[role='form']").classList.add("show"),document.getElementById("cf-toggle-btn").classList.add("show"),t.introTimer=setTimeout(function(){t.toggleConversation()},e?0:1500)},e?0:3e3)},e?0:1500)},t.prototype.toggleMenuState=function(){return this.el.classList.toggle("menu-toggle",!this.el.classList.contains("menu-toggle"))&&this.el.classList.remove("cf-toggle"),!1},t.prototype.toggleConversation=function(){var t=this;return clearTimeout(this.introTimer),this.el.classList.contains("cf-toggle")?this.el.classList.remove("cf-toggle"):(this.cf||(this.cf=new window.cf.ConversationalForm({formEl:document.getElementById("cf-form"),context:document.getElementById("cf-context"),robotImage:"data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzY0LjAwMDAwMCwgLTUzMC4wMDAwMDApIiBmaWxsPSIjMjIyMjIyIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUzLjAwMDAwMCwgNTE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHJlY3QgeD0iMTEiIHk9IjExIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+",userImage:"data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjAgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM3MS4wMDAwMDAsIC02MTAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyNzQuMDAwMDAwLCA1OTkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjEwNyAxMSAxMTcgMjcgOTcgMjciPjwvcG9seWdvbj4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+",submitCallback:function(){},flowStepCallback:function(e,s,i){if(e.tag.domElement)if("repeat"==e.tag.domElement.getAttribute("name"))location.reload();else if("submit-form"==e.tag.domElement.getAttribute("name")){var n=new XMLHttpRequest;n.addEventListener("load",function(){t.cf.addRobotChatResponse("We received your submission 🙌"),s()}),n.open("POST",document.getElementById("cf-form").getAttribute("action")),n.setRequestHeader("accept","application/javascript"),n.setRequestHeader("Content-Type","application/json"),n.send(JSON.stringify(t.cf.getFormData(!0)))}else s();else s()}})),this.cf.focus(),setTimeout(function(){t.el.classList.remove("menu-toggle"),t.el.classList.add("cf-toggle")},10)),!1},t.start=function(){t.instance||(window.conversationalFormDocs=new t)},t}(),H1Writer=function(){function t(t){this.progress=0,this.progressTarget=0,this.str="",this.strs=["...","TBD"],this.step=0,this.el=t.el,this.strs[1]=this.el.innerHTML,this.el.innerHTML="",this.el.classList.add("show")}return t.prototype.start=function(){this.progress=0,this.progressTarget=1,this.str=this.strs[this.step],this.render()},t.prototype.nextStep=function(){0==this.progressTarget&&this.step++,this.str=this.strs[this.step],this.progressTarget=0==this.progressTarget?1:0,this.render()},t.prototype.render=function(){var t=this;this.progress+=(this.progressTarget-this.progress)*(0==this.step?.15:.09);var e=this.str.substr(0,Math.round(this.progress*this.str.length));this.el.innerHTML=e,Math.abs(this.progress-this.progressTarget)<=.01?(cancelAnimationFrame(this.rAF),this.step<1&&setTimeout(function(){t.nextStep()},500)):this.rAF=window.requestAnimationFrame(function(){return t.render()})},t}();"complete"==document.readyState?ConversationalFormDocs.start():window.addEventListener("load",function(){ConversationalFormDocs.start()},!1);
--------------------------------------------------------------------------------
/docs/scripts/conversational-form-examples.min.js:
--------------------------------------------------------------------------------
1 | var ConversationalFormExamples=function(){function t(){this.introTimer=0,this.hasCalledExamplesInit=!1,this.el=document.querySelector("main.content"),null!==document.getElementById("conversational-form-development")&&this.el.classList.add("development"),this.h1writer=new H1ExamplesWriter({el:document.getElementById("writer")}),"none"!=window.getComputedStyle(document.getElementById("small-screen-menu")).getPropertyValue("display")?this.introFlow1():this.introFlow2()}return t.prototype.introFlow1=function(){var t=this,e=null!==document.getElementById("conversational-form-development");this.introTimer=setTimeout(function(){t.toggleMenuState(),t.h1writer.start(),t.introTimer=setTimeout(function(){document.getElementById("examples-script").getAttribute("manual-init")||t.toggleConversation()},e?0:2500)},e?0:500)},t.prototype.introFlow2=function(){var t=this,e=null!==document.getElementById("conversational-form-development");this.h1writer.start(),this.introTimer=setTimeout(function(){document.getElementById("info").classList.add("show"),t.introTimer=setTimeout(function(){document.querySelector("section[role='form']").classList.add("show"),document.getElementById("cf-toggle-btn").classList.add("show"),t.introTimer=setTimeout(function(){document.getElementById("examples-script").getAttribute("manual-init")||t.toggleConversation()},e?0:1500)},e?0:3e3)},e?0:1500)},t.prototype.toggleMenuState=function(){return this.el.classList.toggle("menu-toggle",!this.el.classList.contains("menu-toggle"))&&this.el.classList.remove("cf-toggle"),!1},t.prototype.toggleConversation=function(){var t=this;return!this.hasCalledExamplesInit&&window.initExample&&(window.initExample(),this.hasCalledExamplesInit=!0),clearTimeout(this.introTimer),this.el.classList.contains("cf-toggle")?this.el.classList.remove("cf-toggle"):setTimeout(function(){t.el.classList.remove("menu-toggle"),t.el.classList.add("cf-toggle")},10),!1},t.start=function(){t.instance||(window.conversationalFormExamples=new t)},t}(),H1ExamplesWriter=function(){function t(t){this.progress=0,this.progressTarget=0,this.str="",this.strs=["...","TBD"],this.step=0,this.el=t.el,this.strs[1]=this.el.innerHTML,this.el.innerHTML="",this.el.classList.add("show")}return t.prototype.start=function(){this.progress=0,this.progressTarget=1,this.str=this.strs[this.step],this.render()},t.prototype.nextStep=function(){0==this.progressTarget&&this.step++,this.str=this.strs[this.step],this.progressTarget=0==this.progressTarget?1:0,this.render()},t.prototype.render=function(){var t=this;this.progress+=(this.progressTarget-this.progress)*(0==this.step?.15:.09);var e=this.str.substr(0,Math.round(this.progress*this.str.length));this.el.innerHTML=e,Math.abs(this.progress-this.progressTarget)<=.01?(cancelAnimationFrame(this.rAF),this.step<1&&setTimeout(function(){t.nextStep()},500)):this.rAF=window.requestAnimationFrame(function(){return t.render()})},t}();"complete"==document.readyState?ConversationalFormExamples.start():window.addEventListener("load",function(){ConversationalFormExamples.start()},!1);
--------------------------------------------------------------------------------
/docs/styles/cf-theming.min.css:
--------------------------------------------------------------------------------
1 | main.content .conversational-form{font-family:Helvetica Neue,Helvetica;font-style:normal}main.content .conversational-form cf-chat-response{padding-top:0;min-width:200px}@media only screen and (max-width:769px){main.content .conversational-form cf-chat-response{max-width:83%}}main.content .conversational-form cf-chat-response text{font-weight:900;min-height:42px;font-size:13px}main.content .conversational-form cf-chat-response thumb{background-color:#ebebeb;height:42px;width:42px}main.content .conversational-form cf-chat-response:not(:last-of-type){margin-bottom:10px}main.content .conversational-form cf-chat-response.robot{padding-left:48px}main.content .conversational-form cf-chat-response.robot text{background:#ebebeb;color:#222;border-radius:4px 20px 20px 20px}main.content .conversational-form cf-chat-response.robot thumb{background-color:#ebebeb;background-size:20px 20px;background-repeat:no-repeat}main.content .conversational-form cf-chat-response.user{padding-right:48px}main.content .conversational-form cf-chat-response.user text{background:#222;color:#fff;border-radius:20px 4px 20px 20px}main.content .conversational-form cf-chat-response.user thumb{background-color:#222;background-size:20px 16px;background-repeat:no-repeat;background-position:11px 12px}main.content .conversational-form cf-input input,main.content .conversational-form cf-input textarea{border-radius:40px;min-height:57px;font-size:14px;padding:19px 60px 19px 40px;height:56px;color:rgba(34,34,34,.4);font-weight:900}@media only screen and (min-width:769px){main.content .conversational-form cf-input input,main.content .conversational-form cf-input textarea{font-size:16px}}main.content .conversational-form cf-input input:not(:focus),main.content .conversational-form cf-input textarea:not(:focus){box-shadow:0 0 1px rgba(58,58,58,.5)}main.content .conversational-form cf-input-button{background:#222;height:42px;width:42px;border:none}main.content .conversational-form cf-input-button .cf-icon-progress{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTggMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM3Mi4wMDAwMDAsIC05NDUuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTEuMDAwMDAwLCA5MjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MjIuMDAwMDAwLCAxOS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4xNDAzNTA4OCwyLjEwOTE4MTE0IEw4LjE0MDM1MDg4LDE2LjA4MDkzODUiIGlkPSJMaW5lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuOTkzODAzLCA4LjA2ODc0NSkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTcuOTkzODAzLCAtOC4wNjg3NDUpICIgcG9pbnRzPSIyLjYyNTkxMzI4IDEzLjQ4Njk1OCAyLjYyNTkxMzI4IDIuNjUwNTMxMjEgMi42MjU5MTMyOCAyLjY1MDUzMTIxIDEzLjM2MTY5MjEgMi42NTA1MzEyMSI+PC9wb2x5bGluZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");background-size:18px 19px}main.content .conversational-form cf-input-button.loading:after{border:2px solid #1ed97b}main.content .conversational-form .cf-button{color:#222;border-color:#ddd;transition:border-color .75s cubic-bezier(.215,.61,.355,1),color .75s cubic-bezier(.215,.61,.355,1);background:0 0!important;font-weight:900;line-height:1.2}main.content .conversational-form .cf-button>div{padding:14px 24px}main.content .conversational-form .cf-button cf-radio{background:rgba(34,34,34,.2)}main.content .conversational-form .cf-button.highlight,main.content .conversational-form .cf-button.selected,main.content .conversational-form .cf-button:focus,main.content .conversational-form .cf-button:hover,main.content .conversational-form .cf-button[checked=checked]{border-color:#6f6f6f;color:#595959}main.content .conversational-form .cf-button.highlight cf-radio,main.content .conversational-form .cf-button.selected cf-radio,main.content .conversational-form .cf-button:focus cf-radio,main.content .conversational-form .cf-button:hover cf-radio,main.content .conversational-form .cf-button[checked=checked] cf-radio{background:#222}main.content .conversational-form cf-list-button:after{background-image:none;background:#000;width:5px;height:5px;border-radius:50%}
--------------------------------------------------------------------------------
/docs/styles/conversational-form-docs.min.css:
--------------------------------------------------------------------------------
1 | .form-outer{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex}.form-outer>#form{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end}.form-outer>h2{position:absolute;bottom:20px;left:20px}a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,td,th{text-align:left;font-weight:400;vertical-align:middle}a img{border:none}html{overflow-y:auto}body{background:#222}body,html{position:relative;width:100%;height:100%;padding:0;margin:0}main.content{font-family:Helvetica Neue,Helvetica;font-style:normal;-webkit-font-smoothing:antialiased;min-height:100%;height:auto;width:100%;position:relative;overflow:hidden;display:block}main.content *{-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main.content *,main.content :after,main.content :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0}main.content a,main.content a:active,main.content a:focus{color:currentColor}@media only screen and (min-width:769px){main.content .switch-btn#cf-toggle-btn{position:absolute;top:40px;z-index:500;right:32px;-webkit-transform:translateX(400px);-moz-transform:translateX(400px);-o-transform:translateX(400px);-ms-transform:translateX(400px);transform:translateX(400px);will-change:transform;-webkit-transition:-webkit-transform 375ms cubic-bezier(.215,.61,.355,1);-moz-transition:-moz-transform 375ms cubic-bezier(.215,.61,.355,1);-o-transition:-o-transform 375ms cubic-bezier(.215,.61,.355,1);-ms-transition:-ms-transform 375ms cubic-bezier(.215,.61,.355,1);transition:transform 375ms cubic-bezier(.215,.61,.355,1)}main.content .switch-btn#cf-toggle-btn.show{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@media only screen and (max-width:769px){main.content .switch-btn#cf-toggle-btn{display:none}}main.content.cf-toggle:not(.menu-toggle) section[role=cf-context]{pointer-events:auto;opacity:1}main.content section[role=cf-context]{position:absolute;z-index:250;pointer-events:none;overflow:hidden;height:100%;width:100%;top:0;left:0;opacity:0;will-change:opacity;transition:opacity 375ms cubic-bezier(.215,.61,.355,1)}@media only screen and (min-width:769px){main.content section[role=cf-context]{width:50%;z-index:499;right:0;left:auto}}main.content section[role=cf-context] .close-btn{position:absolute;z-index:500;right:24px;top:18px;width:24px;height:24px}main.content section[role=cf-context] .close-btn svg{width:100%;height:100%}main.content section[role=form]{position:absolute;background:#fff;top:0;left:0;z-index:50;height:100%;width:100%;padding:27px;padding-top:88px;display:flex;flex-flow:row;justify-content:flex-start}@media only screen and (min-width:769px){main.content section[role=form]{padding:37px 40px;width:50vw;z-index:250;right:0;left:auto;will-change:opacity;transition:opacity 375ms cubic-bezier(.215,.61,.355,1);opacity:0}main.content section[role=form].show{opacity:1}}main.content section[role=form] .close-btn{position:absolute;z-index:499;right:24px;top:18px;width:24px;height:24px}main.content section[role=form] .close-btn svg{width:100%;height:100%}main.content section[role=form] form{align-self:flex-end;width:100%}main.content section[role=form] fieldset{margin-bottom:20px;max-width:400px}main.content section[role=form] fieldset:nth-child(6),main.content section[role=form] fieldset:nth-child(7){display:none}main.content section[role=form] fieldset>*{display:block;width:100%}main.content section[role=form] fieldset button{max-width:50px}main.content section[role=form] fieldset label{font-weight:900;font-size:calc(9px + ((12 - 9) * ((100vw - 320px)/ (1600 - 320))));margin-bottom:4px}main.content section[role=form] fieldset input{padding:8px}main.content section[role=form] fieldset input[type=email],main.content section[role=form] fieldset input[type=text]{border:1px solid #222}main.content section[role=form] fieldset select{-webkit-appearance:none;-webkit-border-radius:0;background:url("data:image/svg+xml;utf8,
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | How to catch the submit event
64 |
65 |
66 | ....
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
80 |
81 |
84 |
85 |
86 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/docs/test-stress-instance-creation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Different validation strategies
64 |
65 |
66 | Simple questions about Sherlock Holmes.
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
122 |
123 |
124 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/docs/value-piping.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
62 |
63 | Value piping
64 |
65 |
66 | Map valus across tags using the id attribute.
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
80 |
81 |
82 |
83 |
84 |
87 |
88 |
89 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/docs/welcome-message.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
47 |
48 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
64 |
65 |
66 |
67 |
70 |
71 | Add a welcome message
72 |
73 |
74 | And style it like a champ
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
90 |
91 |
92 |
93 |
94 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/gulp-tasks/bower.js:
--------------------------------------------------------------------------------
1 | //var gulp = require('gulp');
2 | var bower = require('gulp-bower');
3 |
4 | global.gulp.task('bower', function() {
5 | return bower({
6 | cwd: "./"
7 | });
8 | });
--------------------------------------------------------------------------------
/gulp-tasks/images.js:
--------------------------------------------------------------------------------
1 | var changed = require('gulp-changed');
2 | var livereload = require('gulp-livereload');
3 | var notify = require("gulp-notify");
4 |
5 | global.gulp.task('copy-images', function() {
6 | var src = global.srcFolder+"/images/**/*";
7 | var dst = global.buildFolder;
8 |
9 | var stream = global.gulp.src(src)
10 | .pipe(global.gulp.dest(dst))
11 | .pipe(changed(dst))
12 | .pipe(livereload())
13 | .pipe(notify("Files copied."));
14 |
15 | return stream;
16 | });
--------------------------------------------------------------------------------
/gulp-tasks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "space10",
3 | "version": "0.0.0",
4 | "dependencies": {
5 | "gulp": "*"
6 | },
7 | "devDependencies": {
8 | "gulp-bower": "*",
9 | "gulp-changed": "*",
10 | "gulp-clean-css": "^3.0.2",
11 | "gulp-concat": "^2.6.0",
12 | "gulp-flatten": "*",
13 | "gulp-insert-lines": "*",
14 | "gulp-livereload": "*",
15 | "gulp-notify": "*",
16 | "gulp-prompt": "*",
17 | "gulp-rename": "^1.2.2",
18 | "gulp-stylus": "*",
19 | "gulp-sync": "^0.1.4",
20 | "gulp-typescript": "*",
21 | "gulp-uglify": "^2.0.0",
22 | "gulp-util": "*",
23 | "nib": "*",
24 | "rupture": "*",
25 | "stream": "*",
26 | "typescript": "*"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/gulp-tasks/scripts.js:
--------------------------------------------------------------------------------
1 | var typescript = require('gulp-typescript');
2 | var flatten = require('gulp-flatten');
3 | var changed = require('gulp-changed');
4 | var gutil = require('gulp-util');
5 | var livereload = require('gulp-livereload');
6 | var notify = require("gulp-notify");
7 | var concat = require('gulp-concat');
8 | var rename = require('gulp-rename');
9 | var uglify = require('gulp-uglify');
10 |
11 | function swallowError(error) {
12 | // If you want details of the error in the console
13 | gutil.log(error.toString());
14 | gutil.beep();
15 | this.emit('end');
16 | }
17 |
18 | global.gulp.task('typescript', function() {
19 | var src = [
20 | global.srcFolder + "../src/scripts/**/*.ts",
21 | "!" + global.srcFolder + "../src/scripts/typings/**/*.d.ts"
22 | ];
23 | var dst = global.buildFolder + "../build";
24 |
25 | var stream = global.gulp.src(src)
26 | .pipe(changed(dst,{
27 | extension: '.js'
28 | }))
29 | .pipe(typescript({
30 | noImplicitAny: true,
31 | target: "ES5",
32 | module: "none"//AMD... etc.
33 | }))
34 | .on('error', swallowError)
35 | .pipe(global.gulp.dest(dst))
36 | .pipe(livereload())
37 | .pipe(notify("Typescript compiled."));
38 |
39 | return stream
40 | });
41 |
42 | global.gulp.task('scripts-build', ['scripts-build-docs', 'scripts-build-examples'], function(){
43 | });
44 |
45 | global.gulp.task('scripts-build-docs', ['typescript'], function(){
46 | // build order is important in a inheritance world
47 | var src = [
48 | global.buildFolder + "cf/ConversationalFormDocs.js"
49 | ];
50 | var dst = global.srcFolder + "../docs/scripts";
51 |
52 | var stream = global.gulp.src(src)
53 | .pipe(concat('conversational-form-docs.js'))
54 | .pipe(uglify())
55 | .pipe(rename({suffix: '.min'}))
56 | .pipe(global.gulp.dest(dst));
57 |
58 | return stream;
59 | });
60 |
61 | global.gulp.task('scripts-build-examples', ['typescript'], function(){
62 | // build order is important in a inheritance world
63 | var src = [
64 | global.buildFolder + "cf/ConversationalFormExamples.js"
65 | ];
66 | var dst = global.srcFolder + "../docs/scripts";
67 |
68 | var stream = global.gulp.src(src)
69 | .pipe(concat('conversational-form-examples.js'))
70 | .pipe(uglify())
71 | .pipe(rename({suffix: '.min'}))
72 | .pipe(global.gulp.dest(dst));
73 |
74 | return stream;
75 | });
--------------------------------------------------------------------------------
/gulp-tasks/styles.js:
--------------------------------------------------------------------------------
1 | var rupture = require('rupture');
2 | var nib = require('nib');
3 | var stylus = require('gulp-stylus');
4 | var flatten = require('gulp-flatten');
5 | var changed = require('gulp-changed');
6 | var gutil = require('gulp-util');
7 | var livereload = require('gulp-livereload');
8 | var notify = require("gulp-notify");
9 | var concat = require('gulp-concat');
10 | var cleanCSS = require('gulp-clean-css');
11 | var rename = require('gulp-rename');
12 |
13 | function swallowError(error) {
14 | // If you want details of the error in the console
15 | gutil.log(error.toString());
16 | gutil.beep();
17 | this.emit('end');
18 | }
19 |
20 | /**
21 | * OBS: seperate build tasks out so we can split the project into smaller pieces later.
22 | */
23 |
24 | global.gulp.task('stylus', function(){
25 | var src = [
26 | global.srcFolder + "styles/**/*.styl",
27 | "!" + global.srcFolder + "styles/**/_cf*.styl"
28 | ]
29 | var dst = global.srcFolder + "../build";
30 |
31 | var stream = global.gulp.src(src)
32 | .pipe(changed(dst, {
33 | extension: '.css'
34 | }))
35 | .pipe(stylus({
36 | use: [nib(), rupture()],
37 | errors: true
38 | }))
39 | .pipe(global.gulp.dest(dst));
40 |
41 | return stream;
42 | });
43 |
44 | global.gulp.task('styles-build', ['stylus'], function(){
45 | var src = [
46 | global.srcFolder + "../build/**/*.css",
47 | global.srcFolder + "../build/cf/docs.css",
48 | global.srcFolder + "../build/cf/ui/section-cf-context.css",
49 | global.srcFolder + "../build/cf/ui/section-form.css",
50 | global.srcFolder + "../build/cf/ui/section-info.css",
51 | global.srcFolder + "../build/cf/ui/sticky-menu.css",
52 | global.srcFolder + "../build/cf/ui/switch.css",
53 | global.srcFolder + "../build/examples-boilerplate.css",
54 |
55 | "!" + global.srcFolder + "../build/**/cf-theming.css"
56 | ]
57 |
58 | var dst = global.srcFolder + "../docs/styles";
59 |
60 | var stream = global.gulp.src(src)
61 | .pipe(concat('conversational-form-docs.css'))
62 | .pipe(cleanCSS())
63 | .pipe(rename({suffix: '.min'}))
64 | .pipe(global.gulp.dest(dst));
65 |
66 |
67 | stream = global.gulp.src([global.srcFolder + "../build/**/cf-theming.css"])
68 | .pipe(concat('cf-theming.css'))
69 | .pipe(cleanCSS())
70 | .pipe(rename({suffix: '.min'}))
71 | .pipe(global.gulp.dest(dst));
72 |
73 | return stream;
74 | });
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | global.gulp = require('gulp');
2 | var fs = require('fs');
3 | var livereload = require('./gulp-tasks/node_modules/gulp-livereload');
4 | var gulpsync = require('./gulp-tasks/node_modules/gulp-sync')(global.gulp);
5 |
6 | var package = JSON.parse(fs.readFileSync('gulp-tasks/package.json'));
7 |
8 | // include task files
9 | require("./gulp-tasks/styles");
10 | require("./gulp-tasks/scripts");
11 | require("./gulp-tasks/images");
12 | require("./gulp-tasks/bower");
13 |
14 | //options
15 | var rootPath = "./";
16 |
17 | var srcFolder = rootPath + 'src/';
18 | global.srcFolder = srcFolder;
19 |
20 | var buildFolder = rootPath + 'build/';
21 | global.buildFolder = buildFolder;
22 |
23 | var distFolder = rootPath + 'dist/';
24 | global.distFolder = distFolder;
25 |
26 | var tasks = ['bower', 'scripts-docs-build', 'scripts-examples-build', 'styles-docs-build', 'styles-examples-build', 'copy-images'];
27 |
28 | // Watch Files For Changes
29 | global.gulp.task('watch', tasks, function() {
30 | livereload.listen();
31 |
32 | console.log("Watch task started — development");
33 |
34 | global.gulp.watch(srcFolder + '/images/**/*', ['copy-images']);
35 |
36 | global.gulp.watch(srcFolder + '/scripts/**/*.ts', ['typescript']);
37 |
38 | global.gulp.watch(srcFolder + '/styles/**/*.styl', ['stylus']);
39 | });
40 |
41 | // Default tasks
42 | global.gulp.task('default', ['watch']);
43 | global.gulp.task('build', gulpsync.sync(tasks));
44 | global.gulp.task('dist', gulpsync.sync(tasks));
--------------------------------------------------------------------------------
/src/scripts/cf/ConversationalFormDocs.ts:
--------------------------------------------------------------------------------
1 | // Docs version 1.0.0
2 |
3 | interface Window {
4 | conversationalFormDocs: any;
5 | }
6 |
7 | // declare module cf{
8 | //
9 | // }
10 |
11 | // interface cf{
12 | // ConversationalForm: any;
13 | // }
14 |
15 | // export type ConversationalForm = any;
16 | // interface ConversationalForm = any;
17 | // declare var ConversationalForm: any;
18 | class ConversationalForm {}
19 |
20 | class ConversationalFormDocs{
21 | private static instance: ConversationalFormDocs
22 |
23 | private cf: any;
24 | /**
25 | *
26 | * @type HTMLElement
27 | */
28 | private el: HTMLElement;
29 | private introTimer: any = 0;
30 | private h1writer: H1Writer;
31 | constructor(){
32 | this.el =