rails-clipboard-helper 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 984e6c3a3d1e5ba1b5920f7314eb40852eb315215c7f890839b58f47b86231cd
-  data.tar.gz: 649943b92152bfe760834a0308ec8d627d8b1c86ece18ec1a0e7cf1509e7c73d
+  metadata.gz: c0677492d465fef53bf7ac5e072f8588305f52c9fbf9ca492ea244dcc236536f
+  data.tar.gz: 8d7083bd4bbf188e7ccdf55f8ea10745dddcea0a5817d8d00eb7573d2a180a62
 SHA512:
-  metadata.gz: 0e0a75285ebea6b01edcf0d1121d1eec6afee7be4cd3b1493989429326357db8706a2b4c894aea434bda48bbaf1b0d0efc34d07e5eacdc031d41ccaa97385b09
-  data.tar.gz: 2bca1927f5d7522169762ffef27134917ab5bcb9619734d9b67fb63a907c8cba8fb70077ebe9271adeaab5125002aa13bc51bfc52828b8053126a7c820ec4337
+  metadata.gz: a08bc12b49178a98d48b116b08c98361d6e312eca98471d80fca5c92613ae73bf8ad7fd89178ed50de5513298c9615146234403c007b6622de9d8839487917f0
+  data.tar.gz: ab6aa201508f6d34af7c05741e94f03051ee0a8980906e465fd726e48fb8fb478c8d2fb9d7d560bddd4b45cf19a824facd445759d7d973e1c380c1d69b1b994f

data/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.2] - 2025-11-09
+
+### Changed
+- Changed button default style to link-like appearance (no border, no background, blue text color)
+- Added hover effect with underline on buttons
+- Changed success feedback from background color to text color change (green)
+- **BREAKING**: Replaced external JavaScript with inline JavaScript - no asset pipeline setup needed
+- Removed `clipboard_javascript_tag` helper method (no longer needed)
+- Removed Engine and Railtie (simplified gem structure)
+- Removed dependency on `railties` (only requires `actionview` now)
+- Updated documentation to remove JavaScript setup instructions
+
+## [0.1.1] - 2025-11-09
+
+### Fixed
+- Fixed Railtie loading issue that prevented helper methods from being available in views
+- Added proper conditional loading for both Engine and Railtie
+- Improved helper method initialization in Rails applications
+
+### Added
+- Added troubleshooting section to README
+- Documented helper method not found error resolution
+
 ## [0.1.0] - 2025-11-09
 
 ### Added
@@ -26,5 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Comprehensive RSpec tests
 - Documentation
 
+[0.1.2]: https://github.com/dhq_boiler/rails-clipboard-helper/releases/tag/v0.1.2
+[0.1.1]: https://github.com/dhq_boiler/rails-clipboard-helper/releases/tag/v0.1.1
 [0.1.0]: https://github.com/dhq_boiler/rails-clipboard-helper/releases/tag/v0.1.0
 

data/README.md

@@ -5,9 +5,11 @@ A Rails view helper gem that displays a copy button alongside text content, allo
 ## Features
 
 - Easy text copying to clipboard
+- **No JavaScript setup required** - works out of the box with inline JavaScript
+- Link-style button design (no borders, no background)
 - Customizable styles
 - Uses modern Clipboard API
-- Visual feedback on successful copy
+- Visual feedback on successful copy (icon and color change)
 
 ## Installation
 
@@ -25,43 +27,6 @@ bundle install
 
 ## Usage
 
-### JavaScript Setup
-
-The gem uses Rails Engine to automatically make JavaScript available. You need to include it in your asset pipeline:
-
-**For Sprockets (Asset Pipeline):**
-
-Add to `app/assets/javascripts/application.js`:
-```javascript
-//= require rails_clipboard_helper
-```
-
-**For Importmap (Rails 7+):**
-
-Add to `config/importmap.rb`:
-```ruby
-pin "rails_clipboard_helper"
-```
-
-Then the JavaScript will be automatically loaded.
-
-**For esbuild/webpack:**
-
-The JavaScript file is located at `app/assets/javascripts/rails_clipboard_helper.js` in the gem.
-You may need to configure your build tool to include it.
-
-**Manual setup (alternative):**
-
-If you prefer not to use the asset pipeline, add to your layout:
-```erb
-<%= clipboard_javascript_tag %>
-```
-
-**Features:**
-- Automatic initialization on page load
-- Turbo/Hotwire support (turbo:load, turbo:render)
-- Turbolinks support (turbolinks:load)
-- Prevents duplicate event listeners
 
 ### Basic Usage
 
