V0.23.1.pre

.eslintrc.json

@@ -4,11 +4,9 @@
     "es6": true,
     "jquery": true
   },
-  "extends": [
-    "eslint:recommended"
-  ],
+  "extends": ["eslint:recommended"],
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 11,
     "sourceType": "module"
   },
   "rules": {
@@ -28,14 +26,8 @@
         "allowTemplateLiterals": true
       }
     ],
-    "semi": [
-      "error",
-      "always"
-    ],
-    "init-declarations": [
-      "error",
-      "always"
-    ],
+    "semi": ["error", "always"],
+    "init-declarations": ["error", "always"],
     "no-undefined": "error"
   }
 }

CHANGELOG.md

@@ -1,3 +1,26 @@
+### v0.23.1.pre
+
+* deprecations
+  * Remove `link_to_with_icon`
+  * `external_link` icon will no longer be automatically added on `target="_blank"` anchors
+
+* bug-fixes
+  * Minor style fixes
+  * Prevent checking custom styles when opening the app
+  * Remove unnecessary `URI.decode(signature)` call when validating open app request
+  * Remove unnecessary `terms` attribute from `Shop`
+  * Fix `#refresh_token` method when `client_credentials = true` is configured
+
+* features
+  * Add a middleware to automatically configure cockpit app headers
+  * Add `image_file_field` component to upload images and render a `placeholder` if there is no image
+  * Add `image_attachment_tag` component to render images
+  * Add styles for `.svg` images that include `.surface`, `.bubbles` and `.outline` classes
+
+* enhancements
+  * Allow to retrieve `client_credentials` token on any environment but `production`
+  * Add convenient `custom_styles?` and `client_credentials?` methods
+
 ### v0.23.0.pre
 
 * deprecations

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    beyond_canvas (0.23.0.pre)
+    beyond_canvas (0.23.1.pre)
       attr_encrypted (~> 3.1)
       beyond_api (>= 0.18.0.pre)
       bourbon (~> 7.0)
@@ -97,7 +97,7 @@ GEM
     erubi (1.10.0)
     faraday (0.17.4)
       multipart-post (>= 1.2, < 3)
-    ffi (1.15.3)
+    ffi (1.15.4)
     globalid (0.5.2)
       activesupport (>= 5.0)
     htmlentities (4.3.4)
@@ -111,23 +111,23 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    jwt (2.2.3)
+    jwt (2.3.0)
     loaf (0.10.0)
       railties (>= 3.2)
     loofah (2.12.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.1)
+    marcel (1.0.2)
     method_source (1.0.0)
-    mini_mime (1.1.1)
+    mini_mime (1.1.2)
     minitest (5.14.4)
     multipart-post (2.1.1)
     nio4r (2.5.8)
-    nokogiri (1.12.3-x86_64-darwin)
+    nokogiri (1.12.5-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.12.3-x86_64-linux)
+    nokogiri (1.12.5-x86_64-linux)
       racc (~> 1.4)
     parallel (1.20.1)
     parser (3.0.2.0)
@@ -140,7 +140,7 @@ GEM
       actionmailer (>= 3)
       premailer (~> 1.7, >= 1.7.9)
     public_suffix (4.0.6)
-    racc (1.5.2)
+    racc (1.6.0)
     rack (2.2.3)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
@@ -162,7 +162,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.4.1)
+    rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
     railties (6.1.4.1)
       actionpack (= 6.1.4.1)
@@ -213,7 +213,7 @@ GEM
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    zeitwerk (2.4.2)
+    zeitwerk (2.5.1)
 
 PLATFORMS
   x86_64-darwin-20
@@ -224,4 +224,4 @@ DEPENDENCIES
   rubocop-rails (~> 2.5)
 
 BUNDLED WITH
-   2.2.26
+   2.2.28

app/assets/javascripts/beyond_canvas/base.js

@@ -3,6 +3,7 @@
  */
 //= require jquery3
 //= require rails-ujs
