practisemaster 1.1.19 → 1.1.20

package/dist/PMbundle.js

@@ -102,7 +102,7 @@ eval("var __WEBPACK_AMD_DEFINE_RESULT__;////////////////////////////////////////
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n//        __   __         ___  ___  __  ___       __   ___ \n//   /\\  |__) /  ` |__| |  |  |__  /  `  |  |  | |__) |__  \n//  /~~\\ |  \\ \\__, |  | |  |  |___ \\__,  |  \\__/ |  \\ |___ \n//    \n//                                                    \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n\n/**\n * this kicks off the webcomponents (entry point)\n */\n\ncustomElements.define(\"practise-master\", _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n \n\n\n// export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n\ncustomElements.define('pm-linkediter', _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n\n\n\n\n// question remains of how to pass css into PM? A: use pagesupport above!\n\n\n\n\n\n// would like a delete here will have to use await or listen for a final listener\n// window.addEventListener('pmControlsReady', function (e) {\n// delete window.PMpageSupport;\n// });\n\n// trigger build comment (can remove)\n\n\n//# sourceURL=webpack://practisemaster/./src/PM.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n/* harmony import */ var _modules_conductorWebComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/conductorWebComponent */ \"./src/modules/conductorWebComponent.js\");\n//        __   __         ___  ___  __  ___       __   ___ \n//   /\\  |__) /  ` |__| |  |  |__  /  `  |  |  | |__) |__  \n//  /~~\\ |  \\ \\__, |  | |  |  |___ \\__,  |  \\__/ |  \\ |___ \n//    \n//                                                    \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n\n\n\n/**\n * this kicks off the webcomponents (entry point)\n */\n\ncustomElements.define(\"practise-master\", _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n \n\n\n// export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n\ncustomElements.define('pm-linkediter', _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\ncustomElements.define('practise-conductor', _modules_conductorWebComponent__WEBPACK_IMPORTED_MODULE_2__[\"default\"])\n\n\n\n\n\n// question remains of how to pass css into PM? A: use pagesupport above!\n\n\n\n\n\n// would like a delete here will have to use await or listen for a final listener\n// window.addEventListener('pmControlsReady', function (e) {\n// delete window.PMpageSupport;\n// });\n\n// trigger build comment (can remove)\n\n\n//# sourceURL=webpack://practisemaster/./src/PM.js?");
 
 /***/ }),
 
