i18n_hover_keys 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a2d84075e2d3d450166254d7709ece02d889015eefe5d092e44c9b7b8e969795
+  data.tar.gz: 24e3ed895ae360a70d3cbeef9dc358d0fd14689a698f55d8f83b430115cd9737
+SHA512:
+  metadata.gz: 7f57843267fa55c15feb37cba44ee302c89a92da5556011f174260d5a7efb178870acdc965af13f785f9611b6a7673246d4919d8d63a7d6770533103019729ca
+  data.tar.gz: bbcb4984487c63007fb04688d666b32f447cab4c0829563a2f38da2c07e98ac97eac13e1a10e0da9fcbcd152865871c71982fa1718eb11a32d17cec38c84839e

data/README.md

@@ -0,0 +1,37 @@
+# I18nHoverKeys
+
+### A Rails extension that reveals translation keys when hovering over translated text, empowering QA teams and non-developers to identify the exact keys used in the interface.
+
+## Usage
+
+### Installation
+
+1.  Add the gem to your Gemfile:
+
+        gem 'i18n_hover_keys'
+
+2.  Run `bundle install` to install the gem.
+
+### Usage in Views
+
+Make sure you use the  `t` (or `translate`) helper in your views for translations:
+
+    <%= t("general.information") %>
+
+Include the toggle button in your layout or view where you want to toggle the feature:
+
+    <%= i18n_hover_toggle_button %>
+
+Clicking this button enables hover mode:
+
+*   Hover over any translated text, and a tooltip will show the corresponding translation key.
+*   Click the button again to disable hover mode.
+
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/eric-khoury/i18n_hover_keys.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/application.js

@@ -0,0 +1 @@
+//= require i18n_hover_keys

data/app/assets/javascripts/i18n_hover_keys.js

@@ -0,0 +1,64 @@
+document.addEventListener("DOMContentLoaded", function () {
+  console.log("i18n hover keys loaded");
+
+  var toggleButton = document.getElementById("i18n-hover-toggle");
+  var enabled = false;
+
+  if (toggleButton) {
+    toggleButton.addEventListener("click", function () {
+      console.log("clicked");
+      enabled = !enabled;
+      if (enabled) {
+        enableHoverKeys();
+        toggleButton.textContent = "Disable Translation Keys";
+      } else {
+        disableHoverKeys();
+        toggleButton.textContent = "Enable Translation Keys";
+      }
+    });
+  }
+
+  function enableHoverKeys() {
+    var elements = document.querySelectorAll("[data-i18n-key]");
+    elements.forEach(function (el) {
+      el.addEventListener("mouseenter", showKey);
+      el.addEventListener("mouseleave", hideKey);
+    });
+  }
+
+  function disableHoverKeys() {
+    var elements = document.querySelectorAll("[data-i18n-key]");
+    elements.forEach(function (el) {
+      el.removeEventListener("mouseenter", showKey);
+      el.removeEventListener("mouseleave", hideKey);
+      hideKey.call(el);
+    });
+  }
+
+  function showKey() {
+    var key = this.getAttribute("data-i18n-key");
+    var tooltip = document.createElement("span");
+    tooltip.className = "i18n-tooltip";
+    tooltip.textContent = key;
+
+    this.style.position = "relative";
+
+    // Position the tooltip on top and left-aligned
+    tooltip.style.position = "absolute";
+    tooltip.style.left = "0";
+    tooltip.style.bottom = "100%";
+    tooltip.style.backgroundColor = "yellow";
+    tooltip.style.border = "1px solid black";
+    tooltip.style.padding = "4px";
+    tooltip.style.zIndex = "10000";
+
+    this.appendChild(tooltip);
+  }
+
+  function hideKey() {
+    var tooltip = this.querySelector(".i18n-tooltip");
+    if (tooltip) {
+      this.removeChild(tooltip);
+    }
+  }
+});

data/app/assets/stylesheets/application.css

@@ -0,0 +1,3 @@
+/*
+ *= require i18n_hover_keys
+ */

data/app/assets/stylesheets/i18n_hover_keys.css

