input-duration 2.2.1 → 2.2.3

package/docs/chrono.js.html

@@ -1,742 +0,0 @@
-<!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>