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.addClass("wizardcontrols");
  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) {
  85     return new qwebirc.ui.EmbedWizardStep(this, options);
  86   },
  87   newRadio: function(parent, text, name, selected) {
  88     var p = new Element("div");
  89     parent.appendChild(p);
  90
  91     var r;
  92     if(Browser.Engine.trident) {
  93       r = document.createElement("<input type=\"radio\" name=\" + escape(name) + \"" + (selected?" checked":"") + "/>");
  94     } else {
  95       r = new Element("input");
  96       r.type = "radio";
  97       r.name = name;
  98     }
  99
 100     if(selected)
 101       r.checked = true;
 102
 103     p.appendChild(r);
 104     p.appendChild(document.createTextNode(text));
 105
 106     return r;
 107   },
 108   addSteps: function() {
 109     var af = function(select) {
 110       if(Browser.Engine.trident) {
 111         var f = function() {
 112           this.focus();
 113           if(select)
 114             this.select();
 115         };
 116         f.delay(100, this, []);
 117       } else {
 118         this.focus();
 119         this.select();
 120       }
 121     };
 122
 123     this.welcome = this.newStep({
 124       "title": "Welcome!",
 125       "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."
 126     });
 127
 128     this.chanBox = new Element("input");
 129     this.chanBox.addClass("text");
 130     this.chans = this.newStep({
 131       "title": "Set channels",
 132       "first": "Enter the channels you would like the client to join on startup:",
 133       "hint": "You can supply multiple channels by seperating them with a comma, e.g.:",
 134       "example": "#rogue,#eu-mage",
 135       middle: this.chanBox
 136     }).addEvent("show", af.bind(this.chanBox));
 137
 138     var customnickDiv = new Element("div");
 139     this.customnick = this.newStep({
 140       "title": "Nickname mode",
 141       "first": "At startup would you like the client to use a random nickname, a preset nickname or a nickname of the users choice?",
 142       "hint": "It is recommended that you only use a preset nickname if the client is for your own personal use.",
 143       middle: customnickDiv
 144     });
 145
 146     this.choosenick = this.newRadio(customnickDiv, "Make the user choose a nickname.", "nick", true);
 147     this.randnick = this.newRadio(customnickDiv, "Use a random nickname, e.g. qwebirc12883.", "nick");
 148     this.presetnick = this.newRadio(customnickDiv, "Use a preset nickname of your choice.", "nick");
 149
 150     var promptdiv = new Element("form");
 151     this.connectdialog = this.newStep({
 152       "title": "Display connect dialog?",
 153       "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?",
 154       middle: promptdiv,
 155       "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting."
 156     });
 157
 158     var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt", true);
 159     this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt");
 160
 161     this.nicknameBox = new Element("input");
 162     this.nicknameBox.addClass("text");
 163     this.nickname = this.newStep({
 164       "title": "Set nickname",
 165       "first": "Enter the nickname you would like the client to use by default:",
 166       "premove": function() {
 167         if(this.nicknameBox.value == "") {
 168           alert("You must supply a nickname.");
 169           this.nicknameBox.focus();
 170           return false;
 171         }
 172         return true;
 173       }.bind(this),
 174       middle: this.nicknameBox
 175     }).addEvent("show", af.bind(this.nicknameBox));
 176
 177     var codeDiv = new Element("div");
 178     this.finish = this.newStep({
 179       "title": "Finished!",
 180       "first": "Your custom link is:",
 181       middle: codeDiv
 182     }).addEvent("show", function() {
 183       var alink = new Element("a");
 184       var abox = new Element("input");
 185       abox.addClass("iframetext");
 186       var url = this.generateURL(false);
 187
 188       alink.href = url;
 189       alink.target = "new";
 190       alink.appendChild(document.createTextNode(url));
 191       abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>";
 192
 193       var mBox = [
 194         alink,
 195         new Element("br"), new Element("br"),
 196         document.createTextNode("You can embed this into your page with the following code:"),
 197         new Element("br"),
 198         abox
 199       ];
 200
 201       while(codeDiv.childNodes.length > 0)
 202         codeDiv.removeChild(codeDiv.childNodes[0]);
 203
 204       mBox.forEach(function(x) {
 205         codeDiv.appendChild(x);
 206       });
 207
 208       af.bind(abox)(true);
 209       abox.addEvent("click", function() {
 210         this.select();
 211       }.bind(abox));
 212     }.bind(this));
 213
 214     this.updateSteps();
 215     this.step = 0;
 216
 217     this.showStep();
 218   },
 219   updateSteps: function() {
 220     this.steps = [this.welcome, this.customnick];
 221
 222     if(this.presetnick.checked)
 223       this.steps.push(this.nickname);
 224
 225     this.steps.push(this.chans);
 226
 227     if(this.chanBox.value != "" && !this.choosenick.checked)
 228       this.steps.push(this.connectdialog);
 229
 230     this.steps.push(this.finish);
 231   },
 232   showStep: function() {
 233     this.backBtn.disabled = !(this.step > 0);
 234
 235     this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >";
 236
 237     this.steps[this.step].show();
 238   },
 239   next: function() {
 240     var pm = this.steps[this.step].options.premove;
 241
 242     if(pm && !pm())
 243       return;
 244
 245     this.updateSteps();
 246     if(this.step >= this.steps.length - 1) {
 247       this.close();
 248       return;
 249     }
 250     this.step = this.step + 1;
 251     this.showStep();
 252   },
 253   close: function() {
 254     this.fireEvent("close");
 255   },
 256   back: function() {
 257     if(this.step <= 0)
 258       return;
 259
 260       this.step = this.step - 1;
 261     this.showStep();
 262   },
 263   generateURL: function() {
 264     var chans = this.chanBox.value;
 265     var nick = this.nicknameBox.value;
 266     var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked;
 267
 268     var URL = [];
 269     if(this.presetnick.checked) {
 270       URL.push("nick=" + escape(nick));
 271     } else if(!this.choosenick.checked) {
 272       URL.push("randomnick=1");
 273     }
 274
 275     if(chans) {
 276       var d = chans.split(",");
 277       var d2 = [];
 278
 279       d.forEach(function(x) {
 280         if(x.charAt(0) == '#')
 281           x = x.substring(1);
 282
 283         d2.push(x);
 284       });
 285
 286       URL.push("channels=" + escape(d2.join(",")));
 287     }
 288
 289     if(connectdialog)
 290       URL.push("prompt=1");
 291
 292     return this.options.baseURL + (URL.length>0?"?":"") + URL.join("&");
 293   }
 294 });