inplace_editing 0.3.3 → 0.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e4b1666d1671a8ad837e3cb7f0c229ba4771041a
-  data.tar.gz: f789697a5ca85298a0e6e885622cf4334b1a220b
+  metadata.gz: c748aeb6c93204e5c049e4eb388607325196857d
+  data.tar.gz: 95c28c31fed009c51440eb682cf31c6d039057bf
 SHA512:
-  metadata.gz: 1f5065d8ada5ef039d0918a55ce866c0c186dd842ee19764e5ff1fa8d3bb8144ffdf3d2026bd2b875cdf77261b4327931d5fc2617e2d3b59e0053910b92a44ac
-  data.tar.gz: ee4c81e4e3ce893d1566cbc4a8e92f335e8095a1e7abe5ba2a9ac043bc7915a405a4d4f7e14ee248c5a2ae2317e5da0f8f641c4786acb04dd33a4fe4554b3e6f
+  metadata.gz: 3d3ea3bd17e6dce813522554e5af064d08acd6faf9cf10b0034f261db0c250ee1cdb3ed3b0e9d5f30993fb66d3a90b0f97b1a2f25524a9771eebb88e3cebe814
+  data.tar.gz: 8da550a53c5aa23fc6f30639155287240527436206bdcbb6e45f0cbe55e66126b82d61d064362c1410be0e569d7a13f7f9bfd26212ef4bad8957530132831a81

data/README.md

@@ -42,7 +42,8 @@ Don't forget to add scripts
 
 And styles
 
-    *= require inplace_editing
+    @import "font-awesome";
+    @import "inplace_editing";
 
 ## Usage
 

data/app/helpers/inplace_editing_helper.rb

@@ -37,6 +37,21 @@ module InplaceEditingHelper
     { localized_object: localized_object, property: property, place_holder: place_holder, default_value: default_value, label: label }
   end
 
+  def image_bg_editor(localized_object, property, container_tag, attrs)
+    if localized_object[property]
+      image = localized_object.public_send(property)
+      image = image.url if image.respond_to?(:url)
+      attrs[:style] = 'background-image:url("' + image + '");' + (attrs[:style] ? attrs[:style] : '')
+    end
+
+    locals = editor_locals(localized_object, property)
+    locals[:tag] = container_tag
+    locals[:attrs] = attrs
+    render layout: 'inplace_editing/image_bg', :locals => locals do |view_locals|
+      yield view_locals
+    end
+  end
+
   def markdown(text, placeholder = '[texto aqui]')
     return placeholder if !text
     options = {
@@ -59,6 +74,81 @@ module InplaceEditingHelper
 
     markdown.render(text).html_safe
   end
+
+  def content_tag(*args)
+    if block_given?
+      tag = Tag.new(args[0], args[1] || {})
+      old_buf = @output_buffer
+      @output_buffer = ActionView::OutputBuffer.new
+      value = yield(tag)
+      content = tag.render(@output_buffer.presence || value)
+      @output_buffer = old_buf
+      content
+    else
+      super
+    end
+  end
+
+  class Tag
+    include ActionView::Helpers::CaptureHelper
+    attr_accessor :id
+    attr_reader :name, :css
+
+    def initialize(name, attributes = {})
+      @name = name
+      @attributes = attributes.with_indifferent_access
+      @attributes[:class] = Tag::CSS.new(attributes[:class])
+    end
+
+    def []=(k,v)
+      @attributes[k] = v
+    end
+    
+    def [](k)
+      @attributes[k]
+    end
+    
+    def render(content)
+      "<#{name}#{render_attributes}>#{content.strip}</#{name}>".html_safe
+    end
+
+    def render_attributes
+      attrs = @attributes.dup
+      if self[:class].empty?
+        attrs.delete :class
+      else
+        attrs[:class] = self[:class].to_s
+      end
+
+      attrs.keys.map do |k|
+        "#{k}='#{ERB::Util.html_escape(attrs[k])}'".html_safe
+      end.join(' ').prepend(' ')
+    end
+
+    class CSS
+      
+      def initialize(css)
+        if css.is_a? String
+          @internals = css.split(' ')
+        else
+          @internals = css.to_a
+        end
+      end
+
+      def to_s
+        @internals.uniq.join(' ')
+      end
+
+      def empty?
+        @internals.empty?
+      end
+
+      def <<(name)
+        @internals << name
+        nil
+      end
+    end
+  end
 end
 
 # @inplace_editing_mode = tem que ser setado no after_action usando o @can_edit

data/app/views/inplace_editing/_image_bg.slim

@@ -0,0 +1,2 @@
+= render layout: 'inplace_editing/' + @inplace_editing_mode + '/image_bg', :locals => local_assigns do |args|
+  = yield(args)

data/app/views/inplace_editing/edit/_image_bg.html.slim

@@ -0,0 +1,13 @@
+- image_src = localized_object[property] ? localized_object.send(property.to_s + '_url') : local_assigns[:default_value]
+= content_tag tag do |el|
+  - attrs.each {|key_name, value| el[key_name.to_sym] = value }
+  - el[:class] = 'inplace_editor inplace_editor_image_bg ' + (el[:class].present? ? el[:class] : '')
+  = simple_form_for(localized_object, html: { :multipart => true, novalidate: true }, :format => :json, :remote => true, authenticity_token: true) do |f|
+    = f.input_field property, as: :file, label: "Trocar Imagem", style: 'display:none'
+    = f.input property.to_s + "_cache", as: :hidden
+    .editor-container
+      a class="#{image_src.blank? ? 'insert-image' : 'edit-image'}" #{image_src.blank? ? 'Clique para inserir imagem' : ''}
+    .actions-container style="display:none;"
+      input.saveButton type="submit" value="Salvar" /
+      input.cancelButton type="button" value="Cancelar" /
+    = yield(local_assigns)

data/app/views/inplace_editing/read/_image_bg.slim

@@ -0,0 +1,3 @@
+= content_tag tag do |el|
+  - attrs.each {|key_name, value| el[key_name] = value }
+  = yield(local_assigns)

data/lib/assets/javascripts/inplace_editing.js

@@ -40,12 +40,45 @@ var InplaceEditingManager = {
       self.bindImage(element);
     });
   },
