beyond_canvas 0.19.2.pre → 0.23.0.pre

data/app/helpers/beyond_canvas/statuses_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module BeyondCanvas
+  module StatusesHelper # :nodoc:
+    %i[good warning danger neutral].each do |method|
+      define_method :"status_#{method}" do |name = nil, html_options = nil, &block|
+        status_render(method, name, html_options, &block)
+      end
+    end
+
+    private
+
+    def status_render(method, name = nil, html_options = nil, &block)
+      if block_given?
+        html_options = name
+        name = block
+      end
+
+      html_options ||= {}
+
+      html_options.merge!(class: "status status--#{method}") { |_key, old_val, new_val| [new_val, old_val].join(' ') }
+
+      content_tag('span', block_given? ? capture(&name) : name, html_options)
+    end
+  end
+end

data/app/javascript/beyond_canvas/base.js

@@ -1,6 +1,6 @@
 import 'jquery';
-
 import './initializers/buttons';
+import './initializers/collapse';
 import './initializers/flash';
 import './initializers/inputs';
 import './initializers/modals';

data/app/javascript/beyond_canvas/initializers/buttons.js

@@ -2,7 +2,7 @@ const SPINNER_ANIMATION_TIMEOUT = 125;
 const BUTTON_SELECTORS = '[class^="button"]';
 
 (function ($) {
-  const onDOMReady = function (e) {
+  const onDOMReady = function () {
     const inputs = $('input, textarea, select').not(
       ':input[type=button], :input[type=submit], :input[type=reset]'
     );
@@ -19,48 +19,36 @@ const BUTTON_SELECTORS = '[class^="button"]';
     });
 
     $(BUTTON_SELECTORS).each(function () {
-      var button = $(this);
-
-      // Add width attribute and save old width
-      button.width(button.width());
-      button.data('oldWidth', button.width());
-
-      // Add the spinner
-      if (button.find('.spinner').length == 0) {
-        button.prepend(`
-          <div class="spinner">
-            <div class="bounce1"></div>
-            <div class="bounce2"></div>
-            <div class="bounce3"></div>
-          </div>`);
-      }
-
-      // Bind ajax:success and ajax:error to the form the button belongs to
-      button
-        .closest('form')
-        .on('ajax:success', function () {
-          $.restoreActionElements();
-        })
-        .on('ajax:error', function () {
-          $.restoreActionElements();
-        });
+      $(this).buildButton();
     });
   };
 
-  $(document).on('confirm:complete', function ()  {
+  $(document).on('confirm:complete', function () {
     $.restoreActionElements();
   });
 
-  $(document).on('click', BUTTON_SELECTORS, function () {
+  $(document).on('click', BUTTON_SELECTORS, function (e) {
+    var button = $(this);
+
+    if(e.target.attributes.getNamedItem('target')?.value === '_blank') return;
+
     $.disableActionElements();
-    $(this).showSpinner();
+
+    if (!button.hasClass('button--no-spinner')) {
+      $(this).showSpinner();
+    }
   });
 
   $(document).on('ready page:load turbolinks:load', onDOMReady);
+
+  $(document).on('beforeunload turbolinks:before-visit', function () {
+    $.restoreActionElements();
+  });
 })(jQuery);
 
 $.extend({
   restoreActionElements: function () {
+    setTimeout(function () {
     // Hide spinners
     $(BUTTON_SELECTORS).each(function (_, button) {
       setTimeout(function () {
@@ -75,6 +63,7 @@ $.extend({
     $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function () {
       $(this).removeClass('actions--disabled');
     });
+    }, 100);
   },
   disableActionElements: function () {
     $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function () {
@@ -84,6 +73,37 @@ $.extend({
 });
 
 $.fn.extend({
+  buildButton: function() {
+    var button = $(this);
+
+    if (button.is('[class^=button]')) {
+      if (!button.hasClass('button--no-spinner')) {
+        // Add width attribute and save old width
+        button.width(button.width());
+        button.data('oldWidth', button.width());
+
+        // Add the spinner
+        if (button.find('.spinner').length == 0) {
+          button.prepend(`
+          <div class="spinner">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
+          </div>`);
+        }
+      }
+
+      // Bind ajax:success and ajax:error to the form the button belongs to
+      button
+        .closest('form')
+        .on('ajax:success', function () {
+          $.restoreActionElements();
+        })
+        .on('ajax:error', function () {
+          $.restoreActionElements();
+        });
+    }
+  },
   showSpinner: function () {
     var button = $(this);
 

data/app/javascript/beyond_canvas/initializers/collapse.js

@@ -0,0 +1,8 @@
+(function ($) {
+  $(document).on('click', "[data-toggle='collapse']", function (e) {
+    e.preventDefault();
+
+    $($(this).attr('data-target')).slideToggle();
+    $(this).find('.collapse__icon').toggleClass('collapse__icon--open');
+  });
+})(jQuery);

data/app/javascript/beyond_canvas/initializers/flash.js

@@ -9,18 +9,40 @@
     }, 100);
   };
 
-  $(document).on('click', '.flash', function () {
-    closeAlert();
+  $(document).on('click', '.flash__close', function () {
+    $.closeAlert();
   });
 
-  $(document).on('ready page:load turbolinks:load', onDOMReady);
+  $(document).on('ready page:load turbolinks:load bc.flash.shown', onDOMReady);
 })(jQuery);
 
-function closeAlert() {
-  $('.flash')
-    .removeClass('flash--shown')
-    .delay(700)
-    .queue(function () {
-      $(this).remove();
-    });
-}
+$.extend({
+  showFlash: function(status, message) {
+    const flash = `
+        <div class="flash">
+          <div class="flash__icon flash__icon--${status}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"></path></svg>
+          </div>
+          <div class="flash__message">
+            ${message}
+          </div>
+          <div class="flash__close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
+          </div>
+        </div>`;
+
+    $(document).trigger('bc.flash.show');
+    $('#flash').html(flash);
+    $(document).trigger('bc.flash.shown');
+  },
+  closeAlert: function() {
+    $(document).trigger('bc.flash.hide');
+    $('.flash')
+      .removeClass('flash--shown')
+      .delay(700)
+      .queue(function () {
+        $(this).remove();
+      });
+    $(document).trigger('bc.flash.hidden');
+  }
+});

data/app/javascript/beyond_canvas/initializers/inputs.js

@@ -1,15 +1,15 @@
 (function ($) {
   const onDOMReady = function () {
     $('input[type="file"]').each(function () {
-      var $input = $(this),
+      const $input = $(this),
         $label = $(`.input__file__text.${$input.attr('id')}`),
         labelVal = $label.html();
 
       $input.on('change', function (e) {
-        var fileName = '';
+        let fileName = '';
 
         if (this.files && this.files.length > 1)
-          fileName = (this.getAttribute('data-multiple-caption') || '').replace(
+          fileName = (this.getAttribute('data-multiple-caption') || '{count} files selected').replace(
             '{count}',
             this.files.length
           );
@@ -33,5 +33,10 @@
     });
   };
 
-  $(document).on('ready page:load turbolinks:load', onDOMReady);
+  $(document).on('ready page:load turbolinks:load', () => {
+    const observer = new MutationObserver(() => onDOMReady());
+
+    onDOMReady();
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
 })(jQuery);

data/app/javascript/beyond_canvas/initializers/modals.js

@@ -1,14 +1,50 @@
-$.extend({
-  displayModal: function (content, options = {}) {
-    $('#modal').find('#modal__content').html(content);
-    $('#modal').css('display', 'flex');
+(function ($) {
+  const onDOMReady = function () {
+    $('.modal').each(function () {
+      $(this).hide().css('visibility', 'visible');
+    });
+  };
+
+  $(document).on('click', '[data-toggle="modal"]', function (e) {
+    e.preventDefault();
+
+    const dataTarget = $(this).attr('data-target');
+
     $.restoreActionElements();
-    $(document).trigger('modal:opened', options['extraEventParameters']);
+    $(dataTarget).showModal();
+  });
+
+  $(document).on('click', '[data-dismiss="modal"]', function (e) {
+    e.preventDefault();
+
+    const dataTarget = $(this).closest('.modal');
+
+    $.restoreActionElements();
+    $(dataTarget).hideModal();
+  });
+
+  $(document).on('ready page:load turbolinks:load', onDOMReady);
+})(jQuery);
+
+$.fn.extend({
+  showModal: function () {
+    const modal = $(this);
+
+    modal.trigger('bc.modal.show');
+
+    $.restoreActionElements();
+    modal.css('display', 'flex');
+
+    modal.trigger('bc.modal.shown');
   },
-  closeModal: function () {
-    $('#modal').find('#modal__content').empty();
-    $('#modal').css('display', 'none');
+  hideModal: function () {
+    const modal = $(this);
+
+    modal.trigger('bc.modal.hide');
+
     $.restoreActionElements();
-    $(document).trigger('modal:closed');
-  }
+    modal.hide();
+
+    modal.trigger('bc.modal.hidden');
+  },
 });

data/app/views/beyond_canvas/mailer/_header.html.erb

@@ -1,8 +1,8 @@
 <!-- Email Header : BEGIN -->
 <tr>
   <td style="padding: 20px 0; text-align: center">
-    <% if BeyondCanvas.configuration.site_logo.present? %>
-      <%= image_tag BeyondCanvas.configuration.site_logo, width: "200", height: "50", alt: "alt_text", border: "0", style: "height: auto; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" %>
+    <% if BeyondCanvas.configuration.email_logo.present? %>
+      <%= image_tag BeyondCanvas.configuration.email_logo, width: "200", height: "50", border: "0", style: "height: auto; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" %>
     <% end %>
   </td>
 </tr>

data/app/views/beyond_canvas/shared/_breadcrumbs.html.erb

@@ -1,12 +1,15 @@
-<% if is_cockpit_app? %>
+<% if is_cockpit_app? && breadcrumb_trail.count.positive? %>
 
   <div class='breadcrumbs'>
 
     <%= inline_svg_tag 'icons/home.svg' %>
 
+    <% i = 1 %>
+
     <% breadcrumb_trail do |crumb| %>
       <%= link_to crumb.name, crumb.url, class: "breadcrumb__item#{ '--current' if crumb.current? }" %>
-      <% unless crumb.current? %><%= inline_svg_tag 'icons/arrow_right.svg' %><% end %>
+      <% unless i ==  breadcrumb_trail.count || crumb.current? %><%= inline_svg_tag 'icons/arrow_right.svg' %><% end %>
+      <% i += 1 %>
     <% end %>
 
   </div>

data/app/views/beyond_canvas/shared/_flash.html.erb

@@ -2,21 +2,25 @@
 
   <% flash.each do |key, value| %>
 
-    <div class="flash">
+    <% unless value.blank? %>
 
-      <div class="flash__icon flash__icon--<%= key %>">
-        <%= get_flash_icon(key) %>
-      </div>
+      <div class="flash">
 
-      <div class="flash__message">
-        <%= value %>
-      </div>
+        <div class="flash__icon flash__icon--<%= key %>">
+          <%= get_flash_icon(key) %>
+        </div>
+
+        <div class="flash__message">
+          <%= value %>
+        </div>
+
+        <div class="flash__close">
+          <%= inline_svg_tag 'icons/flash_close.svg' %>
+        </div>
 
-      <div class="flash__close">
-        <%= inline_svg_tag 'icons/flash_close.svg' %>
       </div>
 
-    </div>
+    <% end %>
 
   <% end %>
 

data/app/views/beyond_canvas/shared/_head.html.erb

@@ -16,6 +16,10 @@
     <% end %>
   <% end %>
 
+  <% if BeyondCanvas.configuration.cockpit_app %>
+      <%= stylesheet_link_tag cookies[:custom_styles_url] %>
+  <% end %>
+
   <% BeyondCanvas.configuration.javascripts.each do |path| %>
     <% if BeyondCanvas.configuration.skip_webpacker %>
       <%= javascript_include_tag path %>

data/app/views/beyond_canvas/shared/_locales.html.erb

@@ -1,5 +1,5 @@
 <% if show_locale_switch? && !is_cockpit_app? %>
-  <%= form_for :system, url: beyond_canvas.update_locale_path, method: :put do |f| %>
+  <%= form_for :system, url: update_locale_path, method: :put do |f| %>
       <%= f.select :locale, I18n.available_locales.collect { |l| [translate_locale(l), l] },
                             { selected: cookies[:locale] },
                             class: 'select--locale',

data/app/views/layouts/beyond_canvas/application.html.erb

@@ -3,7 +3,7 @@
 <html>
 <%= render 'beyond_canvas/shared/head' %>
 
-<body class="body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
+<body class="beyond-canvas body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
 
   <%= render 'beyond_canvas/shared/sidebar' %>
 
@@ -11,7 +11,6 @@
 
     <%= render 'beyond_canvas/shared/flash' %>
     <%= render 'beyond_canvas/shared/locales' %>
-    <%= render 'beyond_canvas/shared/modal' %>
     <%= render 'beyond_canvas/shared/menu' %>
     <%= render 'beyond_canvas/shared/action_bar' %>
 

data/app/views/layouts/beyond_canvas/public.html.erb

@@ -3,7 +3,7 @@
 <html>
 <%= render 'beyond_canvas/shared/head' %>
 
-<body class="body--public">
+<body class="beyond-canvas body--public">
 
   <main class="main <%= params[:controller].gsub(/[\/_]/, "-") %>--<%= params[:action] %>">
 

data/config/initializers/beyond_canvas/constants.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+if BeyondCanvas.configuration.cockpit_app == true && !Rails.env.development?
+  COOKIES_ATTRIBUTES = {
+    expires: 1.year.from_now,
+    same_site: :none,
+    secure: true
+  }.freeze
+else
+  COOKIES_ATTRIBUTES = {
+    expires: 1.year.from_now
+  }.freeze
+end

data/config/initializers/beyond_canvas/session_store.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+if BeyondCanvas.configuration.cockpit_app == true && !Rails.env.development?
+  Rails.application.config.session_store :cookie_store, {
+    secure: true,
+    same_site: :none
+  }
+end