glebtv-rails-uploader 0.1.3 → 0.2.0

data/app/assets/javascripts/uploader/load-image.js

@@ -0,0 +1,381 @@
+/*
+ * JavaScript Load Image 1.6
+ * https://github.com/blueimp/JavaScript-Load-Image
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * iOS image scaling fixes based on
+ * https://github.com/stomita/ios-imagefile-megapixel
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint nomen: true, bitwise: true */
+/*global window, document, URL, webkitURL, Blob, File, FileReader, define */
+
+(function ($) {
+    'use strict';
+
+    // Loads an image for a given File object.
+    // Invokes the callback with an img or optional canvas
+    // element (if supported by the browser) as parameter:
+    var loadImage = function (file, callback, options) {
+            var img = document.createElement('img'),
+                url,
+                oUrl;
+            img.onerror = callback;
+            img.onload = function () {
+                if (oUrl && !(options && options.noRevoke)) {
+                    loadImage.revokeObjectURL(oUrl);
+                }
+                if (callback) {
+                    callback(loadImage.scale(img, options));
+                }
+            };
+            if (loadImage.isInstanceOf('Blob', file) ||
+                    // Files are also Blob instances, but some browsers
+                    // (Firefox 3.6) support the File API but not Blobs:
+                    loadImage.isInstanceOf('File', file)) {
+                url = oUrl = loadImage.createObjectURL(file);
+                // Store the file type for resize processing:
+                img._type = file.type;
+            } else if (typeof file === 'string') {
+                url = file;
+                if (options && options.crossOrigin) {
+                    img.crossOrigin = options.crossOrigin;
+                }
+            } else {
+                return false;
+            }
+            if (url) {
+                img.src = url;
+                return img;
+            }
+            return loadImage.readFile(file, function (e) {
+                var target = e.target;
+                if (target && target.result) {
+                    img.src = target.result;
+                } else {
+                    if (callback) {
+                        callback(e);
+                    }
+                }
+            });
+        },
+        // The check for URL.revokeObjectURL fixes an issue with Opera 12,
+        // which provides URL.createObjectURL but doesn't properly implement it:
+        urlAPI = (window.createObjectURL && window) ||
+            (window.URL && URL.revokeObjectURL && URL) ||
+            (window.webkitURL && webkitURL);
+
+    loadImage.isInstanceOf = function (type, obj) {
+        // Cross-frame instanceof check
+        return Object.prototype.toString.call(obj) === '[object ' + type + ']';
+    };
+
+    // Transform image orientation based on the given EXIF orientation data:
+    loadImage.transformCoordinates = function (canvas, orientation) {
+        var ctx = canvas.getContext('2d'),
+            width = canvas.width,
+            height = canvas.height;
+        if (orientation > 4) {
+            canvas.width = height;
+            canvas.height = width;
+        }
+        switch (orientation) {
+        case 2:
+            // horizontal flip
+            ctx.translate(width, 0);
+            ctx.scale(-1, 1);
+            break;
+        case 3:
+            // 180 rotate left
+            ctx.translate(width, height);
+            ctx.rotate(Math.PI);
+            break;
+        case 4:
+            // vertical flip
+            ctx.translate(0, height);
+            ctx.scale(1, -1);
+            break;
+        case 5:
+            // vertical flip + 90 rotate right
+            ctx.rotate(0.5 * Math.PI);
+            ctx.scale(1, -1);
+            break;
+        case 6:
+            // 90 rotate right
+            ctx.rotate(0.5 * Math.PI);
+            ctx.translate(0, -height);
+            break;
+        case 7:
+            // horizontal flip + 90 rotate right
+            ctx.rotate(0.5 * Math.PI);
+            ctx.translate(width, -height);
+            ctx.scale(-1, 1);
+            break;
+        case 8:
+            // 90 rotate left
+            ctx.rotate(-0.5 * Math.PI);
+            ctx.translate(-width, 0);
+            break;
+        }
+    };
+
+    // Detects subsampling in JPEG images:
+    loadImage.detectSubsampling = function (img) {
+        var canvas,
+            context;
+        if (img.width * img.height > 1024 * 1024) { // only consider mexapixel images
+            canvas = document.createElement('canvas');
+            canvas.width = canvas.height = 1;
+            context = canvas.getContext('2d');
+            context.drawImage(img, -img.width + 1, 0);
+            // subsampled image becomes half smaller in rendering size.
+            // check alpha channel value to confirm image is covering edge pixel or not.
+            // if alpha value is 0 image is not covering, hence subsampled.
+            return context.getImageData(0, 0, 1, 1).data[3] === 0;
+        }
+        return false;
+    };
+
+    // Detects vertical squash in JPEG images:
+    loadImage.detectVerticalSquash = function (img, correctedHeight) {
+        var canvas = document.createElement('canvas'),
+            context = canvas.getContext('2d'),
+            data,
+            sy,
+            ey,
+            py,
+            alpha;
+        canvas.width = 1;
+        canvas.height = correctedHeight;
+        context.drawImage(img, 0, 0);
+        data = context.getImageData(0, 0, 1, correctedHeight).data;
+        // search image edge pixel position in case it is squashed vertically:
+        sy = 0;
+        ey = correctedHeight;
+        py = correctedHeight;
+        while (py > sy) {
+            alpha = data[(py - 1) * 4 + 3];
+            if (alpha === 0) {
+                ey = py;
+            } else {
+                sy = py;
+            }
+            py = (ey + sy) >> 1;
+        }
+        return (py / correctedHeight) || 1;
+    };
+
+    // Renders image to canvas while working around iOS image scaling bugs:
+    // https://github.com/blueimp/JavaScript-Load-Image/issues/13
+    loadImage.renderImageToCanvas = function (
+        canvas,
+        img,
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX,
+        destY,
+        destWidth,
+        destHeight
+    ) {
+        var context = canvas.getContext('2d'),
+            tmpCanvas = document.createElement('canvas'),
+            tileSize = tmpCanvas.width = tmpCanvas.height = 1024,
+            tmpContext = tmpCanvas.getContext('2d'),
+            vertSquashRatio,
+            tileX,
+            tileY;
+        context.save();
+        if (loadImage.detectSubsampling(img)) {
+            sourceWidth /= 2;
+            sourceHeight /= 2;
+        }
+        vertSquashRatio = loadImage.detectVerticalSquash(img, sourceHeight);
+        destWidth = Math.ceil(tileSize * destWidth / sourceWidth);
+        destHeight = Math.ceil(
+            tileSize * destHeight / sourceHeight / vertSquashRatio
+        );
+        destY = 0;
+        tileY = 0;
+        while (tileY < sourceHeight) {
+            destX = 0;
+            tileX = 0;
+            while (tileX < sourceWidth) {
+                tmpContext.clearRect(0, 0, tileSize, tileSize);
+                tmpContext.drawImage(
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    -tileX,
+                    -tileY,
+                    sourceWidth,
+                    sourceHeight
+                );
+                context.drawImage(
+                    tmpCanvas,
+                    0,
+                    0,
+                    tileSize,
+                    tileSize,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
+                tileX += tileSize;
+                destX += destWidth;
+            }
+            tileY += tileSize;
+            destY += destHeight;
+        }
+        context.restore();
+    };
+
+    // Scales the given image (img or canvas HTML element)
+    // using the given options.
+    // Returns a canvas object if the browser supports canvas
+    // and the canvas or crop option is true or a canvas object
+    // is passed as image, else the scaled image:
+    loadImage.scale = function (img, options) {
+        options = options || {};
+        var canvas = document.createElement('canvas'),
+            useCanvas = img.getContext ||
+                ((options.canvas || options.crop || options.orientation) &&
+                    canvas.getContext),
+            width = img.width,
+            height = img.height,
+            sourceWidth = width,
+            sourceHeight = height,
+            sourceX = 0,
+            sourceY = 0,
+            destX = 0,
+            destY = 0,
+            maxWidth,
+            maxHeight,
+            minWidth,
+            minHeight,
+            destWidth,
+            destHeight,
+            scale;
+        if (useCanvas && options.orientation > 4) {
+            maxWidth = options.maxHeight;
+            maxHeight = options.maxWidth;
+            minWidth = options.minHeight;
+            minHeight = options.minWidth;
+        } else {
+            maxWidth = options.maxWidth;
+            maxHeight = options.maxHeight;
+            minWidth = options.minWidth;
+            minHeight = options.minHeight;
+        }
+        if (useCanvas && maxWidth && maxHeight && options.crop) {
+            destWidth = maxWidth;
+            destHeight = maxHeight;
+            if (width / height < maxWidth / maxHeight) {
+                sourceHeight = maxHeight * width / maxWidth;
+                sourceY = (height - sourceHeight) / 2;
+            } else {
+                sourceWidth = maxWidth * height / maxHeight;
+                sourceX = (width - sourceWidth) / 2;
+            }
+        } else {
+            destWidth = width;
+            destHeight = height;
+            scale = Math.max(
+                (minWidth || destWidth) / destWidth,
+                (minHeight || destHeight) / destHeight
+            );
+            if (scale > 1) {
+                destWidth = Math.ceil(destWidth * scale);
+                destHeight = Math.ceil(destHeight * scale);
+            }
+            scale = Math.min(
+                (maxWidth || destWidth) / destWidth,
+                (maxHeight || destHeight) / destHeight
+            );
+            if (scale < 1) {
+                destWidth = Math.ceil(destWidth * scale);
+                destHeight = Math.ceil(destHeight * scale);
+            }
+        }
+        if (useCanvas) {
+            canvas.width = destWidth;
+            canvas.height = destHeight;
+            loadImage.transformCoordinates(
+                canvas,
+                options.orientation
+            );
+            if (img._type === 'image/jpeg') {
+                loadImage.renderImageToCanvas(
+                    canvas,
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
+            } else {
+                canvas.getContext('2d').drawImage(
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
+            }
+            return canvas;
+        }
+        img.width = destWidth;
+        img.height = destHeight;
+        return img;
+    };
+
+    loadImage.createObjectURL = function (file) {
+        return urlAPI ? urlAPI.createObjectURL(file) : false;
+    };
+
+    loadImage.revokeObjectURL = function (url) {
+        return urlAPI ? urlAPI.revokeObjectURL(url) : false;
+    };
+
+    // Loads a given File object via FileReader interface,
+    // invokes the callback with the event object (load or error).
+    // The result can be read via event.target.result:
+    loadImage.readFile = function (file, callback, method) {
+        if (window.FileReader && FileReader.prototype.readAsDataURL) {
+            var fileReader = new FileReader();
+            fileReader.onload = fileReader.onerror = callback;
+            method = method || 'readAsDataURL';
+            if (!fileReader[method]) {
+                return false;
+            }
+            fileReader[method](file);
+            return fileReader;
+        }
+        return false;
+    };
+
+    if (typeof define === 'function' && define.amd) {
+        define(function () {
+            return loadImage;
+        });
+    } else {
+        $.loadImage = loadImage;
+    }
+}(this));

data/app/assets/javascripts/uploader/rails_admin.js

@@ -1,25 +1,27 @@
-//= require uploader/locales/en
-//= require uploader/tmpl.min
-//= require uploader/load-image.min
-//= require uploader/jquery.iframe-transport
-//= require uploader/jquery.fileupload
-//= require uploader/jquery.fileupload-ui
-
-$(document).off('init.sort').on('init.sort', '.uploader-files', function() {
-    var $t = $(this);
-    $t.sortable({
-        update: function(event, ui) {
-            var sort = [];
-            $t.children().each(function() {
-                sort.push($(this).data('id'));
-            });
-            $.ajax({
-                type: 'POST',
-                url: $t.data('sortPath'),
-                data: {sort: sort.join('|')}
-            })
-        }
-    })
-});
-
+//= require uploader/tmpl
+//= require uploader/canvas-to-blob
+//= require uploader/load-image
+//= require uploader/jquery.fileupload
+//= require uploader/jquery.fileupload-process
+//= require uploader/jquery.fileupload-resize
+//= require uploader/jquery.fileupload-validate
+//= require uploader/jquery.fileupload-ui
+
+$(document).off('init.sort').on('init.sort', '.uploader-files', function() {
+    var $t = $(this);
+    $t.sortable({
+        update: function(event, ui) {
+            var sort = [];
+            $t.children().each(function() {
+                sort.push($(this).data('id'));
+            });
+            $.ajax({
+                type: 'POST',
+                url: $t.data('sortPath'),
+                data: {sort: sort.join('|')}
+            })
+        }
+    })
+});
+
 $('.uploader-dnd-area input[type=file]').trigger("init.uploader");

data/app/assets/javascripts/uploader/tmpl.js

@@ -0,0 +1,86 @@
+/*
+ * JavaScript Templates 2.1.0
+ * https://github.com/blueimp/JavaScript-Templates
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Inspired by John Resig's JavaScript Micro-Templating:
+ * http://ejohn.org/blog/javascript-micro-templating/
+ */
+
+/*jslint evil: true, regexp: true */
+/*global document, define */
+
+(function ($) {
+    "use strict";
+    var tmpl = function (str, data) {
+        var f = !/[^\w\-\.:]/.test(str) ? tmpl.cache[str] = tmpl.cache[str] ||
+                tmpl(tmpl.load(str)) :
+                    new Function(
+                        tmpl.arg + ',tmpl',
+                        "var _e=tmpl.encode" + tmpl.helper + ",_s='" +
+                            str.replace(tmpl.regexp, tmpl.func) +
+                            "';return _s;"
+                    );
+        return data ? f(data, tmpl) : function (data) {
+            return f(data, tmpl);
+        };
+    };
+    tmpl.cache = {};
+    tmpl.load = function (id) {
+        return document.getElementById(id).innerHTML;
+    };
+    tmpl.regexp = /([\s'\\])(?![^%]*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g;
+    tmpl.func = function (s, p1, p2, p3, p4, p5) {
+        if (p1) { // whitespace, quote and backspace in interpolation context
+            return {
+                "\n": "\\n",
+                "\r": "\\r",
+                "\t": "\\t",
+                " " : " "
+            }[s] || "\\" + s;
+        }
+        if (p2) { // interpolation: {%=prop%}, or unescaped: {%#prop%}
+            if (p2 === "=") {
+                return "'+_e(" + p3 + ")+'";
+            }
+            return "'+(" + p3 + "||'')+'";
+        }
+        if (p4) { // evaluation start tag: {%
+            return "';";
+        }
+        if (p5) { // evaluation end tag: %}
+            return "_s+='";
+        }
+    };
+    tmpl.encReg = /[<>&"'\x00]/g;
+    tmpl.encMap = {
+        "<"   : "&lt;",
+        ">"   : "&gt;",
+        "&"   : "&amp;",
+        "\""  : "&quot;",
+        "'"   : "&#39;"
+    };
+    tmpl.encode = function (s) {
+        return String(s || "").replace(
+            tmpl.encReg,
+            function (c) {
+                return tmpl.encMap[c] || "";
+            }
+        );
+    };
+    tmpl.arg = "o";
+    tmpl.helper = ",print=function(s,e){_s+=e&&(s||'')||_e(s);}" +
+        ",include=function(s,d){_s+=tmpl(s,d);}";
+    if (typeof define === "function" && define.amd) {
+        define(function () {
+            return tmpl;
+        });
+    } else {
+        $.tmpl = tmpl;
+    }
+}(this));