Skip to content

Commit

Permalink
refactor: update HTML partials to be inlined / included via Webpack; …
Browse files Browse the repository at this point in the history 
…update inlined CSS used in iframe srcdoc to get bundled and inlined directly using Webpack
  • Loading branch information
@sghoweri
sghoweri committed Aug 13, 2018
1 parent d8c41e4 commit d0ba66f
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 53 deletions.
64 changes: 28 additions & 36 deletions packages/uikit-workshop/src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,49 @@
<html>

<head>
<title id="title">Pattern Lab</title>
<meta charset="UTF-8">
<title id="title">Pattern Lab</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#ababab"/>

<link inline href="styleguide/css/pattern-lab.critical.css" />
<meta name="theme-color" content="#ababab" />

<link rel="preload" as="script" href="styleguide/js/patternlab-viewer.js">
<link rel="preload" href="styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript>
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
</noscript>

<script inline async src="styleguide/js/cssrelpreload.min.js"></script>
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />

</head>

<body class="pl-c-body">

@@include('./partials/header.html')
@@include('./partials/iframe.html')
@@include('./partials/modal.html')
${require('./partials/header.html') }
${require('./partials/iframe.html') }
${require('./partials/modal.html') }

<!-- mustache templates -->
<script type="text/mustache" class="pl-js-pattern-nav-template">
@@include('./partials/pattern-nav.html')
<script type="text/mustache" class="pl-js-pattern-nav-template">
${require('./partials/pattern-nav.html') }
</script>

<script type="text/mustache" class="pl-js-ish-controls-template">
@@include('./partials/controls.html')
<script type="text/mustache" class="pl-js-ish-controls-template">
${require('./partials/controls.html') }
</script>

<!-- the template for the modal slider -->
<script type="text/mustache" class="pl-js-panel-template-base">
@@include('./partials/base-template.html')
<!-- the template for the modal slider -->
<script type="text/mustache" class="pl-js-panel-template-base">
${require('./partials/base-template.html') }
</script>

<!-- the template for code-related tabs in the code view slider -->
<script type="text/mustache" id="pl-panel-template-code">
@@include('./partials/panel-code-template.html')
<!-- the template for code-related tabs in the code view slider -->
<script type="text/mustache" id="pl-panel-template-code">
${require('./partials/panel-code-template.html') }
</script>

<!-- load Pattern Lab data -->
<script src="styleguide/data/patternlab-data.js" defer></script>
<!-- load Pattern Lab data -->
<script src="styleguide/data/patternlab-data.js" defer></script>

<!-- applying theme config to get classes on before PL renders so there's no flash of unstyled content -->
<!-- @todo fold this into it's own standalone JS component -->
<script>
// need to make sure that window.config is defined first on acccount of us async loading everything ;)
window.patternlab = window.patternlab || {};
window.patternlab.applyTheme = function(){
window.patternlab.applyTheme = function () {
if (window.config.theme.color === 'light') {
document.body.classList.add('pl-c-body--theme-light');
}
Expand Down Expand Up @@ -81,16 +72,18 @@
}
</script>

<script src="annotations/annotations.js" defer></script>
<script src="annotations/annotations.js" defer></script>

<!-- load the Pattern Lab viewer js -->
<script inline src="styleguide/js/whenDefined.min.js"></script>
<!-- load the Pattern Lab viewer js -->
<script>
${require('raw-loader!../../node_modules/whendefined/dist/whendefined.min.js')}
</script>
<script src="styleguide/js/patternlab-viewer.js" defer></script>

<!-- temp workaround to allow everything to be asynced / deffered with current setup. @todo: remove once refactored components + improved build process is in place. -->
<script>
whenDefined(window, 'config', function() {
if (window.config.theme){
whenDefined(window, 'config', function () {
if (window.config.theme) {
window.patternlab.applyTheme();
}
});
Expand All @@ -108,5 +101,4 @@

</body>

</html>

</html>
20 changes: 11 additions & 9 deletions packages/uikit-workshop/src/html/partials/iframe-loader.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<div class="pl-c-loader">
<div class="pl-c-loader__content">
<div class="pl-c-loader__message">Loading Pattern Lab</div>
<div class="pl-c-loader__spinner">
<svg class="pl-c-loader-svg" viewBox="0 0 268 255">
<circle class="pl-c-loader-svg__outer-circle" cx="134.2" cy="127.6" r="115.1"/>
<circle class="pl-c-loader-svg__inner-circle" cx="134.2" cy="127.6" r="66.3"/>
<path class="pl-c-loader-svg__electron" d="M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2
C240.3,28.1,253,40.7,253,56.3z"/>
<style>${require('../../sass/pattern-lab--iframe-loader.scss')}</style>
<!-- @todo: iterate on build so this file doesn't need to have pre-escaped quotes baked in -->
<div class=&quot;pl-c-loader&quot;>
<div class=&quot;pl-c-loader__content&quot;>
<div class=&quot;pl-c-loader__message&quot;>Loading Pattern Lab</div>
<div class=&quot;pl-c-loader__spinner&quot;>
<svg class=&quot;pl-c-loader-svg&quot; viewBox=&quot;0 0 268 255&quot;>
<circle class=&quot;pl-c-loader-svg__outer-circle&quot; cx=&quot;134.2&quot; cy=&quot;127.6&quot; r=&quot;115.1&quot;></circle>
<circle class=&quot;pl-c-loader-svg__inner-circle&quot; cx=&quot;134.2&quot; cy=&quot;127.6&quot; r=&quot;66.3&quot;></circle>
<path class=&quot;pl-c-loader-svg__electron&quot; d=&quot;M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2
C240.3,28.1,253,40.7,253,56.3z&quot;></path>
</svg>
</div>
</div>
Expand Down
19 changes: 11 additions & 8 deletions packages/uikit-workshop/src/html/partials/iframe.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<div class="pl-c-viewport pl-js-viewport">

<div class="pl-c-viewport__cover pl-js-viewport-cover"></div>
<div class="pl-c-viewport__cover pl-js-viewport-cover"></div>

<div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">
<div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">

<iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" srcdoc='<style>@@include('../../../dist/styleguide/css/pattern-lab--iframe-loader.css')</style>@@include('./iframe-loader.html')'></iframe>
<iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" srcdoc="${ require('../partials/iframe-loader.html') }"></iframe>

<div class="pl-c-viewport__resizer pl-js-resize-container">
<div class="pl-c-viewport__resizer pl-js-resize-container">

<div class="pl-c-viewport__resizer-handle pl-js-resize-handle"></div>
<div class="pl-c-viewport__resizer-handle pl-js-resize-handle"></div>

</div><!--end pl-c-viewport__resizer-->
</div>
<!--end pl-c-viewport__resizer-->

</div><!--end pl-c-viewport__iframe-wrapper-->
</div>
<!--end pl-c-viewport__iframe-wrapper-->

</div><!--end pl-c-viewport-->
</div>
<!--end pl-c-viewport-->

0 comments on commit d0ba66f

Please sign in to comment.