@@ -0,0 +1,7 @@
+.i18n-tooltip {
+  position: absolute;
+  background-color: yellow;
+  border: 1px solid black;
+  padding: 2px;
+  z-index: 1000;
+}

data/lib/i18n_hover_keys/engine.rb

@@ -0,0 +1,7 @@
+module I18nHoverKeys
+  class Engine < ::Rails::Engine
+    initializer 'i18n_hover_keys.assets.precompile' do |app|
+      app.config.assets.precompile += %w(i18n_hover_keys.js i18n_hover_keys.css)
+    end
+  end
+end

data/lib/i18n_hover_keys/overrides.rb

@@ -0,0 +1,11 @@
+module I18nHoverKeys
+  module Overrides
+    def translate(key, **options)
+      translation = super(key, **options)
+      return translation unless translation.is_a?(String)
+
+      "<span data-i18n-key='#{key}'>#{translation}</span>".html_safe
+    end
+    alias t translate
+  end
+end

data/lib/i18n_hover_keys/railtie.rb

@@ -0,0 +1,15 @@
+require "i18n_hover_keys/view_helpers"
+
+module I18nHoverKeys
+  class Railtie < Rails::Railtie
+    initializer 'i18n_hover_keys.view_helpers' do
+      ActiveSupport.on_load(:action_view) do
+        include I18nHoverKeys::ViewHelpers
+      end
+    end
+
+    initializer 'i18n_hover_keys.overrides' do
+      ActionView::Base.prepend(I18nHoverKeys::Overrides)
+    end
+  end
+end

data/lib/i18n_hover_keys/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module I18nHoverKeys
+  VERSION = "0.1.0"
+end

data/lib/i18n_hover_keys/view_helpers.rb

@@ -0,0 +1,7 @@
+module I18nHoverKeys
+  module ViewHelpers
+    def i18n_hover_toggle_button
+      button_tag 'Toggle Translation Keys', id: 'i18n-hover-toggle'
+    end
+  end
+end

data/lib/i18n_hover_keys.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_relative "i18n_hover_keys/version"
+require_relative "i18n_hover_keys/view_helpers"
+require_relative "i18n_hover_keys/overrides"
+require_relative "i18n_hover_keys/railtie"
+require_relative "i18n_hover_keys/engine"
+
+module I18nHoverKeys
+  class Error < StandardError; end
+end

metadata

@@ -0,0 +1,65 @@
+--- !ruby/object:Gem::Specification
+name: i18n_hover_keys
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Eric Khoury
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2024-12-19 00:00:00.000000000 Z
+dependencies: []
+description: This gem extends the internationalization (i18n) functionality in Ruby
+  on Rails by adding a simple toggle button to your application’s UI. When activated,
+  it overlays each translated string with a tooltip that displays its associated translation
+  key on hover. This allows QA teams, product managers, and other non-technical stakeholders
+  to quickly identify which translation keys correspond to specific pieces of text
+  on the page—without diving into source code. Designed for simplicity and ease-of-use,
+  the gem integrates seamlessly with the Rails asset pipeline and can be easily enabled
+  or disabled as needed, streamlining your localization quality assurance process.
+email:
+- khoury@live.se
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/assets/javascripts/application.js
+- app/assets/javascripts/i18n_hover_keys.js
+- app/assets/stylesheets/application.css
+- app/assets/stylesheets/i18n_hover_keys.css
+- lib/i18n_hover_keys.rb
+- lib/i18n_hover_keys/engine.rb
+- lib/i18n_hover_keys/overrides.rb
+- lib/i18n_hover_keys/railtie.rb
+- lib/i18n_hover_keys/version.rb
+- lib/i18n_hover_keys/view_helpers.rb
+homepage: https://github.com/eric-khoury/i18n_hover_keys
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/eric-khoury/i18n_hover_keys
+  source_code_uri: https://github.com/eric-khoury/i18n_hover_keys
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.9
+signing_key:
+specification_version: 4
+summary: A Rails extension that reveals translation keys when hovering over translated
+  text, empowering QA teams and non-developers to identify the exact keys used in
+  the interface.
+test_files: []