biovision-base 0.11.180127 → 0.14.180326

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f9fa1898ab0825170025cc1c9d2c4409672fae0124dfd8eb292fa20b5d5efb0
-  data.tar.gz: f9e2d769bd9ed60b43021af0c8f315a21ec381b2e258e650a26b638367a61005
+  metadata.gz: 1353161eefdcb8571b2b56a451e83333d79bf82583127c2d561e9ffdb1859953
+  data.tar.gz: 42f4e3dcab70faf1e77dc46ff68a2c248d7952c434eb85ee66228e5ad5092168
 SHA512:
-  metadata.gz: 193adfd352a265199c0d5376068279a47640b8bc5c1e43f197b251e6bea7c7d3a809a0003946d2a9b693c6c37efb13c26f558e9aa094aabebb14b84ff1021f80
-  data.tar.gz: 0c97feb7d31796b88bb95c92ac634adf37d9ac57e3aecd76797bcbb685f58fdfce60126dd4c0e489752147c38bfa142b1456ba7e1fc11bec32f0aadc61e58790
+  metadata.gz: c4242e909f0fdf4760ce0e131469cb8a92b976e02bb731166ace8a28b48ad30e6927c04118274374f694c2d43da3770dba23f7edccaedcd8a102a3e03375e37e
+  data.tar.gz: 43f83f5678b7705c21a54a548d19a0bcddca133f57d53a910b29e701d6b734e876344fd7c2a41d1186ea899f88952d8e70b190b7347d27216c3920c032ca6687

data/README.md

