rails-diff-time 0.1.5 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9748702954e4f33f487e7ad5a8c657b89bbcc9966cfe384f0791fb2c60428b6e
-  data.tar.gz: dcd1fee4443c63efeab7d4acc4742a2e3dd9e042ec0ce4fae7a8c6fd68809e51
+  metadata.gz: f500ef502d22be1eb93fe920650122bdd370b5799788e00180235a48afa17ce1
+  data.tar.gz: 0b954d61dcfbc5c431a8ea9a85ea996bac0a71470dc6db8dafb69e77d4c88813
 SHA512:
-  metadata.gz: 3690429964d2704bf55479a1fae0083f46924a7098d3e24aa81899f3a0cebfe3f83feca3ae8ccf854e16928fae4799ce88e559561a49dc67d178d0aabb5c4aaf
-  data.tar.gz: ca7e1e72f9d52fa0da0fcceaa28921f73b90453098beea0ae7723c1bf6287cc94826a588a7bd182790871477ce6905e7a8bc20aef35fe83e39b32d663212d575
+  metadata.gz: b515308f6f0ace59434dd0ee7be048696fbdddfe196d02198fb7cfd8d8ca7625195d5867dd3b3e287bf1bdc40f01bd92d6667b1295ff9e0c06edba1cdfc9b0e4
+  data.tar.gz: ee2d795c5307826898c38ca91421d106db62e4d0592a9c4ceebbf9ef34a1edb06970e2ab246b5c8e15ea1df60c5303d442f213766bfc8b28f9b4464eee1d3910

data/.rubocop.yml

@@ -7,6 +7,7 @@ Style/StringLiterals:
 
 Style/StringLiteralsInInterpolation:
   EnforcedStyle: double_quotes
+  AutoCorrect: false
 
 # メトリクス系のルールをオプトアウト
 Metrics/ModuleLength:

data/README.md

@@ -1,6 +1,6 @@
-# Rails::Diff::Time
+# rails-diff-time
 
-A Rails helper gem to display time differences in a human-readable format.
+A Rails helper gem to display time differences in a human-readable format with automatic updates.
 
 ## Installation
 
@@ -18,6 +18,10 @@ Or install it yourself as:
 
     $ gem install rails-diff-time
 
+## Setup
+
+No setup required! Just install the gem and start using it. The auto-update JavaScript will be automatically included when you use `auto_update: true` for the first time on a page.
+
 ## Usage
 
 In your Rails views, you can use the `diff_time` helper to display time differences:
@@ -29,15 +33,34 @@ In your Rails views, you can use the `diff_time` helper to display time differen
 <%= diff_time(Time.now - 2.hours) %>
 # Output: <span>2 hours ago</span>
 
-<%= diff_time(Time.now + 1.year + 2.months, "div", class: "time-diff") %>
+<%= diff_time(Time.now + 1.year + 2.months, "div", { class: "time-diff" }) %>
 # Output: <div class="time-diff">1 year 2 months later</div>
 ```
 
+### Auto-update Feature
+
+Enable automatic updates (every 1 minute) by passing the `auto_update: true` option:
+
+```erb
+<%= diff_time(user.created_at, auto_update: true) %>
+# The display will automatically update every minute
+
+<%= diff_time(post.published_at, "span", { class: "timestamp" }, auto_update: true) %>
+# With custom element and attributes
+```
+
+**Note:** The necessary JavaScript code will be automatically included on the page the first time you call `diff_time` with `auto_update: true`. No manual setup required!
+
 ### Parameters
 
+```ruby
+diff_time(certain_time, element_name = "span", attributes = {}, auto_update: false)
+```
+
 - `certain_time` (required): The time to compare with the current time
 - `element_name` (optional, default: "span"): The HTML element to wrap the output
 - `attributes` (optional, default: {}): HTML attributes to add to the element
+- `auto_update` (optional, default: false): Enable automatic updates every minute (JavaScript automatically included on first use)
 
 ## Examples
 
@@ -49,9 +72,63 @@ In your Rails views, you can use the `diff_time` helper to display time differen
 <%= diff_time(event.starts_at, "p") %>
 
 # With CSS classes
-<%= diff_time(post.published_at, "span", class: "text-muted", id: "post-time") %>
+<%= diff_time(post.published_at, "span", { class: "text-muted", id: "post-time" }) %>
+
+# With auto-update enabled (JavaScript automatically included)
+<%= diff_time(meeting.scheduled_at, "span", { class: "meeting-time" }, auto_update: true) %>
+
+# Live timestamps for comments
+<% @comments.each do |comment| %>
+  <div class="comment">
+    <p><%= comment.body %></p>
+    <small>Posted <%= diff_time(comment.created_at, auto_update: true) %></small>
+  </div>
+<% end %>
 ```
 
