[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-aphront-crop
   3   * @requires javelin-behavior
   4   *           javelin-dom
   5   *           javelin-vector
   6   *           javelin-magical-init
   7   */
   8  
   9   JX.behavior('aphront-crop', function(config) {
  10  
  11    var dragging = false;
  12    var startX, startY;
  13    var finalX, finalY;
  14  
  15    var cropBox = JX.$(config.cropBoxID);
  16    var basePos = JX.$V(cropBox);
  17    cropBox.style.height = config.height + 'px';
  18    cropBox.style.width = config.width + 'px';
  19    var baseD = JX.$V(config.width, config.height);
  20  
  21    var image = JX.DOM.find(cropBox, 'img', 'crop-image');
  22    image.style.height = (config.imageH * config.scale) + 'px';
  23    image.style.width = (config.imageW * config.scale) + 'px';
  24    var imageD = JX.$V(
  25      config.imageW * config.scale,
  26      config.imageH * config.scale
  27    );
  28    var minLeft = baseD.x - imageD.x;
  29    var minTop = baseD.y - imageD.y;
  30  
  31    var ondrag = function(e) {
  32      e.kill();
  33      dragging = true;
  34      var p = JX.$V(e);
  35      startX = p.x;
  36      startY = p.y;
  37    };
  38  
  39    var onmove = function(e) {
  40      if (!dragging) {
  41        return;
  42      }
  43      e.kill();
  44  
  45      var p = JX.$V(e);
  46      var dx = startX - p.x;
  47      var dy = startY - p.y;
  48      var imagePos = JX.$V(image);
  49      var moveLeft = imagePos.x - basePos.x - dx;
  50      var moveTop = imagePos.y - basePos.y - dy;
  51  
  52      image.style.left = Math.min(Math.max(minLeft, moveLeft), 0) + 'px';
  53      image.style.top = Math.min(Math.max(minTop, moveTop), 0) + 'px';
  54  
  55      // reset these; a new beginning!
  56      startX = p.x;
  57      startY = p.y;
  58  
  59      // save off where we are right now
  60      imagePos = JX.$V(image);
  61      finalX = Math.abs(imagePos.x - basePos.x);
  62      finalY = Math.abs(imagePos.y - basePos.y);
  63      JX.DOM.find(cropBox, 'input', 'crop-x').value = finalX;
  64      JX.DOM.find(cropBox, 'input', 'crop-y').value = finalY;
  65    };
  66  
  67    var ondrop = function() {
  68      if (!dragging) {
  69        return;
  70      }
  71      dragging = false;
  72    };
  73  
  74    // NOTE: Javelin does not dispatch mousemove by default.
  75    JX.enableDispatch(cropBox, 'mousemove');
  76  
  77    JX.DOM.listen(cropBox, 'mousedown', [],  ondrag);
  78    JX.DOM.listen(cropBox, 'mousemove', [],  onmove);
  79    JX.DOM.listen(cropBox, 'mouseup',   [],  ondrop);
  80    JX.DOM.listen(cropBox, 'mouseout',  [],  ondrop);
  81  
  82  });