diff --git a/packages/core/src/lib/buildPatterns.js b/packages/core/src/lib/buildPatterns.js index dfb3362fe..c550a6880 100644 --- a/packages/core/src/lib/buildPatterns.js +++ b/packages/core/src/lib/buildPatterns.js @@ -40,7 +40,7 @@ module.exports = async (deletePatternDir, patternlab, additionalData) => { // const graph = (patternlab.graph = loadPatternGraph( patternlab, - deletePatternDir + patternlab.config.cleanPublic )); const graphNeedsUpgrade = !PatternGraph.checkVersion(graph); if (graphNeedsUpgrade) { @@ -55,7 +55,7 @@ module.exports = async (deletePatternDir, patternlab, additionalData) => { // Flags patternlab.incrementalBuildsEnabled = !( - deletePatternDir || graphNeedsUpgrade + patternlab.config.cleanPublic || graphNeedsUpgrade ); // diff --git a/packages/edition-twig/patternlab-config.json b/packages/edition-twig/patternlab-config.json index 213d3ec9c..86c2b8510 100644 --- a/packages/edition-twig/patternlab-config.json +++ b/packages/edition-twig/patternlab-config.json @@ -56,7 +56,7 @@ } }, "cacheBust": true, - "cleanPublic": true, + "cleanPublic": false, "defaultPattern": "all", "defaultShowPatternInfo": false, "ishControlsHide": { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss index 221bf64a2..4e159d170 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss @@ -24,7 +24,6 @@ @media all and (min-width: $pl-bp-large) { max-height: none; - height: 18rem; flex-direction: row; overflow: visible; } @@ -53,7 +52,6 @@ */ .pl-c-pattern-info__panel { padding: 1rem; - width: 100%; flex-shrink: 0; display: flex; flex-direction: column; diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js index 6e5f5daed..c63907a8b 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js +++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js @@ -19,13 +19,14 @@ export const modalStyleguide = { */ onReady() { // go through the panel toggles and add click event to the pattern extra toggle button - const els = document.querySelectorAll('.pl-js-pattern-extra-toggle'); - for (let i = 0; i < els.length; ++i) { - els[i].onclick = function(e) { - const patternPartial = this.getAttribute('data-patternpartial'); + const toggles = document.querySelectorAll('.pl-js-pattern-extra-toggle'); + + toggles.forEach(toggle => { + toggle.addEventListener('click', e => { + const patternPartial = toggle.getAttribute('data-patternpartial'); modalStyleguide.toggle(patternPartial); - }; - } + }); + }); }, /** @@ -63,15 +64,17 @@ export const modalStyleguide = { content = panelsUtil.addClickEvents(content, patternPartial); // make sure the modal viewer and other options are off just in case - modalStyleguide.close(patternPartial); + // modalStyleguide.close(patternPartial); // note it's turned on in the viewer modalStyleguide.active[patternPartial] = true; // make sure there's no content div = document.getElementById('pl-pattern-extra-' + patternPartial); - if (div.childNodes.length > 0) { - div.removeChild(div.childNodes[0]); + if (div && div.childNodes) { + if (div.childNodes.length > 0) { + div.removeChild(div.childNodes[0]); + } } // add the content @@ -108,9 +111,11 @@ export const modalStyleguide = { toggle.classList.remove('pl-is-active'); } - document - .getElementById('pl-pattern-extra-' + patternPartial) - .classList.remove('pl-is-active'); + if (document.getElementById('pl-pattern-extra-' + patternPartial)) { + document + .getElementById('pl-pattern-extra-' + patternPartial) + .classList.remove('pl-is-active'); + } }, /** diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js index 631855048..1be5ab01f 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js +++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js @@ -196,9 +196,6 @@ export const modalViewer = { */ refresh(patternData, iframePassback, switchText) { // if this is a styleguide view close the modal - if (iframePassback) { - modalViewer.close(); - } modalViewer.patternData = patternData; @@ -348,9 +345,6 @@ export const modalViewer = { data.iframePassback, data.switchText ); - - modalViewer.panelRendered = true; - modalViewer.previouslyRenderedPattern = data.patternData.patternPartial; } } else if ( data.event !== undefined && @@ -382,9 +376,11 @@ export const modalViewer = { }, _stateChanged(state) { - modalViewer.active = state.app.drawerOpened; - if (modalViewer.iframeElement) { - modalViewer._handleInitialModalViewerState(); + if (modalViewer.active !== state.app.drawerOpened) { + modalViewer.active = state.app.drawerOpened; + if (modalViewer.iframeElement) { + modalViewer._handleInitialModalViewerState(); + } } }, }; diff --git a/packages/uikit-workshop/src/scripts/components/pl-viewport/pl-viewport.js b/packages/uikit-workshop/src/scripts/components/pl-viewport/pl-viewport.js index b2c6da4d7..da437ad0c 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-viewport/pl-viewport.js +++ b/packages/uikit-workshop/src/scripts/components/pl-viewport/pl-viewport.js @@ -40,7 +40,6 @@ class IFrame extends BaseComponent { // self.receiveIframeMessage = self.receiveIframeMessage.bind(self); self.handleResize = self.handleResize.bind(self); self.handleMouseDown = self.handleMouseDown.bind(self); - self.handleIframeLoaded = self.handleIframeLoaded.bind(self); //set up the default for the self.baseIframePath = window.location.protocol + @@ -53,9 +52,7 @@ class IFrame extends BaseComponent { // update the currently active nav + add / update the page's query string handlePageLoad(e) { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const patternParam = urlParams.get('p'); + const patternParam = this.getPatternFromParam(); const currentPattern = e.detail.pattern || window.config.defaultPattern || 'all'; @@ -104,9 +101,7 @@ class IFrame extends BaseComponent { // navigate to the new PL page (based on the query string) when the page's pop state changes handlePageChange(e) { - var queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - let patternParam = urlParams.get('p'); + const patternParam = this.getPatternFromParam(); if (patternParam) { this.navigateTo(patternParam); @@ -327,25 +322,33 @@ class IFrame extends BaseComponent { } rendered() { - super.rendered && super.rendered(); this.iframe = this.querySelector('.pl-js-iframe'); this.iframeContainer = this.querySelector('.pl-js-vp-iframe-container'); this.iframeCover = this.querySelector('.pl-js-viewport-cover'); + + if (!this.hasUpdatedSrcset && this.iframe.src) { + this.hasUpdatedSrcset = true; + this.iframe.setAttribute('src', this.iframe.src); + this.iframe.removeAttribute('srcdoc'); + } + + super.rendered && super.rendered(); } - handleIframeLoaded() { - const self = this; - if (!this._hasInitiallyRendered) { - this._hasInitiallyRendered = true; - this.navigateTo(patternName, true); + getPatternFromParam() { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + let patternParam = urlParams.get('p'); + + if (patternParam && patternParam.includes('viewall')) { + patternParam = patternParam.replace(/-[0-9][0-9]/g, ''); } + return patternParam; } render() { // use either the page's query string or the patternPartial data to auto-update the URL - var queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - let patternParam = urlParams.get('p'); + let patternParam = this.getPatternFromParam(); if (!patternParam) { if (window.patternData) { @@ -412,6 +415,7 @@ class IFrame extends BaseComponent { className={`pl-c-viewport__iframe pl-js-iframe pl-c-body--theme-${this.themeMode}`} sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" // srcdoc={render()} + srcdoc={render()} src={url} /> {