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 +7 -0
- data/README.md +37 -0
- data/app/assets/javascripts/application.js +1 -0
- data/app/assets/javascripts/i18n_hover_keys.js +64 -0
- data/app/assets/stylesheets/application.css +3 -0
- data/app/assets/stylesheets/i18n_hover_keys.css +7 -0
- data/lib/i18n_hover_keys/engine.rb +7 -0
- data/lib/i18n_hover_keys/overrides.rb +11 -0
- data/lib/i18n_hover_keys/railtie.rb +15 -0
- data/lib/i18n_hover_keys/version.rb +5 -0
- data/lib/i18n_hover_keys/view_helpers.rb +7 -0
- data/lib/i18n_hover_keys.rb +11 -0
- metadata +65 -0
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,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,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: []
|