inplace_editing 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 25aeffb75b1e41393b090a7e0f3205bb1cee5319
-  data.tar.gz: 5259bac3efb39ab2b11b8ebcadd577768b449706
+  metadata.gz: 5f84872e5235d8573b8d8e14ad609a734f19c136
+  data.tar.gz: 0a8bbb3f59c143ec2fa8b814a41c9d5e01180225
 SHA512:
-  metadata.gz: 0fc78dafd845b2e0282e306b9c2dd739776c8077384d6d7d7719cd57a5b5bca7c4aec8d3e92d805fb1e4e8d0848da64fa3e8ca16422577d9f392698dec300862
-  data.tar.gz: 91c2859744af480916c45b39cd3ab336270db0c236df8ba6aeb785946d7cd29901bde216d6b49c9ecbd9bb636f6b327e02c31ad9b18ac07e9f455959edd31874
+  metadata.gz: 478a8c79dae580791237d0660b4d54a4b746894d7c7d2edd8d78ff1604b29dd9f318165d79332ab3552dd33fb7b7afed92e8c39711e7f183d105f1ca0f42e1ba
+  data.tar.gz: 9da3ba4f6843bea3ddb477583956206c110f1030fd9d359d06b967092e531f8e0030ab2c11b9e6eb24d25362e86fc8eb91970a620f2995abfef35d2eb0661063

data/README.md

@@ -36,8 +36,8 @@ Don't forget to add scripts
     //= require inplace_editing
 
     $(document).ready(function() {
-      /* Activating Best In Place */
-      jQuery(".best_in_place").best_in_place();
+      /* Activating Inplace Editor */
+      InplaceEditingManager.bindAll();
     });
 
 ## Usage

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

@@ -2,5 +2,5 @@
   .best_before
     - if local_assigns[:label]
       label = local_assigns[:label] + ' '
-    = best_in_place localized_object, property, as: :input, :ok_button => 'Salvar', :cancel_button => 'Cancelar', :place_holder => (local_assigns[:place_holder] ? local_assigns[:place_holder] : "[texto aqui]")
+    = best_in_place localized_object, property, as: :input, class: 'inplace_editor inplace_editor_element', :ok_button => 'Salvar', :cancel_button => 'Cancelar', :place_holder => (local_assigns[:place_holder] ? local_assigns[:place_holder] : "[texto aqui]")
   = yield(local_assigns)

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

@@ -1,6 +1,5 @@
-- form_id = 'image_editor_' + localized_object.class.name + '' + localized_object.id.to_s + '_' + property.to_s
 - image_src = localized_object[property] ? localized_object.send(property.to_s + '_url') : local_assigns[:default_value]
