merge version 2.7.0

mnater · Dec 1, 2018 · 32713e5 · 32713e5
2 parents 2c241fd + 1d44f9d
commit 32713e5
Show file tree

Hide file tree

Showing 19 changed files with 625 additions and 232 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Version History
 
+## Version 2.6.0 (Dec 01, 2018)
+* improve hiding of elements while hyphenating (issue #40)
+* fix several issues with lang-fallbacks (issue #41 and #44)
+* new feature: use selectors instead of classnames (issue #42)
+* updated german patterns (issue #45)
+
 ## Version 2.5.1 (Nov 04, 2018)
 * remove "Church Slavonic" patterns (see #38)
 * fix issue #39

diff --git a/Hyphenopoly.js b/Hyphenopoly.js
diff --git a/Hyphenopoly_Loader.js b/Hyphenopoly_Loader.js
@@ -1,5 +1,5 @@
 /**
- * @license Hyphenopoly_Loader 2.5.1 - client side hyphenation
+ * @license Hyphenopoly_Loader 2.6.0 - client side hyphenation
  * ©2018  Mathias Nater, Zürich (mathiasnater at gmail dot com)
  * https://github.com/mnater/Hyphenopoly
  *
@@ -45,21 +45,77 @@
                 "patterndir": "../Hyphenopoly/patterns/"
             };
         }
+
         if (H.setup) {
-            if (!H.setup.classnames) {
-                H.setup.classnames = {"hyphenate": {}};
+            if (!H.setup.selectors) {
+                H.setup.selectors = empty();
+                H.setup.selectors[".hyphenate"] = empty();
+            }
+            if (H.setup.classnames) {
+                Object.keys(H.setup.classnames).forEach(function cn2sel(cn) {
+                    H.setup.selectors["." + cn] = H.setup.classnames[cn];
+                });
+                H.setup.classnames = null;
+                delete H.setup.classnames;
             }
             if (!H.setup.timeout) {
                 H.setup.timeout = 1000;
             }
+            if (!H.setup.hide) {
+                H.setup.hide = "all";
+            }
         } else {
             H.setup = {
-                "classnames": {"hyphenate": {}},
+                "hide": "all",
+                "selectors": {".hyphenate": {}},
                 "timeout": 1000
             };
         }
+        H.lcRequire = empty();
+        Object.keys(H.require).forEach(function copyRequire(k) {
+            H.lcRequire[k.toLowerCase()] = H.require[k];
+        });
+        if (H.fallbacks) {
+            H.lcFallbacks = empty();
+            Object.keys(H.fallbacks).forEach(function copyFallbacks(k) {
+                H.lcFallbacks[k.toLowerCase()] = H.fallbacks[k].toLowerCase();
+            });
+        }
     }());
 
+    H.toggle = function toggle(state) {
+        if (state === "on") {
+            const stylesNode = d.getElementById("H9Y_Styles");
+            if (stylesNode) {
+                stylesNode.parentNode.removeChild(stylesNode);
+            }
+        } else {
+            const sc = d.createElement("style");
+            sc.id = "H9Y_Styles";
+            switch (H.setup.hide) {
+            case "all":
+                sc.innerHTML = "html {visibility: hidden !important}";
+                break;
+            case "element":
+                Object.keys(H.setup.selectors).
+                    forEach(function eachSelector(sel) {
+                        sc.innerHTML += sel + " {visibility: hidden !important}\n";
+                    });
+
+                break;
+            case "text":
+                Object.keys(H.setup.selectors).
+                    forEach(function eachSelector(sel) {
+                        sc.innerHTML += sel + " {color: transparent !important}\n";
+                    });
+                break;
+            default:
+                sc.innerHTML = "";
+            }
+            d.getElementsByTagName("head")[0].appendChild(sc);
+        }
+    };
+
     (function setupEvents() {
         // Events known to the system
         const definedEvents = empty();
@@ -90,7 +146,7 @@
         define(
             "timeout",
             function def(e) {
-                d.documentElement.style.visibility = "visible";
+                H.toggle("on");
                 window.console.info(
                     "Hyphenopolys 'FOUHC'-prevention timed out after %dms",
                     e.delay
@@ -307,8 +363,8 @@
          * @returns {undefined}
          */
         function fetchBinary(p, f, n, m) {
-            if (!loadedBins[f]) {
-                loadedBins[f] = true;
+            if (!loadedBins[n]) {
+                loadedBins[n] = true;
                 window.fetch(p + f).then(
                     function resolve(response) {
                         if (response.ok) {
@@ -337,8 +393,8 @@
          * @returns {undefined}
          */
         function requestBinary(p, f, n, m) {
-            if (!loadedBins[f]) {
-                loadedBins[f] = true;
+            if (!loadedBins[n]) {
+                loadedBins[n] = true;
                 const xhr = new XMLHttpRequest();
                 xhr.open("GET", p + f);
                 xhr.onload = function onload() {
@@ -349,7 +405,6 @@
                 xhr.send();
             }
         }
-
         if (H.clientFeat.wasm) {
             fetchBinary(path, fne, name, msg);
         } else {
@@ -411,8 +466,8 @@
      */
     function loadRessources(lang) {
         let filename = lang + ".hpb";
-        if (H.fallbacks && H.fallbacks[lang]) {
-            filename = H.fallbacks[lang] + ".hpb";
+        if (H.lcFallbacks && H.lcFallbacks[lang]) {
+            filename = H.lcFallbacks[lang] + ".hpb";
         }
         if (!H.binaries) {
             H.binaries = empty();
@@ -472,7 +527,7 @@
                 testDiv.lang = lang;
                 testDiv.id = lang;
                 testDiv.style.cssText = css;
-                testDiv.appendChild(d.createTextNode(H.require[lang]));
+                testDiv.appendChild(d.createTextNode(H.lcRequire[lang]));
                 fakeBody.appendChild(testDiv);
             }
 
@@ -524,7 +579,7 @@
          * Hyphenopoly.hyphenators.<language>
          *
          * Hyphenopoly.hyphenators.<language> is a Promise that fullfills
-         * to hyphenate(lang, cn, entity) as soon as the ressources are loaded
+         * to hyphenate(entity, sel) as soon as the ressources are loaded
          * and the engine is ready.
          * If Promises aren't supported (e.g. IE11) a error message is produced.
          *
@@ -544,7 +599,6 @@
                             }
                         }, true);
                         H.events.addListener("error", function handler(e) {
-                            e.preventDefault();
                             if (e.key === lang || e.key === "hyphenEngine") {
                                 rj(e.msg);
                             }
@@ -568,8 +622,8 @@
             }
         }
 
-        Object.keys(H.require).forEach(function doReqLangs(lang) {
-            if (H.require[lang] === "FORCEHYPHENOPOLY") {
+        Object.keys(H.lcRequire).forEach(function doReqLangs(lang) {
+            if (H.lcRequire[lang] === "FORCEHYPHENOPOLY") {
                 H.clientFeat.polyfill = true;
                 H.clientFeat.langs[lang] = "H9Y";
                 loadRessources(lang);
@@ -586,8 +640,8 @@
         });
         const testContainer = tester.appendTests(d.documentElement);
         if (testContainer !== null) {
-            Object.keys(H.require).forEach(function checkReqLangs(lang) {
-                if (H.require[lang] !== "FORCEHYPHENOPOLY") {
+            Object.keys(H.lcRequire).forEach(function checkReqLangs(lang) {
+                if (H.lcRequire[lang] !== "FORCEHYPHENOPOLY") {
                     const el = d.getElementById(lang);
                     if (checkCSSHyphensSupport(el) && el.offsetHeight > 12) {
                         H.clientFeat.langs[lang] = "CSS";
@@ -605,15 +659,21 @@
 
     (function run() {
         if (H.clientFeat.polyfill) {
-            d.documentElement.style.visibility = "hidden";
-
-            H.setup.timeOutHandler = window.setTimeout(function timedOut() {
-                d.documentElement.style.visibility = "visible";
-                H.events.dispatch("timeout", {"delay": H.setup.timeout});
-            }, H.setup.timeout);
+            if (H.setup.hide === "all") {
+                H.toggle("off");
+            }
+            if (H.setup.hide !== "none") {
+                H.setup.timeOutHandler = window.setTimeout(function timedOut() {
+                    H.toggle("on");
+                    H.events.dispatch("timeout", {"delay": H.setup.timeout});
+                }, H.setup.timeout);
+            }
             d.addEventListener(
                 "DOMContentLoaded",
                 function DCL() {
+                    if (H.setup.hide !== "none" && H.setup.hide !== "all") {
+                        H.toggle("off");
+                    }
                     H.events.dispatch(
                         "contentLoaded",
                         {"msg": ["contentLoaded"]}

diff --git a/README.md b/README.md
@@ -4,11 +4,11 @@
 Hyphenopoly.js is a __JavaScript-polyfill for hyphenation in HTML__: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages and it is a __Node.js-module__.
 
 The package consists of the following parts:
-- _Hyphenopoly_Loader.js_ (~13KB unpacked, ~2.5KB minified and compressed): feature-checks the client and loads other resources if necessary.
-- _Hyphenopoly.js_ (~30KB unpacked, ~4KB minified and compressed): does the whole DOM-foo and wraps (w)asm.
+- _Hyphenopoly_Loader.js_ (~24KB unpacked, ~3KB minified and compressed): feature-checks the client and loads other resources if necessary.
+- _Hyphenopoly.js_ (~41KB unpacked, ~4KB minified and compressed): does the whole DOM-foo and wraps (w)asm.
 - _hyphenEngine.wasm_ (~1KB uncompressed): wasm code for creating pattern trie and finding hyphenation points.
-- _hyphenEngine.asm.js_ (~7KB uncompressed, ~1KB minified and compressed): fallback for clients that don't support wasm.
-- _pattern.hpb_ (sizes differ! e.g. en-us.hpb: ~29KB): space saving binary format of the hyphenation patterns (including their license).
+- _hyphenEngine.asm.js_ (~10KB uncompressed, ~1KB minified and compressed): fallback for clients that don't support wasm.
+- _pattern.hpb_ (sizes differ! e.g. en-us.hpb: ~27KB uncompressed, ~16KB compressed): space saving binary format of the hyphenation patterns (including their license).
 - _hyphenopoly.module.js_: the node module
 
 # Usage (Browser)
@@ -31,8 +31,8 @@ Also, don't forget to enable CSS hyphenation.
                 "en-us": "Supercalifragilisticexpialidocious"
             },
             setup: {
-                classnames: {
-                    "container": {}
+                selectors: {
+                    ".container": {}
                 }
             }
         };
@@ -59,9 +59,10 @@ Also, don't forget to enable CSS hyphenation.
     <body>
         <h1>Example 1</h1>
         <div class="container">
-        <p lang="la">Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p>
-        <p lang="en-us">For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.</p>
-        <p lang="de">Aus diesem Grund übertreffen auch die Helvetier die übrigen Gallier an Tapferkeit, weil sie sich in fast täglichen Gefechten mit den Germanen messen, wobei sie diese entweder von ihrem Gebiet fernhalten oder selbst in deren Gebiet kämpfen.</p>
+            <p lang="la">Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p>
+            <p lang="en-us">For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.</p>
+            <p lang="de">Aus diesem Grund übertreffen auch die Helvetier die übrigen Gallier an Tapferkeit, weil sie sich in fast täglichen Gefechten mit den Germanen messen, wobei sie diese entweder von ihrem Gebiet fernhalten oder selbst in deren Gebiet kämpfen.</p>
+        </div>
     </body>
 </html>
 ```
@@ -76,7 +77,7 @@ Hyphenopoly_Loader.js needs some information to run. This information is provide
 ### require
 The `Hyphenopoly` object must have exactly one property called `require` which itself is an object containing at least one nameValuePair where the name is a language code string (Some patterns are region-specific. See the patterns directory for supported languages. E.g. just using `en` won't work, use either `en-us`or `en-gb`) and the value is a long word string in that language (preferably more than 12 characters long).
 
-Hyphenator_Loader.js will feature test the client (aka browser, aka user agent) for CSS-hyphens support for the given languages with the given words respectively. In the example above it will test if the client supports CSS-hyphenation for latin. If your page contains more than just one language just add more lines.
+Hyphenator_Loader.js will feature test the client (aka browser, aka user agent) for CSS-hyphens support for the given languages with the given words respectively. In the example above it will test if the client supports CSS-hyphenation for latin, german and us-english.
 
 If you want to force the usage of Hyphenopoly.js for a language (e.g. for testing purposes) write `"FORCEHYPHENOPOLY"` instead of the long word.
 

diff --git a/example1.html b/example1.html
@@ -15,8 +15,8 @@
                 maindir: "./"
             },
             setup: {
-                classnames: {
-                    "container": {
+                selectors: {
+                    ".container": {
                     }
                 }
             }
@@ -44,8 +44,9 @@
     <body>
         <h1>Example 1</h1>
         <div class="container">
-        <p lang="la">Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p>
-        <p lang="en-us">For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.</p>
-        <p lang="de">Aus diesem Grund übertreffen auch die Helvetier die übrigen Gallier an Tapferkeit, weil sie sich in fast täglichen Gefechten mit den Germanen messen, wobei sie diese entweder von ihrem Gebiet fernhalten oder selbst in deren Gebiet kämpfen.</p>
+            <p lang="la">Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p>
+            <p lang="en-us">For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.</p>
+            <p lang="de">Aus diesem Grund übertreffen auch die Helvetier die übrigen Gallier an Tapferkeit, weil sie sich in fast täglichen Gefechten mit den Germanen messen, wobei sie diese entweder von ihrem Gebiet fernhalten oder selbst in deren Gebiet kämpfen.</p>
+        </div>
     </body>
-</html>
+</html>
diff --git a/hyphenEngine.asm.js b/hyphenEngine.asm.js
@@ -1,5 +1,5 @@
 /**
- * @license hyphenEngine.asm.js 2.5.1 - client side hyphenation for webbrowsers
+ * @license hyphenEngine.asm.js 2.6.0 - client side hyphenation for webbrowsers
  * ©2018  Mathias Nater, Zürich (mathiasnater at gmail dot com)
  * https://github.com/mnater/Hyphenopoly
  *

diff --git a/hyphenopoly.module.js b/hyphenopoly.module.js
@@ -1,5 +1,5 @@
 /**
- * @license Hyphenopoly.module.js 2.5.1 - hyphenation for node
+ * @license Hyphenopoly.module.js 2.6.0 - hyphenation for node
  * ©2018  Mathias Nater, Zürich (mathiasnater at gmail dot com)
  * https://github.com/mnater/Hyphenopoly
  *

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hyphenopoly",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Hyphenation for node and Polyfill for client-side hyphenation.",
   "keywords": [
     "hyphenation",
@@ -43,9 +43,9 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "eslint": "^5.6.1",
-    "tap": "^12.0.1",
-    "terser": "^3.9.2"
+    "eslint": "^5.9.0",
+    "tap": "^12.1.0",
+    "terser": "^3.10.13"
   },
   "eslintConfig": {
     "parserOptions": {

diff --git a/patterns/de.hpb b/patterns/de.hpb
diff --git a/testsuite/test10.html b/testsuite/test10.html
@@ -13,6 +13,7 @@
                 patterndir: "../patterns/"
             },
             setup: {
+                hide: "element",
                 classnames: {
                     "class1": {
                         hyphen: "·"
@@ -35,8 +36,8 @@
             var ref = "";
             var result = true;
             while (i <= tests) {
-                test = document.getElementById("test" + i).innerText;
-                ref = document.getElementById("ref" + i).innerText;
+                test = document.getElementById("test" + i).textContent;
+                ref = document.getElementById("ref" + i).textContent;
                 if (test === ref) {
                     document.getElementById("result").innerHTML += "<p style=\"background-color: #d6ffd6\">" + i + " passed</p>";
                     result = result && true;
@@ -98,7 +99,7 @@ <h1>Test 010</h1>
         <hr>
         <h2>1: class1</h2>
         <p id="test1" class="test class1" lang="de">Silbentrennung: <span class="class2 italic">Die Worttrennung, auch Silbentrennung genannt, bezeichnet in der Orthographie die Art und Weise, wie die Wörter insbesondere am Zeilenende getrennt werden können.</span></p>
-        <p id="ref1" class="ref" lang="en-us">Sil·ben·tren·nung: <span class="italic">Die Wort&shy;tren&shy;nung, auch Sil&shy;ben&shy;tren&shy;nung ge&shy;nannt, be&shy;zeich&shy;net in der Or&shy;tho&shy;gra&shy;phie die Art und Weise, wie die Wör&shy;ter ins&shy;be&shy;son&shy;de&shy;re am Zei&shy;len&shy;en&shy;de ge&shy;trennt wer&shy;den kön&shy;nen.</span></p>
+        <p id="ref1" class="ref" lang="de">Sil·ben·tren·nung: <span class="italic">Die Wort&shy;tren&shy;nung, auch Sil&shy;ben&shy;tren&shy;nung ge&shy;nannt, be&shy;zeich&shy;net in der Or&shy;tho&shy;gra&shy;phie die Art und Weise, wie die Wör&shy;ter ins&shy;be&shy;son&shy;de&shy;re am Zei&shy;len&shy;en&shy;de ge&shy;trennt wer&shy;den kön&shy;nen.</span></p>
         <hr>
         <textarea id="pastebin" placeholder="paste here" cols="40"></textarea>
         <div><span class="test">Test</span> <span class="ref">Ref</span></div>

diff --git a/testsuite/test12.html b/testsuite/test12.html
@@ -14,9 +14,9 @@
                 },
                 setup: {
                     dontHyphenate: {
-                        code: true,
                         kbd: false,
-                        button: false
+                        button: false,
+                        span: true
                     },
                     classnames: {
                         "hyphenate": {
@@ -94,8 +94,8 @@ <h1>Test 012</h1>
         <p id="desc">Check dontHyphenate-Elements</p>
         <div id="result"></div>
         <hr>
-        <p id="test1" class="test hyphenate" lang="de">Silbentrennung <code>Silbentrennung</code> <kbd>Silbentrennung</kbd> <button class="h9n_btn">Silbentrennung</button></p>
-        <p id="ref1" class="ref" lang="de">Sil•ben•tren•nung <code>Silbentrennung</code> <kbd>Sil•ben•tren•nung</kbd> <button class="h9n_btn">Sil&shy;ben&shy;tren&shy;nung</button></p>
+        <p id="test1" class="test hyphenate" lang="de">Silbentrennung <code>Silbentrennung</code> <kbd>Silbentrennung</kbd> <button class="h9n_btn">Silbentrennung</button> <span>Silbentrennung</span></p>
+        <p id="ref1" class="ref" lang="de">Sil•ben•tren•nung <code>Silbentrennung</code> <kbd>Sil•ben•tren•nung</kbd> <button class="h9n_btn">Sil&shy;ben&shy;tren&shy;nung</button> <span>Silbentrennung</span></p>
 
         <hr>
         <div><span class="test">Test</span> <span class="ref">Ref</span></div>