ui_bibz 3.0.13 → 4.0.0.beta3

data/app/assets/javascripts/forms/input-connected.js

@@ -0,0 +1,132 @@
+ (function (root, factory) {
+  if (root === undefined && window !== undefined) root = window;
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module unless amdModuleId is set
+    define(["jquery"], function (a0) {
+      return (factory(a0));
+    });
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory(require("jquery"));
+  } else {
+    factory(root["jQuery"]);
+  }
+}(this, function (jQuery) {
+
+  (function($) {
+    var appendToElement, hasRefreshButton, updateOptionsHtml, updateTargetComponent, updateTargetRefreshButton;
+    updateOptionsHtml = function(data, componentTarget) {
+      console.log(data);
+      componentTarget.children('option:not([value=""])').remove();
+      if (Array.isArray(data)) {
+        return appendToElement(data, componentTarget);
+      } else {
+        return $.each(data, function(k, v) {
+          var optgroup;
+          updateOptionsHtml(data, componentTarget);
+          optgroup = $("<optgroup></optgroup>").attr("label", k);
+          appendToElement(v, optgroup);
+          return componentTarget.append(optgroup);
+        });
+      }
+    };
+    appendToElement = function(data, element) {
+      return data.forEach(function(opt) {
+        return element.append($("<option></option>").attr("value", opt.value || opt[1]).text(opt.text || opt[0]));
+      });
+    };
+    updateTargetComponent = function(data, componentTarget, component) {
+      updateOptionsHtml(data, componentTarget);
+      updateTargetRefreshButton(componentTarget, component);
+      if (componentTarget.hasClass('multi-column-field')) {
+        componentTarget.multiSelect('refresh');
+      }
+      if (componentTarget.hasClass('dropdown-select-field')) {
+        componentTarget.selectpicker('refresh');
+      }
+      if (componentTarget.hasClass('multi-select-field')) {
+        componentTarget.multiselect('rebuild');
+      }
+      componentTarget.attr("disabled", false);
+      componentTarget.removeClass("disabled");
+      return componentTarget.change();
+    };
+    updateTargetRefreshButton = function(componentTarget, component) {
+      var refreshBtn;
+      if (hasRefreshButton(componentTarget)) {
+        refreshBtn = componentTarget.parents('.input-group').find('.input-refresh-button');
+        return refreshBtn.attr('value', component.val()).attr('name', component.attr('name'));
+      }
+    };
+    hasRefreshButton = function(component) {
+      return component.parents('.input-group').hasClass('field-refresh');
+    };
+    return $.fn.inputConnected = function(options) {
+      var defaults, self, settings;
+      defaults = {
+        mode: "remote",
+        events: "change",
+        target: {
+          url: null,
+          selector: null,
+          data: []
+        }
+      };
+      settings = $.extend({}, defaults, options);
+      self = this;
+      return this.each(function() {
+        var component, connect, connectMode, events;
+        component = $(this);
+        connect = component.data().connect;
+        if (connect.targets == null) {
+          connect.target = connect.target || {};
+          connect.target.url = connect.target.url || settings.target.url;
+          connect.target.data = connect.target.data || settings.target.data;
+          connect.target.selector = connect.target.selector || settings.target.selector;
+        }
+        connect.targets = connect.targets || [];
+        if (connect.target != null) {
+          connect.targets.push(connect.target);
+        }
+        if (connect == null) {
+          return;
+        }
+        connectMode = connect.mode || settings.mode;
+        events = connect.events || settings.events;
+        return component.on(events, function(e) {
+          var name, values;
+          e.preventDefault();
+          values = component.val();
+          name = component.attr('name');
+          name = name != null ? name : "id";
+          return connect.targets.forEach(function(target) {
+            var componentTarget, data, mode;
+            componentTarget = $("" + target.selector);
+            mode = target.mode || connectMode;
+            if (mode === "remote") {
+              let params = []
+              params[`#${name}`] = values
+              $.ajax({
+                url: target.url,
+                data: params
+              }).done(function(data) {
+                return updateTargetComponent(data, componentTarget, component);
+              });
+            }
+            if (mode === "local") {
+              data = target.data || settings.target.data;
+              data = data.filter(function(value) {
+                values = [].concat.apply([], [values]);
+                return values.includes(String(value.connect_option_id));
+              });
+              return updateTargetComponent(data, componentTarget, component);
+            }
+          });
+        });
+      });
+    };
+  })(jQuery);
+
+}));