+### Complete Example
+
+**app/views/posts/show.html.erb:**
+```erb
+<article>
+  <h1><%= @post.title %></h1>
+  <p class="meta">
+    Published <%= diff_time(@post.published_at, auto_update: true) %>
+  </p>
+  <div><%= @post.content %></div>
+</article>
+```
+
+That's it! No need to modify layout files or configure JavaScript imports.
+
+## How It Works
+
+The auto-update feature works by:
+
+1. Storing the original timestamp in a `data-certain-time` attribute (ISO 8601 format)
+2. Automatically including JavaScript code on first use of `auto_update: true`
+3. Running a JavaScript timer that recalculates the time difference every 60 seconds
+4. Updating the text content of elements client-side
+
+This means:
+- No additional server requests are made
+- The display stays accurate without page reloads
+- Works with Turbolinks/Turbo for SPA-like experiences
+- **No JavaScript imports, asset pipeline configuration, or layout modifications needed** - everything is automatic!
+
+## Browser Support
+
+The JavaScript functionality requires:
+- Modern browsers with ES6+ support
+- Native `Date` object support
+- `setInterval` support
+
+Compatible with:
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -64,5 +141,4 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/dhq_bo
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/rails/diff/time/helpers.rb

@@ -17,7 +17,7 @@ module RailsDiffTime
       # If auto_update is enabled and the script has not been included yet
       if auto_update && !@_diff_time_script_included
         @_diff_time_script_included = true
-        result = result + diff_time_script_tag
+        result += diff_time_script_tag
       end
 
       result
