spina 2.18.0 → 2.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a3f9ec18d2a07a7aedd9c210abd460a3e0098b92342087d4103a7315921692ad
-  data.tar.gz: fa6abb6f02ec21bbe17d8f004dffe8154e36dc762be8e8d7f9c8284e4d33e5df
+  metadata.gz: '086e323d25a5656407e2aa82ddc38880377fbc9b17c133cf871960b93048dbe8'
+  data.tar.gz: db63f3e045d380e2e780123384458b256ed4d2a03c0eaf55ad84ff2f500f4565
 SHA512:
-  metadata.gz: a40c89a073e8b3355cd7b36269c1406b8a05ddd7e8d7ff6d7aa143e324daaf6b575fe673e730217eee7bc8b5219bbbd8bc3b36e64c32eb25f9c302d3cc8f1fb4
-  data.tar.gz: 5269cfc9d62772413beb28f28f49045ec845695308a65a72b0f000408694bce3fc3c7b4345e61cca33bce02ed17f3198c7d841410a41343eed8f162563e789fa
+  metadata.gz: e65a55997c54d92fef58a5e69eb27f5f2e2e642ea0070862b65a718d63e61cfc53622c1c62a2e4d187f9511a8b8adea77f1ae4308447943e17b4ba6c35e73a67
+  data.tar.gz: b42c96e25a501760af09946823032406af80a47b7af0842efc42c0ebdc29d8ed92707b03bd2fbc2484dd6154e2186d0e72880b5ac4dbb41e781189d6a4b95d5f

data/README.md

@@ -1,6 +1,6 @@
 <img src="https://spinacms.com/spinacms.png" alt="Spina CMS" width="225"/>
 
