Add official manga

Signed-off-by: Yuan Si <do4suki@gmail.com>

static/js/button.js

@@ -0,0 +1,69 @@
+var Button = function() {
+};
+
+Button.TAPPED = 'tapped';
+
+Button.initialize = function(element, onTap) {
+  var touchInfo = null;
+
+  if (typeof onTap === 'function') {
+    onTap = onTap.bind(element);
+  } else {
+    onTap = function() {};
+  }
+
+  function d2(x1, y1, x2, y2) {
+    var dx = x2 - x1, dy = y2 - y1;
+    return dx * dx + dy * dy;
+  }
+
+  function startTap(touch) {
+    touchInfo = {startX: touch.clientX, startY: touch.clientY, tapped: false};
+    element.classList.add(Button.TAPPED);
+  }
+
+  function endTap() {
+    element.classList.remove(Button.TAPPED);
+    touchInfo = null;
+  }
+
+  element.addEventListener('touchstart', function(e) {
+    startTap(e.changedTouches[0]);
+    e.preventDefault();
+  });
+
+  element.addEventListener('touchmove', function(e) {
+    if (touchInfo) {
+      var x0 = touchInfo.startX;
+      var y0 = touchInfo.startY;
+      var x = e.changedTouches[0].clientX;
+      var y = e.changedTouches[0].clientY;
+
+      var current = document.elementFromPoint(x, y);
+
+      const THRESHOLD_SQ_PX = 50 * 50;
+      if (!element.contains(current) || d2(x0, y0, x, y) > THRESHOLD_SQ_PX) {
+        endTap();
+      }
+    }
+
+    e.preventDefault();
+  });
+
+  element.addEventListener('touchend', function(e) {
+    if (touchInfo && !touchInfo.tapped) {
+      touchInfo.tapped = true;
+      onTap();
+    }
+
+    endTap();
+    e.preventDefault();
+  });
+
+  element.addEventListener('touchcancel', function(e) {
+    endTap();
+    e.preventDefault();
+  });
+
+  return element;
+};