biovision-base 0.34.190331.1 → 0.36.190526.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eaab273faa85e0bc922a32b591fa239f57f78d3391554d304afb1e1a32d60285
-  data.tar.gz: f8e5837fdf1922adf3e6acaca5801de5e3f4d483ca8ef6c124a3382e1a1d7330
+  metadata.gz: 25a60b6a83c799dd28363fb20c326010de89318358e923459eee1a952e5c4581
+  data.tar.gz: 21c006b675139987f71e209ee9b5e49026152a15d0f4a3f5ba9332d6aab4febb
 SHA512:
-  metadata.gz: 1ee9f0baf217333f237339d555681d334c37cf27d9a822b92e6f1e0bc15fe4b3c654ba73b79bece91b97a80d3226d70cfe33c334323f5b6b18ebc764a0cc079b
-  data.tar.gz: 17bb0eef033b0bffe97faa5e4cb4eafefc177a592062298680caa67b286332b1f47cc925928cd9bf78fc48f34a331d48b93e8decfafc7bb4ab3571968bd4ea11
+  metadata.gz: 480dc37953cba27517f9a99927ea704433a2af1241fe229c28d20a693b45cb8feea15ee39915a8639edebd1782c9a81ff80e01b4656c26da328d565483406425
+  data.tar.gz: b8a978a75a8be80078f11a3a6a57001eddf8a719ca97255b401420e09b79cb2848f7badcba3f512b35f027a094be0dffdcdddc551c2f820735d8d6ea0d123eb2

data/app/assets/javascripts/biovision/base/biovision.js

@@ -16,10 +16,45 @@ const Biovision = {
             });
         }
 