-[Spina CMS](https://spinacms.com) is an easy to use CMS that features a clean interface without distractions. [Live demo](http://spinacms-demo.herokuapp.com/admin/pages)
+[Spina CMS](https://spinacms.com) is an easy to use CMS that features a clean interface without distractions. 
 
 [![Ruby](https://github.com/SpinaCMS/Spina/actions/workflows/ruby.yml/badge.svg)](https://github.com/SpinaCMS/Spina/actions/workflows/ruby.yml)
 [![Code Climate](https://codeclimate.com/github/SpinaCMS/Spina/badges/gpa.svg)](https://codeclimate.com/github/SpinaCMS/Spina)

data/app/assets/javascripts/spina/controllers/data_binding_controller.js

@@ -0,0 +1 @@
+//= require ../libraries/stimulus-data-bindings@1.3.2.js

data/app/assets/javascripts/spina/controllers/page_select_controller.js

@@ -1,38 +1,3 @@
-import { Controller } from "@hotwired/stimulus"
+import SelectController from 'controllers/select_controller'
 
-export default class extends Controller {
-  
-  static get targets() {
-    return ['input', 'label', 'search']
-  }
-  
-  connect() {
-    // Show placeholder if there is no page selected yet
-    if (this.labelTarget.querySelector("turbo-frame") == undefined) {
-      this.clear()
-    }
-  }
-  
-  select(event) {
-    let button = event.currentTarget
-    
-    this.inputTarget.value = button.dataset.id
-    this.labelTarget.innerText = button.dataset.title
-  }
-  
-  clear() {
-    this.inputTarget.value = ""
-    this.labelTarget.innerHTML = `
-      <span class="text-gray-400">
-        ${this.element.dataset.placeholder}
-      </span>
-    `
-  }
-  
-  autofocus() {
-    setTimeout(function() {
-      this.searchTarget.focus()
-    }.bind(this), 100)
-  }
-  
-}
+export default class extends SelectController { }

data/app/assets/javascripts/spina/controllers/reveal_controller.js

@@ -1 +1 @@
-//= require ../libraries/stimulus-reveal@1.2.4.js
+//= require ../libraries/stimulus-reveal@1.4.2.js

data/app/assets/javascripts/spina/controllers/select_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  static get targets() {
+    return ['input', 'label', 'search']
+  }
+
+  connect() {
+    // Show placeholder if there is no page selected yet
+    if (this.labelTarget.querySelector("turbo-frame") == undefined) {
+      this.clear()
+    }
+  }
+
+  select(event) {
+    let button = event.currentTarget
+
+    this.inputTarget.value = button.dataset.id
+    this.labelTarget.innerText = button.dataset.title
+    this._dispatchChange()
+  }
+
+  clear() {
+    this.inputTarget.value = ""
+    this.labelTarget.innerHTML = `
+      <span class="text-gray-400">
+        ${this.element.dataset.placeholder}
+      </span>
+    `
+    this._dispatchChange()
+  }
+
+  autofocus() {
+    setTimeout(function () {
+      this.searchTarget.focus()
+    }.bind(this), 100)
+  }
+
+  _dispatchChange() {
+    this.inputTarget.dispatchEvent(new Event('change', { bubbles: true, cancelable: false }))
+  }
+
+}

data/app/assets/javascripts/spina/libraries/stimulus-data-bindings@1.3.2.js

@@ -0,0 +1,234 @@
+import { Controller } from '@hotwired/stimulus'
+
+/**
+ * One way data and visibility bindings for inputs
+ * @extends Controller
+ */
+export default class DataBindingController extends Controller {
+  /**
+   * Initialize bindings on connection to the DOM
+   */
+  connect() {
+    if (this.element.dataset.bindingDebug === "true") {
+      this.debugMode = true
+    }
+
+    this._debug("stimulus-data-binding: connecting to wrapper:", this.element)
+
+    const sourceElements = Array.from(this.element.querySelectorAll('[data-binding-target]'))
+    if (this.element.dataset.bindingTarget) sourceElements.unshift(this.element)
+
+    if (sourceElements.length === 0) this._debug("No source elements found. Did you set data-binding-target on your source elements?")
+
+    for (const sourceElement of sourceElements) {
+      if (this.debugMode) console.group("stimulus-data-binding: Source element")
+      this._debug("Source element found", sourceElement)
+
+      if (sourceElement.dataset.bindingInitial !== 'false') {
+        this._debug("Running initial binding on source element")
+        this._runBindings(sourceElement)
+      } else {
+        this._debug("%cNot running initial binding on source element as binding-initial is set to false", "color: rgba(150,150,150,0.8);")
+      }
+
+      if (this.debugMode) console.groupEnd()
+    }
+  }
+
+  /**
+   * Updates bindings for the current element.
+   * @param {Event} e - an event with a currentTarget DOMElement
+   */
+  update(e) {
+    this._runBindings(e.currentTarget)
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} source
+   */
+  _runBindings(source) {
+    this._debug("Searching for targets for source: ", source)
+    for (const targetRef of source.dataset.bindingTarget.split(' ')) {
+      const targetElements = this._bindingElements(targetRef)
+
+      if (targetElements.length === 0) this._debug(`Could not find any target elements for ref ${targetRef}. Have you set data-target-ref="${targetRef}" on your target elements?`)
+
+      for (const target of targetElements) {
+        if (this.debugMode) console.group("stimulus-data-binding: Target Element")
+        this._debug("Target found. Running bindings for target: ", target)
+
+        const bindingCondition = this._getDatum('bindingCondition', source, target)
+
+        if (bindingCondition) {
+          this._debug(`Evaluating binding condition: '${bindingCondition}'`)
+        } else {
+          this._debug(`%cNo binding condition set. Evaluating as true. To add a condition set 'data-binding-condition="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        const conditionPassed = this._evaluate(
+          bindingCondition,
+          {
+            source,
+            target
+          }
+        )
+
+        if (conditionPassed) {
+          this._debug(`Condition evaluated to: `, conditionPassed)
+        } else {
+          this._debug(`Condition evaluated to: `, conditionPassed)
+        }
+
+        const bindingValue = this._getDatum('bindingValue', source, target)
+
+        if (bindingValue) {
+          this._debug(`Evaluating binding value: '${bindingValue}'`)
+        } else {
+          this._debug(`%cNo binding value set, evaluating as true. to set a value for the attribute / property on your target elements set 'data-binding-value="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        const value = this._evaluate(
+          bindingValue,
+          {
+            source,
+            target
+          }
+        )
+
+        this._debug(`Value evaluated to: '${value}'`)
+
+        const bindingAttribute = this._getDatum(
+          'bindingAttribute',
+          source,
+          target
+        )
+
+        if (!bindingAttribute) {
+          this._debug(`%cNo binding attribute set. To add attributes to your target element set 'data-binding-attribute="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingAttribute) {
+          for (const attribute of bindingAttribute.split(' ')) {
+            if (conditionPassed) {
+              this._debug(`Condition passed so setting attribute '${attribute}' to '${value}'`)
+              target.setAttribute(attribute, value)
+            } else {
+              this._debug(`Condition failed so removing attribute '${attribute}'`)
+              target.removeAttribute(attribute)
+            }
+          }
+        }
+
+        const bindingProperty = this._getDatum(
+          'bindingProperty',
+          source,
+          target
+        )
+
+        if (!bindingProperty) {
+          this._debug(`%cNo binding property set. To add properties to your target element set 'data-binding-property="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingProperty) {
+          for (const prop of bindingProperty.split(' ')) {
+            const propertyValue = conditionPassed ? value : ''
+            if (target[prop] != propertyValue) { target.dataset.hasChanged = true }
+
+            if (conditionPassed) {
+              this._debug(`Condition passed so setting property '${prop}' from ${target[prop]} to '${value}'`)
+            } else {
+              this._debug(`Condition failed so setting property '${prop}' from ${target[prop]} to '' (empty string)`)
+            }
+
+            target[prop] = propertyValue
+          }
+        }
+
+        const bindingClass = this._getDatum(
+          'bindingClass',
+          source,
+          target
+        )
+
+        if (!bindingClass) {
+          this._debug(`%cNo binding class set. To add classes to your target element set 'data-binding-class="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingClass) {
+          for (const klass of bindingClass.split(' ')) {
+            if (conditionPassed) {
+              this._debug(`Condition passed so adding class '${klass}'`)
+              target.classList.add(klass)
+            } else {
+              this._debug(`Condition failed so removing class '${klass}'`)
+              target.classList.remove(klass)
+            }
+          }
+        }
+
+        const bindingEvent = this._getDatum('bindingEvent', source, target)
+
+        if (!bindingEvent) {
+          this._debug(`%cNo binding event set. To dispatch events on property change to your target element set 'data-binding-event="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingEvent) {
+          for (const event of bindingEvent.split(' ')) {
+            if (target.dataset.hasChanged) {
+              this._debug(`Target has changed so dispatching event ${event}`)
+              target.dispatchEvent(new Event(event, { cancelable: true, bubbles: true }))
+              delete target.dataset.hasChanged
+            } else {
+              this._debug(`No changes to target properties so not dispatching '${event}'`)
+            }
+          }
+        }
+
+        if (this.debugMode) console.groupEnd()
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {String} name - the name of the binding reference
+   */
+  _bindingElements(name) {
+    return this.element.querySelectorAll(`[data-binding-ref="${name}"]`)
+  }
+
+  /**
+   * @private
+   * @param {String} attribute - the attribute to fetch from the source / target dataaset
+   * @param {String} source - The source element to get the attribute from, only loads if target doesnt have it
+   * @param {String} target - The target element to get the attribute from, has precedence over the source
+   */
+  _getDatum(attribute, source, target) {
+    return target.dataset[attribute] || source.dataset[attribute]
+  }
+
+  /**
+   * @private
+   * @param {String} expression - expression to safe eval
+   * @param {Object} variables - variables to be present when evaluating the given expression
+   */
+  _evaluate(expression, variables = {}) {
+    if (!expression) return true
+    return new Function(
+      Object.keys(variables).map((v) => `$${v}`),
+      `return ${expression.trim()}`
+    )(...Object.values(variables))
+  }
+
+  /**
+  * @private
+  * @param {String} expression - expression to safe eval
+  * @param {Object} variables - variables to be present when evaluating the given expression
+  */
+  _debug(...args) {
+    if (this.debugMode) {
+      console.log(...args)
+    }
+  }
+}