voltron-crop 0.1.3

data/app/assets/javascripts/simple-slider.js

@@ -0,0 +1,363 @@
+/*
+ jQuery Simple Slider
+
+ Copyright (c) 2012 James Smith (http://loopj.com)
+
+ Licensed under the MIT license (http://mit-license.org/)
+*/
+
+var __slice = [].slice,
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+(function($, window) {
+  var SimpleSlider;
+  SimpleSlider = (function() {
+
+    function SimpleSlider(input, options) {
+      var ratio,
+        _this = this;
+      this.input = input;
+      this.defaultOptions = {
+        animate: true,
+        snapMid: false,
+        classPrefix: null,
+        classSuffix: null,
+        theme: null,
+        highlight: false
+      };
+      this.settings = $.extend({}, this.defaultOptions, options);
+      if (this.settings.theme) {
+        this.settings.classSuffix = "-" + this.settings.theme;
+      }
+      this.input.hide();
+      this.slider = $("<div>").addClass("slider" + (this.settings.classSuffix || "")).css({
+        position: "relative",
+        userSelect: "none",
+        boxSizing: "border-box"
+      }).insertBefore(this.input);
+      if (this.input.attr("id")) {
+        this.slider.attr("id", this.input.attr("id") + "-slider");
+      }
+      this.track = this.createDivElement("track").css({
+        width: "100%"
+      });
+      if (this.settings.highlight) {
+        this.highlightTrack = this.createDivElement("highlight-track").css({
+          width: "0"
+        });
+      }
+      this.dragger = this.createDivElement("dragger");
+      this.slider.css({
+        minHeight: this.dragger.outerHeight(),
+        marginLeft: this.dragger.outerWidth() / 2,
+        marginRight: this.dragger.outerWidth() / 2
+      });
+      this.track.css({
+        marginTop: this.track.outerHeight() / -2
+      });
+      if (this.settings.highlight) {
+        this.highlightTrack.css({
+          marginTop: this.track.outerHeight() / -2
+        });
+      }
+      this.dragger.css({
+        marginTop: this.dragger.outerHeight() / -2,
+        marginLeft: this.dragger.outerWidth() / -2
+      });
+      this.track.mousedown(function(e) {
+        return _this.trackEvent(e);
+      });
+      if (this.settings.highlight) {
+        this.highlightTrack.mousedown(function(e) {
+          return _this.trackEvent(e);
+        });
+      }
+      this.dragger.mousedown(function(e) {
+        if (e.which !== 1) {
+          return;
+        }
+        _this.dragging = true;
+        _this.dragger.addClass("dragging");
+        _this.domDrag(e.pageX, e.pageY);
+        return false;
+      });
+      $("body").mousemove(function(e) {
+        if (_this.dragging) {
+          _this.domDrag(e.pageX, e.pageY);
+          return $("body").css({
+            cursor: "pointer"
+          });
+        }
+      }).mouseup(function(e) {
+        if (_this.dragging) {
+          _this.dragging = false;
+          _this.dragger.removeClass("dragging");
+          return $("body").css({
+            cursor: "auto"
+          });
+        }
+      });
+      this.pagePos = 0;
+      if (this.input.val() === "") {
+        this.value = this.getRange().min;
+        this.input.val(this.value);
+      } else {
+        this.value = this.nearestValidValue(this.input.val());
+      }
+      this.setSliderPositionFromValue(this.value);
+      ratio = this.valueToRatio(this.value);
+      this.input.trigger("slider:ready", {
+        value: this.value,
+        ratio: ratio,
+        position: ratio * this.slider.outerWidth(),
+        el: this.slider
+      });
+    }
+
+    SimpleSlider.prototype.createDivElement = function(classname) {
+      var item;
+      item = $("<div>").addClass(classname).css({
+        position: "absolute",
+        top: "50%",
+        userSelect: "none",
+        cursor: "pointer"
+      }).appendTo(this.slider);
+      return item;
+    };
+
+    SimpleSlider.prototype.setRatio = function(ratio) {
+      var value;
+      ratio = Math.min(1, ratio);
+      ratio = Math.max(0, ratio);
+      value = this.ratioToValue(ratio);
+      this.setSliderPositionFromValue(value);
+      return this.valueChanged(value, ratio, "setRatio");
+    };
+
+    SimpleSlider.prototype.setValue = function(value) {
+      var ratio;
+      value = this.nearestValidValue(value);
+      ratio = this.valueToRatio(value);
+      this.setSliderPositionFromValue(value);
+      return this.valueChanged(value, ratio, "setValue");
+    };
+
+    SimpleSlider.prototype.trackEvent = function(e) {
+      if (e.which !== 1) {
+        return;
+      }
+      this.domDrag(e.pageX, e.pageY, true);
+      this.dragging = true;
+      return false;
+    };
+
+    SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
+      var pagePos, ratio, value;
+      if (animate == null) {
+        animate = false;
+      }
+      pagePos = pageX - this.slider.offset().left;
+      pagePos = Math.min(this.slider.outerWidth(), pagePos);
+      pagePos = Math.max(0, pagePos);
+      if (this.pagePos !== pagePos) {
+        this.pagePos = pagePos;
+        ratio = pagePos / this.slider.outerWidth();
+        value = this.ratioToValue(ratio);
+        this.valueChanged(value, ratio, "domDrag");
+        if (this.settings.snap) {
+          return this.setSliderPositionFromValue(value, animate);
+        } else {
+          return this.setSliderPosition(pagePos, animate);
+        }
+      }
+    };
+
+    SimpleSlider.prototype.setSliderPosition = function(position, animate) {
+      if (animate == null) {
+        animate = false;
+      }
+      if (animate && this.settings.animate) {
+        this.dragger.animate({
+          left: position
+        }, 200);
+        if (this.settings.highlight) {
+          return this.highlightTrack.animate({
+            width: position
+          }, 200);
+        }
+      } else {
+        this.dragger.css({
+          left: position
+        });
+        if (this.settings.highlight) {
+          return this.highlightTrack.css({
+            width: position
+          });
+        }
+      }
+    };
+
+    SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) {
+      var ratio;
+      if (animate == null) {
+        animate = false;
+      }
+      ratio = this.valueToRatio(value);
+      return this.setSliderPosition(ratio * this.slider.outerWidth(), animate);
+    };
+
+    SimpleSlider.prototype.getRange = function() {
+      if (this.settings.allowedValues) {
+        return {
+          min: Math.min.apply(Math, this.settings.allowedValues),
+          max: Math.max.apply(Math, this.settings.allowedValues)
+        };
+      } else if (this.settings.range) {
+        return {
+          min: parseFloat(this.settings.range[0]),
+          max: parseFloat(this.settings.range[1])
+        };
+      } else {
+        return {
+          min: 0,
+          max: 1
+        };
+      }
+    };
+
+    SimpleSlider.prototype.nearestValidValue = function(rawValue) {
+      var closest, maxSteps, range, steps;
+      range = this.getRange();
+      rawValue = Math.min(range.max, rawValue);
+      rawValue = Math.max(range.min, rawValue);
+      if (this.settings.allowedValues) {
+        closest = null;
+        $.each(this.settings.allowedValues, function() {
+          if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) {
+            return closest = this;
+          }
+        });
+        return closest;
+      } else if (this.settings.step) {
+        maxSteps = (range.max - range.min) / this.settings.step;
+        steps = Math.floor((rawValue - range.min) / this.settings.step);
+        if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) {
+          steps += 1;
+        }
+        return steps * this.settings.step + range.min;
+      } else {
+        return rawValue;
+      }
+    };
+
+    SimpleSlider.prototype.valueToRatio = function(value) {
+      var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref;
+      if (this.settings.equalSteps) {
+        _ref = this.settings.allowedValues;
+        for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
+          allowedVal = _ref[idx];
+          if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) {
+            closest = allowedVal;
+            closestIdx = idx;
+          }
+        }
+        if (this.settings.snapMid) {
+          return (closestIdx + 0.5) / this.settings.allowedValues.length;
+        } else {
+          return closestIdx / (this.settings.allowedValues.length - 1);
+        }
+      } else {
+        range = this.getRange();
+        return (value - range.min) / (range.max - range.min);
+      }
+    };
+
+    SimpleSlider.prototype.ratioToValue = function(ratio) {
+      var idx, range, rawValue, step, steps;
+      if (this.settings.equalSteps) {
+        steps = this.settings.allowedValues.length;
+        step = Math.round(ratio * steps - 0.5);
+        idx = Math.min(step, this.settings.allowedValues.length - 1);
+        return this.settings.allowedValues[idx];
+      } else {
+        range = this.getRange();
+        rawValue = ratio * (range.max - range.min) + range.min;
+        return this.nearestValidValue(rawValue);
+      }
+    };
+
+    SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) {
+      var eventData;
+      if (value.toString() === this.value.toString()) {
+        return;
+      }
+      this.value = value;
+      eventData = {
+        value: value,
+        ratio: ratio,
+        position: ratio * this.slider.outerWidth(),
+        trigger: trigger,
+        el: this.slider
+      };
+      return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
+    };
+
+    return SimpleSlider;
+
+  })();
+  $.extend($.fn, {
+    simpleSlider: function() {
+      var params, publicMethods, settingsOrMethod;
+      settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+      publicMethods = ["setRatio", "setValue"];
+      return $(this).each(function() {
+        var obj, settings;
+        if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) {
+          obj = $(this).data("slider-object");
+          return obj[settingsOrMethod].apply(obj, params);
+        } else {
+          settings = settingsOrMethod;
+          return $(this).data("slider-object", new SimpleSlider($(this), settings));
+        }
+      });
+    }
+  });
+  return $(function() {
+    return $("[data-slider]").each(function() {
+      var $el, allowedValues, settings, x;
+      $el = $(this);
+      settings = {};
+      allowedValues = $el.data("slider-values");
+      if (allowedValues) {
+        settings.allowedValues = (function() {
+          var _i, _len, _ref, _results;
+          _ref = allowedValues.split(",");
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            x = _ref[_i];
+            _results.push(parseFloat(x));
+          }
+          return _results;
+        })();
+      }
+      if ($el.data("slider-range")) {
+        settings.range = $el.data("slider-range").split(",");
+      }
+      if ($el.data("slider-step")) {
+        settings.step = $el.data("slider-step");
+      }
+      settings.snap = $el.data("slider-snap");
+      settings.equalSteps = $el.data("slider-equal-steps");
+      if ($el.data("slider-theme")) {
+        settings.theme = $el.data("slider-theme");
+      }
+      if ($el.attr("data-slider-highlight")) {
+        settings.highlight = $el.data("slider-highlight");
+      }
+      if ($el.data("slider-animate") != null) {
+        settings.animate = $el.data("slider-animate");
+      }
+      return $el.simpleSlider(settings);
+    });
+  });
+})(this.jQuery || this.Zepto, this);

