bullet_train-fields 1.30.1 → 1.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 300757564ae5f5ab1f4d33521caee2586fe5a017f96ecc5f9d40830c70bf328e
-  data.tar.gz: '09f46f4bb069c4d767f95d63dbd349ab2a318f4207a6037d0483c2623662da69'
+  metadata.gz: 10baa4940e255682cde49f971cf31ce5eaa53b05e56ef712ed69d5ca829fef55
+  data.tar.gz: 34385f1e90beb26274e9b83e424e3e6d318c6a67a59d641b3ecd871da045c49e
 SHA512:
-  metadata.gz: 9de12648bb0313454f0145aef192ead8a0c2ca6d974a6321fb2abccc3077df39bf5726407e017e3cace5f06c00752d87db04f208edcd88e804769f2afed4b441
-  data.tar.gz: 90dabf8a47c7ca5fa3d3b65fd8a08f06eb76fd5fb97f6a973f5db63d39a8da059420ae015431f8015f791d8ef96fa7e2cd5379e6299389b3317d255eec9bea09
+  metadata.gz: 34d98999defc16059e67e17d66ccd0ff5c52a5f1bd4bbfb7c883c52622a31227126df4b8f4a240c0041507ccc7da2d5ba188849bc4c49aba62436d98a1dd74e7
+  data.tar.gz: c1e44977dbef4e653249ab9ccae9568222cbd5dc436391292167f6dd289f9b51b19456b628bef8c146bbcfec7bd17e6c00cdcaac9f8a2e657481dd12c05a85d1

data/app/javascript/controllers/fields/code_editor_controller.js

@@ -27,12 +27,10 @@ export default class extends Controller {
 
   connect() {
     this.loadEditorFramework()
-    this.watchColorScheme()
   }
 
   disconnect() {
     this.teardownCodeEditor()
-    this.unwatchColorScheme()
   }
 
   initCodeEditor() {
@@ -144,39 +142,17 @@ export default class extends Controller {
     return window.monacoInstance
   }
 
-  watchColorScheme() {
-    this.userPrefersDarkSchemeQuery = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    )
-    this.userPrefersDarkSchemeQuery.addEventListener(
-      'change',
-      this.updateTheme.bind(this)
-    )
-  }
-
-  unwatchColorScheme() {
-    if (this.userPrefersDarkSchemeQuery === undefined) return
-    this.userPrefersDarkSchemeQuery.removeEventListener(
-      'change',
-      this.updateTheme.bind(this)
-    )
-    this.userPrefersDarkSchemeQuery = undefined
+  updateComponentTheme() {
+    this.codeEditor?.updateOptions({ theme: this.theme })
   }
 
-  updateTheme() {
-    this.codeEditor?.updateOptions({ theme: this.theme })
+  get colorSchemeIsDark() {
+    return window?.colorScheme?.current === 'dark'
   }
 
   get theme() {
-    return this.userPrefersDarkScheme
+    return this.colorSchemeIsDark
       ? this.themeDarkValue
       : this.themeLightValue
   }
-
-  get userPrefersDarkScheme() {
-    if (this.userPrefersDarkSchemeQuery === undefined) {
-      return false
-    }
-    return this.userPrefersDarkSchemeQuery.matches
-  }
 }

data/app/javascript/controllers/fields/color_scheme_preference_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+
+  connect() {
+    this.updateRadioButtons()
+    if (window.colorScheme === undefined) {
+      this.hideOptions()
+      console.warn(`window.colorScheme is not defined in the head. Update your local theme's light/layouts/_head.html.erb file.`)
+    }
+  }
+
+  // this saves us from manually adding field target to options in the partial
+  get radioButtons() {
+    return Array.from(this.element.querySelectorAll('input[type="radio"]'))
+  }
+
+  updateRadioButtons() {
+    if (!window?.colorScheme) { return }
+    const preference = window?.colorScheme?.preference
+    const button = this.radioButtonWithValue(preference)
+    if (button) {
+      button.checked = true
+    }
+  }
+
+  updateColorSchemePreference() {
+    if (!window?.colorScheme) { return }
+    window.colorScheme.preference = this.radioButtons.find(button => button.checked)?.value
+  }
+
+  hideOptions() {
+    this.element.hidden = true
+  }
+
+  radioButtonWithValue(value) {
+    return this.radioButtons.find(button => button.value === value)
+  }
+}

data/app/javascript/controllers/index.js

@@ -14,6 +14,7 @@ import SuperSelectController from './fields/super_select_controller'
 import DependableController from './dependable_controller'
 import DependentFieldsFrameController from './dependent_fields_frame_controller'
 import CodeEditorController from './fields/code_editor_controller'
+import ColorSchemePreferenceController from './fields/color_scheme_preference_controller'
 
 export const controllerDefinitions = [
   [FieldController, 'fields/field_controller.js'],
@@ -30,6 +31,7 @@ export const controllerDefinitions = [
   [DependableController, 'dependable_controller.js'],
   [DependentFieldsFrameController, 'dependent_fields_frame_controller.js'],
   [CodeEditorController, 'fields/code_editor_controller.js'],
+  [ColorSchemePreferenceController, 'fields/color_scheme_preference_controller.js'],
 ].map(function(d) {
   const key = d[1]
   const controller = d[0]
@@ -54,4 +56,5 @@ export {
   DependableController,
   DependentFieldsFrameController,
   CodeEditorController,
+  ColorSchemePreferenceController
 }

data/lib/bullet_train/fields/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Fields
-    VERSION = "1.30.1"
+    VERSION = "1.31.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-fields
 version: !ruby/object:Gem::Version
-  version: 1.30.1
+  version: 1.31.0
 platform: ruby
 authors:
 - Andrew Culver
@@ -127,6 +127,7 @@ files:
 - app/javascript/controllers/fields/cloudinary_image_controller.js
 - app/javascript/controllers/fields/code_editor_controller.js
 - app/javascript/controllers/fields/color_picker_controller.js
+- app/javascript/controllers/fields/color_scheme_preference_controller.js
 - app/javascript/controllers/fields/date_controller.js
 - app/javascript/controllers/fields/emoji_picker_controller.js
 - app/javascript/controllers/fields/field_controller.js