NN.RU User Hide

// ==UserScript==
// @name        User Hide
// @namespace   nnru
// @description Hides user messages for selected users
// @include     http://www.nn.ru/*
// @version     1
// @grant       none

// ==/UserScript==

function BranchItem() {
}
BranchItem.getItemHeader = function(el) {
  return el.querySelector(".branch-head");
}
BranchItem.getItemBody = function(el) {
  return el.querySelector(".branch-body");
}
BranchItem.getId = function(el) {
  return el.querySelector(".PortraitLink").getAttribute("usid");
}
BranchItem.getUserControl = function(el) {
  return el.querySelector(".userControl");
}
BranchItem.getMessageHideControl = function(el) {
  return el.querySelector(".messageHide");
}
BranchItem.getOverlay = function(el) {
  return el.querySelector(".shadowOverlay");
}
BranchItem.getContainer = function(a) {
  return a.parentNode.parentNode;
}

function User(id = 0, name = "") {
  this.id = id;
  this.name = "";

  this.valid = function() {
    return this.id != 0;
  }
  this.init = function(obj) {
    if (obj) {
      if ("id" in obj) this.id = obj.id;
      if ("name" in obj) this.name = obj.name;
    }
    if (this.id && !this.name) {
      var el = document.querySelector("a[usid='" + this.id + "']");
      if (el) this.name = el.text;
    }
    //console.log("User: id: " + this.id + ", name: " + this.name);
  }
  this.data = function() {
    var obj = {
      id: this.id,
      name: this.name
    };
    return obj;
  }
  this.hide = function(el) {
    var b = BranchItem.getItemBody(el);
    var o = BranchItem.getOverlay(el);
    b.style.display = 'none';
    o.style.display = 'block';
  }
  this.show = function(el) {
    var b = BranchItem.getItemBody(el);
    if (b.style.display != undefined)
      b.style.display = 'block';
    var o = BranchItem.getOverlay(el);
    o.style.display = 'none';
  }

  this.init();
}