@@ -71,7 +36,7 @@ Use the `clipboard_copy` helper in your views:
 <%= clipboard_copy("Text you want to copy") %>
 ```
 
-By default, this displays an SVG copy icon. When clicked, it changes to a checkmark icon.
+By default, this displays an SVG copy icon styled as a link (no border, no background). When clicked, it changes to a checkmark icon and the color briefly changes to green.
 
 ### Usage with Options
 
@@ -135,36 +100,48 @@ To display only the button and hide the content to be copied:
 
 ### Custom Styles
 
-You can customize the styles with your own CSS:
+The button is styled as a link by default (no border, no background, blue color with underline on hover). You can customize the styles with your own CSS:
 
 ```css
+/* Custom container style */
 .clipboard-container {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px;
-  background: #f5f5f5;
-  border-radius: 8px;
 }
 
+/* Custom button style - override the link-like default */
 .clipboard-button {
+  color: #0066cc;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.clipboard-button:hover {
+  color: #004499;
+  text-decoration: underline;
+}
+
+/* Or create a button-like style */
+.my-button {
   padding: 8px 16px;
   background: #007bff;
-  color: white;
-  border: none;
+  color: white !important;
+  border: 1px solid #007bff;
   border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.3s;
 }
 
-.clipboard-button:hover {
+.my-button:hover {
   background: #0056b3;
+  text-decoration: none !important;
 }
 
+/* Custom content style */
 .clipboard-content {
   font-family: monospace;
   padding: 5px 10px;
-  background: white;
+  background: #f8f9fa;
   border: 1px solid #ddd;
   border-radius: 4px;
 }
@@ -213,6 +190,43 @@ This gem uses the modern Clipboard API, which is supported by:
 
 Requires HTTPS or localhost for operation.
 
+## Troubleshooting
+
+### Helper method `clipboard_copy` is not found
+
+If you get an error like `undefined method 'clipboard_copy'`, try the following:
+
+1. **Restart your Rails server** after installing the gem:
+   ```bash
+   bundle install
+   rails restart  # or ctrl+c and restart your server
+   ```
+
+2. **Verify the gem is installed:**
+   ```bash
+   bundle list | grep rails-clipboard-helper
+   ```
+
+3. **Check if the gem is required:**
+   The helper should be automatically included in your views.
+   If not, you can manually include it in `app/controllers/application_controller.rb`:
+   ```ruby
+   class ApplicationController < ActionController::Base
+     helper Rails::Clipboard::Helper::ViewHelpers
+   end
+   ```
+
+4. **Check your Rails version:**
+   This gem requires ActionView 6.0 or higher.
+
+### Copy button doesn't work
+
+1. **HTTPS requirement:**
+   The Clipboard API requires HTTPS (or localhost for development).
+
+2. **Check browser console:**
+   Open browser developer console (F12) and look for any JavaScript errors.
+
 ## Development
 
 After checking out the repo:

data/lib/rails/clipboard/helper/version.rb

@@ -3,7 +3,7 @@
 module Rails
   module Clipboard
     module Helper
-      VERSION = "0.1.0"
+      VERSION = "0.1.2"
     end
   end
 end

data/lib/rails/clipboard/helper/view_helpers.rb

@@ -68,88 +68,44 @@ module Rails
             copied_content = ERB::Util.html_escape(copied_text)
           end
 
+          # Inline JavaScript for clipboard functionality
+          onclick_js = <<~JS.strip.gsub("\n", ' ')
+            (function(btn) {
+              const target = document.getElementById('#{unique_id}');
+              const text = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' ? target.value : target.textContent;
+              navigator.clipboard.writeText(text).then(() => {
+                const original = btn.innerHTML;
+                btn.innerHTML = '#{copied_content.gsub("'", "\\\\'")}';
+                btn.style.color = '#28a745';
+                setTimeout(() => {
+                  btn.innerHTML = original;
+                  btn.style.color = '#0066cc';
+                }, 2000);
+              }).catch(err => {
+                console.error('Failed to copy:', err);
+                alert('Failed to copy to clipboard');
+              });
+            })(this);
+          JS
+
           html = <<~HTML
             <div class="#{container_class}" style="display: flex; align-items: center; gap: 10px;">
+              #{show_content ? %Q(<span class="#{content_class}" id="#{unique_id}">#{ERB::Util.html_escape(content)}</span>) : %Q(<input type="hidden" id="#{unique_id}" value="#{ERB::Util.html_escape(content)}">)}
               <button 
                 type="button" 
                 class="#{button_class}" 
-                data-clipboard-target="#{unique_id}"
-                data-original-html="#{ERB::Util.html_escape(button_content)}"
-                data-copied-html="#{ERB::Util.html_escape(copied_content)}"
-                style="padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #f8f9fa; display: inline-flex; align-items: center; gap: 4px;"
+                style="padding: 0; cursor: pointer; border: none; background: none; color: #0066cc; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font: inherit;"
+                onmouseover="this.style.textDecoration='underline';"
+                onmouseout="this.style.textDecoration='none';"
+                onclick="#{onclick_js}"
               >
                 #{button_content}
               </button>
-              #{show_content ? %Q(<span class="#{content_class}" id="#{unique_id}">#{ERB::Util.html_escape(content)}</span>) : %Q(<input type="hidden" id="#{unique_id}" value="#{ERB::Util.html_escape(content)}">)}
             </div>
           HTML
 
           html.html_safe
         end
-
-        # Helper method that includes JavaScript (optional - JavaScript is auto-loaded)
-        # This method is kept for backward compatibility
-        #
-        # Note: JavaScript is automatically loaded via asset pipeline.
-        # You only need to call this method if you're not using the asset pipeline.
-        def clipboard_javascript_tag
-          javascript_tag do
-            <<~JAVASCRIPT
-              (function() {
-                function initClipboardButtons() {
-                  document.querySelectorAll('[data-clipboard-target]').forEach(function(button) {
-                    if (button.dataset.clipboardInitialized) return;
-                    button.dataset.clipboardInitialized = 'true';
-
-                    button.addEventListener('click', function() {
-                      const targetId = this.getAttribute('data-clipboard-target');
-                      const targetElement = document.getElementById(targetId);
-                      
-                      // Support both old (text) and new (HTML) data attributes
-                      const originalContent = this.getAttribute('data-original-html') || this.getAttribute('data-original-text');
-                      const copiedContent = this.getAttribute('data-copied-html') || this.getAttribute('data-copied-text');
-                      
-                      let textToCopy;
-                      if (targetElement.tagName === 'INPUT' || targetElement.tagName === 'TEXTAREA') {
-                        textToCopy = targetElement.value;
-                      } else {
-                        textToCopy = targetElement.textContent;
-                      }
-                      
-                      navigator.clipboard.writeText(textToCopy).then(() => {
-                        // Use innerHTML for HTML content (SVG icons), textContent for plain text
-                        if (this.getAttribute('data-original-html')) {
-                          this.innerHTML = copiedContent;
-                        } else {
-                          this.textContent = copiedContent;
-                        }
-                        this.style.background = '#d4edda';
-                        
-                        setTimeout(() => {
-                          if (this.getAttribute('data-original-html')) {
-                            this.innerHTML = originalContent;
-                          } else {
-                            this.textContent = originalContent;
-                          }
-                          this.style.background = '#f8f9fa';
-                        }, 2000);
-                      }).catch(err => {
-                        console.error('Failed to copy to clipboard:', err);
-                        alert('Failed to copy');
-                      });
-                    });
-                  });
-                }
-                
-                if (document.readyState === 'loading') {
-                  document.addEventListener('DOMContentLoaded', initClipboardButtons);
-                } else {
-                  initClipboardButtons();
-                }
-              })();
-            JAVASCRIPT
-          end
-        end
       end
     end
   end

data/lib/rails/clipboard/helper.rb

@@ -2,12 +2,16 @@
 
 require_relative "helper/version"
 require_relative "helper/view_helpers"
-require_relative "helper/engine" if defined?(Rails::Engine)
 
 module Rails
   module Clipboard
     module Helper
       class Error < StandardError; end
+
+      # Automatically include view helpers in ActionView
+      if defined?(ActionView::Base)
+        ActionView::Base.include ViewHelpers
+      end
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-clipboard-helper
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - dhq_boiler
@@ -9,26 +9,6 @@ bindir: exe
 cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: railties
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '9.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '9.0'
 - !ruby/object:Gem::Dependency
   name: actionview
   requirement: !ruby/object:Gem::Requirement
@@ -61,11 +41,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/javascripts/rails_clipboard_helper.js
-- config/importmap.rb
 - lib/rails/clipboard/helper.rb
-- lib/rails/clipboard/helper/engine.rb
-- lib/rails/clipboard/helper/railtie.rb
 - lib/rails/clipboard/helper/version.rb
 - lib/rails/clipboard/helper/view_helpers.rb
 - sig/rails/clipboard/helper.rbs

data/app/assets/javascripts/rails_clipboard_helper.js

@@ -1,67 +0,0 @@
-// Rails Clipboard Helper - Automatic clipboard functionality
-(function() {
-  'use strict';
-
-  function initClipboardButtons() {
-    document.querySelectorAll('[data-clipboard-target]').forEach(function(button) {
-      // Skip if already initialized
-      if (button.dataset.clipboardInitialized) return;
-      button.dataset.clipboardInitialized = 'true';
-
-      button.addEventListener('click', function() {
-        const targetId = this.getAttribute('data-clipboard-target');
-        const targetElement = document.getElementById(targetId);
-
-        // Support both old (text) and new (HTML) data attributes
-        const originalContent = this.getAttribute('data-original-html') || this.getAttribute('data-original-text');
-        const copiedContent = this.getAttribute('data-copied-html') || this.getAttribute('data-copied-text');
-
-        let textToCopy;
-        if (targetElement.tagName === 'INPUT' || targetElement.tagName === 'TEXTAREA') {
-          textToCopy = targetElement.value;
-        } else {
-          textToCopy = targetElement.textContent;
-        }
-
-        navigator.clipboard.writeText(textToCopy).then(() => {
-          // Use innerHTML for HTML content (SVG icons), textContent for plain text
-          if (this.getAttribute('data-original-html')) {
-            this.innerHTML = copiedContent;
-          } else {
-            this.textContent = copiedContent;
-          }
-          this.style.background = '#d4edda';
-
-          setTimeout(() => {
-            if (this.getAttribute('data-original-html')) {
-              this.innerHTML = originalContent;
-            } else {
-              this.textContent = originalContent;
-            }
-            this.style.background = '#f8f9fa';
-          }, 2000);
-        }).catch(err => {
-          console.error('Failed to copy to clipboard:', err);
-          alert('Failed to copy');
-        });
-      });
-    });
-  }
-
-  // Initialize on DOMContentLoaded
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initClipboardButtons);
-  } else {
-    initClipboardButtons();
-  }
-
-  // Re-initialize on Turbo events (for Turbo/Hotwire support)
-  if (typeof Turbo !== 'undefined') {
-    document.addEventListener('turbo:load', initClipboardButtons);
-    document.addEventListener('turbo:render', initClipboardButtons);
-  }
-
-  // Re-initialize on turbolinks events (for older Turbolinks support)
-  document.addEventListener('turbolinks:load', initClipboardButtons);
-})();
-

