practisemaster 1.8.6 → 1.8.7
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
|
@@ -124,7 +124,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
124
124
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
125
125
|
|
|
126
126
|
"use strict";
|
|
127
|
-
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 for the book form of the conductorWebComponent:\n * adds navigation for lessons\n * \n */\n\n// const template = /*html*/ ` \n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/ ` \n\n<style>\n/* stephan style */\n\n#toc {\nmargin-top: 5%;\n}\n\n.mdl-tabs__panel {\npadding-left:60px;\n}\n\n#contents-panel{\npadding-left:15%;\n}\n\n.tocLabel3 {\ntransform: translate(-5%, 100%) rotate(-90deg);\n}\n\nbody {\nbackground-color: #FAFAFA;\n}\n\n\n\n.mdl-grid, #citation{\ncolor: #607D8B;\n}\n\n.clickToc {\ncursor: pointer;\n}\n\n#toc h3{\npadding-bottom:50px;\n}\n\n#citation {\npadding-left: 15%;\npadding-top: 5%;\n}\n\np.fl::first-letter {\n font-size: 200%;\n font-weight: bold;\n color: #607D8B;\n padding:6px 0 0;\n display: inline-block;\n display: -moz-inline-box;\n -moz-box-orient: vertical;\n vertical-align: top;\n zoom: 1;\n *display: inline;\n}\n\np.fl{\n\nmargin-bottom: 3px;\n\n}\n\np.subtitle{\nmargin-left: 10px;\nmargin-bottom: 30px;\n}\n\n.tocLabel{\ntransform: rotate(-90deg);\njustify-items: right;\npadding-right: 10%;\n\n}\n\n#toc {\nmargin-top: 10%;\n}\n\n.vertical-menu .mdl-tabs__tab-bar {\n \n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n.vertical-menu .mdl-tabs__tab-bar {\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n border-bottom: none;\n}\n\n.vertical-menu .menu a.vertical-menu-header {\n border-left: 4px solid transparent;\n padding: 10px 24px 10px 10px;\n text-transform: capitalize;\n width: 240px;\n text-align: left;\n color: #455A64;\n text-decoration: none;\n letter-spacing: 2px;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab {\n border-left: 4px solid transparent;\n padding: 0 24px 0 10px;\n text-transform: capitalize;\n width: 240px;\n text-align: left;\n color: #455A64\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab .mdl-chip__contact {\n background-color: #607D8B;\n color: #CFD8DC;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover {\n color: rgba(0, 0, 0, .87);\n border-left: 4px solid transparent;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover .mdl-chip__contact {\n color: #fff;\n background-color: #546E7A;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active {\n color: rgba(0, 0, 0, .97);\n border-left: 4px solid #FF6E40;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active .mdl-chip__contact {\n color: #FFF;\n}\n\n.vertical-menu.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {\n display: none;\n}\n\n.menu:hover,\nnav.menu.expanded {\n width: 240px;\n overflow: hidden;\n}\n\nnav.menu {\n background: #ECEFF1;\n border-right: 1px solid #CFD8DC;\n position: absolute;\n top: 0;\n bottom: 0;\n height: 100%;\n left: 0;\n width: 58px;\n overflow: hidden;\n -webkit-transition: width .06s linear;\n transition: width .09s linear;\n -webkit-transform: translateZ(0) scale(1, 1);\n z-index: 1000;\n}\n\nnav.menu .mdl-tabs__tab-bar a {\n -webkit-transform: translateZ(0) scale(1, 1);\n -webkit-transition: all .1s linear;\n transition: all .1s linear;\n}\n\n.no-touch .scrollable.hover {\n overflow-y: hidden;\n}\n\n.no-touch .scrollable.hover:hover {\n overflow-y: auto;\n overflow: visible;\n}\n\na:hover,\na:focus {\n text-decoration: none;\n}\n\nnav.patient-menu {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n}\n\n\n\n\n</style>\n\n<div class=\"vertical-menu mdl-tabs mdl-js-tabs\"></div>\n`;\n\n\n\nclass BookWebComponent extends HTMLElement {\n constructor() {\n\n // // Always call super first in constructor\n super();\n\n\n // for dynamic tabs and table of contents\n // first object in array is book citation\n // rest (list of videos) is passed on to conductorWC\n\n // this.bookCitation = window.book.shift();\n\n // use this for table of contents etc.\n\n\n // window.book is the object on each html page\n // is book info and pages (lessons)\n\n\n this.book = window.book;\n\n // window.query is for the 'old' sytem that was based on query string\n // kept as a global for PM \n // update it here \n\n\n this.videoList = window.book.pages;\n\n // this is where the unique id should be added\n\n\n const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');\n\n\n // for multiple lessons from same vide each page will need a playerID (part random) and a videoID (from YT or Vimeo -- host)\n\n\n this.videoList.forEach(page => {\n\n page.PMCid = `PMC${genRanHex(3)}`;\n\n });\n\n // and post back to window\n window.query = this.videoList;\n\n\n }\n\n\n connectedCallback() {\n\n\n this.appendChild(template.content.cloneNode(true));\n\n\n this.addNav();\n\n this.addGrid();\n\n this.addListeners();\n\n this.addMaterialStyling();\n\n // this.addfooter();\n\n this.truncate();\n\n\n }\n\n truncate(str, n) {\n return (str.length > n) ? str.slice(0, n - 1) + '…' : str;\n };\n\n addNav() {\n\n var navHTML = `\n <nav class=\"menu\">\n <div class=\"mdl-tabs__tab-bar\">\n <a href=\"#\" class=\"vertical-menu-header\"><span class=\"mdl-chip__contact mdl-color--blue-grey-50 mdl-color-text--blue-grey-500\"><i class=\"fa fa-music fa-1.75x\" aria-hidden=\"true\"></i>\n</span> ${this.truncate(this.book.compilation.title.slice(0,15))} <i class=\"fa fa-angle-right fa-fw\" aria-hidden=\"true\"></i></a>\n <div class=\"vertical-scroll\">\n <a href=\"#contents-panel\" class=\"mdl-tabs__tab is-active\"><span class=\"mdl-chip__contact\"><i class=\"fa fa-bars fa-1.5x\" aria-hidden=\"true\"></i></span></a>\n <!-- js tabs go here --> \n \n \n \n <a href=\"#\" id=\"userButton\" class=\"vertical-menu-header\"><span class=\"mdl-chip__contact mdl-color--blue-grey-50 mdl-color-text--blue-grey-500\"><i id=\"userButton\"class=\"fa fa-user fa-2x\" aria-hidden=\"true\"></i></a>\n </div>\n \n </nav> `\n\n // de-nest this will have to be updated\n document.querySelector(\"practise-book > div.vertical-menu\").insertAdjacentHTML('afterbegin', navHTML);\n\n this.addNavTab();\n\n\n }\n\n addNavTab() {\n\n\n\n\n this.videoList.forEach((element, index) => {\n\n\n\n var navTab = `<a id=\"tab_${index}\" href=\"#vid${element.PMCid}-panel\" class=\"mdl-tabs__tab\"><span class=\"mdl-chip__contact\">${element.table.title.charAt(0)} </span> ${this.truncate(element.table.title, 20)}</a>`\n\n document.querySelector(\"div.vertical-scroll\").insertAdjacentHTML('beforeend', navTab);\n\n });\n\n }\n\n\n addGrid() {\n\n var gridHtml = `\n <div id=\"grid\">\n \n <div id=\"panelContainer\">\n \n <div class=\"mdl-tabs__panel is-active\" id=\"contents-panel\">\n <div class=\"mdl-grid\" style=\"justify-content: center\">\n \n <div id=\"toc\" class=\"mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--4-col-phone\">\n <h3>${this.book.compilation.title}</h3>\n </div>\n \n <div class=\"tocLabel mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--hide-phone \">\n <p style=\"font-size: x-large\">Table of</p><p style=\"font-size:xxx-large; color: #F60;\" >Contents</p>\n </div>\n \n </div>\n \n </div>\n\n </div>\n <div class=\"mdl-grid\"><p id='citation' class=\"mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-phone\" >${this.book.compilation.authors} videos, curated by ${this.book.compilation.editor} <a href=\"https://practisemaster.com/\"><svg style=\"height: 2rem;\" viewBox=\"0 0 79.381 79.381\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M4.967 74.414C2.25 71.644 1.5 43.19 1.5 39.31c0-3.797.755-31.685 3.467-34.343C7.737 2.25 36.19 1.5 40.07 1.5c3.797 0 31.685.755 34.343 3.467 2.717 2.77 3.467 31.224 3.467 35.104 0 3.797-.755 31.685-3.467 34.343-2.77 2.717-31.224 3.467-35.104 3.467-3.797 0-31.685-.755-34.343-3.467z\" clip-rule=\"evenodd\"></path><path fill=\"#f60\" fill-rule=\"evenodd\" d=\"M62.694 35.092c-.06 1.553-18.031 10.068-19.4 10.806-1.352.73-18.172 10.979-19.473 10.16-1.315-.828.296-20.65.342-22.203.044-1.537-.422-21.228.938-21.945 1.375-.725 17.734 10.581 19.057 11.397 1.31.807 18.595 10.249 18.536 11.785z\" clip-rule=\"evenodd\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M16.98 65.076h50.806\"></path></svg></a></p>\n </div>\n </div> `\n\n document.querySelector(\"practise-book > div.vertical-menu\").insertAdjacentHTML('beforeend', gridHtml);\n\n this.addGridTableContents();\n this.addGridPMPanel();\n\n }\n\n\n\n addGridTableContents() {\n\n this.videoList.forEach((element, index) => {\n\n var tocEntry = `<p id=\"toc_${index}\" class=\"fl clickToc\" style=\"font-size: large\" >${element.table.title}</p><p class=\"subtitle\"> ${element.companyBrand} teaches it in ${element.table.rows.length} steps</p>`;\n\n document.querySelector(\"#toc\").insertAdjacentHTML('beforeend', tocEntry);\n\n });\n\n\n }\n\n /// maybe at the very end add practise-conductor with createElement !\n\n\n addGridPMPanel() {\n\n this.videoList.forEach(element => {\n\n\n const delay = (amount = number) => {\n return new Promise((resolve) => { setTimeout(resolve, amount); });\n }\n\n window.nowConductor = element;\n\n var panel = `<div class=\"mdl-tabs__panel\" id=\"vid${element.PMCid}-panel\"><div class=\"mdl-grid\"><practise-conductor></practise-conductor></div></div>`;\n\n document.querySelector(\"#panelContainer\").insertAdjacentHTML('beforeend', panel);\n\n // var pc = document.createElement('practise-conductor');\n\n // document.querySelector(\"#vid\" + element.videoID + \"-panel\").insertAdjacentElement('beforeend', pc);\n\n\n // see 2SamePMconductor.html for why to use this\n // https://forum.freecodecamp.org/t/how-to-set-a-delay-between-foreach-loop-iteration-solved/88932/2\n\n\n delay(1000);\n\n });\n\n }\n\n addListeners() {\n\n document.querySelector('#userButton').addEventListener('click', function () { window.admiral(\"show\", \"transact.login\", { returnURL: \"https://getadmiral.com\" }) });\n\n //event listener for table of contents to call the corresponding tab\n // need the following:\n\n // var evt = document.createEvent(\"MouseEvents\");\n // evt.initMouseEvent(\"click\", true, true, window,\n // 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n\n // document.querySelector(\"body > practise-book > div > nav > div > div > a:nth-child(3)\").dispatchEvent(evt);\n\n\n // as a function for each toc item\n\n // so give each an id like toc_1 and tab_1\n // then doc.qsa.class of toc and foreach add event listener this.split id and by qs toc_id.dispatch\n\n\n window.tocClick = document.createEvent(\"MouseEvents\");\n window.tocClick.initMouseEvent(\"click\", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n\n\n document.querySelectorAll('.clickToc').forEach(toc => toc.addEventListener('click', function () {\n\n // alert(toc.id.split('_')[1]);\n\n document.querySelector('#tab_' + toc.id.split('_')[1]).dispatchEvent(window.tocClick);\n\n\n\n }))\n\n\n\n\n }\n\n addMaterialStyling() {\n\n\n // note: both should be updated with same code (refactor)\n // mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\n\n\n var pcs = document.querySelectorAll('practise-conductor');\n\n pcs.forEach(pc => {\n\n\n\n pc.classList.add('mdl-cell', 'mdl-cell--6-col', 'mdl-cell--8-col-tablet', 'mdl-cell--4-col-phone', 'mdl-cell--middle');\n\n\n });\n\n var pms = document.querySelectorAll('practise-master');\n\n pms.forEach(pm => {\n\n pm.classList.add('mdl-cell', 'mdl-cell--6-col', 'mdl-cell--8-col-tablet', 'mdl-cell--4-col-phone');\n\n pm.style['padding-top'] = '60px';\n\n\n });\n\n\n // need to move video title to the right\n // document.querySelector(\"#vid355114615-panel > div > practise-conductor\").shadowRoot.querySelector(\"#listSpan\")\n // .shadowRoot.querySelector(\"#listSpan\")\n\n\n\n\n // var panels = document.querySelectorAll('.mdl-tabs__panel');\n\n // panels.forEach(panel => {\n\n\n\n // });\n\n\n\n // // wrap table\n // wrap(document.querySelector('#tableholder'), document.createElement('<div class=\"mdl-cell mdl-cell--8-col-tablet mdl-cell--4-col-phone\">'));\n\n // // this wraps table <div class=\"mdl-cell mdl-cell--8-col-tablet mdl-cell--4-col-phone\"><div id=\"tableholder\">\n\n // // wrap vide (PM) this probably wraps them all\n\n // wrap(document.querySelector('practise-master'), document.createElement('<div class=\"mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\">'));\n\n // this wraps pm <div class=\"mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\"> <practise-master class=\"container\"></practise-master>\n }\n\n addfooter() {\n\n\n this.insertAdjacentHTML('beforeend', `<p id='citation'>${this.book.compilation.authors} videos, <br> curated by ${this.book.compilation.editor} <a href=\"https://practisemaster.com/\"><svg style=\"height: 2rem;\" viewBox=\"0 0 79.381 79.381\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M4.967 74.414C2.25 71.644 1.5 43.19 1.5 39.31c0-3.797.755-31.685 3.467-34.343C7.737 2.25 36.19 1.5 40.07 1.5c3.797 0 31.685.755 34.343 3.467 2.717 2.77 3.467 31.224 3.467 35.104 0 3.797-.755 31.685-3.467 34.343-2.77 2.717-31.224 3.467-35.104 3.467-3.797 0-31.685-.755-34.343-3.467z\" clip-rule=\"evenodd\"></path><path fill=\"#f60\" fill-rule=\"evenodd\" d=\"M62.694 35.092c-.06 1.553-18.031 10.068-19.4 10.806-1.352.73-18.172 10.979-19.473 10.16-1.315-.828.296-20.65.342-22.203.044-1.537-.422-21.228.938-21.945 1.375-.725 17.734 10.581 19.057 11.397 1.31.807 18.595 10.249 18.536 11.785z\" clip-rule=\"evenodd\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M16.98 65.076h50.806\"></path></svg></a></p>`)\n }\n\n}\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BookWebComponent);\n\n//# sourceURL=webpack://practisemaster/./src/modules/bookWebComponent.js?");
|
|
127
|
+
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 for the book form of the conductorWebComponent:\n * adds navigation for lessons\n * \n */\n\n// const template = /*html*/ ` \n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/ ` \n\n<style>\n/* stephan style */\n\n#toc {\nmargin-top: 5%;\n}\n\n.mdl-tabs__panel {\npadding-left:60px;\n}\n\n#contents-panel{\npadding-left:15%;\n}\n\n.tocLabel3 {\ntransform: translate(-5%, 100%) rotate(-90deg);\n}\n\nbody {\nbackground-color: #FAFAFA;\n}\n\n\n\n.mdl-grid, #citation{\ncolor: #607D8B;\n}\n\n.clickToc {\ncursor: pointer;\n}\n\n#toc h3{\npadding-bottom:50px;\n}\n\n#citation {\npadding-left: 15%;\npadding-top: 5%;\n}\n\np.fl::first-letter {\n font-size: 200%;\n font-weight: bold;\n color: #607D8B;\n padding:6px 0 0;\n display: inline-block;\n display: -moz-inline-box;\n -moz-box-orient: vertical;\n vertical-align: top;\n zoom: 1;\n *display: inline;\n}\n\np.fl{\n\nmargin-bottom: 3px;\n\n}\n\np.subtitle{\nmargin-left: 10px;\nmargin-bottom: 30px;\n}\n\n.tocLabel{\ntransform: rotate(-90deg);\njustify-items: right;\npadding-right: 10%;\n\n}\n\n#toc {\nmargin-top: 10%;\n}\n\n.vertical-menu .mdl-tabs__tab-bar {\n \n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n.vertical-menu .mdl-tabs__tab-bar {\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n border-bottom: none;\n}\n\n.vertical-menu .menu a.vertical-menu-header {\n border-left: 4px solid transparent;\n padding: 10px 24px 10px 10px;\n text-transform: capitalize;\n width: 240px;\n text-align: left;\n color: #455A64;\n text-decoration: none;\n letter-spacing: 2px;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab {\n border-left: 4px solid transparent;\n padding: 0 24px 0 10px;\n text-transform: capitalize;\n width: 240px;\n text-align: left;\n color: #455A64\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab .mdl-chip__contact {\n background-color: #607D8B;\n color: #CFD8DC;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover {\n color: rgba(0, 0, 0, .87);\n border-left: 4px solid transparent;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover .mdl-chip__contact {\n color: #fff;\n background-color: #546E7A;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active {\n color: rgba(0, 0, 0, .97);\n border-left: 4px solid #FF6E40;\n}\n\n.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active .mdl-chip__contact {\n color: #FFF;\n}\n\n.vertical-menu.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {\n display: none;\n}\n\n.menu:hover,\nnav.menu.expanded {\n width: 240px;\n overflow: hidden;\n}\n\nnav.menu {\n background: #ECEFF1;\n border-right: 1px solid #CFD8DC;\n position: absolute;\n top: 0;\n bottom: 0;\n height: 100%;\n left: 0;\n width: 58px;\n overflow: hidden;\n -webkit-transition: width .06s linear;\n transition: width .09s linear;\n -webkit-transform: translateZ(0) scale(1, 1);\n z-index: 1000;\n}\n\nnav.menu .mdl-tabs__tab-bar a {\n -webkit-transform: translateZ(0) scale(1, 1);\n -webkit-transition: all .1s linear;\n transition: all .1s linear;\n}\n\n.no-touch .scrollable.hover {\n overflow-y: hidden;\n}\n\n.no-touch .scrollable.hover:hover {\n overflow-y: auto;\n overflow: visible;\n}\n\na:hover,\na:focus {\n text-decoration: none;\n}\n\nnav.patient-menu {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n}\n\n\n\n\n</style>\n\n<div class=\"vertical-menu mdl-tabs mdl-js-tabs\"></div>\n`;\n\n\n\nclass BookWebComponent extends HTMLElement {\n constructor() {\n\n // // Always call super first in constructor\n super();\n\n\n // for dynamic tabs and table of contents\n // first object in array is book citation\n // rest (list of videos) is passed on to conductorWC\n\n // this.bookCitation = window.book.shift();\n\n // use this for table of contents etc.\n\n\n // window.book is the object on each html page\n // is book info and pages (lessons)\n\n\n this.book = window.book;\n\n // window.query is for the 'old' sytem that was based on query string\n // kept as a global for PM \n // update it here \n\n\n this.videoList = window.book.pages;\n\n // this is where the unique id should be added\n\n\n const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');\n\n\n // for multiple lessons from same vide each page will need a playerID (part random) and a videoID (from YT or Vimeo -- host)\n\n\n this.videoList.forEach(page => {\n\n page.PMCid = `PMC${genRanHex(3)}`;\n\n });\n\n // and post back to window\n window.query = this.videoList;\n\n\n }\n\n\n connectedCallback() {\n\n\n this.appendChild(template.content.cloneNode(true));\n\n\n this.addNav();\n\n this.addGrid();\n\n this.addListeners();\n\n this.addMaterialStyling();\n\n // this.addfooter();\n\n this.truncate();\n\n this.addPageTurnEvents()\n\n\n }\n\n\n\n addPageTurnEvents(){\n\n\n document.querySelectorAll('.mdl-tabs__tab').forEach(el => el.addEventListener(\"click\", function (e) {\n\n\n alert('hi')\n\n // PMinstance.forEach(pm => pm.plyrInstance.pause());\n\n }));\n\n }\n\n\n\n truncate(str, n) {\n return (str.length > n) ? str.slice(0, n - 1) + '…' : str;\n }\n\n addNav() {\n\n var navHTML = `\n <nav class=\"menu\">\n <div class=\"mdl-tabs__tab-bar\">\n <a href=\"#\" class=\"vertical-menu-header\"><span class=\"mdl-chip__contact mdl-color--blue-grey-50 mdl-color-text--blue-grey-500\"><i class=\"fa fa-music fa-1.75x\" aria-hidden=\"true\"></i>\n</span> ${this.truncate(this.book.compilation.title.slice(0,15))} <i class=\"fa fa-angle-right fa-fw\" aria-hidden=\"true\"></i></a>\n <div class=\"vertical-scroll\">\n <a href=\"#contents-panel\" class=\"mdl-tabs__tab is-active\"><span class=\"mdl-chip__contact\"><i class=\"fa fa-bars fa-1.5x\" aria-hidden=\"true\"></i></span></a>\n <!-- js tabs go here --> \n \n \n \n <a href=\"#\" id=\"userButton\" class=\"vertical-menu-header\"><span class=\"mdl-chip__contact mdl-color--blue-grey-50 mdl-color-text--blue-grey-500\"><i id=\"userButton\"class=\"fa fa-user fa-2x\" aria-hidden=\"true\"></i></a>\n </div>\n \n </nav> `\n\n // de-nest this will have to be updated\n document.querySelector(\"practise-book > div.vertical-menu\").insertAdjacentHTML('afterbegin', navHTML);\n\n this.addNavTab();\n\n\n }\n\n addNavTab() {\n\n\n\n\n this.videoList.forEach((element, index) => {\n\n\n\n var navTab = `<a id=\"tab_${index}\" href=\"#vid${element.PMCid}-panel\" class=\"mdl-tabs__tab\"><span class=\"mdl-chip__contact\">${element.table.title.charAt(0)} </span> ${this.truncate(element.table.title, 20)}</a>`\n\n document.querySelector(\"div.vertical-scroll\").insertAdjacentHTML('beforeend', navTab);\n\n });\n\n }\n\n\n addGrid() {\n\n var gridHtml = `\n <div id=\"grid\">\n \n <div id=\"panelContainer\">\n \n <div class=\"mdl-tabs__panel is-active\" id=\"contents-panel\">\n <div class=\"mdl-grid\" style=\"justify-content: center\">\n \n <div id=\"toc\" class=\"mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet mdl-cell--4-col-phone\">\n <h3>${this.book.compilation.title}</h3>\n </div>\n \n <div class=\"tocLabel mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--hide-phone \">\n <p style=\"font-size: x-large\">Table of</p><p style=\"font-size:xxx-large; color: #F60;\" >Contents</p>\n </div>\n \n </div>\n \n </div>\n\n </div>\n <div class=\"mdl-grid\"><p id='citation' class=\"mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-phone\" >${this.book.compilation.authors} videos, curated by ${this.book.compilation.editor} <a href=\"https://practisemaster.com/\"><svg style=\"height: 2rem;\" viewBox=\"0 0 79.381 79.381\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M4.967 74.414C2.25 71.644 1.5 43.19 1.5 39.31c0-3.797.755-31.685 3.467-34.343C7.737 2.25 36.19 1.5 40.07 1.5c3.797 0 31.685.755 34.343 3.467 2.717 2.77 3.467 31.224 3.467 35.104 0 3.797-.755 31.685-3.467 34.343-2.77 2.717-31.224 3.467-35.104 3.467-3.797 0-31.685-.755-34.343-3.467z\" clip-rule=\"evenodd\"></path><path fill=\"#f60\" fill-rule=\"evenodd\" d=\"M62.694 35.092c-.06 1.553-18.031 10.068-19.4 10.806-1.352.73-18.172 10.979-19.473 10.16-1.315-.828.296-20.65.342-22.203.044-1.537-.422-21.228.938-21.945 1.375-.725 17.734 10.581 19.057 11.397 1.31.807 18.595 10.249 18.536 11.785z\" clip-rule=\"evenodd\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M16.98 65.076h50.806\"></path></svg></a></p>\n </div>\n </div> `\n\n document.querySelector(\"practise-book > div.vertical-menu\").insertAdjacentHTML('beforeend', gridHtml);\n\n this.addGridTableContents();\n this.addGridPMPanel();\n\n }\n\n\n\n addGridTableContents() {\n\n this.videoList.forEach((element, index) => {\n\n var tocEntry = `<p id=\"toc_${index}\" class=\"fl clickToc\" style=\"font-size: large\" >${element.table.title}</p><p class=\"subtitle\"> ${element.companyBrand} teaches it in ${element.table.rows.length} steps</p>`;\n\n document.querySelector(\"#toc\").insertAdjacentHTML('beforeend', tocEntry);\n\n });\n\n\n }\n\n /// maybe at the very end add practise-conductor with createElement !\n\n\n addGridPMPanel() {\n\n this.videoList.forEach(element => {\n\n\n const delay = (amount = number) => {\n return new Promise((resolve) => { setTimeout(resolve, amount); });\n }\n\n window.nowConductor = element;\n\n var panel = `<div class=\"mdl-tabs__panel\" id=\"vid${element.PMCid}-panel\"><div class=\"mdl-grid\"><practise-conductor></practise-conductor></div></div>`;\n\n document.querySelector(\"#panelContainer\").insertAdjacentHTML('beforeend', panel);\n\n // var pc = document.createElement('practise-conductor');\n\n // document.querySelector(\"#vid\" + element.videoID + \"-panel\").insertAdjacentElement('beforeend', pc);\n\n\n // see 2SamePMconductor.html for why to use this\n // https://forum.freecodecamp.org/t/how-to-set-a-delay-between-foreach-loop-iteration-solved/88932/2\n\n\n delay(1000);\n\n });\n\n }\n\n addListeners() {\n\n document.querySelector('#userButton').addEventListener('click', function () { window.admiral(\"show\", \"transact.login\", { returnURL: \"https://getadmiral.com\" }) });\n\n //event listener for table of contents to call the corresponding tab\n // need the following:\n\n // var evt = document.createEvent(\"MouseEvents\");\n // evt.initMouseEvent(\"click\", true, true, window,\n // 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n\n // document.querySelector(\"body > practise-book > div > nav > div > div > a:nth-child(3)\").dispatchEvent(evt);\n\n\n // as a function for each toc item\n\n // so give each an id like toc_1 and tab_1\n // then doc.qsa.class of toc and foreach add event listener this.split id and by qs toc_id.dispatch\n\n\n window.tocClick = document.createEvent(\"MouseEvents\");\n window.tocClick.initMouseEvent(\"click\", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n\n\n document.querySelectorAll('.clickToc').forEach(toc => toc.addEventListener('click', function () {\n\n // alert(toc.id.split('_')[1]);\n\n document.querySelector('#tab_' + toc.id.split('_')[1]).dispatchEvent(window.tocClick);\n\n\n\n }))\n\n\n\n\n }\n\n addMaterialStyling() {\n\n\n // note: both should be updated with same code (refactor)\n // mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\n\n\n var pcs = document.querySelectorAll('practise-conductor');\n\n pcs.forEach(pc => {\n\n\n\n pc.classList.add('mdl-cell', 'mdl-cell--6-col', 'mdl-cell--8-col-tablet', 'mdl-cell--4-col-phone', 'mdl-cell--middle');\n\n\n });\n\n var pms = document.querySelectorAll('practise-master');\n\n pms.forEach(pm => {\n\n pm.classList.add('mdl-cell', 'mdl-cell--6-col', 'mdl-cell--8-col-tablet', 'mdl-cell--4-col-phone');\n\n pm.style['padding-top'] = '60px';\n\n\n });\n\n\n // need to move video title to the right\n // document.querySelector(\"#vid355114615-panel > div > practise-conductor\").shadowRoot.querySelector(\"#listSpan\")\n // .shadowRoot.querySelector(\"#listSpan\")\n\n\n\n\n // var panels = document.querySelectorAll('.mdl-tabs__panel');\n\n // panels.forEach(panel => {\n\n\n\n // });\n\n\n\n // // wrap table\n // wrap(document.querySelector('#tableholder'), document.createElement('<div class=\"mdl-cell mdl-cell--8-col-tablet mdl-cell--4-col-phone\">'));\n\n // // this wraps table <div class=\"mdl-cell mdl-cell--8-col-tablet mdl-cell--4-col-phone\"><div id=\"tableholder\">\n\n // // wrap vide (PM) this probably wraps them all\n\n // wrap(document.querySelector('practise-master'), document.createElement('<div class=\"mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\">'));\n\n // this wraps pm <div class=\"mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone\"> <practise-master class=\"container\"></practise-master>\n }\n\n addfooter() {\n\n\n this.insertAdjacentHTML('beforeend', `<p id='citation'>${this.book.compilation.authors} videos, <br> curated by ${this.book.compilation.editor} <a href=\"https://practisemaster.com/\"><svg style=\"height: 2rem;\" viewBox=\"0 0 79.381 79.381\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M4.967 74.414C2.25 71.644 1.5 43.19 1.5 39.31c0-3.797.755-31.685 3.467-34.343C7.737 2.25 36.19 1.5 40.07 1.5c3.797 0 31.685.755 34.343 3.467 2.717 2.77 3.467 31.224 3.467 35.104 0 3.797-.755 31.685-3.467 34.343-2.77 2.717-31.224 3.467-35.104 3.467-3.797 0-31.685-.755-34.343-3.467z\" clip-rule=\"evenodd\"></path><path fill=\"#f60\" fill-rule=\"evenodd\" d=\"M62.694 35.092c-.06 1.553-18.031 10.068-19.4 10.806-1.352.73-18.172 10.979-19.473 10.16-1.315-.828.296-20.65.342-22.203.044-1.537-.422-21.228.938-21.945 1.375-.725 17.734 10.581 19.057 11.397 1.31.807 18.595 10.249 18.536 11.785z\" clip-rule=\"evenodd\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"0\" stroke-width=\"3\" d=\"M16.98 65.076h50.806\"></path></svg></a></p>`)\n }\n\n}\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BookWebComponent);\n\n//# sourceURL=webpack://practisemaster/./src/modules/bookWebComponent.js?");
|
|
128
128
|
|
|
129
129
|
/***/ }),
|
|
130
130
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.7",
|
|
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",
|