jquery-cropper 0.3.4

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZWE3ZjkxZjhlODNlMmE4ZGQ3OWZmMWY4OThkNDg5MmViYWUxZDhiYQ==
+  data.tar.gz: !binary |-
+    NWMwMGRkZDM0MTJkNzhjMTJlMDk3MmYzMmMzYmZjOWQxMzdhMDM3Mw==
+SHA512:
+  metadata.gz: !binary |-
+    YjM5MTg4N2QzOGY2YThhOWM2ZGQyMWQ1ZGU2ZTk5OTNjM2UxNzNmNTdiZGM1
+    MWNjNWEyMThiYzNhODY4MzkyNDkxNjFlYTU4ZmMwMmUxYThmODIwYjg1MTY5
+    NDUxMGNkMGQ4ODYzODhjNDdmNDMwNDBhYjRlNTYwNzRlZjFjZWQ=
+  data.tar.gz: !binary |-
+    MjI3YjhiMzQ1ZjU2YWM3NmZkZDY0M2FhOGYwM2NmMGZhNDAyNDM1MTFjYzk4
+    ZjcxNWQyNzU2NzkyNTY3MmVjYjEwNWZiY2U1ZmMxOGU4ZjU1YjUyZmM2Njhj
+    ODRkYmVhNDgxZTNhNmFkNTE1ZDQ2YjFjMDJkNzFlOGMzNTBjZjU=

data/.gemspec