+//= require beyond_canvas/common_functions
 //= require_self
 
 (function(factory) {
@@ -91,12 +92,34 @@
     }
   });
   (function($) {
-    $(document).on("click", "[data-toggle='collapse']", function(e) {
+    $(document).on("click", '[data-toggle="collapse"]', function(e) {
       e.preventDefault();
-      $($(this).attr("data-target")).slideToggle();
-      $(this).find(".collapse__icon").toggleClass("collapse__icon--open");
+      var target = $(this).attr("data-target");
+      if ($(target).is(":hidden")) {
+        $(this).openCollapse();
+      } else {
+        $(this).closeCollapse();
+      }
     });
   })(jQuery);
+  $.fn.extend({
+    openCollapse: function openCollapse() {
+      var target = $(this).attr("data-target");
+      $(this).trigger("bc.collapse.open");
+      $(this).attr("data-visible", true);
+      $(this).find(".collapse__icon").addClass("collapse__icon--open");
+      $(target).slideDown();
+      $(this).trigger("bc.collapse.opened");
+    },
+    closeCollapse: function closeCollapse() {
+      var target = $(this).attr("data-target");
+      $(this).trigger("bc.collapse.close");
+      $(this).attr("data-visible", false);
+      $(this).find(".collapse__icon").removeClass("collapse__icon--open");
+      $(target).slideUp();
+      $(this).trigger("bc.collapse.closed");
+    }
+  });
   (function($) {
     var onDOMReady = function onDOMReady() {
       $(".flash").each(function() {
@@ -128,29 +151,47 @@
   });
   (function($) {
     var onDOMReady = function onDOMReady() {
-      $('input[type="file"]').each(function() {
-        var $input = $(this), $label = $(".input__file__text." + $input.attr("id")), labelVal = $label.html();
-        $input.on("change", function(e) {
-          var fileName = "";
-          if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "{count} files selected").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
-          if (fileName) $label.html('<svg class="input__file__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z"/></svg>' + fileName); else $label.html(labelVal);
-        });
-        $input.on("focus", function() {
-          $input.addClass("has-focus");
-        }).on("blur", function() {
-          $input.removeClass("has-focus");
-        });
+      updateInputLabel();
+      initializeClearOnClickInputs();
+      addInputFocusClass();
+      removeInputFocusClass();
+    };
+    var updateInputLabel = function updateInputLabel() {
+      $("form").on("change", 'input[type="file"]', function(_ref) {
+        var _input$files, _input$getAttribute, _input$value;
+        var input = _ref.currentTarget;
+        var label = $(".input__file__text." + input.getAttribute("id"));
+        if (!label) return;
+        var noFileText = input.getAttribute("data-no-file-text");
+        var svgFileIcon = '\n        <svg class="input__file__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n          <path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z"/>\n        </svg>';
+        var fileName = ((_input$files = input.files) == null ? void 0 : _input$files.length) > 1 ? (_input$getAttribute = input.getAttribute("data-multiple-selection-text")) == null ? void 0 : _input$getAttribute.replace("{count}", input.files.length) : ((_input$value = input.value) == null ? void 0 : _input$value.split("\\").pop()) || "";
+        fileName ? label.html("" + svgFileIcon + fileName) : label.html(noFileText);
       });
     };
-    $(document).on("ready page:load turbolinks:load", function() {
-      var observer = new MutationObserver(function() {
-        return onDOMReady();
+    var addInputFocusClass = function addInputFocusClass() {
+      $("form").on("focus", 'input[type="file"]', function(_ref2) {
+        var input = _ref2.currentTarget;
+        input.addClass("has-focus");
       });
-      onDOMReady();
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
+    };
+    var removeInputFocusClass = function removeInputFocusClass() {
+      $("form").on("blur", 'input[type="file"]', function(_ref3) {
+        var input = _ref3.currentTarget;
+        input.removeClass("has-focus");
+      });
+    };
+    var initializeClearOnClickInputs = function initializeClearOnClickInputs() {
+      $("form").on("click", 'input[type="file"][data-clear-on-click="true"]', function() {
+        var dt = new DataTransfer();
+        this.files = dt.files;
+        this.dispatchEvent(new Event("change", {
+          bubbles: true,
+          composed: true
+        }));
       });
+    };
+    $(document).on("ready page:load turbolinks:load", function() {
+      return onDOMReady();
     });
   })(jQuery);
   (function($) {
@@ -189,4 +230,114 @@
       modal.trigger("bc.modal.hidden");
     }
   });
+  const template = `<style>:host{display:inline-block;position:relative}:host([hidden]){display:none}s{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;background:var(--scroll-shadow-top,radial-gradient(farthest-side at 50% 0,#0003,#0000)) top/100% var(--top),var(--scroll-shadow-bottom,radial-gradient(farthest-side at 50% 100%,#0003,#0000)) bottom/100% var(--bottom),var(--scroll-shadow-left,radial-gradient(farthest-side at 0,#0003,#0000)) left/var(--left) 100%,var(--scroll-shadow-right,radial-gradient(farthest-side at 100%,#0003,#0000)) right/var(--right) 100%;background-repeat:no-repeat}</style><slot></slot><s></s>`;
+  const updaters = new WeakMap();
+  class ScrollShadowElement extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({
+        mode: "open"
+      }).innerHTML = template;
+      updaters.set(this, new Updater(this.shadowRoot.lastElementChild));
+    }
+    static get observedAttributes() {
+      return [ "el" ];
+    }
+    get el() {
+      return this.getAttribute("el");
+    }
+    set el(value) {
+      this.setAttribute("el", value);
+    }
+    connectedCallback() {
+      this.shadowRoot.querySelector("slot").addEventListener("slotchange", () => this.start());
+      this.start();
+    }
+    disconnectedCallback() {
+      updaters.get(this).stop();
+    }
+    attributeChangedCallback(_name, oldValue, newValue) {
+      if (oldValue !== newValue) {
+        this.scrollEl = newValue ? this.querySelector(newValue) : null;
+        this.start();
+      }
+    }
+    start() {
+      updaters.get(this).start(this.scrollEl || this.firstElementChild, this.scrollEl ? this.firstElementChild : null);
+    }
+  }
+  class Updater {
+    constructor(targetElement) {
+      const update = this.update.bind(this, targetElement, getComputedStyle(targetElement));
+      this.handleScroll = throttle(update);
+      this.rO = new ResizeObserver(update);
+      this.mO = new MutationObserver(() => this.start(this.el, this.rootEl));
+    }
+    start(element, rootElement) {
+      if (this.el) this.stop();
+      if (element) {
+        element.addEventListener("scroll", this.handleScroll);
+        [ element, ...element.children ].forEach(el => this.rO.observe(el));
+        this.mO.observe(element, {
+          childList: true
+        });
+        this.el = element;
+      }
+      if (rootElement) {
+        this.rO.observe(rootElement);
+        this.rootEl = rootElement;
+      }
+    }
+    stop() {
+      this.el.removeEventListener("scroll", this.handleScroll);
+      this.mO.disconnect();
+      this.rO.disconnect();
+      this.el = this.rootEl = null;
+    }
+    update(targetElement, computedStyle) {
+      const {
+        el,
+        rootEl
+      } = this;
+      if (!el) return;
+      const maxSize = Number(computedStyle.getPropertyValue("--scroll-shadow-size")) || 14;
+      const style = {
+        "--top": clamp(el.scrollTop, 0, maxSize),
+        "--bottom": clamp(el.scrollHeight - el.offsetHeight - el.scrollTop, 0, maxSize),
+        "--left": clamp(el.scrollLeft, 0, maxSize),
+        "--right": clamp(el.scrollWidth - el.offsetWidth - el.scrollLeft, 0, maxSize)
+      };
+      if (rootEl) {
+        const clientRect = el.getBoundingClientRect();
+        const rootClientRect = rootEl.getBoundingClientRect();
+        Object.assign(style, {
+          top: clamp(clientRect.top - rootClientRect.top),
+          bottom: clamp(rootClientRect.bottom - clientRect.bottom),
+          left: clamp(clientRect.left - rootClientRect.left),
+          right: clamp(rootClientRect.right - clientRect.right)
+        });
+      }
+      for (const key in style) {
+        targetElement.style.setProperty(key, `${style[key]}px`);
+      }
+    }
+  }
+  function clamp(num, min = 0, max) {
+    if (num < min) return min;
+    if (num > max) return max;
+    return num;
+  }
+  function throttle(callback) {
+    let id = null;
+    return () => {
+      if (id) return;
+      id = requestAnimationFrame(() => {
+        callback();
+        id = null;
+      });
+    };
+  }
+  if ("customElements" in window && "ResizeObserver" in window) {
+    customElements.define("scroll-shadow", ScrollShadowElement);
+  }
 });