input-duration 2.1.0 → 2.2.1

package/README.md

@@ -38,13 +38,13 @@
 <div align="center">
   
   
-  <a href="https://github.com/StephanLuis/chronlyhms">
+  <a href="https://github.com/StephanLuis/input-duration">
    <h3 align="center">Input-Duration -- The best 'Time Only' Input</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
   </a>
 
   
 
-  <p align="center">A time input that works on Safari in close imitation of a time input on Chrome... only better. </p>
+  <p align="center">A vanilla JS boosted input that works on Safari in very close imitation of a time input on Chrome <br>... only better. </p>
 </div>
 
 'Time Only' means that this control is for time as a unit, or a duration, like for count down timers.  Not for time of day nor date on a calendar, so no unwanted AM/PM conversions on Safari, no unwanted date-time selectors.  Just time up to 999 hrs and down to 1 millisecond.<br>
@@ -52,20 +52,19 @@
 <div>
   </div>
     <div align="center">
-    <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
-    ·
-  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
-  ·
   <a href="https://codesandbox.io/s/peaceful-waterfall-6mxpg2?file=/index.html" target="_blank">
   Fiddle
-</a>
+</a> ·
+      <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
+    ·
+  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
   ·
     <a href="https://github.com/StephanLuis/input-duration/issues">Bugs</a>
     ·
     <a href="https://github.com/StephanLuis/input-duration/issues">Request Feature</a>
   </p>
   </div>
-  Ok, what about mobile??  Yep, ChronlyHMS works on all popular operating system / browser combinations.  
+  Ok, what about mobile??  Yep, input-duration works on all popular operating system / browser combinations.  
 <br/>
 </div>
 <br/>
@@ -108,28 +107,29 @@
 
 <!-- ABOUT THE PROJECT -->
 ## About The Project
-Time inputs <input type='time'> are updated by browsers in unwanted ways!   Safari on desktop adds AM/PM if the user is in the USA and on mobile the cool scroll time selector does not allow fractions of a second.  The best html5 option doesn't cut it, sadly, so ChronlyHMS was designed and buit for a consistant UX no matter the browser, OS, or location settings.
+Time inputs <input type='time'> are updated by browsers in unwanted ways!   Safari on desktop adds AM/PM if the user is in the USA and on mobile the cool scroll time selector does not allow fractions of a second.  The best html5 option doesn't cut it, sadly, so input-duration was designed and buit for a consistant UX no matter the browser, OS, or location settings.
 
 <!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) -->
 