+  bindImageBG: function(imageBGContainer) {
+    return new asyncImageBGForm({
+      containerElement: $(imageBGContainer),
+      formElement: $(imageBGContainer).find('form'),
+      inputFileElement: $(imageBGContainer).find('input[type=file]'),
+      imageChangerElement: $(imageBGContainer).find('a.insert-image, a.edit-image'),
+      errorsGroup: '#{localized_object.class.name.downcase}',
+      events: {
+        imageChanged: function() {
+          $(imageBGContainer).find('a.insert-image').hide();
+          $(imageBGContainer).find('.actions-container').show();
+          $(imageBGContainer).find('.actions-container input').prop('disabled', false);
+        },
+        imageUploading: function() {
+          $(imageBGContainer).find('.actions-container input').prop('disabled', true)
+        },
+        imageUploadSuccess: function() {
+          $(imageBGContainer).find('.actions-container').hide();
+        },
+        imageUploadFail: function() {
+          $(imageBGContainer).find('.actions-container').show();
+          $(imageBGContainer).find('.actions-container input').prop('disabled', false)
+        }
+      }
+    });
+  },
+  tryBindImageBG: function(parentElementOrSelector) {
+    var self = this;
+    $.each($(parentElementOrSelector).find('.inplace_editor_image_bg'), function(index, element) {
+      self.bindImageBG(element);
+    });
+  },
   bindAll: function(parentElement) {
     var self = this;
     if (!parentElement)
       parentElement = 'body';
     self.tryBindText(parentElement);
     self.tryBindImage(parentElement);
+    self.tryBindImageBG(parentElement);
   }
 }
 
@@ -82,11 +115,6 @@ function asyncImageForm(config) {
     image_form.config.setConfigOrSelector(elementProperties[i]);
   }
 