@@ -128,6 +128,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./src/modules/conductorWebComponent.js":
+/*!**********************************************!*\
+  !*** ./src/modules/conductorWebComponent.js ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/**\n * Web Component from QSshadTable and PopFilter demo on PM website\n * as a webcomponent more than one table and player can be on one web page\n * what was passed to the query string will now be pass as an object to an attribute\n *  \n * \n * the lesson r\n */\n\n\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/`\n\n<div id=\"tableHere\" class=\"container col-span-1 max-w-5xl\"></div>\n\n<div class=\"col-span-1  justify-center max-w-4xl lg:mt-20\">\n<h1 id=\"videoLabel\" \">Practise Master</h1>\n\n\n    <div\n      id=\"videoHere\"\n      class=\"aspect-video bg-gray-500  \"\n    >\n    </div>\n  </div>\n\n\n</div>\n<style>\n    body {\n        margin: 0;\n        min-width: 250px;\n    }\n\n    /* Include the padding and border in an element's total width and height */\n    * {\n        box-sizing: border-box;\n    }\n\n    /* Remove margins and padding from the list */\n    ul {\n        margin: 0;\n        padding: 0;\n        height:30vh;\n        overflow:auto;\n    }\n\n    /* Style the list items */\n    ul li {\n        cursor: pointer;\n        position: relative;\n        padding: 12px 8px 12px 40px;\n        list-style-type: none;\n        background: #eee;\n        font-size: 18px;\n        transition: 0.2s;\n\n        /* make the list items unselectable */\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n\n        min-height:60px;\n    }\n\n    /* Set all odd list items to a different color (zebra-stripes) */\n    ul li:nth-child(odd) {\n        background: #f9f9f9;\n    }\n\n    /* Darker background-color on hover */\n    ul li:hover {\n        background: #ddd;\n    }\n\n    /* When clicked on, add a background color and strike out text */\n    ul li.checked {\n        background: #888;\n        color: #fff;\n        text-decoration: line-through;\n    }\n\n    /* Add a \"checked\" mark when clicked on */\n    ul li.checked::before {\n        content: '';\n        position: absolute;\n        border-color: #fff;\n        border-style: solid;\n        border-width: 0 2px 2px 0;\n        top: 30%;\n        left: 16px;\n        transform: rotate(45deg);\n        height: 15px;\n        width: 7px;\n    }\n\n    /* Style the close button */\n    .stop {\n        color: #aaaaaa;\n        top: 0;\n        padding: 12px 16px 12px 16px;\n    } \n    .slow {\n        color: #aaaaaa;\n        top: 0;\n        padding: 12px 16px 12px 16px;\n    }\n    .fast {\n        color: #aaaaaa;\n        top: 0;\n        padding: 12px 16px 12px 16px;\n    }\n    \n    \n    .close {\n        position: absolute;\n        right: 0;\n        top: 10%;\n        padding: 12px 16px 12px 16px;\n    }\n\n    a:hover, .stop:hover, .slow:hover, .fast:hover, .close:hover {\n        background-color: rgb(255, 102, 0);\n        color: white;\n    }\n\n    /* Style the header */\n    .header {\n        background-color: rgb(255, 102, 0, 0.90);\n        padding: 30px 40px;\n        color: white;\n        text-align: center;\n        \n    }\n\n    /* Clear floats after the header */\n    .header:after {\n        content: \"\";\n        display: table;\n        clear: both;\n    }\n\n    /* Style the input */\n    input {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        width: 75%;\n        padding: 10px;\n        float: left;\n        font-size: 16px;\n    }\n\n    /* Style the \"Add\" button */\n    .addBtn {\n        padding: 10px;\n        width: 25%;\n        background: #d9d9d9;\n        color: #555;\n        float: left;\n        text-align: center;\n        font-size: 16px;\n        cursor: pointer;\n        transition: 0.3s;\n        border-radius: 0;\n    }\n\n    .addBtn:hover {\n        background-color: #bbb;\n    }\n\n    a::after {\ncontent: '${\"\\u25B7\"}';\npadding-left:5px;\ncolor: orange;\n\n}\na:link, a:visited {\n\ncolor: black;\npadding: 14px 25px;\ntext-align: center;\ntext-decoration: none;\ndisplay: inline-block;\n}\n\n    </style>\n<span id='listSpan'></span>\n\n\n`;\n\n\n\n    class ConductorWebComponent extends HTMLElement {\n        constructor() {\n          super();\n\n          // need to check for table object on page or throw error\n        this.checkPMlessonTable();\n\n        this.table = window.PMlessonTable;\n\n          this.attachShadow({ mode: \"open\" });\n        }\n\n        checkPMlessonTable() {\n\n            if (window.PMlessonTable) {\n    \n              console.error('PMlessonTable is not on page please add window.PMlessonTable!')\n    \n            }\n        }\n\n        connectedCallback() {\n          this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n          this.do();\n        }\n\n        do() {\n          // create table and append to page\n          const toDoTableHolder = document.createElement(\"div\");\n          toDoTableHolder.id = \"tableholder\";\n\n          toDoTableHolder.innerHTML = ` <div id=\"devToDoList\" class=\"header\">\n        <h2 style=\"margin:5px\">${this.qsParseParams.table.title}</h2>\n        <p>Watch the full video, then ...focus on form, do the sets you need.</p>  \n               \n    </div>\n    <ul id=\"toDoUL\">\n        <li class=\"checked\" id=\"iRow\"> Tick each item when you're done mastering each skill</li>\n       \n    </ul>\n</div>`;\n\n          this.shadowRoot\n            .querySelector(\"#listSpan\")\n            .insertAdjacentElement(\"afterbegin\", toDoTableHolder);\n\n          // increment with map[key] = (map[key] ?? 0) + 1;\n          // <a href='#PM${this.qsParseParams.videoID}' onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) - 0.125}\"> Slower</a>\n\n          this.qsParseParams.table.rows.forEach((row) =>\n            this.shadowRoot.querySelector(\"#iRow\").insertAdjacentHTML(\n              \"afterend\",\n\n              `<li><a href='javascript:void(0)'  onclick=\"PractiseMaster.Loop('PM${this.qsParseParams.videoID}', '${row.startTime}' , '${row.endTime}'); document.querySelector('#videoLabel').innerText = '${row.goal} Practise Loop';\">${row.goal}</a>\n        \n            <span class=\"stop\" onclick=\"PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.pause()\">    (Stop)</span>\n            <span class=\"slow\" onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) - 0.125}\"> &lt; Slower &gt;</span>\n            <span class=\"fast\" onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) + 0.125}\"> &lt;&lt;Faster&gt;&gt;</span>\n        </li>\n        `\n            )\n          );\n\n          // Create a \"close\" button and append it to each list item\n          var myNodelist = this.shadowRoot.querySelectorAll(\"li\");\n          var i;\n          for (i = 0; i < myNodelist.length; i++) {\n            var span = document.createElement(\"SPAN\");\n            var txt = document.createTextNode(\"\\u00D7\");\n            span.className = \"close\";\n            span.appendChild(txt);\n            myNodelist[i].appendChild(span);\n          }\n\n          // Click on a close button to hide the current list item\n          var close = this.shadowRoot.querySelectorAll(\".close\");\n          var i;\n          for (i = 0; i < close.length; i++) {\n            close[i].onclick = function () {\n              var div = this.parentElement;\n              div.style.display = \"none\";\n            };\n          }\n\n          // Add a \"checked\" symbol when clicking on a list item\n          var list = this.shadowRoot.querySelector(\"ul\");\n          list.addEventListener(\n            \"click\",\n            function (ev) {\n              if (ev.target.tagName === \"LI\") {\n                ev.target.classList.toggle(\"checked\");\n              }\n            },\n            false\n          );\n\n          const demoTitle = document.createElement(\"h1\");\n          demoTitle.innerText = this.qsParseParams.companyBrand + \" Demo\";\n\n          this.shadowRoot\n            .querySelector(\"#listSpan\")\n            .insertAdjacentElement(\"afterbegin\", demoTitle);\n        }\n      }\n\n      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConductorWebComponent);\n\n//# sourceURL=webpack://practisemaster/./src/modules/conductorWebComponent.js?");
+
+/***/ }),
+
 /***/ "./src/modules/helpers-pm.js":
 /*!***********************************!*\
   !*** ./src/modules/helpers-pm.js ***!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "practisemaster",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "This is the PractiseMaster repo, treat it with respect! [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/StephanLuis/PractiseMaster)",
   "dependencies": {
     "input-duration": "^2.2.3",