alchemy_cms 8.1.8 → 8.2.0

data/app/stylesheets/alchemy/admin/popover.scss

@@ -0,0 +1,37 @@
+.alchemy-popover {
+  position: relative;
+  padding: var(--spacing-2);
+
+  alchemy-message {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: var(--spacing-3);
+  }
+
+  .timezone-select {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+
+    .alchemy_selectbox {
+      min-width: var(--select-x-large-width);
+    }
+  }
+
+  span.error {
+    display: block;
+    background-color: var(--notice-error-background-color);
+    color: var(--notice-error-text-color);
+    padding: var(--spacing-2);
+    border-radius: var(--border-radius_medium);
+    font-size: var(--font-size_small);
+  }
+
+  .submit {
+    gap: var(--spacing-2);
+
+    button {
+      width: 50%;
+    }
+  }
+}

data/app/stylesheets/alchemy/admin/selects.scss

@@ -38,6 +38,10 @@ select {
   &.large {
     width: var(--select-large-width);
   }
+
+  &.x-large {
+    width: var(--select-x-large-width);
+  }
 }
 
 .select2-container {

data/app/stylesheets/alchemy/admin/shoelace.scss

@@ -106,9 +106,9 @@
   --sl-font-size-2x-small: 0.625rem; /* 10px */
   --sl-font-size-x-small: var(--font-size_small); /* 10px */
   --sl-font-size-small: var(--font-size_medium); /* 12px */
-  --sl-font-size-medium: var(--font-size_large); /* 16px */
-  --sl-font-size-large: 1.25rem; /* 20px */
-  --sl-font-size-x-large: 1.5rem; /* 24px */
+  --sl-font-size-medium: var(--font-size_medium); /* 16px */
+  --sl-font-size-large: var(--font-size_medium); /* 20px */
+  --sl-font-size-x-large: var(--font-size_large); /* 24px */
   --sl-font-size-2x-large: 2.25rem; /* 36px */
   --sl-font-size-3x-large: 3rem; /* 48px */
   --sl-font-size-4x-large: 4.5rem; /* 72px */
@@ -285,6 +285,15 @@
   }
 }
 
+sl-dropdown {
+  &::part(panel) {
+    background-color: var(--dialog-background-color);
+    box-shadow: none;
+    filter: drop-shadow(var(--dialog-box-shadow));
+    border: 1px solid var(--border-color);
+  }
+}
+
 sl-tab-group {
   --indicator-color: var(--tabs_indicator-color);
   --track-color: var(--tabs_track-color);
@@ -326,6 +335,10 @@ sl-button {
   &[disabled]::part(base) {
     border-color: var(--button-disabled-border-color);
   }
+  &[variant="primary"]::part(base),
+  &[variant="default"]::part(base) {
+    --sl-color-neutral-0: var(--button-primary-text-color);
+  }
 }
 
 sl-dialog {
@@ -348,7 +361,6 @@ sl-dialog {
   }
 
   &::part(title) {
-    --sl-font-size-large: var(--font-size_medium);
     color: var(--dialog-header-text-color);
     font-weight: var(--font-weight_bold);
     -webkit-font-smoothing: antialiased;

data/app/stylesheets/alchemy/admin/toolbar.scss

@@ -80,6 +80,14 @@
   margin-left: var(--spacing-1);
 }
 
+#preview_time_select {
+  display: inline-flex;
+
+  select {
+    width: var(--select-x-large-width);
+  }
+}
+
 #overlay_toolbar {
   @extend %gradiated-toolbar;
 }

data/app/stylesheets/alchemy/admin.scss

@@ -29,6 +29,7 @@
 @use "admin/nodes";
 @use "admin/notices";
 @use "admin/pagination";
+@use "admin/popover";
 @use "admin/preview_window";
 @use "admin/resource_info";
 @use "admin/search";

data/app/views/alchemy/admin/_header.html.erb

@@ -0,0 +1,4 @@
+<div id="header">
+  <%= render "alchemy/admin/pages/locked_pages", locked_pages: locked_pages %>
+  <%= render "alchemy/admin/user_info" %>
+</div>

