js/ui/embedwizard.js

   1 qwebirc.ui.EmbedWizardStep = 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 qwebirc.ui.EmbedWizard = 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 qwebirc.ui.EmbedWizardStep(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.target = "new";
 173       alink.appendChild(document.createTextNode(url));
 174       abox.value = "<iframe src=\"" + url + "\"></iframe>";
 175
 176       var mBox = [
 177         alink,
 178         new Element("br"), new Element("br"),
 179         document.createTextNode("You can embed this into your page with the following code:"),
 180         new Element("br"),
 181         abox
 182       ];
 183
 184       while(codeDiv.childNodes.length > 0)
 185         codeDiv.removeChild(codeDiv.childNodes[0]);
 186
 187       mBox.forEach(function(x) {
 188         codeDiv.appendChild(x);
 189       });
 190     }.bind(this));
 191
 192     this.updateSteps();
 193     this.step = 0;
 194
 195     this.showStep();
 196   },
 197   updateSteps: function() {
 198     this.steps = [this.welcome, this.customnick];
 199
 200     if(this.presetnick.checked)
 201       this.steps.push(this.nickname);
 202
 203     this.steps.push(this.chans);
 204     if(!this.choosenick.checked)
 205       this.steps.push(this.connectdialog);
 206
 207     this.steps.push(this.finish);
 208   },
 209   showStep: function() {
 210     this.backBtn.disabled = !(this.step > 0);
 211
 212     this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >";
 213
 214     this.steps[this.step].show();
 215   },
 216   next: function() {
 217     var pm = this.steps[this.step].options.premove;
 218
 219     if(pm && !pm())
 220       return;
 221
 222     this.updateSteps();
 223     if(this.step >= this.steps.length - 1) {
 224       this.close();
 225       return;
 226     }
 227     this.step = this.step + 1;
 228     this.showStep();
 229   },
 230   close: function() {
 231     this.fireEvent("close");
 232   },
 233   back: function() {
 234     if(this.step <= 0)
 235       return;
 236
 237       this.step = this.step - 1;
 238     this.showStep();
 239   },
 240   generateURL: function() {
 241     var chans = this.chanBox.value;
 242     var nick = this.nicknameBox.value;
 243     var connectdialog = this.connectdialogr.checked || this.choosenick.checked;
 244
 245     var URL = [];
 246     if(this.presetnick.checked) {
 247       URL.push("nick=" + escape(nick));
 248     } else if(this.choosenick.checked) {
 249       URL.push("nick=");
 250     }
 251
 252     if(chans) {
 253       var d = chans.split(",");
 254       var d2 = [];
 255
 256       /* WTB map */
 257       d.forEach(function(x) {
 258         if(x.charAt(0) == '#')
 259           x = x.substring(1);
 260
 261         d2.push(x);
 262       });
 263
 264       URL.push("channels=" + escape(d2.join(",")));
 265     }
 266
 267     if(connectdialog)
 268       URL.push("prompt=1");
 269
 270     return this.options.baseURL + "?" + URL.join("&");
 271   }
 272 });