Add direction toggle

.eslintrc.js

@@ -1,9 +1,10 @@
 module.exports = {
     env: {
-        'node': true,
+        'browser': true,
         'commonjs': true,
+        'es2017': true,
         'jasmine': true,
-        'es2017': true
+        'node': true
     },
     extends: [
         'eslint:recommended'

theme/assets/js/bidi.js

@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(function() {
+    'use strict';
+
+    // custom bidi toggle for component previews.
+    const bidi = document.querySelector('.Pen-bidi-controls');
+
+    document.body.addEventListener('click', (e) => {
+        if (e.target.classList.contains('Pen-bidi-toggle')) {
+            const id = e.target.name;
+            const preview = document.querySelector(`#${id} .Preview-iframe`).contentWindow.document;
+            if (preview) {
+                preview.documentElement.setAttribute('dir', e.target.value);
+            }
+        }
+    }, true);
+
+    // reset bidi control after page refresh
+    if (bidi) {
+        bidi.reset();
+    }
+})();

theme/assets/sass/components/_pen.scss

@@ -34,3 +34,22 @@
         color: get-theme('link-color-hover');
     }
 }
+
+.Pen-utils {
+    display: flex;
+    margin-inline-start: auto;
+    min-width: 20vw;
+}
+
+.Pen-bidi-controls {
+    padding: 0 $spacing-md;
+
+    label {
+        display: inline-block;
+        padding: 0 $spacing-xs;
+    }
+
+    abbr {
+        text-decoration: none;
+    }
+}

theme/assets/sass/preview.scss

@@ -7,9 +7,4 @@
 html,
 body {
     height: 100%;
-    box-sizing: border-box;
-}
-
-body.site-preview {
-    padding: 1rem;
 }

theme/views/partials/pen/header.nunj

@@ -6,7 +6,17 @@
         </a>
     </h1>
 
-    <span class="Pen-preview-size" data-role="preview-size"></span>
+    <div class="Pen-utils">
 
-    {{ status.tag(entity.status) }}
+        <form class="Pen-bidi-controls">
+            <fieldset>
+                <label><abbr title="Left to Right">LTR</abbr>: <input class="Pen-bidi-toggle" type="radio" value="ltr" name="preview-{{ entity.id }}" checked></label>
+                <label><abbr title="Right to Left">RTL</abbr>: <input class="Pen-bidi-toggle" type="radio" value="rtl" name="preview-{{ entity.id }}"></label>
+            </fieldset>
+        </form>
+
+        <span class="Pen-preview-size" data-role="preview-size"></span>
+
+        {{ status.tag(entity.status) }}
+    </div>
 </div>

theme/views/partials/scripts.nunj

@@ -1,3 +1,4 @@
 {% for script in frctl.theme.get('scripts') %}
 <script src="{{ path(script) }}?cachebust={{ frctl.theme.get('version') }}"></script>
 {% endfor %}
+<script src="{{ path('/theme/js/bidi.js') }}"></script>

webpack.docs.build.config.js

@@ -13,7 +13,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const glob = require('glob');
 const path = require('path');
 
-const protocolJsConfig = {
+const protocolJSConfig = {
     devtool: false,
     entry: glob.sync('./assets/js/protocol/*.js').reduce((obj, el) => {
         const name = path.parse(el).name;
@@ -144,4 +144,21 @@ const fractalCSSConfig = {
     ]
 };
 
-module.exports = [protocolCSSConfig, protocolJsConfig, fractalCSSConfig];
+const fractalJSConfig = {
+    devtool: false,
+    entry: {
+        'bidi': path.resolve(__dirname, 'theme/assets/js/bidi.js'),
+    },
+    output: {
+        path: path.resolve(__dirname, 'theme/static/js'),
+        filename: '[name].js'
+    },
+    performance: {
+        hints: 'warning'
+    },
+    optimization: {
+        minimize: true
+    }
+};
+
+module.exports = [protocolCSSConfig, protocolJSConfig, fractalCSSConfig, fractalJSConfig];