@@ -0,0 +1,11 @@
+Gem::Specification.new do |s|
+  s.name        = 'jquery-cropper'
+  s.version     = '0.0.1'
+  s.license     = "MIT"
+  s.summary     = "Wrapper for jquery cropper plugin"
+  s.description = "Provides ability to use jquery cropper plugin through assets pipeline"
+  s.authors     = ["Vitaliy Yanchuk"]
+  s.email       = 'vitaliy@yanchuk.me'
+  s.files       = `git ls-files`.split("\n")
+  s.homepage    = 'https://github.com/fuksito/jquery-cropper'
+end

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Vitaliy Yanchuk
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Jquery::Cropper
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'jquery-cropper'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jquery-cropper
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( http://github.com/<my-github-username>/jquery-cropper/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/cropper.js

@@ -0,0 +1,778 @@
+(function (factory) {
+    if (typeof define === "function" && define.amd) {
+        // AMD. Register as anonymous module.
+        define(["jquery"], factory);
+    } else {
+        // Browser globals.
+        factory(jQuery);
+    }
+})(function ($) {
+
+    "use strict";
+
+    var $window = $(window),
+        Cropper = function (element, options) {
+            options = $.isPlainObject(options) ? options : {};
+            this.$image = $(element);
+            this.defaults = $.extend({}, Cropper.defaults, this.$image.data(), options);
+            this.init();
+        };
+
+    Cropper.prototype = {
+        construstor: Cropper,
+
+        init: function () {
+            this.setAspectRatio(this.defaults.aspectRatio);
+            this.render();
+        },
+
+        render: function (callback) {
+            var _this = this,
+                $image = this.$image,
+                $clone,
+                src;
+
+            if (this.active) {
+                return;
+            }
+
+            if (this.$clone) {
+                this.$clone.remove(); // Remove the old clone
+            }
+
+            src = $image.attr("src"); // Don't use "prop"
+            $clone = $('<img src="' + src + '">');
+
+            $clone.on("load", function () {
+                var image;
+
+                $clone.off("load");
+
+                if (this.naturalWidth && this.naturalHeight) {
+                    image = {
+                        naturalHeight: this.naturalHeight,
+                        naturalWidth: this.naturalWidth
+                    };
+                } else {
+                    Cropper.fn.size($clone, {
+                        height: "auto",
+                        width: "auto"
+                    });
+
+                    image = Cropper.fn.size($clone);
+                    image = {
+                        naturalHeight: image.height,
+                        naturalWidth: image.width
+                    };
+                }
+
+                Cropper.fn.size($clone, {
+                    height: "100%",
+                    width: "100%"
+                });
+
+                image.aspectRatio = image.naturalWidth / image.naturalHeight;
+                _this.src = src;
+                _this.image = image;
+                _this.active = true;
+                _this.createCropper();
+            });
+
+            if ($.isFunction(callback)) {
+                $image.on("ready.cropper", callback);
+            }
+
+            this.$clone = $clone;
+            $image.after($clone);
+        },
+
+        unrender: function () {
+            if (this.active) {
+                this.active = false;
+                this.removeCropper();
+                this.src = "";
+                this.image = null;
+                this.cropper = null;
+                this.dragger = null;
+            }
+
+            return this;
+        },
+
+        rerender: function (reset) {
+            var _this = this;
+
+            this.unrender().render(function () {
+                if (!reset) {
+                    _this.setData(_this.data); // Restore
+                }
+            });
+        },
+
+        resize: function () {
+            this.data = this.getData(); // Record the current data
+            clearTimeout(this.resizing);
+            this.resizing = setTimeout($.proxy(this.rerender, this), 200);
+        },
+
+        createCropper: function () {
+            this.$cropper = $(Cropper.template);
+            this.$dragger = this.$cropper.find(".cropper-dragger");
+            Cropper.fn.toggle(this.$image);
+            this.$image.after(this.$cropper);
+            this.$cropper.prepend(this.$clone);
+
+            if (!this.defaults.modal) {
+                Cropper.fn.toggle(this.$cropper.find(".cropper-modal"));
+            }
+
+            this.setPreview();
+            this.addListener();
+        },
+
+        removeCropper: function () {
+            this.removeListener();
+            this.$preview = null;
+            this.$clone.remove();
+            this.$clone = null;
+            this.$dragger = null;
+            this.$cropper.remove();
+            this.$cropper = null;
+            Cropper.fn.toggle(this.$image);
+        },
+
+        addListener: function () {
+            this.$cropper.bind("mousedown touchstart", $.proxy(this.dragstart, this));
+            this.$cropper.bind("mousemove touchmove", $.proxy(this.dragmove, this));
+            this.$cropper.bind("mouseup mouseleave touchend touchleave", $.proxy(this.dragend, this));
+            $window.on("resize", $.proxy(this.resize, this));
+        },
+
+        removeListener: function () {
+            this.$cropper.unbind("mousedown touchstart", this.dragstart);
+            this.$cropper.unbind("mousemove touchmove", this.dragmove);
+            this.$cropper.unbind("mouseup mouseleave touchend touchleave", this.dragend);
+            $window.off("resize", this.resize);
+        },
+
+        setPreview: function () {
+            var preview = this.defaults.preview;
+
+            this.$preview = this.$cropper.find(".cropper-preview");
+
+            if (typeof preview === "string" && preview.length > 0) {
+                this.$preview = this.$preview.add(preview);
+            }
+
+            this.$preview.html('<img src="' + this.src + '">');
+            this.setCropper();
+        },
+
+        setCropper: function () {
+            var $container = this.$image.parent(),
+                container = Cropper.fn.size($container),
+                image = this.image,
+                cropper;
+
+            if (((image.naturalWidth * container.height / image.naturalHeight) - container.width) >= 0) {
+                cropper = {
+                    height: container.width / image.aspectRatio,
+                    width: container.width,
+                    left: 0
+                };
+
+                cropper.top = (container.height - cropper.height) / 2;
+            } else {
+                cropper = {
+                    height: container.height,
+                    width: container.height * image.aspectRatio,
+                    top: 0
+                };
+
+                cropper.left = (container.width - cropper.width) / 2;
+            }
+
+            $.each(cropper, function (i, n) {
+                cropper[i] = Math.round(n);
+            });
+
+            image.height = cropper.height;
+            image.width = cropper.width;
+            image.ratio = image.width / image.naturalWidth;
+
+            Cropper.fn.position($container);
+            this.$cropper.css({
+                height: cropper.height,
+                left: cropper.left,
+                top: cropper.top,
+                width: cropper.width
+            });
+
+            this.cropper = cropper;
+            this.setDragger();
+        },
+
+        setDragger: function () {
+            var cropper = this.cropper,
+                // If not set, use the original aspect ratio of the image.
+                aspectRatio = this.defaults.aspectRatio || this.image.aspectRatio,
+                dragger;
+
+            if (((cropper.height * aspectRatio) - cropper.width) >= 0) {
+                dragger = {
+                    height: cropper.width / aspectRatio,
+                    width: cropper.width,
+                    left: 0,
+                    top: (cropper.height - (cropper.width / aspectRatio)) / 2,
+                    maxWidth: cropper.width,
+                    maxHeight: cropper.width / aspectRatio
+                };
+            } else {
+                dragger = {
+                    height: cropper.height,
+                    width: cropper.height * aspectRatio,
+                    left: (cropper.width - (cropper.height * aspectRatio)) / 2,
+                    top: 0,
+                    maxHeight: cropper.height,
+                    maxWidth: cropper.height * aspectRatio
+                };
+            }
+
+            dragger.height *= 0.8;
+            dragger.width *= 0.8;
+
+            dragger.left = (cropper.width - dragger.width) / 2;
+            dragger.top = (cropper.height - dragger.height) / 2;
+
+            this.dragger = Cropper.fn.round(dragger);
+            this.setData(this.defaults.data);
+            this.$image.trigger("ready.cropper").off("ready.cropper");
+        },
+
+        resetDragger: function () {
+            var dragger = this.dragger,
+                cropper = this.cropper;
+
+            dragger.width = dragger.width > dragger.maxWidth ? dragger.maxWidth : Math.abs(dragger.width);
+            dragger.height = dragger.height > dragger.maxHeight ? dragger.maxHeight : Math.abs(dragger.height);
+
+            dragger.maxLeft = cropper.width - dragger.width;
+            dragger.maxTop = cropper.height - dragger.height;
+
+            dragger.left = dragger.left < 0 ? 0 : dragger.left > dragger.maxLeft ? dragger.maxLeft : dragger.left;
+            dragger.top = dragger.top < 0 ? 0 : dragger.top > dragger.maxTop ? dragger.maxTop : dragger.top;
+
+            dragger = Cropper.fn.round(dragger);
+
+            this.$dragger.css({
+                height: dragger.height,
+                left: dragger.left,
+                top: dragger.top,
+                width: dragger.width
+            });
+
+            this.dragger = dragger;
+            this.preview();
+            this.output();
+        },
+
+        dragging: function () {
+            var direction = this.direction,
+                dragger = this.dragger,
+                aspectRatio = this.defaults.aspectRatio,
+                range = {
+                    x: this.endX - this.startX,
+                    y: this.endY - this.startY
+                };
+
+            if (aspectRatio) {
+                range.X = range.y * aspectRatio;
+                range.Y = range.x / aspectRatio;
+            }
+
+            switch (direction) {
+
+                // dragging
+                case "e":
+                    dragger.width += range.x;
+
+                    if (aspectRatio) {
+                        dragger.height = dragger.width / aspectRatio;
+                        dragger.top -= range.Y / 2;
+                    }
+
+                    if (dragger.width < 0) {
+                        this.direction = "w";
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                case "n":
+                    dragger.height -= range.y;
+                    dragger.top += range.y;
+
+                    if (aspectRatio) {
+                        dragger.width = dragger.height * aspectRatio;
+                        dragger.left += range.X / 2;
+                    }
+
+                    if (dragger.height < 0) {
+                        this.direction = "s";
+                        dragger.height = 0;
+                    }
+
+                    break;
+
+                case "w":
+                    dragger.width -= range.x;
+                    dragger.left += range.x;
+
+                    if (aspectRatio) {
+                        dragger.height = dragger.width / aspectRatio;
+                        dragger.top += range.Y / 2;
+                    }
+
+                    if (dragger.width < 0) {
+                        this.direction = "e";
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                case "s":
+                    dragger.height += range.y;
+
+                    if (aspectRatio) {
+                        dragger.width = dragger.height * aspectRatio;
+                        dragger.left -= range.X / 2;
+                    }
+
+                    if (dragger.height < 0) {
+                        this.direction = "n";
+                        dragger.height = 0;
+                    }
+
+                    break;
+
+                case "ne":
+                    dragger.height -= range.y;
+                    dragger.top += range.y;
+
+                    if (aspectRatio) {
+                        dragger.width = dragger.height * aspectRatio;
+                    } else {
+                        dragger.width += range.x;
+                    }
+
+                    if (dragger.height < 0) {
+                        this.direction = "sw";
+                        dragger.height = 0;
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                case "nw":
+                    dragger.height -= range.y;
+                    dragger.top += range.y;
+
+                    if (aspectRatio) {
+                        dragger.width = dragger.height * aspectRatio;
+                        dragger.left += range.X;
+                    } else {
+                        dragger.width -= range.x;
+                        dragger.left += range.x;
+                    }
+
+                    if (dragger.height < 0) {
+                        this.direction = "se";
+                        dragger.height = 0;
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                case "sw":
+                    dragger.width -= range.x;
+                    dragger.left += range.x;
+
+                    if (aspectRatio) {
+                        dragger.height = dragger.width / aspectRatio;
+                    } else {
+                        dragger.height += range.y;
+                    }
+
+                    if (dragger.width < 0) {
+                        this.direction = "ne";
+                        dragger.height = 0;
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                case "se":
+                    dragger.width += range.x;
+
+                    if (aspectRatio) {
+                        dragger.height = dragger.width / aspectRatio;
+                    } else {
+                        dragger.height += range.y;
+                    }
+
+                    if (dragger.width < 0) {
+                        this.direction = "nw";
+                        dragger.height = 0;
+                        dragger.width = 0;
+                    }
+
+                    break;
+
+                // moving
+                default:
+                    dragger.left += range.x;
+                    dragger.top += range.y;
+            }
+
+            this.resetDragger();
+            this.startX = this.endX;
+            this.startY = this.endY;
+        },
+
+        output: function () {
+            this.defaults.done(this.getData());
+        },
+
+        preview: function () {
+            var _this = this,
+                cropper = _this.cropper,
+                dragger = _this.dragger;
+
+            this.$preview.each(function () {
+                var $this = $(this),
+                    ratio = $this.width() / dragger.width,
+                    styles = {
+                        height: cropper.height,
+                        marginLeft: - dragger.left,
+                        marginTop: - dragger.top,
+                        width: cropper.width
+                    };
+
+                $this.css({overflow: "hidden"});
+                $this.find("img").css(Cropper.fn.round(styles, function (n) {
+                    return n * ratio;
+                }));
+            });
+        },
+
+        // Public methods
+
+        enable: function (callback) {
+            this.render(callback);
+        },
+
+        disable: function () {
+            this.unrender();
+        },
+
+        setAspectRatio: function (aspectRatio) {
+            if (aspectRatio === "auto" || ($.isNumeric(aspectRatio) && aspectRatio > 0)) {
+                this.defaults.aspectRatio = aspectRatio === "auto" ? NaN : aspectRatio;
+
+                if (this.active) {
+                    this.setDragger();
+                }
+            }
+        },
+
+        setData: function (data) {
+            var cropper = this.cropper,
+                dragger = this.dragger,
+                aspectRatio = this.defaults.aspectRatio,
+                isNumber = function (n) {
+                    return typeof n === "number";
+                };
+
+            if (!this.active) {
+                return;
+            }
+
+            if ($.isPlainObject(data) && !$.isEmptyObject(data)) {
+                data = Cropper.fn.transformData(data, this.image.ratio);
+
+                if (isNumber(data.x1) && data.x1 <= cropper.width) {
+                    dragger.left = data.x1;
+                }
+
+                if (isNumber(data.y1) && data.y1 <= cropper.height) {
+                    dragger.top = data.y1;
+                }
+
+                if (aspectRatio){
+                    if (isNumber(data.width) && data.width <= cropper.width) {
+                        dragger.width = data.width;
+                        dragger.height = dragger.width / aspectRatio;
+                    } else if (isNumber(data.height) && data.height <= cropper.height) {
+                        dragger.height = data.height;
+                        dragger.width = dragger.height * aspectRatio;
+                    } else if (isNumber(data.x2) && data.x2 <= cropper.width) {
+                        dragger.width = data.x2 - dragger.left;
+                        dragger.height = dragger.width / aspectRatio;
+                    } else if (isNumber(data.y2) && data.y2 <= cropper.height) {
+                        dragger.height = data.y2 - dragger.top;
+                        dragger.width = dragger.height * aspectRatio;
+                    }
+                } else {
+                    if (isNumber(data.width) && data.width <= cropper.width) {
+                        dragger.width = data.width;
+                    } else if (isNumber(data.x2) && data.x2 <= cropper.width) {
+                        dragger.width = data.x2 - dragger.left;
+                    }
+
+                    if (isNumber(data.height) && data.height <= cropper.height) {
+                        dragger.height = data.height;
+                    } else if (isNumber(data.y2) && data.height <= cropper.height) {
+                        dragger.height = data.y2 - dragger.top;
+                    }
+                }
+            }
+
+            this.dragger = dragger;
+            this.resetDragger();
+        },
+
+        getData: function () {
+            var dragger = this.dragger,
+                data = {};
+
+            if (this.active) {
+                data = {
+                    x1: dragger.left,
+                    y1: dragger.top,
+                    width: dragger.width,
+                    height: dragger.height,
+                    x2: dragger.left + dragger.width,
+                    y2: dragger.top + dragger.height
+                };
+
+                data = Cropper.fn.transformData(data, (1 / this.image.ratio));
+            }
+
+            return data;
+        },
+
+        setImgSrc: function (src) {
+            if (typeof src === "string" && src.length > 0 && src !== this.src) {
+                this.$image.attr("src", src);
+                this.rerender(true);
+            }
+        },
+
+        getImgInfo: function () {
+            return this.image || {};
+        },
+
+        // Public events
+
+        dragstart: function (event) {
+            var touches = Cropper.fn.getOriginalEvent(event).touches,
+                e = event,
+                touching,
+                direction;
+
+            if (touches && touches.length === 1) {
+                e = touches[0];
+                this.touchId = e.identifier;
+                touching = true;
+            }
+
+            direction = $(e.target).data().direction;
+
+            if (Cropper.fn.isDirection(direction)) {
+                this.startX = e.pageX;
+                this.startY = e.pageY;
+                this.direction = direction;
+                this.$image.trigger("dragstart");
+                touching && event.preventDefault();
+            }
+        },
+
+        dragmove: function (event) {
+            var touches = Cropper.fn.getOriginalEvent(event).changedTouches,
+                e = event,
+                touching;
+
+            if (touches && touches.length === 1) {
+                e = touches[0];
+                touching = true;
+
+                if (e.identifier !== this.touchId) {
+                    return;
+                }
+            }
+
+            if (this.direction) {
+                this.$image.trigger("dragmove");
+                touching && event.preventDefault();
+                this.endX = e.pageX;
+                this.endY = e.pageY;
+                this.dragging();
+            }
+        },
+
+        dragend: function (event) {
+            var touches = Cropper.fn.getOriginalEvent(event).changedTouches,
+                e = event,
+                touching;
+
+            if (touches && touches.length === 1) {
+                e = touches[0];
+                touching = true;
+
+                if (e.identifier !== this.touchId) {
+                    return;
+                }
+            }
+
+            if (this.direction) {
+                this.direction = "";
+                this.$image.trigger("dragend");
+                touching && event.preventDefault();
+            }
+        }
+    };
+
+    // Common methods
+    Cropper.fn = {
+        toggle: function ($e) {
+            $e.toggleClass("cropper-hidden");
+        },
+
+        position: function ($e, option) {
+            var position = $e.css("position");
+
+            if (position === "static") {
+                $e.css("position", option || "relative");
+            }
+        },
+
+        size: function ($e, options) {
+            if ($.isPlainObject(options)) {
+                $e.css(options);
+            } else {
+                return {
+                    height: $e.height(),
+                    width: $e.width()
+                };
+            }
+        },
+
+        round: function (data, fn) {
+            var value,
+                i;
+
+            for (i in data) {
+                value = data[i];
+
+                if (data.hasOwnProperty(i) && typeof value === "number") {
+                    data[i] = Math.round($.isFunction(fn) ? fn(value) : value);
+                }
+            }
+
+            return data;
+        },
+
+        transformData: function (data, ratio) {
+            var _this = this,
+                result = {};
+
+            $.each(data, function (i, n) {
+                if (_this.isDataOption(i) && $.isNumeric(n) && n >= 0) {
+                    result[i] = Math.round(n * ratio);
+                }
+            });
+
+            return result;
+        },
+
+        getOriginalEvent: function (event) {
+            if (event && typeof event.originalEvent !== "undefined") {
+               event = event.originalEvent;
+            }
+
+            return event;
+        },
+
+        isDataOption: function (s) {
+            return /^(x1|y1|x2|y2|width|height)$/i.test(s);
+        },
+
+        isDirection: function (s) {
+            return /^(\*|e|n|w|s|ne|nw|sw|se)$/i.test(s);
+        }
+    };
+
+    Cropper.template = [
+        '<div class="cropper-container">',
+            '<div class="cropper-modal"></div>',
+            '<div class="cropper-dragger">',
+                '<span class="cropper-preview"></span>',
+                '<span class="cropper-dashed dashed-h"></span>',
+                '<span class="cropper-dashed dashed-v"></span>',
+                '<span class="cropper-face" data-direction="*"></span>',
+                '<span class="cropper-line line-e" data-direction="e"></span>',
+                '<span class="cropper-line line-n" data-direction="n"></span>',
+                '<span class="cropper-line line-w" data-direction="w"></span>',
+                '<span class="cropper-line line-s" data-direction="s"></span>',
+                '<span class="cropper-point point-e" data-direction="e"></span>',
+                '<span class="cropper-point point-n" data-direction="n"></span>',
+                '<span class="cropper-point point-w" data-direction="w"></span>',
+                '<span class="cropper-point point-s" data-direction="s"></span>',
+                '<span class="cropper-point point-ne" data-direction="ne"></span>',
+                '<span class="cropper-point point-nw" data-direction="nw"></span>',
+                '<span class="cropper-point point-sw" data-direction="sw"></span>',
+                '<span class="cropper-point point-se" data-direction="se"></span>',
+            '</div>',
+        '</div>'
+    ].join("");
+
+    Cropper.defaults = {
+        aspectRatio: "auto",
+        data: {},
+        done: function (/* data */) {},
+        modal: true,
+        preview: ""
+    };
+
+    Cropper.setDefaults = function (options) {
+        $.extend(Cropper.defaults, options);
+    };
+
+    // Register as jQuery plugin
+    $.fn.cropper = function (options, settings) {
+        var result = this;
+
+        this.each(function () {
+            var $this = $(this),
+                data = $this.data("cropper");
+
+            if (!data) {
+                data = new Cropper(this, options);
+                $this.data("cropper", data);
+            }
+
+            if (typeof options === "string" && $.isFunction(data[options])) {
+                result = data[options](settings);
+            }
+        });
+
+        return (typeof result !== "undefined" ? result : this);
+    };
+
+    $.fn.cropper.Constructor = Cropper;
+    $.fn.cropper.setDefaults = Cropper.setDefaults;
+
+    $(function () {
+        $("img[cropper]").cropper();
+    });
+});

data/app/assets/stylesheets/cropper.scss

@@ -0,0 +1,226 @@
+.cropper-container {
+    position: relative;
+    overflow: hidden;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    background-color: #fff;
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+}
+
+.cropper-container img {
+    max-width: none !important;
+    max-height: none !important;
+}
+
+.cropper-container .cropper-modal {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #000;
+    filter: alpha(opacity=50);
+    opacity: .5;
+}
+
+.cropper-container .cropper-dragger {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+}
+
+.cropper-container .cropper-preview {
+    display: block;
+    width: 100%;
+    height: 100%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+    overflow: hidden;
+    border-color: #69f;
+    border-color: rgba(51, 102, 255, .75);
+    border-style: solid;
+    border-width: 1px;
+}
+
+.cropper-container .cropper-dashed {
+    position: absolute;
+    display: block;
+    filter: alpha(opacity=50);
+    border: 0 dashed #fff;
+    opacity: .5;
+}
+
+.cropper-container .dashed-h {
+    top: 33.3%;
+    left: 0;
+    width: 100%;
+    height: 33.3%;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+}
+
+.cropper-container .dashed-v {
+    top: 0;
+    left: 33.3%;
+    width: 33.3%;
+    height: 100%;
+    border-right-width: 1px;
+    border-left-width: 1px;
+}
+
+.cropper-container .cropper-face,
+.cropper-container .cropper-line,
+.cropper-container .cropper-point {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    filter: alpha(opacity=10);
+    opacity: .1;
+}
+
+.cropper-container .cropper-face {
+    top: 0;
+    left: 0;
+    cursor: move;
+    background-color: #fff;
+}
+
+.cropper-container .cropper-line {
+    background-color: #69f;
+}
+
+.cropper-container .line-e {
+    top: 0;
+    right: -2px;
+    width: 5px;
+    cursor: e-resize;
+}
+
+.cropper-container .line-n {
+    top: -2px;
+    left: 0;
+    height: 5px;
+    cursor: n-resize;
+}
+
+.cropper-container .line-w {
+    top: 0;
+    left: -2px;
+    width: 5px;
+    cursor: w-resize;
+}
+
+.cropper-container .line-s {
+    bottom: -2px;
+    left: 0;
+    height: 5px;
+    cursor: s-resize;
+}
+
+.cropper-container .cropper-point {
+    width: 5px;
+    height: 5px;
+    background-color: #69f;
+    filter: alpha(opacity=75);
+    opacity: .75;
+}
+
+.cropper-container .point-e {
+    top: 49%;
+    right: -2px;
+    cursor: e-resize;
+}
+
+.cropper-container .point-n {
+    top: -2px;
+    left: 49%;
+    cursor: n-resize;
+}
+
+.cropper-container .point-w {
+    top: 49%;
+    left: -2px;
+    cursor: w-resize;
+}
+
+.cropper-container .point-s {
+    bottom: -2px;
+    left: 49%;
+    cursor: s-resize;
+}
+
+.cropper-container .point-ne {
+    top: -2px;
+    right: -2px;
+    cursor: ne-resize;
+}
+
+.cropper-container .point-nw {
+    top: -2px;
+    left: -2px;
+    cursor: nw-resize;
+}
+
+.cropper-container .point-sw {
+    bottom: -2px;
+    left: -2px;
+    cursor: sw-resize;
+}
+
+.cropper-container .point-se {
+    right: -2px;
+    bottom: -2px;
+    width: 20px;
+    height: 20px;
+    cursor: se-resize;
+    filter: alpha(opacity=100);
+    opacity: 1;
+}
+
+.cropper-container .point-se:before {
+    position: absolute;
+    right: -50%;
+    bottom: -50%;
+    display: block;
+    width: 200%;
+    height: 200%;
+    content: " ";
+    background-color: #69f;
+    filter: alpha(opacity=0);
+    opacity: 0;
+}
+
+@media (min-width: 768px) {
+    .cropper-container .point-se {
+        width: 15px;
+        height: 15px;
+    }
+}
+
+@media (min-width: 992px) {
+    .cropper-container .point-se {
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .cropper-container .point-se {
+        width: 5px;
+        height: 5px;
+        filter: alpha(opacity=75);
+        opacity: .75;
+    }
+}
+
+.cropper-hidden {
+    display: none !important;
+}

data/jquery-cropper.gemspec

@@ -0,0 +1,21 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'jquery/cropper/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "jquery-cropper"
+  spec.version       = Jquery::Cropper::VERSION
+  spec.authors       = ["Vitaliy Yanchuk"]
+  spec.email         = ["vitaliy@yanchuk.me"]
+  spec.summary       = %q{ jquery cropper plugin through assets pipeline }
+  spec.description   = %q{ Helps using cropper plugin in rails through assets pipeline }
+  spec.homepage      = "http://github.com/fuksito/jquery-cropper"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.5"
+  spec.add_development_dependency "rake"
+end

data/lib/jquery/cropper.rb

@@ -0,0 +1,7 @@
+require "jquery/cropper/engine"
+require "jquery/cropper/version"
+
+module Jquery
+  module Cropper
+  end
+end

data/lib/jquery/cropper/engine.rb

@@ -0,0 +1,8 @@
+require 'rails'
+
+module Jquery
+  module Cropper
+    class Engine < ::Rails::Engine
+    end    
+  end
+end

data/lib/jquery/cropper/version.rb

@@ -0,0 +1,5 @@
+module Jquery
+  module Cropper
+    VERSION = "0.3.4"
+  end
+end

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: jquery-cropper
+version: !ruby/object:Gem::Version
+  version: 0.3.4
+platform: ruby
+authors:
+- Vitaliy Yanchuk
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-07-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: ! ' Helps using cropper plugin in rails through assets pipeline '
+email:
+- vitaliy@yanchuk.me
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gemspec
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/cropper.js
+- app/assets/stylesheets/cropper.scss
+- jquery-cropper.gemspec
+- lib/jquery/cropper.rb
+- lib/jquery/cropper/engine.rb
+- lib/jquery/cropper/version.rb
+homepage: http://github.com/fuksito/jquery-cropper
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.1.9
+signing_key: 
+specification_version: 4
+summary: jquery cropper plugin through assets pipeline
+test_files: []
+has_rdoc: