adminterface 0.0.0 → 0.2.0

data/app/assets/stylesheets/adminterface/mixins/_variables.scss

@@ -0,0 +1,100 @@
+//***** Logged Out
+$logged-out-bg: $light !default;
+$logged-out-logo-height: 64px !default;
+
+//***** Logged In
+// Layout
+$layout-navigation-top: () !default;
+$layout-navigation-sidebar: () !default;
+$layout-navigation-aside: () !default;
+
+$layout-navigation-top: map-merge(
+  (
+    header: (
+      height: 64px,
+      z-index: $zindex-fixed
+    ),
+    title_bar: (
+      height: 54px,
+      z-index: $zindex-fixed - 1
+    )
+  ),
+  $layout-navigation-top
+);
+
+$layout-navigation-sidebar:  map-merge(
+  (
+    "header": 280px,
+    "title_bar": 64px,
+    "breakpoint": lg,
+    "menu-item-active-bg": shade-color($primary, 20%)
+  ),
+  $layout-navigation-sidebar
+);
+
+$layout-navigation-aside:  map-merge(
+  (
+    "header": 280px,
+    "title_bar": 64px,
+    "breakpoint": lg,
+    "menu-item-active-bg": shade-color($primary, 20%)
+  ),
+  $layout-navigation-aside
+);
+
+// Header
+$header-icon-size: 18px !default;
+
+// Site Title
+$site-title-logo-height: 32px !default;
+
+// Breadcrumb
+$breadcrumb-item-max-width: 200px !default;
+
+// Sidebar
+$sidebar-breakpoint: lg !default;
+$sidebar-left-width: 320px !default;
+$sidebar-left-bg: $body-bg !default;
+$sidebar-right-width: 320px !default;
+$sidebar-right-bg: $body-bg !default;
+
+// Aside
+$aside-breakpoint: lg !default;
+$aside-width: 320px !default;
+$aside-box-shadow: 0 1px 1px $card-border-color, $box-shadow-sm !default;
+
+// Attributes Table
+$attribute-table-key-width: 30% !default;
+
+// Form
+$form-sortable-placeholder-bg: rgba($info, 0.12) !default;
+$form-sortable-drag-bg: $white !default;
+$form-sortable-placeholder-max-height: none !default;
+$form-sortable-drag-max-height: 140px !default;
+
+// Icon
+$aa-icon-font-family: "bootstrap-icons" !default;
+$aa-icon-size: 22px !default;
+$aa-icons: (
+  "table-sorted-asc": "\f145",
+  "table-sorted-desc": "\f124",
+  "form-has-many-sortable-handle": "\f3fe",
+  "form-has-many-destroy": "\f62a",
+  "caret-dots": "\f5d4",
+  "visible": "\f33e",
+  "hidden": "\f33f",
+) !default;
+$custom-icons: () !default;
+$aa-icons: map-merge($aa-icons, $custom-icons);
+
+// Thumbnails
+$thumbnail-default-size: sm !default;
+$thumbnail-sizes: (
+  "xs": 24px,
+  "sm": 32px,
+  "md": 64px,
+  "lg": 128px,
+) !default;
+
+// Datepicker
+$datepicker-option-today-bg: transparent !default;

data/app/assets/stylesheets/adminterface/placeholders/_aa_icon.scss

@@ -0,0 +1,10 @@
+%aa-icon {
+  font-family: $aa-icon-font-family;
+  font-size: $aa-icon-size;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  vertical-align: middle;
+
+  &::before { vertical-align: baseline; }
+}

data/app/assets/stylesheets/adminterface/placeholders/_all.scss

@@ -0,0 +1,3 @@
+@import './aa_icon';
+@import './background';
+@import './typography';

data/app/assets/stylesheets/adminterface/placeholders/_background.scss

@@ -0,0 +1,5 @@
+%background-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

data/app/assets/stylesheets/adminterface/placeholders/_typography.scss