data/app/assets/javascripts/voltron-crop.js

@@ -0,0 +1,233 @@
+//= require voltron
+//= require cropit
+//= require simple-slider
+
+Voltron.addModule('Crop', function(){
+
+  var Crop = function(options, config){
+
+    var _positioned = false;
+
+    var configDefaults = {
+      preview: $('<div />', { class: 'cropit-preview' }),
+      input: $('<input />', { type: 'file', class: 'cropit-input' }),
+      zoom: $('<input />', { type: 'text', class: 'cropit-zoom' }),
+      fileInput: null,
+      container: null,
+      image: null
+    };
+
+    var cropDefaults = {
+      imageBackground: true,
+      imageBackgroundBorderWidth: 100,
+      width: 300,
+      height: 300,
+      onImageLoading: function(){
+        var el = this.$fileInput,
+            crop = el.data('crop');
+
+        // If the crop class exists on the element, store the current zoom value so
+        // we can pick it up later in onImageLoaded callback
+        if(crop){
+          Voltron.dispatch('crop:loading', { crop: crop, element: el.get(0) });
+          el.data('last_zoom', parseFloat(crop.getZoom().val()));
+        }
+      },
+      onImageLoaded: function(){
+        // Reset the zoom value to what it was before,
+        // then trigger a change event on the input so the image is properly resized
+        var el = this.$fileInput,
+            crop = el.data('crop'),
+            zoom = el.data('last_zoom');
+
+        if(crop && zoom){
+          Voltron.dispatch('crop:loaded', { crop: crop, element: el.get(0), data: { zoom: zoom } });
+          crop.getZoom().simpleSlider('setRatio', zoom);
+          crop.getZoom().data('sliderObject').input.val(zoom).trigger('change');
+          crop.setPosition();
+        }
+      }
+    };
+
+    config = $.extend(configDefaults, config);
+    options = $.extend(cropDefaults, options);
+
+    return {
+      initialize: function(){
+        // When the form is submitted, gather the x, y, width, height, zoom inputs
+        this.getFileInput().closest('form').on('submit', $.proxy(this.update, this))
+        // Add the crop html
+        this.getFileInput().before(this.getCropContainer());
+        // Initiate the zoom slider
+        this.getZoom().simpleSlider();
+
+        // If a cached file is present (form was submitted, but page re-rendered, possibly due to failed validation), include the input
+        if(this.getFileInput().data('crop-cache')){
+          this.getCropContainer().prepend($('<input />', { type: 'hidden', name: this.getName('cache'), value: this.getFileInput().data('crop-cache') }));
+        }
+
+        // If a zoom level was passed, set the slider to the specified zoom level
+        if(this.getFileInput().data('crop-zoom')){
+          this.getZoom().data('sliderObject').input.val(this.getFileInput().data('crop-zoom')).trigger('change');
+        }
+
+        // Include self on the file input element's data
+        this.getFileInput().data('crop', this);
+      },
+
+      update: function(){
+        var dimensions = this.getDimensions(),
+            zoom = parseFloat(this.getZoom().val());
+
+        this.getCropContainer().find('.' + this.getFieldName() + '-crop-dimension-x').val(dimensions.x);
+        this.getCropContainer().find('.' + this.getFieldName() + '-crop-dimension-y').val(dimensions.y);
+        this.getCropContainer().find('.' + this.getFieldName() + '-crop-dimension-w').val(dimensions.w);
+        this.getCropContainer().find('.' + this.getFieldName() + '-crop-dimension-h').val(dimensions.h);
+        this.getCropContainer().find('.' + this.getFieldName() + '-crop-zoom').val(zoom);
+      },
+
+      getDimensions: function(){
+        var imageBg = this.getCropObject().$bg,
+            borderWidth = this.getCropObject().bgBorderWidthArray,
+            cropImage = this.getCropContainer().cropit('imageSize'),
+            cropWindow = this.getCropContainer().cropit('previewSize'),
+            zoom = this.getCropContainer().cropit('zoom'),
+            cropPosition = imageBg.position(),
+            cropPercentX = Math.abs(cropPosition.left-borderWidth[3])/(cropImage.width*zoom),
+            cropPercentY = Math.abs(cropPosition.top-borderWidth[0])/(cropImage.height*zoom),
+            cropPercentW = cropWindow.width/(cropImage.width*zoom),
+            cropPercentH = cropWindow.height/(cropImage.height*zoom),
+            positionX = Math.abs(cropPosition.left-borderWidth[3]),
+            positionY = Math.abs(cropPosition.top-borderWidth[0]),
+            cropX = cropImage.width*cropPercentX,
+            cropY = cropImage.height*cropPercentY,
+            cropW = cropImage.width*cropPercentW,
+            cropH = cropImage.height*cropPercentH;
+
+        return { x: cropX, y: cropY, w: cropW, h: cropH };
+      },
+
+      setPosition: function(){
+        // Only set the position of the image once, after the initial image is loaded
+        // For additionl uploads the default positioning should be used
+        if(!_positioned){
+          var cropImage = this.getCropContainer().cropit('imageSize'),
+              x = this.getFileInput().data('crop-x'),
+              y = this.getFileInput().data('crop-y'),
+              zoom = this.getCropContainer().cropit('zoom');
+
+          x = ((cropImage.width*zoom)*x)/cropImage.width;
+          y = ((cropImage.height*zoom)*y)/cropImage.height;
+
+          if(!isNaN(parseFloat(x)) && !isNaN(parseFloat(y))){
+            this.getCropContainer().cropit('offset', { x: -x, y: -y });
+          }
+          _positioned = true;
+        }
+      },
+
+      getName: function(field){
+        return $(config.fileInput).attr('name').replace(/([a-z0-9_]+)\]$/i, '$1_' + field + ']');
+      },
+
+      getFieldName: function(){
+        return $(config.fileInput).attr('name').replace(/.*\[([a-z0-9_]+)\]$/i, '$1');
+      },
+
+      getImage: function(){
+        return this.getCropContainer().cropit('imageSrc');
+      },
+
+      setImage: function(path){
+        this.getCropContainer().cropit('imageSrc', Voltron.getBaseUrl() + path);
+      },
+
+      getZoom: function(){
+        return $(config.zoom);
+      },
+
+      getFileInput: function(){
+        return $(config.fileInput);
+      },
+
+      getPreview: function(){
+        return $(config.preview);
+      },
+
+      getDimensionInput: function(){
+        var content = $('<div />');
+        content.append($('<input />', { type: 'hidden', name: this.getName('x'), class: this.getFieldName() + '-crop-dimension-x' }));
+        content.append($('<input />', { type: 'hidden', name: this.getName('y'), class: this.getFieldName() + '-crop-dimension-y' }));
+        content.append($('<input />', { type: 'hidden', name: this.getName('w'), class: this.getFieldName() + '-crop-dimension-w' }));
+        content.append($('<input />', { type: 'hidden', name: this.getName('h'), class: this.getFieldName() + '-crop-dimension-h' }));
+        content.append($('<input />', { type: 'hidden', name: this.getName('zoom'), class: this.getFieldName() + '-crop-zoom' }));
+        return content.html();
+      },
+
+      getConfig: function(){
+        return $.extend(options, {
+          imageState: { src: config.image },
+          minZoom: 0,
+          maxZoom: 2,
+          freeMove: false,
+          $preview: this.getPreview(),
+          $fileInput: this.getFileInput(),
+          $zoomSlider: this.getZoom()
+        });
+      },
+
+      getCropContainer: function(){
+        if(config.container === null){
+          config.container = $('<div />', { class: 'cropit-container' });
+          config.container.append(this.getDimensionInput());
+          config.container.append(this.getPreview());
+          config.container.append($('<div />', { class: 'zoom-container' }).append(this.getZoom()));
+
+          config.container.cropit(this.getConfig());
+
+          var borderWidth = config.container.data('cropit').bgBorderWidthArray;
+
+          this.getPreview().css({
+            marginTop: borderWidth[0],
+            marginRight: borderWidth[1],
+            marginBottom: borderWidth[2],
+            marginLeft: borderWidth[3]
+          });
+        }
+        return config.container;
+      },
+
+      getCropObject: function(){
+        return this.getCropContainer().data('cropit');
+      }
+    };
+  };
+
+  return {
+    initialize: function(){
+      $('input[data-crop-image]').each(function(){
+        var crop = Voltron('Crop/new', $(this).data('crop-options'), $.extend({ fileInput: this, image: $(this).data('crop-image') }, $(this).data('crop-config')));
+        crop.initialize();
+      });
+    },
+
+    new: function(options, config){
+      return new Crop(options, config);
+    },
+
+    // START: Compatibility with Voltron Upload module
+    // Ensures the crop container is created before the Upload dropzone is instantiated.
+    onBeforeModuleInitializeUpload: function(o){
+      this.initialize();
+    },
+
+    // Updates the crop image when an upload is completed
+    onUploadComplete: function(o){
+      var crop = $(o.element).data('crop');
+      if(o.data.uploads && crop){
+        crop.setImage(o.data.uploads.first().url);
+      }
+    }
+    // END: Compatibility with Voltron Upload module
+  };
+}, true);