-  function defaultPostImageSuccess() {
-    window.location.reload();
-    return false;
-  };
-
   image_form.config.inputFileElement.change(function(){
     setImagePreview(this, image_form.config.imagePreviewElement);
     image_form.config.events.imageChanged(this);
@@ -144,4 +172,100 @@ function setImagePreview(input, imageElement, noImageElement) {
         noImageElement.show();
       imageElement.hide();
     }
+}
+
+function asyncImageBGForm(config) {
+  var image_bg_form = this;
+  this.config = config;
+  this.config.setConfigOrSelector = function(prefix) {
+    var self = this;
+    var key = prefix + 'Element';
+    if (!self.hasOwnProperty(key) || !self[key]) {
+      self[key] = $(self[prefix + 'Selector']);
+    }
+  };
+  // var config = {
+    // containerSelector: '.image_bg_container',
+    // containerElement: null,
+    // formSelector: 'form.async-republic-image',
+    // formElement: null,
+    // inputFileSelector: 'form.async-republic-image .input_addPictureButton',
+    // inputFileElement: null,
+    // imageChangerSelector: 'form.async-republic-image img.preview',
+    // imageChangerElement: null,
+    // errorsGroup: 'republic_image',
+    // events: {
+      // imageChanged: function() {},
+      // imageUploading: function() {},
+      // imageUploadSuccess: function() {},
+      // imageUploadFail: function() {}
+    // }
+  // }
+
+  var elementProperties = ['container', 'form', 'inputFile', 'imageChanger'];
+  for (var i = 0; i < elementProperties.length; i++) {
+    image_bg_form.config.setConfigOrSelector(elementProperties[i]);
+  }
+
+  image_bg_form.config.inputFileElement.change(function(){
+    setImageBGPreview(this, image_bg_form.config.containerElement);
+    image_bg_form.config.events.imageChanged(this);
+  });
+
+  image_bg_form.config.imageChangerElement.click(function(e){
+    if(typeof e.preventDefault === 'function')
+      e.preventDefault();
+
+    image_bg_form.config.inputFileElement.click();
+    return false;
+  });
+
+  image_bg_form.config.formElement.submit(function (event) {
+    event.preventDefault();
+
+    //grab all form data  
+    var formData = new FormData($(this)[0]);
+
+    image_bg_form.config.events.imageUploading(this);
+
+    $.ajax({
+        url: $(this).attr('action'),
+        type: $(this).attr('method'),
+        data: formData,
+        cache: false,
+        contentType: false,
+        processData: false,
+        success: function (responseData) {
+          image_bg_form.config.events.imageUploadSuccess(responseData);
+        },
+        error: function () {
+          image_bg_form.config.events.imageUploadFail(this);
+        }
+    });
+
+    return false;
+  });
+};
+
+function setImageBGPreview(input, imageElement, noImageElement) {
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+
+        reader.onload = function (e) {
+            if (noImageElement)
+              noImageElement.hide();
+            var originalBG = $(imageElement).attr('data-background-image');
+            if (!originalBG)
+              $(imageElement).attr('data-background-image', $(imageElement).css('background-image'));
+            $(imageElement).css('background-image', 'url(' + e.target.result + ')');
+        }
+
+        reader.readAsDataURL(input.files[0]);
+    } else {
+      if (noImageElement)
+        noImageElement.show();
+      var originalBG = $(imageElement).attr('data-background-image');
+      if (originalBG && originalBG.length)
+        $(imageElement).css('background-image', originalBG);
+    }
 }

data/lib/assets/stylesheets/inplace_editing.scss

@@ -61,4 +61,15 @@
       z-index: 6;
     }
   }
+}
+
+.inplace_editor_image_bg {
+  position: relative;
+  z-index: 5;
+  .editor-container {
+    a.edit-image {
+      @extend .inplace_editor_edit_icon;
+      z-index: 7;
+    }
+  }
 }

data/lib/inplace_editing/version.rb

@@ -1,3 +1,3 @@
 module InplaceEditing
-  VERSION = "0.3.3"
+  VERSION = "0.3.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: inplace_editing
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.5
 platform: ruby
 authors:
 - Henrique Rangel
@@ -57,16 +57,19 @@ files:
 - app/helpers/inplace_editing_helper.rb
 - app/views/inplace_editing/_element.html.slim
 - app/views/inplace_editing/_image.html.slim
+- app/views/inplace_editing/_image_bg.slim
 - app/views/inplace_editing/_only_valid.html.slim
 - app/views/inplace_editing/_optional.html.slim
 - app/views/inplace_editing/_string.html.slim
 - app/views/inplace_editing/_text.html.slim
 - app/views/inplace_editing/edit/_element.html.slim
 - app/views/inplace_editing/edit/_image.html.slim
+- app/views/inplace_editing/edit/_image_bg.html.slim
 - app/views/inplace_editing/edit/_string.html.slim
 - app/views/inplace_editing/edit/_text.html.slim
 - app/views/inplace_editing/read/_element.html.slim
 - app/views/inplace_editing/read/_image.html.slim
+- app/views/inplace_editing/read/_image_bg.slim
 - app/views/inplace_editing/read/_string.html.slim
 - app/views/inplace_editing/read/_text.html.slim
 - bin/console