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         var v = qwebirc.global.nicknameValidator.validate(this.nicknameBox.value, true);
 188         if(v != this.nicknameBox.value) {
 189           this.nicknameBox.value = v;
 190           alert("The supplied nickname was invalid and has been corrected.");
 191           this.nicknameBox.focus();
 192           return false;
 193          }
 194         return true;
 195       }.bind(this),
 196       middle: this.nicknameBox,
 197       hint: "If you use a . (dot/period) then it will be substituted with a random number."
 198     }).addEvent("show", af.bind(this.nicknameBox));
 199
 200     var codeDiv = new Element("div");
 201     this.finish = this.newStep({
 202       "title": "Finished!",
 203       "first": "Your custom link is:",
 204       middle: codeDiv
 205     }).addEvent("show", function() {
 206       var alink = new Element("a");
 207       var abox = new Element("input");
 208       abox.addClass("iframetext");
 209       var url = this.generateURL(false);
 210
 211       alink.href = url;
 212       alink.target = "_blank";
 213       alink.setAttribute("rel", "noopener noreferrer");
 214       alink.appendChild(document.createTextNode(url));
 215       abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>";
 216
 217       var mBox = [
 218         alink,
 219         new Element("br"), new Element("br"),
 220         document.createTextNode("You can embed this into your page with the following code:"),
 221         new Element("br"),
 222         abox
 223       ];
 224
 225       while(codeDiv.childNodes.length > 0)
 226         codeDiv.removeChild(codeDiv.childNodes[0]);
 227
 228       mBox.forEach(function(x) {
 229         codeDiv.appendChild(x);
 230       });
 231
 232       af.bind(abox)(true);
 233       abox.addEvent("click", function() {
 234         this.select();
 235       }.bind(abox));
 236     }.bind(this));
 237
 238     this.updateSteps();
 239     this.step = 0;
 240
 241     this.showStep();
 242   },
 243   updateSteps: function() {
 244     this.steps = [this.welcome, this.customnick];
 245
 246     if(this.presetnick.checked)
 247       this.steps.push(this.nickname);
 248
 249     this.steps.push(this.chans);
 250
 251     if(this.chanBox.value != "" && !this.choosenick.checked)
 252       this.steps.push(this.connectdialog);
 253
 254     this.steps.push(this.lookandfeel);
 255     this.steps.push(this.finish);
 256   },
 257   showStep: function() {
 258     this.backBtn.disabled = !(this.step > 0);
 259
 260     this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >";
 261
 262     this.steps[this.step].show();
 263   },
 264   next: function() {
 265     var pm = this.steps[this.step].options.premove;
 266
 267     if(pm && !pm())
 268       return;
 269
 270     this.updateSteps();
 271     if(this.step >= this.steps.length - 1) {
 272       this.close();
 273       return;
 274     }
 275     this.step = this.step + 1;
 276     this.showStep();
 277   },
 278   close: function() {
 279     this.fireEvent("close");
 280   },
 281   back: function() {
 282     if(this.step <= 0)
 283       return;
 284
 285       this.step = this.step - 1;
 286     this.showStep();
 287   },
 288   generateURL: function() {
 289     var chans = this.chanBox.value;
 290     var nick = this.nicknameBox.value;
 291     var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked;
 292
 293     var URL = [];
 294     if(this.presetnick.checked) {
 295       URL.push("nick=" + escape(nick));
 296     } else if(!this.choosenick.checked) {
 297       URL.push("randomnick=1");
 298     }
 299
 300     if(chans) {
 301       var d = chans.split(",");
 302       var d2 = [];
 303
 304       d.forEach(function(x) {
 305         if(x.charAt(0) == '#')
 306           x = x.substring(1);
 307
 308         d2.push(x);
 309       });
 310
 311       URL.push("channels=" + escape(d2.join(",")));
 312     }
 313
 314     if(connectdialog)
 315       URL.push("prompt=1");
 316
 317     if(this.currentLF.checked) {
 318       var uioptions = this.options.uiOptions.serialise();
 319       if(uioptions != "")
 320         URL.push("uio=" + uioptions);
 321     }
 322
 323     return qwebirc.global.baseURL + (URL.length>0?"?":"") + URL.join("&");
 324   }
 325 });