biovision-base 0.22.180920.0 → 0.34.190331.1

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Biovision.components.carousel = {
+    initialized: false,
+    selector: '.js-biovision-carousel',
+    sliders: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    apply: function (element) {
+        const component = Biovision.components.carousel;
+        const slider = {
+            "element": element,
+            "container": element.querySelector(".carousel-container"),
+            "items": element.querySelectorAll(".carousel-item"),
+            "prevButton": element.querySelector("button.prev"),
+            "nextButton": element.querySelector("button.next"),
+            "current": 0
+        };
+        if (element.hasAttribute("data-type")) {
+            slider["type"] = element.getAttribute("data-type");
+        } else {
+            slider["type"] = "offset";
+        }
+        if (element.hasAttribute("data-timeout")) {
+            slider["timeout"] = parseInt(element.getAttribute("data-timeout"));
+            slider["timeout_handler"] = window.setInterval(component.nextItem, slider["timeout"], slider);
+        }
+        if (slider["prevButton"]) {
+            slider["prevButton"].addEventListener('click', component.clickedPrev);
+        }
+        if (slider["nextButton"]) {
+            slider["nextButton"].addEventListener('click', component.clickedNext);
+        }
+        slider["maxItem"] = slider["items"].length - 1;
+        component.sliders.push(slider);
+        component.rearrange(slider);
+    },
+    rearrange: function (slider) {
+        const component = Biovision.components.carousel;
+        switch (slider["type"]) {
+            case "current-item":
+                component.newCurrentItem(slider);
+                break;
+            case "offset":
+                component.setMaxItem(slider);
+                component.newOffset(slider);
+                break;
+            default:
+                console.log("Unknown carousel type: " + slider["type"]);
+                component.newOffset(slider);
+        }
+    },
+    clickedPrev: function (event) {
+        const component = Biovision.components.carousel;
+        const slider = component.sliderForButton(event.target);
+        component.prevItem(slider);
+    },
+    clickedNext: function (event) {
+        const component = Biovision.components.carousel;
+        const slider = component.sliderForButton(event.target);
+        component.nextItem(slider);
+    },
+    sliderForButton: function (button) {
+        const element = button.closest(this.selector);
+        for (let i = 0; i < this.sliders.length; i++) {
+            if (this.sliders[i].element === element) {
+                return this.sliders[i];
+            }
+        }
+    },
+    nextItem: function (slider) {
+        const component = Biovision.components.carousel;
+
+        slider["current"]++;
+        if (slider["current"] > slider["maxItem"]) {
+            slider["current"] = 0;
+        }
+
+        component.rearrange(slider);
+    },
+    prevItem: function (slider) {
+        const component = Biovision.components.carousel;
+        slider["current"]--;
+        if (slider["current"] < 0) {
+            slider["current"] = slider["maxItem"];
+        }
+
+        component.rearrange(slider);
+    },
+    newCurrentItem: function (slider) {
+        const selector = '.carousel-item:nth-of-type(' + (slider.current + 1) + ')';
+        const currentSlide = slider.container.querySelector('.carousel-item.current');
+        if (currentSlide) {
+            currentSlide.classList.remove('current');
+        }
+        slider.container.querySelector(selector).classList.add('current');
+    },
+    newOffset: function (slider) {
+        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);
+        const slidesLength = slideWidth * slider.items.length;
+        const maxOffset = slidesLength - slider.container.offsetWidth;
+        const delta = newMargin + maxOffset;
+
+        if (delta < 0) {
+            newMargin -= delta;
+            slider["current"] = slider["maxItem"];
+        }
+
+        firstSlide.style.marginLeft = String(newMargin) + 'px';
+    },
+    setMaxItem: function (slider) {
+        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);
+    }
+};

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