@@ -0,0 +1,11 @@
+%text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+%list-unstyled {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

data/app/assets/stylesheets/adminterface/vendors/_all.scss

@@ -0,0 +1,4 @@
+@import './bootstrap/all';
+@import './flatpickr/all';
+@import './tom_select/all';
+@import './trix/all';

data/app/assets/stylesheets/adminterface/vendors/bootstrap/_all.scss

@@ -0,0 +1,6 @@
+@import './components/buttons';
+@import './components/dropdowns';
+@import './components/form/labels';
+@import './components/navs';
+@import './content/tables';
+@import './content/typography';

data/app/assets/stylesheets/adminterface/vendors/bootstrap/_variables.scss

@@ -0,0 +1,51 @@
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $blue !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+
+$link-color: $info !default;
+
+$custom-colors: () !default;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark
+) !default;
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+$table-active-bg-factor: 0.1 !default;
+$table-active-bg: rgba($primary, $table-active-bg-factor) !default;

data/app/assets/stylesheets/adminterface/vendors/bootstrap/components/_buttons.scss

@@ -0,0 +1,5 @@
+// https://getbootstrap.com/docs/4.0/components/buttons/
+.btn * {
+  display: inline-block;
+  vertical-align: middle;
+}

data/app/assets/stylesheets/adminterface/vendors/bootstrap/components/_dropdowns.scss

