b4um_generators 0.2.11 → 0.2.16

data/lib/generators/b4um/in_place/templates/in_place_controller.js

@@ -0,0 +1,115 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    outsideSave: { type: Boolean, default: true },
+    cancelUrl: String
+  }
+
+  connect() {
+    this.handlePointerDown = this.handlePointerDown.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+
+    if (this.element.querySelector('form')) {
+      this.rememberFormState()
+
+      document.addEventListener('pointerdown', this.handlePointerDown)
+      document.addEventListener('keydown', this.handleKeyDown)
+      this.focusEditor()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener('pointerdown', this.handlePointerDown)
+    document.removeEventListener('keydown', this.handleKeyDown)
+  }
+
+  edit(event) {
+    if (event?.type === 'keydown') {
+      event.preventDefault()
+    }
+
+    if (!this.hasUrlValue) return
+
+    const frame = this.element.closest('turbo-frame')
+    if (!frame) return
+
+    frame.src = this.urlValue
+  }
+
+  handlePointerDown(event) {
+    if (this.element.contains(event.target)) return
+
+    if (this.outsideSaveValue) {
+      this.save()
+    } else {
+      this.cancel()
+    }
+  }
+
+  handleKeyDown(event) {
+    if (event.key !== 'Escape') return
+
+    event.preventDefault()
+    this.cancel()
+  }
+
+  focusEditor() {
+    const control = this.element.querySelector(
+      'input:not([type="hidden"]):not([type="file"]), select, textarea, trix-editor'
+    )
+
+    if (!control) return
+
+    requestAnimationFrame(() => {
+      control.focus()
+    })
+  }
+
+  rememberFormState() {
+    this.initialFormStates = new WeakMap()
+
+    this.element.querySelectorAll('form').forEach((form) => {
+      this.initialFormStates.set(form, new URLSearchParams(new FormData(form)).toString())
+    })
+  }
+
+  formChanged(form) {
+    if (!this.initialFormStates?.has(form)) return true
+
+    const initialState = this.initialFormStates.get(form)
+    const currentState = new URLSearchParams(new FormData(form)).toString()
+
+    return initialState !== currentState
+  }
+
+  save(event) {
+    const form = event?.target?.closest('form') || this.element.querySelector('form')
+
+    if (!form) return
+
+    const fileInput = event?.target instanceof HTMLInputElement && event.target.type === 'file' ? event.target : null
+
+    if (fileInput?.files?.length) {
+      form.requestSubmit()
+      return
+    }
+
+    if (!this.formChanged(form)) {
+      this.cancel()
+      return
+    }
+
+    form.requestSubmit()
+  }
+
+  cancel() {
+    if (!this.hasCancelUrlValue) return
+
+    const frame = this.element.closest('turbo-frame')
+    if (!frame) return
+
+    frame.src = this.cancelUrlValue
+  }
+}

data/lib/generators/b4um/install/install_generator.rb

@@ -333,6 +333,13 @@ module B4um
         )
       end
 
+      def copy_flash
+        copy_file(
+          "_flash.html.erb",
+          "app/views/shared/_flash.html.erb"
+        )
+      end
+
       def copy_navigation_controller
         copy_file "navigation_controller.js",
                   "app/javascript/controllers/navigation_controller.js"
@@ -385,6 +392,16 @@ module B4um
                   "app/javascript/controllers/image_lightbox_controller.js"
       end
 
+      def copy_scroll_to_top_controller
+        copy_file "scroll_to_top_controller.js",
+                  "app/javascript/controllers/scroll_to_top_controller.js"
+      end
+
+      def copy_rich_text_controller
+        copy_file "rich_text_controller.js",
+                  "app/javascript/controllers/rich_text_controller.js"
+      end
+
       def copy_dismissible_controller
         copy_file "dismissible_controller.js",
                   "app/javascript/controllers/dismissible_controller.js"
@@ -470,19 +487,7 @@ module B4um
             <%= render "shared/navigation" %>
 
             <main class="container">
-              <% flash.each do |type, message| %>
-                <div class="flash <%= "flash--" + type.to_s %>"
-                    data-controller="dismissible">
-                  <%= message %>
-
-                  <button type="button"
-                          class="flash__close"
-                          data-action="dismissible#dismiss"
-                          aria-label="Close">
-                    &times;
-                  </button>
-                </div>
-              <% end %>
+              <%= render "shared/flash" %>
           ERB
         )
 

data/lib/generators/b4um/install/templates/_flash.html.erb

