editable_components 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ea50542043e609312e77f3da4c7d1fef363b3d3b
-  data.tar.gz: a6daa7a6b46dc31b510fb5c1eaa0887d876b5091
+  metadata.gz: 7b9da05cf8c46f15fde699247172243145297a9d
+  data.tar.gz: 57698e25090be81d4bdc8488aca81b471a7874b9
 SHA512:
-  metadata.gz: 37ba95df0bd821832b80a655f112b2f925062c4042c8007ec7592f91349370d5e974485c79ffc4f32b9790b254655583d8dc9868e2e0e9a6c8de8f36d427fb67
-  data.tar.gz: 21ec42dd7e39b3e9aac0ad933b38c07d110a1d4562e22738dd2215a35187c2bc3d91ea8ed23773251978047428cc5c280025207641013a39afa6df504b0443b0
+  metadata.gz: 7fc23be9b8ebbcd7732652f5f418d0c9091248d2736a1295074596687eb9759d18d6294d2a89f8d97ff69128279d8f7e1d2d12ae609bb3db45c052d1efc8161f
+  data.tar.gz: 53070853e6f5e09fcb0fec4821be5c915aebcd386f2c0b36d2878da239977f82da587e054ba1250a5c03470e66e96dd5c6ac61b33773b942317f74966510a38f

data/README.md

@@ -1,4 +1,4 @@
-# EditableComponents for Rails
+# EditableComponents for Rails [![Gem Version](https://badge.fury.io/rb/editable_components.svg)](https://badge.fury.io/rb/editable_components)
 
 A Ruby on Rails plugin to manage UI components editable from the front-end.
 
@@ -14,21 +14,21 @@ Goals:
 
 ![preview](preview.png)
 
-### Instructions
+### Install
 
-1. Add to the Gemfile: `gem 'editable_components'`
+- Add to the Gemfile: `gem 'editable_components'`
 
-2. Copy migrations (Rails 5.x syntax, in Rails 4.x use rake): `rails editable_components:install:migrations`
+- Copy migrations (Rails 5.x syntax, in Rails 4.x use rake): `rails editable_components:install:migrations`
 
-3. Apply them: `rake db:migrate`
+- Apply them: `rake db:migrate`
 
-4. Include the concern *Editable* to your model: `include EditableComponents::Concerns::Editable`
+- Include the concern *Editable* to your model: `include EditableComponents::Concerns::Editable`
 
-5. Add to your application layout (in head, ex. using ERB): `<%= stylesheet_link_tag( EditableComponents::Engine.css ) if EditableComponents::Engine.css %>`
+- Add to your application layout (in head, ex. using ERB): `<%= stylesheet_link_tag( EditableComponents::Engine.css ) if EditableComponents::Engine.css %>`
 
-6. Add to your application layout (before body closing): `<%= javascript_include_tag( EditableComponents::Engine.js ) if EditableComponents::Engine.js %>`
+- Add to your application layout (before body closing): `<%= javascript_include_tag( EditableComponents::Engine.js ) if EditableComponents::Engine.js %>`
 
-7. Add your blocks to the views (ex. in show):
+- Add your blocks to the views (ex. in show):
 ```erb
 <%= render layout: 'editable_components/blocks', locals: { container: @page } do |blocks| %>
   <% blocks.each do |block| %>
@@ -37,7 +37,38 @@ Goals:
 <% end %>
 ```
 
-8. Add some sample data (ex. Page model): `Page.first.create_block :text`
+- Add some sample data (ex. Page model): `Page.first.create_block :text`
+
+### Config
+
+Edit the conf file: `config/initializers/editable_components.rb`
+
+```ruby
+conf = EditableComponents.config
+# Adds a new custom block
+conf[:ec_blocks][:custom] = {
+  name: 'Custom block',
+  items: {
+    int1: :item_integer,
+    int2: :item_integer,
+    a_float: :item_float
+  }
+}
+EditableComponents.config( { components: conf[:ec_blocks] } )
+```
+
+Create the new view blocks: `app/views/editable_components/_block_custom.html.erb`
+
+```erb
+<% if local_assigns[:block] %>
+  <% block = local_assigns[:block] %>
+  <div <%= block.editable %>>
+    1st number: <span class="num1"<%= block.props.integers[0].editable %>><%= block.props.integers[0] %></span>
+    - 2nd number: <span class="num2"<%= block.props.integers[1].editable %>><%= block.props.integers[1] %></span><br/>
+    A float: <span <%= block.props.float.editable %>><%= block.props.float %></span><br/>
+  </div>
+<% end %>
+```
 
 ##### Images
 

data/app/assets/javascripts/editable_components/main.js

