dynamic_text 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc355787a78ea70e6728fb425360773d10a6a964478a551213a525a029153fa5
-  data.tar.gz: 400c9191e052f31835e86a1d3575cf82ff1c78bfd5240c7a3d46cf76502143e8
+  metadata.gz: c5bf76fb6450fa76db95c4bc477593b344b3da892344b76d94390dace1dca5cf
+  data.tar.gz: bd631cb8b05cb8b33414939be1ad8d3f5008bc007f63de0d81a66c068d33ba11
 SHA512:
-  metadata.gz: 578a1f7541b9d99e46753eb26ee1e0a9f053629931ab30421a1d93ef9640058a963c56809f47ee4e0589c9f2d1f1a50f9355a948b6b5c2906f102e90e1562dfc
-  data.tar.gz: a38e4ea970e6808367e52c552b8b8b7a00014db566e2874cb156df239cfece7897808d4978d4b2563c0aa17c7fca8fe678c01c0d06bcc329e0565cbb8a4f099c
+  metadata.gz: cb6c3bcbb282ee2b2740128b8da05453ed36456c3a7818d3a5370a571c9fb741555518d2d9e6df745ef24807c1b42fa80902c332243302ab9d568f7e9a706ff3
+  data.tar.gz: a6e60da0f931c54cf8038b8599603f4e242dc0c5e75d002b2377cffe2e114a62a302dd77170ff04590a284c3082657fd53c3599988f847aa4861df144c0c1b4c

data/README.md

@@ -1,8 +1,8 @@
-# DynamicText
-Short description and motivation.
+# Welcome to Dynamic Text
+Create a more seamless integration between displaying information and editing it! With Dynamic Text, you can allow users to easily update elements of a resource in your app just by clicking on the text and changing it, no separate edit page needed!
 
