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