data/app/views/alchemy/admin/_left_menu.html.erb

@@ -0,0 +1,24 @@
+<div id="left_menu">
+  <%= render "alchemy/admin/main_navi" %>
+
+  <div id="logout">
+    <div class="main_navi_entry">
+      <% if current_alchemy_user %>
+        <%= link_to_dialog(
+          %(
+            #{render_icon('logout-box-r', class: 'module')}
+            <label>#{Alchemy.t(:leave)}</label>
+          ).html_safe,
+          alchemy.leave_admin_path, {
+            size: "320x140",
+            title: Alchemy.t("Leave Alchemy")
+        }, {'data-alchemy-hotkey' => 'alt+q'}) %>
+      <% else %>
+        <%= link_to(alchemy.root_path) do %>
+          <%= render_icon "logout-box-r", size: "lg" %>
+          <label><%= Alchemy.t(:leave) %></label>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/alchemy/admin/_main_navi.html.erb

@@ -0,0 +1,6 @@
+<div id="main_navi">
+  <% sorted_alchemy_modules.each do |alchemy_module| %>
+    <%= alchemy_main_navigation_entry(alchemy_module) %>
+  <% end %>
+  <%= yield(:alchemy_main_navigation) %>
+</div>

data/app/views/alchemy/admin/_top_menu.html.erb

@@ -0,0 +1,6 @@
+<div id="top_menu">
+  <%= render "alchemy/admin/header", locked_pages: locked_pages %>
+  <div id="toolbar">
+    <%= yield(:toolbar) %>
+  </div>
+</div>

data/app/views/alchemy/admin/_user_info.html.erb

@@ -0,0 +1,5 @@
+<div id="user_info">
+  <%= render Alchemy::Admin::CurrentUserName.new(user: current_alchemy_user) %>
+  <%= render Alchemy::Admin::TimezoneSelect.new %>
+  <%= render Alchemy::Admin::LocaleSelect.new %>
+</div>

data/app/views/alchemy/admin/crop.html.erb

@@ -18,19 +18,14 @@
 <% end %>
 <% if @settings %>
 <script type="module">
-  import ImageCropper from "alchemy_admin/image_cropper";
+  import { ImageCropper } from "alchemy_admin/image_cropper";
 
   const image = document.getElementById("imageToCrop")?.querySelector("img");
 
-  new ImageCropper(
-    image,
-    <%= @settings[:default_box].to_json %>,
-    <%= @settings[:ratio] %>,
-    [
-      "<%= params[:crop_from_form_field_id] %>",
-      "<%= params[:crop_size_form_field_id] %>",
-    ],
-    <%= @element.id %>
-  );
+  new ImageCropper(image, <%== @settings.merge(
+    crop_from_form_field_id: params[:crop_from_form_field_id],
+    crop_size_form_field_id: params[:crop_size_form_field_id],
+    element_id: @element.id
+  ).to_json %>);
 </script>
 <% end %>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -1,4 +1,4 @@
-<div class="element-header<%= ' has-hint' if element.has_hint? %>">
+<div class="element-header<%= ' has-hint' if element.has_hint? %>" id="element-header-<%= element.id %>">
   <span class="element-handle<%= ' draggable' if can?(:order, element) %>">
     <% if element.definition.blank? %>
       <%= hint_with_tooltip Alchemy.t(:element_definition_missing), icon_class: "element-icon" %>
