Add styleguide basic page + copy to clipboard javascript module

assets/scripts/modules.js

@@ -1,2 +1,5 @@
 export {default as Load} from './modules/Load';
 export {default as Scroll} from './modules/Scroll';
+
+// Dev environment only
+export {default as Copyable} from './modules/Copyable';

assets/scripts/modules/Copyable.js

@@ -0,0 +1,82 @@
+import { module } from 'modujs'
+
+export default class extends module {
+    constructor(m) {
+        super(m)
+
+        // UI
+        this.$el = this.el
+        this.$tooltip = this.$('tooltip')[0]
+
+        this.events = {
+            click: {
+                item: 'onItemClick'
+            }
+        }
+    }
+
+    onItemClick(e) {
+        const $element = e.currentTarget
+
+        if (this.getData('content', $element)) {
+            navigator.clipboard.writeText(this.getData('content', $element))
+        } else {
+            this.copyFormattedHTML($element)
+        }
+
+        this.showTooltip()
+    }
+
+    showTooltip() {
+        clearTimeout(this.timeoutTooltip)
+
+        this.$tooltip.classList.add('is-visible')
+
+        this.timeoutTooltip = setTimeout(() => {
+            this.hideTooltip()
+        }, 1500)
+    }
+
+    hideTooltip() {
+        clearTimeout(this.timeoutTooltip)
+
+        this.$tooltip.classList.remove('is-visible')
+    }
+
+    copyFormattedHTML($element) {
+        let content = $element.innerHTML
+
+        // Create array using line breaks as separators
+        let lines = content.split(/(\r\n|\n|\r)/gm)
+        for (var i = 0; i < lines.length; i++) {
+            lines[i] = lines[i].replace(/(\r\n|\n|\r)/gm, "")
+        }
+
+        // Store empty lines indexes
+        let emptyLines = []
+        for (var i = 0; i < lines.length; i++) {
+            if (lines[i].trim().length == 0 ) {
+                emptyLines.push(i)
+            }
+        }
+
+        // Remove empty lines
+        for (var i = emptyLines.length - 1; i >= 0; i--) {
+            lines.splice(emptyLines[i], 1)
+        }
+
+        // Get indentation spaces count
+        const spacesBefore = lines[0].split('<')[0].length
+
+        // Remove indentation spaces for each line
+        for (var i = 0; i < lines.length; i++) {
+            lines[i] = lines[i].slice(spacesBefore)
+        }
+
+        // Join array
+        const formattedHTML = lines.join('\n')
+
+        // Copy to clipboard
+        navigator.clipboard.writeText(formattedHTML)
+    }
+}

assets/styles/components/_styleguide.scss