@@ -0,0 +1,15 @@
+<div id="flash-messages">
+  <% flash.each do |type, message| %>
+    <div class="flash <%= "flash--" + type.to_s %>"
+         data-controller="dismissible">
+      <%= message %>
+
+      <button type="button"
+              class="flash__close"
+              data-action="dismissible#dismiss"
+              aria-label="Close">
+        &times;
+      </button>
+    </div>
+  <% end %>
+</div>

data/lib/generators/b4um/install/templates/_footer.html.erb

@@ -1,5 +1,10 @@
 <footer class="b4um-footer">
-  <a class="b4um-footer__back-to-top" href="#b4um-page-top">
+  <a
+    class="b4um-footer__back-to-top"
+    href="#b4um-page-top"
+    data-controller="scroll-to-top"
+    data-action="click->scroll-to-top#scroll"
+  >
     Zurück zum Seitenanfang
   </a>
 

data/lib/generators/b4um/install/templates/b4um/forms.css

@@ -275,6 +275,133 @@
   display: block;
 }
 
+/* -------------------------------------------------------
+   Selects
+------------------------------------------------------- */
+
+.form-field--select .form-label {
+  top: 0;
+
+  color: var(--b4um-primary);
+
+  transform: translateY(-50%) scale(0.82);
+}
+
+.form-select {
+  width: 100%;
+  margin: 0;
+  padding: 1rem 3rem 1rem 1.15rem;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--b4um-border);
+  border-radius: 8px;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text);
+
+  font: inherit;
+
+  cursor: pointer;
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.form-select:hover {
+  border-color: var(--b4um-border-hover);
+}
+
+.form-select:focus {
+  outline: none;
+
+  border-color: var(--b4um-primary);
+  box-shadow: 0 0 0 3px var(--b4um-primary-soft);
+}
+
+/* -------------------------------------------------------
+   Radio buttons
+------------------------------------------------------- */
+
+.form-field--radio {
+  padding: 0.75rem 0;
+}
+
+.form-field--radio > .form-label {
+  position: static;
+
+  display: block;
+
+  margin-bottom: 0.75rem;
+  padding: 0;
+
+  background: none;
+  color: var(--b4um-text-secondary);
+
+  transform: none;
+}
+
+.form-radio-options {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.25rem;
+}
+
+.form-radio-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  color: var(--b4um-text);
+
+  cursor: pointer;
+}
+
+.form-radio {
+  appearance: none;
+  -webkit-appearance: none;
+
+  width: 18px;
+  height: 18px;
+  margin: 0;
+
+  flex: 0 0 18px;
+
+  border: 1px solid var(--b4um-border-checkbox);
+  border-radius: 50%;
+
+  background-color: var(--b4um-surface);
+
+  cursor: pointer;
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.12s ease;
+}
+
+.form-radio:hover {
+  border-color: var(--b4um-primary);
+}
+
+.form-radio:checked {
+  border: 5px solid var(--b4um-primary);
+}
+
+.form-radio:focus-visible {
+  outline: none;
+
+  border-color: var(--b4um-primary);
+  box-shadow: 0 0 0 3px var(--b4um-primary-soft);
+}
+
+.form-radio:active {
+  transform: scale(0.94);
+}
+
 /* -------------------------------------------------------
    Checkboxes
 ------------------------------------------------------- */

data/lib/generators/b4um/install/templates/b4um/tables.css

@@ -65,3 +65,52 @@
 .b4um-table td:last-child {
   padding-right: 1.25rem;
 }
+
+/* -------------------------------------------------------
+   Table media
+------------------------------------------------------- */
+
+.b4um-table__media {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  min-width: 100px;
+}
+
+.b4um-table__image-button {
+  display: block;
+
+  width: 100px;
+  height: 75px;
+
+  flex: 0 0 100px;
+
+  padding: 0;
+
+  border: 0;
+  border-radius: 8px;
+
+  overflow: hidden;
+
+  background: transparent;
+
+  cursor: zoom-in;
+}
+
+.b4um-table__image {
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+  border-radius: 8px;
+
+  object-fit: cover;
+}
+
+.b4um-table__media-empty {
+  color: var(--b4um-text-muted);
+  font-style: italic;
+}

data/lib/generators/b4um/install/templates/image_lightbox_controller.js