@@ -18,11 +18,21 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
-  <span class="element-hidden-icon">
-    <%= render_icon("cloud-off", size: "1x") %>
-    <span class="element-hidden-label">
-      <%= Alchemy.t(:element_hidden) %>
-    </span>
+  <span class="element-status-icons">
+    <% unless element.public? || element.scheduled? %>
+      <%= render_icon("cloud-off", size: "1x") %>
+      <span class="element-hidden-label">
+        <%= Alchemy.t(:element_hidden) %>
+      </span>
+    <% end %>
+    <sl-tooltip
+      class="element-scheduled-icon"
+      content="<%= Alchemy.t(element.public_on&.future? ? :public_on : :public_until, scope: :element_scheduled, public_on: element.public_on && l(element.public_on, format: :"alchemy.default"), public_until: element.public_until && l(element.public_until, format: :"alchemy.default")) %>"
+      <%= "hidden" if !element.scheduled? %>
+    >
+      <%= render_icon("calendar-schedule", size: "1x") %>
+      <%= element.public_on&.future? ? element.public_on && l(element.public_on, format: :"alchemy.short_datetime") : element.public_until && l(element.public_until, format: :"alchemy.short_datetime") %>
+    </sl-tooltip>
   </span>
   <sl-tooltip content="<%= Alchemy.t(element.folded? ? :show_element_content : :hide_element_content) %>">
     <%= button_tag(class: "element-toggle") do %>

data/app/views/alchemy/admin/elements/_schedule.html.erb

@@ -0,0 +1,62 @@
+<div id="element-<%= element.id %>-schedule">
+  <% if element.errors.any? %>
+    <alchemy-message type="error" icon="warn">
+      <%= Alchemy.t(:default_message, scope: "forms.error_notification") %>
+    </alchemy-message>
+  <% else %>
+    <alchemy-message type="info">
+      <% if element.public? %>
+        <p><%= sanitize t(".visibility_status.public_html") %></p>
+        <% if element.scheduled? && element.public_until.present? %>
+          <%= sanitize t(".public_scheduled_html",
+            public_until: l(element.public_until, format: :"alchemy.element_date")) %>
+        <% else %>
+          <%= t(".public_no_schedule") %>
+        <% end %>
+      <% else %>
+        <p><%= sanitize t(".visibility_status.hidden_html") %></p>
+        <% if element.scheduled? %>
+          <% if element.public_until.present? %>
+            <%= sanitize t(".hidden_window_html",
+              public_on: l(element.public_on, format: :"alchemy.element_date"),
+              public_until: l(element.public_until, format: :"alchemy.element_date")) %>
+          <% else %>
+            <%= sanitize t(".hidden_scheduled_html",
+              public_on: l(element.public_on, format: :"alchemy.element_date")) %>
+          <% end %>
+        <% else %>
+          <%= t(".hidden_no_schedule") %>
+        <% end %>
+      <% end %>
+    </alchemy-message>
+  <% end %>
+
+  <%= alchemy_form_for [:publish, :admin, element], remote: false, data: {turbo: true} do |f| %>
+    <div class="input">
+      <div class="input-row">
+        <div class="input-column">
+          <label for="element_public_on"><%= Alchemy::Element.human_attribute_name(:public_on) %></label>
+          <%= f.datetime_local_field :public_on, include_seconds: false %>
+          <%= f.error :public_on %>
+        </div>
+        <div class="input-column">
+          <label for="element_public_until"><%= Alchemy::Element.human_attribute_name(:public_until) %></label>
+          <%= f.datetime_local_field :public_until, include_seconds: false %>
+          <%= f.error :public_until %>
+        </div>
+      </div>
+    </div>
+    <div class="submit">
+      <button
+        type="button"
+        class="secondary"
+        onclick="this.form.querySelectorAll('input[type=datetime-local]').forEach((i) => i.value = '')">
+        <%= Alchemy.t(:clear_schedule) %>
+      </button>
+      <button type="submit">
+        <%= hidden_field_tag :alchemy_preview_time, params[:alchemy_preview_time] %>
+        <%= Alchemy.t(:save) %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -43,19 +43,5 @@
       </button>
     </alchemy-delete-element-button>
   </sl-tooltip>
-  <sl-tooltip
-    content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>"
-    placement="top-end"
-    <%= "disabled" if cannot?(:update, element) %>
-  >
-    <alchemy-publish-element-button>
-      <sl-switch
-        size="small"
-        <%= "checked" if !element.public? %>
-        <%= "disabled" if cannot?(:update, element) %>
-      >
-        <%= t(".hide") %>
-      </sl-switch>
-    </alchemy-publish-element-button>
-  </sl-tooltip>
+  <%= render Alchemy::Admin::PublishElementButton.new(element:) %>
 </div>