@@ -0,0 +1,149 @@
+/*
+ *************
+ * Polyfills *
+ *************
+ */
+
+/**
+ * Element.matches()
+ *
+ * IE 9+
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+}
+
+/**
+ * Element.closest()
+ *
+ * IE
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+ */
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (s) {
+        let el = this;
+        let ancestor = this;
+
+        if (!document.documentElement.contains(el)) {
+            return null;
+        }
+        do {
+            if (ancestor.matches(s)) {
+                return ancestor;
+            }
+            ancestor = ancestor.parentElement;
+        } while (ancestor !== null);
+
+        return null;
+    };
+}
+
+/**
+ * ParentNode.prepend()
+ *
+ * IE
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend
+ * @see https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+ */
+(function (arr) {
+    arr.forEach(function (item) {
+        if (item.hasOwnProperty('prepend')) {
+            return;
+        }
+        Object.defineProperty(item, 'prepend', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value: function prepend() {
+                let argArr = Array.prototype.slice.call(arguments),
+                    docFrag = document.createDocumentFragment();
+
+                argArr.forEach(function (argItem) {
+                    let isNode = argItem instanceof Node;
+                    docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+                });
+
+                this.insertBefore(docFrag, this.firstChild);
+            }
+        });
+    });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+
+/**
+ * ParentNode.append()
+ *
+ * IE
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
+ * @see https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+ */
+(function (arr) {
+    arr.forEach(function (item) {
+        if (item.hasOwnProperty('append')) {
+            return;
+        }
+        Object.defineProperty(item, 'append', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value: function append() {
+                let argArr = Array.prototype.slice.call(arguments),
+                    docFrag = document.createDocumentFragment();
+
+                argArr.forEach(function (argItem) {
+                    let isNode = argItem instanceof Node;
+                    docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+                });
+
+                this.appendChild(docFrag);
+            }
+        });
+    });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+
+/**
+ * ChildNode.remove()
+ *
+ * IE
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
+ */
+(function (arr) {
+    arr.forEach(function (item) {
+        if (item.hasOwnProperty('remove')) {
+            return;
+        }
+        Object.defineProperty(item, 'remove', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value: function remove() {
+                if (this.parentNode !== null) {
+                    this.parentNode.removeChild(this);
+                }
+            }
+        });
+    });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+
+/**
+ * NodeList.forEach()
+ *
+ * ES5
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
+ */
+if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (let i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}

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

@@ -1,14 +1,27 @@
 :root {
-  --content-width: #{$content-width};
-  --content-width-min: #{$content-width-min};
-  --spacer-xs: .5rem;
-  --spacer-s: 1rem;
+  --font-size-xxxl: #{$font-size-xxxl};
+  --font-size-xxl: #{$font-size-xxl};
+  --font-size-xl: #{$font-size-xl};
+  --font-size-large: #{$font-size-large};
+  --font-size-increased: #{$font-size-increased};
+  --font-size-normal: #{$font-size-normal};
+  --font-size-decreased: #{$font-size-decreased};
+  --font-size-small: #{$font-size-small};
+  --font-size-xs: #{$font-size-xs};
+
+  --spacer-s: #{$spacer-s};                 // 1.6
+  --spacer-xxxs: .2rem;
+  --spacer-xxs: calc(var(--spacer-s) / 4);  // .4
+  --spacer-xs: calc(var(--spacer-s) / 2);   // .8
+  --spacer-m: calc(var(--spacer-s) * 2);    // 3.2
+  --spacer-l: calc(var(--spacer-s) * 3);    // 4.8
+  --spacer-xl: calc(var(--spacer-s) * 4);   // 6.4
+  --spacer-xxl: calc(var(--spacer-s) * 6);  // 9.6
 }
 
 html {
   background: linear-gradient(to bottom, #dedfe3 2%, #aeb3b9 95%) fixed, radial-gradient(farthest-corner at 33% 100%, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .5) 100%) fixed;
   background-blend-mode: screen;
-  font: 300 10px $font-family-main;
 }
 
 a:link,
@@ -17,13 +30,15 @@ a:visited {
 }
 
 h1 {
-  font-size: 3.6rem;
-  margin-bottom: .8rem;
+  font-size: var(--font-size-xxl);
+  font-weight: 500;
+  margin-bottom: var(--spacer-xs);
 }
 
 h2 {
-  font-size: 3rem;
-  margin-bottom: .4rem;
+  font-size: var(--font-size-xl);
+  font-weight: 500;
+  margin-bottom: var(--spacer-xxs);
 }
 
 body {
@@ -31,18 +46,18 @@ body {
   color: $text-color-primary;
   display: flex;
   flex-direction: column;
-  font-size: $font-size-normal;
+  font-weight: 300;
   margin: 0 auto;
-  max-width: var(--content-width);
+  max-width: $content-width;
   min-height: 100vh;
-  min-width: var(--content-width-min);
+  min-width: $content-width-min;
 
   > header {
     align-items: center;
     border-bottom: $border-primary;
     display: flex;
     flex-wrap: wrap;
-    padding: 1rem;
+    padding: var(--spacer-xs);
 
     .logo {
       margin: 0 auto 0 0;
@@ -60,7 +75,7 @@ body {
       li {
         display: inline-block;
         list-style: none;
-        margin: 0 .4rem;
+        margin: 0 var(--spacer-xxs);
         text-align: center;
       }
     }
@@ -73,15 +88,15 @@ body {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    font-size: $font-size-decreased;
+    font-size: var(--font-size-decreased);
     justify-content: space-between;
     margin: auto 0 0 0;
-    padding: .8rem;
+    padding: var(--spacer-xs);
   }
 }
 
 #main {
-  padding: 1rem;
+  padding: var(--spacer-xs);
   width: 100%;
 }
 
@@ -100,7 +115,7 @@ article {
   }
 
   dl {
-    margin: 0 0 1.6rem 0;
+    margin: 0 0 var(--spacer-s);
     padding: 0;
 
     ul {
@@ -118,13 +133,26 @@ article {
         font-weight: normal;
       }
     }
+
+    .text {
+      box-shadow: .2rem .2rem .8rem rgba(0, 0, 0, .25);
+      padding: var(--spacer-s);
+
+      ul {
+        padding-left: var(--spacer-m);
+
+        > li {
+          list-style: initial;
+        }
+      }
+    }
   }
 
   dt {
     border-top: $border-secondary;
-    font: 400 $font-size-increased $font-family-main;
-    margin: .8rem 0 0 0;
-    padding: .4rem 0;
+    font: 400 var(--font-size-increased) $font-family-main;
+    margin: var(--spacer-xs) 0 0;
+    padding: var(--spacer-xxs) 0;
   }
 
   dd {
@@ -134,7 +162,7 @@ article {
 
     input,
     textarea {
-      font-size: $font-size-normal;
+      font-size: var(--font-size-normal);
       min-width: 1ch;
     }
 
@@ -150,30 +178,31 @@ article {
   }
 
   > nav {
-    margin: 1.6rem 0;
+    margin: var(--spacer-s) 0;
   }
 
   > section {
     border-top: .1rem solid $text-color-secondary;
-    margin: 2.4rem auto;
-    padding: .8rem 0 0 0;
+    margin: var(--spacer-m) auto;
+    padding: var(--spacer-xs) 0 0;
   }
 }
 
 .dashboard {
   nav {
-    margin: .4rem 0 1.6rem;
+    margin: var(--spacer-xxs) 0 var(--spacer-s);
     max-width: 64rem;
   }
 
+  h3,
   .heading {
     display: block;
-    font: 500 1.8rem/1.5 $font-family-heading;
+    font: 500 var(--font-size-increased)/1.5 $font-family-heading;
   }
 
   ul {
     box-shadow: $block-shadow;
-    margin: .4rem;
+    margin: var(--spacer-xxs);
     padding: 0;
   }
 
@@ -181,7 +210,7 @@ article {
     background: $row-background-odd;
     list-style: none;
     margin: 0;
-    padding: .8rem;
+    padding: var(--spacer-xs);
     position: relative;
 
     &:nth-last-of-type(even) {
@@ -191,7 +220,7 @@ article {
 
   .description {
     color: $text-color-secondary;
-    font-size: $font-size-decreased;
+    font-size: var(--font-size-decreased);
   }
 }
 
@@ -211,25 +240,15 @@ article {
   }
 }
 
-nav.admin-breadcrumbs {
-  margin-bottom: .8rem;
-  padding: .4rem;
-
-  a {
-    background: image_url('biovision/base/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
-    padding-right: 1rem;
-    transition: background .25s;
-
-    &:hover {
-      background-image: image_url('biovision/base/icons/breadcrumb-hover.svg');
-    }
-  }
+nav.breadcrumbs {
+  margin-bottom: var(--spacer-xs);
+  padding: var(--spacer-xxs);
 }
 
 .privileges {
   ul {
     border-left: $border-primary;
-    margin: .8rem 0 0 2.4rem;
+    margin: var(--spacer-xs) 0 0 var(--spacer-m);
   }
 }
 
@@ -247,14 +266,14 @@ nav.admin-breadcrumbs {
   li {
     list-style: none;
     margin: 0;
-    padding: .4rem;
+    padding: var(--spacer-xxs);
     position: relative;
   }
 
   label {
     cursor: pointer;
     display: inline-block;
-    padding: .2rem 1.6rem;
+    padding: var(--spacer-xxxs) var(--spacer-s);
     transition: .125s;
   }
 
@@ -275,3 +294,23 @@ nav.admin-breadcrumbs {
     }
   }
 }
+
+.ck-content {
+  ul {
+    padding-left: var(--spacer-m);
+
+    > li {
+      list-style: initial;
+    }
+  }
+}
+
+.state_container {
+  margin-bottom: var(--spacer-s);
+
+  progress {
+    width: 100%;
+  }
+}
+
+@import "biovision/base/admin/components";