-        for (let component in this.components) {
-            if (this.components.hasOwnProperty(component)) {
-                if (this.components[component].hasOwnProperty('init')) {
-                    this.components[component].init();
+        for (let componentName in this.components) {
+            if (this.components.hasOwnProperty(componentName)) {
+                const component = this.components[componentName];
+                if (component.hasOwnProperty('init')) {
+                    component.init();
+                }
+
+                if (component.hasOwnProperty("autoInitComponents")) {
+                    if (component.autoInitComponents) {
+                        this.initChildComponents(component);
+                    }
+                }
+            }
+        }
+    },
+    /**
+     * Init child components of given component
+     *
+     * @type {function}
+     * @param {Object} parent
+     */
+    initChildComponents: function (parent) {
+        if (!parent.hasOwnProperty("components")) {
+            return;
+        }
+
+        for (let componentName in parent.components) {
+            if (parent.components.hasOwnProperty(componentName)) {
+                const child = parent.components[componentName];
+
+                if (child.hasOwnProperty("init")) {
+                    let initialized = false;
+                    if (child.hasOwnProperty("initialized")) {
+                        initialized = child.initialized;
+                    }
+
+                    if (!initialized) {
+                        child.init();
+                    }
                 }
             }
         }
@@ -32,7 +67,7 @@ const Biovision = {
      * @param [onFailure]
      */
     new_ajax_request: function (method, url, onSuccess, onFailure) {
-        console.log("Biovision.new_ajax_request is deprecated; user Biovision.newAjaxRequest instead");
+        console.log("Biovision.new_ajax_request is deprecated; use Biovision.newAjaxRequest instead");
         return Biovision.newAjaxRequest(method, url, onSuccess, onFailure);
     },
     /**
@@ -64,10 +99,20 @@ const Biovision = {
 
         return request;
     },
+    /**
+     * Initialize new AJAX request with JSON content-type and accept headers
+     *
+     * @param {string} method
+     * @param {string} url
+     * @param {function} onSuccess
+     * @param {function} onFailure
+     * @returns {XMLHttpRequest}
+     */
     jsonAjaxRequest: function (method, url, onSuccess, onFailure) {
         const request = Biovision.newAjaxRequest(method, url, onSuccess, onFailure);
 
-        request.setRequestHeader('Content-Type', 'application/json');
+        request.setRequestHeader("Content-Type", "application/json");
+        request.setRequestHeader("Accept", "application/json");
 
         return request;
     },
@@ -405,7 +450,7 @@ Biovision.components.transliterator = {
             'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'c', 'ч': 'ch',
             'ш': 'sh', 'щ': 'shh', 'ъ': '', 'ы': 'y', 'ь': '',
             'э': 'e', 'ю': 'yu', 'я': 'ya',
-            'å': 'ao', 'ä': 'ae', 'ö': 'oe', 'é': 'e'
+            'å': 'aa', 'ä': 'ae', 'ö': 'oe', 'é': 'e'
         };
         let string = input.toLowerCase();
 

data/app/assets/javascripts/biovision/base/components/carousel.js

@@ -1,13 +1,36 @@
 "use strict";
 
 Biovision.components.carousel = {
+    /**
+     * Component is initialized
+     *
+     * @type {Boolean}
+     */
     initialized: false,
-    selector: '.js-biovision-carousel',
+    /**
+     * Selector string for matching carousel containers
+     *
+     * @type {String}
+     */
+    selector: ".js-biovision-carousel",
+    /**
+     * Wrappers for found carousel containers
+     *
+     * @type {Array<Object>}
+     */
     sliders: [],
+    /**
+     * Initializer
+     */
     init: function () {
         document.querySelectorAll(this.selector).forEach(this.apply);
         this.initialized = true;
     },
+    /**
+     * Apply carousel behavior to container
+     *
+     * @param {HTMLElement} element
+     */
     apply: function (element) {
         const component = Biovision.components.carousel;
         const slider = {
@@ -16,7 +39,8 @@ Biovision.components.carousel = {
             "items": element.querySelectorAll(".carousel-item"),
             "prevButton": element.querySelector("button.prev"),
             "nextButton": element.querySelector("button.next"),
-            "current": 0
+            "current": 0,
+            "touchData": {"x": null, "y": null}
         };
         if (element.hasAttribute("data-type")) {
             slider["type"] = element.getAttribute("data-type");
@@ -25,18 +49,27 @@ Biovision.components.carousel = {
         }
         if (element.hasAttribute("data-timeout")) {
             slider["timeout"] = parseInt(element.getAttribute("data-timeout"));
-            slider["timeout_handler"] = window.setInterval(component.nextItem, slider["timeout"], slider);
+            if (slider["timeout"] > 0) {
+                slider["timeout_handler"] = window.setInterval(component.nextItem, slider["timeout"], slider);
+            }
         }
         if (slider["prevButton"]) {
-            slider["prevButton"].addEventListener('click', component.clickedPrev);
+            slider["prevButton"].addEventListener("click", component.clickedPrev);
         }
         if (slider["nextButton"]) {
-            slider["nextButton"].addEventListener('click', component.clickedNext);
+            slider["nextButton"].addEventListener("click", component.clickedNext);
         }
         slider["maxItem"] = slider["items"].length - 1;
+        element.addEventListener("touchstart", component.touchStart, false);
+        element.addEventListener("touchend", component.touchEnd, false);
         component.sliders.push(slider);
         component.rearrange(slider);
     },
+    /**
+     * Rearrange items in carousel
+     *
+     * @param {Object} slider
+     */
     rearrange: function (slider) {
         const component = Biovision.components.carousel;
         switch (slider["type"]) {
@@ -52,24 +85,45 @@ Biovision.components.carousel = {
                 component.newOffset(slider);
         }
     },
+    /**
+     * Handler for clicking "Previous" button
+     *
+     * @param {Event} event
+     */
     clickedPrev: function (event) {
         const component = Biovision.components.carousel;
-        const slider = component.sliderForButton(event.target);
+        const slider = component.getSlider(event.target);
         component.prevItem(slider);
     },
+    /**
+     * Handler for clicking "Next" button
+     *
+     * @param {Event} event
+     */
     clickedNext: function (event) {
         const component = Biovision.components.carousel;
-        const slider = component.sliderForButton(event.target);
+        const slider = component.getSlider(event.target);
         component.nextItem(slider);
     },
-    sliderForButton: function (button) {
-        const element = button.closest(this.selector);
+    /**
+     * Get wrapper for slider
+     *
+     * @param {HTMLElement|EventTarget} element
+     * @returns {Object}
+     */
+    getSlider: function (element) {
+        const slider = element.closest(this.selector);
         for (let i = 0; i < this.sliders.length; i++) {
-            if (this.sliders[i].element === element) {
+            if (this.sliders[i].element === slider) {
                 return this.sliders[i];
             }
         }
     },
+    /**
+     * Slide to next item
+     *
+     * @param {Object} slider
+     */
     nextItem: function (slider) {
         const component = Biovision.components.carousel;
 
@@ -80,6 +134,11 @@ Biovision.components.carousel = {
 
         component.rearrange(slider);
     },
+    /**
+     * Slide to previous item
+     *
+     * @param {Object} slider
+     */
     prevItem: function (slider) {
         const component = Biovision.components.carousel;
         slider["current"]--;
@@ -89,16 +148,26 @@ Biovision.components.carousel = {
 
         component.rearrange(slider);
     },
+    /**
+     * Mark new item as current
+     *
+     * @param {Object} slider
+     */
     newCurrentItem: function (slider) {
-        const selector = '.carousel-item:nth-of-type(' + (slider.current + 1) + ')';
-        const currentSlide = slider.container.querySelector('.carousel-item.current');
+        const selector = ".carousel-item:nth-of-type(" + (slider.current + 1) + ")";
+        const currentSlide = slider.container.querySelector(".carousel-item.current");
         if (currentSlide) {
-            currentSlide.classList.remove('current');
+            currentSlide.classList.remove("current");
         }
-        slider.container.querySelector(selector).classList.add('current');
+        slider.container.querySelector(selector).classList.add("current");
     },
+    /**
+     * Change margin of the leftmost slide
+     *
+     * @param {Object} slider
+     */
     newOffset: function (slider) {
-        const firstSlide = slider.container.querySelector('.carousel-item:first-of-type');
+        const firstSlide = slider.container.querySelector(".carousel-item:first-of-type");
         const rightMargin = window.getComputedStyle(firstSlide).marginRight;
         const slideWidth = firstSlide.offsetWidth + parseInt(rightMargin);
         let newMargin = -(slideWidth * slider.current);
@@ -111,13 +180,54 @@ Biovision.components.carousel = {
             slider["current"] = slider["maxItem"];
         }
 
-        firstSlide.style.marginLeft = String(newMargin) + 'px';
+        firstSlide.style.marginLeft = String(newMargin) + "px";
     },
+    /**
+     * Determine maximum item number so that right margin remains minimal
+     *
+     * @param {Object} slider
+     */
     setMaxItem: function (slider) {
-        const firstSlide = slider.container.querySelector('.carousel-item:first-of-type');
+        const firstSlide = slider.container.querySelector(".carousel-item:first-of-type");
         const rightMargin = window.getComputedStyle(firstSlide).marginRight;
         const slideWidth = firstSlide.offsetWidth + parseInt(rightMargin);
         const maxCount = slider.container.offsetWidth / slideWidth;
         slider["maxItem"] = slider.items.length - Math.floor(maxCount);
+    },
+    /**
+     * Handler for start of swipe
+     *
+     * @param {TouchEvent} event
+     * @type {Function}
+     */
+    touchStart: function (event) {
+        const component = Biovision.components.carousel;
+        const slider = component.getSlider(event.target);
+        slider["touchData"] = {
+            "x": event.changedTouches[0].pageX,
+            "y": event.changedTouches[0].pageY
+        }
+    },
+    /**
+     * Handler for end of swipe
+     *
+     * @param {TouchEvent} event
+     * @type {Function}
+     */
+    touchEnd: function (event) {
+        const component = Biovision.components.carousel;
+        const slider = component.getSlider(event.target);
+        const x = event.changedTouches[0].pageX;
+        const y = event.changedTouches[0].pageY;
+        const deltaX = Math.abs(x - slider["touchData"]["x"]);
+        const deltaY = Math.abs(y - slider["touchData"]["y"]);
+        if (deltaX > deltaY) {
+            if (x < slider["touchData"]["x"]) {
+                component.nextItem(slider);
+            } else if (x > slider["touchData"]["x"]) {
+                component.prevItem(slider);
+            }
+        }
+        slider["touchData"] = {"x": null, "y": null}
     }
 };

data/app/assets/javascripts/biovision/base/components/video-stretcher.js

@@ -0,0 +1,51 @@
+"use strict";
+
+/**
+ * Stretch videos inserted by WYSIWYG applying proportional-container
+ *
+ * @author Maxim Khan-Magomedov <maxim.km@gmail.com>
+ * @type {Object}
+ */
+Biovision.components.videoStretcher = {
+    /**
+     * Component is initialized
+     *
+     * @type {boolean}
+     */
+    initialized: false,
+    /**
+     * Selector for matching embedded videos
+     *
+     * @type {string}
+     */
+    selector: 'figure.media iframe[src^="https://www.you"]',
+    /**
+     * List of matched items
+     *
+     * @type {array<HTMLElement>}
+     */
+    items: [],
+    /**
+     * Initializer
+     *
+     * @type {function}
+     */
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    /**
+     * Callback for applying stretch
+     *
+     * @param {HTMLElement} element
+     */
+    apply: function (element) {
+        const component = Biovision.components.videoStretcher;
+        const figure = element.closest("figure.media");
+        if (figure) {
+            component.items.push(figure);
+            figure.classList.add("proportional-container");
+            figure.classList.add("r-16x9");
+        }
+    }
+};

data/app/assets/stylesheets/biovision/base/biovision.scss

@@ -426,12 +426,18 @@ form {
 }
 
 .visually-hidden {
-  height: .1rem;
+  border: none;
+  clip: rect(0 0 0 0);
+  height: auto;
   left: -10000rem;
+  margin: 0;
   opacity: .05;
   overflow: hidden;
+  padding: 0;
+  pointer-events: none;
   position: absolute;
-  width: .1rem;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .proportional-container {
@@ -491,3 +497,13 @@ input.control:not(:checked) + * {
     width: 100%;
   }
 }
+
+.containing {
+  overflow: hidden;
+
+  > * {
+    height: 100%;
+    object-fit: contain;
+    width: 100%;
+  }
+}

data/app/controllers/admin/settings_controller.rb

@@ -15,31 +15,26 @@ class Admin::SettingsController < AdminController
 
   # patch /admin/settings/:slug
   def update
-    new_settings      = params.dig(:component, :settings).permit!
+    new_settings = params.dig(:component, :settings).permit!
     @handler.settings = new_settings.to_h
-    flash[:notice]    = t('admin.settings.update.success')
+    flash[:notice] = t('admin.settings.update.success')
     redirect_to(admin_component_path(slug: params[:slug]))
   end
 
   # put /admin/settings/:slug/parameter
   def set_parameter
-    slug        = param_from_request(:key, :slug).downcase
-    value       = param_from_request(:key, :value)
-    name        = param_from_request(:key, :name)
-    description = param_from_request(:key, :description)
+    slug = param_from_request(:key, :slug).downcase
+    value = param_from_request(:key, :value)
 
-    if name.blank? && description.blank?
-      @handler[slug] = value
-    else
-      @handler.set_parameter(slug, value, name, description)
-    end
+    @handler[slug] = value
 
     head :no_content
   end
 
   # delete /admin/settings/:slug/:parameter_slug
   def delete_parameter
-    @handler.delete_parameter(params[:parameter_slug])
+    @handler.component.parameters.delete(params[:parameter_slug])
+    @handler.component.save
 
     head :no_content
   end