lol_multiple_uploads 1.0.2 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 147ed1d1db98b9e8c1366699145c94a6d5aafbf8
-  data.tar.gz: 4dc6e3beb64bcfaf53ff1dec7bad3154a6af58d4
+  metadata.gz: d1db9c8916de621822c30a27aafdbffa884c1d90
+  data.tar.gz: f7488684571f2310249f0d989194726164c19647
 SHA512:
-  metadata.gz: 3c3a986d4a8b6844c66c3393aad32d87d03946484222bfb8eacf3308584ead9472f3f07fff98d6c356549ec933a8ac30d99c2c14161485cf7fe1bb55e3afd8a9
-  data.tar.gz: 8742b3452937a90d5e53f48edfbcf9820f78f6147cbc01cb81dde6fafa809184227f054968af97349af0eeb11c334db43f03e0c6e90000e1310f43a5bebb6ec9
+  metadata.gz: 16b2d8802abf708d86fda857431e40ade70f77a6aed30594a5c624f8e193902f7755afcf6297bd6f7b3ad6c9f1e563cc06bfa26de953d7df24608c4b5774e107
+  data.tar.gz: 37fc9f119a1824a882ce9dbf0448b79c73a08cfcbcdbe9e486ee8ec4e16feb7744059a67cc781fddfbc5f7543ee62a6c6cfa93cf90298956276956ffe971b27e

data/app/assets/javascripts/lol_multiple_uploads/upload.js

@@ -6,18 +6,23 @@ $(document).ready(function() {
 		new MultipleUpload($multipleUploadLink);
 	}
 
-  new MultipleUploadsPhotos();
+  new imageContainerManager();
 });
 
