Update the translate directive to gracefully handle the native HTML t…

…ranslate="yes|no" attribute. This change will bypass the normal `angular-gettext` processing when the `translate` attribute has a "yes" or "no" value, and continue processing as normal otherwise.
rubenv · Dec 4, 2020 · 86937d6 · 86937d6
1 parent f5cf0fc
commit 86937d6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/dist/angular-gettext.js b/dist/angular-gettext.js
@@ -450,6 +450,16 @@ angular.module('gettext').directive('translate', ["gettextCatalog", "$parse", "$
         restrict: 'AE',
         terminal: true,
         compile: function compile(element, attrs) {
+            var translate = attrs.translate;
+            if (translate && translate.match(/^yes|no$/i)) {
+                // Ignore the translate attribute if it has a "yes" or "no" value, assuming that it is the HTML
+                // native translate attribute, see
+                // https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute
+                //
+                // In that case we skip processing as this attribute is intended for the user agent itself.
+                return;
+            }
+
             // Validate attributes
             gettextUtil.assert(!attrs.translatePlural || attrs.translateN, 'translate-n', 'translate-plural');
             gettextUtil.assert(!attrs.translateN || attrs.translatePlural, 'translate-plural', 'translate-n');

diff --git a/dist/angular-gettext.min.js b/dist/angular-gettext.min.js
diff --git a/src/directive.js b/src/directive.js
@@ -94,6 +94,16 @@ angular.module('gettext').directive('translate', function (gettextCatalog, $pars
         restrict: 'AE',
         terminal: true,
         compile: function compile(element, attrs) {
+            var translate = attrs.translate;
+            if (translate && translate.match(/^yes|no$/i)) {
+                // Ignore the translate attribute if it has a "yes" or "no" value, assuming that it is the HTML
+                // native translate attribute, see
+                // https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute
+                //
+                // In that case we skip processing as this attribute is intended for the user agent itself.
+                return;
+            }
+
             // Validate attributes
             gettextUtil.assert(!attrs.translatePlural || attrs.translateN, 'translate-n', 'translate-plural');
             gettextUtil.assert(!attrs.translateN || attrs.translatePlural, 'translate-plural', 'translate-n');

diff --git a/test/unit/directive.js b/test/unit/directive.js
@@ -425,4 +425,29 @@ describe("Directive", function () {
             assert.equal(el.text(), "Dziś Ruben spotyka się z Ernest przez 22 minuty.");
         });
     });
+
+    describe("Passthrough native HTML translate attribute", function () {
+        it("Should ignore translate='no' attribute", function () {
+            catalog.setCurrentLanguage("nl");
+            var el = $compile("<div><h1 translate='no'>Hello</h1></div>")($rootScope);
+            $rootScope.$digest();
+            assert.equal(el.text(), "Hello");
+            assert.equal(el.find("h1").attr("translate"), "no");
+        });
+
+        it("Should ignore translate='yes' attribute", function () {
+            catalog.setCurrentLanguage("nl");
+            var el = $compile("<div><h1 translate='yes'>Hello</h1></div>")($rootScope);
+            $rootScope.$digest();
+            assert.equal(el.text(), "Hello");
+            assert.equal(el.find("h1").attr("translate"), "yes");
+        });
+
+        it.only("Should not ignore the XHTML boolean form translate='translate'", function () {
+            catalog.setCurrentLanguage("nl");
+            var el = $compile("<div><h1 translate='translate'>Hello</h1></div>")($rootScope);
+            $rootScope.$digest();
+            assert.equal(el.text(), "Hallo");
+        });
+    });
 });