spree_image_multi_upload 1.0.0

data/app/assets/javascripts/admin/jquery-fileupload/vendor/load-image.js

@@ -0,0 +1,121 @@
+/*
+ * JavaScript Load Image 1.2.1
+ * https://github.com/blueimp/JavaScript-Load-Image
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint nomen: 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);
+                }
+                callback(loadImage.scale(img, options));
+            };
+            if ((window.Blob && file instanceof Blob) ||
+                // Files are also Blob instances, but some browsers
+                // (Firefox 3.6) support the File API but not Blobs:
+                    (window.File && file instanceof File)) {
+                url = oUrl = loadImage.createObjectURL(file);
+            } else {
+                url = file;
+            }
+            if (url) {
+                img.src = url;
+                return img;
+            }
+            return loadImage.readFile(file, function (url) {
+                img.src = url;
+            });
+        },
+        // 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);
+
+    // 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 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'),
+            width = img.width,
+            height = img.height,
+            scale = Math.max(
+                (options.minWidth || width) / width,
+                (options.minHeight || height) / height
+            );
+        if (scale > 1) {
+            width = parseInt(width * scale, 10);
+            height = parseInt(height * scale, 10);
+        }
+        scale = Math.min(
+            (options.maxWidth || width) / width,
+            (options.maxHeight || height) / height
+        );
+        if (scale < 1) {
+            width = parseInt(width * scale, 10);
+            height = parseInt(height * scale, 10);
+        }
+        if (img.getContext || (options.canvas && canvas.getContext)) {
+            canvas.width = width;
+            canvas.height = height;
+            canvas.getContext('2d')
+                .drawImage(img, 0, 0, width, height);
+            return canvas;
+        }
+        img.width = width;
+        img.height = height;
+        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 a data url:
+    loadImage.readFile = function (file, callback) {
+        if (window.FileReader && FileReader.prototype.readAsDataURL) {
+            var fileReader = new FileReader();
+            fileReader.onload = function (e) {
+                callback(e.target.result);
+            };
+            fileReader.readAsDataURL(file);
+            return fileReader;
+        }
+        return false;
+    };
+
+    if (typeof define === 'function' && define.amd) {
+        define(function () {
+            return loadImage;
+        });
+    } else {
+        $.loadImage = loadImage;
+    }
+}(this));

data/app/assets/javascripts/admin/jquery-fileupload/vendor/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));

data/app/assets/javascripts/admin/spree_image_multi_upload.js

@@ -0,0 +1,3 @@
+//= require admin/spree_core
+//= require admin/jquery-fileupload/index
+

data/app/assets/stylesheets/admin/jquery.fileupload-ui.scss

@@ -0,0 +1,84 @@
+@charset 'UTF-8';
+/*
+ * jQuery File Upload UI Plugin CSS 6.3
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.fileinput-button {
+  position: relative;
+  overflow: hidden;
+  float: left;
+  margin-right: 4px;
+}
+.fileinput-button input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  border: solid transparent;
+  border-width: 0 0 100px 200px;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -moz-transform: translate(-300px, 0) scale(4);
+  direction: ltr;
+  cursor: pointer;
+}
+.fileupload-buttonbar .btn,
+.fileupload-buttonbar .toggle {
+  margin-bottom: 5px;
+}
+.files .progress {
+  width: 200px;
+}
+.progress-animated .bar {
+  background: image-url('progressbar.gif') !important;
+  filter: none;
+}
+.fileupload-loading {
+  position: absolute;
+  left: 50%;
+  width: 128px;
+  height: 128px;
+  background: image-url('loading.gif') center no-repeat;
+  display: none;
+}
+.fileupload-processing .fileupload-loading {
+  display: block;
+}
+
+/* Fix for IE 6: */
+* html .fileinput-button {
+  line-height: 22px;
+  margin: 1px -3px 0 0;
+}
+
+/* Fix for IE 7: */
+* + html .fileinput-button {
+  margin: 1px 0 0 0;
+}
+
+@media (max-width: 480px) {
+  .files .btn span {
+    display: none;
+  }
+  .files .preview * {
+    width: 40px;
+  }
+  .files .name * {
+    width: 80px;
+    display: inline-block;
+    word-wrap: break-word;
+  }
+  .files .progress {
+    width: 20px;
+  }
+  .files .delete {
+    width: 60px;
+  }
+}

data/app/assets/stylesheets/admin/spree_image_multi_upload.css

@@ -0,0 +1,4 @@
+/*
+ *= require admin/spree_core
+ *= require admin/jquery.fileupload-ui
+*/

data/app/controllers/spree/admin/images_controller_decorator.rb

@@ -0,0 +1,39 @@
+Spree::Admin::ImagesController.class_eval do
+
+  def create
+    
+    product = Spree::Product.where('slug' => params['product_id'])
+    params[object_name][:attachment].each do |attachment_object|
+      #@object.attributes = params[object_name]
+      product = Spree::Product.where('slug' => params['product_id'])
+      #@object = Spree::Image.create
+      #@object.viewable.product = product
+      #@object.viewable_id = product[0].id
+
+
+      image = Spree::Image.new
+      image.attachment = attachment_object
+      image.viewable_id = params[:image][:viewable_id] #product[0].id
+      image.type = 'Spree::Image'
+      image.viewable_type = 'Spree::Variant'
+      #binding.pry
+      image.save
+
+      #invoke_callbacks(:create, :before)
+      #@object.attachment = attachment_object
+      #@object.save
+      #invoke_callbacks(:create, :after)
+      
+    end
+    redirect_to '/admin/products/' + product[0].slug + '/images' #admin_product_url(product)
+    
+  end
+
+  def multi_upload
+
+  end
+
+  def new_actions
+    [:new, :create, :multi_upload]
+  end
+end

