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}
/>
{