function UserControl(el, userManager) {
  this.parent = el;
  this.toggleBox = document.createElement("a");
  this.div = document.createElement("div");
  this.div1 = document.createElement("div");
  this.label = document.createElement("label");
  this.checkbox = document.createElement("input");
  this.vline = document.createElement("label");
  this.optButton = document.createElement("label");
  this.overlay = document.createElement("div");
  // -- Options --
  /*this.options = document.createElement("div");
  this.input = document.createElement("input");
  this.import = document.createElement("button");
  this.export = document.createElement("button");*/
  // ----
  this.userManager = userManager;
  this.id = BranchItem.getId(el);
  this.mid = Math.floor(Math.random() * (999999 - 100000)) + 100000;

  this.hidden = function() {

  }
  this.show = function() {
    this.div1.style.border = "1px solid #AAA";
    this.checkbox.checked = !!this.userManager.find(this.id);
    this.label.style.display = 'inline';
    this.checkbox.style.display = 'inline';
    this.vline.style.display = 'inline';
    this.optButton.style.display = 'inline';
  }
  this.hide = function() {
    this.div1.style.border = "0px";
    this.label.style.display = 'none';
    this.checkbox.style.display = 'none';
    this.vline.style.display = 'none';
    this.optButton.style.display = 'none';
  }
  this.showOptions = function() {
    console.log("Show options");
    /*console.log(this.options, this.input);
    this.input.value = this.userManager.getJSON();
    this.options.style.position = 'absolute';
    this.options.top = window.width / 2;
    this.options.left = window.height / 2;

    document.body.appendChild(this.options);*/
    var json = prompt("Enter JSON string to import new values OR copy the contents to export configuration to another browser",
                                                                   this.userManager.getJSON());
    //console.log(json);
    if (json) {
      this.userManager.importJSON(json);
      this.userManager.update();
    }
  }
  this.hideOptions = function() {
    var b = BranchItem.getItemBody(this.parent);
    return b.style.display == 'none';
  }
  this.createOverlay = function() {
    //console.log("Creating overlay");
    var b = BranchItem.getItemHeader(this.parent);
    b.style.position = 'relative';
    var firstElement = b.querySelector("a");
    var left = firstElement.offsetLeft;
    var top = 0;
    var width = this.div.offsetLeft - left;
    var height = 50;
    var color = getComputedStyle(document.querySelector(".author-item"), null).backgroundColor;

    this.overlay.className = "shadowOverlay";
    this.overlay.style.position = 'absolute';
    this.overlay.style.left = left + "px";
    this.overlay.style.top = top + "px";
    this.overlay.style.width = width + "px";
    this.overlay.style.height = height + "px";
    this.overlay.style.backgroundColor = color;
    this.overlay.style.opacity = 0.8;
    this.overlay.style.borderRadius = "5px";
    this.overlay.style.pointerEvents = 'none';
    this.overlay.style.display = 'none';

    b.appendChild(this.overlay);
  }
  this.init = function() {
    var self = this;
    BranchItem.getItemHeader(this.parent).appendChild(this.div);
    this.div.style.display = 'inline-block';
    this.div.className = "userControl";

    this.div.appendChild(this.toggleBox);
    this.div.appendChild(this.div1);

    this.toggleBox.text = "[⨪]";
    this.toggleBox.style.color = "grey";
    this.toggleBox.className = "messageHide";
    this.toggleBox.title = "Hide/Show Message";
    this.toggleBox.style.textDecoration = 'none';
    this.toggleBox.style.cursor = 'default';
    this.toggleBox.style.paddingLeft = '0px';
    this.toggleBox.style.paddingRight = '3px';
    this.toggleBox.onclick = function() {
      console.log("Hide/Show message event");
      var b = BranchItem.getItemBody(self.parent);
      if (b.style.display == 'none') {
        b.style.display = 'block';
        self.overlay.style.display = 'none';
      } else {
        b.style.display = 'none';
        self.overlay.style.display = 'block';
      }
    }
    this.div1.style.display = 'inline-block';
    this.div1.style.borderRadius = "4px";
    this.div1.style.paddingTop = "2px";

    var label = document.createElement("a");
    label.text = "⪢";
    label.style.color = "grey";
    label.style.textDecoration = 'none';
    label.style.cursor = 'default';
    label.onclick = function() { return false; }
    this.div1.appendChild(label);

    this.label.innerHTML = "Block User";
    this.label.for = "userCheckbox" + this.mid;
    this.label.style.display = 'none';
    this.label.style.paddingLeft = "2px";
    this.div1.appendChild(this.label);

    this.checkbox.title = "Block User";
    this.checkbox.type = 'checkbox';
    this.checkbox.className = "userCheckbox";
    this.checkbox.id = "userCheckbox" +  this.mid;
    this.checkbox.style.top = '-1px';
    this.checkbox.style.position = 'relative';
    this.checkbox.style.verticalAlign = 'middle';
    this.checkbox.checked = !!this.userManager.find(this.id);
    this.checkbox.style.display = 'none'
    this.checkbox.onclick = function() {
      if (self.checkbox.checked) {
        self.userManager.addUser(self.id);
      } else {
        self.userManager.removeUser(self.id);
      }
    }
    this.div1.appendChild(this.checkbox);

    this.vline.innerHTML = "|";
    this.vline.style.font = '16px';
    this.vline.style.color = 'grey';
    this.vline.style.padding = "1px";
    this.vline.style.top = '1px';
    this.vline.style.position = 'relative';
    this.vline.style.verticalAlign = 'top';
    this.vline.style.display = 'none';
    this.div1.appendChild(this.vline);

    this.optButton.innerHTML = '⚙';
    this.optButton.style.backgroundImage = 'linear-gradient(to bottom, #fafafa, #ebf1f5)';
    this.optButton.style.verticalAlign = 'middle';
    this.optButton.style.top = '-1px';
    this.optButton.style.paddingLeft = '2px';
    this.optButton.style.paddingRight = '2px';
    this.optButton.style.position = 'relative';
    this.optButton.style.margin = '2px';
    this.optButton.style.display = 'none';
    this.optButton.onmouseover = function() {
      self.optButton.style.backgroundImage = 'linear-gradient(to bottom, #e8edf0, #caced1)';
    }
    this.optButton.onmouseout = function() {
      self.optButton.style.backgroundImage = 'linear-gradient(to bottom, #fafafa, #ebf1f5)';
    }
    this.optButton.onclick = function(event) {
      self.showOptions(event);
    }
    this.div1.appendChild(this.optButton);

    this.div1.onmouseover = function() {
      self.show();
    }
    this.div1.onmouseout = function() {
      self.hide();
    }

    //setTimeout(this.createOverlay.bind(this), 600);
    this.createOverlay();
    // Options
    /*this.input.type = 'text';
    this.input.width = 80;
    this.input.value = this.userManager.getJSON();
    this.options.appendChild(this.input);

    this.options.style.textDecorations = 'none';
    this.options.style.color = 'grey';
    this.options.title = "Import";
    this.options.appendChild(this.import);

    this.options.appendChild(this.export);*/
  }
  this.init();
}
UserControl.updateOverlays = function() {
  console.log("Updating overlays");
  var ol = document.querySelectorAll(".branch-head");
  for (var b of ol) {
    var overlay = BranchItem.getOverlay(b);
    var userControl = BranchItem.getUserControl(b);
    var firstElement = b.querySelector("a");
    var width = userControl.offsetLeft - firstElement.offsetLeft;
    overlay.style.width = width + "px";
  }
  console.log(ol.length + " overlays updated");
}