@@ -0,0 +1,94 @@
+// ==========================================================================
+// Components / Styleguide
+// ==========================================================================
+
+.c-styleguide {
+}
+
+.c-styleguide_tooltip {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    background-color: #000;
+    color: #fff;
+    border: 1px solid rgba(1,1,1,0.1);
+    border-radius: 4px;
+    padding: 6px 10px;
+    z-index: 10;
+    opacity: 0;
+    transform: translate3d(-50%, 30px, 0);
+
+    html.is-ready & {
+        transition: opacity 0.2s linear, transform 0.3s ease-in;
+
+        &.is-visible {
+            opacity: 1;
+            transform: translate3d(-50%, 0, 0);
+            transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
+        }
+    }   
+}
+
+.c-styleguide_block {
+    margin: 30px 0;
+
+    &.-flex {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 20px 10px;
+    }
+}
+
+.c-styleguide_heading {
+    display: block;
+    width: 100%;
+    padding: 20px 0;
+    font-size: 15px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    margin-bottom: 10px;
+}
+
+.c-styleguide_element {
+    position: relative;
+    padding: 15px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background-color 0.1s linear;
+
+    &:hover {
+        background-color: rgba(0,0,0,0.05);
+    }
+
+    > * {
+        margin: 0
+    }
+}
+
+.c-styleguide_color {
+}
+
+.c-styleguide_color_preview {
+    width: 100px;
+    height: 70px;
+    border-radius: 4px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+
+.c-styleguide_color_code {
+    display: block;
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.c-styleguide_color_name {
+    display: block;
+    font-weight: 700;
+    font-size: 12px;
+    text-transform: uppercase;
+    margin-top: 10px;
+}

assets/styles/main.scss

@@ -59,6 +59,9 @@
 @import "components/button";
 @import "components/form";
 
+// Dev environment only
+@import "components/styleguide";
+
 // Utilities
 // ==========================================================================
 

www/form.html

@@ -26,6 +26,7 @@
                             <li><a href="images.html">Images</a></li>
                             <li><a href="form.html" data-load="customTransition">Form</a></li>
                             <li><a href="grid.html">Grid</a></li>
+                            <li><a href="styleguide.html">Styleguide</a></li>
                         </ul>
                     </nav>
                 </header>
@@ -33,7 +34,6 @@
                 <main data-scroll-section>
                     <div class="o-container">
                         <h1 class="c-heading -h1">Page</h1>
-
                         <div class="o-layout">
                             <div class="o-layout_item u-1/2@from-small">
 

www/images.html

@@ -26,6 +26,7 @@
                             <li><a href="images.html">Images</a></li>
                             <li><a href="form.html" data-load="customTransition">Form</a></li>
                             <li><a href="grid.html">Grid</a></li>
+                            <li><a href="styleguide.html">Styleguide</a></li>
                         </ul>
                     </nav>
                 </header>

www/index.html

@@ -45,6 +45,7 @@
                         <li><a href="images.html">Images</a></li>
                         <li><a href="form.html" data-load="customTransition">Form</a></li>
                         <li><a href="grid.html">Grid</a></li>
+                        <li><a href="styleguide.html">Styleguide</a></li>
                     </ul>
                 </nav>
             </header>

www/styleguide.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html class="is-loading" lang="en" data-page="home">
+
+<head>
+    <meta charset="utf-8">
+    <title>Locomotive Boilerplate</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta name="theme-color" content="#ffffff">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+
+    <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
+        onload="this.media='all'; this.onload=null; this.isLoaded=true">
+</head>
+
+<body data-module-load>
+    <div data-load-container>
+        <div class="o-scroll" data-module-scroll="main">
+            <header data-scroll-section>
+                <a href="/">
+                    <h1>Locomotive Boilerplate</h1>
+                </a>
+                <nav>
+                    <ul>
+                        <li><a href="images.html">Images</a></li>
+                        <li><a href="form.html" data-load="customTransition">Form</a></li>
+                        <li><a href="grid.html">Grid</a></li>
+                        <li><a href="styleguide.html">Styleguide</a></li>
+                    </ul>
+                </nav>
+            </header>
+
+            <main data-module-copyable>
+                <section data-scroll-section>
+                    <div class="c-styleguide || o-container">
+                        
+                        <div class="c-styleguide_block -block">
+                            <h2 class="c-styleguide_heading">Headings</h2>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h1 class="c-heading -h1">
+                                    <span>Heading 1</span>
+                                </h1>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h2 class="c-heading -h2">Heading 2</h2>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h3 class="c-heading -h3">Heading 3</h3>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h4 class="c-heading -h4">Heading 4</h4>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h5 class="c-heading -h5">Heading 5</h5>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <h6 class="c-heading -h6">Heading 6</h6>
+                            </div>
+                        </div>
+
+                        <div class="c-styleguide_block -flex">
+                            <h2 class="c-styleguide_heading">Buttons</h2>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <button class="c-button -regular">
+                                    <span class="c-button_label">Button regular</span>
+                                </button>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <button class="c-button -small">
+                                    <span class="c-button_label">Button small</span>
+                                </button>
+                            </div>
+                            <div class="c-styleguide_element" data-copyable="item">
+                                <button class="c-button -large">
+                                    <span class="c-button_label">Button large</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="c-styleguide_block -flex">
+                            <h2 class="c-styleguide_heading">Icons</h2>
+                        </div>
+
+                        <div class="c-styleguide_block -flex">
+                            <h2 class="c-styleguide_heading">Colors</h2>
+
+                            <div class="c-styleguide_element" data-copyable="item" data-copyable-content="--color-text">
+                                <div class="c-styleguide_color">
+                                    <div class="c-styleguide_color_preview" class="u-background-color-text" style="background-color: #000000;"></div>
+                                    <span class="c-styleguide_color_name">Text</span>
+                                    <span class="c-styleguide_color_code">#000000</span>
+                                </div>
+                            </div>
+
+                            <div class="c-styleguide_element" data-copyable="item" data-copyable-content="--color-background">
+                                <div class="c-styleguide_color">
+                                    <div class="c-styleguide_color_preview" class="u-background-color-background" style="background-color: #ffffff;"></div>
+                                    <span class="c-styleguide_color_name">Background</span>
+                                    <span class="c-styleguide_color_code">#ffffff</span>
+                                </div>
+                            </div>
+
+                            <div class="c-styleguide_element" data-copyable="item" data-copyable-content="--color-primary">
+                                <div class="c-styleguide_color">
+                                    <div class="c-styleguide_color_preview" class="u-background-color-primary" style="background-color: #00ff00;"></div>
+                                    <span class="c-styleguide_color_name">Primary</span>
+                                    <span class="c-styleguide_color_code">#00ff00</span>
+                                </div>
+                            </div>
+
+                            <div class="c-styleguide_element" data-copyable="item" data-copyable-content="--color-secondary">
+                                <div class="c-styleguide_color">
+                                    <div class="c-styleguide_color_preview" class="u-background-color-secondary" style="background-color: #0000ff;"></div>
+                                    <span class="c-styleguide_color_name">Secondary</span>
+                                    <span class="c-styleguide_color_code">#0000ff</span>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </section>
+
+                <span class="c-styleguide_tooltip" data-copyable="tooltip">Copied</span>
+            </main>
+
+            <footer data-scroll-section>
+                <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
+                        title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
+            </footer>
+        </div>
+    </div>
+
+    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
+        crossorigin="anonymous"></script>
+    <script nomodule
+        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
+        crossorigin="anonymous"></script>
+
+    <script src="assets/scripts/vendors.js" defer></script>
+    <script src="assets/scripts/app.js" defer></script>
+</body>
+
+</html>