data/config/importmap.rb

@@ -1,4 +0,0 @@
-# Pin npm packages by running ./bin/importmap
-
-pin "rails_clipboard_helper", to: "rails_clipboard_helper.js"
-

data/lib/rails/clipboard/helper/engine.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module Rails
-  module Clipboard
-    module Helper
-      class Engine < ::Rails::Engine
-        isolate_namespace Rails::Clipboard::Helper
-
-        initializer "rails_clipboard_helper.assets" do |app|
-          app.config.assets.precompile += %w[rails_clipboard_helper.js] if app.config.respond_to?(:assets)
-        end
-
-        initializer "rails_clipboard_helper.view_helpers" do
-          ActiveSupport.on_load(:action_view) do
-            include Rails::Clipboard::Helper::ViewHelpers
-          end
-        end
-      end
-    end
-  end
-end
-

data/lib/rails/clipboard/helper/railtie.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module Rails
-  module Clipboard
-    module Helper
-      class Railtie < ::Rails::Railtie
-        initializer "rails_clipboard_helper.view_helpers" do
-          ActiveSupport.on_load(:action_view) do
-            include Rails::Clipboard::Helper::ViewHelpers
-          end
-        end
-
-        initializer "rails_clipboard_helper.assets" do |app|
-          if app.config.respond_to?(:assets)
-            app.config.assets.precompile += %w[rails_clipboard_helper.js]
-          end
-        end
-
-        # Add paths for asset pipeline
-        config.before_initialize do |app|
-          if app.config.respond_to?(:assets)
-            app.config.assets.paths << root.join("app", "assets", "javascripts")
-          end
-        end
-
-        def self.root
-          @root ||= Pathname.new(File.expand_path("../../../..", __dir__))
-        end
-      end
-    end
-  end
-end
-