i18n_hover_keys 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: a2d84075e2d3d450166254d7709ece02d889015eefe5d092e44c9b7b8e969795
4
+ data.tar.gz: 24e3ed895ae360a70d3cbeef9dc358d0fd14689a698f55d8f83b430115cd9737
5
+ SHA512:
6
+ metadata.gz: 7f57843267fa55c15feb37cba44ee302c89a92da5556011f174260d5a7efb178870acdc965af13f785f9611b6a7673246d4919d8d63a7d6770533103019729ca
7
+ data.tar.gz: bbcb4984487c63007fb04688d666b32f447cab4c0829563a2f38da2c07e98ac97eac13e1a10e0da9fcbcd152865871c71982fa1718eb11a32d17cec38c84839e
data/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # I18nHoverKeys
2
+
3
+ ### 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.
4
+
5
+ ## Usage
6
+
7
+ ### Installation
8
+
9
+ 1. Add the gem to your Gemfile:
10
+
11
+ gem 'i18n_hover_keys'
12
+
13
+ 2. Run `bundle install` to install the gem.
14
+
15
+ ### Usage in Views
16
+
17
+ Make sure you use the `t` (or `translate`) helper in your views for translations:
18
+
19
+ <%= t("general.information") %>
20
+
21
+ Include the toggle button in your layout or view where you want to toggle the feature:
22
+
23
+ <%= i18n_hover_toggle_button %>
24
+
25
+ Clicking this button enables hover mode:
26
+
27
+ * Hover over any translated text, and a tooltip will show the corresponding translation key.
28
+ * Click the button again to disable hover mode.
29
+
30
+
31
+ ## Contributing
32
+
33
+ Bug reports and pull requests are welcome on GitHub at https://github.com/eric-khoury/i18n_hover_keys.
34
+
35
+ ## License
36
+
37
+ The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
@@ -0,0 +1 @@
1
+ //= require i18n_hover_keys
@@ -0,0 +1,64 @@
1
+ document.addEventListener("DOMContentLoaded", function () {
2
+ console.log("i18n hover keys loaded");
3
+
4
+ var toggleButton = document.getElementById("i18n-hover-toggle");
5
+ var enabled = false;
6
+
7
+ if (toggleButton) {
8
+ toggleButton.addEventListener("click", function () {
9
+ console.log("clicked");
10
+ enabled = !enabled;
11
+ if (enabled) {
12
+ enableHoverKeys();
13
+ toggleButton.textContent = "Disable Translation Keys";
14
+ } else {
15
+ disableHoverKeys();
16
+ toggleButton.textContent = "Enable Translation Keys";
17
+ }
18
+ });
19
+ }
20
+
21
+ function enableHoverKeys() {
22
+ var elements = document.querySelectorAll("[data-i18n-key]");
23
+ elements.forEach(function (el) {
24
+ el.addEventListener("mouseenter", showKey);
25
+ el.addEventListener("mouseleave", hideKey);
26
+ });
27
+ }
28
+
29
+ function disableHoverKeys() {
30
+ var elements = document.querySelectorAll("[data-i18n-key]");
31
+ elements.forEach(function (el) {
32
+ el.removeEventListener("mouseenter", showKey);
33
+ el.removeEventListener("mouseleave", hideKey);
34
+ hideKey.call(el);
35
+ });
36
+ }
37
+
38
+ function showKey() {
39
+ var key = this.getAttribute("data-i18n-key");
40
+ var tooltip = document.createElement("span");
41
+ tooltip.className = "i18n-tooltip";
42
+ tooltip.textContent = key;
43
+
44
+ this.style.position = "relative";
45
+
46
+ // Position the tooltip on top and left-aligned
47
+ tooltip.style.position = "absolute";
48
+ tooltip.style.left = "0";
49
+ tooltip.style.bottom = "100%";
50
+ tooltip.style.backgroundColor = "yellow";
51
+ tooltip.style.border = "1px solid black";
52
+ tooltip.style.padding = "4px";
53
+ tooltip.style.zIndex = "10000";
54
+
55
+ this.appendChild(tooltip);
56
+ }
57
+
58
+ function hideKey() {
59
+ var tooltip = this.querySelector(".i18n-tooltip");
60
+ if (tooltip) {
61
+ this.removeChild(tooltip);
62
+ }
63
+ }
64
+ });
@@ -0,0 +1,3 @@
1
+ /*
2
+ *= require i18n_hover_keys
3
+ */
@@ -0,0 +1,7 @@
1
+ .i18n-tooltip {
2
+ position: absolute;
3
+ background-color: yellow;
4
+ border: 1px solid black;
5
+ padding: 2px;
6
+ z-index: 1000;
7
+ }
@@ -0,0 +1,7 @@
1
+ module I18nHoverKeys
2
+ class Engine < ::Rails::Engine
3
+ initializer 'i18n_hover_keys.assets.precompile' do |app|
4
+ app.config.assets.precompile += %w(i18n_hover_keys.js i18n_hover_keys.css)
5
+ end
6
+ end
7
+ end
@@ -0,0 +1,11 @@
1
+ module I18nHoverKeys
2
+ module Overrides
3
+ def translate(key, **options)
4
+ translation = super(key, **options)
5
+ return translation unless translation.is_a?(String)
6
+
7
+ "<span data-i18n-key='#{key}'>#{translation}</span>".html_safe
8
+ end
9
+ alias t translate
10
+ end
11
+ end
@@ -0,0 +1,15 @@
1
+ require "i18n_hover_keys/view_helpers"
2
+
3
+ module I18nHoverKeys
4
+ class Railtie < Rails::Railtie
5
+ initializer 'i18n_hover_keys.view_helpers' do
6
+ ActiveSupport.on_load(:action_view) do
7
+ include I18nHoverKeys::ViewHelpers
8
+ end
9
+ end
10
+
11
+ initializer 'i18n_hover_keys.overrides' do
12
+ ActionView::Base.prepend(I18nHoverKeys::Overrides)
13
+ end
14
+ end
15
+ end
@@ -0,0 +1,5 @@
1
+ # frozen_string_literal: true
2
+
3
+ module I18nHoverKeys
4
+ VERSION = "0.1.0"
5
+ end
@@ -0,0 +1,7 @@
1
+ module I18nHoverKeys
2
+ module ViewHelpers
3
+ def i18n_hover_toggle_button
4
+ button_tag 'Toggle Translation Keys', id: 'i18n-hover-toggle'
5
+ end
6
+ end
7
+ end
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative "i18n_hover_keys/version"
4
+ require_relative "i18n_hover_keys/view_helpers"
5
+ require_relative "i18n_hover_keys/overrides"
6
+ require_relative "i18n_hover_keys/railtie"
7
+ require_relative "i18n_hover_keys/engine"
8
+
9
+ module I18nHoverKeys
10
+ class Error < StandardError; end
11
+ end
metadata ADDED
@@ -0,0 +1,65 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: i18n_hover_keys
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Eric Khoury
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2024-12-19 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: This gem extends the internationalization (i18n) functionality in Ruby
14
+ on Rails by adding a simple toggle button to your application’s UI. When activated,
15
+ it overlays each translated string with a tooltip that displays its associated translation
16
+ key on hover. This allows QA teams, product managers, and other non-technical stakeholders
17
+ to quickly identify which translation keys correspond to specific pieces of text
18
+ on the page—without diving into source code. Designed for simplicity and ease-of-use,
19
+ the gem integrates seamlessly with the Rails asset pipeline and can be easily enabled
20
+ or disabled as needed, streamlining your localization quality assurance process.
21
+ email:
22
+ - khoury@live.se
23
+ executables: []
24
+ extensions: []
25
+ extra_rdoc_files: []
26
+ files:
27
+ - README.md
28
+ - app/assets/javascripts/application.js
29
+ - app/assets/javascripts/i18n_hover_keys.js
30
+ - app/assets/stylesheets/application.css
31
+ - app/assets/stylesheets/i18n_hover_keys.css
32
+ - lib/i18n_hover_keys.rb
33
+ - lib/i18n_hover_keys/engine.rb
34
+ - lib/i18n_hover_keys/overrides.rb
35
+ - lib/i18n_hover_keys/railtie.rb
36
+ - lib/i18n_hover_keys/version.rb
37
+ - lib/i18n_hover_keys/view_helpers.rb
38
+ homepage: https://github.com/eric-khoury/i18n_hover_keys
39
+ licenses:
40
+ - MIT
41
+ metadata:
42
+ homepage_uri: https://github.com/eric-khoury/i18n_hover_keys
43
+ source_code_uri: https://github.com/eric-khoury/i18n_hover_keys
44
+ post_install_message:
45
+ rdoc_options: []
46
+ require_paths:
47
+ - lib
48
+ required_ruby_version: !ruby/object:Gem::Requirement
49
+ requirements:
50
+ - - ">="
51
+ - !ruby/object:Gem::Version
52
+ version: 3.0.0
53
+ required_rubygems_version: !ruby/object:Gem::Requirement
54
+ requirements:
55
+ - - ">="
56
+ - !ruby/object:Gem::Version
57
+ version: '0'
58
+ requirements: []
59
+ rubygems_version: 3.5.9
60
+ signing_key:
61
+ specification_version: 4
62
+ summary: A Rails extension that reveals translation keys when hovering over translated
63
+ text, empowering QA teams and non-developers to identify the exact keys used in
64
+ the interface.
65
+ test_files: []