@@ -2,6 +2,13 @@
 var ecMain = (function() {
   this.editing = false;
   return {
+    createInput( parent, name, value ) {
+      var el = document.createElement( 'input' );
+      el.setAttribute( 'type', 'hidden' );
+      el.setAttribute( 'name', name );
+      el.setAttribute( 'value', value );
+      parent.appendChild( el );
+    },
     dlgPreviewClose: function() {
       Sizzle( '[data-ec-toolbar]' )[0].style.display = 'block';
       Sizzle( '[data-ec-dlg="preview"]' )[0].style.display = 'none';
@@ -228,45 +235,43 @@ var ecVue = new Vue({
     onSubmit: function( event ) {
       // event.preventDefault();
 
-      var cmp = this;
-      this.inputs = [];
       // Update items
       Sizzle( '[data-ec-item]' ).forEach( function( el ) {
         var input = el.getAttribute( 'data-ec-input' );
         if( input != 'file' && input != 'file_image' ) {
-          cmp.inputs.push( { name: 'ec_cmp[' + el.getAttribute( 'data-ec-type' ) + '][' + el.attributes['data-ec-item'].value + ']', value: el.innerHTML } );
+          ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[' + el.getAttribute( 'data-ec-type' ) + '][' + el.attributes['data-ec-item'].value + ']', el.innerHTML );
         }
       });
       // Update positions
       var last = Sizzle( '[data-ec-block]' ).length;
       Sizzle( '[data-ec-block]' ).forEach( function( el ) {
-        cmp.inputs.push( { name: 'ec_cmp[Block][' + el.attributes['data-ec-block'].value + '][position]', value: last-- } );
+        ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][' + el.attributes['data-ec-block'].value + '][position]', last-- );
         var last2 = Sizzle( '[data-ec-sub-block]', el ).length;
         if( last2 ) {
           Sizzle( '[data-ec-sub-block]', el ).forEach( function( el2 ) {
             var sid = el2.getAttribute( 'data-ec-sub-block' );
-            cmp.inputs.push( { name: 'ec_cmp[Block][' + sid + '][position]', value: last2-- } );
+            ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][' + sid + '][position]', last2-- );
           });
         }
       });
       // New blocks
       var cnt = 0;
       Sizzle( '[data-ec-new-block]' ).forEach( function( el ) {
-        cmp.inputs.push( { name: 'ec_cmp[Block][0][_add][' + ( cnt++ ) + ']', value: el.getAttribute( 'data-ec-type' ) } );
+        ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][0][_add][' + ( cnt++ ) + ']', el.getAttribute( 'data-ec-type' ) );
       });
       // New sub blocks
       Sizzle( '[data-ec-block][data-ec-new-blocks]' ).forEach( function( el ) {
         cnt = parseInt( el.getAttribute( 'data-ec-new-blocks' ) );
         for( var i = 0; i < cnt; i++ ) {
-          cmp.inputs.push( { name: 'ec_cmp[Block][' + el.getAttribute( 'data-ec-block' ) + '][_add][' + i + ']', value: el.getAttribute( 'data-ec-container' ) } );
+          ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][' + el.getAttribute( 'data-ec-block' ) + '][_add][' + i + ']', el.getAttribute( 'data-ec-container' ) );
         }
       });
       // Remove blocks
       Sizzle( '[data-ec-block][data-ec-destroy="1"]' ).forEach( function( el ) {
-        cmp.inputs.push( { name: 'ec_cmp[Block][' + el.attributes['data-ec-block'].value + '][_destroy]', value: '1' } );
+        ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][' + el.attributes['data-ec-block'].value + '][_destroy]', '1' );
       });
       Sizzle( '[data-ec-sub-block][data-ec-destroy="1"]' ).forEach( function( el ) {
-        cmp.inputs.push( { name: 'ec_cmp[Block][' + el.attributes['data-ec-sub-block'].value + '][_destroy]', value: '1' } );
+        ecMain.createInput( Sizzle( '[data-ec-fields]' )[0], 'ec_cmp[Block][' + el.attributes['data-ec-sub-block'].value + '][_destroy]', '1' );
       });
     },
     removeBlock: function() {

data/app/models/editable_components/block.rb

@@ -15,6 +15,7 @@ module EditableComponents
 
     # --- hooks -------------------------------------------------------------- #
     before_create :on_before_create
+    after_create :on_after_create
 
     # --- scopes ------------------------------------------------------------- #
     default_scope { order( position: :desc ) }
@@ -85,33 +86,6 @@ module EditableComponents
       @_items[name]
     end
 
-    def init
-      t = block_type.to_sym
-      if Block::block_types.include? t
-        init_items self, EditableComponents.config[:ec_blocks][t][:items]
-      end
-    end
-
-    def init_items( block, items )
-      items.each do |name, type|
-        t = type.to_sym
-        if type.to_s.start_with? 'item_'
-          c = 'EditableComponents::' + ActiveSupport::Inflector.camelize( t )
-          begin
-            model = c.constantize
-          rescue Exception => e
-            Rails.logger.error '[ERROR] EditableComponents - init_items: ' + e.message
-            model = false
-          end
-          block.items << model.new( name: name ).init if model
-        elsif Block::block_types.include? t.to_sym
-          cmp = Block.new( block_type: t, name: name )
-          block.ec_blocks << cmp
-          init_items( cmp, EditableComponents.config[:ec_blocks][t][:items] )
-        end
-      end if items
-    end
-
     def has_parent?
       parent.present?
     end
@@ -124,20 +98,22 @@ module EditableComponents
       parent.present? && parent_type == 'EditableComponents::Block'
     end
 
+    def on_after_create
+      # TODO: validates type before creation!
+      t = self.block_type.to_sym
+      Block::init_items( self, EditableComponents.config[:ec_blocks][t][:items] ) if Block::block_types.include?( t )
+    end
+
     def on_before_create
-      if self._init
-        self._init = false
-        if self.name.blank?
-          names = parent.ec_blocks.map &:name
-          i = 0
-          while( ( i += 1 ) < 1000 )  # Search an empty group
-            unless names.include? "#{block_type}-#{i}"
-              self.name = "#{block_type}-#{i}"
-              break
-            end
+      if self.name.blank?
+        names = parent.ec_blocks.map &:name
+        i = 0
+        while( ( i += 1 ) < 1000 )  # Search an empty group
+          unless names.include? "#{block_type}-#{i}"
+            self.name = "#{block_type}-#{i}"
+            break
           end
         end
-        init
       end
     end
 
@@ -172,5 +148,23 @@ module EditableComponents
     def self.block_types
       @@block_types ||= EditableComponents.config[:ec_blocks].keys
     end
+
+    def self.init_items( block, items )
+      items.each do |name, type|
+        t = type.to_sym
+        if type.to_s.start_with? 'item_'
+          c = 'EditableComponents::' + ActiveSupport::Inflector.camelize( t )
+          begin
+            model = c.constantize
+          rescue Exception => e
+            Rails.logger.error '[ERROR] EditableComponents - init_items: ' + e.message
+            model = false
+          end
+          block.items << model.new( name: name ).init if model
+        elsif Block::block_types.include? t.to_sym
+          block.ec_blocks << ( cmp = Block.new( block_type: t, name: name ) )
+        end
+      end if items
+    end
   end
 end

data/app/models/editable_components/concerns/editable.rb

@@ -9,7 +9,7 @@ module EditableComponents
         accepts_nested_attributes_for :ec_blocks, allow_destroy: true
 
         def create_block( type = :text, params = {} )
-          block = Block.new( _init: true, block_type: type )
+          block = Block.new( block_type: type )
           block.options = params[:options] if params[:options]
           block.validations = params[:validations] if params[:validations]
           ec_blocks << block

data/app/views/editable_components/_admin_toolbar.html.erb

@@ -85,7 +85,6 @@
       <%= form_for page, url: EditableComponents::Engine::routes.url_helpers.ec_update_path( model, page ), method: :patch, as: :ec_cmp, namespace: 'ec', html: { 'data-ec-form': '', 'data-ec-model': model, 'v-cloak': '', 'v-on:submit': 'onSubmit( $event )' } do |f| %>
         <input type="hidden" name="version" value="<%= @version.to_i %>"/>
         <div data-ec-fields></div>
-        <input v-for="input in inputs" type="hidden" v-bind:name="input.name" v-bind:value="input.value"/>
         <%= button_tag( type: 'submit', class: 'c-button c-button--info', title: 'Save changes', 'data-ec-menu-save': '' ) do %>
           <i data-ec-icon="icon-floppy-disk"></i> save
         <% end %>

data/db/migrate/20170414173603_create_editable_components_blocks.rb

@@ -6,7 +6,6 @@ class CreateEditableComponentsBlocks < ActiveRecord::Migration[5.0]
       t.string :name, null: false, default: ''
       t.integer :position, null: false, default: 0
       t.boolean :published, null: false, default: true
-      t.boolean :_init, null: false, default: false
       t.string :options, null: false, default: '{}'
       t.string :validations, null: false, default: '{}'
       t.integer :parent_id

data/lib/editable_components.rb

@@ -60,7 +60,7 @@ module EditableComponents
                     t = block.block_type.to_sym
                     add.keys.each do
                       if @@config[:ec_blocks][t] && @@config[:ec_blocks][t][:children_type]
-                        sub_block = EditableComponents::Block.new( parent: block, block_type: @@config[:ec_blocks][t][:children_type], version: version, _init: true )
+                        sub_block = EditableComponents::Block.new( parent: block, block_type: @@config[:ec_blocks][t][:children_type], version: version )
                         sub_block.save
                         # TODO: return errors
                       end
@@ -74,7 +74,7 @@ module EditableComponents
                 add.each do |index, new_type|
                   t = new_type.to_sym
                   # TODO: check if t is a valid block type
-                  EditableComponents::Block.new( parent: parent, block_type: t, version: version, _init: true ).save
+                  EditableComponents::Block.new( parent: parent, block_type: t, version: version ).save
                 end
               end
             end

data/lib/editable_components/version.rb

@@ -1,3 +1,3 @@
 module EditableComponents
-  VERSION = '0.1.0'
+  VERSION = '0.1.2'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: editable_components
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Mat
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-05-01 00:00:00.000000000 Z
+date: 2017-05-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails