js/ui/panes/embed.js

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