function UserManager() {
  this.users = {};
  this.length = 0;
  this.obs = null;

  this.init = function() {
    console.log("Initializing UserManager...");
    this.loadFromStorage();
    this.register();
    this.refresh();
    setTimeout(UserControl.updateOverlays, 2000);
    console.log("UserManager initialization complete");
    console.log("==================================================");
  }
  this.register = function() {
    console.log("Registering...");
    var self = this;
    //r target = document.getElementById("contentMainAll");
    var target = document.querySelector("div");
    var conf = { childList: true, subtree: true };
    this.obs = new MutationObserver(function(mutations) {
      //console.log(mutations.length);
      var nodes = [];
      var targetNode = null;
      for (var i = mutations.length - 1; i >= 0; --i) {
        var mutation = mutations[i];
        //console.log(mutation.type, mutation.target, mutation.addedNodes.length);
        //Array.prototype.map.call(mutation.addedNodes, function (node) {
        //   console.log(node);
        //});
        if (mutation.target.className == 'active_new_topic') {
          setTimeout(self.refresh.bind(self), 500);
          return;
        }
        if (mutation.target.className == 'branch-cont' &&
            mutation.addedNodes.length > 0) {
          nodes = Array.prototype.filter.call(mutation.target.querySelectorAll(".branch-item"),
                                              function(node) {
                                                return !BranchItem.getMessageHideControl(node);
                                              });
          break;
        }
      }
      console.log("DOM Changed. " + mutations.length + " mutations, " + nodes.length + " branch-item nodes");
      self.refresh(nodes);
      self.observe(target, conf);
    });
    this.obs.observe(target, conf);
  }
  this.loadFromArray = function(a) {
    console.log("Loading ids from array");
    // a - is the array of User Ids
    var self = this;
    a.forEach(function(id) {
      if (!(id in self.users)) {
        self.users[id] = new User(id);
        ++self.length;
      }
    });
    console.log("Loaded " + a.length + " records");
  }
  this.loadFromStorage = function() {
    console.log("Loading from storage...");
    var newIds = this.importJSON(localStorage.getItem("nnru_blacklist"));
    console.log(newIds.length + " records loaded");
  }
  this.saveToStorage = function() {
    console.log("Saving to storage...")
    localStorage.setItem("nnru_blacklist", this.getJSON());
    console.log("Records saved");
  }
  this.clearStorage = function() {
    localStorage.setItem("nnru_blacklist", "[]");
  }
  this.find = function(id) {
    if (id in this.users) {
      return this.users[id];
    }
    return undefined;
  }
  this.getJSON = function() {
    var a = [];
    for (var id in this.users) {
      //console.log(this.users[id].data(), id != 0);
      if (id != "0") a.push(this.users[id].data());
    }
    console.log(JSON.stringify(a));
    return JSON.stringify(a);
  }
  this.importJSON = function(json) {
    var a = JSON.parse(json);
    var newIds = [];
    if (a) {
      console.log("Reading records: " +json);
      for (var user of a) {
        if (user.id != "0") {
          if (!(user.id in this.users)) {
            this.users[user.id] = new User();
            newIds.push(this.users[user.id]);
            ++this.length;
          }
          //console.log(user);
          this.users[user.id].init(user);
          //console.log(this.users[user.id]);
        }
      }
    }
    return newIds;
  }
  this.addUser = function(id) {
    console.log("Adding User " + id)
    if (!(id in this.users)) {
      var user = new User(id);
      this.users[id] = user;
      ++this.length;
      var nodes = Array.prototype.map.call(document.querySelectorAll("a[usid='" + id + "']"), function(a) {
        return BranchItem.getContainer(a);
      });
      this.update(nodes);
      this.saveToStorage();
    }
  }
  this.removeUser = function(id) {
    console.log("Removing User " + id)
    var user = this.find(id);
    if (user) {
      var nodes = Array.prototype.forEach.call(document.querySelectorAll("a[usid='" + id + "']"), function(a) {
        user.show(BranchItem.getContainer(a), false);
      });
      delete this.users[id];
      --this.length;
      this.saveToStorage();
    }
  }
  this.refresh = function(nodes = null) {
    console.log("Refreshing...");
    this.augment(nodes);
    this.update(nodes);
  }
  this.augment = function(nodes = null) {
    console.log("Augmenting nodes");
    if (!nodes) nodes = document.querySelectorAll(".branch-item");
    for (var node of nodes) {
      var userControl = new UserControl(node, this);
    }
    console.log(nodes.length + " nodes augmented");
  }
  this.update = function(nodes = null) {
    console.log("Updating nodes");
    var nodesAffected = 0;
    if (!nodes) nodes = document.querySelectorAll(".branch-item");
    for (var node of nodes) {
      var id = BranchItem.getId(node);
      var user = this.find(id);
      if (user) {
        user.hide(node);
        nodesAffected++;
      }
    }
    console.log(nodes.length + " nodes checked, " + nodesAffected + " nodes from blacklist");
  }
}

var userManager = new UserManager();

function onLoad() {
  console.log("UserHide init...");
  userManager.init();
}

onLoad();