-<img src="readme/html.png" alt="drawing" width="60%"/>
+<img src="readme/codeDrawing.png" alt="drawing" width="60%"/>
 
 <!-- [![HTML Screen Shot][html-screenshot]](https://example.com) -->
+*note input-duration needs closing tag!
 
-<h3> Bob is rescued by ChronlyHMS! </h3>
+<h3> Bob is rescued by INPUT-DURATION! </h3>
 
-The objective is a minimised vanilla javascript plugin that reproduces the behaviour of the input type=time on Chrome.  This way at least two of the major browsers are supported, Safari and Chrome, on desktop and mobile operating systems. 
+The objective is a minimised javascript plugin that reproduces the behaviour of the input type=time on Chrome.  This way at least two of the major browsers are supported, Safari and Chrome, on desktop and mobile operating systems. 
 
-<i>Does this loose any functionality?</i>  No!  document.querySelector('#bob').value  has a getter and setter!  So values can be set and retrieved by ID.
+<i>Does this loose any functionality?</i>  No!  document.querySelector('#bob').value  has a getter and setter!  So values can be set and retrieved by ID or attribute in HTML.
 
 
 
-<img src="readme/safariBad.png" alt="drawing" width="60%"/>
+<img src="readme/safariBad.png" alt="drawing" width="80%"/>
 <!-- [![Safari Screen Shot][safari-screenshot]](https://example.com) -->
 
-Yes! It seems CRAZY in 2022 that there is not a native 'time only' input for HTML.  What I mean is there is no user input control for time rendered independantly of date or time of day.  Yea, crazy, but now ChronlyHMS is a javascript plugin that creates a UX input control for a value of time simply as hours, minutes, seconds --<b>only</b>! <br> Ever thought, why is it difficult to 'code' a countdown timer? Why can't it be done with one control? Just look at google's timer and other coundown timers! All use multiple inputs, usually designed for integers.
+Yes! It seems CRAZY in 2022 that there is not a native 'time only' input for HTML.  What I mean is there is no user input control for time rendered independantly of date or time of day.  Yea, crazy, but now input-duration is a javascript plugin that creates a UX input control for a value of time simply as hours, minutes, seconds --<b>only</b>! <br> Ever thought, why is it difficult to 'code' a countdown timer? Why can't it be done with one control? Just look at google's timer and other coundown timers! All use multiple inputs, usually designed for integers.
 
-The very worst is Safari on desktop and mobile undermine those snazzy input type=time efforts and update the input depending on OS settings for desktop or provide a control with restricted capability... Shouldn't a user be able to 'scientifically' specify a period of time with one control?  <br>The closest HTML5 input type- time when configured with UX for hours to millisecs is very finicky and rendered differently on Chrome and Safari <b>and</b> mobile is different from laptop, so I've simplified that!
+The very worst is Safari on desktop and mobile, which undermine any input type=time coding efforts and update the input based on OS settings!  Shouldn't a user be able to 'scientifically' specify a period of time with one control?  <br>  Maybe it's just me, but the chrome / google timer is 14 separate elements ... those guys must be paid by the hour.   The closest HTML5 input type- time when configured with UX for hours to millisecs is very finicky and is rendered differently on Chrome than Safari. <b>Mobile</b> is different from laptop<br> ... so I've simplified that!
 
 
 
@@ -137,7 +137,7 @@ The very worst is Safari on desktop and mobile undermine those snazzy input type
 
 
 
-There are a few plugins (links to come) that remediate the lack of continuity, but even time controls with the plugin treat time as a date (ex 24hr max).  So it seems the current state is the most relable UX is multi input type number (more links to come ).  The best example is the Google countdown timer.  And that's wrong because time is a basic unit that should be separate from calendar complexities.  That got me thinking, why isn't there an input control for it implemented across browsers??  I needed one, so coded ChronlyHMS.
+There were a few plugins that remediated the lack of continuity, but even those controls treated time as a date (ex 24hr max).  So it seems the current state is the most relable UX is multi input type number.  The worst example is the Google countdown timer.  That way is wrong because time is a basic unit that should be separate from calendar complexities.  That got me thinking, why isn't there an input control for it implemented across browsers??  I needed one, so coded input-duration.
 
 Here's why:
 * Time is hours minutes and seconds (and millisecs) and needn't be associated with part of a day or a date
@@ -157,14 +157,15 @@ Feel free to vote for WhatWG inclusion of a into the HTML spec! (link comming so
 
 ### Built With
 
-This section should lists any major frameworks/libraries used to for this project. Any add-ons/plugins are in the acknowledgements section.
+
 
 * [Node.js](https://nodejs.org/)
-* [Webpack](https://webpack.js.org/)
 * [Gitpod](https://www.gitpod.io/)
 * [Testing Powered By SauceLabs](https://saucelabs.com)
 * [Selenium](https://www.selenium.dev/)
 
+input-duration is a module and works with webpack. Any add-ons/plugins used in dev are in the acknowledgements section.
+
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 
@@ -172,7 +173,7 @@ This section should lists any major frameworks/libraries used to for this projec
 <!-- GETTING STARTED -->
 ## Getting Started
 
-There are no pre-requisites for using ChronlyHMS if you're not compiling/ packaging you javascript.  If you are packaging:
+There are no pre-requisites for using input-duration if you're not compiling/ packaging you javascript.  If you are packaging:
 
 ### Prerequisites
 
@@ -183,9 +184,6 @@ This is an example of how to get started with npm and webpack, other frameworks
   npm init -y
   npm install webpack webpack-cli --save-dev
   ```
-  * Webpack requires configuration for packaging ChronlyHMS CSS
-  see [Webpack CSS Loader](https://webpack.js.org/loaders/css-loader/)
-  
 
 ### Installation
 
@@ -194,19 +192,25 @@ _This template doesn't rely on any external dependencies or services._
 
 1. Install from NPM
  ```sh
-  npm i chronlyhms
+  npm i input-duration
  ```
-2. import ChronlyHMS javascript and css
+2. import input-duration in javascript
  ```sh
- import ChronlyHMS from 'chronlyhms';
- import 'chronlyhms/src/chrono.css'
+
+ import id from 'input-duration';
+
 ```
   
 Without packaging:
 
 1. Add script:
  ```sh
- <script src="https://cdn.jsdelivr.net/npm/chronlyhms@1.0.65/dist/chronoBundle.min.js"></script>
+
+<script type="module">
+
+import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
+        
+ </script>
   
  ```
 
@@ -218,25 +222,31 @@ Without packaging:
 <!-- USAGE EXAMPLES -->
 ## Usage
 
-ChronlyHMS requires an input element with the attribute 'data-univHMS'.  There's no more code than that needed.  
+input-duration requires a `<input-duration>` element .  There's no more HTML than that, but don't forget the closing tag.  Native Input elements don't have them!
 ```sh
-<input id='bob' data-univHMS></input>
+
+<input-duration id='bob'></input-duration>
+
 ```
 
-If you would like ChronlyHMS to update inputs that are placed on DOM with javascipt (ex. after chronlyhms script is added), then with your js: 
-1) add a data attribute to the input 
+If you would like to get or set values or to disable input-duration elemet, javascipt can do that: 
+
 ```sh
-data-univHMS [data-univHMS='']
+
+document.querySelector('#bob').value = '44:04:04.444'
+
 ``` 
 
-2) call the Chronly boot method
+and
 
 ```sh
-window.ChronlyHMS.boot()
+
+document.querySelector('#bob').disable()
+
 ```
 so the inputs are modified.
 
-_For more documentation, please refer to the jscocs on  [ChronlyHMS Docs](https://stephanluis.github.io/chronlyhms/)_
+_For more documentation, please refer to the jscocs on  [input-duration Docs](https://stephanluis.github.io/input-duration/)_
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -254,7 +264,7 @@ _For more documentation, please refer to the jscocs on  [ChronlyHMS Docs](https:
 - [ ] Multi-language documentation (Google translate of this page?)
     - [ ] Chinese
     - [ ] Spanish
-- [ ] Is it worth having a remove function, restoring the original input?
+- [ ] min and max values (sorry for the moment you'll have to do those yourself in js)
 
 See the [open issues](https://github.com/StephanLuis/chronlyhms/issues) for a full list of proposed features (and known issues).
 

package/docs/InputDuration.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line1">line 1</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line12">line 12</a>
     </li></ul></dd>
     
 
@@ -199,7 +199,7 @@ so in js use var x = document.querySelector("#bobPrepop").value;
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line30">line 30</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line41">line 41</a>
     </li></ul></dd>
     
 
@@ -262,7 +262,7 @@ so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line57">line 57</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -343,7 +343,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line509">line 509</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line520">line 520</a>
     </li></ul></dd>
     
 
@@ -439,7 +439,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line144">line 144</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line155">line 155</a>
     </li></ul></dd>
     
 
@@ -535,7 +535,7 @@ the click event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line537">line 537</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line548">line 548</a>
     </li></ul></dd>
     
 
@@ -630,7 +630,7 @@ the click event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line215">line 215</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line226">line 226</a>
     </li></ul></dd>
     
 
@@ -726,7 +726,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line332">line 332</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line343">line 343</a>
     </li></ul></dd>
     
 
@@ -821,7 +821,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line398">line 398</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line409">line 409</a>
     </li></ul></dd>
     
 
@@ -916,7 +916,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line122">line 122</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line133">line 133</a>
     </li></ul></dd>
     
 
@@ -1004,7 +1004,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line574">line 574</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line585">line 585</a>
     </li></ul></dd>
     
 
@@ -1092,7 +1092,7 @@ the change event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line590">line 590</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line601">line 601</a>
     </li></ul></dd>
     
 
@@ -1181,7 +1181,7 @@ the keypress event of the input
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line550">line 550</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line561">line 561</a>
     </li></ul></dd>
     
 
@@ -1240,7 +1240,7 @@ the keypress event of the input
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 13:53:14 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.html

@@ -47,6 +47,118 @@
 
 
 
+
+
+
+<section>
+
+<header>
+    
+        <h2>index.js</h2>
+        
+    
+</header>
+
+<article>
+    <div class="container-overview">
+    
+        
+            <div class="description">INPUT-DURATION</div>
+        
+
+        
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-author">Author:</dt>
+    <dd class="tag-author">
+        <ul>
+            <li>Stephan Luis</li>
+        </ul>
+    </dd>
+    
+
+    
+    <dt class="tag-copyright">Copyright:</dt>
+    <dd class="tag-copyright"><ul class="dummy"><li>MIT License, Copyright (c) 2022</li></ul></dd>
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line1">line 1</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li><a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a></li>
+        
+            <li><a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a></li>
+        </ul>
+    </dd>
+    
+
+    
+</dl>
+
+
+        
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+</article>
+
+</section>
+
+
+
+
 </div>
 
 <nav>
@@ -56,7 +168,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 13:53:14 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.js.html

@@ -27,6 +27,17 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview INPUT-DURATION
+ * @file INPUT-DURATION 
+ * @author Stephan Luis
+ * @see &lt;a href="https://www.npmjs.com/package/input-duration">NPM input-duration&lt;/a>
+ * @see &lt;a href="https://github.com/StephanLuis/input-duration">GitHub input-duration&lt;/a>
+ * @copyright MIT License, Copyright (c) 2022 
+ */
+
+
+
+/**
  * Class for the Input-Duration webcomponent
  * @class InputDuration
  * @extends HTMLElement
@@ -651,7 +662,7 @@ export default customElements.define('input-duration', InputDuration);
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 13:53:14 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/index.js

@@ -1,3 +1,14 @@
+/**
+ * @fileoverview INPUT-DURATION
+ * @file INPUT-DURATION 
+ * @author Stephan Luis
+ * @see <a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a>
+ * @see <a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a>
+ * @copyright MIT License, Copyright (c) 2022 
+ */
+
+
+
 /**
  * Class for the Input-Duration webcomponent
  * @class InputDuration
@@ -130,6 +141,7 @@ class InputDuration extends HTMLElement {
         this.addNumericInput();
         this.addClicksToActivate();
         this.nonNumericBugInHTML();
+        this.removeEprop();
 
     }
 
@@ -563,7 +575,21 @@ class InputDuration extends HTMLElement {
             }));
     }
 
+    /**
+     * Stop event propigation from the timeCase up through the DOM so when keys 
+     * are being used they don't affect other controls (like volume on plyr)
+     * @method
+     */
+
+    removeEprop()   {
+        
+        document.querySelector('input-duration').shadowRoot.querySelector('.timeCase')
+        .addEventListener('keydown', function (event) { event.stopPropagation();}); 
+
+    }
+
 
+    
     // formatting and behaviour options
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-duration",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "author": "Stephan Luis <stephan@learnsense.org>",
   "description": "This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.",
   "browser": "indexjs",