dynamic_text 0.0.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3ffc36c55db6cf4d73096ccc3eda363d01d7f671d4b290d499c1c8f150fe83a0
+  data.tar.gz: 61ed3bf062c09cd3782aec624ce524d9b7a2b0456ddb9129bf0fd63ef608a62d
+SHA512:
+  metadata.gz: 9908a0155a6b19a6d0a1e2a087c4ddd71d49d3d5a1a89d1cb70f0aa4fc3bf17a0fae01c4b3a9f5a4166855ea479f1f1b6025b4ffcf796936651513690d9c07ab
+  data.tar.gz: f8e3810e0999b4976851daf160a016e6b61b50492e4ee107c03f4f92324dfea8de165472535dea7f8ea319fd24762448d11ab0e28995f3b0b7fa83bc50826029

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2019 Josh Hadik
+
+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,25 @@
+# DynamicText
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'dynamic_text'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install dynamic_text
+```
+
+## 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,32 @@
+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    = 'DynamicText'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+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/config/dynamic_text_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/dynamic_text .js
+//= link_directory ../stylesheets/dynamic_text .css

data/app/assets/javascripts/dynamic_text/dynamic_text.js

@@ -0,0 +1,175 @@
+const DynamicText = {
+  // Insert Plain Text rather than HTML when pasting into editable text
+  insertPlainTextAtCursor(text) {
+    var sel, range, html;
+    if (window.getSelection) {
+      sel = window.getSelection();
+      if (sel.getRangeAt && sel.rangeCount) {
+        range = sel.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(text));
+      }
+    } else if (document.selection && document.selection.createRange) {
+      document.selection.createRange().text = text;
+    }
+  },
+
+  // Copy clipboard data from event and paste into editable text.
+  setEventClipboardData(e) {
+    const clipboardData = e.clipboardData || e.originalEvent.clipboardData
+    if (clipboardData && clipboardData.getData) {
+      const text = clipboardData.getData("text/plain")
+      document.execCommand("insertHTML", false, text)
+      return true
+    } else {
+      return false
+    }
+  },
+
+  // Copy clipboard data from window and paste into editable text.
+  setWindowClipboardData(e) {
+    const clipboardData = window.clipboardData
+    if (clipboardData && clipboardData.getData) {
+      const text = clipboardData.getData("Text")
+      this.insertPlainTextAtCursor(text);
+      return true
+    } else {
+      return false
+    }
+  },
+
+  // Copy clipboard data from event OR window and paste into editable text.
+  handleContentEditablePaste(e) {
+    e.preventDefault();
+    this.setEventClipboardData(e) || this.setWindowClipboardData()
+  },
+
+  // Store all ajax response functions
+  ajaxResponses: {
+    default: (data) => {}
+  },
+
+  // Set default response for ajax requests
+  handleDefaultAjaxResponse(func) {
+    this.ajaxResponses['default'] = func;
+  },
+
+  // Set response for specific ajax key
+  handleAjaxResponseFor(ajaxKey, func) {
+    this.ajaxResponses[ajaxKey] = func;
+  },
+
+  // Build ajax request for patch resource function.
+  sendPatchRequest(url, resourceType, attribute, updatedValue, ajaxKey) {
+    const CSRF_TOKEN =
+      document.querySelector('meta[name="csrf-token"]')
+              .getAttribute('content');
+
+    var xhr = new XMLHttpRequest();
+    var successCallback;
+    var data = {};
+
+    xhr.open('PATCH', url);
+
+    xhr.setRequestHeader('Accept', 'application/json; charset=utf-8')
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.setRequestHeader('X-CSRF-Token', CSRF_TOKEN);
+
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        successCallback =
+          this.ajaxResponses[ajaxKey] || this.ajaxResponses['default']
+        successCallback(JSON.parse(xhr.responseText), resourceType)
+      }
+    };
+
+    data[resourceType] = {}
+    data[resourceType][attribute] = updatedValue
+
+    xhr.send(JSON.stringify(data));
+  },
+
+  // Update a specific attribute of a resource.
+  patchResource(e) {
+    const editableText = e.currentTarget;
+    const editableTextContainer = editableText.parentNode;
+    const action = editableTextContainer.querySelector("[name='_action']");
+
+    const url = action.getAttribute('url');
+    const resourceType = action.getAttribute('resource-type');
+    const attribute = action.getAttribute('attribute');
+    const ajaxKey = action.getAttribute('ajax-key');
+    const updatedValue = editableText.innerText;
+
+    this.sendPatchRequest(url, resourceType, attribute, updatedValue, ajaxKey)
+  }
+}
+
+const prepareDynamicText = () => {
+  document.querySelectorAll('.editable-text').forEach((editableText) => {
+    // Exit editable text editor mode (focus) on enter instead of adding a new line.
+    editableText.addEventListener('keydown', (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        e.currentTarget.blur();
+      }
+    });
+
+    // Properly paste text into editable text
+    editableText.addEventListener('paste', (e) => {
+      e.preventDefault();
+      DynamicText.handleContentEditablePaste(e)
+    });
+
+    // Disable dragging and dropping text/images into editable text.
+    ["dragover", "drop"].forEach((evt) => {
+      editableText.addEventListener(evt, (e) => {
+        e.preventDefault();
+        return false;
+      });
+    });
+
+    // Store original value when focusing in on specific editable text (used to determine if text was changed and patch request should be sent on focusout.)
+    editableText.addEventListener('focus', (e) => {
+      const target = e.currentTarget;
+      target.setAttribute('data-original-value', target.innerText);
+    });
+
+    // Send patch request for resource if content was changed.
+    editableText.addEventListener('focusout', (e) => {
+      const target = e.currentTarget
+
+      // Empty all content of text if editable text is empty (otherwise certain browsers fill in a default <br> or <p> value.)
+      if (!target.innerText.trim().length) {
+        target.innerText = null;
+      }
+
+      // Send patch request if text was changed.
+      if (target.getAttribute('data-original-value') != target.innerText) {
+        DynamicText.patchResource(e);
+      }
+
+      target.removeAttribute('data-original-value')
+    });
+
+    // Update all other divs tagged with the same dynamic-tag as the current text being edited. (So if you have two elements on one page that display the same title property of a resource, both will be updated in real time when you edit the text of one.)
+    editableText.addEventListener('input', (e) => {
+      const target = e.currentTarget;
+      const newValue = target.innerText;
+      const dynamicTag = target.getAttribute('data-dynamic-tag');
+
+      document.querySelectorAll(`[data-dynamic-tag='${dynamicTag}']`)
+        .forEach((dynamicTextElement) => {
+          if(dynamicTextElement !== target) {
+            dynamicTextElement.innerText = newValue;
+          }
+        });
+    });
+  })
+}
+
+const events = ["turbolinks:load", "page:change"];
+
+events.forEach((evt) => {
+  document.addEventListener(evt, prepareDynamicText)
+});

data/app/assets/javascripts/dynamic_text/js.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require rails-ujs
+//= require activestorage
+//= require_tree .

data/app/assets/stylesheets/dynamic_text/css.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/dynamic_text/dynamic_text.scss

@@ -0,0 +1,22 @@
+.dynamic-text-container {
+  display: inline-block;
+}
+
+.dynamic-text {
+  cursor: url('/assets/dynamic_text/pencil.png'), pointer;
+  display: block;
+  white-space: pre-line;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1px;
+}
+
+.dynamic-text:focus {
+  cursor: text;
+}
+
+.dynamic-text[placeholder]:empty::before {
+  content: attr(placeholder);
+  color: #878787;
+  font-style: italic;
+}

data/app/helpers/dynamic_text/view_helper.rb

@@ -0,0 +1,99 @@
+module DynamicText
+  module ViewHelper
+    def dynamic_text(text="", tag: "default", filler: "N/A")
+      text = filler if !text || text.empty?
+      content_tag(:span, text, class: "dynamic-text", data: {"dynamic-tag": tag})
+    end
+
+    def editable_text(text="", tag: "default", placeholder: "Enter text...")
+      content_tag(:span, class: "editable-text-container") do
+        content_tag(:span, text, class: "editable-text", contenteditable: true, placeholder: placeholder, data: {"dynamic-tag": tag})
+      end
+    end
+
+    def dynamic_text_for(resource, attribute, options={})
+      options = dynamic_attributes(resource, attribute, options)
+      dynamic_text_tag(options)
+    end
+
+    def editable_text_for(resource, attribute, options = {})
+      options = editable_attributes(resource, attribute, options)
+
+      content_tag(:span, class: "editable-text-container") do
+        editable_text_tag(options) +
+        patch_request_tag(options)
+      end
+    end
+
+    private
+
+    def dynamic_attributes(resource, attribute, options={})
+      Hash.new.tap do |hash|
+        hash[:resource] = resource
+        hash[:attribute] = attribute
+        hash[:value] = resource.send(attribute)
+        hash[:placeholder] = options[:placeholder] || "Enter #{attribute}..."
+        hash[:resource_type] = expected_resource_type(resource)
+        hash[:dynamic_tag] =
+          default_dynamic_tag(hash[:resource_type], resource.id, attribute)
+      end
+    end
+
+    def editable_attributes(resource, attribute, options={})
+      dynamic_attributes(resource, attribute, options={}).tap do |hash|
+        hash[:url] =
+          options[:url] || send("#{DynamicText.configuration.path_prefix}#{hash[:resource_type]}_path", resource)
+        hash[:ajax_key] =
+          options[:ajax_key] || default_ajax_key(hash[:resource_type], attribute)
+      end
+    end
+
+    def dynamic_text_tag(attributes)
+      text = attributes[:value] || attributes[:placeholder]
+      dynamic_text_attributes = {
+        class: "dynamic-text",
+        data: {"dynamic-tag": attributes[:dynamic_tag]}
+      }
+
+      content_tag(:span, text, dynamic_text_attributes)
+    end
+
+    def editable_text_tag(attributes)
+      editable_text_attributes = {
+        class: "editable-text",
+        contenteditable: true,
+        placeholder: attributes[:placeholder],
+        data: {"dynamic-tag": attributes[:dynamic_tag]}
+      }
+
+      content_tag(:span, attributes[:value], editable_text_attributes)
+    end
+
+    def patch_request_tag(attributes)
+      patch_request_attributes = {
+        'url' => attributes[:url],
+        'attribute' => attributes[:attribute],
+        'resource-type' => attributes[:resource_type],
+        'ajax-key' => attributes[:ajax_key]
+      }
+
+      hidden_field_tag("_action", "patch", patch_request_attributes)
+    end
+
+    def expected_resource_type(resource)
+      resource.class.name.downcase
+    end
+
+    def expected_path(resource, resource_type=expected_type_for(resource))
+      send("#{resource_type}_path", resource)
+    end
+
+    def default_dynamic_tag(resource_type, resource_id, attribute)
+      "#{resource_type}:#{resource_id}:#{attribute}"
+    end
+
+    def default_ajax_key(resource_type, attribute)
+      "#{resource_type}:#{attribute}"
+    end
+  end
+end

data/config/routes.rb

@@ -0,0 +1,2 @@
+DynamicText::Engine.routes.draw do
+end

data/lib/dynamic_text/configuration.rb

@@ -0,0 +1,11 @@
+class DynamicText::Configuration
+  attr_reader :path_prefix
+
+  def initialize
+    @path_prefix = nil
+  end
+
+  def path_prefix=(prefix)
+    @path_prefix = "#{prefix}_"
+  end
+end

data/lib/dynamic_text/engine.rb

@@ -0,0 +1,12 @@
+module DynamicText
+  class Engine < ::Rails::Engine
+    config.assets.precompile += %w(dynamic_text)
+    isolate_namespace DynamicText
+
+    initializer 'local_helper.action_controller' do
+      ActiveSupport.on_load :action_controller do
+        helper DynamicText::ViewHelper
+      end
+    end
+  end
+end

data/lib/dynamic_text/version.rb

@@ -0,0 +1,3 @@
+module DynamicText
+  VERSION = '0.0.3'
+end

data/lib/dynamic_text.rb

@@ -0,0 +1,7 @@
+require 'dynamic_text/engine'
+require 'configuron'
+
+module DynamicText
+  extend Configuron::Configurable
+  require_relative 'dynamic_text/configuration'
+end

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: dynamic_text
+version: !ruby/object:Gem::Version
+  version: 0.0.3
+platform: ruby
+authors:
+- Josh Hadik
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-01-20 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5'
+- !ruby/object:Gem::Dependency
+  name: configuron
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.0.1
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  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'
+description: dynamic_text allows you to easily integrate content-editable HTML divs
+  for a specific attribute of a specific resource.
+email:
+- josh.hadik@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/dynamic_text_manifest.js
+- app/assets/images/dynamic_text/pencil.png
+- app/assets/javascripts/dynamic_text/dynamic_text.js
+- app/assets/javascripts/dynamic_text/js.js
+- app/assets/stylesheets/dynamic_text/css.css
+- app/assets/stylesheets/dynamic_text/dynamic_text.scss
+- app/helpers/dynamic_text/view_helper.rb
+- config/routes.rb
+- lib/dynamic_text.rb
+- lib/dynamic_text/configuration.rb
+- lib/dynamic_text/engine.rb
+- lib/dynamic_text/version.rb
+homepage: 
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+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.2
+signing_key: 
+specification_version: 4
+summary: A light-weight gem for adding content editable text to a rails project.
+test_files: []