data/app/views/alchemy/admin/elements/publish.turbo_stream.erb

@@ -0,0 +1,28 @@
+<% if @element.errors.any? %>
+  <%= turbo_stream.replace "element-#{@element.id}-schedule",
+    partial: "schedule", locals: {element: @element} %>
+<% else %>
+  <% if @element.scheduled? %>
+    <alchemy-growl>
+      <%= Alchemy.t(:successfully_scheduled_element) %>
+    </alchemy-growl>
+  <% end %>
+  <alchemy-action name="closeCurrentDialog"></alchemy-action>
+  <alchemy-action name="reloadPreview"></alchemy-action>
+  <%= turbo_stream.replace "element_#{@element.id}" do %>
+    <%= render Alchemy::Admin::ElementEditor.new(
+      element: @element
+    ) %>
+  <% end %>
+  <%= turbo_stream.replace "publish_page_button" do %>
+    <%= render Alchemy::Admin::PublishPageButton.new(
+      page: @element.page
+    ) %>
+  <% end %>
+  <%= turbo_stream.replace "preview_time_select" do %>
+    <%= render Alchemy::Admin::PreviewTimeSelect.new(
+      @element.page_version,
+      url: edit_admin_page_path(@element.page),
+      selected: params[:alchemy_preview_time]) %>
+  <% end %>
+<% end %>

data/app/views/alchemy/admin/nodes/index.html.erb

@@ -46,7 +46,7 @@
 </div>
 
 <script type="module">
-  import NodeTree from "alchemy_admin/node_tree"
+  import { NodeTree } from "alchemy_admin/node_tree"
 
   NodeTree()
 </script>

data/app/views/alchemy/admin/pages/_locked_pages.html.erb

@@ -0,0 +1,5 @@
+<% if locked_pages.present? %>
+  <div id="locked_pages">
+    <%= render partial: 'alchemy/admin/pages/locked_page', collection: locked_pages %>
+  </div>
+<% end %>

data/app/views/alchemy/admin/pages/_publication_fields.html.erb

@@ -19,13 +19,13 @@
     'input-row'
   ] do %>
     <div class="input-column">
-      <label><%= Alchemy::Page.human_attribute_name(:public_on) %></label>
-      <%= alchemy_datepicker @page, :public_on, type: :datetime,
+      <%= label :page, :public_on %>
+      <%= datetime_local_field :page, :public_on, include_seconds: false,
         disabled: @page.attribute_fixed?(:public_on) %>
     </div>
     <div class="input-column">
-      <label><%= Alchemy::Page.human_attribute_name(:public_until) %></label>
-      <%= alchemy_datepicker @page, :public_until, type: :datetime,
+      <%= label :page, :public_until %>
+      <%= datetime_local_field :page, :public_until, include_seconds: false,
         disabled: @page.attribute_fixed?(:public_until) %>
     </div>
   <% end %>

data/app/views/alchemy/admin/pages/_table.html.erb

@@ -70,7 +70,7 @@
           alchemy.configure_admin_page_path(page, view: "list"),
           {
             title: Alchemy.t(:edit_page_properties),
-            size: '450x680'
+            size: '530x680'
           },
           class: "icon_button"
         ) -%>

data/app/views/alchemy/admin/pages/edit.html.erb

@@ -49,7 +49,7 @@
           alchemy.configure_admin_page_path(@page),
           {
             title: Alchemy.t(:page_properties),
-            size: '500x680'
+            size: '530x680'
           },
           class: :icon_button,
           'data-alchemy-hotkey' => 'alt+e'
@@ -91,6 +91,10 @@
     </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
+  <%= render Alchemy::Admin::PreviewTimeSelect.new(
+    @page_version,
+    url: edit_admin_page_path(@page),
+    selected: params[:alchemy_preview_time]) %>
   <% if @preview_urls.many? %>
     <div class="select_with_label">
       <label><%= Alchemy.t(:preview_url) %></label>
