bookmarklet.js

javascript:(function(d){var scrollAmount = 2;var scrollSpeed = 20;var buttonTextOn = '動';var buttonTextOff = '止';var diameter = 60;var fromRight = 50;var fromBottom = 5;var doneImmediately = 1;var buttonCSS = '#ohajiki-auto-scrolling { width: ' + diameter + 'px !important; height: ' + diameter + 'px !important; border-radius: ' + diameter * 0.5 + 'px !important; border: 1px solid #ccc !important; background: rgba(255,255,255,0.8) !important; font-size: ' + diameter * 0.5 + 'px !important; text-align: center !important; line-height: ' + diameter + 'px !important; position: fixed !important; z-index: 99999 !important; bottom: ' + fromBottom + 'px !important; right: ' + fromRight + 'px !important; cursor: pointer !important; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }';var htmlNode = d.getElementsByTagName('html')[0];var style = d.createElement('style');var styleID = 'ohajiki-user-stylesheet-for-auto-scrolling';var oldStyle = d.getElementById(styleID);if (oldStyle) return;style.id = styleID;style.textContent = buttonCSS;htmlNode.appendChild(style);var button = d.createElement('div');button.id = 'ohajiki-auto-scrolling';button.textContent = buttonTextOff;htmlNode.appendChild(button);var autoScrollingInterval = null;var toggleAutoScrolling = function(){if (autoScrollingInterval) {button.textContent = buttonTextOff;clearInterval(autoScrollingInterval);autoScrollingInterval = null;} else {button.textContent = buttonTextOn;autoScrollingInterval = setInterval(function(){var oX = window.pageXOffset;var oY = window.pageYOffset;window.scrollTo(oX, oY+scrollAmount);}, scrollSpeed);}};if (doneImmediately) toggleAutoScrolling();var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);var eventName1 = isTouchDevice ? 'touchstart' : 'mousedown';var eventName2 = isTouchDevice ? 'touchend' : 'mouseup';var eventName3 = isTouchDevice ? 'touchmove' : 'mousemove';var holdingTimer;var offset = {x: 0, y: 0};button.isHolded = false;button.addEventListener(eventName1, function(e){clearTimeout(holdingTimer);holdingTimer = setTimeout(function(){if (autoScrollingInterval) {toggleAutoScrolling();}offset.x = window.pageXOffset;offset.y = window.pageYOffset;button.style.transition = '0.3s';button.style.boxShadow = '0 0 6px #999';setTimeout(function(){ button.style.transition = ''; }, 350);button.isHolded = true;}, 400);e.preventDefault();e.stopPropagation();});button.addEventListener(eventName2, function(e){clearTimeout(holdingTimer);if (!button.isHolded) {toggleAutoScrolling();}});d.addEventListener(eventName2, function(){if (!button.isHolded) return;clearTimeout(holdingTimer);button.style.transition = '0.3s';button.style.boxShadow = 'none';setTimeout(function(){ button.style.transition = ''; }, 350);button.isHolded = false;});d.addEventListener(eventName3, function(e){if (!button.isHolded) return;var pX, pY;pX = e.pageX;pY = e.pageY;pX -= offset.x;pY -= offset.y;button.style.left = (pX - diameter * 0.5) + 'px';button.style.top = (pY - diameter * 0.5) + 'px';});})(document);

ohajiki-auto-scroll.js

(function(d){

  /* 移動の距離間隔 */
  var scrollAmount  = 2; /* pixcel */
  /* 移動の時間間隔 */
  var scrollSpeed   = 20; /* milli seconds */
  /* On,Off時のアイコンなど */
  var buttonTextOn  = '動';
  var buttonTextOff = '止';
  /* ボタンサイズ、位置 */
  var diameter = 60;  /* ボタンの直径 */
  var fromRight = 50; /* 右からの位置 */
  var fromBottom = 5; /* 下からの位置 */
  /* 起動後、すぐにスクロールを開始する */
  var doneImmediately = 1; /* 0:開始しない, 1:開始する */
  var buttonCSS = '#ohajiki-auto-scrolling { width: ' + diameter + 'px !important; height: ' + diameter + 'px !important; border-radius: ' + diameter * 0.5 + 'px !important; border: 1px solid #ccc !important; background: rgba(255,255,255,0.8) !important; font-size: ' + diameter * 0.5 + 'px !important; text-align: center !important; line-height: ' + diameter + 'px !important; position: fixed !important; z-index: 99999 !important; bottom: ' + fromBottom + 'px !important; right: ' + fromRight + 'px !important; cursor: pointer !important; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }';

  var htmlNode = d.getElementsByTagName('html')[0];
  var style = d.createElement('style');
  var styleID = 'ohajiki-user-stylesheet-for-auto-scrolling';
  var oldStyle = d.getElementById(styleID);
  if (oldStyle) return;
  style.id = styleID;
  style.textContent = buttonCSS;
  htmlNode.appendChild(style);

  var button = d.createElement('div');
  button.id = 'ohajiki-auto-scrolling';
  button.textContent = buttonTextOff;
  htmlNode.appendChild(button);

  var autoScrollingInterval = null;
  var toggleAutoScrolling = function(){
    if (autoScrollingInterval) {
      button.textContent = buttonTextOff;
      clearInterval(autoScrollingInterval);
      autoScrollingInterval = null;
    } else {
      button.textContent = buttonTextOn;
      autoScrollingInterval = setInterval(function(){
        var oX = window.pageXOffset;
        var oY = window.pageYOffset;
        window.scrollTo(oX, oY+scrollAmount);
        /* Stop at the bottom of a web page.
           Some sites return wrong height.
        var maxH = d.body.clientHeight;
        var winH = window.innerHeight;
        if (winH + oY >= maxH) {
          toggleAutoScrolling();
        }
        */
      }, scrollSpeed);
    }
  };

  if (doneImmediately) toggleAutoScrolling();

  var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
  var eventName1 = isTouchDevice ? 'touchstart' : 'mousedown';
  var eventName2 = isTouchDevice ? 'touchend'   : 'mouseup';
  var eventName3 = isTouchDevice ? 'touchmove'  : 'mousemove';
  var holdingTimer;
  var offset = {x: 0, y: 0};
  button.isHolded = false;
  button.addEventListener(eventName1, function(e){
    clearTimeout(holdingTimer);
    holdingTimer = setTimeout(function(){
      if (autoScrollingInterval) {
        toggleAutoScrolling();
      }
      offset.x = window.pageXOffset;
      offset.y = window.pageYOffset;
      button.style.transition = '0.3s';
      button.style.boxShadow = '0 0 6px #999';
      setTimeout(function(){ button.style.transition = ''; }, 350);
      button.isHolded = true;
    }, 400);
    e.preventDefault();
    e.stopPropagation();
  });
  button.addEventListener(eventName2, function(e){
    clearTimeout(holdingTimer);
    if (!button.isHolded) {
      toggleAutoScrolling();
    }
  });
  d.addEventListener(eventName2, function(){
    if (!button.isHolded) return;
    clearTimeout(holdingTimer);
    button.style.transition = '0.3s';
    button.style.boxShadow = 'none';
    setTimeout(function(){ button.style.transition = ''; }, 350);
    button.isHolded = false;
  });
  d.addEventListener(eventName3, function(e){
    if (!button.isHolded) return;
    var pX, pY;
    pX = e.pageX;
    pY = e.pageY;
    pX -= offset.x;
    pY -= offset.y;
    button.style.left = (pX - diameter * 0.5) + 'px';
    button.style.top = (pY - diameter * 0.5) + 'px';
  });

})(document);