js/ui/connectwizard.js

   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 });