]>
Commit | Line | Data |
---|---|---|
e20e5a6b | 1 | qwebirc.ui.EmbedWizardStep = new Class({ |
1fe27ded CP |
2 | Implements: [Options, Events], |
3 | options: { | |
4 | "title": "", | |
5 | "first": "", | |
6 | "hint": "", | |
7 | "middle": null, | |
8 | "premove": null, | |
9 | "example": "" | |
10 | }, | |
11 | initialize: function(parent, options) { | |
12 | this.setOptions(options); | |
13 | this.parent = parent; | |
14 | }, | |
15 | show: function() { | |
16 | this.parent.title.set("html", this.options.title); | |
17 | this.parent.firstRow.set("html", this.options.first); | |
18 | this.parent.hint.set("html", this.options.hint); | |
19 | this.parent.example.set("text", this.options.example); | |
20 | ||
21 | while(this.parent.middleRow.childNodes.length > 0) | |
22 | this.parent.middleRow.removeChild(this.parent.middleRow.childNodes[0]); | |
23 | ||
24 | if($defined(this.options.middle)) | |
25 | this.parent.middleRow.appendChild(this.options.middle); | |
26 | ||
27 | this.fireEvent("show"); | |
28 | } | |
29 | }); | |
30 | ||
e20e5a6b | 31 | qwebirc.ui.EmbedWizard = new Class({ |
1fe27ded CP |
32 | Implements: [Options, Events], |
33 | options: { | |
34 | parent: null, | |
35 | baseURL: "http://webchat.quakenet.org/" | |
36 | }, | |
ebb21d2e | 37 | initialize: function(parent, options) { |
1fe27ded | 38 | this.setOptions(options); |
ebb21d2e | 39 | this.create(parent); |
1fe27ded CP |
40 | this.addSteps(); |
41 | }, | |
42 | create: function(parent) { | |
43 | this.t = parent; | |
44 | ||
45 | var titleRow = this.newRow(); | |
46 | this.title = new Element("h2"); | |
47 | this.title.setStyle("margin-top", "0px"); | |
48 | this.title.setStyle("margin-bottom", "5px"); | |
49 | titleRow.appendChild(this.title); | |
50 | ||
51 | this.firstRow = this.newRow(); | |
52 | this.middleRow = this.newRow(); | |
53 | var hintRow = this.newRow(); | |
54 | this.hint = new Element("div"); | |
55 | this.hint.setStyle("font-size", "0.8em"); | |
56 | this.hint.setStyle("font-style", "italic"); | |
57 | hintRow.appendChild(this.hint); | |
58 | var exampleRow = this.newRow(); | |
59 | this.example = new Element("pre"); | |
60 | exampleRow.appendChild(this.example); | |
61 | ||
62 | var nextRow = this.newRow(); | |
f9b2babd | 63 | nextRow.addClass("wizardcontrols"); |
1fe27ded CP |
64 | var backBtn = new Element("input"); |
65 | backBtn.type = "submit"; | |
66 | backBtn.value = "< Back"; | |
67 | backBtn.addEvent("click", this.back.bind(this)); | |
68 | nextRow.appendChild(backBtn); | |
69 | ||
70 | var nextBtn = new Element("input"); | |
71 | nextBtn.type = "submit"; | |
72 | nextBtn.value = "Next >"; | |
73 | nextRow.appendChild(nextBtn); | |
74 | nextBtn.addEvent("click", this.next.bind(this)); | |
75 | ||
76 | this.nextBtn = nextBtn; | |
77 | this.backBtn = backBtn; | |
78 | }, | |
79 | newRow: function() { | |
80 | var cell = new Element("div"); | |
81 | this.t.appendChild(cell); | |
82 | return cell; | |
83 | }, | |
84 | newStep: function(options) { | |
e20e5a6b | 85 | return new qwebirc.ui.EmbedWizardStep(this, options); |
1fe27ded CP |
86 | }, |
87 | newRadio: function(parent, text, name, selected) { | |
88 | var p = new Element("div"); | |
89 | parent.appendChild(p); | |
f9b2babd | 90 | |
a1e826c7 | 91 | var r = qwebirc.util.createInput("radio", p, name, selected); |
1fe27ded CP |
92 | p.appendChild(document.createTextNode(text)); |
93 | ||
94 | return r; | |
95 | }, | |
96 | addSteps: function() { | |
f9b2babd CP |
97 | var af = function(select) { |
98 | if(Browser.Engine.trident) { | |
99 | var f = function() { | |
100 | this.focus(); | |
101 | if(select) | |
102 | this.select(); | |
103 | }; | |
104 | f.delay(100, this, []); | |
105 | } else { | |
106 | this.focus(); | |
107 | this.select(); | |
108 | } | |
109 | }; | |
1fe27ded CP |
110 | |
111 | this.welcome = this.newStep({ | |
112 | "title": "Welcome!", | |
113 | "first": "This wizard will help you create an embedded client by asking you questions then giving you the code to add to your website.<br/><br/>You can use the <b>Next</b> and <b>Back</b> buttons to navigate through the wizard; click <b>Next</b> to continue." | |
114 | }); | |
115 | ||
116 | this.chanBox = new Element("input"); | |
f9b2babd | 117 | this.chanBox.addClass("text"); |
1fe27ded CP |
118 | this.chans = this.newStep({ |
119 | "title": "Set channels", | |
120 | "first": "Enter the channels you would like the client to join on startup:", | |
121 | "hint": "You can supply multiple channels by seperating them with a comma, e.g.:", | |
122 | "example": "#rogue,#eu-mage", | |
6c19eb8f | 123 | middle: this.chanBox |
f9b2babd | 124 | }).addEvent("show", af.bind(this.chanBox)); |
1fe27ded CP |
125 | |
126 | var customnickDiv = new Element("div"); | |
127 | this.customnick = this.newStep({ | |
128 | "title": "Nickname mode", | |
129 | "first": "At startup would you like the client to use a random nickname, a preset nickname or a nickname of the users choice?", | |
130 | "hint": "It is recommended that you only use a preset nickname if the client is for your own personal use.", | |
131 | middle: customnickDiv | |
132 | }); | |
133 | ||
6500b600 CP |
134 | this.choosenick = this.newRadio(customnickDiv, "Make the user choose a nickname.", "nick", true); |
135 | this.randnick = this.newRadio(customnickDiv, "Use a random nickname, e.g. qwebirc12883.", "nick"); | |
1fe27ded CP |
136 | this.presetnick = this.newRadio(customnickDiv, "Use a preset nickname of your choice.", "nick"); |
137 | ||
138 | var promptdiv = new Element("form"); | |
139 | this.connectdialog = this.newStep({ | |
140 | "title": "Display connect dialog?", | |
141 | "first": "Do you want the user to be shown the connect dialog (with the values you have supplied pre-entered) or just a connect confirmation?", | |
142 | middle: promptdiv, | |
6c19eb8f | 143 | "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting." |
1fe27ded CP |
144 | }); |
145 | ||
6500b600 CP |
146 | var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt", true); |
147 | this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt"); | |
1fe27ded CP |
148 | |
149 | this.nicknameBox = new Element("input"); | |
f9b2babd | 150 | this.nicknameBox.addClass("text"); |
1fe27ded CP |
151 | this.nickname = this.newStep({ |
152 | "title": "Set nickname", | |
153 | "first": "Enter the nickname you would like the client to use by default:", | |
154 | "premove": function() { | |
155 | if(this.nicknameBox.value == "") { | |
156 | alert("You must supply a nickname."); | |
157 | this.nicknameBox.focus(); | |
158 | return false; | |
159 | } | |
160 | return true; | |
161 | }.bind(this), | |
162 | middle: this.nicknameBox | |
f9b2babd | 163 | }).addEvent("show", af.bind(this.nicknameBox)); |
1fe27ded CP |
164 | |
165 | var codeDiv = new Element("div"); | |
166 | this.finish = this.newStep({ | |
167 | "title": "Finished!", | |
168 | "first": "Your custom link is:", | |
169 | middle: codeDiv | |
170 | }).addEvent("show", function() { | |
171 | var alink = new Element("a"); | |
172 | var abox = new Element("input"); | |
f9b2babd CP |
173 | abox.addClass("iframetext"); |
174 | var url = this.generateURL(false); | |
1fe27ded CP |
175 | |
176 | alink.href = url; | |
8af49135 | 177 | alink.target = "new"; |
1fe27ded | 178 | alink.appendChild(document.createTextNode(url)); |
f9b2babd | 179 | abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>"; |
1fe27ded CP |
180 | |
181 | var mBox = [ | |
182 | alink, | |
183 | new Element("br"), new Element("br"), | |
184 | document.createTextNode("You can embed this into your page with the following code:"), | |
185 | new Element("br"), | |
186 | abox | |
187 | ]; | |
188 | ||
189 | while(codeDiv.childNodes.length > 0) | |
190 | codeDiv.removeChild(codeDiv.childNodes[0]); | |
191 | ||
192 | mBox.forEach(function(x) { | |
193 | codeDiv.appendChild(x); | |
194 | }); | |
f9b2babd CP |
195 | |
196 | af.bind(abox)(true); | |
197 | abox.addEvent("click", function() { | |
198 | this.select(); | |
199 | }.bind(abox)); | |
1fe27ded CP |
200 | }.bind(this)); |
201 | ||
202 | this.updateSteps(); | |
203 | this.step = 0; | |
204 | ||
205 | this.showStep(); | |
206 | }, | |
207 | updateSteps: function() { | |
208 | this.steps = [this.welcome, this.customnick]; | |
209 | ||
210 | if(this.presetnick.checked) | |
211 | this.steps.push(this.nickname); | |
212 | ||
213 | this.steps.push(this.chans); | |
6500b600 CP |
214 | |
215 | if(this.chanBox.value != "" && !this.choosenick.checked) | |
1fe27ded CP |
216 | this.steps.push(this.connectdialog); |
217 | ||
218 | this.steps.push(this.finish); | |
219 | }, | |
220 | showStep: function() { | |
221 | this.backBtn.disabled = !(this.step > 0); | |
222 | ||
223 | this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >"; | |
224 | ||
225 | this.steps[this.step].show(); | |
226 | }, | |
227 | next: function() { | |
228 | var pm = this.steps[this.step].options.premove; | |
229 | ||
230 | if(pm && !pm()) | |
231 | return; | |
232 | ||
233 | this.updateSteps(); | |
234 | if(this.step >= this.steps.length - 1) { | |
235 | this.close(); | |
236 | return; | |
237 | } | |
238 | this.step = this.step + 1; | |
239 | this.showStep(); | |
240 | }, | |
241 | close: function() { | |
242 | this.fireEvent("close"); | |
243 | }, | |
244 | back: function() { | |
245 | if(this.step <= 0) | |
246 | return; | |
247 | ||
248 | this.step = this.step - 1; | |
249 | this.showStep(); | |
250 | }, | |
251 | generateURL: function() { | |
252 | var chans = this.chanBox.value; | |
253 | var nick = this.nicknameBox.value; | |
6500b600 CP |
254 | var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked; |
255 | ||
1fe27ded CP |
256 | var URL = []; |
257 | if(this.presetnick.checked) { | |
258 | URL.push("nick=" + escape(nick)); | |
6500b600 CP |
259 | } else if(!this.choosenick.checked) { |
260 | URL.push("randomnick=1"); | |
1fe27ded CP |
261 | } |
262 | ||
263 | if(chans) { | |
264 | var d = chans.split(","); | |
265 | var d2 = []; | |
266 | ||
1fe27ded CP |
267 | d.forEach(function(x) { |
268 | if(x.charAt(0) == '#') | |
269 | x = x.substring(1); | |
270 | ||
271 | d2.push(x); | |
272 | }); | |
273 | ||
274 | URL.push("channels=" + escape(d2.join(","))); | |
275 | } | |
276 | ||
277 | if(connectdialog) | |
278 | URL.push("prompt=1"); | |
279 | ||
6500b600 | 280 | return this.options.baseURL + (URL.length>0?"?":"") + URL.join("&"); |
1fe27ded CP |
281 | } |
282 | }); |