attachy 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a405801b1f0c5c745e3723b97320273d1768ba2f
+  data.tar.gz: 3f2174490f3404f21a3d3f4adefe663f28789aa4
+SHA512:
+  metadata.gz: 33f314c8a0bc058f7ea0f315296d8088a77ae1c256114e8a964cd70f7748c018fad658095bcc0dae82d7bbbeed789cfed0ff42b8dfa102756b4238768387344e
+  data.tar.gz: cc7264176e05f9947037cf0fe79914738dcb391276fb1395b8f3a63417a565ae76df49ee1b84ea7ae2d593c537c58695bd7861263473d54f2054ac9fc4956d50

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 0.1.0
+
+- Release.

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Washington Botelho
+
+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,108 @@
+# Attachy
+
+Attachments handler for Rails via Cloudinary
+
+## Desciption
+
+Send files from your browser directly to Cloudinary.
+Attachy will generate a `has_one` or `has_many` files (photos) to your model
+with no need to change your model schema!
+
+## Install
+
+Extracts the necessary files including a migrate that create a table used
+to keep your file metadata. You can choose a [Default Image](#default-image) via params 'version', `public_id` and 'format'.
+
+```bash
+rails g attachy:install
+```
+
+Then execute the migrations to create the `attachy_files` table.
+
+```bash
+rake db:migrate
+```
+
+## Usage
+
+### Model
+
+Upload a single image that will be overrided on each upload:
+
+```ruby
+class User < ApplicationRecord
+  has_attachment :avatar
+end
+```
+
+Upload a couple of images that will be added on each upload:
+
+```ruby
+class User < ApplicationRecord
+  has_attachments :photos
+end
+```
+
+### View
+
+Expose your Cloudinary credentials on your layout:
+
+```html
+<%= cloudinary_js_config %>s
+```
+
+Into your form the upload field:
+
+```html
+<%= f.attachy :avatar %>
+```
+
+If you want just show your uploaded image, use:
+
+```html
+<%= attachy_link :avatar, @object %>
+```
+
+It will generate a link to your image with the image inside.
+
+### Assets
+
+Includes the `attachy.js` on your js manifest:
+
+```js
+//= require vendor/attachy
+```
+
+Includes the `attachy.sass` on your css manifest:
+
+```js
+/*
+ *= require vendor/attachy
+ */
+```
+
+### <a name="default-image"></a> Configurations
+
+On your `attachy.yml` configure a default image to show when model has no one:
+
+```js
+format: jpg
+public_id: default
+version: 42
+```
+
+## Test
+
+Before send pull request, check if specs is passing.
+
+```bash
+rspec spec
+```
+
+## Code Style
+
+Check if the code style is good.
+
+```bash
+rubocop --debug --display-cop-names
+```

data/lib/assets/javascripts/attachy.js

@@ -0,0 +1,289 @@
+/*!
+ * Attachy - Attachments handler for Rails via Cloudinary
+ *
+ * The MIT License
+ *
+ * @author  : Washington Botelho
+ * @doc     : http://wbotelhos.com/attachy
+ * @version : 0.1.0
+ *
+ */
+
+;
+(function($) {
+  'use strict';
+
+  $.attachy = {
+    crop:        undefined,
+    disableWith: ' %',
+    dropZone:    undefined,
+    fieldName:   'avatar',
+    height:      undefined,
+    progress:    true,
+    secure:      true,
+    sequential:  true,
+    sign_url:    true,
+    url:         '/attachy/url',
+    width:       undefined,
+
+    link: {
+      crop:   undefined,
+      height: undefined,
+      width:  undefined
+    }
+  }
+
+  $.fn.attachy = function(options) {
+    var settings = $.extend({}, $.attachy, options);
+
+    return this.each(function() {
+      return (new $.attachy.Attachy(this, settings)).create();
+    });
+  }
+
+  $.attachy.Attachy = (function() {
+    var Attachy = function(field, options) {
+      this.field   = $(field);
+      this.options = options;
+    }
+
+    Attachy.prototype = {
+      add: function(file) {
+        if (this.multiple) {
+          this.files.push(file);
+        } else {
+          this.files = [file];
+        }
+
+        this.draw(file);
+      },
+
+      backupStatus: function() {
+        this.submit.data('label', this.submit.text());
+        this.button.data('label', this.button.text());
+      },
+
+      binds: function() {
+        this.field.on('fileuploadsend', this.onUploading.bind(this));
+        this.field.on('fileuploaddone', this.onDone.bind(this));
+        this.field.on('fileuploadprogressall', this.onProgress.bind(this));
+        this.field.on('fileuploadalways', this.onAlways.bind(this));
+
+        this.content.on('click', '.attachy__remove', this.onRemove.bind(this));
+      },
+
+      configure: function() {
+        var json = JSON.parse(this.hidden.val());
+
+        if (!$.isArray(json)) {
+          json = [json];
+        }
+
+        this.files    = json;
+        this.multiple = this.content.data('multiple');
+      },
+
+      create: function() {
+        this.scan();
+        this.configure();
+        this.init();
+        this.backupStatus();
+        this.binds();
+
+        return this;
+      },
+
+      changeStatus: function(progress) {
+        var label = progress + this.options.disableWith;
+
+        this.submit.text(label);
+        this.button.text(label);
+      },
+
+      draw: function(file) {
+        var that = this;
+
+        this.render(file, function(json) {
+          var
+            image  = that.image(file, json),
+            link   = that.link(file, image, json),
+            remove = that.removeButton();
+
+          if (that.multiple) {
+            var node = $('<li />', { html: link, 'class': 'attachy__node' }).append(remove);
+
+            that.content.append(node);
+          } else {
+            that.content.find('li').empty().append(link, remove);
+          }
+        });
+      },
+
+      image: function(file, json) {
+        var
+          config     = this.imageConfig(file),
+          attributes = { alt: config.alt, height: config.height, width: config.width };
+
+        $.extend({}, attributes, config);
+
+        if (this.options.sign_url) {
+          attributes.src = json.image;
+        } else {
+          attributes.src = $.cloudinary.url(file.public_id, config);
+        }
+
+        return $('<img />', attributes);
+      },
+
+      imageConfig: function(file) {
+        return {
+          crop:     this.content.data('crop') || this.options.crop,
+          format:   file.format,
+          height:   this.content.data('height') || this.options.height,
+          publicId: file.public_id,
+          version:  file.version,
+          width:    this.content.data('width') || this.options.width
+        };
+      },
+
+      init: function() {
+        this.field.fileupload({
+          dataType:          'json',
+          dropZone:          this.options.dropZone,
+          headers:           { 'X-Requested-With': 'XMLHttpRequest' },
+          sequentialUploads: this.options.sequential
+        });
+
+        this.field.cloudinary_fileupload();
+      },
+
+      link: function(file, image, json) {
+        var attributes = { html: image, 'class': 'attachy__link' };
+
+        if (this.options.sign_url) {
+          attributes.href = json.link;
+        } else {
+          attributes.href = $.cloudinary.url(file.public_id, this.linkConfig(file));
+        }
+
+        return $('<a />', attributes);
+      },
+
+      linkConfig: function(file) {
+        return {
+          crop:    this.content.data('link-crop') || this.options.link.crop,
+          format:  file.format,
+          height:  this.content.data('link-height') || this.options.link.height,
+          version: file.version,
+          width:   this.content.data('link-width') || this.options.link.width
+        }
+      },
+
+      onAlways: function() {
+        this.wrapper.removeClass('attachy__uploading');
+
+        this.restoreStatus();
+      },
+
+      onDone: function(_evt, data) {
+        var file = data.result;
+
+        this.add(file);
+
+        this.updateHidden();
+      },
+
+      onProgress: function(_evt, data) {
+        var progress = parseInt(data.loaded / data.total * 100, 10);
+
+        if (this.options.progress && this.options.disableWith) {
+          this.changeStatus(progress);
+        }
+      },
+
+      onRemove: function(e) {
+        var
+          file,
+          files = [],
+          node  = $(e.currentTarget).closest('.attachy__node'),
+          image = node.find('img');
+
+        for (var i = 0; i < this.files.length; i++) {
+          file = this.files[i];
+
+          if (file.public_id !== image.data('publicId')) {
+            files.push(file);
+          }
+        }
+
+        node.remove();
+
+        this.files = files;
+
+        this.updateHidden();
+
+        // if (this.defaultAvatar) {
+        //   this.container.html(this.defaultAvatar.clone());
+        // }
+      },
+
+      onUploading: function() {
+        this.wrapper.addClass('attachy__uploading');
+      },
+
+      removeButton: function() {
+        return $('<span />', { html: '&#215;', 'class': 'attachy__remove' });
+      },
+
+      render: function(file, callback) {
+        if (this.options.sign_url) {
+          var
+            linkConfig = this.linkConfig(file),
+
+            options = $.extend({}, {
+              format:    file.format,
+              public_id: file.public_id,
+              secure:    this.options.secure,
+              sign_url:  this.options.sign_url
+            }, this.imageConfig(file));
+
+          for (var key in linkConfig) {
+            if (linkConfig.hasOwnProperty(key)) {
+              options['link_' + key] = linkConfig[key];
+            }
+          }
+
+          var ajax = $.ajax({ data: options, url: this.options.url });
+
+          ajax.done(callback);
+
+          ajax.fail(function(response) {
+            alert(response.responseText);
+          });
+        } else {
+          callback();
+        }
+      },
+
+      restoreStatus: function() {
+        this.submit.text(this.submit.data('label'));
+        this.button.text(this.button.data('label'));
+      },
+
+      scan: function() {
+        this.wrapper = this.field.closest('.attachy');
+        this.button  = this.wrapper.find('.attachy__button span');
+        this.content = this.wrapper.find('.attachy__content');
+        this.hidden  = this.wrapper.find('input[type="hidden"]')
+        this.remove  = this.wrapper.find('.attachy__remove');
+        this.submit  = this.wrapper.closest('form').find(':submit');
+      },
+
+      updateHidden: function() {
+        this.hidden.val(JSON.stringify(this.files));
+      }
+    };
+
+    return Attachy;
+  })();
+})(jQuery);

data/lib/attachy.rb

@@ -0,0 +1,13 @@
+module Attachy
+  ENV_TAG = "attachy_#{Rails.env}".freeze
+  TMP_TAG = :attachy_tmp
+end
+
+require 'cloudinary'
+
+require 'attachy/engine'
+require 'attachy/models/attachy/extension'
+require 'attachy/models/attachy/file'
+require 'attachy/models/attachy/viewer'
+
+ActiveRecord::Base.include Attachy::Extension