Web of Likes

web-of-likes.js

  var MIDDLE_CLICK_TYPE = 2

  var LIKEABLE_ELEMENT_NAMES = [
    "dd",
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "figure",
    "img",
    "p",
    "span"
  ]

  var STYLES = [
    ["[data-like-count]", [
      "position: relative"
      ]
    ],

    ["[data-like-count]:hover", [
      "cursor: context-menu"
      ]
    ],

    ["[data-like-count]:hover::before", [
      "display: inline-block",
      "content: attr(data-like-count) ' Liked'",
      "position: absolute",
      "background-color: black",
      "color: white",
      "font-family: monospace",
      "font-size: 10px",
      "text-align: center",
      "border: 3px double white",
      "bottom: 100%",
      "left: 50%",
      "padding: 2px 5px",
      "line-height: 1"
      ]
    ]
  ]

  var stylesheet = document.createElement("style")
  document.head.appendChild(stylesheet)

  STYLES.forEach(function (style, i) {
    var
      selector = style[0],
      rules = style[1]

    rules.forEach(function (rule) {
      stylesheet.sheet.addRule(selector, rule, i);
    });
  });


  var
    selectors = LIKEABLE_ELEMENT_NAMES.join(","),
    elements = Array.prototype.slice.call(document.querySelectorAll(selectors))

  function like (event) {
    if (event.which !== MIDDLE_CLICK_TYPE) return

    event.preventDefault()

    this.dataset.likeCount = parseInt(this.dataset.likeCount, 10) + 1
    console.log("liked", this, this.dataset.likeCount)
  }

  elements.forEach(function (element) {
    element.dataset.likeCount = 0
    element.addEventListener("click", like)
  })