rails-diff-time 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 908929488b5de5bb6d8dcdfdf0f16b7081d02b3e2873e3969884a64c7400d674
-  data.tar.gz: bbf8fc3135e4e1afcacd7299e6f43775337f5798dacb712505d5020b02a14a48
+  metadata.gz: f500ef502d22be1eb93fe920650122bdd370b5799788e00180235a48afa17ce1
+  data.tar.gz: 0b954d61dcfbc5c431a8ea9a85ea996bac0a71470dc6db8dafb69e77d4c88813
 SHA512:
-  metadata.gz: 40e116660189676a4a8636e9d7ec9375ba7f715ec9e72cdb4bd192d824b26b8a4eae5ffade00a493f232425c801e8ac8d405d0713ce318031cedaec794208464
-  data.tar.gz: 82e04671eba7400273228f7ed916397da2a52fb6559160d10ac1eb5bdae1ca5d1c07944860be28405fa437eaf1ebc4c1ff563c0d19c31eee6f29ae7afb395ce6
+  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/app/views/rails-diff-time/_diff_time.html.erb

@@ -1,8 +1,14 @@
 <%
-  _element_name ||= locals[:element_name] || "span"
-  _diff_time = locals[:diff_time]
-  _attributes ||= locals[:attributes] || {}
+  element_name ||= locals[:element_name] || "span"
+  diff_time = locals[:diff_time]
+  attributes ||= locals[:attributes] || {}
+  certain_time = locals[:certain_time]
+  auto_update = locals[:auto_update]
+
+  if auto_update
+    attributes[:data] ||= {}
+    attributes[:data][:diff_time_target] = "display"
+    attributes[:data][:certain_time] = certain_time.iso8601
+  end
 %>
-<% if _diff_time %>
-  <%= content_tag(_element_name.to_sym, _diff_time, _attributes) %>
-<% end %>
+<%= content_tag(element_name.to_sym, diff_time, attributes) %>

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

@@ -2,34 +2,229 @@
 
 module RailsDiffTime
   # Helper methods for displaying time differences in a human-readable format.
-  #
-  # This module provides methods to format time differences as relative strings
-  # (e.g., "2 hours ago", "3 days later") and integrates with Rails views.
-  # The helpers can be used directly in templates or through the provided
-  # render helper method.
-  #
-  # @example Usage in a Rails view
-  #   <%= diff_time(user.created_at) %>
-  #   <%= diff_time(event.start_time, "div", class: "timestamp") %>
   module Helpers
-    def diff_time(certain_time, element_name = "span", attributes = {})
+    def diff_time(certain_time, element_name = "span", attributes = {}, auto_update: false)
       return "" if certain_time.nil?
 
-      render "rails-diff-time/diff_time", locals: {
+      result = render "rails-diff-time/diff_time", locals: {
         diff_time: diff_time_str(certain_time),
         element_name: element_name,
-        attributes: attributes
+        attributes: attributes,
+        certain_time: certain_time,
+        auto_update: auto_update
       }
+
+      # 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 += diff_time_script_tag
+      end
+
+      result
     end
 
     private
 
+    def diff_time_script_tag
+      javascript_tag do
+        <<~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;
+                const certainTime = new Date(certainTimeStr);
+                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()) {
+                  return this.formatMonths(differenceInSeconds, isLater);
+                } else if (differenceInSeconds >= this.weekInSeconds()) {
+                  return this.formatWeeks(differenceInSeconds, isLater);
+                } else if (differenceInSeconds >= this.dayInSeconds()) {
+                  return this.formatDays(differenceInSeconds, isLater);
+                } else if (differenceInSeconds >= this.hourInSeconds()) {
+                  return this.formatHours(differenceInSeconds, isLater);
+                } else if (differenceInSeconds >= this.minuteInSeconds()) {
+                  return this.formatMinutes(differenceInSeconds, isLater);
+                } else {
+                  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")}`;
+                  }
+                }
+                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);
+                  this.timerId = null;
+                }
+                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
+            };
+          })();
+        JAVASCRIPT
+      end
+    end
+
     def diff_time_str(certain_time)
       now = ::Time.now
       diff = certain_time - now
       difference_in_seconds = diff.abs
 
-      # Display "now" if within 5 seconds
       return "now" if difference_in_seconds <= 5
 
       case difference_in_seconds
@@ -120,13 +315,12 @@ module RailsDiffTime
       "#{time_str(seconds, "second")} #{ago_or_later(diff)}"
     end
 
-    # Time unit constant methods
     def year_in_seconds
-      365.25 * 24 * 3600 # Considering leap years
+      365.25 * 24 * 3600
     end
 
     def month_in_seconds
-      30 * 24 * 3600 # Average 30 days
+      30 * 24 * 3600
     end
 
     def week_in_seconds
@@ -145,7 +339,6 @@ module RailsDiffTime
       60
     end
 
-    # Threshold methods
     def year_threshold
       year_in_seconds
     end

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

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsDiffTime
-  VERSION = "0.1.4"
+  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.4
+  version: 0.2.0
 platform: ruby
 authors:
 - dhq_boiler
@@ -10,8 +10,10 @@ cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
 dependencies: []
 description: A Rails gem that provides helper methods to display time differences
-  in a human-readable format (e.g., '2 hours ago', '3 days later'). Integrates seamlessly
-  with Rails views and supports various time units from seconds to years.
+  in a human-readable format (e.g., '2 hours ago', '3 days later'). Features include
+  auto-updating timestamps every minute without page reload, no JavaScript imports
+  required, and seamless integration with Rails views. Supports various time units
+  from seconds to years.
 email:
 - dhq_boiler@live.jp
 executables: []
@@ -44,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:
   - - ">="
@@ -53,5 +55,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.9
 specification_version: 4
-summary: Rails helper for displaying human-readable time differences
+summary: Rails helper for displaying human-readable time differences with auto-update
 test_files: []