@@ -132,7 +136,7 @@
   title="<%= Alchemy.t("Page preview") %>">
 </iframe>
 
-<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id) do %>
+<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id, alchemy_preview_time: params[:alchemy_preview_time]) do %>
   <alchemy-spinner></alchemy-spinner>
 <% end %>
 

data/app/views/alchemy/admin/partials/_language_tree_select.html.erb

@@ -3,16 +3,16 @@
 <div class="toolbar_button">
   <sl-tooltip content="<%= Alchemy.t("Language tree") %>">
     <%= form_tag switch_admin_languages_path, method: 'get' do %>
-      <%= select_tag(
-        'language_id',
-        options_for_select(
-          languages.map { |l| [l.name, l.id] },
-          Alchemy::Current.language.id
-        ),
-        class: 'short',
-        is: 'alchemy-select',
-        data: {'auto-submit' => true}
-      ) %>
+      <alchemy-auto-submit>
+        <%= select_tag(
+          :language_id,
+          options_for_select(
+            languages.map { |l| [l.name, l.id] },
+            Alchemy::Current.language.id
+          ),
+          class: "short"
+        ) %>
+      </alchemy-auto-submit>
     <% end %>
   </sl-tooltip>
 </div>

data/app/views/alchemy/admin/partials/_site_select.html.erb

@@ -1,9 +1,12 @@
 <%- if multi_site? -%>
 <div class="toolbar_button">
   <sl-tooltip content="<%= Alchemy.t("Current site") %>">
-    <%= select_tag 'change_site',
-      options_for_select(sites_for_select, Alchemy::Current.site.id),
-      is: 'alchemy-select' %>
+    <%= form_tag url_for, method: :get do %>
+      <alchemy-auto-submit>
+        <%= select_tag :site_id,
+          options_for_select(sites_for_select, Alchemy::Current.site.id) %>
+      </alchemy-auto-submit>
+    <% end %>
   </sl-tooltip>
 </div>
 <div class="toolbar_spacer"></div>

data/app/views/alchemy/admin/pictures/index.html.erb

@@ -72,8 +72,8 @@
 
 <% content_for :javascripts do %>
   <script type="module">
-    import ImageOverlay from "alchemy_admin/image_overlay";
-    import pictureSelector from "alchemy_admin/picture_selector";
+    import { ImageOverlay } from "alchemy_admin/image_overlay";
+    import { pictureSelector } from "alchemy_admin/picture_selector";
     import { on } from "alchemy_admin/utils/events";
 
     pictureSelector();

data/app/views/alchemy/admin/tinymce/_setup.html.erb

@@ -9,20 +9,13 @@
 <% end %>
 
 <script>
-  // Setting TinyMCE path.
-  var tinyMCEPreInit = {
-    <% if ActionController::Base.config.asset_host %>
-    base: '<%= asset_url(tinymce_base_path, host: ActionController::Base.config.asset_host) %>',
-    <% else %>
-    base: '<%= tinymce_base_path %>',
-    <% end %>
-    suffix: '.min'
-  };
-  // Holds the default Alchemy TinyMCE configuration
-  Alchemy.TinymceDefaults = {
-    plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
-    <% Alchemy::Tinymce.init.each do |k, v| %>
-    <%= k %>: <%== v.to_json %>,
-    <% end %>
-  };
+  var tinyMCEPreInit = <%== {
+    base: ActionController::Base.config.asset_host ?
+      asset_url(tinymce_base_path, host: ActionController::Base.config.asset_host) :
+      tinymce_base_path,
+    suffix: ".min"
+  }.to_json %>;
+  Alchemy.TinymceDefaults = <%== Alchemy::Tinymce.init.merge(
+    plugins: Alchemy::Tinymce.plugins.join(",")
+  ).to_json %>;
 </script>

data/app/views/alchemy/admin/uploader/_setup.html.erb

@@ -1,8 +1,3 @@
 <script>