data/app/assets/javascripts/forms/jquery.multi-select-extend.js

@@ -0,0 +1,52 @@
+import "jquery.quicksearch"
+
+export default {
+    qs1: null,
+    qs2: null,
+    selectableOptgroup: false,
+    selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search in selectable items'><br/>",
+    selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search in selected items'><br/>",
+    afterInit: function(ms) {
+      var $selectableSearch, $selectionSearch, selectableSearchString, selectionSearchString, that;
+      that = this;
+      that.options.selectableOptgroup = $(this)[0].$element.data('selectableOptgroup') ? true : false;
+      if ($(this)[0].$element.data('searchable')) {
+        $selectableSearch = that.$selectableUl.siblings('input');
+        $selectionSearch = that.$selectionUl.siblings('input');
+        $selectionSearch = that.$selectionUl.siblings('input');
+        selectableSearchString = "#" + that.$container.attr("id") + " .ms-elem-selectable:not(.ms-selected)";
+        selectionSearchString = "#" + that.$container.attr("id") + " .ms-elem-selection.ms-selected";
+        that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on("keydown", function(e) {
+          if (e.which === 40) {
+            that.$selectableUl.focus();
+            return false;
+          }
+        });
+        return that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on("keydown", function(e) {
+          if (e.which === 40) {
+            that.$selectionUl.focus();
+            return false;
+          }
+        });
+      } else {
+        that.$selectableContainer.children('.search-input').remove();
+        return that.$selectionContainer.children('.search-input').remove();
+      }
+    },
+    afterSelect: function() {
+      if (this.qs1 != null) {
+        this.qs1.cache();
+      }
+      if (this.qs2 != null) {
+        return this.qs2.cache();
+      }
+    },
+    afterDeselect: function() {
+      if (this.qs1 != null) {
+        this.qs1.cache();
+      }
+      if (this.qs2 != null) {
+        return this.qs2.cache();
+      }
+    }
+}

data/app/assets/javascripts/forms.js

