]>
Commit | Line | Data |
---|---|---|
1fe27ded CP |
1 | var WebmasterGuideStep = new Class({ |
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 | ||
31 | var WebmasterGuide = new Class({ | |
32 | Implements: [Options, Events], | |
33 | options: { | |
34 | parent: null, | |
35 | baseURL: "http://webchat.quakenet.org/" | |
36 | }, | |
37 | initialize: function(options) { | |
38 | this.setOptions(options); | |
39 | this.create(options.parent); | |
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(); | |
63 | nextRow.setStyle("position", "absolute"); | |
64 | nextRow.setStyle("bottom", "0px"); | |
65 | nextRow.setStyle("right", "0px"); | |
66 | nextRow.setStyle("margin", "3px"); | |
67 | var backBtn = new Element("input"); | |
68 | backBtn.type = "submit"; | |
69 | backBtn.value = "< Back"; | |
70 | backBtn.addEvent("click", this.back.bind(this)); | |
71 | nextRow.appendChild(backBtn); | |
72 | ||
73 | var nextBtn = new Element("input"); | |
74 | nextBtn.type = "submit"; | |
75 | nextBtn.value = "Next >"; | |
76 | nextRow.appendChild(nextBtn); | |
77 | nextBtn.addEvent("click", this.next.bind(this)); | |
78 | ||
79 | this.nextBtn = nextBtn; | |
80 | this.backBtn = backBtn; | |
81 | }, | |
82 | newRow: function() { | |
83 | var cell = new Element("div"); | |
84 | this.t.appendChild(cell); | |
85 | return cell; | |
86 | }, | |
87 | newStep: function(options) { | |
88 | return new WebmasterGuideStep(this, options); | |
89 | }, | |
90 | newRadio: function(parent, text, name, selected) { | |
91 | var p = new Element("div"); | |
92 | parent.appendChild(p); | |
93 | ||
94 | var r = new Element("input"); | |
95 | r.type = "radio"; | |
96 | r.name = name; | |
97 | ||
98 | if(selected) | |
99 | r.checked = true; | |
100 | ||
101 | p.appendChild(r); | |
102 | p.appendChild(document.createTextNode(text)); | |
103 | ||
104 | return r; | |
105 | }, | |
106 | addSteps: function() { | |
107 | var af = function() { this.options.middle.focus(); }; | |
108 | ||
109 | this.welcome = this.newStep({ | |
110 | "title": "Welcome!", | |
111 | "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." | |
112 | }); | |
113 | ||
114 | this.chanBox = new Element("input"); | |
115 | this.chans = this.newStep({ | |
116 | "title": "Set channels", | |
117 | "first": "Enter the channels you would like the client to join on startup:", | |
118 | "hint": "You can supply multiple channels by seperating them with a comma, e.g.:", | |
119 | "example": "#rogue,#eu-mage", | |
120 | middle: this.chanBox, | |
121 | }).addEvent("show", af); | |
122 | ||
123 | var customnickDiv = new Element("div"); | |
124 | this.customnick = this.newStep({ | |
125 | "title": "Nickname mode", | |
126 | "first": "At startup would you like the client to use a random nickname, a preset nickname or a nickname of the users choice?", | |
127 | "hint": "It is recommended that you only use a preset nickname if the client is for your own personal use.", | |
128 | middle: customnickDiv | |
129 | }); | |
130 | ||
131 | this.randnick = this.newRadio(customnickDiv, "Use a random nickname, e.g. qwebirc12883.", "nick", true); | |
132 | this.choosenick = this.newRadio(customnickDiv, "Make the user choose a nickname.", "nick"); | |
133 | this.presetnick = this.newRadio(customnickDiv, "Use a preset nickname of your choice.", "nick"); | |
134 | ||
135 | var promptdiv = new Element("form"); | |
136 | this.connectdialog = this.newStep({ | |
137 | "title": "Display connect dialog?", | |
138 | "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?", | |
139 | middle: promptdiv, | |
140 | "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting.", | |
141 | }); | |
142 | ||
143 | this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt", true); | |
144 | var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt"); | |
145 | ||
146 | this.nicknameBox = new Element("input"); | |
147 | this.nickname = this.newStep({ | |
148 | "title": "Set nickname", | |
149 | "first": "Enter the nickname you would like the client to use by default:", | |
150 | "premove": function() { | |
151 | if(this.nicknameBox.value == "") { | |
152 | alert("You must supply a nickname."); | |
153 | this.nicknameBox.focus(); | |
154 | return false; | |
155 | } | |
156 | return true; | |
157 | }.bind(this), | |
158 | middle: this.nicknameBox | |
159 | }).addEvent("show", af); | |
160 | ||
161 | var codeDiv = new Element("div"); | |
162 | this.finish = this.newStep({ | |
163 | "title": "Finished!", | |
164 | "first": "Your custom link is:", | |
165 | middle: codeDiv | |
166 | }).addEvent("show", function() { | |
167 | var alink = new Element("a"); | |
168 | var abox = new Element("input"); | |
169 | var url = this.generateURL(); | |
170 | ||
171 | alink.href = url; | |
172 | alink.appendChild(document.createTextNode(url)); | |
173 | abox.value = "<iframe src=\"" + url + "\"></iframe>"; | |
174 | ||
175 | var mBox = [ | |
176 | alink, | |
177 | new Element("br"), new Element("br"), | |
178 | document.createTextNode("You can embed this into your page with the following code:"), | |
179 | new Element("br"), | |
180 | abox | |
181 | ]; | |
182 | ||
183 | while(codeDiv.childNodes.length > 0) | |
184 | codeDiv.removeChild(codeDiv.childNodes[0]); | |
185 | ||
186 | mBox.forEach(function(x) { | |
187 | codeDiv.appendChild(x); | |
188 | }); | |
189 | }.bind(this)); | |
190 | ||
191 | this.updateSteps(); | |
192 | this.step = 0; | |
193 | ||
194 | this.showStep(); | |
195 | }, | |
196 | updateSteps: function() { | |
197 | this.steps = [this.welcome, this.customnick]; | |
198 | ||
199 | if(this.presetnick.checked) | |
200 | this.steps.push(this.nickname); | |
201 | ||
202 | this.steps.push(this.chans); | |
203 | if(!this.choosenick.checked) | |
204 | this.steps.push(this.connectdialog); | |
205 | ||
206 | this.steps.push(this.finish); | |
207 | }, | |
208 | showStep: function() { | |
209 | this.backBtn.disabled = !(this.step > 0); | |
210 | ||
211 | this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >"; | |
212 | ||
213 | this.steps[this.step].show(); | |
214 | }, | |
215 | next: function() { | |
216 | var pm = this.steps[this.step].options.premove; | |
217 | ||
218 | if(pm && !pm()) | |
219 | return; | |
220 | ||
221 | this.updateSteps(); | |
222 | if(this.step >= this.steps.length - 1) { | |
223 | this.close(); | |
224 | return; | |
225 | } | |
226 | this.step = this.step + 1; | |
227 | this.showStep(); | |
228 | }, | |
229 | close: function() { | |
230 | this.fireEvent("close"); | |
231 | }, | |
232 | back: function() { | |
233 | if(this.step <= 0) | |
234 | return; | |
235 | ||
236 | this.step = this.step - 1; | |
237 | this.showStep(); | |
238 | }, | |
239 | generateURL: function() { | |
240 | var chans = this.chanBox.value; | |
241 | var nick = this.nicknameBox.value; | |
242 | var connectdialog = this.connectdialogr.checked || this.choosenick.checked; | |
243 | ||
244 | var URL = []; | |
245 | if(this.presetnick.checked) { | |
246 | URL.push("nick=" + escape(nick)); | |
247 | } else if(this.choosenick.checked) { | |
248 | URL.push("nick="); | |
249 | } | |
250 | ||
251 | if(chans) { | |
252 | var d = chans.split(","); | |
253 | var d2 = []; | |
254 | ||
255 | /* WTB map */ | |
256 | d.forEach(function(x) { | |
257 | if(x.charAt(0) == '#') | |
258 | x = x.substring(1); | |
259 | ||
260 | d2.push(x); | |
261 | }); | |
262 | ||
263 | URL.push("channels=" + escape(d2.join(","))); | |
264 | } | |
265 | ||
266 | if(connectdialog) | |
267 | URL.push("prompt=1"); | |
268 | ||
269 | return this.options.baseURL + "?" + URL.join("&"); | |
270 | } | |
271 | }); |