headmin 0.1.1

data/src/js/headmin/headmin.js

@@ -0,0 +1,168 @@
+import 'ckeditor5-build-classic-simple-upload-adapter-image-resize';
+import Choices from "choices.js";
+import Sortable from 'sortablejs';
+import flatpickr from "flatpickr";
+import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
+import Rails from "@rails/ujs";
+
+import {Application} from "stimulus";
+import {definitionsFromContext} from "stimulus/webpack-helpers";
+
+export class Headmin {
+    static start() {
+        // Init Rails UJS
+        Rails.start()
+
+        // Init Stimulus
+        const application = Application.start()
+        const context = require.context("./controllers", true, /\.js$/)
+        application.load(definitionsFromContext(context))
+
+        // Init Plugins
+        this.initPlugins()
+    }
+
+    static initPlugins() {
+        this.initChoices()
+        this.initFlatpickrs()
+        this.initToasts()
+        this.initPopovers()
+        this.initCKEditors()
+    }
+
+    static initFlatpickrs() {
+        document.querySelectorAll('.flatpickr').forEach((element) => {
+            this.initFlatpickr(element)
+        })
+    }
+
+    static initFlatpickr(element) {
+        flatpickr(element, {
+            allowInput: true,
+            altInput: true,
+            altFormat: 'd/m/Y',
+        });
+    }
+
+    static initCKEditors() {
+        document.querySelectorAll('.ckeditor').forEach((element) => {
+            this.initCKEditor(element)
+        })
+    }
+
+    static csrfToken() {
+        return document.querySelector('meta[name="csrf-token"]').content
+    }
+
+    static initCKEditor(element) {
+        const defaultToolbarItems = [
+            'heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'outdent',
+            'indent', '|', 'link', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', '|', 'undo', 'redo'
+        ]
+        const requestedToolbarItems = element.dataset.ckeditorToolbar ? JSON.parse(element.dataset.ckeditorToolbar) : undefined
+        const toolbarItems = requestedToolbarItems ? requestedToolbarItems : defaultToolbarItems
+        const uploadPath = element.dataset.ckeditorUploadPath
+
+        ClassicEditor.create(
+            element,
+            {
+                toolbar: {
+                    items: toolbarItems
+                },
+                language: 'en',
+                image: {
+                    toolbar: [
+                        'imageTextAlternative',
+                        'imageStyle:full',
+                        'imageStyle:side'
+                    ]
+                },
+                table: {
+                    contentToolbar: [
+                        'tableColumn',
+                        'tableRow',
+                        'mergeTableCells'
+                    ]
+                },
+
+                simpleUpload: {
+                    uploadUrl: uploadPath,
+                    withCredentials: true,
+                    headers: {
+                        'X-CSRF-TOKEN': this.csrfToken(),
+                    }
+                }
+
+            })
+    }
+
+    static initChoices() {
+        this.initChoicesSelectTags()
+        this.initChoicesMultipleSelect()
+    }
+
+    static initChoicesSelectTags() {
+        document.querySelectorAll('.select-tags').forEach((select) => {
+
+            // Skip if already initialized
+            if (select.dataset.choice === 'active') {
+                return
+            }
+
+            // Create a new instance
+            new Choices(select, {
+                removeItemButton: true,
+                loadingText: 'Loading...',
+                noResultsText: 'No results found',
+                noChoicesText: 'No choices to choose from',
+                itemSelectText: 'Press to select',
+                addItems: true,
+                addItemText: (value) => {
+                    return `Press Enter to add <b>"${value}"</b>`;
+                },
+                maxItemText: (maxItemCount) => {
+                    return `Only ${maxItemCount} values can be added`;
+                },
+            });
+        })
+    }
+
+    static initChoicesMultipleSelect() {
+        document.querySelectorAll('.multiple-select').forEach((select) => {
+
+            // Skip if already initialized
+            if (select.dataset.choice === 'active') {
+                return
+            }
+
+            // Create a new instance
+            new Choices(select, {
+                removeItemButton: true,
+                loadingText: 'Loading...',
+                noResultsText: 'No results found',
+                noChoicesText: 'No choices to choose from',
+                itemSelectText: 'Press to select',
+                addItems: true,
+                addItemText: (value) => {
+                    return `Press Enter to add <b>"${value}"</b>`;
+                },
+                maxItemText: (maxItemCount) => {
+                    return `Only ${maxItemCount} values can be added`;
+                },
+            });
+        })
+    }
+
+    static initToasts() {
+        document.querySelectorAll('.toast').forEach((toast) => {
+            new bootstrap.Toast(toast, {})
+        })
+    }
+
+    static initPopovers() {
+        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+            return new bootstrap.Popover(popoverTriggerEl, {sanitize: false})
+        })
+    }
+}