@@ -68,6 +68,29 @@ Biovision::Base
 }
 ```
 
+Проверка данных до отправки всей формы
+--------------------------------------
+
+Например, при регистрации нового пользователя нужно проверить, что почта или
+логин не заняты. Для этого нужно сделать несколько шагов.
+
+1. Маршрут и ответная часть в контроллере, обрабатывающая post-запрос.
+   В ответе должен быть JSON с параметром `meta.valid` (boolean) и `meta.errors`
+   (array), где ключ для `meta.errors` — это поле, а значение — текст ошибки.
+
+2. Для формы нужно задать атрибут `data-check-url` с указанием на URL проверки
+   правильности ввода.
+   
+3. Для элементов формы нужно задать атибут `data-check` со значением ключа,
+   который проверяется.
+   
+4. Рядом с элементом нужно добавить `div` с атрибутом `data-field` и таким же
+   значением, а также классом `check-result-error hidden`.
+   
+Пример — [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:
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-document.addEventListener('DOMContentLoaded', function () {
-    const sliding = {
+Biovision.sliders = {
+    behavior: {
         opacity: {
             left: function (list, delay) {
                 const li = list.querySelector('li:last-of-type');
@@ -24,27 +24,30 @@ document.addEventListener('DOMContentLoaded', function () {
                 setTimeout(move, delay);
             }
         }
-    };
-
-    document.querySelectorAll('.biovision-slider').forEach(function (slider) {
+    },
+    initialize: function (slider) {
         const delay = slider.getAttribute('data-delay') || 125;
         const list = slider.querySelector('ul');
         let type = slider.getAttribute('data-type') || 'opacity';
 
-        if (!sliding.hasOwnProperty(type)) {
+        if (!Biovision.sliders.behavior.hasOwnProperty(type)) {
             console.log('Invalid sliding type: ' + type);
             type = 'opacity';
         }
 
         const slide_right = function () {
-            sliding[type].right(list, delay << 1);
+            Biovision.sliders.behavior[type].right(list, delay << 1);
         };
 
         const slide_left = function () {
-            sliding[type].left(list, delay);
+            Biovision.sliders.behavior[type].left(list, delay);
         };
 
         slider.querySelector('button.prev').addEventListener('click', slide_left);
         slider.querySelector('button.next').addEventListener('click', slide_right);
-    });
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.biovision-slider').forEach(Biovision.sliders.initialize);
 });

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

@@ -1,6 +1,7 @@
 'use strict';
 
 const Biovision = {
+    locale: document.querySelector('html').getAttribute('lang'),
     storage: {
         available: function (type) {
             try {
@@ -90,7 +91,7 @@ const Biovision = {
             }
         });
         request.addEventListener('error', function () {
-            console.log(this);
+            console.log('AJAX error:', this);
         });
 
         request.open(method.toUpperCase(), url);
@@ -100,7 +101,7 @@ const Biovision = {
         return request;
     },
     handle_ajax_failure: function (response) {
-        console.log(this);
+        console.log('AJAX failed', this);
         if (response.hasOwnProperty('responseJSON')) {
             console.log(response['responseJSON']);
         } else {
@@ -129,6 +130,102 @@ const Biovision = {
         string = string.replace(/--+/g, '-');
 
         return string;
+    },
+    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.new_ajax_request('delete', url, function () {
+            element.closest('li[data-id]').remove();
+        });
+
+        element.addEventListener('click', function () {
+            element.disabled = true;
+
+            if (confirm(message)) {
+                request.send();
+            }
+
+            element.disabled = false;
+        });
+    },
+    entity_link_changer: function () {
+        const url = this.getAttribute('data-url');
+
+        if (url && !this.disabled) {
+            const method = this.checked ? 'put' : 'delete';
+
+            this.disabled = true;
+
+            Biovision.new_ajax_request(method, url, () => this.disabled = false).send();
+        }
+    },
+    instant_check: function (form) {
+        const url = form.getAttribute('data-check-url');
+
+        const perform_check = function () {
+            const element = this;
+
+            const request = Biovision.new_ajax_request('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 (container) {
+                                const errors = response.meta.errors;
+
+                                if (errors.hasOwnProperty(key)) {
+                                    container.innerHTML = errors[key];
+                                    container.classList.remove('hidden');
+                                } else {
+                                    container.classList.add('hidden');
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+
+            request.send(new FormData(form));
+        };
+
+        form.querySelectorAll('[data-check]').forEach(function (element) {
+            element.addEventListener('blur', perform_check);
+        });
+    },
+    show_list_of_errors: function(entity_name, list) {
+        const form = document.getElementById(entity_name + '-form');
+        if (form) {
+            let errors = form.querySelector('ol.errors');
+            let data = '';
+
+            if (!errors) {
+                errors = document.createElement('ol');
+                errors.classList.add('errors');
+            }
+
+            list.forEach(function (message) {
+                data += '<li>' + message + '</li>';
+            });
+
+            errors.innerHTML = data;
+
+            form.prepend(errors);
+
+            errors.scrollIntoView();
+        }
     }
 };
 
@@ -312,6 +409,10 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    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 () {
@@ -326,6 +427,8 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    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'));
@@ -349,6 +452,8 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    document.querySelectorAll('form[data-check-url]').forEach(Biovision.instant_check);
+
     if (typeof jQuery !== 'undefined') {
         jQuery.ajaxSetup({
             headers: {
@@ -411,6 +516,70 @@ if (!Element.prototype.closest) {
     };
 }
 
+/**
+ * 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()
  *
@@ -435,3 +604,19 @@ if (!Element.prototype.closest) {
         });
     });
 })([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,39 +1,17 @@
-* {
-  box-sizing: border-box;
+:root {
+  --content-width: #{$content-width};
+  --content-width-min: #{$content-width-min};
 }
 
 html {
-  background-attachment: fixed;
+  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;
-  background-image: linear-gradient(to bottom, #dedfe3 2%, #aeb3b9 95%), radial-gradient(farthest-corner at 33% 100%, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .5) 100%);
   font: 300 10px $font-family-main;
-  margin: 0;
-  padding: 0;
-  -moz-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
 }
 
 a:link,
 a:visited {
-  color: $link-color;
   font-weight: 400;
-  text-decoration: none;
-}
-
-a:hover {
-  color: $link-color-hover;
-}
-
-img {
-  max-width: 100%;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: $text-color-heading;
-  font-family: $font-family-heading;
-  font-weight: 500;
-  margin: 0;
 }
 
 h1 {
@@ -53,8 +31,9 @@ body {
   flex-direction: column;
   font-size: $font-size-normal;
   margin: 0 auto;
-  max-width: $content-width;
+  max-width: var(--content-width);
   min-height: 100vh;
+  min-width: var(--content-width-min);
 
   > header {
     align-items: center;
@@ -79,14 +58,9 @@ body {
       li {
         display: inline-block;
         list-style: none;
-        margin: 0 .25rem;
+        margin: 0 .4rem;
         text-align: center;
       }
-
-      a:link,
-      a:visited {
-        @include button-nav;
-      }
     }
   }
 
@@ -100,7 +74,6 @@ body {
     font-size: $font-size-decreased;
     justify-content: space-between;
     margin: auto 0 0 0;
-    max-width: $content-width;
     padding: .8rem;
   }
 }
@@ -111,15 +84,15 @@ body {
 }
 
 article {
-  position: relative;
-
   figure {
-    margin: 0;
+    max-width: 100%;
 
     &.preview {
+      max-width: 32rem;
+
       img {
         box-shadow: $block-shadow;
-        max-width: 32rem;
+        max-width: 100%;
       }
     }
   }
@@ -128,7 +101,6 @@ article {
     margin: 0 0 1.6rem 0;
     padding: 0;
 
-
     ul {
       margin: 0;
       padding: 0;
@@ -163,7 +135,7 @@ article {
       min-width: 1ch;
     }
 
-    input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
+    input:not([type=checkbox]):not([type=radio]):not([size]):not([type=date]):not([max]),
     textarea {
       width: 100%;
     }
@@ -185,6 +157,42 @@ article {
   }
 }
 
+.dashboard {
+  nav {
+    margin: .4rem 0 1.6rem;
+    max-width: 64rem;
+  }
+
+  .heading {
+    display: block;
+    font: 500 1.8rem/1.5 $font-family-heading;
+  }
+
+  ul {
+    box-shadow: $block-shadow;
+    margin: .4rem;
+    padding: 0;
+  }
+
+  li {
+    background: $row-background-odd;
+    list-style: none;
+    margin: 0;
+    padding: .8rem;
+    position: relative;
+
+    &:nth-last-of-type(even) {
+      background: $row-background-even;
+    }
+  }
+
+  .description {
+    color: $text-color-secondary;
+    font-size: $font-size-decreased;
+  }
+}
+
+
 nav.admin-breadcrumbs {
   margin-bottom: .8rem;
   padding: .4rem;
@@ -213,3 +221,39 @@ nav.admin-breadcrumbs {
     max-width: 8rem;
   }
 }
+
+.entity-links {
+  margin: 0;
+  padding: 0;
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: .4rem;
+    position: relative;
+  }
+
+  label {
+    cursor: pointer;
+    display: inline-block;
+    padding: .2rem 1.6rem;
+    transition: .125s;
+  }
+
+  input[type=checkbox] {
+    &:not(:checked) + label {
+      background: #fafafa;
+      color: $text-color-secondary;
+    }
+
+    &:checked + label {
+      background: rgb(200, 255, 200);
+      box-shadow: 0 0 .3rem .1rem rgba(0, 127, 0, .25);
+    }
+
+    &:disabled + label {
+      opacity: .5;
+      filter: grayscale(75%);
+    }
+  }
+}