practisemaster 1.1.19 → 1.1.21

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 * landing html for table and video\n * don't think this needs to be a template (no style)\n */\n\nvar pageHTML = `\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\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/ ` \n<style>\nbody {\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 */\nul {\n  margin: 0;\n  padding: 0;\n  height:30vh;\n  overflow:auto;\n}\n\n/* Style the list items */\nul 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) */\nul li:nth-child(odd) {\n  background: #f9f9f9;\n}\n\n/* Darker background-color on hover */\nul li:hover {\n  background: #ddd;\n}\n\n/* When clicked on, add a background color and strike out text */\nul li.checked {\n  background: #888;\n  color: #fff;\n  text-decoration: line-through;\n}\n\n/* Add a \"checked\" mark when clicked on */\nul 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\na: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 */\ninput {\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\na::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 * Probably should have options for\n * 1) separate objects per video\n * 2) one object multi videos\n * 3) query string (single video (multi video would be too long))\n * \n * Source for all of these is the webpage\n * \n */\n\n\n/**\n * conductorWebComponent\n * - put QS on url button\n * - decode QS to object\n * - get object from window\n * - WC ususal methods\n * -- put html on page\n * -- put table on page (need to be separate WC?)\n * -- put video on page\n * - this WC will be consumed by conductorBookWC (adding menu)\n * - that will be consumed by bookSalesWC (adding admiral)\n */\n\n\nclass ConductorWebComponent extends HTMLElement {\n  constructor() {\n\n    // // Always call super first in constructor\n    super();\n\n\n    this.myElement = this.attachShadow({ mode: 'open' });\n\n    /**\n     * method parses QS and makes window object\n     */\n    //  this.dealWithQS();\n\n\n    this.qsParseParams = window.query;\n\n    this.initialiseContainers();\n\n\n\n\n  }\n\n  initialiseContainers() {\n\n    this.initialisePage();\n\n    this.initialiseVideoContainer();\n\n  }\n\n  initialisePage(){\n\n\n  }\n\n  initialiseVideoContainer() {\n\n    const WC = document.createElement(\"practise-master\");\n    WC.id = \"PM\" + this.qsParseParams.videoID;\n    WC.setAttribute(\"data-plyr-provider\", this.qsParseParams.videoProvider);\n    WC.classList.add(\"static\");\n\n    WC.setAttribute(\"data-plyr-embed-id\", this.qsParseParams.videoID);\n\n    document\n      .querySelector(\"#videoHere\")\n      .insertAdjacentElement(\"afterbegin\", WC);\n\n  }\n\n\n\n  connectedCallback() {\n    this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n    this.do();\n\n\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\n  dealWithQS() {\n\n  }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConductorWebComponent);\n\n\n\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.21",
   "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",