inline_editor 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 613a54ae2b2094b2b3f65bd09076ad440296cdc656ce4d9bce885f1da216a11d
+  data.tar.gz: bba7a5f528f10bda0a6bb0bfc9766c8bc62585931336a1916665ad97d3c79f9b
+SHA512:
+  metadata.gz: d68aaf7a3982b5213fb9a142a84e3910efb0c5e28f00c1527b625c8804c09e024100aeaa68ad9c7153f545adc9544f9a9e135d14454c2ef9b310f65b14206980
+  data.tar.gz: 4ecf2664588d9e1443c1d4fb5b4ba4d7f13e48714317e74788cc2bdf285baf543587cddc1002042a7835c3074c86b560187ac2babca627cf559573f61f475784

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2019 ShevchukTania
+
+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,79 @@
+# InlineEditor
+[![Build Status](https://travis-ci.com/ShevchukTania/inline_editor.svg?branch=master)](https://travis-ci.com/ShevchukTania/inline_editor)
+[![Maintainability](https://api.codeclimate.com/v1/badges/8ad754e23e17a293dac2/maintainability)](https://codeclimate.com/github/ShevchukTania/inline_editor/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/8ad754e23e17a293dac2/test_coverage)](https://codeclimate.com/github/ShevchukTania/inline_editor/test_coverage)
+
+Demo app https://inline-editor.herokuapp.com
+
+![](https://raw.githubusercontent.com/ShevchukTania/inline_editor/master/spec/dummy/app/assets/images/preview.gif)
+
+## Steps to install
+1. Add this line to your application's Gemfile: 
+    ```ruby
+      gem 'inline_editor'
+    ```
+1. Import 'inline_editor' to your application.js
+
+      ```javascript
+        //= require inline_editor
+      ```
+   Also, you could add styles to your application.sccs for your inlne editor
+   
+     ```scss
+       @import "inline_editor"
+     ```
+  
+1. In your views you could use **inline_editor** helper which generate markup for clickable item and form
+
+    **Exampeles:**
+
+    ```ruby
+        <%= inline_editor as: :select, text: post.title, value: post.title, collection: Post::TITLE,
+         save_url: inline_update_post_path(post), include_blank: false, param: 'title'%>
+    ```  
+    
+    Also, insteed of plain text you could use any helper which generate HTML view
+
+    ```ruby
+        <%= inline_editor as: :select, text: your_helper(post.title), value: post.title, collection: Post::TITLE,
+          save_url: inline_update_post_path(post), include_blank: false, param: 'title'%>
+    ```  
+    Option             | Type         | Example
+    ------------------ | -------------| -------------
+    as                 |symbol        |as: :select. type of form tag you want to generate
+    text               |string/HTML   |text: post.title, text: your_text_helper(post.title), the value will 
+    value              |string        |value: post.title
+    collection         |array         |collection: Post::TITLE
+    save_url           |string        |save_url: inline_update_post_path(post)
+    include_blank      |boolean       |include_blank: false
+    param              |string        |param: 'title', this is your model attribute you want to change
+
+    For now it is available two parameter for **as:** 
+    * :select
+    * :grouped_select
+    
+1. Create action responsible for inline update
+
+      It may look like this:
+
+    ```ruby
+          def inline_update
+            @post = Post.find(params[:id])
+            if @post.update(post_params)
+              render json: { html: helpers.inline_editor_text(value: post_params.values.first, option: post_params.keys.first)}
+            else
+              render json: { status: 'error', message: @post.errors.full_messages.to_sentence }
+            end
+          end
+    ```
+1. Also there are several custom JavaScript events you could use to achive extra behaviour 
+
+   * **inlineEditError**   - triggered if your responce contains { status: 'error' }
+   * **inlineEditSuccess** - triggered after controller respond without error status
+
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,27 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'InlineEditor'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/javascripts/inline_editor.js

@@ -0,0 +1,84 @@
+document.addEventListener('DOMContentLoaded', function(){
+  document.querySelectorAll('.form select').forEach(select => {
+    select.addEventListener("change", function(e){
+      let data = {};
+      let target = e.currentTarget;
+      const url = target.dataset.url;
+      data[target.dataset.param] = target.querySelector('option:checked').text;
+
+      fetch(url, {
+        method: 'PUT',
+        body: JSON.stringify(data),
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .then(response => {
+        return response.json();
+      })
+      .then(resultJson => {
+        const form = target.parentNode;
+        const hint = form.querySelector('span.inline-form-hint');
+        if (hint) {
+          hint.remove();
+        };
+
+        if (resultJson.status === 'error') {
+          form.dispatchEvent(createEvent('inlineEditError', resultJson));
+
+          form.classList.add('invalid-value');
+          if (resultJson.message) {
+            form.insertAdjacentHTML('beforeend',
+              "<span class='inline-form-hint'>" + resultJson.message + "</span>"
+            );
+          }
+        } else {
+          const container = form.parentNode;
+          let clicableItem = container.querySelector('.clickable-item');
+
+          form.dispatchEvent(createEvent('inlineEditSuccess', resultJson))
+
+          form.classList.remove('invalid-value');
+          clicableItem.innerHTML = '';
+          clicableItem.insertAdjacentHTML('beforeend', resultJson.html);
+          toggleVisibility(container);
+        }
+      })
+      .catch(function(error) {
+        console.log('Request failed', error)
+      });
+    });
+  });
+
+  document.querySelectorAll('.clickable-item').forEach(item => {
+    item.addEventListener("click", function(e){
+      const container = e.target.closest('.inline-editor-container');
+      toggleVisibility(container);
+    })
+
+    document.querySelector('body').addEventListener('click', function(e){
+      const activeForm = document.querySelector('.form.active');
+      const container = e.target.closest('.inline-editor-container')
+
+      if (activeForm && !(e.target.closest('.inline-editor-container'))) {
+        activeForm.classList.remove('active');
+        activeForm.classList.add('display-none');
+        activeForm.previousElementSibling.classList.remove('display-none');
+      }
+    });
+  });
+
+  function toggleVisibility(container) {
+    container.querySelectorAll('.clickable-item, .form').forEach(item => {
+      item.classList.toggle('display-none');
+    })
+
+    container.querySelector('.form').classList.toggle('active');
+  }
+
+  function createEvent(name, params) {
+    return event = new CustomEvent(name, {
+      detail: params,
+      bubbles: true,
+      cancelable: true
+    });
+  }
+});

data/app/assets/stylesheets/inline_editor.css

@@ -0,0 +1,69 @@
+.inline-editor-container .display-none {
+  display: none;
+}
+
+
+.inline-editor-container .clickable-item {
+  cursor: pointer;
+  position: relative;
+  padding: 5px;
+  border: 2px solid transparent;
+}
+
+.inline-editor-container .clickable-item:after {
+  content: '';
+  background: url('icon-edit.svg') no-repeat 97% center;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  right: 2px;
+  top: -2px;
+  padding: 1px;
+  border: 1px dashed #ccc;
+  visibility: hidden;
+}
+
+.inline-editor-container .clickable-item:hover:after {
+  visibility: visible;
+}
+
+.inline-editor-container .form {
+  width: 100%;
+}
+
+.inline-editor-container .clickable-item .with-label .label{
+  background: #1c9c14;
+  padding: 1px 3px;
+  border-radius: 3px;
+  font-size: 10px;
+  margin-left: 5px;
+  color: #fff;
+}
+
+.inline-editor-container .form.active.invalid-value * {
+  border-color: #ff0000;
+}
+
+.inline-editor-container .form.active.invalid-value span.inline-form-hint {
+  color: #ff0000;
+  font-size: 12px;
+}
+
+.inline-editor-container .form select {
+  width: 100%;
+  border: solid 2px #000;
+  padding: 5px 25px 5px 3px;
+  font-size: 16px;
+  font-family: "Times New Roman", Times, serif;
+  position: relative;
+  color: #000;
+  -webkit-appearance:     none;
+  -moz-appearance:        none;
+  -ms-appearance:         none;
+  -o-appearance:          none;
+  appearance:             none;
+  box-shadow: none;
+  background: url('dropdown-arrow.svg') right no-repeat;
+  background-position: calc(100% - 5px) 50%;
+}

data/app/views/inline_editor/_inline_editor.erb

@@ -0,0 +1,19 @@
+<div class="inline-editor-container">
+  <div class='clickable-item'>
+    <%= raw text %>
+  </div>
+  <div class='form display-none'>
+
+    <%- if local_assigns[:as] == :select %>
+      <%= select_tag '', options_for_select(collection, value),
+        class: 'form-control select', include_blank: include_blank, data: { url: save_url, param: param }
+      %>
+    <% end %>
+
+    <%- if local_assigns[:as] == :grouped_select %>
+      <%= select_tag '', grouped_options_for_select(collection, value),
+        class: 'form-control select', include_blank: include_blank, data: { url: save_url, param: param }
+      %>
+    <% end %>
+  </div>
+</div>

data/lib/inline_editor/engine.rb

@@ -0,0 +1,21 @@
+module InlineEditor
+  module Rails
+    class Engine < ::Rails::Engine
+      isolate_namespace InlineEditor
+
+      initializer 'inline_editor.assets_precompile', group: :all do |app|
+        app.config.assets.precompile += ['inline_editor/inline_editor.js', 'inline_editor/inline_editor.css']
+      end
+
+      initializer 'inline_editor.helpers' do
+        ActiveSupport.on_load :action_view do
+          ActionView::Base.send :include, InlineEditor::ApplicationHelper
+        end
+      end
+
+      config.generators do |g|
+        g.test_framework :rspec
+      end
+    end
+  end
+end

data/lib/inline_editor/railtie.rb

@@ -0,0 +1,4 @@
+module InlineEditor
+  class Railtie < ::Rails::Railtie
+  end
+end

data/lib/inline_editor/version.rb

@@ -0,0 +1,3 @@
+module InlineEditor
+  VERSION = '0.1.0'
+end

data/lib/inline_editor.rb

@@ -0,0 +1,12 @@
+require "inline_editor/engine"
+
+module InlineEditor
+  module ApplicationHelper
+    def inline_editor(as: '', text: '', collection: '', value: '', include_blank: '', save_url: '', param: '', &block)
+      text = capture(&block) if block_given?
+
+      render 'inline_editor/inline_editor', as: as, text: text, collection: collection, value: value,
+        include_blank: include_blank, save_url: save_url, param: param
+    end
+  end
+end

data/lib/tasks/inline_editor_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :inline_editor do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: inline_editor
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- ShevchukTania
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-02-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: mini_racer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.6
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.6
+description: Simple inline editor for Rails applications
+email:
+- taniabeley@ukr.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/inline_editor.js
+- app/assets/stylesheets/inline_editor.css
+- app/views/inline_editor/_inline_editor.erb
+- lib/inline_editor.rb
+- lib/inline_editor/engine.rb
+- lib/inline_editor/railtie.rb
+- lib/inline_editor/version.rb
+- lib/tasks/inline_editor_tasks.rake
+homepage: https://github.com/ShevchukTania/inline_editor
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Inline editor for Rails applications
+test_files: []