biovision-base 0.22.180920.0 → 0.34.190331.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e26d43272af3cd8b34dd325f8dec9a0728d5eeecd8b5108493c10c4260f97916
-  data.tar.gz: 694106f3d60380e268c2a93f57439bfcee085ed4e11022acf4001cde0b02f159
+  metadata.gz: eaab273faa85e0bc922a32b591fa239f57f78d3391554d304afb1e1a32d60285
+  data.tar.gz: f8e5837fdf1922adf3e6acaca5801de5e3f4d483ca8ef6c124a3382e1a1d7330
 SHA512:
-  metadata.gz: 067ee5df601cebc75b36340c507f30ee0f6e89a149e1ccc5deb67e716d1d3a8b58ef7ce132a1b6b254005ec118146a45c19b76343a98912de6ee66a0cb7838de
-  data.tar.gz: 3d0a6eb7e677b759495c67a289d3e46d97807632ecb557fba1f9d548373c6c055b1533f50906f2ba57d96fc7bea8a6f86280e83e413cdb013a569cd2b25daeef
+  metadata.gz: 1ee9f0baf217333f237339d555681d334c37cf27d9a822b92e6f1e0bc15fe4b3c654ba73b79bece91b97a80d3226d70cfe33c334323f5b6b18ebc764a0cc079b
+  data.tar.gz: 17bb0eef033b0bffe97faa5e4cb4eafefc177a592062298680caa67b286332b1f47cc925928cd9bf78fc48f34a331d48b93e8decfafc7bb4ab3571968bd4ea11

data/README.md

@@ -5,7 +5,8 @@ Biovision::Base
 
 Используйте на свой страх и риск без каких-либо гарантий работоспособности.
 