data/src/js/headmin.js

@@ -0,0 +1 @@
+export {Headmin} from "./headmin/headmin"

data/src/scss/headmin/filter.scss

@@ -0,0 +1,33 @@
+.h-filter {
+  position: relative;
+}
+
+.h-filter-popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 2px;
+  padding: 10px;
+  background: $white;
+  z-index: $zindex-popover;
+  width: $popover-max-width;
+  @include reset-text();
+  @include font-size($popover-font-size);
+  word-wrap: break-word;
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  @include border-radius($popover-border-radius);
+  @include box-shadow($popover-box-shadow);
+
+  &.closed {
+    display: none;
+  }
+}
+
+.h-filter-remove {
+  border-left: 1px solid $gray-300;
+  padding-left: 8px;
+  margin-left: 2px;
+  i::before {
+    font-size: 0.8em;
+  }
+}

data/src/scss/headmin/filters.scss

@@ -0,0 +1,14 @@
+.h-filters, .h-filters-search {
+  width: 100%;
+  @include media-breakpoint-up(md) {
+    width: auto;
+  }
+}
+
+.h-filters .separator {
+  display: block;
+  width: 1px;
+  height: 30px;
+  background: $input-border-color;
+  margin: 0 15px 0 0;
+}

data/src/scss/headmin/form.scss

@@ -0,0 +1,39 @@
+.forms-group {
+  .card-footer {
+    border-top: none;
+  }
+}
+
+.repeater {
+  position: relative;
+}
+
+.repeater-row {
+  position: relative;
+
+  &:hover {
+    & > .repeater-row-remove {
+      visibility: visible;
+    }
+
+    & > .repeater-row-add {
+      visibility: visible;
+    }
+  }
+}
+
+.repeater-row-remove {
+  position: absolute;
+  top: calc(50% - 18px);
+  right: -22px;
+  z-index: 2;
+  visibility: hidden;
+}
+
+.repeater-row-add {
+  position: absolute;
+  top: calc(100% - 19px);
+  right: calc(50% - 18px);
+  z-index: 2;
+  visibility: hidden;
+}

data/src/scss/headmin/general.scss

@@ -0,0 +1,3 @@
+html {
+  height: 100%;
+}

data/src/scss/headmin/layout/body.scss

@@ -0,0 +1,6 @@
+.body {
+  background: $card-cap-bg;
+  height: 100vh;
+  overflow-y: scroll;
+}
+

data/src/scss/headmin/layout/sidebar.scss

@@ -0,0 +1,22 @@
+.sidebar {
+  font-size: $font-size-base * 1.1;
+  a, button {
+    color: $gray-400;
+  }
+  .nav-pills .nav-link.active {
+    background: $gray-900;
+  }
+  .dropdown-menu {
+    background: $gray-900;
+  }
+}
+
+.nav-brand {
+  svg, img {
+    max-width: 100%;
+    height: 30px;
+  }
+  svg {
+    fill: $white;
+  }
+}

data/src/scss/headmin/layout.scss

@@ -0,0 +1,2 @@
+@import "layout/body";
+@import "layout/sidebar";

data/src/scss/headmin/login.scss

@@ -0,0 +1,35 @@
+body.empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-signin {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin: auto;
+}
+
+.form-signin .checkbox {
+  font-weight: 400;
+}
+
+.form-signin .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

data/src/scss/headmin/table.scss