@@ -0,0 +1,160 @@
+import UiBibzFormula from 'formula'
+import 'bootstrap-switch'
+import "input-connected"
+import "jquery.multi-select"
+import "bootstrap-multiselect"
+import extendMultiselect from "jquery.multi-select-extend"
+import "bootstrap-markdown"
+import 'fuzzysort'
+import "bootstrap-datepicker.min.js"
+
+export default class UiBibzForm {
+
+  constructor(node) {
+    this.node = node || document
+    if(node.querySelector('input.switch-field')){ this.setBootstrapSwitch() }
+    if(node.querySelector('.ui-bibz-connect')) { this.inputConnected() }
+    //if(node.querySelector('.dropdown-select-field')) { this.setMultiSelect() }
+    if(node.querySelector('.multi-select-field')){ this.setMultiSelect() }
+    if(node.querySelector('.multi-column-field')){ this.setMultiColumn() }
+    if(node.querySelector('.formula-field')){ this.formula() }
+    if(node.querySelector('.auto-complete-field')){ this.autoCompleteFix() }
+    if(node.querySelector('.slider')){ this.doubleSlider() }
+    if(node.querySelector('.dropdown-select-field')){ this.selectpicker() }
+  }
+
+  inputConnected() {
+    $('.ui-bibz-connect', this.node).inputConnected()
+  }
+
+  setSelectPicker() {
+    $('select.dropdown-select-field', this.node).selectpicker()
+  }
+
+  setBootstrapSwitch() {
+    $('input.switch-field', this.node).bootstrapSwitch({
+      size: 'large'
+    })
+  }
+
+  setMultiSelect() {
+    $('select.multi-select-field', this.node).each(function() {
+      var classes, data
+      data = $(this).data()
+      classes = $(this)[0].classList.value
+      delete data["multiselect"]
+      data = Object.assign({
+        buttonClass: "btn " + classes
+      }, data)
+      $(this).multiselect(data)
+      if ($(this).parent().hasClass('input-group')) {
+        $(this).siblings('.btn-group').addClass('input-group-btn')
+      }
+    })
+  }
+
+  formula() {
+    let me = this
+    let formula_input_fields = $('.formula-field', this.node)
+
+    formula_input_fields.each(function() {
+      me.updateFormulaField($(this))
+    })
+
+    formula_input_fields.on('keyup', function() {
+      me.updateFormulaField($(this))
+    })
+  }
+
+  updateFormulaField(field) {
+    let error, f, formulaAlert, formulaInputField, formulaResultField, formulaSignField, response, result
+    formulaInputField = field
+    formulaSignField = formulaInputField.siblings('.formula-field-sign')
+    formulaResultField = formulaInputField.siblings('.formula-field-result')
+    formulaAlert = formulaInputField.siblings('.formula-field-alert')
+    f = new UiBibzFormula()
+    result = f.go(formulaInputField.val())
+    error = result[0]
+    response = result[1]
+
+    if (!!error) {
+      formulaAlert.attr('data-original-title', error)
+      formulaAlert.attr('style', 'display: table-cell')
+      formulaResultField.addClass('fix-border-right')
+    } else {
+      formulaAlert.hide()
+      formulaResultField.val(eval(response))
+      formulaResultField.removeClass('fix-border-right')
+    }
+    if (isNaN(response)) {
+      formulaSignField.attr('style', 'display: table-cell')
+      formulaResultField.attr('style', 'display: table-cell; visible: visible')
+      formulaInputField.addClass('fix-border-right')
+    } else {
+      formulaSignField.hide()
+      formulaResultField.attr('style', 'visible: hidden')
+      formulaInputField.removeClass('fix-border-right')
+    }
+  }
+
+  setMultiColumn() {
+    $.fn.multiSelect.defaults = extendMultiselect
+    $(".multi-column-field", this.node).multiSelect()
+  }
+
+  autoCompleteFix() {
+    $(".auto-complete-field", this.node).each(function() {
+      var lastChild, parent, radius
+      parent = $(this).parent('.input-group')
+      if (parent.length > 0) {
+        lastChild = parent.children().last()
+        if (lastChild.is('datalist')) {
+          radius = parent.children().first().css("border-bottom-left-radius")
+          $(this).css("border-bottom-right-radius", radius)
+          $(this).css("border-top-right-radius", radius)
+        }
+      }
+    })
+  }
+
+  doubleSlider(){
+    let me = this
+    this.node.querySelectorAll(".slider").forEach(function(e){
+      let slider = e
+      let sliderId = slider.getAttribute("id")
+      let sliderMin = me.node.querySelector(`.slider-header[data-target=${sliderId}] .slider-header-min span`)
+      let sliderMax = me.node.querySelector(`.slider-header[data-target=${sliderId}] .slider-header-max span`)
+      let rangeInput1 = slider.querySelectorAll("input[type=range]")[0]
+      let rangeInput2 = slider.querySelectorAll("input[type=range]")[1]
+      let inverseLeft = slider.querySelector(".slider-inverse-left")
+      let inverseRight = slider.querySelector(".slider-inverse-right")
+      let range = slider.querySelector(".slider-range")
+      let thumbLeft = slider.querySelector(".slider-thumb-left")
+      let thumbRight = slider.querySelector(".slider-thumb-right")
+      let signLeft = slider.querySelector(".slider-sign-left")
+      let signRight = slider.querySelector(".slider-sign-right")
+
+      rangeInput1.addEventListener("input", function(e){
+        this.value = Math.min(this.value, rangeInput2.value-1)
+        let value = (100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min)
+        value = value +  0.01 * value
+
+        inverseLeft.style.width = `${value}%`
+        range.style.left = `${value}%`
+        thumbLeft.style.left = `${value}%`
+        if(sliderMin){ sliderMin.innerHTML = this.value }
+      })
+
+      rangeInput2.addEventListener("input", function(e){
+        this.value = Math.max(this.value,rangeInput1.value-(-1))
+        let value = (100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min)
+        value = value +  0.01 * value
+
+        inverseRight.style.width = `${100-value}%`
+        range.style.right = `${100-value}%`
+        thumbRight.style.left= `${value}%`
+        if(sliderMax){ sliderMax.innerHTML = this.value }
+      })
+    })
+  }
+}

data/app/assets/javascripts/interfaces.js

@@ -0,0 +1,56 @@
+// Import non minified version, later minifier will make sure minified version
+// is provided, while still allowing debugging to use the non minified version.
+// import bootstrap from "bootstrap/dist/js/bootstrap.bundle"
+import "@popperjs/core"
+import "bootstrap"
+import * as bootstrap from 'bootstrap'
+window.bootstrap = bootstrap
+
+export default class UiBibzInterface {
+
+  constructor(node) {
+    this.node = node || document
+
+    // //this.nav()
+    this.tooltip()
+    // this.dropdown()
+    this.popover()
+    this.notify()
+    this.toast()
+  }
+
+  nav(){
+    this.node.querySelectorAll('.nav-tabs .nav-item .nav-link').forEach(function(el){
+      let tabTrigger = new bootstrap.Tab(el)
+      el.addEventListener('click', function (e) {
+        e.preventDefault()
+        tabTrigger.show()
+      })
+    })
+  }
+
+  popover() {
+    this.node.querySelectorAll('[data-bs-toggle="popover"]').forEach(x => new bootstrap.Popover(x))
+  }
+
+  tooltip() {
+    this.node.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(x => new bootstrap.Tooltip(x))
+  }
+
+  dropdown() {
+    this.node.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(x => new bootstrap.Dropdown(x))
+  }
+
+  toast() {
+    this.node.querySelectorAll('.toast').forEach(x => new bootstrap.Toast(x))
+  }
+
+  notify() {
+    new bootstrap.Alert('.myAlert')
+    this.node.querySelectorAll('.alert[data-timeout]').forEach(function(alertElement) {
+      setTimeout(function() {
+        alertElement.classList.add('fade')
+      }, alertElement.getAttribute("data-timeout") )
+    })
+  }
+}

data/app/assets/javascripts/tables.js

@@ -0,0 +1,49 @@
+export default class UiBibzTable {
+
+  constructor(node) {
+    this.node = node || document
+
+    this.submitPerPageSelect()
+    this.clearSearch()
+    this.animeSearchInput()
+    this.focusSearchInput()
+    this.initializeSearchInput()
+  }
+
+  submitPerPageSelect() {
+    $('.table-pagination-per-page select', this.node).change(function() {
+      $(this).parents('form').find('input[name=link_type]').val('per_page')
+      $(this).parents('form').submit()
+    })
+  }
+
+  clearSearch() {
+    $('.clear-search-btn', this.node).click(function() {
+      $(this).parents('form').find('input[type=search]').val('')
+      $(this).parents('form').submit()
+    })
+  }
+
+  animeSearchInput() {
+    $('.table-card input[type=search]', this.node).blur(function() {
+      let parent = $(this).parent()
+
+      if ($(this).val() === '') { parent.removeClass('has-value') }
+      parent.removeClass('is-focused')
+    })
+  }
+
+  focusSearchInput() {
+    $('.table-card input[type=search]', this.node).focus(function() {
+      $(this).parent().addClass('is-focused has-value')
+    })
+  }
+
+  initializeSearchInput() {
+    $('.table-card input[type=search]', this.node).each(function() {
+      if ($(this).val() !== '') {
+        $(this).parent().addClass('has-value')
+      }
+    })
+  }
+}

data/app/assets/javascripts/ui_bibz_js.js

@@ -0,0 +1,37 @@
+import * as jquery from "jquery"
+import UiBibzInterfaces from 'interfaces'
+import UiBibzForms from 'forms'
+import UiBibzTables from 'tables'
+
+export default class UiBibzJs {
+
+  constructor(){}
+
+  start(){
+    if (typeof Turbo == 'undefined') {
+      this.init()
+    } else {
+      document.addEventListener("turbo:load", (e) => this.init())
+    }
+  }
+
+  init(node){
+    if(node === undefined) node = document
+
+    new UiBibzTables(node)
+    new UiBibzForms(node)
+    new UiBibzInterfaces(node)
+  }
+}
+
+let uiBibzJs
+
+export function start(){
+  uiBibzJs = new UiBibzJs
+  uiBibzJs.start()
+}
+
+export function init(node) {
+  uiBibzJs.init(node)
+  return uiBibzJs
+}

data/app/assets/stylesheets/navigations/_nav.sass

@@ -0,0 +1,2 @@
+.nav-tabs .nav-link
+  cursor: pointer

data/app/assets/stylesheets/navigations/_navbar.sass

@@ -0,0 +1,12 @@
+.navbar
+  .simple_form
+    input
+      width: auto
+    .form-control
+      width: auto
+    .form-group
+      display: inline-block
+
+// Fix form in navbar
+.navbar form
+  margin-bottom: 0

data/app/assets/stylesheets/navigations/_progress_bar.sass

@@ -0,0 +1,2 @@
+.progress-bar-line
+  height: 1px

data/app/assets/stylesheets/navigations/_toolbar.sass

@@ -0,0 +1,3 @@
+.btn-toolbar form
+  display: inline-flex
+  margin: 0px

data/app/assets/stylesheets/sass/_boxes.sass

@@ -0,0 +1 @@
+@import boxes/_card

data/app/assets/stylesheets/sass/_containers.sass

@@ -0,0 +1,2 @@
+@import containers/_panel
+

data/app/assets/stylesheets/sass/_fixes.sass

@@ -0,0 +1,2 @@
+.fix-label
+  margin-right: -11px

data/app/assets/stylesheets/sass/_forms.sass

@@ -0,0 +1,8 @@
+@import forms/_button
+@import forms/_range
+@import forms/_slider
+@import forms/_bootstrap_select
+@import forms/_multiselect
+@import forms/_formula_field
+@import forms/_surround_field
+@import forms/_form_check

data/app/assets/stylesheets/sass/_navigations.sass

@@ -0,0 +1,4 @@
+@import navigations/_nav
+@import navigations/_navbar
+@import navigations/_progress_bar
+@import navigations/_toolbar

data/app/assets/stylesheets/sass/_notifications.sass

@@ -0,0 +1,4 @@
+@import notifications/_badge
+@import notifications/_glyph
+@import notifications/_star
+@import notifications/_toast

data/app/assets/stylesheets/sass/_tables.sass

@@ -0,0 +1,2 @@
+@import tables/table_card
+@import tables/table

data/app/assets/stylesheets/sass/_variables_mixins_functions.sass

@@ -0,0 +1,3 @@
+@import ~bootstrap/scss/functions
+@import ~bootstrap/scss/variables
+@import ~bootstrap/scss/mixins

data/app/assets/stylesheets/sass/boxes/_card.sass

@@ -0,0 +1,4 @@
+@each $key, $value in $states_colors
+  .card-#{$key}
+    .card-header
+      background-color: $value