@@ -30,36 +30,36 @@ module RailsDiffTime
         <<~JAVASCRIPT.html_safe
           (function() {
             'use strict';
-            
+
             class DiffTimeUpdater {
               constructor() {
                 this.updateInterval = 60000;
                 this.elements = [];
                 this.timerId = null;
               }
-              
+
               init() {
                 this.findElements();
                 if (this.elements.length > 0) {
                   this.startAutoUpdate();
                 }
               }
-              
+
               findElements() {
                 this.elements = Array.from(
                   document.querySelectorAll('[data-diff-time-target="display"]')
                 );
               }
-              
+
               startAutoUpdate() {
                 if (this.timerId) clearInterval(this.timerId);
                 this.timerId = setInterval(() => this.updateAll(), this.updateInterval);
               }
-              
+
               updateAll() {
                 this.elements.forEach(element => this.updateElement(element));
               }
-              
+
               updateElement(element) {
                 const certainTimeStr = element.dataset.certainTime;
                 if (!certainTimeStr) return;
@@ -67,16 +67,16 @@ module RailsDiffTime
                 const diffTimeStr = this.calculateDiffTime(certainTime);
                 element.textContent = diffTimeStr;
               }
-              
+
               calculateDiffTime(certainTime) {
                 const now = new Date();
                 const diff = certainTime - now;
                 const differenceInSeconds = Math.abs(diff) / 1000;
-                
+
                 if (differenceInSeconds <= 5) return "now";
-                
+
                 const isLater = diff > 0;
-                
+
                 if (differenceInSeconds >= this.yearInSeconds()) {
                   return this.formatYears(differenceInSeconds, isLater);
                 } else if (differenceInSeconds >= this.monthInSeconds()) {
@@ -93,17 +93,17 @@ module RailsDiffTime
                   return this.formatSeconds(differenceInSeconds, isLater);
                 }
               }
-              
+
               formatYears(seconds, isLater) {
                 const years = Math.floor(seconds / this.yearInSeconds());
                 let remaining = seconds - (years * this.yearInSeconds());
                 let result = this.timeStr(years, "year");
-                
+
                 if (remaining >= this.monthInSeconds()) {
                   const months = Math.floor(remaining / this.monthInSeconds());
                   remaining -= months * this.monthInSeconds();
                   result += ` ${this.timeStr(months, "month")}`;
-                  
+
                   if (remaining >= this.dayInSeconds()) {
                     const days = Math.floor(remaining / this.dayInSeconds());
                     result += ` ${this.timeStr(days, "day")}`;
@@ -111,72 +111,72 @@ module RailsDiffTime
                 }
                 return `${result} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatMonths(seconds, isLater) {
                 const months = Math.floor(seconds / this.monthInSeconds());
                 const remaining = seconds - (months * this.monthInSeconds());
                 let result = this.timeStr(months, "month");
-                
+
                 if (remaining >= this.dayInSeconds()) {
                   const days = Math.floor(remaining / this.dayInSeconds());
                   result += ` ${this.timeStr(days, "day")}`;
                 }
                 return `${result} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatWeeks(seconds, isLater) {
                 const weeks = Math.floor(seconds / this.weekInSeconds());
                 return `${this.timeStr(weeks, "week")} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatDays(seconds, isLater) {
                 const days = Math.floor(seconds / this.dayInSeconds());
                 return `${this.timeStr(days, "day")} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatHours(seconds, isLater) {
                 const hours = Math.floor(seconds / this.hourInSeconds());
                 const remaining = seconds - (hours * this.hourInSeconds());
                 let result = this.timeStr(hours, "hour");
-                
+
                 if (remaining >= this.minuteInSeconds()) {
                   const minutes = Math.floor(remaining / this.minuteInSeconds());
                   result += ` ${this.timeStr(minutes, "minute")}`;
                 }
                 return `${result} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatMinutes(seconds, isLater) {
                 const minutes = Math.floor(seconds / this.minuteInSeconds());
                 const remaining = seconds - (minutes * this.minuteInSeconds());
                 let result = this.timeStr(minutes, "minute");
-                
+
                 if (remaining > 0) {
                   const secs = Math.floor(remaining);
                   result += ` ${this.timeStr(secs, "second")}`;
                 }
                 return `${result} ${this.agoOrLater(isLater)}`;
               }
-              
+
               formatSeconds(seconds, isLater) {
                 const secs = Math.floor(seconds);
                 return `${this.timeStr(secs, "second")} ${this.agoOrLater(isLater)}`;
               }
-              
+
               yearInSeconds() { return 365.25 * 24 * 3600; }
               monthInSeconds() { return 30 * 24 * 3600; }
               weekInSeconds() { return 7 * 24 * 3600; }
               dayInSeconds() { return 24 * 3600; }
               hourInSeconds() { return 3600; }
               minuteInSeconds() { return 60; }
-              
+
               agoOrLater(isLater) { return isLater ? "later" : "ago"; }
-              
+
               timeStr(count, singular) {
                 const plural = singular + "s";
                 return `${count} ${count === 1 ? singular : plural}`;
               }
-              
+
               destroy() {
                 if (this.timerId) {
                   clearInterval(this.timerId);
@@ -185,32 +185,32 @@ module RailsDiffTime
                 this.elements = [];
               }
             }
-            
+
             let updater = null;
-            
+
             function initUpdater() {
               if (updater) updater.destroy();
               updater = new DiffTimeUpdater();
               updater.init();
             }
-            
+
             if (document.readyState === 'loading') {
               document.addEventListener('DOMContentLoaded', initUpdater);
             } else {
               initUpdater();
             }
-            
+
             document.addEventListener('turbolinks:load', initUpdater);
             document.addEventListener('turbo:load', initUpdater);
-            
+
             document.addEventListener('turbolinks:before-cache', function() {
               if (updater) updater.destroy();
             });
-            
+
             document.addEventListener('turbo:before-cache', function() {
               if (updater) updater.destroy();
             });
-            
+
             window.RailsDiffTime = {
               updater: updater,
               DiffTimeUpdater: DiffTimeUpdater
@@ -372,4 +372,3 @@ module RailsDiffTime
     end
   end
 end
-

data/lib/rails/diff/time/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsDiffTime
-  VERSION = "0.1.5"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-diff-time
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.2.0
 platform: ruby
 authors:
 - dhq_boiler
@@ -46,7 +46,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.4.5
+      version: 3.4.7
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="