@@ -0,0 +1,32 @@
+.h-table {
+  thead, tfoot {
+    text-transform: uppercase;
+    color: $table-color;
+    letter-spacing: 0.05em;
+    font-size: $font-size-base * 0.85;
+  }
+
+  a {
+    color: $body-color;
+    text-decoration: none;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .table-drag-sort-handle {
+    cursor: move;
+  }
+}
+
+.h-table-actions {
+  width: 100%;
+  @include media-breakpoint-up(md) {
+    width: auto;
+  }
+
+  select {
+    min-width: 100%;
+  }
+}

data/src/scss/headmin/utilities.scss

@@ -0,0 +1,19 @@
+.btn-link {
+  text-decoration: none;
+}
+
+.h-btn-light {
+  color: $form-text-color;
+  background-color: $gray-200;
+}
+
+.h-btn-outline-light {
+  background-color: $white;
+  color: $form-text-color;
+  border-color: $input-border-color;
+}
+
+.h-btn-outline-transparent {
+  color: $form-text-color;
+  border: 1px solid $input-border-color;
+}

data/src/scss/headmin.scss

@@ -0,0 +1,58 @@
+// Vendor
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
+
+// Bootstrap
+@import "~bootstrap/scss/functions.scss";
+@import "~bootstrap/scss/variables.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "~bootstrap/scss/utilities.scss";
+@import "vendor/bootstrap/variables";  // Bootstrap overrides
+@import "~bootstrap/scss/root.scss";
+@import "~bootstrap/scss/reboot.scss";
+@import "~bootstrap/scss/type.scss";
+@import "~bootstrap/scss/images.scss";
+@import "~bootstrap/scss/containers.scss";
+@import "~bootstrap/scss/grid.scss";
+@import "~bootstrap/scss/tables.scss";
+@import "~bootstrap/scss/forms.scss";
+@import "~bootstrap/scss/buttons.scss";
+@import "~bootstrap/scss/transitions.scss";
+@import "~bootstrap/scss/dropdown.scss";
+@import "~bootstrap/scss/button-group.scss";
+@import "~bootstrap/scss/nav.scss";
+@import "~bootstrap/scss/navbar.scss";
+@import "~bootstrap/scss/card.scss";
+@import "~bootstrap/scss/accordion.scss";
+@import "~bootstrap/scss/breadcrumb.scss";
+@import "~bootstrap/scss/pagination.scss";
+@import "~bootstrap/scss/badge.scss";
+@import "~bootstrap/scss/alert.scss";
+@import "~bootstrap/scss/progress.scss";
+@import "~bootstrap/scss/list-group.scss";
+@import "~bootstrap/scss/close.scss";
+@import "~bootstrap/scss/toasts.scss";
+@import "~bootstrap/scss/modal.scss";
+@import "~bootstrap/scss/tooltip.scss";
+@import "~bootstrap/scss/popover.scss";
+@import "~bootstrap/scss/carousel.scss";
+@import "~bootstrap/scss/spinners.scss";
+@import "~bootstrap/scss/helpers.scss";
+@import "~bootstrap/scss/utilities/api.scss";
+
+// Choices
+@import "vendor/choices/variables"; // Choices overrides
+@import "~choices.js/src/styles/choices.scss";
+@import "vendor/choices/custom"; // Choices custom styling
+
+// Flatpickr
+@import "~flatpickr/dist/flatpickr";
+
+// Headmin
+@import "headmin/filters";
+@import "headmin/form";
+@import "headmin/general";
+@import "headmin/layout";
+@import "headmin/login";
+@import "headmin/table";
+@import "headmin/utilities";
+@import "headmin/filter";

data/src/scss/vendor/bootstrap/variables.scss

@@ -0,0 +1,71 @@
+// Colors
+$white: #ffffff;
+$gray-50: #f9fafb;
+$gray-100: #f8f9fa;
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #14171b;
+$black: #000000;
+
+// General
+$enable-shadows: true;
+
+// Typography
+$font-size-base: 0.9rem;
+$font-size-xs: $font-size-base * .75;
+$font-weight-medium: 500;
+$input-font-size: $font-size-base;
+$form-select-font-size: $font-size-base;
+$btn-font-size: $font-size-base;
+
+// Tables
+$table-striped-bg: $gray-100;
+$table-border-color: $gray-200;
+$table-group-separator-color: $gray-200;
+$table-hover-bg: $gray-100;
+$table-color: $gray-500;
+$table-th-font-weight: $font-weight-medium;
+$table-cell-padding-x: 1rem;
+$table-cell-padding-y: 0.8rem;
+
+// Breadcrumbs
+$breadcrumb-margin-bottom: 0.3rem;
+$breadcrumb-font-size: $font-size-sm;
+$breadcrumb-divider-color: $gray-300;
+$breadcrumb-active-color: $gray-300;
+
+// Pagination
+$pagination-color: $body-color;
+$pagination-active-bg: $gray-100;
+$pagination-active-color: $black;
+$pagination-active-border-color: $gray-400;
+$pagination-hover-color: $black;
+$pagination-focus-color: $black;
+
+// Buttons
+$btn-link-color: $gray-500;
+
+// Form
+$input-group-addon-bg: $gray-100;
+
+// Utilities
+$custom-utilities: (
+        "font-weight": (
+                property: font-weight,
+                class: fw,
+                values: (
+                        medium: $font-weight-medium,
+                        light: $font-weight-light,
+                        lighter: $font-weight-lighter,
+                        normal: $font-weight-normal,
+                        bold: $font-weight-bold,
+                        bolder: $font-weight-bolder
+                )
+        ),
+);
+$utilities: map-merge($utilities, $custom-utilities);

data/src/scss/vendor/choices/cross-inverse.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="21" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#000" fill-rule="evenodd">
+        <path d="M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z"/>
+        <path d="M0 18.364L18.364 0l2.548 2.548L2.548 20.912z"/>
+    </g>
+</svg>

data/src/scss/vendor/choices/cross.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="21" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#FFF" fill-rule="evenodd">
+        <path d="M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z"/>
+        <path d="M0 18.364L18.364 0l2.548 2.548L2.548 20.912z"/>
+    </g>
+</svg>

data/src/scss/vendor/choices/custom.scss

@@ -0,0 +1,28 @@
+.choices__inner {
+  padding: 3px;
+  min-height: auto;
+}
+
+.choices__input {
+  margin: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 2px 8px;
+}
+
+.choices__list--multiple, .choices__list--single {
+  .choices__item {
+    background: white;
+    color: $input-color;
+    border-color: $input-border-color;
+    font-weight: $input-font-weight;
+    padding: 2px 8px;
+    margin: 2px;
+  }
+}
+
+.choices[data-type*='select-one'] {
+  .choices__inner {
+    padding: 0;
+  }
+}

data/src/scss/vendor/choices/variables.scss

@@ -0,0 +1,16 @@
+$choices-font-size-lg: $input-font-size-lg;
+$choices-font-size-md: $input-font-size;
+$choices-font-size-sm: $input-font-size-sm;
+$choices-guttering: $grid-gutter-width;
+$choices-border-radius: $input-border-radius;
+$choices-border-radius-item: $input-border-radius;
+$choices-bg-color: $input-bg;
+$choices-bg-color-disabled: $input-disabled-bg;
+$choices-bg-color-dropdown: $input-bg;
+$choices-text-color: $input-color;
+$choices-keyline-color: $input-border-color;
+$choices-primary-color: $light;
+$choices-disabled-color: $input-disabled-bg;
+$choices-highlight-color: $primary;
+$choices-icon-cross: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==) !default;
+$choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==) !default;

data/webpack.config.js

@@ -0,0 +1,30 @@
+const path = require("path");
+
+module.exports = {
+    mode: 'development',
+    entry: `./src/js/headmin.js`,
+    output: {
+        path: path.join(__dirname, 'dist/js'),
+        filename: 'headmin.js'
+    },
+    module: {
+        rules: [
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader']
+            },
+            {
+                test: /\.js$/,
+                exclude: /node_modules\/(?!bullets-js)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            ['@babel/preset-env', { targets: "defaults" }]
+                        ]
+                    }
+                }
+            }
+        ]
+    }
+};