data/app/models/image_decorator.rb

@@ -0,0 +1,17 @@
+Spree::Image.class_eval do
+
+  def to_jq_upload
+    {
+        'name' => read_attribute(:attachment_file_name),
+        'size' => read_attribute(:attachment_file_size),
+        'thumbnail_url' => attachment.url(:mini, false),
+        'url' => attachment.url(:product, false),
+
+        # TODO: find the way to generate edit and delete urls here
+        #include Rails.application.routes.url_helpers doesn't work
+        'edit_url' => '',
+        'delete_url' => ''
+    }
+  end
+
+end

data/app/overrides/admin_decorator.rb

@@ -0,0 +1,6 @@
+Deface::Override.new(
+    :virtual_path => 'spree/admin/images/index',
+    :replace => %q{code[erb-loud]:contains('t(:new_image)')},
+    :text => %q{<%= link_to_with_icon('icon-upload', t('multi_upload.title'), multi_upload_admin_product_images_path(@product), :id => 'multi_upload_images_link', :class => 'button', :remote => true) %>},
+    :name => 'add_images_multi_upload_button'
+)

data/app/views/spree/admin/images/_template_download.html.erb

@@ -0,0 +1,33 @@
+<script id="template-download" type="text/x-tmpl">
+  {% for (var i=0, file; file=o.files[i]; i++) { %}
+  <tr class="template-download fade">
+
+    {% if (file.error) { %}
+
+    <td class="name"><span>{%=file.name%}</span></td>
+    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+    <td class="error"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] ||
+      file.error%}
+    </td>
+
+    {% } else { %}
+
+    <td class="preview">{% if (file.thumbnail_url) { %}
+      <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
+      {% } %}
+    </td>
+    <td class="name">
+      <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
+    </td>
+    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+
+    {% } %}
+
+    <td class="actions">
+      <a data-action="edit" class="icon_link with-tip icon-edit no-text" href="{%=file.edit_url%}" target="_blank"></a>
+      <a url="{%=file.delete_url%}" data-confirm="<%= t(:are_you_sure) %>" data-action="remove" class="delete-resource icon_link with-tip icon-trash no-text" href="{%=file.delete_url%}"></a>
+    </td>
+
+  </tr>
+  {% } %}
+</script>

data/app/views/spree/admin/images/_template_upload.html.erb

@@ -0,0 +1,36 @@
+<script id="template-upload" type="text/x-tmpl">
+  {% for (var i=0, file; file=o.files[i]; i++) { %}
+  <tr class="template-upload fade">
+    <td class="preview"><span class="fade"></span></td>
+    <td class="name"><span>{%=file.name%}</span></td>
+
+    {% if (file.error) { %}
+        <td class="error">
+          <span class="label label-important"><%= t(:error) %></span>
+          {%=locale.fileupload.errors[file.error] || file.error%}
+        </td>
+    {% } else if (o.files.valid) { %}
+        <td class="size">
+          <span>{%=o.formatFileSize(file.size)%}</span>
+        </td>
+    {% } %}
+
+    <td class="actions">
+
+      {% if (!o.options.autoUpload) { %}
+      <span class="start">
+        <button class="button icon-upload">{%=locale.fileupload.start%}</button>
+      </span>
+      {% } %}
+
+      {% if (!i) { %}
+      <span class="cancel">
+        <button class="button icon-ban-circle">{%=locale.fileupload.cancel%}</button>
+      </span>
+      {% } %}
+
+    </td>
+
+  </tr>
+  {% } %}
+</script>

data/app/views/spree/admin/images/multi_upload.html.erb

@@ -0,0 +1,48 @@
+<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
+<%= render :partial => 'spree/admin/shared/product_tabs', :locals => { :current => 'Images' } %>
+
+<%= render :partial => 'spree/shared/error_messages', :locals => {:target => @product} %>
+
+<%= form_for [:admin, @product, @image], :html => {:multipart => true, :id => "fileupload", :method => :post} do |f| %>
+    <fieldset data-hook="new_product">
+      <legend align="center"><%= t('multi_upload.title') %></legend>
+
+      <div class="row fileupload-buttonbar">
+        <div data-hook="variant" class="field">
+          <%= f.label Spree::Variant.model_name.human %>
+          <br>
+          <%= f.select :viewable_id, @variants, {}, {:class => 'select2'} %>
+        </div>
+
+        <span class="icon-plus button fileinput-button">
+            <%= t('multi_upload.add_files') %>
+            <%= f.file_field :attachment, {:multiple => true} %>
+        </span>
+
+        <button type="submit" class="icon-upload button start"><%= t('multi_upload.start') %></button>
+        <button type="reset" class="icon-ban-circle button cancel"><%= t('multi_upload.cancel') %></button>
+
+      </div>
+
+      <div class="fileupload-progress fade">
+        <div class="progress-extended">&nbsp;</div>
+      </div>
+
+      <br />
+
+      <table role="presentation" class="table table-striped">
+        <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
+      </table>
+
+    </fieldset>
+<% end %>
+
+<script type="text/javascript" charset="utf-8">
+    $(function () {
+        $('#fileupload').fileupload();
+    });
+</script>
+
+<%= render :partial => 'template_upload' %>
+<%= render :partial => 'template_download' %>
+