Add basic styleguide page with copy to clipboard js 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
 // ==========================================================================