bullet_train-fields 1.0.2 → 1.0.3

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

@@ -1,5 +1,4 @@
 import { Controller } from "stimulus"
-import I18n from "i18n-js/index.js.erb"
 require("daterangepicker/daterangepicker.css");
 
 // requires jQuery, moment, might want to consider a vanilla JS alternative
@@ -7,7 +6,12 @@ import 'daterangepicker';
 
 export default class extends Controller {
   static targets = [ "field", "clearButton", "currentTimeZoneWrapper", "timeZoneButtons", "timeZoneSelectWrapper", "timeZoneField" ]
-  static values = { includeTime: Boolean, defaultTimeZones: Array }
+  static values = {
+    includeTime: Boolean,
+    defaultTimeZones: Array,
+    cancelButtonLabel: String,
+    applyButtonLabel: String
+  }
 
   connect() {
     this.initPluginInstance()
@@ -82,8 +86,8 @@ export default class extends Controller {
       timePickerIncrement: 5,
       autoUpdateInput: false,
       locale: {
-        cancelLabel: I18n.t('fields.date_field.cancel'),
-        applyLabel: I18n.t('fields.date_field.apply'),
+        cancelLabel: (this.hasCancelButtonLabelValue)? this.cancelButtonLabelValue: "cancel",
+        applyLabel: (this.hasApplyButtonLabelValue)? this.applyButtonLabelValue: "apply",
         format: this.includeTimeValue ? 'MM/DD/YYYY h:mm A' : 'MM/DD/YYYY'
       }
     })

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

@@ -1,5 +1,5 @@
 import { Controller } from "stimulus"
-import 'intl-tel-input/build/css/intlTelInput.css';
+require("intl-tel-input/build/css/intlTelInput.css");
 import intlTelInput from 'intl-tel-input';
 
 export default class extends Controller {
@@ -14,13 +14,18 @@ export default class extends Controller {
   }
 
   initPluginInstance() {
-    this.plugin = intlTelInput(this.fieldTarget, {
+    let options = {
       hiddenInput: this.fieldTarget.dataset.method,
-      // See `config/webpack/environment.js` for where we copy this into place.
-      // TODO Wish we could somehow incorporate webpacker's cache-breaking hash into this. Anyone know how?
-      utilsScript: "/assets/intl-tel-input/utils.js",
       customContainer: "w-full"
-    });
+    }
+
+    // TODO: add instructions on how to copy this asset into the application's assets path and write the meta tag into the head (via the engine?)
+    const utilsScriptPath = metaContent("intl_tel_input_utils_path")
+    if (utilsScriptPath) {
+      options['utilsScript'] = utilsScriptPath
+    }
+
+    this.plugin = intlTelInput(this.fieldTarget, options);
   }
 
   teardownPluginInstance() {
@@ -30,3 +35,8 @@ export default class extends Controller {
     this.plugin.destroy()
   }
 }
+
+function metaContent (name) {
+  const element = document.head.querySelector(`meta[name="${name}"]`)
+  return element && element.content
+}

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

@@ -1,7 +1,6 @@
 import { Controller } from "stimulus"
 require("select2/dist/css/select2.min.css");
-import $ from 'jquery';
-import 'select2';
+import select2 from "select2";
 
 export default class extends Controller {
   static targets = [ "select" ]
@@ -11,8 +10,20 @@ export default class extends Controller {
     searchUrl: String,
   }
 
+  initialize() {
+    if (this.isSelect2LoadedOnWindowJquery) {
+      select2(window.$)
+    }
+  }
+
+  get isSelect2LoadedOnWindowJquery() {
+    return (window.$ !== undefined && window.$.select2 === undefined)
+  }
+
   connect() {
-    this.initPluginInstance()
+    if (this.isSelect2LoadedOnWindowJquery) {
+      this.initPluginInstance()
+    }
   }
 
   disconnect() {

data/app/javascript/controllers/index.js

@@ -0,0 +1,36 @@
+import { identifierForContextKey } from "@stimulus/webpack-helpers"
+
+import ButtonToggleController from './fields/button_toggle_controller'
+import CloudinaryImageController from './fields/cloudinary_image_controller'
+import ColorPickerController from './fields/color_picker_controller'
+import DateController from './fields/date_controller'
+import FileFieldController from './fields/file_field_controller'
+import PhoneController from './fields/phone_controller'
+import SuperSelectController from './fields/super_select_controller'
+
+export const controllerDefinitions = [
+  [ButtonToggleController, 'fields/button_toggle_controller.js'],
+  [CloudinaryImageController, 'fields/cloudinary_image_controller.js'],
+  [ColorPickerController, 'fields/color_picker_controller.js'],
+  [DateController, 'fields/date_controller.js'],
+  [FileFieldController, 'fields/file_field_controller.js'],
+  [PhoneController, 'fields/phone_controller.js'],
+  [SuperSelectController, 'fields/super_select_controller.js']
+].map(function(d) {
+  const key = d[1]
+  const controller = d[0]
+  return {
+    identifier: identifierForContextKey(key),
+    controllerConstructor: controller
+  }
+})
+
+export {
+  ButtonToggleController,
+  CloudinaryImageController,
+  ColorPickerController,
+  DateController,
+  FileFieldController,
+  PhoneController,
+  SuperSelectController
+}

data/app/javascript/index.js

@@ -0,0 +1,2 @@
+export * from './controllers'
+export * from './trix_editor'

data/app/javascript/trix_editor.js

@@ -0,0 +1,71 @@
+import Tribute from 'tributejs'
+require("trix/dist/trix.css");
+
+require("trix")
+require("@rails/actiontext")
+
+// only show the editor tool bar when the user is editing the field.
+// inspired by https://github.com/basecamp/trix/issues/343 and `app/assets/stylesheets/account/fields/trix_editor.scss`
+
+export function trixEditor() {
+  document.addEventListener('trix-initialize', function() {
+    addEventListener("trix-focus", updateTrixToolbarVisability);
+    addEventListener("trix-blur", updateTrixToolbarVisability);
+    updateTrixToolbarVisability();
+    initializeTribute();
+  })
+}
+
+function updateTrixToolbarVisability() {
+  document.querySelectorAll("trix-editor").forEach((editorElement, index) => {
+    var toolbarElement = editorElement.toolbarElement;
+    if (editorElement == document.activeElement) {
+      toolbarElement.classList.add('visible');
+    } else {
+      // don't hide the toolbar if we've unfocused to focus on the link dialog.
+      if (!toolbarElement.contains(document.activeElement)) {
+        toolbarElement.classList.remove('visible');
+      }
+    }
+  })
+}
+
+function initializeTribute() {
+  document.querySelectorAll("trix-editor").forEach((el, index) => {
+    var editor = el.editor;
+    
+    var mentionConfig = {
+      trigger: '@',
+      values: JSON.parse(editor.element.dataset.mentions),
+      selectTemplate: function (item) {
+        item = item.original;
+        return '<a href="' + item.protocol + '://' + item.model + '/' + item.id + '">' + item.label + '</a>';
+      },
+      menuItemTemplate: function (item) {
+        return '<img src="' + item.original.photo + '" /> ' + item.string;
+      },
+      requireLeadingSpace: true,
+      replaceTextSuffix: ''
+    }
+  
+    var topicConfig = {
+      trigger: '#',
+      values: JSON.parse(editor.element.dataset.topics),
+      selectTemplate: function (item) {
+        item = item.original;
+        return '<a href="' + item.protocol + '://' + item.model + '/' + item.id + '">' + item.label + '</a>';
+      },
+      menuItemTemplate: function (item) {
+        return '<img src="' + item.original.photo + '" /> ' + item.string;
+      },
+      requireLeadingSpace: true,
+      replaceTextSuffix: ''
+    }
+  
+    var tribute = new Tribute({
+      collection: [topicConfig, mentionConfig],
+    });
+  
+    tribute.attach(el);
+  })
+}

data/lib/bullet_train/fields/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Fields
-    VERSION = "1.0.2"
+    VERSION = "1.0.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-fields
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.0.3
 platform: ruby
 authors:
 - Andrew Culver
@@ -35,6 +35,15 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/bullet_train_fields_manifest.js
+- app/assets/javascripts/fields.esm.js
+- app/assets/javascripts/fields.esm.js.map
+- app/assets/javascripts/fields.js
+- app/assets/javascripts/fields.js.map
+- app/assets/javascripts/fields.modern.js
+- app/assets/javascripts/fields.modern.js.map
+- app/assets/javascripts/fields.umd.js
+- app/assets/javascripts/fields.umd.js.map
+- app/assets/javascripts/intl-tel-input-utils.js
 - app/controllers/account/cloudinary/upload_signatures_controller.rb
 - app/controllers/concerns/fields/boolean_support.rb
 - app/controllers/concerns/fields/controller_support.rb
@@ -54,6 +63,9 @@ files:
 - app/javascript/controllers/fields/file_field_controller.js
 - app/javascript/controllers/fields/phone_controller.js
 - app/javascript/controllers/fields/super_select_controller.js
+- app/javascript/controllers/index.js
+- app/javascript/index.js
+- app/javascript/trix_editor.js
 - config/routes.rb
 - lib/bullet_train/fields.rb
 - lib/bullet_train/fields/engine.rb