-var MultipleUploadsPhotos = function(){
+var imageContainerManager = function(){
   var _this       = this;
   this.$container = $('.lol-multiple-uploads.images-container'); 
+  this.hasCaption = Boolean(this.$container.data('has-caption'));
 
   this.startup = function(){
     this.$container.on('click', 'figure a', function(event) {
       _this.removeImage($(this));
       return false;
     });
+
+    if (this.hasCaption){
+      new imageCaptionManager(this.$container);
+    };
   },
 
   this.removeImage = function($link){
@@ -45,14 +50,48 @@ var MultipleUploadsPhotos = function(){
   this.startup();
 }
 
+var imageCaptionManager = function($container){
+  var _this        = this;
+  _this.$container = $container;
+
+  this.startup = function(){
+    this.$container.on('focusout', 'figure input:text', function(event) {
+      event.preventDefault();
+      var field = $(this); 
+      _this.updateImageCaption(field.val(), field.closest('figure').data('id'));
+    });
+  },
+
+  this.updateImageCaption = function(text, image_id){
+    $.ajax({
+      url: '/update-image/'+image_id,
+      type: 'PUT',
+      dataType: 'json',
+      data: {photo: {caption: text}},
+    })
+    .done(function() {
+      console.log("success");
+    })
+    .fail(function() {
+      console.log("error");
+    })
+    .always(function() {
+      console.log("complete");
+    });
+    
+  }
+
+  this.startup();
+}
+
 var MultipleUpload = function(link){
 	var that   					= this;
 	this.link  					= link; 
-	this.model 					= this.link.attr('data-model'); 
-	this.model_id    		= this.link.attr('data-model-id');
-	this.storeImagePath = this.link.attr('data-store-path');
-	this.filePickerKey  = this.link.attr('data-file-picker-key');
-	this.imageContainer = this.link.attr('data-image-container');
+	this.model 					= this.link.data('model'); 
+	this.model_id    		= this.link.data('model-id');
+	this.storeImagePath = this.link.data('store-path');
+	this.filePickerKey  = this.link.data('file-picker-key');
+	this.imageContainer = this.link.data('image-container');
 
 	this.startup = function(){
 		this.link.on('click', function(event) {
@@ -75,7 +114,7 @@ var MultipleUpload = function(link){
 			$.ajax({
 			  url: that.storeImagePath,
 			  type: 'POST',
-			  dataType: 'json',
+			  dataType: 'html',
 			  data: {model: that.model, model_id: that.model_id, photo: val.url},
 			  beforeSend: function(xhr){
 			  	that.showLoading();
@@ -93,12 +132,7 @@ var MultipleUpload = function(link){
 		});
 	},
 
-	this.appendImage = function(obj){
-    var html =  "<figure data-id="+obj._id+">"
-        html += "<img src='"+obj.image.url+"' >"
-        html += "<a rel=nofollow' data-method='delete' href='/remove-image/"+obj._id+".json'>Remover</a>"
-        html += "</figure>"
-
+	this.appendImage = function(html){
 		$(this.imageContainer).append(html);
 	},
 

data/app/assets/stylesheets/lol_multiple_uploads/base.css

@@ -6,7 +6,7 @@
 
 .lol-multiple-uploads.images-container figure{
   width: 120px;
-  height: 120px;
+  min-height: 120px;
   float: left;
   padding: 0px;
   margin: 5px;
@@ -18,10 +18,15 @@
   cursor: move;
 }
 
+.lol-multiple-uploads.images-container figure img{
+  height: 120px;
+  width: 120px;
+}
+
 .lol-multiple-uploads.images-container figure a{
   position: absolute;
-  bottom: -36px;
-  left: 0px;
+  top: 94px;
+  left: -120px;
   width: 100%;
   padding: 5px 0;
   color: #fff;
@@ -38,7 +43,7 @@
 }
 
 .lol-multiple-uploads.images-container figure:hover a{
-  bottom: 0px;
+  left: 0px;
   -webkit-transition: all 200ms ease-in-out;
      -moz-transition: all 200ms ease-in-out;
       -ms-transition: all 200ms ease-in-out;
@@ -49,3 +54,8 @@
 .lol-multiple-uploads.images-container img{
   max-width: 100%;
 }
+
+.lol-multiple-uploads.images-container[data-has-caption="true"] figure input[type='text']{
+  border: 1px solid #cacaca;
+  width: 116px;
+}

data/app/controllers/photos_controller.rb

@@ -8,13 +8,26 @@ class PhotosController < ActionController::Base
     respond_with(@photo) do |format|
       if @photo.save
         format.json{ render json: @photo  }
+        format.js  { render partial: '/layouts/lol_multiple_uploads/photo', locals: { photo: @photo } }
       else
         format.json{ render nothing: true, status: :error }
       end
     end
   rescue Exception
     render nothing: true, status: :error
-	end
+  end
+
+  def update
+    @photo = Photo.find params[:id]
+     
+    respond_with(@photo) do |format|
+      if @photo.update_attributes(params[:photo])
+        format.json{ render json: @photo  }
+      else
+        format.json{ render nothing: true, status: :error }
+      end
+    end
+  end
 
   def destroy
     @photo = Photo.find params[:id]

data/app/helpers/image_helper.rb

@@ -1,7 +1,7 @@
 module ImageHelper 
 
   def list_photos(resource)
-    content_tag(:div, class: 'lol-multiple-uploads images-container is-sortable', 'data-resource' => 'photo') do
+    content_tag(:div, class: 'lol-multiple-uploads images-container is-sortable', 'data-resource' => 'photo', 'data-has-caption' => resource.class.caption_status) do
       render partial: '/layouts/lol_multiple_uploads/photo', collection: resource.photos.prioritized
     end
   end

data/app/helpers/upload_helper.rb

@@ -1,5 +1,5 @@
 module UploadHelper
 	def upload_link(name='Upload File', object=nil, image_container='.images-container')
-		link_to(name, 'javascript://', class: 'multiple_upload', 'data-model' => object.class, 'data-model-id' => object.id, 'data-store-path' => upload_image_path(format: 'json'), 'data-file-picker-key' => "#{PICKER_KEY}", 'data-image-container' => image_container) unless object.nil? || object.new_record?
+		link_to(name, 'javascript://', class: 'multiple_upload', 'data-model' => object.class, 'data-model-id' => object.id, 'data-store-path' => upload_image_path(format: 'js'), 'data-file-picker-key' => "#{PICKER_KEY}", 'data-image-container' => image_container) unless object.nil? || object.new_record?
 	end
 end

data/app/models/photo.rb

@@ -8,4 +8,12 @@ class Photo
 	belongs_to :photable, polymorphic: true
 
 	validates :photable, presence: true
+
+  field :caption
+
+  validates :caption, presence: true, if: :has_caption?, on: :update
+
+  def has_caption?
+    self.photable.present? && self.photable.caption_status
+  end
 end

data/app/views/layouts/lol_multiple_uploads/_photo-caption.html.erb

@@ -0,0 +1,3 @@
+<%= form_for photo, url: update_image_path(photo) do |f|%>
+  <%= f.text_field :caption, placeholder: 'pt-BR' %>
+<% end %>

data/app/views/layouts/lol_multiple_uploads/_photo.html.erb

@@ -1,4 +1,5 @@
 <figure data-id="<%= photo.id %>">
   <%= image_tag(photo.image.url)%>
   <%= link_to "Remover", remove_image_path(photo, format: 'json'), method: :delete %>
+  <%= render partial: '/layouts/lol_multiple_uploads/photo-caption', locals: {photo: photo} if photo.has_caption? %>
 </figure>

data/config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-
 	post   '/upload-image'     => 'photos#create' , as: :upload_image
+  put    '/update-image/:id' => 'photos#update' , as: :update_image
   delete '/remove-image/:id' => 'photos#destroy', as: :remove_image
 end

data/lib/lol_multiple_uploads/version.rb

@@ -1,3 +1,3 @@
 module LolMultipleUploads
-  VERSION = "1.0.2"
+  VERSION = "1.1.0"
 end

data/lib/mongoid/lol_multiple_images.rb

@@ -1,12 +1,35 @@
+# module Mongoid
+# 	module LolMultipleImages
+#     extend ActiveSupport::Concern
+
+#     included do
+#       cattr_accessor :caption_status
+
+#       has_many :photos, as: :photable
+#     end
+
+#     module ClassMethods
+#       def images_caption(option=false)
+#         self.caption_status = option
+#       end
+#     end
+# 	end
+# end
+
 module Mongoid
-	module LolMultipleImages
-		extend ActiveSupport::Concern
+  module LolMultipleImages
+    extend ActiveSupport::Concern
+
+    included do
+      cattr_accessor :caption_status
 
-		included do
       has_many :photos, as: :photable
     end
-    
-		module ClassMethods
-		end
-	end
+
+    module ClassMethods
+      def multiple_uploads(option={})
+        self.caption_status = option[:caption] || false # config
+      end
+    end
+  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lol_multiple_uploads
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.0
 platform: ruby
 authors:
 - Eduardo Zaghi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-12 00:00:00.000000000 Z
+date: 2013-10-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -96,6 +96,7 @@ files:
 - app/helpers/upload_helper.rb
 - app/models/photo.rb
 - app/uploaders/image_uploader.rb
+- app/views/layouts/lol_multiple_uploads/_photo-caption.html.erb
 - app/views/layouts/lol_multiple_uploads/_photo.html.erb
 - config/initializers/init_lol_multiple_uploads.rb
 - config/routes.rb