@xiee/utils 1.2.4 → 1.2.7

package/README.md

@@ -70,6 +70,13 @@ style the notes or hide/show them as you wish.
 Add anchor links to all section headers (e.g., `<h2>`) that have nonempty `id`
 attributes.
 
+## key-buttons.js
+
+Find keyboard keys in `<code></code>` and convert the tag to `<kbd></kbd>`,
+e.g., convert `<code>Ctrl + C</code>` to `<kbd>Ctrl</kbd>` + `<kbd>C</kbd>`.
+With `key-buttons.css`, the keys will be styled as boxes with shadows like
+buttons.
+
 ## load-highlight.js
 
 Disable highlight.js's auto language detection, and then apply highlighting.

package/css/key-buttons.css

@@ -0,0 +1,14 @@
+kbd {
+  border: 2px solid #ccc;
+  box-shadow: 2px 2px #999;
+  display: inline-block;
+  padding: 0 5px;
+  border-radius: 0.25em;
+  min-width: 1.5em;
+  text-align: center;
+}
+kbd:hover {
+  position: relative;
+  top: 2px;
+  left: 2px;
+}

package/js/external-link.js

@@ -1,8 +1,13 @@
-(function() {
-  var links = document.getElementsByTagName('a');
-  for (var i = 0; i < links.length; i++) {
-    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
-      links[i].target = '_blank';
+(function(d) {
+  const r = /^(https?:)?\/\//;
+  d.querySelectorAll('a').forEach(a => {
+    // add _blank target to external links
+    if (r.test(a.getAttribute('href'))) {
+      a.target = '_blank';
     }
-  }
-})();
+    // shorten bare links
+    if (a.childElementCount === 0) {
+      a.innerText = a.innerText.replace(r, '').replace(/#.*$/, '');
+    }
+  })
+})(document);

package/js/key-buttons.js

@@ -0,0 +1,25 @@
+(function(d) {
+  // 1. individual keys; 2. modifiers; 3. normal keys
+  const k1 = 'Esc|Tab|Enter|PageUp|PageDown|Up|Down|Left|Right|' +
+              Array(12).fill().map((v, i) => 'F' + (i + 1)).join('|'),
+        k2 = 'Ctrl|Control|Shift|Alt|Cmd|Command|fn',
+        k3 = '[a-zA-Z0-9]|Click',
+        r1 = new RegExp('^(' + k1 + '|' + k2 + ')$'),
+        r2 = new RegExp('^(' + k2 + ') [/+] '),
+        r3 = new RegExp('^(' + [k1, k2, k3].join('|') + ')( [/+] )(.*)');
+  d.querySelectorAll(':not(pre) > code').forEach(el => {
+    if (el.childElementCount > 0) return;
+    let t = el.innerText;
+    if (r1.test(t)) {
+      el.outerHTML = '<kbd>' + t + '</kbd>';
+      return;
+    }
+    if (!r2.test(t)) return;
+    let t2 = ''; t += ' + ';
+    while (r3.test(t)) {
+      t2 += t.replace(r3, '<kbd>$1</kbd>$2');
+      t = t.replace(r3, '$3');
+    }
+    if (t === '') el.outerHTML = t2.replace(/ \+ $/, '');
+  });
+})(document);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiee/utils",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"