-= simple_form_for(localized_object, html: {id:form_id, :multipart => true, novalidate: true }, :format => :json, :remote => true, authenticity_token: true) do |f|
+= simple_form_for(localized_object, html: { class: 'inplace_editor inplace_editor_image' :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
   .image-container
@@ -9,33 +8,4 @@
       a.insert-image href="" Clique para inserir imagem
   .actions-container style="display:none;"
     input.saveButton type="submit" value="Salvar"
-    input.cancelButton type="button" value="Cancelar"
-javascript:
-  $(document).ready(function() {
-    var form_id = "#{form_id}";
-    var imageEditor = asyncImageForm({
-      formSelector: 'form#' + form_id,
-      inputFileSelector: 'form#' + form_id + ' input[type=file]',
-      inputSubmitSelector: 'form#' + form_id + ' input[type=submit].saveButton',
-      imagePreviewSelector: 'form#' + form_id + ' img.editable-preview',
-      imageChangerSelector: 'form#' + form_id + ' img.preview, form#' + form_id + ' a.insert-image',
-      errorsGroup: '#{localized_object.class.name.downcase}',
-      events: {
-        imageChanged: function() {
-          $('form#' + form_id + ' a.insert-image').hide();
-          $('form#' + form_id + ' .actions-container').show();
-          $('form#' + form_id + ' .actions-container input').prop('disabled', false);
-        },
-        imageUploading: function() {
-          $('form#' + form_id + ' .actions-container input').prop('disabled', true)
-        },
-        imageUploadSuccess: function() {
-          $('form#' + form_id + ' .actions-container').hide();
-        },
-        imageUploadFail: function() {
-          $('form#' + form_id + ' .actions-container').show();
-          $('form#' + form_id + ' .actions-container input').prop('disabled', false)
-        }
-      }
-    });
-  });
+    input.cancelButton type="button" value="Cancelar"

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

@@ -1 +1 @@
-= best_in_place localized_object, property, as: :input, :ok_button => 'Salvar', :cancel_button => 'Cancelar', :place_holder => local_assigns[:place_holder] ? local_assigns[:place_holder] : "[troque o texto aqui]"
+= best_in_place localized_object, property, as: :input, class: 'inplace_editor inplace_editor_string', :ok_button => 'Salvar', :cancel_button => 'Cancelar', :place_holder => local_assigns[:place_holder] ? local_assigns[:place_holder] : "[troque o texto aqui]"

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

@@ -1 +1 @@
-= best_in_place localized_object, property, as: :textarea, class:'best_in_place_textarea', :place_holder => local_assigns[:place_holder] ? local_assigns[:place_holder] : "[texto aqui]", sanitize: false, :ok_button => 'Salvar', :cancel_button => 'Cancelar', :display_with  => lambda { |v| markdown(v, '[texto aqui]') }
+= best_in_place localized_object, property, as: :textarea, class: 'best_in_place_textarea inplace_editor inplace_editor_text', :place_holder => local_assigns[:place_holder] ? local_assigns[:place_holder] : "[texto aqui]", sanitize: false, :ok_button => 'Salvar', :cancel_button => 'Cancelar', :display_with  => lambda { |v| markdown(v, '[texto aqui]') }

data/lib/assets/javascripts/inplace_editing.js

@@ -1,11 +1,71 @@
+var InplaceEditingManager = {
+  bindText: function(element) {
+    $(element).best_in_place();
+  },
+  tryBindText: function(parentElementOrSelector) {
+    var self = this;
+    $.each($(parentElementOrSelector).find('.best_in_place.inplace_editor'), function(index, element) {
+      self.bindText(element);
+    });
+  }
+  bindImage: function(imageForm) {
+    return asyncImageForm({
+      formElement: $(imageForm),
+      inputFileElement: $(imageForm).find('input[type=file]'),
+      imagePreviewElement: $(imageForm).find('img.editable-preview'),
+      imageChangerElement: $(imageForm).find('img.preview, a.insert-image'),
+      errorsGroup: '#{localized_object.class.name.downcase}',
+      events: {
+        imageChanged: function() {
+          $(imageForm).find('a.insert-image').hide();
+          $(imageForm).find('.actions-container').show();
+          $(imageForm).find('.actions-container input').prop('disabled', false);
+        },
+        imageUploading: function() {
+          $(imageForm).find('.actions-container input').prop('disabled', true)
+        },
+        imageUploadSuccess: function() {
+          $(imageForm).find('.actions-container').hide();
+        },
+        imageUploadFail: function() {
+          $(imageForm).find('.actions-container').show();
+          $(imageForm).find('.actions-container input').prop('disabled', false)
+        }
+      }
+    });
+  }
+  tryBindImage: function(parentElement) {
+    var self = this;
+    $.each($(parentElementOrSelector).find('.inplace_editor_image'), function(index, element) {
+      self.bindImage(element);
+    });
+  },
+  bindAll: function(parentElement) {
+    if (!parentElement)
+      parentElement = 'body';
+    tryBindText(parentElement);
+    tryBindImage(parentElement);
+  }
+}
+
 function asyncImageForm(config) {
   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 = {
     // formSelector: 'form.async-republic-image',
+    // formElement: null,
     // inputFileSelector: 'form.async-republic-image .input_addPictureButton',
-    // inputSubmitSelector: 'form.async-republic-image input[type=submit]',
+    // inputFileElement: null,
     // imagePreviewSelector: 'form.async-republic-image img.preview',
+    // imagePreviewElement: null,
     // imageChangerSelector: 'form.async-republic-image img.preview',
+    // imageChangerElement: null,
     // errorsGroup: 'republic_image',
     // events: {
       // imageChanged: function() {},
@@ -15,25 +75,30 @@ function asyncImageForm(config) {
     // }
   // }
 
+  var elementProperties = ['form', 'inputFile', 'imagePreview', 'imageChanger'];
+  for (var i = 0; i < elementProperties.length; i++) {
+    this.config.setConfigOrSelector(elementProperties[i]);
+  }
+
   function defaultPostImageSuccess() {
     window.location.reload();
     return false;
   };
 
-  $(config.inputFileSelector).change(function(){
-    setImagePreview(this, $(config.imagePreviewSelector));
+  config.inputFileElement.change(function(){
+    setImagePreview(this, config.imagePreviewElement);
     config.events.imageChanged(this);
   });
 
-  $(config.imageChangerSelector).click(function(e){
+  config.imageChangerElement.click(function(e){
     if(typeof e.preventDefault === 'function')
       e.preventDefault();
 
-    $(config.inputFileSelector).click();
+    config.inputFileElement.click();
     return false;
   });
 
-  $(config.formSelector).submit(function (event) {
+  config.formElement.submit(function (event) {
     event.preventDefault();
 
     //grab all form data  

data/lib/inplace_editing/version.rb

@@ -1,3 +1,3 @@
 module InplaceEditing
-  VERSION = "0.1.4"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inplace_editing
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.0
 platform: ruby
 authors:
 - Henrique Rangel
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-02-04 00:00:00.000000000 Z
+date: 2017-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler