biovision-base 0.7.170709 → 0.8.170916

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9442305845e4868b36e06500f26e8bdd681de387
-  data.tar.gz: dc47d68e9fe96816f24508f26acec9fcdcaaa8e7
+  metadata.gz: 5cfc144ad5307b7e9d5d93dcbbb6f7d14eab5bb0
+  data.tar.gz: 386e0f6f547aaef0befb3ad99f887f87dd533263
 SHA512:
-  metadata.gz: 0a512829d7c58e3e3b53dd88ad0372a2966c799e8317b4285f42ac6eb065262c141693447bbb57cce3879276c7cfbd9d5dd5232b69955459a4c0fcf77fa8257e
-  data.tar.gz: 6ae25499bc961b8818d6bf5968619dcbc421f45095f51468bc957e1ae5a18e041a635a57c6c32c1518a2574957349728bdf5ba038f592b07d68d3f41c1ddb310
+  metadata.gz: 1691ce1bf90cc9c6c36f0d6b5777ee955f80821de8bd983fb53c344300e4df20e26da20f0f997369bb6000f1ecf2833f5911babd54f594b01d516767181522af
+  data.tar.gz: 07f2394d5f168f067cb749c10b16d371971dcac15753facc76246d4d4657ffd881f21429dd30160b4805b089de7bb4abf1ca551bc01805a90549bb30a334c38d

data/README.md

@@ -1,22 +1,11 @@
 Biovision::Base
 ===============
 
-Базовый функционал: пользователи, метрики, браузеры, АП, привилегии.
+Базовый функционал: пользователи, метрики, привилегии, редактируемые страницы.
 
 Используйте на свой страх и риск без каких-либо гарантий работоспособности.
 
-ToDo
------
-
- * Тесты для запирания/отпирания в контроллерах
- * Тесты для смены порядка сортировки в контроллерах
- * Подгрузка метрик через AJAX
- * Несколько метрик в одном графике
- * Настройка цветов в графиках
- * Анализ журнала доступа nginx
- * Работа с подсетями (чёрные списки IP и так далее)
-
-Описание необходимых и рекомендуемых действий находится в `biovision/snippets`
+Описание необходимых и рекомендуемых действий находится в `setup.md`
 
 Очистка устаревших сессий
 -------------------------

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

@@ -1,13 +1,14 @@
 'use strict';
 
-var Biovision = {
+let Biovision = {
     storage: {
         available: function (type) {
             try {
-                var storage = window[type],
-                    x = '__storage_test__';
-                storage.setItem(x, x);
-                storage.removeItem(x);
+                const x = '__storage_test__';
+
+                window[type].setItem(x, x);
+                window[type].removeItem(x);
+
                 return true;
             }
             catch (e) {
@@ -58,32 +59,61 @@ var Biovision = {
                 Biovision.storage.remove('localStorage', key);
             }
         }
-    }
-};
+    },
+    preview_file: function (input) {
+        const target_image = input.getAttribute('data-image');
 
-$(function () {
-    $(document).on('change', 'input[type=file]', function () {
-        if ($(this).data('image')) {
-            var target = $('#' + $(this).data('image')).find('img');
-            var input = this;
+        if (target_image) {
+            const target = document.querySelector('#' + target_image + ' img');
 
-            if (input.files && input.files[0]) {
-                var reader = new FileReader();
+            if (target && input.files && input.files[0]) {
+                const reader = new FileReader();
 
-                reader.onload = function (e) {
-                    target.attr('src', e.target.result);
+                reader.onload = function (event) {
+                    target.setAttribute('src', event.target.result);
                 };
 
                 reader.readAsDataURL(input.files[0]);
             }
         }
+    },
+    new_ajax_request: function(method, url, on_load, on_error) {
+        const request = new XMLHttpRequest();
+
+        request.addEventListener('load', on_load);
+        request.addEventListener('error', on_error || Biovision.handle_ajax_failure);
+        request.open(method, url);
+        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+        request.setRequestHeader('X-CSRF-Token', Biovision.csrf_token);
+
+        return request;
+    },
+    handle_ajax_failure: function(response) {
+        if (response.hasOwnProperty('responseJSON')) {
+            console.log(response['responseJSON']);
+        } else {
+            console.log(response);
+        }
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+    Biovision.csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+    // Предварительный просмотр картинки при выборе файла
+    document.addEventListener('change', function (event) {
+        const input = event.target;
+
+        if (input.matches('input[type=file]')) {
+            Biovision.preview_file(input);
+        }
     });
 
     $(document).on('click', 'div.toggleable > span', function () {
         if (!$(this).hasClass('switch')) {
-            var $flag = $(this);
-            var url = $(this).parent().data('url');
-            var parameter = $(this).data('flag');
+            let $flag = $(this);
+            let url = $(this).parent().data('url');
+            let parameter = $(this).data('flag');
 
             $.post({
                 url: url,
@@ -118,16 +148,16 @@ $(function () {
     });
 
     $(document).on('click', 'li.lock > a', function () {
-        var $container = $(this).closest('li');
-        var $edit = $container.parent().find('.lockable');
-        var url = $container.data('url');
+        let $container = $(this).closest('li');
+        let $edit = $container.parent().find('.lockable');
+        let url = $container.data('url');
 
         if (url.length > 1) {
             $.ajax(url, {
                 method: $(this).hasClass('lock') ? 'put' : 'delete',
                 success: function (response) {
                     if (response.hasOwnProperty('data') && response['data'].hasOwnProperty('locked')) {
-                        var locked = response['data']['locked'];
+                        let locked = response['data']['locked'];
 
                         locked ? $edit.addClass('hidden') : $edit.removeClass('hidden');
 
@@ -147,22 +177,22 @@ $(function () {
     });
 
     $(document).on('click', 'li.priority-changer > button', function () {
-        var $li = $(this).closest('li[data-number]');
-        var delta = parseInt($(this).data('delta'));
-        var url = $(this).parent().data('url');
+        let $li = $(this).closest('li[data-number]');
+        let delta = parseInt(this.getAttribute('data-delta'));
+        let url = $(this).parent().data('url');
 
         if (parseInt($li.data('number')) + delta > 0) {
             $.post(url, {delta: delta}, function (response) {
                 console.log(response);
                 if (response.hasOwnProperty('data')) {
-                    var $container = $li.parent();
-                    var $list = $container.children('li');
+                    let $container = $li.parent();
+                    let $list = $container.children('li');
 
                     if (response['data'].hasOwnProperty('priority')) {
                         $li.data('number', response['data']['priority']);
                         $li.attr('data-number', response['data']['priority']);
                     } else {
-                        for (var entity_id in response['data']) {
+                        for (let entity_id in response['data']) {
                             if (response['data'].hasOwnProperty(entity_id)) {
                                 $li = $container.find('li[data-id=' + entity_id + ']');
                                 $li.data('number', response['data'][entity_id]);
@@ -171,8 +201,8 @@ $(function () {
                         }
                     }
                     $list.sort(function (a, b) {
-                        var an = parseInt($(a).data('number'));
-                        var bn = parseInt($(b).data('number'));
+                        let an = parseInt($(a).data('number'));
+                        let bn = parseInt($(b).data('number'));
 
                         if (an > bn) {
                             return 1;
@@ -190,8 +220,8 @@ $(function () {
     });
 
     $('div[data-destroy-url] button.destroy').on('click', function () {
-        var $button = $(this);
-        var $container = $(this).closest('div[data-destroy-url]');
+        let $button = $(this);
+        let $container = $(this).closest('div[data-destroy-url]');
 
         $button.attr('disabled', true);
 
@@ -203,10 +233,10 @@ $(function () {
         }).fail(handle_ajax_failure);
     });
 
-    $('.user-search button').on('click', function() {
-        var $container = $(this).closest('.user-search');
-        var $input = $container.find('input[type=search]');
-        var $results = $container.find('.results');
+    $('.user-search button').on('click', function () {
+        let $container = $(this).closest('.user-search');
+        let $input = $container.find('input[type=search]');
+        let $results = $container.find('.results');
 
         $.get($container.data('url'), {q: $input.val()}, function (response) {
             if (response.hasOwnProperty('data')) {
@@ -215,18 +245,20 @@ $(function () {
         }).fail(handle_ajax_failure);
     });
 
-    $(document).on('click', '.user-search .results li', function() {
-        var $container = $(this).closest('.user-search');
-        var $target = $('#' + $container.data('target'));
+    $(document).on('click', '.user-search .results li', function () {
+        let $container = $(this).closest('.user-search');
+        let $target = $('#' + $container.data('target'));
 
         $target.val($(this).data('id'));
     });
 
-    $.ajaxSetup({
-        headers: {
-            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
-        }
-    });
+    if (jQuery) {
+        jQuery.ajaxSetup({
+            headers: {
+                'X-CSRF-Token': Biovision.csrf_token
+            }
+        });
+    }
 });
 
 function handle_ajax_failure(response) {
@@ -236,3 +268,54 @@ function handle_ajax_failure(response) {
         console.log(response);
     }
 }
+
+/*
+ *************
+ * Polyfills *
+ *************
+ */
+
+/**
+ * Element.closest()
+ *
+ * IE 9+
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+}
+
+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;
+    };
+}
+
+/**
+ * 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;
+}

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

@@ -1,14 +1,8 @@
-$toggleable-active: #34c749 !default;
-$toggleable-inactive: #fc605c !default;
-$toggleable-switch: #fdbc40 !default;
-$toggleable-unknown: #c0c0c0 !default;
-$toggleable-background: #fff !default;
-
 html {
-  background-image: linear-gradient(#dedfe3 2%, #aeb3b9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
+  background-image: linear-gradient(to bottom, #dedfe3 2%, #aeb3b9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
   background-blend-mode: screen;
   background-attachment: fixed;
-  font: 10px $font-family-main;
+  font: 400 10px $font-family-main;
   margin: 0;
   padding: 0;
   -webkit-text-size-adjust: none;
@@ -16,6 +10,10 @@ html {
   -ms-text-size-adjust: none;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a:link,
 a:visited {
   color: $link-color;
@@ -30,6 +28,22 @@ img {
   max-width: 100%;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-heading;
+  font-weight: 500;
+  margin: 0;
+}
+
+h1 {
+  font-size: 3.6rem;
+  margin-bottom: .8rem;
+}
+
+h2 {
+  font-size: 3rem;
+  margin-bottom: .4rem;
+}
+
 body {
   background: #fff;
   color: $text-color-primary;
@@ -67,7 +81,7 @@ body {
 
           a:link,
           a:visited {
-            @include nav-button;
+            @include button-nav;
           }
         }
       }
@@ -96,59 +110,62 @@ body {
 
 #main {
   padding: 1rem;
+  width: 100%;
+}
 
-  article {
-    position: relative;
+article {
+  position: relative;
 
-    figure {
-      margin: 0;
+  figure {
+    margin: 0;
 
-      &.preview {
-        img {
-          max-width: 32rem;
-        }
+    &.preview {
+      img {
+        max-width: 32rem;
       }
     }
+  }
 
-    dl {
-      margin: 0 0 1.6rem 0;
-      padding: 0;
+  dl {
+    margin: 0 0 1.6rem 0;
+    padding: 0;
 
-      dt {
-        border-top: .1rem solid #f0f0f0;
-        margin: 1rem 0 0 0;
-        padding: 0;
-      }
+    dt {
+      border-top: $border-secondary;
+      font: 500 $font-size-increased $font-family-main;
+      margin: .8rem 0 0 0;
+      padding: .4rem 0;
+    }
 
-      dd {
-        margin: 0 0 0 .8rem;
-        padding: 0;
+    dd {
+      margin: .2rem 0;
+      padding: 0;
 
-        input,
-        textarea {
-          font-size: $font-size-normal;
-        }
+      input,
+      textarea {
+        font-size: $font-size-normal;
+      }
 
-        input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
-        textarea {
-          width: calc(100% - 1rem);
-        }
+      input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
+      textarea {
+        width: 100%;
+      }
 
-        input,
-        textarea {
-          max-width: calc(100% - 1rem);
-        }
+      input,
+      textarea {
+        max-width: 100%;
       }
     }
 
-    ul.flags {
-      margin: 1.6rem 0;
+    ul {
+      margin: 0;
       padding: 0;
 
       > li {
         list-style: none;
         margin: 0;
         padding: 0;
+        position: relative;
 
         label {
           font-weight: normal;
@@ -156,6 +173,11 @@ body {
       }
     }
   }
+
+  > section {
+    border-top: .1rem solid $text-color-secondary;
+    padding: .8rem 0 0 0;
+  }
 }
 
 nav.admin-breadcrumbs {
@@ -171,68 +193,6 @@ nav.admin-breadcrumbs {
   }
 }
 
-.toggleable {
-  font-size: $font-size-decreased;
-  margin: .8rem;
-
-  > span {
-    background-color: $toggleable-background;
-    border: .1rem solid;
-    border-radius: .8rem;
-    cursor: pointer;
-    display: inline-block;
-    line-height: #{$font-size-decreased * 2};
-    margin: .4rem;
-    padding: 0 .8rem 0 0;
-
-    &::before {
-      border-radius: .6rem 0 0 .6rem;
-      display: inline-block;
-      line-height: #{$font-size-decreased * 2};
-      margin: 0 .4rem 0 0;
-      text-align: center;
-      width: 2.2rem;
-    }
-  }
-
-  .active {
-    border-color: $toggleable-active;
-
-    &::before {
-      background-color: $toggleable-active;
-      content: '\2611';
-    }
-  }
-
-  .inactive {
-    border-color: $toggleable-inactive;
-
-    &::before {
-      background-color: $toggleable-inactive;
-      content: '\2610';
-    }
-  }
-
-  .switch {
-    border-color: $toggleable-switch;
-    cursor: not-allowed;
-
-    &::before {
-      background-color: $toggleable-switch;
-      content: '\231B';
-    }
-  }
-
-  .unknown {
-    border-color: $toggleable-unknown;
-
-    &::before {
-      background-color: $toggleable-unknown;
-      content: '\26A0';
-    }
-  }
-}
-
 .privileges {
   ul {
     border-left: $border-primary;

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

@@ -22,21 +22,12 @@ article.entity-page {
         margin: 0 1.6rem;
 
         a {
-          @include nav-button;
+          @include button-nav;
         }
       }
     }
   }
 
-  > section {
-    border-top: .1rem solid $text-color-secondary;
-    padding: .8rem 0 0 0;
-
-    > h2 {
-      font-size: $font-size-large;
-    }
-  }
-
   table {
     border-spacing: 0;
     margin: 1.6rem;
@@ -404,7 +395,7 @@ form {
   }
 
   button {
-    @include action-button;
+    @include button-action;
   }
 }