-## Usage
-How to use my plugin.
+## Build Status
+[![Build Status](https://travis-ci.org/JoshHadik/dynamic_text.svg?branch=master)](https://travis-ci.org/JoshHadik/dynamic_text)
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -21,5 +21,56 @@ Or install it yourself as:
 $ gem install dynamic_text
 ```
 
+## What does it do?
+
+Dynamic Text allows you to do two main things:
+
+### 1 - Render Editable Content Based on a Resource and Attribute
+
+With the dynamic_text gem, you can easily create a hybrid HTML element that acts as both the display text for a specific attribute of a resource, and the text box for updating that attribute.
+
+```html
+<div>
+  <%= editable_text_for(@article, :title) %>
+</div>
+```
+
+### 2 - Render Dynamic Content that Updates In Real Time with Editable Content
+
+You might not want all of the text for a specific attribute of a specific resource to be editable. For example, you might want to display the title for a blog post in both an 'h1' tag above the body of the post, as well as the navigation bar on the top of the screen.
+
+
+In this case, you might want the text to be editable when pressed on in the main article section of the page, but not in the header. However, you probably still want the text in the header to change in real time if a user edits the title from within the article section.
+
+You can use the following method to identify content that isn't editable but updates in real time when changes are made to the attribute of the resource somewhere else on the page.
+
+```html
+<div>
+  <%= dynamic_text_for(@article, :title) %>
+</div>
+```
+
+### Why Does It Do It?
+
+Long ago, in the Wild West of software, the key ingredient for a successful app was functionality. Every idea was unique back then, and the potential of apps and websites was virtually untapped.
+
+Nowadays, almost everything has been done. In order to gain an edge on competitors, one of the best thing you can do is to look for ways to provide a better user experience.
+
+I believe the days of pure CRUD apps in consumer facing applications are numbered, users no longer want to navigate through completely separate pages for specific actions on specific resources. Users want pages that provide information and actions for many different resources at once in an intuitive and easy-to-navigate manner (think 'dashboard' pages).
+
+This gem is built as a way to merge the 'edit' page and the 'show' page for a given resource, so users can update content in real time just by clicking on the text that displays that information.
+
+For example, you could use this gem to merge the display text and edit field for the title of a blog post, so the H1 tag on the show page merges with the <input type='text'> tag in the edit form, removing the necessity for a separate edit page to update that information.
+
+
+### How Can You Use It?
+
+1. Dynamic Text
+2. Editable Text
+
+### Configuration
+
+1. AJAX
+
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -90,8 +90,8 @@ const DynamicText = {
   },
 
   // Update a specific attribute of a resource.
-  patchResource(e) {
-    const editableText = e.currentTarget;
+  patchResource(target) {
+    const editableText = target;
     const editableTextContainer = editableText.parentNode;
     const action = editableTextContainer.querySelector("[name='_action']");
 

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

@@ -1,62 +1,69 @@
+const delegateToEditableText = (eventType, callback) => {
+  document.addEventListener(eventType, (event) => {
+    if (event.target.classList.contains('editable-text')) {
+      callback(event);
+    }
+  });
+}
+
 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();
-      }
-    });
+  // Exit editable text editor mode (focus) on enter instead of adding a new line.
+  delegateToEditableText('keydown', (event) => {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      event.target.blur();
+    }
+  });
 
-    // Properly paste text into editable text
-    editableText.addEventListener('paste', (e) => {
-      e.preventDefault();
-      DynamicText.handleContentEditablePaste(e)
-    });
+  // Properly paste text into editable text
+  delegateToEditableText('paste', (event) => {
+    event.preventDefault();
+    DynamicText.handleContentEditablePaste(event)
+  });
 
-    // Disable dragging and dropping text/images into editable text.
-    ["dragover", "drop"].forEach((evt) => {
-      editableText.addEventListener(evt, (e) => {
-        e.preventDefault();
-        return false;
-      });
+  // Disable dragging and dropping text/images into editable text.
+  ["dragover", "drop"].forEach((evt) => {
+    delegateToEditableText(evt, (event) => {
+      event.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);
-    });
+  // 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.)
+  delegateToEditableText('focus', (event) => {
+    const target = event.target;
+    target.setAttribute('data-original-value', target.innerText);
+  });
 
-    // Send patch request for resource if content was changed.
-    editableText.addEventListener('focusout', (e) => {
-      const target = e.currentTarget
+  // Send patch request for resource if content was changed.
+  delegateToEditableText('focusout', (event) => {
+    const target = event.target;
 
-      // 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;
-      }
+    // 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);
-      }
+    // TODO: Change patchResource to accept the target
+    // Send patch request if text was changed.
+    if (target.getAttribute('data-original-value') != target.innerText) {
+      DynamicText.patchResource(target);
+    }
 
-      target.removeAttribute('data-original-value')
-    });
+    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 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;
-          }
-        });
-    });
-  })
+  // 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 property of a resource, both will be updated in real time when you edit the text of one.)
+  delegateToEditableText('input', (event) => {
+    const target = event.target;
+    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;
+        }
+      });
+  });
 }

data/lib/dynamic_text/version.rb

@@ -1,3 +1,3 @@
 module DynamicText
-  VERSION = '0.0.6'
+  VERSION = '0.0.7'
 end

data/lib/dynamic_text.rb

@@ -2,8 +2,8 @@ require 'dynamic_text/engine'
 require 'dynamic_text/view_renderer'
 require 'dynamic_text/locals_setter'
 require 'configuron'
+require_relative 'dynamic_text/configuration'
 
 module DynamicText
   extend Configuron::Configurable
-  require_relative 'dynamic_text/configuration'
 end

data/spec/dummy/log/test.log

@@ -1644,3 +1644,57 @@ DynamicText::Test: test_truth
    (0.1ms)  ROLLBACK
    (0.1ms)  BEGIN
    (0.1ms)  ROLLBACK
+   (0.8ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
+   (0.7ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
+   (0.3ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
+   (203.0ms)  DROP DATABASE IF EXISTS "dynamic_text_test"
+   (483.1ms)  CREATE DATABASE "dynamic_text_test" ENCODING = 'unicode'
+  SQL (0.4ms)  CREATE EXTENSION IF NOT EXISTS "plpgsql"
+   (7.0ms)  CREATE TABLE "schema_migrations" ("version" character varying NOT NULL PRIMARY KEY)
+   (0.8ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
+   (0.8ms)  INSERT INTO "schema_migrations" (version) VALUES (0)
+   (47.0ms)  CREATE TABLE "ar_internal_metadata" ("key" character varying NOT NULL PRIMARY KEY, "value" character varying, "created_at" timestamp NOT NULL, "updated_at" timestamp NOT NULL)
+  ActiveRecord::InternalMetadata Load (0.5ms)  SELECT  "ar_internal_metadata".* FROM "ar_internal_metadata" WHERE "ar_internal_metadata"."key" = $1 LIMIT $2  [["key", "environment"], ["LIMIT", 1]]
+   (0.1ms)  BEGIN
+  ActiveRecord::InternalMetadata Create (0.4ms)  INSERT INTO "ar_internal_metadata" ("key", "value", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "key"  [["key", "environment"], ["value", "test"], ["created_at", "2019-01-25 03:53:35.094422"], ["updated_at", "2019-01-25 03:53:35.094422"]]
+   (20.8ms)  COMMIT
+  ActiveRecord::InternalMetadata Load (0.4ms)  SELECT  "ar_internal_metadata".* FROM "ar_internal_metadata" WHERE "ar_internal_metadata"."key" = $1 LIMIT $2  [["key", "environment"], ["LIMIT", 1]]
+   (0.3ms)  BEGIN
+   (0.2ms)  COMMIT
+   (0.9ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
+   (0.2ms)  BEGIN
+   (0.2ms)  ROLLBACK
+   (0.2ms)  BEGIN
+   (0.2ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.2ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK
+   (0.1ms)  BEGIN
+   (0.1ms)  ROLLBACK

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dynamic_text
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Josh Hadik
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-25 00:00:00.000000000 Z
+date: 2019-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -196,7 +196,7 @@ files:
 - spec/lib/view_renderer.rb
 - spec/rails_helper.rb
 - spec/spec_helper.rb
-homepage: 
+homepage: https://github.com/JoshHadik/dynamic_text
 licenses:
 - MIT
 metadata: