@oat-sa/tao-core-ui 1.60.2 → 1.61.0

package/dist/propertySelector/propertySelector.js

@@ -0,0 +1,533 @@
+define(['ui/component', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify', 'ui/button', 'css!ui/propertySelector/css/propertySelector.css', 'jquery'], function (component, Handlebars, __, _, DOMPurify, buttonFactory, propertySelector_css, $$1) { 'use strict';
+
+  component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
+  Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
+  __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
+  _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
+  DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
+  buttonFactory = buttonFactory && Object.prototype.hasOwnProperty.call(buttonFactory, 'default') ? buttonFactory['default'] : buttonFactory;
+  $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function Helpers0 (hb) {
+    //register a i18n helper
+    hb.registerHelper('__', function (key) {
+      return __(key);
+    });
+    /**
+     * Register dompurify helper
+     *
+     * https://github.com/cure53/DOMPurify
+     * with config SAFE_FOR_TEMPLATES: true
+     * to make output safe for template systems
+     */
+
+    hb.registerHelper('dompurify', function (context) {
+      return DOMPurify.sanitize(context);
+    });
+    /**
+     * Register join helper
+     *
+     * Example :
+     * var values = {a:v1, b:v2, c:v3};
+     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+     */
+
+    hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
+      var fragments = [];
+      keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
+      fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
+      wrapper = typeof wrapper === 'string' ? wrapper : '"';
+
+      _.forIn(arr, function (value, key) {
+        var fragment = '';
+
+        if (value !== null || value !== undefined) {
+          if (typeof value === 'boolean') {
+            value = value ? 'true' : 'false';
+          } else if (_typeof(value) === 'object') {
+            value = _.values(value).join(' ');
+          }
+        } else {
+          value = '';
+        }
+
+        if (keyValueGlue !== undefined) {
+          fragment += key + keyValueGlue;
+        }
+
+        fragment += wrapper + value + wrapper;
+        fragments.push(fragment);
+      });
+
+      return fragments.join(fragmentGlue);
+    }); //register a classic "for loop" helper
+    //it also adds a local variable "i" as the index in each iteration loop
+
+    hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+      var ret = '';
+      startIndex = parseInt(startIndex);
+      stopIndex = parseInt(stopIndex);
+      increment = parseInt(increment);
+
+      for (var i = startIndex; i < stopIndex; i += increment) {
+        ret += options.fn(_.extend({}, this, {
+          i: i
+        }));
+      }
+
+      return ret;
+    });
+    hb.registerHelper('equal', function (var1, var2, options) {
+      if (var1 == var2) {
+        return options.fn(this);
+      } else {
+        return options.inverse(this);
+      }
+    }); // register a "get property" helper
+    // it gets the named property from the provided context
+
+    hb.registerHelper('property', function (name, context) {
+      return context[name] || '';
+    }); // register an 'includes' helper
+    // it checks if value is in array
+
+    hb.registerHelper('includes', function (haystack, needle, options) {
+      if (_.contains(haystack, needle)) {
+        return options.fn(this);
+      }
+    });
+  }
+
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers);  
+
+
+    return "<div class=\"property-selector-container\">\n    <input type=\"text\" class=\"search-property\"/>\n    <ol class=\"property-list-container\">\n    </ol>\n    <div class=\"control-buttons-container\">\n    </div>\n</div>";
+    });
+  function propertySelectorTpl(data, options, asString) {
+    var html = Template(data, options);
+    return (asString || true) ? html : $(html);
+  }
+
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+    var buffer = "", stack1, helper, options, helperMissing=helpers.helperMissing, functionType="function", escapeExpression=this.escapeExpression, self=this;
+
+  function program1(depth0,data) {
+    
+    
+    return "checked";
+    }
+
+  function program3(depth0,data) {
+    
+    var buffer = "", stack1, helper, options;
+    buffer += "<span class=\"property-description-alias\">(";
+    stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.alias), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.alias), options));
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += ")</span>";
+    return buffer;
+    }
+
+  function program5(depth0,data) {
+    
+    var buffer = "", stack1, helper, options;
+    buffer += "<span class=\"property-description-class\">/ ";
+    stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.classLabel), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.classLabel), options));
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += "</span>";
+    return buffer;
+    }
+
+    buffer += "<li class=\"property-description-container\">\n    <label class=\"property-description\">\n        <span class=\"property-description-checkbox\">\n            <input type=\"checkbox\" data-property-id=\"";
+    if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+    else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+    buffer += escapeExpression(stack1)
+      + "\" ";
+    stack1 = helpers['if'].call(depth0, (depth0 && depth0.selected), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += " />\n            <span class=\"icon-checkbox\"></span>\n        </span>\n        <span class=\"property-description-label\">\n            ";
+    stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.label), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.label), options));
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += "\n            ";
+    stack1 = helpers['if'].call(depth0, (depth0 && depth0.alias), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += "\n            ";
+    stack1 = helpers['if'].call(depth0, (depth0 && depth0.classLabel), {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
+    if(stack1 || stack1 === 0) { buffer += stack1; }
+    buffer += "\n        </span>\n    </label>\n</li>";
+    return buffer;
+    });
+  function propertyDescriptionTpl(data, options, asString) {
+    var html = Template$1(data, options);
+    return (asString || true) ? html : $(html);
+  }
+
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template$2 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+    var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;
+
+
+    buffer += "<b>";
+    if (helper = helpers.text) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+    else { helper = (depth0 && depth0.text); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+    buffer += escapeExpression(stack1)
+      + "</b>";
+    return buffer;
+    });
+  function highlightedTextTpl(data, options, asString) {
+    var html = Template$2(data, options);
+    return (asString || true) ? html : $(html);
+  }
+
+  /**
+   * A list of fields in which we can search a term.
+   * @type {string[]}
+   * @private
+   */
+
+  var searchableFields = ['label', 'alias', 'classLabel'];
+  /**
+   * Sort an array by a particular property.
+   * @param {Array} iter - The array to sort.
+   * @param {string} prop - The name of the sorting property.
+   * @returns {Array} - Returns a sorted copy of the array.
+   * @private
+   */
+
+  function sortBy(iter, prop) {
+    return Array.from(iter).sort(function (a, b) {
+      var textA = a && a[prop] || '';
+      var textB = b && b[prop] || '';
+      return textA.localeCompare(textB);
+    });
+  }
+  /**
+   * Creates a property selector with respect to given options.
+   * @param {object} [config]
+   * @returns {*}
+   */
+
+
+  function propertySelectorFactory(config) {
+    //element references
+    var $container;
+    var $buttonsContainer;
+    var $propertyListContainer;
+    var $searchInput;
+    var availableProperties = [];
+    var selectedProperties;
+    var search = '';
+    var searchRedrawTimeoutId;
+    var parentGap = 20;
+    var searchRedrawTimeout = 500;
+    var instance = component({
+      /**
+       * Updates the list
+       */
+      redrawList: function redrawList() {
+        $propertyListContainer.empty();
+        var propertiesToRender = [];
+        availableProperties.forEach(function (property) {
+          property.selected = selectedProperties.has(property.id);
+
+          if (search === '' || includeSearch(property, search)) {
+            propertiesToRender.push(createPropertyOption(property, search));
+          }
+        });
+        $propertyListContainer.append(propertiesToRender);
+        this.trigger('redraw');
+      },
+
+      /**
+       * @typedef propertySelectorPosition
+       * @property {number} top top position of container element from parent
+       * @property {number} right right position of container element from parent
+       * @property {number} bottom bottom position of container element from parent
+       * @property {number} left left position of container element from parent
+       */
+
+      /**
+       * @typedef propertyDescription
+       * @property {string} id id of property
+       * @property {string} label label of the property
+       * @property {string} alias alias of the property
+       * @property {string} classLabel label of the property class
+       */
+
+      /**
+       * @typedef propertySelectorData
+       * @property {propertySelectorPosition} position position of the property selector modal top, right, bottom, left
+       * @property {Array<string>} selected array of selected property id
+       * @property {Array<propertyDescription>} available array of available proprty descriptions
+       */
+
+      /**
+       * Sets data
+       * @param {propertySelectorData} data
+       */
+      setData: function setData(data) {
+        if (data.available) {
+          availableProperties = sortBy(data.available, 'label');
+        }
+
+        selectedProperties = new Set(data.selected);
+        this.redrawList();
+      },
+      toggle: function toggle() {
+        if (this.shown) {
+          this.hide();
+        } else {
+          this.show();
+          this.redrawList();
+        }
+      }
+    }).setTemplate(propertySelectorTpl).on('render', function () {
+      //component parts reference assignments
+      $container = instance.getElement();
+      $propertyListContainer = $$1('.property-list-container', $container);
+      $buttonsContainer = $$1('.control-buttons-container', $container);
+      $propertyListContainer.on('click', function (e) {
+        if (e.target.dataset.propertyId) {
+          if (e.target.checked) {
+            selectedProperties.add(e.target.dataset.propertyId);
+          } else {
+            selectedProperties.delete(e.target.dataset.propertyId);
+          }
+        }
+      });
+      positionContainer($container, this.config.data.position);
+      addButtons($buttonsContainer);
+      this.setData(this.config.data); //search event setup
+
+      $searchInput = $$1('input.search-property', $container);
+      $searchInput.on('input', function () {
+        search = $$1(this).val();
+
+        if (searchRedrawTimeoutId) {
+          clearTimeout(searchRedrawTimeoutId);
+        }
+
+        searchRedrawTimeoutId = setTimeout(instance.redrawList, searchRedrawTimeout);
+      });
+      this.show();
+      this.trigger('ready');
+    }).on('destroy', unregisterPageClick).on('hide', function () {
+      this.shown = false;
+      unregisterPageClick();
+    }).on('show', function () {
+      registerPageClick();
+      this.shown = true;
+    }).on('cancel select', function () {
+      this.hide();
+      $searchInput.val('');
+      search = '';
+    });
+    /**
+     * Close the component when clicking outside.
+     * @param event
+     */
+
+    function pageClick(event) {
+      if ($$1(event.target).closest('.property-selector-container').length) {
+        return;
+      }
+
+      instance.trigger('cancel');
+    }
+    /**
+     * Listens to the clicks outside the component
+     */
+
+
+    function registerPageClick() {
+      setTimeout(function () {
+        return document.addEventListener('click', pageClick);
+      }, 0);
+    }
+    /**
+     * Stops listening to the clicks outside the component
+     */
+
+
+    function unregisterPageClick() {
+      setTimeout(function () {
+        return document.removeEventListener('click', pageClick);
+      }, 0);
+    }
+    /**
+     * Checks if a searchable field contains the searched term.
+     * @param {object} property
+     * @param {string} search
+     * @returns {boolean}
+     */
+
+
+    function includeSearch(property, search) {
+      var searchedTerm = search.toLowerCase();
+      return searchableFields.some(function (field) {
+        return 'string' === typeof property[field] && property[field].toLowerCase().includes(searchedTerm);
+      });
+    }
+    /**
+     * Lookup for characters in text to highlight
+     * @param {String} text - text to lookup
+     * @param {String} searchString - match to be applied in the text
+     * @returns {String} - highlighted text
+     */
+
+
+    function highlightCharacter(text, searchString) {
+      var reg = new RegExp(searchString, 'gi');
+      return text.replace(reg, function (str) {
+        return highlightedTextTpl({
+          text: str
+        });
+      });
+    }
+    /**
+     * Creates property description list element
+     * @param {Object} property
+     * @returns JQuery element containing property description
+     */
+
+
+    function createPropertyOption(property, searchString) {
+      var descriptionData = Object.assign({}, property);
+
+      if (searchString !== '') {
+        searchableFields.forEach(function (field) {
+          if (descriptionData[field]) {
+            descriptionData[field] = highlightCharacter(descriptionData[field], searchString);
+          }
+        });
+      }
+
+      return $$1(propertyDescriptionTpl(descriptionData));
+    }
+    /**
+     * Adds buttons to container
+     * @param {jQuery} $targetContainer
+     */
+
+
+    function addButtons($targetContainer) {
+      var cancelButton = buttonFactory({
+        id: 'cancel',
+        label: 'Cancel',
+        type: 'info',
+        cls: 'btn-secondary'
+      }).on('click', function () {
+        return instance.trigger('cancel');
+      });
+      var saveButton = buttonFactory({
+        id: 'save',
+        label: 'Save',
+        type: 'info'
+      }).on('click', function () {
+        return instance.trigger('select', _toConsumableArray(selectedProperties));
+      });
+      cancelButton.render($targetContainer);
+      saveButton.render($targetContainer);
+    }
+    /**
+     * Positions element inside parent
+     * @param {jQuery} $el element to apply positioning
+     * @param {Object} position object  { top, left, right, bottom } top OR bottom is required
+     */
+
+
+    function positionContainer($el, position) {
+      var top = position.top,
+          left = position.left,
+          right = position.right,
+          bottom = position.bottom;
+      var maxHeight;
+
+      if (typeof top === 'undefined' && typeof bottom === 'undefined') {
+        top = 0;
+        bottom = 0;
+        maxHeight = $el.parent().height();
+      } else if (typeof bottom === 'undefined') {
+        maxHeight = $el.parent().height() - top - parentGap;
+      } else if (typeof top === 'undefined') {
+        maxHeight = $el.parent().height() - bottom - parentGap;
+      }
+
+      $el.css({
+        top: top,
+        left: left,
+        right: right,
+        bottom: bottom,
+        maxHeight: maxHeight
+      });
+    }
+
+    setTimeout(function () {
+      return instance.init(config);
+    }, 0);
+    return instance;
+  }
+
+  return propertySelectorFactory;
+
+});