-  Alchemy.uploader_defaults = {
-    file_size_limit: <%= Alchemy.config.uploader.file_size_limit -%>,
-    upload_limit: <%= Alchemy.config.uploader.upload_limit -%>,
-    allowed_filetype_pictures: "<%= Alchemy.config.uploader.allowed_filetypes.alchemy_pictures.join(", ") -%>",
-    allowed_filetype_attachments: "<%= Alchemy.config.uploader.allowed_filetypes.alchemy_attachments.join(", ") -%>",
-  }
+  Alchemy.uploader_defaults = <%== Alchemy.config.uploader.to_json %>
 </script>

data/app/views/alchemy/language_links/_language.html.erb

@@ -1,8 +1,7 @@
 <%= link_to(
   content_tag(:span, language.label(options[:linkname])).html_safe,
   show_alchemy_page_path(
-    language.pages.language_roots.first,
-    locale: prefix_locale?(language.code) ? language.code : nil
+    language.pages.language_roots.first
   ),
   class: [
     language.code,

data/app/views/layouts/alchemy/admin.html.erb

@@ -44,52 +44,9 @@
       <p><%= Alchemy.t(:javascript_disabled_text) %></p>
     </noscript>
     <alchemy-overlay text="<%= Alchemy.t(:please_wait) %>"></alchemy-overlay>
-    <div id="left_menu">
-      <div id="main_navi">
-        <% sorted_alchemy_modules.each do |alchemy_module| %>
-          <%= alchemy_main_navigation_entry(alchemy_module) %>
-        <% end %>
-        <%= yield(:alchemy_main_navigation) %>
-      </div>
-
-      <div id="logout">
-        <div class="main_navi_entry">
-          <% if current_alchemy_user %>
-            <%= link_to_dialog(
-              %(
-                #{render_icon('logout-box-r', class: 'module')}
-                <label>#{Alchemy.t(:leave)}</label>
-              ).html_safe,
-              alchemy.leave_admin_path, {
-                size: "320x140",
-                title: Alchemy.t("Leave Alchemy")
-            }, {'data-alchemy-hotkey' => 'alt+q'}) %>
-          <% else %>
-            <%= link_to(alchemy.root_path) do %>
-              <%= render_icon "logout-box-r", size: "lg" %>
-              <label><%= Alchemy.t(:leave) %></label>
-            <% end %>
-          <% end %>
-        </div>
-      </div>
-    </div>
+    <%= render "alchemy/admin/left_menu" %>
     <% if current_alchemy_user %>
-    <div id="top_menu">
-      <div id="header">
-        <% if @locked_pages.present? %>
-          <div id="locked_pages">
-            <%= render partial: 'alchemy/admin/pages/locked_page', collection: @locked_pages %>
-          </div>
-        <% end %>
-        <div id="user_info">
-          <%= current_alchemy_user_name %>
-          <%= render Alchemy::Admin::LocaleSelect.new %>
-        </div>
-      </div>
-      <div id="toolbar">
-        <%= yield(:toolbar) %>
-      </div>
-    </div>
+      <%= render "alchemy/admin/top_menu", locked_pages: @locked_pages %>
     <% end %>
     <%= render 'alchemy/admin/partials/flash_notices' %>
     <div id="main_content">

data/config/importmap.rb

@@ -12,5 +12,10 @@ pin "shoelace", to: "shoelace.min.js", preload: true
 pin "@rails/ujs", to: "rails-ujs.min.js", preload: true # @7.1.2
 pin "tinymce", to: "tinymce.min.js", preload: true
 
-pin "alchemy_admin", to: "alchemy_admin.js", preload: true
-pin_all_from File.expand_path("../app/javascript/alchemy_admin", __dir__), under: "alchemy_admin", preload: true
+pin "alchemy_admin", to: "alchemy/alchemy_admin.min.js", preload: true
+pin "alchemy_admin/components/remote_select", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/image_cropper", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/image_overlay", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/picture_selector", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/node_tree", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/utils/events", to: "alchemy/alchemy_admin.min.js"