-Описание необходимых и рекомендуемых действий находится в `setup.md`
+Описание необходимых и рекомендуемых действий находится 
+в [setup.md](https://github.com/Biovision/biovision-base/blob/master/setup.md)
 
 Очистка устаревших сессий
 -------------------------
@@ -30,7 +31,7 @@ Biovision::Base
 Параметры, которые можно задать через data-атрибуты:
 
  * `delay` — задержка перед пролистыванием. По умолчанию — `125` (мс)
- * `type` — тип. По умолчанию — `opacity` (пока это единственный вариант)
+ * `type` — тип. По умолчанию — `opacity` (есть ещё `slide`).
 
 ```html
 <div class="biovision-slider" data-delay="250" data-type="opacity">
@@ -85,31 +86,14 @@ Biovision::Base
    который проверяется.
    
 4. Рядом с элементом нужно добавить `div` с атрибутом `data-field` и таким же
-   значением, а также классом `check-result-error hidden`.
+   значением, а также классом `check-result-error`.
    
 Пример — [app/views/my/profiles/new/_form.html.erb](https://github.com/Biovision/biovision-base/blob/master/app/views/my/profiles/new/_form.html.erb),
 [app/controllers/users_controller.rb#check](https://github.com/Biovision/biovision-base/blob/master/app/controllers/users_controller.rb#L8),
 [app/views/users/check.jbuilder](https://github.com/Biovision/biovision-base/blob/master/app/views/users/check.jbuilder)
 
-## Installation
-Add this line to your application's Gemfile:
-
-```ruby
-gem 'biovision-base'
-```
-
-And then execute:
-```bash
-$ bundle
-```
-
-Or install it yourself as:
-```bash
-$ gem install biovision-base
-```
-
 ## Contributing
-Contribution directions go here.
+Fork, update, make pull request.
 
 ## License
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/app/assets/images/biovision/base/icons/apply.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Apply</title>
+  <polyline points="3,12 11,21 21,3" stroke="#61e440" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/biovision/base/icons/components/contact.svg

@@ -0,0 +1,26 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Contact</title>
+  <defs>
+    <style type="text/css">
+      * { stroke-width: 1; }
+      .a { stroke: #777; }
+      .b { stroke: #555; }
+      .c { fill: #3aa; }
+      line { stroke-linecap: round; }
+    </style>
+  </defs>
+  <g class="a">
+    <rect x="1" y="1" width="15" height="10" fill="#fff"/>
+    <polyline points="1,1 9,5 16,1" fill="none"/>
+  </g>
+  <g class="b">
+    <rect x="7" y="6" width="10" height="17" rx="2" fill="#eee"/>
+    <line x1="10" y1="8" x2="14" y2="8" />
+    <circle cx="12.25" cy="21" r=".5"/>
+    <rect x="8" y="9.5" width="8.125" height="10" rx="1" ry="1" fill="#555" stroke="none" />
+  </g>
+  <g class="c">
+    <path d="M20,24 l-3.5,-8 q4,-8 7,0 z"/>
+    <circle cx="20.125" cy="15.25" r="1.5" fill="#f7a"/>
+  </g>
+</svg>

data/app/assets/images/biovision/base/icons/components/registration.svg

@@ -0,0 +1,17 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Registration</title>
+  <defs>
+    <style type="text/css">
+      .a { stroke-width: 2; stroke: #3a3; stroke-linecap: round; }
+      .b { stroke-width: 1.5; stroke: #333; fill: #eee; }
+    </style>
+  </defs>
+  <g class="a">
+    <line x1="5" y1="2" x2="5" y2="8"/>
+    <line x1="2" y1="5" x2="8" y2="5"/>
+  </g>
+  <g class="b">
+    <ellipse cx="12.5" cy="10" rx="3.5" ry="4.5"/>
+    <path d="M3,22 Q12,11 22,22 z" stroke-linejoin="round"/>
+  </g>
+</svg>

data/app/assets/images/biovision/base/icons/destroy.svg

@@ -1,9 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg id="Layer_1" style="enable-background:new 0 0 612 792;" version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
-  <style type="text/css">
-	.st0{fill:#E44061;}
-</style>
-  <g transform="matrix(0.046985, 0, 0, 0.046985, -2.34925, -6.624886)">
-    <polygon class="st0" points="382.2,396.4 560.8,217.8 484,141 305.4,319.6 126.8,141 50,217.8 228.6,396.4 50,575 126.8,651.8    305.4,473.2 484,651.8 560.8,575 382.2,396.4  "/>
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Delete</title>
+  <defs>
+    <style type="text/css">
+      line { stroke: #e44061; stroke-width: 3; stroke-linecap: round; }
+    </style>
+  </defs>
+  <g>
+    <line x1="3" y1="3" x2="21" y2="21"/>
+    <line x1="3" y1="21" x2="21" y2="3"/>
   </g>
-</svg>
+</svg>

data/app/assets/images/biovision/base/icons/settings.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+  <title>Settings</title>
+  <defs>
+    <style>
+      line { stroke-linecap: round }
+      circle { stroke-width: 3 }
+      .a { stroke-width: 15; stroke: #aaa }
+      .b { stroke-width: 5; stroke: #777 }
+      .c { fill: #bbb; stroke: #999 }
+      .d { stroke-width: 3; stroke: #444; fill: #777 }
+    </style>
+  </defs>
+  <g>
+    <g class="a">
+      <line x1="20" y1="10" x2="20" y2="150"/>
+      <line x1="60" y1="10" x2="60" y2="150"/>
+      <line x1="100" y1="10" x2="100" y2="150"/>
+    </g>
+    <g class="b">
+      <line x1="20" y1="10" x2="20" y2="150"/>
+      <line x1="60" y1="10" x2="60" y2="150"/>
+      <line x1="100" y1="10" x2="100" y2="150"/>
+    </g>
+    <g class="c">
+      <circle cx="20" cy="55" r="15"/>
+      <circle cx="60" cy="115" r="15"/>
+      <circle cx="100" cy="30" r="15"/>
+    </g>
+  </g>
+  <g>
+    <g>
+      <circle cx="140" cy="20" r="12" stroke="#070" fill="#4a4"/>
+      <circle cx="140" cy="60" r="12" stroke="#440" fill="#773"/>
+      <circle cx="140" cy="100" r="12" stroke="#400" fill="#733"/>
+    </g>
+    <g class="d">
+      <circle cx="140" cy="140" r="12"/>
+      <polyline points="130,140 126,126 140,130"/>
+    </g>
+  </g>
+</svg>

data/app/assets/images/biovision/base/icons/slider/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" viewBox="0 0 12 36" width="12px" height="36px" xmlns="http://www.w3.org/2000/svg">
+  <title>Left arrow (wide)</title>
+  <polyline points="10,2 2,18 10,34" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/biovision/base/icons/slider/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" viewBox="0 0 12 36" width="12px" height="36px" xmlns="http://www.w3.org/2000/svg">
+  <title>Right arrow (wide)</title>
+  <polyline points="2,2 10,18 2,34" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/biovision/base/placeholders/16x9.svg

@@ -1,5 +1,12 @@
 <svg version="1.1" viewBox="0 0 320 180" width="320px" height="180px" xmlns="http://www.w3.org/2000/svg">
-  <rect x1="1" y1="1" width="100%" height="100%" stroke="#aaa" stroke-width="4" fill="none"/>
-  <line x1="1" y1="1" x2="319" y2="179" stroke-width="3" stroke="#aaa"/>
-  <line x1="1" y1="179" x2="319" y2="1" stroke-width="3" stroke="#aaa"/>
+  <title>Image placeholder 16×9</title>
+  <style>
+    * { stroke: #777; fill: none; }
+    line { stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="317" height="177" stroke-width="4"/>
+    <line x1="1" y1="1" x2="319" y2="179"/>
+    <line x1="1" y1="179" x2="319" y2="1"/>
+  </g>
 </svg>

data/app/assets/images/biovision/base/placeholders/1x1.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" viewBox="0 0 300 300" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
+  <title>Image placeholder 1×1</title>
+  <style>
+    * { stroke: #777; fill: none; }
+    line { stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="297" height="297" stroke-width="4"/>
+    <line x1="1" y1="1" x2="299" y2="299"/>
+    <line x1="1" y1="299" x2="299" y2="1"/>
+  </g>
+</svg>

data/app/assets/images/biovision/base/placeholders/3x2.svg

@@ -1,5 +1,12 @@
 <svg version="1.1" viewBox="0 0 300 200" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
-  <rect x1="1" y1="1" width="100%" height="100%" stroke="#777" stroke-width="4" fill="none"/>
-  <line x1="1" y1="1" x2="299" y2="199" stroke-width="3" stroke="#777"/>
-  <line x1="1" y1="199" x2="299" y2="1" stroke-width="3" stroke="#777"/>
+  <title>Image placeholder 3×2</title>
+  <style>
+    * { stroke: #777; fill: none; }
+    line { stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="297" height="197" stroke-width="4"/>
+    <line x1="1" y1="1" x2="299" y2="199"/>
+    <line x1="1" y1="199" x2="299" y2="1"/>
+  </g>
 </svg>

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

@@ -1,79 +1,26 @@
 'use strict';
 
 const Biovision = {
-    locale: document.querySelector('html').getAttribute('lang'),
-    storage: {
-        available: function (type) {
-            try {
-                const x = '__storage_test__';
-
-                window[type].setItem(x, x);
-                window[type].removeItem(x);
-
-                return true;
-            } catch (e) {
-                return false;
-            }
-        },
-        set: function (type, key, value) {
-            if (Biovision.storage.available(type)) {
-                window[type].setItem(key, value);
-            } else {
-                console.log('set: Storage ' + type + ' is not available');
-            }
-        },
-        get: function (type, key) {
-            if (Biovision.storage.available(type)) {
-                return window[type].getItem(key);
-            } else {
-                console.log('get: Storage ' + type + ' is not available');
-                return null;
-            }
-        },
-        remove: function (type, key) {
-            if (Biovision.storage.available(type)) {
-                window[type].removeItem(key);
-            } else {
-                console.log('remove: Storage ' + type + ' is not available');
-            }
-        },
-        session: {
-            set: function (key, value) {
-                Biovision.storage.set('sessionStorage', key, value);
-            },
-            get: function (key) {
-                return Biovision.storage.get('sessionStorage', key);
-            },
-            remove: function (key) {
-                Biovision.storage.remove('sessionStorage', key);
-            }
-        },
-        local: {
-            set: function (key, value) {
-                Biovision.storage.set('localStorage', key, value);
-            },
-            get: function (key) {
-                return Biovision.storage.get('localStorage', key);
-            },
-            remove: function (key) {
-                Biovision.storage.remove('localStorage', key);
-            }
+    locale: '',
+    csrfToken: '',
+    components: {},
+    init: function () {
+        this.locale = document.querySelector('html').getAttribute('lang');
+        this.csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+        if (typeof jQuery !== 'undefined') {
+            jQuery.ajaxSetup({
+                headers: {
+                    'X-CSRF-Token': this.csrfToken
+                }
+            });
         }
-    },
-    preview_file: function (input) {
-        const target_image = input.getAttribute('data-image');
-
-        if (target_image) {
-            const target = document.querySelector('#' + target_image + ' img');
 
-            if (target && input.files && input.files[0]) {
-                const reader = new FileReader();
-
-                reader.onload = function (event) {
-                    target.setAttribute('src', event.target.result);
-                };
-
-                reader.readAsDataURL(input.files[0]);
+        for (let component in this.components) {
+            if (this.components.hasOwnProperty(component)) {
+                if (this.components[component].hasOwnProperty('init')) {
+                    this.components[component].init();
+                }
             }
         }
     },
@@ -85,6 +32,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");
         return Biovision.newAjaxRequest(method, url, onSuccess, onFailure);
     },
     /**
@@ -108,13 +56,11 @@ const Biovision = {
                 (onFailure || Biovision.handleAjaxFailure).call(this);
             }
         });
-        request.addEventListener('error', function () {
-            console.log('AJAX error:', this);
-        });
+        request.addEventListener("error", Biovision.handleAjaxFailure);
 
         request.open(method.toUpperCase(), url);
         request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-        request.setRequestHeader('X-CSRF-Token', Biovision.csrf_token);
+        request.setRequestHeader('X-CSRF-Token', Biovision.csrfToken);
 
         return request;
     },
@@ -130,6 +76,7 @@ const Biovision = {
      * @param response
      */
     handle_ajax_failure: function (response) {
+        console.log("Biovision.handle_ajax_failure is deprecated; use Biovision.handleAjaxFailure instead");
         console.log('AJAX failed', this);
         if (response.hasOwnProperty('responseJSON')) {
             console.log(response['responseJSON']);
@@ -139,154 +86,456 @@ const Biovision = {
     },
     /**
      * Handle failed AJAX request
+     *
+     * @type {Function}
      */
     handleAjaxFailure: function () {
-        console.log('AJAX failed', this.responseText);
+        console.log('AJAX failed', this);
     },
-    transliterate: function (input) {
-        const char_map = {
-            'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
-            'е': 'e', 'ё': 'yo', 'ж': 'zh', 'з': 'z', 'и': 'i',
-            'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
-            'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't',
-            'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'c', 'ч': 'ch',
-            'ш': 'sh', 'щ': 'shh', 'ъ': '', 'ы': 'y', 'ь': '',
-            'э': 'e', 'ю': 'yu', 'я': 'ya',
-            'å': 'ao', 'ä': 'ae', 'ö': 'oe', 'é': 'e'
-        };
-        let string = input.toLowerCase();
+    /**
+     * Показать список ошибок после обработки формы
+     *
+     * Используется в контроллерах при отправке форм через remote: true
+     *
+     * @param {string} model_name название модели
+     * @param {Array<string>} list список ошибок
+     */
+    showListOfErrors: function (model_name, list) {
+        const form = document.getElementById(model_name + '-form');
+        if (form) {
+            let errors = form.querySelector('ol.errors');
+            let data = '';
 
-        for (let index in char_map) {
-            if (char_map.hasOwnProperty(index)) {
-                string = string.replace(new RegExp(index, 'g'), char_map[index]);
+            if (!errors) {
+                errors = document.createElement('ol');
+                errors.classList.add('errors');
             }
-        }
-        string = string.replace(/[^-a-z0-9_.]/g, '-');
-        string = string.replace(/^[-_.]*([-a-z0-9_.]*[a-z0-9]+)[-_.]*$/, '$1');
-        string = string.replace(/--+/g, '-');
 
-        return string;
+            list.forEach(function (message) {
+                data += '<li>' + message + '</li>';
+            });
+
+            errors.innerHTML = data;
+
+            form.prepend(errors);
+
+            errors.scrollIntoView();
+        }
     },
-    ajax_delete_button: function (element) {
-        const messages = {
-            ru: 'Вы уверены?',
-            en: 'Are you sure?'
-        };
-        const message = messages.hasOwnProperty(Biovision.locale) ? messages[Biovision.locale] : 'Are you sure?';
-        const url = element.getAttribute('data-url');
-        const request = Biovision.newAjaxRequest('delete', url, function () {
-            element.closest('li[data-id]').remove();
+    /**
+     * Hide and show elements in form with given id
+     *
+     * Toggles class "hidden" for elements with selectors
+     * hideSelector and showSelector for form children
+     *
+     * @param {String} formId
+     * @param {String} hideSelector elements to hide
+     * @param {String} showSelector elements to show
+     */
+    switchFormElements: function (formId, hideSelector, showSelector) {
+        const form = document.getElementById(formId);
+        if (form) {
+            form.querySelectorAll(showSelector).forEach(function (element) {
+                element.classList.remove('hidden');
+            });
+            form.querySelectorAll(hideSelector).forEach(function (element) {
+                element.classList.add('hidden');
+            });
+        } else {
+            console.log('Cannot find element with id ' + formId)
+        }
+    }
+};
+
+/**
+ * Show/hide "go to top" link when it is present in layout
+ *
+ * @type {Object}
+ */
+Biovision.components.topLinker = {
+    /**
+     * @type {Boolean}
+     */
+    initialized: false,
+    /**
+     * @type {HTMLElement}
+     */
+    element: undefined,
+    /**
+     * Initialize component
+     */
+    init: function () {
+        this.element = document.getElementById('go-to-top');
+
+        if (this.element) {
+            const topLinker = this.element;
+
+            window.addEventListener('scroll', function () {
+                if (window.pageYOffset > 500) {
+                    topLinker.classList.remove('inactive');
+                } else {
+                    topLinker.classList.add('inactive');
+                }
+            });
+
+            this.initialized = true;
+        }
+    }
+};
+
+/**
+ * Preview images when selecting them in input type="file" fields
+ *
+ * @type {Object}
+ */
+Biovision.components.filePreview = {
+    /**
+     * @type {Boolean}
+     */
+    initialized: false,
+    /**
+     * Initialize component
+     */
+    init: function () {
+        document.addEventListener('change', function (event) {
+            const input = event.target;
+
+            if (input.matches('input[type=file]')) {
+                Biovision.components.filePreview.handle(input);
+            }
         });
+        this.initialized = true;
+    },
+    /**
+     * Handle change of file input field
+     *
+     * @param {EventTarget|HTMLInputElement} input
+     */
+    handle: function (input) {
+        const targetImage = input.getAttribute('data-image');
 
-        element.addEventListener('click', function () {
-            element.disabled = true;
+        if (targetImage) {
+            const target = document.querySelector('#' + targetImage + ' img');
 
-            if (confirm(message)) {
-                request.send();
+            if (target && input.files && input.files[0]) {
+                const reader = new FileReader();
+
+                reader.onload = function (event) {
+                    target.setAttribute('src', event.target["result"]);
+                };
+
+                reader.readAsDataURL(input.files[0]);
             }
+        }
+    },
+};
 
-            element.disabled = false;
-        });
+/**
+ * Linking entities with checkboxes
+ *
+ * @type {Object}
+ */
+Biovision.components.entityLinker = {
+    /**
+     * @type {Boolean}
+     */
+    initialized: false,
+    selector: '.entity-links input[type=checkbox]',
+    /**
+     * List of elements with attached event listener
+     *
+     * @type {Array<HTMLElement>}
+     */
+    elements: [],
+    /**
+     * Initialize component
+     */
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
     },
-    entity_link_changer: function () {
+    /**
+     * Apply handler to element
+     *
+     * @param {HTMLInputElement} element
+     */
+    apply: function (element) {
+        const component = Biovision.components.entityLinker;
+
+        component.elements.push(element);
+        element.addEventListener('click', component.handler);
+    },
+    /**
+     * Event handler for clicking on element
+     */
+    handler: function () {
         const url = this.getAttribute('data-url');
 
         if (url && !this.disabled) {
             const method = this.checked ? 'put' : 'delete';
+            const box = this;
 
             this.disabled = true;
 
-            Biovision.newAjaxRequest(method, url, () => this.disabled = false).send();
+            Biovision.newAjaxRequest(method, url, function () {
+                box.disabled = false
+            }).send();
         }
+    }
+};
+
+/**
+ * Instantly check form validity
+ *
+ * @type {Object}
+ */
+Biovision.components.instantCheck = {
+    initialized: false,
+    selector: 'form[data-check-url]',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
     },
-    instant_check: function (form) {
-        const url = form.getAttribute('data-check-url');
+    /**
+     *
+     * @param {HTMLFormElement} form
+     */
+    apply: function (form) {
+        const component = Biovision.components.instantCheck;
 
-        const perform_check = function () {
-            const element = this;
+        form.querySelectorAll('[data-check]').forEach(function (element) {
+            component.elements.push(element);
+            element.addEventListener('blur', component.handler);
+        });
+    },
+    handler: function () {
+        const element = this;
+        const form = element.closest('form');
+        const url = form.getAttribute('data-check-url');
 
-            const request = Biovision.newAjaxRequest('POST', url, function () {
-                if (this.responseText) {
-                    const response = JSON.parse(this.responseText);
+        const request = Biovision.newAjaxRequest('POST', url, function () {
+            if (this.responseText) {
+                const response = JSON.parse(this.responseText);
 
-                    if (response.hasOwnProperty('meta')) {
-                        if (response.meta.valid) {
-                            form.querySelectorAll('[data-field]').forEach(function (field) {
-                                field.innerHTML = '';
-                                field.classList.add('hidden');
-                            });
-                        } else {
-                            const key = element.getAttribute('data-check');
-                            const container = form.querySelector('[data-field="' + key + '"]');
+                if (response.hasOwnProperty('meta')) {
+                    if (response.meta.valid) {
+                        form.querySelectorAll('[data-field]').forEach(function (field) {
+                            field.innerHTML = '';
+                        });
+                    } else {
+                        const key = element.getAttribute('data-check');
+                        const container = form.querySelector('[data-field="' + key + '"]');
 
-                            if (container) {
-                                const errors = response.meta['errors'];
+                        if (container) {
+                            const errors = response.meta['errors'];
 
-                                if (errors.hasOwnProperty(key)) {
-                                    container.innerHTML = errors[key].join('; ');
-                                    container.classList.remove('hidden');
-                                } else {
-                                    container.classList.add('hidden');
-                                }
+                            if (errors.hasOwnProperty(key)) {
+                                container.innerHTML = errors[key].join('; ');
+                                container.classList.remove('hidden');
+                            } else {
+                                container.innerHTML = '';
                             }
                         }
                     }
                 }
-            });
+            }
+        });
 
-            const data = new FormData();
-            Array.from((new FormData(form)).entries()).forEach(function (entry) {
-                const value = entry[1];
+        const data = new FormData();
+        Array.from((new FormData(form)).entries()).forEach(function (entry) {
+            const value = entry[1];
 
-                if (value instanceof window.File && value.name === '' && value.size === 0) {
-                    data.append(entry[0], new window.Blob([]), '');
-                } else {
-                    if (entry[0] !== '_method') {
-                        data.append(entry[0], value);
-                    }
+            if (value instanceof window.File && value.name === '' && value.size === 0) {
+                data.append(entry[0], new window.Blob([]), '');
+            } else {
+                if (entry[0] !== '_method') {
+                    data.append(entry[0], value);
                 }
-            });
+            }
+        });
 
-            request.send(data);
-        };
+        request.send(data);
+    }
+};
 
-        if (url.length) {
-            form.querySelectorAll('[data-check]').forEach(function (element) {
-                element.addEventListener('blur', perform_check);
-            });
+Biovision.components.transliterator = {
+    initialized: false,
+    selector: '[data-transliterate]',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    /**
+     *
+     * @param {HTMLElement} element
+     */
+    apply: function (element) {
+        const component = Biovision.components.transliterator;
+
+        component.elements.push(element);
+        element.addEventListener('blur', component.handler);
+    },
+    /**
+     *
+     * @param {Event} event
+     */
+    handler: function (event) {
+        const component = Biovision.components.transliterator;
+        const element = event.target;
+        const target = document.getElementById(element.getAttribute('data-transliterate'));
+
+        if (target && target.value === '') {
+            target.value = component.transliterate(element.value);
+            target.dispatchEvent(new Event('change'));
         }
     },
     /**
-     * Показать список ошибок после обработки формы
      *
-     * Используется в контроллерах при отправке форм через remote: true
+     * @param {string} input
+     * @returns {string}
+     */
+    transliterate: function (input) {
+        const characterMap = {
+            'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
+            'е': 'e', 'ё': 'yo', 'ж': 'zh', 'з': 'z', 'и': 'i',
+            'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
+            'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't',
+            'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'c', 'ч': 'ch',
+            'ш': 'sh', 'щ': 'shh', 'ъ': '', 'ы': 'y', 'ь': '',
+            'э': 'e', 'ю': 'yu', 'я': 'ya',
+            'å': 'ao', 'ä': 'ae', 'ö': 'oe', 'é': 'e'
+        };
+        let string = input.toLowerCase();
+
+        for (let index in characterMap) {
+            if (characterMap.hasOwnProperty(index)) {
+                string = string.replace(new RegExp(index, 'g'), characterMap[index]);
+            }
+        }
+        string = string.replace(/[^-a-z0-9_.]/g, '-');
+        string = string.replace(/^[-_.]*([-a-z0-9_.]*[a-z0-9]+)[-_.]*$/, '$1');
+        string = string.replace(/--+/g, '-');
+
+        return string;
+    },
+};
+
+Biovision.components.formStatus = {
+    initialized: false,
+    selector: 'form[data-remote]',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    /**
      *
-     * @param {string} model_name название модели
-     * @param {Array<string>} list список ошибок
+     * @param {HTMLFormElement} element
      */
-    showListOfErrors: function (model_name, list) {
-        const form = document.getElementById(model_name + '-form');
-        if (form) {
-            let errors = form.querySelector('ol.errors');
-            let data = '';
+    apply: function (element) {
+        const component = Biovision.components.formStatus;
+        component.elements.push(element);
 
-            if (!errors) {
-                errors = document.createElement('ol');
-                errors.classList.add('errors');
+        const button = element.querySelector('button[type=submit]');
+        const loadingMessage = element.querySelector('.loading_message');
+        const stateContainer = element.querySelector('.state_container');
+        const progressPercent = element.querySelector('.state_container .percentage');
+        const progressBar = element.querySelector('.state_container progress');
+
+        element.addEventListener('ajax:before', function () {
+            button.disabled = true;
+
+            if (loadingMessage) {
+                loadingMessage.classList.remove('hidden');
             }
+        });
 
-            list.forEach(function (message) {
-                data += '<li>' + message + '</li>';
+        element.addEventListener('ajax:complete', function () {
+            button.disabled = false;
+
+            if (loadingMessage) {
+                loadingMessage.classList.add('hidden');
+            }
+            if (progressBar) {
+                progressBar.value = '0';
+            }
+        });
+
+        if (stateContainer) {
+            element.addEventListener('ajax:beforeSend', function (event) {
+                const request = event.detail[0];
+
+                request.upload.addEventListener('progress', function (e) {
+                    const value = e.loaded / e.total;
+
+                    if (progressPercent) {
+                        progressPercent.innerHTML = (value * 100) + '%';
+                    }
+                    if (progressBar) {
+                        progressBar.value = value;
+                    }
+                });
             });
+        }
+    },
+};
 
-            errors.innerHTML = data;
+Biovision.components.autoExpand = {
+    initialized: false,
+    selector: 'textarea.auto-expand',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    /**
+     *
+     * @param {HTMLTextAreaElement} element
+     */
+    apply: function (element) {
+        const component = Biovision.components.autoExpand;
+        component.elements.push(element);
 
-            form.prepend(errors);
+        element.addEventListener('focus', component.handler);
+        element.addEventListener('input', component.handler);
+    },
+    handler: function () {
+        if (!this.hasOwnProperty('baseScrollHeight')) {
+            let savedValue = this.value;
+            this.value = '';
+            this.baseScrollHeight = this.scrollHeight;
+            this.value = savedValue;
+        }
+        const styles = getComputedStyle(this);
+        const ratio = styles.getPropertyValue('line-height').replace('px', '');
+        const minRows = this.getAttribute('data-min-rows') | 0;
+        const maxRows = this.hasAttribute('data-max-rows') ? parseInt(this.getAttribute('data-max-rows')) : 25;
+        const rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / ratio);
 
-            errors.scrollIntoView();
+        this.rows = minRows;
+        this.rows = minRows + rows;
+        if (this.rows > maxRows) {
+            this.rows = maxRows;
         }
+    }
+};
+
+Biovision.components.entityImageRemover = {
+    initialized: false,
+    selector: '.remove-image-button',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
     },
-    removeEntityImage: function () {
+    apply: function (element) {
+        const component = Biovision.components.entityImageRemover;
+        component.elements.push(element);
+        element.addEventListener('click', component.handler);
+    },
+    handler: function () {
         const button = this;
         if (!button.disabled) {
             const message = button.getAttribute('data-text');
@@ -311,104 +560,395 @@ const Biovision = {
                 request.send();
             }
         }
+    }
+};
+
+Biovision.components.ajaxDeleteButton = {
+    initialized: false,
+    selector: 'button.destroy[data-url]',
+    elements: [],
+    messages: {
+        "ru": "Вы уверены?",
+        "en": "Are you sure?"
     },
-    autoExpand: function () {
-        if (!this.hasOwnProperty('baseScrollHeight')) {
-            let savedValue = this.value;
-            this.value = '';
-            this.baseScrollHeight = this.scrollHeight;
-            this.value = savedValue;
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    apply: function (element) {
+        const component = Biovision.components.ajaxDeleteButton;
+        component.elements.push(element);
+        element.addEventListener('click', component.handler);
+    },
+    handler: function (event) {
+        const messages = Biovision.components.ajaxDeleteButton.messages;
+        const element = event.target;
+        const message = messages.hasOwnProperty(Biovision.locale) ? messages[Biovision.locale] : 'Are you sure?';
+
+        element.disabled = true;
+
+        if (confirm(message)) {
+            const url = element.getAttribute('data-url');
+            const request = Biovision.newAjaxRequest('delete', url, function () {
+                element.closest('li[data-id]').remove();
+            });
+            request.send();
         }
-        const styles = getComputedStyle(this);
-        const ratio = styles.getPropertyValue('line-height').replace('px', '');
-        const minRows = this.getAttribute('data-min-rows') | 0;
-        const maxRows = this.hasAttribute('data-max-rows') ? parseInt(this.getAttribute('data-max-rows')) : 25;
-        const rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / ratio);
 
-        this.rows = minRows;
-        this.rows = minRows + rows;
-        if (this.rows > maxRows) {
-            this.rows = maxRows;
+        element.disabled = false;
+    }
+};
+
+Biovision.components.storage = {
+    initialized: false,
+    session: {
+        set: function (key, value) {
+            Biovision.components.storage.set('sessionStorage', key, value);
+        },
+        get: function (key) {
+            return Biovision.components.storage.get('sessionStorage', key);
+        },
+        remove: function (key) {
+            Biovision.components.storage.remove('sessionStorage', key);
+        }
+    },
+    local: {
+        set: function (key, value) {
+            Biovision.components.storage.set('localStorage', key, value);
+        },
+        get: function (key) {
+            return Biovision.components.storage.get('localStorage', key);
+        },
+        remove: function (key) {
+            Biovision.components.storage.remove('localStorage', key);
         }
     },
-    remoteFormHandler: function (form) {
-        const button = form.querySelector('button[type=submit]');
-        const loadingMessage = form.querySelector('.loading_message');
-        const stateContainer = form.querySelector('.state_container');
-        const progressPercent = form.querySelector('.state_container .percentage');
-        const progressBar = form.querySelector('.state_container progress');
+    init: function () {
+        Biovision.storage = this;
+        this.initialized = true;
+    },
+    available: function (type) {
+        try {
+            const x = '__storage_test__';
 
-        form.addEventListener('ajax:before', function () {
-            button.disabled = true;
+            window[type].setItem(x, x);
+            window[type].removeItem(x);
 
-            if (loadingMessage) {
-                loadingMessage.classList.remove('hidden');
-            }
+            return true;
+        } catch (e) {
+            return false;
+        }
+    },
+    set: function (type, key, value) {
+        if (Biovision.components.storage.available(type)) {
+            window[type].setItem(key, value);
+        } else {
+            console.log('set: Storage ' + type + ' is not available');
+        }
+    },
+    get: function (type, key) {
+        if (Biovision.components.storage.available(type)) {
+            return window[type].getItem(key);
+        } else {
+            console.log('get: Storage ' + type + ' is not available');
+            return null;
+        }
+    },
+    remove: function (type, key) {
+        if (Biovision.components.storage.available(type)) {
+            window[type].removeItem(key);
+        } else {
+            console.log('remove: Storage ' + type + ' is not available');
+        }
+    }
+};
+
+// Кнопка удаления элемента через AJAX
+Biovision.components.destroyButton = {
+    initialized: false,
+    selector: 'div[data-destroy-url] button.destroy',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    apply: function (element) {
+        const component = Biovision.components.destroyButton;
+        component.elements.push(element);
+        element.addEventListener('click', component.handler);
+    },
+    handler: function () {
+        const container = this.closest('div[data-destroy-url]');
+        const url = container.getAttribute('data-destroy-url');
+        const request = Biovision.newAjaxRequest('DELETE', url, function () {
+            container.remove();
         });
 
-        form.addEventListener('ajax:complete', function () {
-            button.disabled = false;
+        this.setAttribute('disabled', 'true');
+        request.send();
+    }
+};
 
-            if (loadingMessage) {
-                loadingMessage.classList.add('hidden');
-            }
-            if (progressBar) {
-                progressBar.value = '0';
+// Поиск пользователя в админке
+Biovision.components.userSearch = {
+    initialized: false,
+    selector: '.user-search button',
+    elements: [],
+    init: function () {
+        document.querySelectorAll(this.selector).forEach(this.apply);
+        this.initialized = true;
+    },
+    apply: function (element) {
+        const component = Biovision.components.userSearch;
+        component.elements.push(element);
+        element.addEventListener('click', component.handler);
+    },
+    handler: function () {
+        const container = this.closest('.user-search');
+        const input = container.querySelector('input[type=search]');
+        const url = container.getAttribute('data-url') + '?q=' + encodeURIComponent(input.value);
+
+        const request = Biovision.newAjaxRequest('GET', url, function () {
+            const response = JSON.parse(this.responseText);
+            const results = container.querySelector('.results');
+
+            if (response.hasOwnProperty('data')) {
+                results.innerHTML = response['data']['html'];
+
+                results.querySelectorAll('li').forEach(function (li) {
+                    li.addEventListener('click', function (event) {
+                        const element = event.target;
+                        const target = document.getElementById(container.getAttribute('data-target'));
+
+                        target.value = element.getAttribute('data-id');
+                    });
+                });
             }
         });
 
-        if (stateContainer) {
-            form.addEventListener('ajax:beforeSend', function (event) {
-                const request = event.detail[0];
+        request.send();
+    }
+};
 
-                request.upload.addEventListener('progress', function (e) {
-                    const value = e.loaded / e.total;
+/**
+ * Hide popups when clicking outside
+ *
+ * @type {Object}
+ */
+Biovision.components.hidingPopups = {
+    /**
+     * @type {Boolean}
+     */
+    initialized: false,
+    /**
+     * @type {String}
+     */
+    selector: '.hiding-popup-container .popup-control',
+    /**
+     * List of control checkboxes
+     *
+     * @type {Array<HTMLInputElement>}
+     */
+    elements: [],
+    /**
+     * Initialize component
+     */
+    init: function () {
+        const component = this;
+        this.elements = [];
+        document.querySelectorAll(this.selector).forEach(component.addElement);
+        document.addEventListener('click', component.handler);
 
-                    if (progressPercent) {
-                        progressPercent.innerHTML = (value * 100) + '%';
-                    }
-                    if (progressBar) {
-                        progressBar.value = value;
-                    }
-                });
+        this.initialized = true;
+    },
+    /**
+     * Add container to list
+     *
+     * @param {HTMLInputElement} element
+     */
+    addElement: function (element) {
+        Biovision.components.hidingPopups.elements.push(element);
+    },
+    /**
+     * Handle click
+     *
+     * @param {Event} event
+     * @type {Function}
+     */
+    handler: function (event) {
+        const component = Biovision.components.hidingPopups;
+        const selector = '.hiding-popup-container *';
+        const target = event.target;
+
+        if (target.matches(selector)) {
+            const container = target.closest('.hiding-popup-container');
+            const checkbox = container.querySelector(component.selector);
+            component.elements.forEach(function (element) {
+                if (element !== checkbox) {
+                    element.checked = false;
+                }
+            });
+        } else {
+            component.elements.forEach(function (checkbox) {
+                checkbox.checked = false;
             });
         }
     }
 };
 
-document.addEventListener('DOMContentLoaded', function () {
-    Biovision.csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+Biovision.components.componentEditor = {
+    initialized: false,
+    /**
+     * @type {HTMLElement}
+     */
+    list: undefined,
+    url: undefined,
+    elements: [],
+    values: {},
+    init: function () {
+        this.list = document.getElementById('biovision-component-parameters');
+        if (this.list) {
+            const component = this;
+            this.url = this.list.getAttribute('data-url');
+            this.list.querySelectorAll('input[type="text"]').forEach(component.apply);
+
+            this.initialized = true;
+        }
+    },
+    /**
+     *
+     * @param element
+     * @type {Function}
+     */
+    apply: function (element) {
+        const component = Biovision.components.componentEditor;
+        const button = element.parentNode.querySelector('button');
 
-    const topLinker = document.getElementById('go-to-top');
-    if (topLinker) {
-        window.addEventListener('scroll', function () {
-            if (window.pageYOffset > 500) {
-                topLinker.classList.remove('inactive');
-            } else {
-                topLinker.classList.add('inactive');
+        component.values[element.getAttribute('id')] = element.value;
+
+        component.elements.push(element);
+        element.addEventListener('change', component.handleChange);
+        element.addEventListener('keyup', component.keyUp);
+        button.addEventListener('click', component.handleClick);
+    },
+    handleChange: function (event) {
+        const element = event.target;
+        const button = element.parentNode.querySelector('button');
+
+        button.disabled = false;
+    },
+    keyUp: function (event) {
+        const component = Biovision.components.componentEditor;
+        const element = event.target;
+        const button = element.parentNode.querySelector('button');
+
+        if (component.values[element.getAttribute('id')] !== element.value) {
+            button.disabled = false;
+        }
+    },
+    /**
+     *
+     * @param {MouseEvent} event
+     * @type {Function}
+     */
+    handleClick: function (event) {
+        const component = Biovision.components.componentEditor;
+        /**
+         *
+         * @type {HTMLButtonElement}
+         */
+        const button = event.target;
+        const li = button.closest('li');
+        const input = li.querySelector('input');
+        const data = {
+            "key": {
+                "slug": button.getAttribute('data-slug'),
+                "value": input.value
             }
+        };
+
+        const request = Biovision.jsonAjaxRequest('put', component.url, function () {
+            component.values[input.getAttribute('id')] = input.value;
         });
+
+        button.disabled = true;
+        request.send(JSON.stringify(data));
+    },
+    add: function (data) {
+        if (this.initialized) {
+            const li = document.createElement('li');
+            const name = document.createElement('div');
+            const value = document.createElement('div');
+            const input = document.createElement('input');
+
+            name.classList.add('name');
+            name.innerHTML = "<label>" + data["slug"] + "</label>\n<span>(" + data["name"] + ")</span>";
+
+            value.classList.add('value');
+            input.value = data["value"];
+            value.appendChild(input);
+
+            li.appendChild(name);
+            li.appendChild(value);
+
+            if (data["description"]) {
+                const desc = document.createElement('div');
+                desc.classList.add('description');
+                desc.innerHTML = data["description"];
+
+                li.appendChild(desc);
+            }
+
+            this.list.appendChild(li);
+        } else {
+            console.log('componentEditor is not initialized');
+        }
     }
+};
 
-    // Предварительный просмотр картинки при выборе файла
-    document.addEventListener('change', function (event) {
-        const input = event.target;
+Biovision.components.newParameterForm = {
+    initialized: false,
+    element: undefined,
+    init: function () {
+        this.element = document.getElementById('new-biovision-parameter-form');
+        if (this.element) {
+            const component = this;
 
-        if (input.matches('input[type=file]')) {
-            Biovision.preview_file(input);
+            this.element.addEventListener('submit', component.handler);
+            this.initialized = true;
         }
-    });
+    },
+    handler: function (event) {
+        event.preventDefault();
+
+        const form = event.target;
+        const url = form.getAttribute('action');
+        const data = {"key": {}};
+        form.querySelectorAll('input[data-field]').forEach(function (input) {
+            data["key"][input.getAttribute('data-field')] = input.value;
+        });
 
-    document.addEventListener('click', function (event) {
-        const element = event.target;
+        const request = Biovision.jsonAjaxRequest('put', url, function () {
+            Biovision.components.newParameterForm.clear();
+            Biovision.components.componentEditor.add(data["key"]);
+        });
 
-        // Выбор результата поиска пользователей в админке
-        if (element.matches('.user-search .results li')) {
-            const container = element.closest('.user-search');
-            const target = document.getElementById(container.getAttribute('data-target'));
+        request.send(JSON.stringify(data));
+    },
+    clear: function () {
+        const component = Biovision.components.newParameterForm;
 
-            target.value = element.getAttribute('data-id');
-        }
+        component.element.querySelectorAll('input').forEach(function (input) {
+            input.value = '';
+        });
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+    Biovision.init();
+
+    document.addEventListener('click', function (event) {
+        const element = event.target;
 
         // Запирание/отпирание сущности (иконка с замком)
         if (element.matches('li.lock > a img')) {
@@ -546,77 +1086,6 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         }
     });
-
-    // Кнопка поиска пользователя в админке
-    document.querySelectorAll('.user-search button').forEach(function (element) {
-        element.addEventListener('click', function () {
-            const container = this.closest('.user-search');
-            const input = container.querySelector('input[type=search]');
-            const url = container.getAttribute('data-url') + '?q=' + encodeURIComponent(input.value);
-
-            const request = Biovision.newAjaxRequest('GET', url, function () {
-                const response = JSON.parse(this.responseText);
-                const results = container.querySelector('.results');
-
-                if (response.hasOwnProperty('data')) {
-                    results.innerHTML = response['data']['html'];
-                }
-            });
-
-            request.send();
-        });
-    });
-
-    document.querySelectorAll('.entity-links input[type=checkbox]').forEach(function (element) {
-        element.addEventListener('click', Biovision.entity_link_changer);
-    });
-
-    // Кнопка удаления элемента через AJAX
-    document.querySelectorAll('div[data-destroy-url] button.destroy').forEach(function (element) {
-        element.addEventListener('click', function () {
-            const container = this.closest('div[data-destroy-url]');
-            const url = container.getAttribute('data-destroy-url');
-            const request = Biovision.newAjaxRequest('DELETE', url, function () {
-                container.remove();
-            });
-
-            this.setAttribute('disabled', 'true');
-            request.send();
-        });
-    });
-
-    document.querySelectorAll('button.destroy[data-url]').forEach(Biovision.ajax_delete_button);
-
-    document.querySelectorAll('[data-transliterate]').forEach(function (element) {
-        element.addEventListener('blur', function () {
-            const target = document.getElementById(element.getAttribute('data-transliterate'));
-
-            if (target && target.value === '') {
-                target.value = Biovision.transliterate(element.value);
-                target.dispatchEvent(new Event('change'));
-            }
-        });
-    });
-
-    document.querySelectorAll('form[data-remote]').forEach(Biovision.remoteFormHandler);
-    document.querySelectorAll('form[data-check-url]').forEach(Biovision.instant_check);
-
-    document.querySelectorAll('.remove-image-button').forEach(function (button) {
-        button.addEventListener('click', Biovision.removeEntityImage);
-    });
-
-    document.querySelectorAll('textarea.auto-expand').forEach(function (textarea) {
-        textarea.addEventListener('focus', Biovision.autoExpand);
-        textarea.addEventListener('input', Biovision.autoExpand);
-    });
-
-    if (typeof jQuery !== 'undefined') {
-        jQuery.ajaxSetup({
-            headers: {
-                'X-CSRF-Token': Biovision.csrf_token
-            }
-        });
-    }
 });
 
 function handle_ajax_failure(response) {
@@ -652,153 +1121,3 @@ document.addEventListener('ajax:beforeSend', function (e) {
 
     e.detail[1].data = newFormData
 });
-
-/*
- *************
- * 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 9+
- *
- * @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 9+
- *
- * @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 9+
- *
- * @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);
-        }
-    };
-}