input-duration 2.0.11

package/docs/chrono.js.html

@@ -0,0 +1,742 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: chrono.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: chrono.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * This import of this module self-news a ChronlyHMS class, it requires import of chrono.css
+ * and the addition of a data-univHMS attibute on html (time) input tags
+ * @module ChronlyHMS Module
+ * @requires ./chrono.css
+ * @requires data-univHMS#
+ */
+
+/**
+ * Import the required css
+ */
+
+import './chrono.css'
+
+// A HH:MM:SS.mmm control that is unaffected by OSX and works on 'all' browsers.
+// ChronlyHMS requires an input element with the attribute 'data-univHMS'
+
+/**
+ * A single class plugin
+ * @class ChronlyHMS Class
+ * @property {method} checkboot() - checks ChronlyHMS presence on page through window.ChronlyFlag
+ * @property  {declaration} querySelectorAll - determines which inputs to update
+ * @property {global} globals - instantiates window.ChronlyHMS and window.ChronlyFlag
+ */
+
+
+class ChronlyHMS {
+
+  /**
+  * The contructor creates two window variables
+  * window.ChronlyHMS a global ChronlyHMS instance and
+  * window.ChronlyFlag for determining re-boot status 
+  * @constructor
+  */
+
+  constructor() {
+
+
+    this.checkBoot();
+
+
+    /**
+     * A window.ChronlyHMS instance.
+     * @global
+     */
+
+    window.ChronlyHMS = this;
+
+
+    /**
+     * A loose method (codeblock) that scans for existing ChronlyHMS html
+     * 
+     */
+
+    document.querySelectorAll(".timeCase input").forEach(item =>
+
+      item.addEventListener('keypress', function (e) {
+
+        e = e || window.event;
+        var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
+        var charStr = String.fromCharCode(charCode);
+
+        if (!charStr.match(/^[0-9]+$/))
+          e.preventDefault();
+
+      }));
+
+    // run checkboot again
+    this.checkBoot()
+
+
+  }
+
+
+
+  /**
+   * each time Chronly is newed up, the constructor uses checkBoot() to
+   * 1) check for an existing window.ChronlyFlag if there is one 
+   * 2) clear events a) named events, b) remove 
+   * 3) add events
+   * @method 
+   */
+
+  checkBoot() {
+
+    if (window.ChronlyFlag) {
+      this.reboot();
+    }
+    else {
+      this.boot();
+    }
+  }
+
+
+
+  /**
+   * used by checkBoot() and externally exposed for user
+   * @method
+   * 
+   */
+
+  boot() {
+
+    this.addHTML();
+
+    // set up event listeners
+    this.add0s();
+    this.addNumberLooping();
+    this.addArrowKeyInput();
+    this.addNumericInput();
+    this.addClicksToActivate();
+    this.nonNumericBugInHTML();
+    this.updateDivPrototype();
+
+
+    /**
+     * window.ChronlyFlag declared here
+     * @global  
+     */
+    window.ChronlyFlag = true;
+  }
+
+
+
+  /**
+  * used by checkBoot() and externally exposed for user
+  * @method
+  * @see boot()
+  */
+
+  reboot() {
+
+    // for each input in the timeCase replace it with (the original/ an) input
+
+    var elements = document.querySelectorAll('.timeCase');
+
+    elements.forEach(element => {
+
+      var replaceElement = document.createElement('input');
+
+      [...element.attributes].forEach(attr => { replaceElement.setAttribute(attr.nodeName, attr.nodeValue) });
+
+      element.parentElement.insertBefore(replaceElement, element);
+
+      element.remove();
+
+      // removes eventlisters 
+      element = ''
+
+    });
+
+    this.boot();
+
+  }
+
+
+
+  /**
+   * this removes the elements and removes their events
+   * @todo Remove next refactoring/ version
+   * @deprecated
+   */
+
+  refreshChronlyHMS() {
+
+    var chronoInputs = document.querySelectorAll('.timeCase').forEach(tc => {
+
+      tc.querySelectorAll('input').forEach(input => {
+
+        input.remove();
+        input = '';
+
+        this.addInputs(input);
+      });
+
+    });
+  }
+
+
+
+  /**
+   * removes hours display, so only minutes, seconds, and microseconds are displayed
+   * @method
+   */
+
+  noHours() {
+
+    // hide chronly hours inputs on page
+
+    document.querySelectorAll(".timeCase input.sH").forEach(el => el.style.display = 'none');
+
+
+    // hide the hours colon on page
+
+    document.querySelectorAll(".timeCase span.bds-h").forEach(el => el.style.display = 'none');
+
+  }
+
+
+
+  /**
+   * disables all chronlyHMS inputs to user, does not change their js get/set()
+   * @method
+   * @todo create an id sepcific selector method that calls this method
+   */
+
+  disableInputs() {
+
+    // disable chronly inputs on page
+
+    document.querySelectorAll(".timeCase input").forEach(el => el.disabled = 'true')
+
+  }
+
+
+
+  /**
+   * used by boot() to update inputs marked with data-univHMS
+   * @method
+   * @see boot()
+   */
+
+  addHTML() {
+
+    const univHMSinp = document.querySelectorAll("input[data-univHMS]");
+
+    univHMSinp.forEach(el => {
+      // code
+
+      var spanIn = document.createElement("div");
+
+      [...el.attributes].forEach(attr => { spanIn.setAttribute(attr.nodeName, attr.nodeValue) });
+
+      el.replaceWith(spanIn);
+
+      spanIn.classList.add('timeCase');
+
+      var template = document.createElement('template');
+
+      template.innerHTML = `
+      &lt;input type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+      &lt;span class="bds-h">:&lt;/span>
+      &lt;input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
+      &lt;span class="bds-m">:&lt;/span>
+      &lt;input type="number" class="sS D2 ts_digit" name="startSeconds" data-tp="3" min="-1" max="60" value="00">
+      &lt;span class="bds-s">.&lt;/span>
+      &lt;input type="number" class="sMS D3 ts_digit" name="startMilliSecs" data-tp="4" min="-10" max="1010" step="10" value="000">
+      &lt;div id="svgContainer">
+        &lt;svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+          focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14"
+          role="img" viewBox="0 0 448 512">
+          &lt;path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M393.9 184l22.6-22.6c4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0l-20.7 20.7c-31.1-27.5-70.4-45.9-113.8-50.8V48h28c6.6 0 12-5.4 12-12V12c0-6.6-5.4-12-12-12H172c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h28v49.4C96.4 109.3 16 197.2 16 304c0 114.9 93.1 208 208 208s208-93.1 208-208c0-44.7-14.1-86.1-38.1-120zM224 464c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160zm12-112h-24c-6.6 0-12-5.4-12-12V204c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v136c0 6.6-5.4 12-12 12z"/>
+        &lt;/svg>
+      &lt;/div>
+  `
+
+      spanIn.appendChild(template.content)
+      console.log(el);
+
+    });
+  }
+
+  /**
+   * used by refreshChronlyHMS() to add inputs without time case
+   * @method
+   * @param {element} el HTML input element
+   * @see refreshChronlyHMS() 
+   */
+
+  addInputs(el) {
+
+    var template = document.createElement('template');
+
+    template.innerHTML = `
+      &lt;input type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+      &lt;span class="bds">:&lt;/span>
+      &lt;input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
+      &lt;span class="bds">:&lt;/span>
+      &lt;input type="number" class="sS D2 ts_digit" name="startSeconds" data-tp="3" min="-1" max="60" value="00">
+      &lt;span class="bds">.&lt;/span>
+      &lt;input type="number" class="sMS D3 ts_digit" name="startMilliSecs" data-tp="4" min="-10" max="1010" step="10" value="000">
+      &lt;div id="svgContainer">
+        &lt;svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
+          focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14"
+          role="img" viewBox="0 0 448 512">
+          &lt;path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M393.9 184l22.6-22.6c4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0l-20.7 20.7c-31.1-27.5-70.4-45.9-113.8-50.8V48h28c6.6 0 12-5.4 12-12V12c0-6.6-5.4-12-12-12H172c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h28v49.4C96.4 109.3 16 197.2 16 304c0 114.9 93.1 208 208 208s208-93.1 208-208c0-44.7-14.1-86.1-38.1-120zM224 464c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160zm12-112h-24c-6.6 0-12-5.4-12-12V204c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v136c0 6.6-5.4 12-12 12z"/>
+        &lt;/svg>
+      &lt;/div>
+  `
+
+    el.appendChild(template.content)
+    console.log(el);
+
+  }
+
+
+
+  /**
+   * eventlistener that adds 0s to preface numbers less than 10 triggered by
+   * the change event of the input 
+   * @method
+   * @see boot()
+   */
+
+  add0s() {
+
+    // input for hours, minutes, seconds
+    document.querySelectorAll("div.timeCase input").forEach(i => i.addEventListener('change', function () {
+      if (!isNaN(this.value) &amp;&amp; this.value.length === 1) {
+        this.value = '0' + this.value;
+      }
+    }));
+
+    // milliseconds
+    document.querySelectorAll("input.sMS").forEach(i => i.addEventListener('change', function () {
+
+      if (!isNaN(this.value) &amp;&amp; this.value.length === 2) {
+        this.value = '0' + this.value;
+      }
+
+    }));
+
+  }
+
+
+
+  /**
+   * eventlistener that adds number looping for up and down keys triggered by
+   * the change event of the input 
+   * @method
+   * @see boot()
+   */
+
+  addNumberLooping() {
+    // Numeric Value looping (eventually this can be 'parameterised' refactored)
+    // ex. 99 uparrow to 0 hours, 59 uparrow to 0 minutes and seconds, 990 uparrow to 010, downarrow 000 milliseconds
+
+    document.querySelectorAll("input.sH").forEach(i =>
+      i.addEventListener('change', function (event) {
+
+        if (i.value == 100) {
+          i.value = '00';
+        }
+        if (i.value == -1) {
+          i.value = 99;
+        }
+
+      }));
+
+
+    document.querySelectorAll("input.sM").forEach(i =>
+      i.addEventListener('change', function (event) {
+
+        if (i.value == 60) {
+          i.value = '00';
+        }
+        if (i.value == -1) {
+          i.value = 59;
+        }
+
+      }));
+
+
+    document.querySelectorAll("input.sS").forEach(i =>
+      i.addEventListener('change', function (event) {
+
+        if (i.value == 60) {
+          i.value = '00';
+        }
+
+        if (i.value == -1) {
+          i.value = 59;
+        }
+
+      }));
+
+      
+    document.querySelectorAll("input.sMS").forEach(i =>
+      i.addEventListener('change', function (event) {
+
+        if (i.value == 1000) {
+          i.value = "010";
+        }
+
+        if (i.value == -10) {
+          i.value = 990;
+        }
+
+        if (i.value == 0) {
+        }
+
+      }));
+  }
+
+
+
+  /**
+   * eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
+   * the change event of the input 
+   * @method
+   * @see boot()
+   */
+
+  addArrowKeyInput() {
+
+    // Left and Right arrow key toggle between HMSmS
+    // this depends on data-attributes ex. data-tp="1" in HTML
+
+    document.querySelectorAll("div.timeCase").forEach(d =>
+      d.addEventListener('keydown', function (event) {
+
+
+        var et = event.target;
+        var dId = d.id;
+        var tp_active;
+
+        // these help manual testing by posting to the webapge
+        var el_disp = document.querySelector("#keyHolder");
+        el_disp.innerHTML = "None";
+
+        switch (true) {
+
+          case event.key == "ArrowLeft":
+            tp_active = document.activeElement.dataset.tp;
+
+            if (tp_active >= 2) {
+              tp_active--;
+            }
+
+            document.querySelector('#' + dId).querySelector("[data-tp='" + tp_active + "']").focus();
+            setTimeout(function () { document.querySelector('#' + dId).querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
+            el_disp.innerHTML = event.key;
+
+            break;
+
+          case event.key == "ArrowRight":
+            tp_active = document.activeElement.dataset.tp;
+
+            if (tp_active &lt;= 3) {
+              tp_active++;
+            }
+
+            document.querySelector('#' + dId).querySelector("[data-tp='" + tp_active + "']").focus();
+            setTimeout(function () { document.querySelector('#' + dId).querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
+            el_disp.innerHTML = event.key;
+
+            break;
+
+          // these keep the input selected
+          case event.key == "ArrowUp":
+            el_disp.innerHTML = event.key;
+            setTimeout(function () { document.activeElement.select(); }, 5);
+
+            break;
+
+          case event.key == "ArrowDown":
+            el_disp.innerHTML = event.key;
+
+            setTimeout(function () { document.activeElement.select(); }, 5);
+
+            break;
+
+          // this is good for testing, to determine whether a key press is detected
+          case /^([0-9]?)$/.test(event.key):
+
+            el_disp.innerHTML = event.key;
+
+            break;
+
+        }
+      }));
+  }
+
+
+
+  /**
+   * eventlistener that adds number input filtering for keys triggered by
+   * the key event of the input 
+   * @method
+   * @see boot()
+   */
+
+  addNumericInput() {
+
+    // https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
+    // Digit input 0-9  (typed in by user)
+
+    function setInputFilter(textbox, inputFilter) {
+      // this sets a listener and  immediately updates the value of the input number (note: can update this from input text, like by removing setSelectionRange )
+
+      textbox.addEventListener('keyup', function () {
+        if (/^([0-9]?)$/.test(event.key)) {
+          if (inputFilter(this.value)) {
+            this.oldValue = this.value;
+            this.oldSelectionStart = this.selectionStart;
+            this.oldSelectionEnd = this.selectionEnd;
+          } else if (this.hasOwnProperty("oldValue")) {
+            this.value = this.oldValue;
+            // this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
+          } else {
+            this.value = "";
+          }
+        }
+      });
+    }
+
+
+    // three boxes, hours or minutes and seconds (are the same) but milliseconds is different
+
+    // sH
+    document.querySelectorAll('input.sH').forEach(i => setInputFilter(i, function (value) {
+
+      var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
+
+      if (value.length === 2) {
+
+        i.parentNode.querySelector('input.sM').focus();
+        i.parentNode.querySelector('input.sM').select();
+
+      }
+
+      return newV;
+
+    }));
+
+    document.querySelectorAll('input.sM').forEach(i => setInputFilter(i, function (value) {
+
+
+      var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
+
+      if (value > 5 || value.length === 2) {
+
+        i.parentNode.querySelector('input.sS').focus();
+        i.parentNode.querySelector('input.sS').select();
+
+      }
+
+      return newV;
+
+    }));
+
+    document.querySelectorAll('input.sS').forEach(i => setInputFilter(i, function (value) {
+
+      var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
+
+      if (value > 5 || value.length === 2) {
+
+        i.parentNode.querySelector('input.sMS').focus();
+        i.parentNode.querySelector('input.sMS').select();
+
+      }
+
+      return newV;
+
+    }));
+
+
+    document.querySelectorAll('input.sMS').forEach(i => setInputFilter(i, function (value) {
+
+      var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
+
+
+      if (value.length === 3) {
+
+        i.parentNode.querySelector('input.sMS').blur();
+
+      }
+
+      return newV;
+
+    }));
+
+  }
+
+
+
+
+  /**
+   * eventlistener that adds click to activate input of values by the keyboard triggered by
+   * the click event of the input 
+   * @method
+   * @see boot()
+   */
+
+  addClicksToActivate() {
+
+    document.querySelectorAll('input[name="startHours"]').forEach(
+      item => item.addEventListener("click", function () { this.select(); })
+    );
+
+    document.querySelectorAll('input[name="startMinutes"]').forEach(
+      item => item.addEventListener("click", function () { this.select(); })
+    )
+
+    document.querySelectorAll('input[name="startSeconds"]').forEach(
+      item => item.addEventListener("click", function () { this.select(); })
+    )
+
+    document.querySelectorAll('input[name="startMilliSecs"]').forEach(
+      item => item.addEventListener("click", function () { this.select(); })
+    )
+
+  }
+
+
+
+  /**
+   * eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
+   * the keypress event of the input 
+   * @method
+   * @see boot()
+   */
+
+  nonNumericBugInHTML() {
+
+    document.querySelectorAll(".timeCase input").forEach(item =>
+
+      item.addEventListener('keypress', function (e) {
+
+        e = e || window.event;
+        var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
+        var charStr = String.fromCharCode(charCode);
+
+        if (!charStr.match(/^[0-9]+$/))
+          e.preventDefault();
+
+      }));
+
+  }
+
+
+  
+  /**
+   * updates HTMLDivElement.prototype so that values can read from and set for the .timecase div 
+   * so it functions as a single element, 
+   * allows for getting and setting of values like document.querySelector('#bob').value = "08:04:05.002"
+   * @method
+   * @see boot()
+   */
+
+  updateDivPrototype() {
+
+    HTMLDivElement.prototype.__defineGetter__('value', function () {
+
+      if (this.querySelector('input[name="startHours"]') !== null) {
+
+        return this.querySelector('input[name="startHours"]').value +
+          ':' + this.querySelector('input[name="startMinutes"]').value +
+          ':' + this.querySelector('input[name="startSeconds"]').value +
+          '.' + this.querySelector('input[name="startMilliSecs"]').value;
+
+      }
+      else {
+
+        return null;
+
+      }
+    });
+
+
+
+    HTMLDivElement.prototype.__defineSetter__('value', function (timeString) {
+
+      // will need warning about timeString format (like input type='time')
+
+      if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(timeString)) {
+
+        // split val
+
+        var timeArray = timeString.split(/[.:]+/);
+
+        this.querySelector('input[name="startHours"]').value = timeArray[0];
+        this.querySelector('input[name="startMinutes"]').value = timeArray[1];
+        this.querySelector('input[name="startSeconds"]').value = timeArray[2];
+        this.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
+
+      }
+      else {
+
+        console.warn(`The specified value ${timeString} does not conform to the required format.  The format is "HH:mm:ss.SSS" where HH is 00-99, mm is 00-59, ss is 00-59, and SSS is 000-999.`);
+
+      }
+
+    });
+  }
+}
+
+export default new ChronlyHMS;
+
+
+
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-ChronlyHMS%2520Module.html">ChronlyHMS Module</a></li></ul><h3>Classes</h3><ul><li><a href="module-ChronlyHMS%2520Module-ChronlyHMS.html">ChronlyHMS</a></li></ul><h3>Global</h3><ul><li><a href="global.html#ChronlyFlag">ChronlyFlag</a></li><li><a href="global.html#ChronlyHMS">ChronlyHMS</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Fri Jan 20 2023 10:29:02 GMT+0000 (Coordinated Universal Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>