practisemaster 1.1.22 → 1.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PMbundle.js +1 -1
- package/package.json +1 -1
package/dist/PMbundle.js
CHANGED
|
@@ -135,7 +135,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
135
135
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
136
136
|
|
|
137
137
|
"use strict";
|
|
138
|
-
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\
|
|
138
|
+
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\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/ ` \n<style>\n\n.spacer {\nmargin:20px\n}\n\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<p class='spacer'></p>\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 /**\n * probably don't need this make it part of the connected callback\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\n\n document\n .querySelector(\"#videoHere\")\n .insertAdjacentElement(\"afterbegin\", WC);\n\n }\n\n\n\n connectedCallback() {\n\n // two things to do here:\n // 1) put table on page (to be filled do method and object data )\n // 2) put practise-master on page (with init 'data')\n\n\n // template is the table\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n this.doTable();\n\n var WC = this.doPM();\n\n\n\n\n this.insertAdjacentElement('afterend', WC);\n\n }\n\n doPM() {\n\n var 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 // WC.querySelector('div').style.paddingTop = '20px';\n\n\n\n\n return WC;\n\n }\n\n doTable() {\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}\"> < Slower ></span>\n <span class=\"fast\" onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) + 0.125}\"> <<Faster>></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\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConductorWebComponent);\n\n\n\n\n//# sourceURL=webpack://practisemaster/./src/modules/conductorWebComponent.js?");
|
|
139
139
|
|
|
140
140
|
/***/ }),
|
|
141
141
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.24",
|
|
4
4
|
"description": "This is the PractiseMaster repo, treat it with respect! [](https://gitpod.io/#https://github.com/StephanLuis/PractiseMaster)",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"input-duration": "^2.2.3",
|