git.mar77i.info Git - hublib/blob - hubapps/first/index.js

   1 (function () {
   2     "use strict";
   3     var input_div = null;
   4
   5     function write(msg) {
   6         common.write(input_div.previousSibling, msg);
   7     }
   8
   9     function change_name_button(hub) {
  10         var btn = document.createElement("button");
  11         btn.append(document.createTextNode("change name"));
  12         btn.addEventListener("click", function () {
  13             setup_change_name(hub);
  14         });
  15         return btn;
  16     }
  17
  18     function setup_chat(hub) {
  19         input_div = document.createElement("div");
  20         input_div.append(common.get_input(function () {
  21             var input = input_div.getElementsByTagName("input")[0];
  22             hub.send(input.value);
  23             input.value = "";
  24         }));
  25         input_div.append(document.createTextNode(" "));
  26         input_div.append(change_name_button(hub));
  27
  28         document.body.append(document.createElement("div"));
  29         document.body.append(input_div);
  30     }
  31
  32     function setup_change_name(hub) {
  33         var div = document.createElement("div");
  34         div.append(document.createTextNode("Enter name: "));
  35         div.append(common.get_input(function () {
  36             var client_name = div.children[0].value;
  37             if (input_div.childNodes[0] !== input_div.children[0]) {
  38                 input_div.childNodes[0].remove();
  39             }
  40             input_div.insertBefore(
  41                 document.createTextNode(client_name + " "), input_div.children[0]
  42             );
  43             hub.send(JSON.stringify({"action": "set_name", "name": client_name}));
  44             div.remove();
  45             input_div.style.display = "";
  46             input_div.children[0].focus();
  47         }));
  48         document.body.append(div);
  49         input_div.style.display = "none";
  50         div.children[0].focus();
  51     }
  52
  53     function open() {
  54         setup_chat(this);
  55         write("connected to " + ws_uri);
  56         setup_change_name(this);
  57     }
  58
  59     function close() {
  60         write("connection lost");
  61     }
  62
  63     function message(msg) {
  64         var obj = JSON.parse(msg.data);
  65         if (obj.action === "join" || obj.action === "leave") {
  66             write("[action]: " + obj.name + " " + obj.action + "s");
  67         } else if (obj.action == "set_name") {
  68             write(
  69                 "[action]: " +
  70                 obj.old_name +
  71                 " changes name to " +
  72                 obj.name
  73             );
  74         } else if (obj.hasOwnProperty("data")) {
  75             write(obj.name + ": " + obj.data);
  76         }
  77     }
  78
  79     common.setup(function () {new common.HubClient(ws_uri, open, close, message)});
  80 })();