semantic-forms 5.1.11 → 5.2.0

package/docs/statics/pages/usage.html

@@ -106,6 +106,80 @@
         </dl>
       </form>
 
+      <h5>Add inline buttons</h5>
+
+      <p>Include a button or input with the type "submit" in the <code><!--#<dd>--></code> element to place it next to the input:</p>
+
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms" method="post">
+  <dl>
+    <dt><label for="email">Email address</label></dt>
+    <dd>
+      <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+      <button type="submit">Sign up</button>
+    </dd>
+  </dl>
+</form>
+</escape></code></pre>
+      
+      <form class="semanticForms" method="post">
+        <dl>
+          <dt><label for="email">Email address</label></dt>
+          <dd>
+            <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+            <button type="submit">Sign up!</button>
+          </dd>
+        </dl>
+      </form>
+
+      <h5>Add custom keyboard shortcuts</h5>
+
+      <p>Add keyboard shortcuts on specific inputs to focus them by adding a <code>data-focus-key</code> attribute and optional <code>data-focus-modifier</code> attribute.</p>
+
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms" method="post">
+  <dl>
+    <dt><label for="focus-1">Focus me!</label></dt>
+    <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+
+    <!-- change the modifier -->
+    <dt><label for="focus-2">Focus me!</label></dt>
+    <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+
+    <!-- specify modifier by OS -->
+    <dt><label for="focus-2">Focus me!</label></dt>
+    <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-mac="cmd"></dd>
+  </dl>
+</form>
+</escape></code></pre>
+      
+      <form class="semanticForms" method="post">
+        <dl>
+          <dt><label for="focus-1">Focus me!</label></dt>
+          <dd><input id="focus-1" name="focus-1" type="text" data-focus-key="Y"></dd>
+      
+          <!-- change the modifier -->
+          <dt><label for="focus-2">Focus me!</label></dt>
+          <dd><input id="focus-2" name="focus-2" type="text" data-focus-key="Y" data-focus-modifier="alt"></dd>
+      
+          <!-- specify modifier by OS -->
+          <dt><label for="focus-3">Focus me!</label></dt>
+          <dd><input id="focus-3" name="focus-3" type="text" data-focus-key="Z" data-focus-modifier-win="alt" data-focus-modifier-linux="meta" data-focus-modifier-max="cmd"></dd>
+        </dl>
+      </form>
+
+      <ul>
+        <li><p>The focus key should be a single character, and is not case-sensitive. If multiple characters are detected, only the first one will be used. Special characters (!, @, #, etc.) will require <kbd>Shift</kbd> to be pressed with the keyboard shortcut.</p></li>
+        <li>
+          <p>The modifier key value may be "metactrl," "ctrl," "cmd," "meta," or "alt." The default value is "metactrl" and will automatically be applied if the <code>data-focus-modifier</code> attribute is not present.</p>
+          <ul>
+            <li>Some combinations are unable to be used due to conflicts with browser and OS keyboard shortcuts. See <a href="https://rooseveltframework.org/docs/semantic-forms/latest/reservedKeyboardShortcuts">reserved keyboard shortcuts</a> for a full overview.</li>
+            <li><p>OS-specific modifier keys can be set with <code>data-focus-modifier-win</code> (Windows), <code>data-focus-modifier-linux</code> (Linux) and <code>data-focus-modifier-mac</code> (Mac).</p></li>
+            <li><p>Due to a limited range of available shortcuts, the "Start" (win) key on Windows will be replaced with "Ctrl."</p></li>
+          </ul>
+        </li>
+      </ul>
+
       <h5 id="custominputfields">Customizing input fields</h5>
 
       <p>By default, input fields will display an X icon to clear the text and password fields will also display a show/hide toggle for displaying the password in plain text. You can customize this behavior as follows:</p>
@@ -121,6 +195,13 @@
             <li>Note that checkboxes and radios should have a <code>title</code> attribute on the label instead of the inputs.</li>
           </ul>
         </li>
+        <li><p>Allow fixed-width inputs to grow/shrink to their longest content by applying a <code>data-max-content</code> attribute to the input.</p></li>
+        <li>
+          <p>Create a one-line text input that grows in height by applying a <code>data-auto-grow</code> attribute to a <code>textarea</code> or <code>input</code> (with type "text") element.</p>
+          <ul>
+            <li>Note that pressing <kbd>Enter</kbd> with this attribute will attempt to submit the form. Use <kbd>Shift + Enter</kbd> to add new lines.</li>
+          </ul>
+        </li>
       </ul>
 
       <p>You can also disable float labels on a per-field basis with the <code>no-float-label</code> class:</p>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.11",
+  "version": "5.2.0",
   "files": [
     "dist",
     "semanticForms.scss",
@@ -21,8 +21,8 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@playwright/test": "1.56.0",
-    "eslint": "9.37.0",
+    "@playwright/test": "1.56.1",
+    "eslint": "9.38.0",
     "eslint-plugin-html": "8.1.3",
     "express": "5.1.0",
     "nodemon": "3.1.10",

package/semanticForms.js

@@ -7,13 +7,88 @@ const semanticForms = () => {
 
   const passwordShow = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>'
   const passwordHide = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>'
-  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;margin-top:1px;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
+  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
 
   const nodeNameLookup = ['TEXTAREA', 'SELECT']
   const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']
+  const keyboardShortcuts = []
+
+  // custom keyboard shortcut listener
+  document.addEventListener('keydown', (e) => {
+    const specialCharMap = {
+      Minus: '-',
+      Equal: '=',
+      BracketLeft: '[',
+      BracketRight: ']',
+      Backslash: '\\',
+      Semicolon: ';',
+      Quote: '\'',
+      Comma: ',',
+      Period: '.',
+      Slash: '/',
+      Backquote: '`'
+    }
+
+    const shiftSpecialCharMap = {
+      1: '!',
+      2: '@',
+      3: '#',
+      4: '$',
+      5: '%',
+      6: '^',
+      7: '&',
+      8: '*',
+      9: '(',
+      0: ')',
+      Minus: '_',
+      Equal: '+',
+      BracketLeft: '{',
+      BracketRight: '}',
+      Backslash: '|',
+      Semicolon: ':',
+      Quote: '"',
+      Comma: '<',
+      Period: '>',
+      Slash: '?',
+      Backquote: '~'
+    }
+
+    const shortcut = keyboardShortcuts.find(shortcut => {
+      let matchesKey = false
+      if (e.altKey && !e.shiftKey) {
+        // mac adjusts the key value if altKey is pressed
+        matchesKey = 'Key' + shortcut.key.toUpperCase() === e.code ||
+          'Digit' + shortcut.key.toUpperCase() === e.code ||
+          shortcut.key === e.key ||
+          specialCharMap[e.code] === shortcut.key
+      } else if (e.shiftKey) {
+        // check shift special character map
+        const code = e.code.replace(/Key|Digit/, '')
+        matchesKey = (shiftSpecialCharMap[code] || shiftSpecialCharMap[e.key]) &&
+          (shiftSpecialCharMap[code] === shortcut.key || shiftSpecialCharMap[e.key] === shortcut.key)
+      } else {
+        matchesKey = shortcut.key.toUpperCase() === e.key.toUpperCase()
+      }
+      if (!matchesKey) return false
+
+      let matchesModifier
+      if (shortcut.modifier) {
+        if (shortcut.modifier === shortcut.defaultModifier) matchesModifier = shortcut.os === 'windows' || shortcut.os === 'linux' ? e.ctrlKey : e.metaKey
+        if (shortcut.modifier === 'meta') matchesModifier = e.metaKey
+        if (shortcut.modifier === 'alt') matchesModifier = e.altKey
+        if (shortcut.modifier === 'ctrl') matchesModifier = e.ctrlKey
+      }
+      return matchesModifier
+    })
+
+    if (shortcut) {
+      e.preventDefault()
+      shortcut.input.focus()
+    }
+  })
 
   // progressively enhance form elements that have the semanticForms class
-  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive)')
+  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive), table.semanticForms:not(.semanticFormsActive)')
 
   for (const form of forms) {
     form.classList.add('semanticFormsActive')
@@ -21,7 +96,7 @@ const semanticForms = () => {
 
     // update each input in the semantic form
     const inputs = Array.from(form.querySelectorAll('input, textarea, select'))
-    for (const input of inputs) {
+    for (let input of inputs) {
       // ignore input if it has previously been formatted
       if (input.classList.contains('semanticform') || !input.id) continue
 
@@ -46,6 +121,9 @@ const semanticForms = () => {
 
         // #region create labels
 
+        const newLabel = document.createElement('label')
+        newLabel.className = 'floatLabelFormAnimatedLabel'
+
         if (type === 'checkbox' || type === 'radio') {
           // recursively find <dd> element
           let dd = input.parentNode
@@ -57,9 +135,6 @@ const semanticForms = () => {
           }
 
           if (dd.firstChild.nodeName !== 'LABEL') {
-            const newLabel = document.createElement('label')
-            newLabel.className = 'floatLabelFormAnimatedLabel'
-
             if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {
               newLabel.setAttribute('for', input.id)
               input.parentNode.classList.add('singleCheckbox')
@@ -100,10 +175,7 @@ const semanticForms = () => {
           div.append(label.closest('dt'), dd)
           dl.append(div)
         } else {
-          const newLabel = document.createElement('label')
           newLabel.setAttribute('for', input.id)
-          newLabel.className = 'floatLabelFormAnimatedLabel'
-
           newLabel.innerHTML = label.innerHTML
 
           if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {
@@ -122,7 +194,121 @@ const semanticForms = () => {
         }
         // #endregion
 
-        // standard inputs
+        // #region keyboard shortcuts
+        if (input.getAttribute('data-focus-key') !== null) {
+          function handleKeyboardShortcut () {
+            const os = getOS()
+            // this is the custom keyword for meta on linux/mac, ctrl on windows
+            const defaultModifier = 'metactrl'
+
+            // get focus key value
+            let focusKey = input.getAttribute('data-focus-key')
+            if (focusKey.length > 1) {
+              console.error(`Provided focus key "${focusKey}" is more than one character. Using first character only.`)
+              focusKey = focusKey.toString()[0]
+            }
+
+            // get focus modifier value
+            let modifierSymbol
+            let modifierKey = defaultModifier
+            const modifierAttr = {
+              default: input.getAttribute('data-focus-modifier') || defaultModifier,
+              linux: input.getAttribute('data-focus-modifier-linux'),
+              mac: input.getAttribute('data-focus-modifier-mac'),
+              windows: input.getAttribute('data-focus-modifier-win')
+            }
+            if (os && modifierAttr[os]) {
+              // a specific modifier key has been set by the user
+              modifierKey = modifierAttr[os]
+            } else {
+              modifierKey = modifierAttr.default
+            }
+
+            // validate passed in modifier
+            const recognizedModifiers = ['ctrl', 'alt', 'opt', 'meta', 'cmd', defaultModifier]
+            if (!recognizedModifiers.includes(modifierKey)) {
+              console.error(`Received an unrecognized modifier, "${modifierKey}," defaulting to "${defaultModifier}."`, input)
+              modifierKey = defaultModifier
+            }
+
+            // retrieve modifier symbol
+            if (['alt', 'opt'].includes(modifierKey)) {
+              modifierSymbol = os === 'mac' ? '⌥' : '⎇'
+            } else if (['meta', 'win', 'cmd'].includes(modifierKey) || (modifierKey === defaultModifier && os === 'mac')) {
+              if (os === 'mac') {
+                modifierSymbol = '⌘'
+              } else if (os === 'linux') {
+                modifierSymbol = '◆'
+              } else {
+                modifierSymbol = '⊞'
+              }
+            } else if (modifierKey === 'ctrl' || (modifierKey === defaultModifier && (os === 'windows' || os === 'linux'))) {
+              if (os === 'mac') {
+                modifierSymbol = '⌃'
+              } else {
+                modifierSymbol = 'Ctrl'
+              }
+            }
+
+            // add the shortcut to the cached array, if not a duplicate
+            if (keyboardShortcuts.some(shortcut => shortcut.key === focusKey && shortcut.modifier === modifierKey)) {
+              console.error(`Duplicate keyboard shortcut "${modifierKey} + ${focusKey}" detected. Only the first input will be focusable using this keyboard shortcut.`, input)
+            } else {
+              keyboardShortcuts.push({
+                key: focusKey,
+                modifier: modifierKey,
+                input,
+                os,
+                defaultModifier
+              })
+            }
+
+            // set the shortcut indicator/title
+            if (input.nodeName === 'TEXTAREA' || input.type === 'text' || input.type === 'number') {
+              // create focus indicator for valid inputs
+              const indicator = document.createElement('span')
+              indicator.classList.add('focus-key')
+              indicator.innerHTML = `<kbd>${modifierSymbol} ${focusKey.toUpperCase()}</kbd>`
+              insertAfter(indicator, newLabel)
+            } else {
+              // update the input title
+              if (input.getAttribute('title')) {
+                input.setAttribute('title', input.getAttribute('title') + ` (${modifierSymbol} + ${focusKey})`)
+              } else {
+                input.setAttribute('title', `Focus with ${modifierSymbol} + ${focusKey}`)
+              }
+            }
+          }
+
+          // placed in a function so that it may exit while still completing other semantic-form enhancements
+          handleKeyboardShortcut()
+        }
+        // #endregion
+
+        // #region standard inputs
+        // check for auto-grow attribute on textareas
+        if (input.getAttribute('data-auto-grow') !== null) {
+          // progressively enhance inputs into textareas
+          if (input.nodeName === 'INPUT' && input.type === 'text') {
+            const newInput = document.createElement('textarea')
+            newInput.id = input.id
+            newInput.class = input.class
+            newInput.innerText = input.value
+            newInput.setAttribute('data-auto-grow', '')
+            input.replaceWith(newInput)
+            input = newInput
+          }
+
+          if (input.nodeName === 'TEXTAREA') {
+            // when pressing enter while this input is focused, we want to submit
+            input.addEventListener('keypress', (e) => {
+              if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
+              e.preventDefault()
+              form.requestSubmit()
+            })
+          }
+        }
+
         if (type !== 'checkbox' && type !== 'radio') {
           if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')
 
@@ -139,7 +325,7 @@ const semanticForms = () => {
             continue
           }
 
-          // #region clear button
+          // #region input clear button
           if (input.nodeName !== 'SELECT' && type !== 'range') {
             const clearBtn = document.createElement('button')
             clearBtn.type = 'button'
@@ -172,12 +358,29 @@ const semanticForms = () => {
             div.classList.add(match)
           }
 
+          // check for max-content attribute
+          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
+          if (input.getAttribute('data-max-content') !== null) {
+            if (!('fieldSizing' in document.createElement('input').style)) {
+              const adjustWidth = () => {
+                const value = input.value !== '' ? input.value : input.placeholder
+                const width = value.length * 8 + 40
+                input.style.width = width + 'px'
+                input.style.maxWidth = '100%'
+                div.style.width = width + 'px'
+              }
+              adjustWidth()
+              input.addEventListener('input', adjustWidth)
+            }
+          }
+
           div.append(dt, dd)
           dl.append(div)
 
           // determine visibility of newly created <div>
           if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'
         }
+        // #endregion
 
         // handle file input clear btn, cannot be handled with CSS
         if (type === 'file') {
@@ -301,6 +504,22 @@ const semanticForms = () => {
             input.dispatchEvent(new Event('input', { bubbles: true }))
           }
 
+          // progressively enhance textarea for Firefox and Safari
+          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
+          if (input.getAttribute('data-auto-grow') !== null) {
+            const adjustHeight = () => {
+              if (input.value.length) {
+                input.style.height = input.scrollHeight + 'px'
+              } else {
+                input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+              }
+            }
+
+            // set initial height to semantic-forms CSS variable
+            input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+            input.addEventListener('input', adjustHeight)
+          }
+
           // shifts the clear button to the right if a scrollbar is present
           const shiftClearBtn = () => {
             const clearBtn = input.parentElement?.querySelector('button.clear')
@@ -324,6 +543,25 @@ const semanticForms = () => {
     else referenceNode.parentNode.appendChild(newNode)
   }
 
+  /**
+   * Uses the navigator to best determine the clients operating system.
+   * @returns Operating system string (`mac`, `windows`, `linux`)
+   */
+  function getOS () {
+    const userAgent = window.navigator.userAgent
+    const platform = window.navigator.platform
+    let os = null
+
+    if (platform.includes('Win')) {
+      os = 'windows'
+    } else if (platform.includes('Mac') || /iPhone|iPad|iPod/.test(userAgent)) {
+      os = 'mac'
+    } else if (platform.includes('Linux') || /Android/.test(userAgent)) {
+      os = 'linux'
+    }
+    return os
+  }
+
   // handle undo/redo
   let lastFocusedInput
   let lastClearFieldPressed