Mercurial > tiny-letterpress

<html>
<head>
<style type="text/css">
body {
  font-family: Palatino;
}

div.letter {
  -webkit-transition-property: -webkit-transform, color;
  -webkit-transition-duration: 0.1s, 0.2s;
  -webkit-transition-timing-function: linear;
  position: absolute;
  cursor: pointer;
  font-size: 144pt;
}

div.letter .info {
  font-family: Futura, Helvetica;
  white-space: pre;
  font-size: 9pt;
}

div.letter.active {
  color: red;
}
</style>
</head>
<body>
<div class="letter">u<div class="info"></div></div>
<div class="letter">m<div class="info"></div></div>
<script>
if (typeof Array.isArray !== 'function') {
  Array.isArray = function (value) {
    return Object.prototype.toString.call(value) === '[object Array]';
  };
}

function $(selector) {
  return new $.fn.init(selector);
}

$.fn = $.prototype = {
  _qsa: function qsa(selector, element) {
    if (element === undefined)
      element = document;
    var nodeList = element.querySelectorAll(selector);
    var array = [];
    for (var i = 0; i < nodeList.length; i++) {
      array.push(nodeList[i]);
    }
    return array;
  },
  length: 0,
  init: function init(selector) {
    if (typeof(selector) == "string") {
      this.elems = this._qsa(selector);
    } else {
      if (Array.isArray(selector)) {
        this.elems = selector;
      } else
        this.elems = [selector];
    }
    this.length = this.elems.length;
  },
  get: function(i) {
    if (i !== undefined)
      return this.elems[i];
    return this.elems;
  },
  bind: function(name, handler) {
    this.elems.forEach(function(elem) {
     elem.addEventListener(name, handler, false);
    });
  },
  css: function(options) {
    this.elems.forEach(function(elem) {
      for (name in options)
        elem.style.setProperty(name, options[name], null);
    });
  },
  removeClass: function(name) {
    this.elems.forEach(function(elem) {
      var classes = elem.className.split(" ");
      var index = classes.indexOf(name);
      if (index != -1) {
        classes.splice(index, 1);
        elem.className = classes.join(" ");
      }
    });
  },
  addClass: function(name) {
    this.elems.forEach(function(elem) {
      var classes = elem.className.split(" ");
      var index = classes.indexOf(name);
      if (index == -1) {
        classes.push(name);
        elem.className = classes.join(" ");
      }
    });
  },
  toggleClass: function(name) {
    this.elems.forEach(function(elem) {
      var classes = elem.className.split(" ");
      var index = classes.indexOf(name);
      if (index == -1)
        classes.push(name);
      else
        classes.splice(index, 1);
      elem.className = classes.join(" ");
    });
  },
  text: function(text) {
    if (text === undefined)
      return this.elems[0].textContent;
    this.elems.forEach(function(elem) {
      elem.textContent = text;
    });
  },
  find: function(selector) {
    var self = this;
    var array = [];
    this.elems.forEach(function(elem) {
      array = array.concat(self._qsa(selector, elem));
    });
    return new this.init(array);
  },
  each: function(cb) {
    this.elems.forEach(function(elem) { cb.call(elem); });
  }
};

$.fn.init.prototype = $.fn;

function makeDraggable() {
  var node = this;
  var startX = 0;
  var startY = 0;
  var currX = 0;
  var currY = 0;
  var matrix = new WebKitCSSMatrix();

  function updateInfo() {
    var msg = "";
    if (isMouseDown)
      msg = "x: " + matrix.e + "\ny: " + matrix.f;
    $(node).find(".info").text(msg);
  }

  function move() {
    matrix = matrix.translate(currX - startX, currY - startY);
    node.style.webkitTransform = matrix;
  }

  updateInfo();

  if (!isTouchSupported) {
    var isMouseDown = false;

    $(node).bind("mousedown", function(event) {
      event.preventDefault();
      startX = event.clientX;
      startY = event.clientY;
      isMouseDown = true;
      $(this).addClass("active");
      updateInfo();
    });

    $(node).bind("mousemove", function(event) {
      if (isMouseDown) {
        currX = event.clientX;
        currY = event.clientY;
        move(this);
        startX = currX;
        startY = currY;
        updateInfo();
      }
    });

    function maybeDeactivate(event) {
      if (isMouseDown) {
        event.preventDefault();
        isMouseDown = false;
        $(this).removeClass("active");
        updateInfo();
      }
    }

    $(node).bind("mouseout", maybeDeactivate);
    $(node).bind("mouseup", maybeDeactivate);
  } else {
    $(node).bind("touchstart", function(event) {
      event.preventDefault();
      startX = event.targetTouches[0].pageX;
      startY = event.targetTouches[0].pageY;
      updateInfo();
      $(this).addClass("active");
    });

    $(node).bind("touchmove", function(event) {
      event.preventDefault();
      currX = event.targetTouches[0].pageX;
      currY = event.targetTouches[0].pageY;
      move(this);
      startX = currX;
      startY = currY;
      updateInfo();
    });

    $(node).bind("touchend", function(event) {
      event.preventDefault();
      $(this).removeClass("active");
    });
  }
}

var isTouchSupported = (function isTouchSupported() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    if (e.code != e.NOT_SUPPORTED_ERR)
      throw e;
    return false;
  }
})();

$(window).bind("DOMContentLoaded", function() {
  $(".letter").each(makeDraggable);
});
</script>
</body>
</html>
author	Atul Varma <avarma@mozilla.com>
date	Sun, 02 May 2010 04:23:55 -0700
parents	293976bb90c5
children	f7ed81674650