@@ -0,0 +1,28 @@
+.dropdown-toggle {
+  &::after { vertical-align: middle; }
+  &.no-caret::after { content: none; }
+
+  &.caret-dots::after {
+    @extend %aa-icon;
+
+    content: map-get($aa-icons, 'caret-dots');
+    border: 0;
+  }
+}
+
+.dropdown-item {
+  &:not(a) {
+    padding: 0;
+
+    & > a { padding: $dropdown-item-padding-y $dropdown-item-padding-x; }
+  }
+
+  a {
+    display: block;
+
+    &,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/vendors/bootstrap/components/_navs.scss

@@ -0,0 +1,25 @@
+.nav + .tab-content { margin-top: $spacer; }
+
+.nav-tabs {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-bottom: 0;
+  position: relative;
+
+  .nav-link {
+    position: relative;
+
+    & > * { vertical-align: middle; }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  }
+}

data/app/assets/stylesheets/adminterface/vendors/bootstrap/components/form/_labels.scss

@@ -0,0 +1,5 @@
+.label-group {
+  display: flex;
+
+  label { flex: 1; }
+}

data/app/assets/stylesheets/adminterface/vendors/bootstrap/content/_tables.scss

@@ -0,0 +1,2 @@
+// https://getbootstrap.com/docs/5.0/content/tables/
+.table-responsive { overflow-y: hidden; }

data/app/assets/stylesheets/adminterface/vendors/bootstrap/content/_typography.scss

@@ -0,0 +1,2 @@
+// https://getbootstrap.com/docs/5.0/content/typography/
+pre { white-space: normal !important; }

data/app/assets/stylesheets/adminterface/vendors/flatpickr/_all.scss

@@ -0,0 +1,2 @@
+@import './variables';
+@import './main';

data/app/assets/stylesheets/adminterface/vendors/flatpickr/_variables.scss

@@ -0,0 +1,7 @@
+$flatpickr-day-border-radius: $border-radius !default;
+$flatpickr-day-bg: $gray-200 !default;
+$flatpickr-day-hover-bg: $gray-200 !default;
+$flatpickr-day-selected-bg: $component-active-bg !default;
+$flatpickr-ctrl-bg: $gray-200 !default;
+$flatpickr-ctrl-padding: 0.25rem !default;
+$flatpickr-ctrl-hover-bg: $component-active-bg !default;

data/app/assets/stylesheets/adminterface/vendors/flatpickr/main.scss

@@ -0,0 +1,50 @@
+.flatpickr-calendar {
+  .flatpickr-day { border-radius: $flatpickr-day-border-radius; }
+
+  .flatpickr-months {
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      padding: 5px 10px;
+
+      &:hover svg {
+        fill: $flatpickr-ctrl-hover-bg;
+      }
+    }
+  }
+
+  .flatpickr-current-month {
+    display: flex;
+    padding: $flatpickr-ctrl-padding;
+
+    .flatpickr-monthDropdown-months { margin-right: $flatpickr-ctrl-padding; }
+
+    .numInputWrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    .numInputWrapper,
+    .flatpickr-monthDropdown-months {
+      flex: 1;
+      background: $flatpickr-ctrl-bg;
+    }
+  }
+
+  .flatpickr-day.selected {
+    background: $flatpickr-day-selected-bg;
+    border-color: $flatpickr-day-selected-bg;
+    color: color-contrast($flatpickr-day-selected-bg);
+  }
+
+  .flatpickr-day.today {
+    background: $flatpickr-day-bg;
+    border-color: $flatpickr-day-bg;
+    color: color-contrast($flatpickr-day-bg);
+  }
+
+  .flatpickr-day:hover {
+    background: $flatpickr-day-hover-bg;
+    border-color: $flatpickr-day-hover-bg;
+    color: color-contrast($flatpickr-day-hover-bg);
+  }
+}

data/app/assets/stylesheets/adminterface/vendors/tom_select/_all.scss

@@ -0,0 +1 @@
+@import './main';

data/app/assets/stylesheets/adminterface/vendors/tom_select/_main.scss

@@ -0,0 +1,6 @@
+.input-group {
+  .ts-control:nth-child(2) {
+    border-top-left-radius: $input-border-radius !important;
+    border-bottom-left-radius: $input-border-radius !important;
+  }
+}

data/app/assets/stylesheets/adminterface/vendors/trix/_actiontext.scss

@@ -0,0 +1,36 @@
+//
+// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+// inclusion directly in any other asset bundle and remove this file.
+//
+@import 'trix/dist/trix';
+
+// We need to override trix.css’s image gallery styles to accommodate the
+// <action-text-attachment> element we wrap around attachments. Otherwise,
+// images in galleries will be squished by the max-width: 33%; rule.
+.trix-content {
+  .attachment-gallery {
+    > action-text-attachment,
+    > .attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      > action-text-attachment,
+      > .attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/vendors/trix/_all.scss

@@ -0,0 +1,3 @@
+@import './variables';
+@import './actiontext';
+@import './trix_editor';

data/app/assets/stylesheets/adminterface/vendors/trix/_trix_editor.scss

@@ -0,0 +1,86 @@
+trix-editor {
+  background: $input-bg;
+  border: $input-border-width solid $input-border-color;
+  border-width: 0 0 $input-border-width;
+  &:empty:not(:focus)::before { color: $input-placeholder-color; }
+}
+
+trix-toolbar {
+  .trix-button-row {
+    flex-wrap: wrap !important;
+    justify-content: flex-start !important;
+  }
+
+  .trix-button-group {
+    margin-left: 0 !important;
+    background: $trix-toolbar-btn-group-bg;
+    border: 0;
+
+    &:not(:last-child) { margin-right: 1.5vw; }
+
+    .trix-button {
+      height: auto;
+      padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+      color: color-contrast($trix-toolbar-btn-group-bg);
+      border-bottom: 0;
+      border: 0;
+
+      &:first-child { border-radius: $btn-border-radius  0 0 $btn-border-radius; }
+      &:last-child { border-radius: 0 $btn-border-radius $btn-border-radius 0; }
+
+      &.trix-active {
+        color: color-contrast($trix-toolbar-btn-active-bg);
+        background: $trix-toolbar-btn-active-bg;
+      }
+    }
+  }
+
+  .trix-button-group-spacer { display: none; }
+
+  .trix-input--dialog {
+    background-color: $trix-input-dialog-bg;
+    border: $trix-input-dialog-border;
+    border-radius: $trix-input-dialog-border-radius;
+
+    &.validate:invalid {
+      border-color: $trix-input-dialog-invalid-color;
+      box-shadow: none;
+    }
+  }
+
+  .trix-button--icon::before {
+    @extend %aa-icon;
+
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    font-size: $trix-icon-size;
+    text-indent: 0;
+    background-image: none;
+
+    @include transform(translate(-50%, -50%));
+  }
+
+  @each $_key, $_value in $trix-icons {
+    .trix-button--icon-#{$_key}::before { content: $_value; }
+  }
+}
+
+.trix-content {
+  img {
+    height: auto !important;
+    max-width: 100% !important;
+  }
+
+  blockquote { border-left-color: $trix-content-blockquote-bg; }
+
+  pre {
+    color: $trix-content-pre-color;
+    white-space: pre !important;
+    background: $trix-content-pre-bg;
+  }
+
+  .attachment__caption { color: $trix-content-attachment-caption-color; }
+  .attachment--file { border-color: $trix-content-attachment-border-color; }
+}

data/app/assets/stylesheets/adminterface/vendors/trix/_variables.scss

@@ -0,0 +1,31 @@
+$trix-toolbar-btn-group-bg: $gray-200 !default;
+$trix-toolbar-btn-active-bg: $component-active-bg !default;
+
+$trix-content-pre-bg: $gray-200 !default;
+$trix-content-pre-color: inherit !default;
+$trix-content-blockquote-bg: $gray-200 !default;
+$trix-content-attachment-caption-color: $secondary !default;
+$trix-content-attachment-border-color: $border-color !default;
+
+$trix-input-dialog-bg: $modal-content-bg !default;
+$trix-input-dialog-border: $modal-content-border-width solid $modal-content-border-color !default;
+$trix-input-dialog-border-radius: $modal-content-border-radius !default;
+$trix-input-dialog-invalid-color: $danger !default;
+
+$trix-icon-size: 20px !default;
+$trix-icons: (
+  'attach': '\f4b3',
+  'bold': '\f5f0',
+  'bullet-list': '\f478',
+  'code': '\f2c8',
+  'decrease-nesting-level': '\f5c6',
+  'heading-1': '\f3da',
+  'increase-nesting-level': '\f5c5',
+  'italic': '\f5f4',
+  'link': '\f470',
+  'number-list': '\f475',
+  'quote': '\f190',
+  'redo': '\f116',
+  'strike': '\f5f5',
+  'undo': '\f117',
+) !default;

data/app/javascript/adminterface/base.js

@@ -0,0 +1,14 @@
+import 'bootstrap'
+import './config'
+import './initializers'
+
+export { default as InputCounter } from './lib/plugins/input_counter'
+export { default as ConfirmDialog } from './lib/confirm_dialog'
+export { default as DetachedDropdown } from './lib/detached_dropdown'
+export { default as initBootstrap } from './initializers/bootstrap'
+export { default as initDetachedDropdown } from './initializers/detached_dropdown'
+export { default as initFlatpickr } from './initializers/plugins/flatpickr'
+export { default as initInputCounter } from './initializers/plugins/input_counter'
+export { default as initPasswordVisibility } from './initializers/plugins/password_visibility'
+export { default as initTomSelect } from './initializers/plugins/tom_select'
+export * from './lib/input'

data/app/javascript/adminterface/config.js

@@ -0,0 +1,129 @@
+/* global adminterface */
+import { camalize, getObjectValue, setObjectValue } from './lib/utils'
+import { inputMapping } from './lib/input'
+import { v4 as uuidv4 } from 'uuid'
+
+const info = {
+  title: 'ADMINTERFACE',
+  docURL: 'https://adminterface.io'
+}
+
+const admonitionStyles = {
+  heading: {
+    head: 'font-weight: bold; color: #3C324C; background: #9E82C8;',
+    body: 'color: white; background: #3C324C;'
+  },
+  success: {
+    head: 'font-weight: bold; color: #003100; background: #58B67E',
+    body: 'color: white; background: #003100'
+  },
+  danger: {
+    head: 'font-weight: bold; color: #4B1113; background: #E13238',
+    body: 'color: white; background: #4B1113'
+  }
+}
+
+const admonition = (text, type) => {
+  console.log(text, admonitionStyles[type].head, admonitionStyles[type].body, '')
+}
+
+const parseMeta = (name) => {
+  const meta = (document.querySelector(`#meta-tags-for-js meta[name="${name}"]`))
+
+  try {
+    return JSON.parse(meta.content)
+  } catch (_err) {
+    return {}
+  }
+}
+
+window.adminterface = {
+  _debug: false,
+  _observers: [],
+  _trackers: () => {
+    return [].slice.call(document.querySelectorAll('[data-observer-id]'))
+  },
+  meta: {
+    inputs: inputMapping
+  },
+  get observers () {
+    const results = {}
+
+    this._getPristineObservers().forEach(item => {
+      const currentData = getObjectValue(results, item.path) || []
+      const data = { observerId: item.observerId, data: item.data }
+      const newData = [...currentData, data]
+      setObjectValue(results, item.path, newData)
+    })
+
+    return results
+  },
+  get version () {
+    if (this._version) return this._version
+
+    const metaVersion = document.querySelector('meta[name="version"]')
+    this._version = (metaVersion || {}).content
+    return this._version
+  },
+  get debug () {
+    return this._debug
+  },
+  set debug (value) {
+    this._debug = !!value
+
+    if (this._debug) {
+      admonition(`%c ${info.title} %c DEBUGGER ON %c`, 'heading')
+      admonition("%c WARNING %c PLEASE ENSURE YOU DISABLE THE DEBUGGER IN PRODUCTION AS IT MIGHT IMPACT YOUR APP'S PERFORMANCE! %c", 'danger')
+      console.log('Adminterface will now track its JavaScript instances in the "adminterface.observers" object.')
+    } else {
+      admonition(`%c ${info.title} %c DEBUGGER OFF %c`, 'heading')
+    }
+
+    this.help()
+  },
+  help: function () {
+    console.log(`%cVERSION: %c${this.version}`, 'font-weight: bold;', '')
+    console.log(`%cDOCS: %c${info.docURL}`, 'font-weight: bold;', '')
+    console.log('%cCOMMANDS:', 'font-weight: bold;')
+    admonition('∟ %c %c adminterface.debug = true %c Turn on the debugger. ', 'success')
+    admonition('∟ %c %c adminterface.debug = false %c Turn off the debugger. ', 'success')
+    admonition('∟ %c %c adminterface.observers %c View Adminterface\'s JavaScript instances. ', 'success')
+    admonition('∟ %c %c adminterface.meta %c View configurations and data passed from the backend. ', 'success')
+    admonition('∟ %c %c adminterface.help() %c List available commands and properties. ', 'success')
+    admonition('∟ %c %c adminterface.clear() %c Clear the observer object. ', 'success')
+  },
+  clear: function () {
+    const trackers = this._trackers()
+    this._observers = []
+    trackers.forEach(item => item.removeAttribute('data-observer-id'))
+    console.log('observer cleared')
+    return true
+  },
+  addObserver: function (target, data, path) {
+    if (!this.debug) return
+
+    const id = uuidv4()
+    const observer = { id: id, path: path, data: data }
+    this._getPristineObservers()
+
+    if (target) target.setAttribute('data-observer-id', id)
+
+    this._observers = [...this._observers, observer]
+    return id
+  },
+  _getPristineObservers: function () {
+    const observers = this._observers || []
+    const ids = this._trackers().map(el => el.dataset.observerId)
+    this._observers = observers.filter(item => ids.includes(item.id))
+    return this._observers
+  },
+  _addMeta: function (name) {
+    const content = parseMeta(name)
+    this.meta = { ...this.meta, ...{ [camalize(name)]: content } }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const metaTags = ['components', 'translations', 'css_classes', 'countries', 'time_zones']
+  metaTags.forEach((name) => adminterface._addMeta(name))
+})

data/app/javascript/adminterface/initializers/batch_actions.js

@@ -0,0 +1,9 @@
+import BatchActions from '../lib/batch_actions'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('main')
+
+  /* eslint-disable no-new */
+  if (el) new BatchActions(el)
+  /* eslint-enable no-new */
+})