input-duration 2.1.1 → 2.2.2

package/README.md

@@ -52,13 +52,12 @@
 <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>
     ·
@@ -115,6 +114,7 @@ Time inputs <input type='time'> are updated by browsers in unwanted ways!   Safa
 <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 INPUT-DURATION! </h3>
 
@@ -222,7 +222,7 @@ import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
 <!-- USAGE EXAMPLES -->
 ## Usage
 
-input-duration requires a <input-duration> element .  There's no more HTML than that.  
+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-duration id='bob'></input-duration>

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#line12">line 12</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line14">line 14</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#line41">line 41</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line43">line 43</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#line68">line 68</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line70">line 70</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#line520">line 520</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line523">line 523</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#line155">line 155</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line158">line 158</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#line548">line 548</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line551">line 551</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#line226">line 226</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line229">line 229</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#line343">line 343</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line346">line 346</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#line409">line 409</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line412">line 412</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#line133">line 133</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line135">line 135</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#line585">line 585</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line602">line 602</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#line601">line 601</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line618">line 618</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#line561">line 561</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line564">line 564</a>
     </li></ul></dd>
     
 
@@ -1218,6 +1218,95 @@ the keypress event of the input
 
 
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="removeEprop"><span class="type-signature"></span>removeEprop<span class="signature">()</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    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)
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line586">line 586</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         
     
 
@@ -1240,7 +1329,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 16:38:37 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Fri Sep 29 2023 11:02:59 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.html

@@ -168,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 16:38:37 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Fri Sep 29 2023 11:02:59 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.js.html

@@ -27,6 +27,8 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>/**
+ * This is jsdoc 'auto' documentation see https://jsdoc.app/
+ * 
  * @fileoverview INPUT-DURATION
  * @file INPUT-DURATION 
  * @author Stephan Luis
@@ -169,6 +171,7 @@ class InputDuration extends HTMLElement {
         this.addNumericInput();
         this.addClicksToActivate();
         this.nonNumericBugInHTML();
+        this.removeEprop();
 
     }
 
@@ -260,7 +263,7 @@ class InputDuration extends HTMLElement {
         var template = document.createElement('template');
 
         template.innerHTML = `
-          &lt;input id="inShadow" type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+          &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>
@@ -602,7 +605,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
 
     /**
@@ -662,7 +679,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 16:38:37 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Fri Sep 29 2023 11:02:59 GMT+0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

package/index.js

@@ -1,4 +1,9 @@
 /**
+ * This is jsdoc 'auto' documentation see https://jsdoc.app/
+ * npm install -g jsdoc
+ * jsdoc index.js -d ./docs/
+ * 
+ * 
  * @fileoverview INPUT-DURATION
  * @file INPUT-DURATION 
  * @author Stephan Luis
@@ -141,6 +146,7 @@ class InputDuration extends HTMLElement {
         this.addNumericInput();
         this.addClicksToActivate();
         this.nonNumericBugInHTML();
+        this.removeEprop();
 
     }
 
@@ -232,7 +238,7 @@ class InputDuration extends HTMLElement {
         var template = document.createElement('template');
 
         template.innerHTML = `
-          <input id="inShadow" type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+          <input type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
           <span class="bds-h">:</span>
           <input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
           <span class="bds-m">:</span>
@@ -574,7 +580,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.1",
+  "version": "2.2.2",
   "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",