@@ -21,6 +21,39 @@ export default class extends Controller {
     this.dragStartX = 0
     this.dragCurrentX = 0
     this.dragPointerId = null
+
+    this.prepareActionTextImages()
+  }
+
+  prepareActionTextImages() {
+    const images = this.element.querySelectorAll('.trix-content figure.attachment img')
+
+    images.forEach((image) => {
+      if (image.closest('[data-image-lightbox-target="item"]')) return
+
+      const item = image.closest('a') || image
+      const figure = image.closest('figure.attachment')
+      const figcaption = figure?.querySelector('figcaption')
+      const caption = figcaption?.textContent?.trim() || ''
+
+      item.dataset.imageLightboxTarget = 'item'
+      item.dataset.imageLightboxUrl = image.currentSrc || image.src
+      item.dataset.imageLightboxAlt = image.alt || ''
+      item.dataset.imageLightboxCaption = caption
+
+      const actions = [item.dataset.action, 'click->image-lightbox#open']
+
+      if (item.tagName !== 'A') {
+        actions.push('keydown.enter->image-lightbox#open', 'keydown.space->image-lightbox#open')
+
+        item.setAttribute('role', 'button')
+        item.setAttribute('tabindex', '0')
+      }
+
+      item.dataset.action = actions.filter(Boolean).join(' ')
+
+      item.classList.add('in-place-rich-text__lightbox-image')
+    })
   }
 
   open(event) {
@@ -458,7 +491,7 @@ export default class extends Controller {
     if (!item) return
 
     if (this.hasCaptionTarget) {
-      this.captionTarget.textContent = item.dataset.imageLightboxAlt || ''
+      this.captionTarget.textContent = item.dataset.imageLightboxCaption || item.dataset.imageLightboxAlt || ''
     }
 
     if (this.hasCounterTarget) {

data/lib/generators/b4um/install/templates/rich_text_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.prepareLinks()
+  }
+
+  prepareLinks() {
+    const links = this.element.querySelectorAll('a[href]')
+
+    links.forEach((link) => {
+      link.setAttribute('target', '_blank')
+
+      const rel = new Set((link.getAttribute('rel') || '').split(/\s+/).filter(Boolean))
+
+      rel.add('noopener')
+      rel.add('noreferrer')
+
+      link.setAttribute('rel', Array.from(rel).join(' '))
+    })
+  }
+}

data/lib/generators/b4um/install/templates/scroll_to_top_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  scroll(event) {
+    event.preventDefault()
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}

data/lib/generators/b4um/scaffold/scaffold_generator.rb

@@ -25,6 +25,27 @@ module B4um
                    enum: %w[bento table],
                    desc: "Index layout: bento or table"
 
+      class_option :select,
+                   type: :string,
+                   desc: "Renders a field as a select list. Example: status:Active=Aktiv,Inactive=Inaktiv"
+
+      class_option :radio,
+                   type: :string,
+                   desc: "Renders a field as radio buttons. Example: condition:new=Neu,used=Gebraucht"
+
+      def validate_editor_options
+        configurations = {
+          select: select_configuration,
+          radio: radio_configuration
+        }
+
+        configurations.each do |option_name, configuration|
+          validate_editor_configuration(option_name, configuration)
+        end
+
+        validate_editor_configuration_conflict(configurations)
+      end
+
       def create_b4um_form
         form_path = File.join(
           "app/views",
@@ -328,6 +349,91 @@ module B4um
           navigation_link.chomp
         )
       end
+
+      private
+
+      def validate_editor_configuration(option_name, configuration)
+        return unless options[option_name].present?
+
+        unless configuration
+          raise Thor::Error,
+                "Invalid --#{option_name} configuration. " \
+                "Expected FIELD:VALUE[,VALUE...]"
+        end
+
+        field_names = attributes.map(&:name)
+
+        return if field_names.include?(configuration[:field])
+
+        raise Thor::Error,
+              "--#{option_name} field #{configuration[:field]} " \
+              "must be one of the generated fields: #{field_names.join(", ")}"
+      end
+
+      def validate_editor_configuration_conflict(configurations)
+        select = configurations[:select]
+        radio = configurations[:radio]
+
+        return unless select && radio
+        return unless select[:field] == radio[:field]
+
+        raise Thor::Error,
+              "Field #{select[:field]} cannot use both --select and --radio"
+      end
+
+      def select_configuration
+        editor_configuration(:select)
+      end
+
+      def radio_configuration
+        editor_configuration(:radio)
+      end
+
+      def editor_configuration(option_name)
+        value = options[option_name]
+        return unless value.present?
+
+        field, values = value.split(":", 2)
+
+        return unless field.present? && values.present?
+
+        choices = editor_choices(values)
+        return if choices.empty?
+
+        {
+          field: field,
+          values: choices
+        }
+      end
+
+      def editor_choices(values)
+        values.split(",").filter_map do |choice|
+          value, label = choice.strip.split("=", 2)
+
+          next if value.blank?
+
+          {
+            value: value,
+            label: label.presence || value
+          }
+        end
+      end
+
+      def select_field?(field)
+        configuration = select_configuration
+
+        configuration &&
+          configuration[:field] == field &&
+          configuration[:values].any?
+      end
+
+      def radio_field?(field)
+        configuration = radio_configuration
+
+        configuration &&
+          configuration[:field] == field &&
+          configuration[:values].any?
+      end
     end
   end
 end

data/lib/generators/b4um/scaffold/templates/_form.html.erb.tt

@@ -62,6 +62,35 @@
     <%%= form.label :<%= attribute.name %>, class: "form-label" %>
   </div>
 
+<% elsif select_field?(attribute.name) -%>
+  <div class="form-field form-field--select">
+    <%%= form.label :<%= attribute.name %>, class: "form-label" %>
+
+    <%%= form.select :<%= attribute.name %>,
+          <%= select_configuration[:values].inspect %>.map { |choice|
+            [choice[:label], choice[:value]]
+          },
+          {},
+          class: "form-select" %>
+  </div>
+
+<% elsif radio_field?(attribute.name) -%>
+  <div class="form-field form-field--radio">
+    <%%= form.label :<%= attribute.name %>, class: "form-label" %>
+
+    <div class="form-radio-options">
+      <%% <%= radio_configuration[:values].inspect %>.each do |choice| %>
+        <label class="form-radio-option">
+          <%%= form.radio_button :<%= attribute.name %>,
+                choice[:value],
+                class: "form-radio" %>
+
+          <span><%%= choice[:label] %></span>
+        </label>
+      <%% end %>
+    </div>
+  </div>
+
 <% elsif attribute.type == :boolean -%>
   <div class="form-field form-field--checkbox">
     <%%= form.check_box :<%= attribute.name %>, class: "form-checkbox" %>

data/lib/generators/b4um/scaffold/templates/_resource.html.erb.tt

@@ -130,6 +130,41 @@
         <span class="resource-value resource-value--empty">No images</span>
       <%% end %>
     </div>
+<% elsif select_field?(attribute.name) -%>
+<% if attribute.name == "status" -%>
+    <span class="b4um-badge">
+      <%%=
+        <%= select_configuration[:values].inspect %>.to_h {
+          |choice| [choice[:value], choice[:label]]
+        }.fetch(
+          <%= singular_table_name %>.<%= attribute.name %>,
+          <%= singular_table_name %>.<%= attribute.name %>
+        )
+      %>
+    </span>
+<% else -%>
+    <span class="resource-value">
+      <%%=
+        <%= select_configuration[:values].inspect %>.to_h {
+          |choice| [choice[:value], choice[:label]]
+        }.fetch(
+          <%= singular_table_name %>.<%= attribute.name %>,
+          <%= singular_table_name %>.<%= attribute.name %>
+        )
+      %>
+    </span>
+<% end -%>
+<% elsif radio_field?(attribute.name) -%>
+    <span class="resource-value">
+      <%%=
+        <%= radio_configuration[:values].inspect %>.to_h {
+          |choice| [choice[:value], choice[:label]]
+        }.fetch(
+          <%= singular_table_name %>.<%= attribute.name %>,
+          <%= singular_table_name %>.<%= attribute.name %>
+        )
+      %>
+    </span>
 <% elsif attribute.name == "status" -%>
     <span class="b4um-badge"><%%= <%= singular_table_name %>.<%= attribute.name %> %></span>
 <% elsif attribute.type == :text -%>

data/lib/generators/b4um/scaffold/templates/_table.html.erb.tt

@@ -14,7 +14,38 @@
         <tr>
 <% attributes.each do |attribute| -%>
           <td>
+<% if select_field?(attribute.name) -%>
 <% if attribute.name == "status" -%>
+            <span class="b4um-badge">
+              <%%=
+                <%= select_configuration[:values].inspect %>.to_h {
+                  |choice| [choice[:value], choice[:label]]
+                }.fetch(
+                  <%= singular_table_name %>.<%= attribute.name %>,
+                  <%= singular_table_name %>.<%= attribute.name %>
+                )
+              %>
+            </span>
+<% else -%>
+            <%%=
+              <%= select_configuration[:values].inspect %>.to_h {
+                |choice| [choice[:value], choice[:label]]
+              }.fetch(
+                <%= singular_table_name %>.<%= attribute.name %>,
+                <%= singular_table_name %>.<%= attribute.name %>
+              )
+            %>
+<% end -%>
+<% elsif radio_field?(attribute.name) -%>
+            <%%=
+              <%= radio_configuration[:values].inspect %>.to_h {
+                |choice| [choice[:value], choice[:label]]
+              }.fetch(
+                <%= singular_table_name %>.<%= attribute.name %>,
+                <%= singular_table_name %>.<%= attribute.name %>
+              )
+            %>
+<% elsif attribute.name == "status" -%>
             <span class="b4um-badge">
               <%%= <%= singular_table_name %>.<%= attribute.name %> %>
             </span>