jekyll-rubin-collab-theme 0.1.0 → 0.1.1

data/_third_party/mdb-ui-kit/src/js/free/dropdown.js

@@ -0,0 +1,277 @@
+import { getjQuery, typeCheckConfig, onDOMContentLoaded } from '../mdb/util/index';
+import EventHandler from '../mdb/dom/event-handler';
+import SelectorEngine from '../mdb/dom/selector-engine';
+import Manipulator from '../mdb/dom/manipulator';
+import BSDropdown from '../bootstrap/mdb-prefix/dropdown';
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const NAME = 'dropdown';
+const DATA_KEY = `mdb.${NAME}`;
+const EVENT_KEY = `.${DATA_KEY}`;
+
+const SELECTOR_EXPAND = '[data-mdb-toggle="dropdown"]';
+
+const Default = {
+  offset: [0, 2],
+  flip: true,
+  boundary: 'clippingParents',
+  reference: 'toggle',
+  display: 'dynamic',
+  popperConfig: null,
+  dropdownAnimation: 'on',
+};
+
+const DefaultType = {
+  offset: '(array|string|function)',
+  flip: 'boolean',
+  boundary: '(string|element)',
+  reference: '(string|element|object)',
+  display: 'string',
+  popperConfig: '(null|object|function)',
+  dropdownAnimation: 'string',
+};
+
+const EVENT_HIDE = 'hide.bs.dropdown';
+const EVENT_HIDDEN = 'hidden.bs.dropdown';
+const EVENT_SHOW = 'show.bs.dropdown';
+const EVENT_SHOWN = 'shown.bs.dropdown';
+
+const EVENT_HIDE_MDB = `hide${EVENT_KEY}`;
+const EVENT_HIDDEN_MDB = `hidden${EVENT_KEY}`;
+const EVENT_SHOW_MDB = `show${EVENT_KEY}`;
+const EVENT_SHOWN_MDB = `shown${EVENT_KEY}`;
+
+const ANIMATION_CLASS = 'animation';
+const ANIMATION_SHOW_CLASS = 'fade-in';
+const ANIMATION_HIDE_CLASS = 'fade-out';
+
+class Dropdown extends BSDropdown {
+  constructor(element, data) {
+    super(element, data);
+    this._config = this._getConfig(data);
+    this._menuStyle = '';
+    this._popperPlacement = '';
+    this._mdbPopperConfig = '';
+
+    //* prevents dropdown close issue when system animation is turned off
+    const isPrefersReducedMotionSet = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (this._config.dropdownAnimation === 'on' && !isPrefersReducedMotionSet) {
+      this._init();
+    }
+  }
+
+  dispose() {
+    EventHandler.off(this._element, EVENT_SHOW);
+    EventHandler.off(this._parent, EVENT_SHOWN);
+    EventHandler.off(this._parent, EVENT_HIDE);
+    EventHandler.off(this._parent, EVENT_HIDDEN);
+    super.dispose();
+  }
+
+  // Getters
+  static get NAME() {
+    return NAME;
+  }
+
+  // Private
+  _init() {
+    this._bindShowEvent();
+    this._bindShownEvent();
+    this._bindHideEvent();
+    this._bindHiddenEvent();
+  }
+
+  _getConfig(options) {
+    const config = {
+      ...Default,
+      ...Manipulator.getDataAttributes(this._element),
+      ...options,
+    };
+    typeCheckConfig(NAME, config, DefaultType);
+    return config;
+  }
+
+  _getOffset() {
+    const { offset } = this._config;
+
+    if (typeof offset === 'string') {
+      return offset.split(',').map((val) => Number.parseInt(val, 10));
+    }
+
+    if (typeof offset === 'function') {
+      return (popperData) => offset(popperData, this._element);
+    }
+
+    return offset;
+  }
+
+  _getPopperConfig() {
+    const popperConfig = {
+      placement: this._getPlacement(),
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            altBoundary: this._config.flip,
+            boundary: this._config.boundary,
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: this._getOffset(),
+          },
+        },
+      ],
+    };
+
+    // Disable Popper if we have a static display
+    if (this._config.display === 'static') {
+      popperConfig.modifiers = [
+        {
+          name: 'applyStyles',
+          enabled: false,
+        },
+      ];
+    }
+
+    return {
+      ...popperConfig,
+      /* eslint no-extra-parens: "off" */
+      ...(typeof this._config.popperConfig === 'function'
+        ? this._config.popperConfig(popperConfig)
+        : this._config.popperConfig),
+    };
+  }
+
+  _bindShowEvent() {
+    EventHandler.on(this._element, EVENT_SHOW, (e) => {
+      const showEvent = EventHandler.trigger(this._element, EVENT_SHOW_MDB, {
+        relatedTarget: e.relatedTarget,
+      });
+
+      if (showEvent.defaultPrevented) {
+        e.preventDefault();
+        return;
+      }
+
+      this._dropdownAnimationStart('show');
+    });
+  }
+
+  _bindShownEvent() {
+    EventHandler.on(this._parent, EVENT_SHOWN, (e) => {
+      const shownEvent = EventHandler.trigger(this._parent, EVENT_SHOWN_MDB, {
+        relatedTarget: e.relatedTarget,
+      });
+
+      if (shownEvent.defaultPrevented) {
+        e.preventDefault();
+        return;
+      }
+    });
+  }
+
+  _bindHideEvent() {
+    EventHandler.on(this._parent, EVENT_HIDE, (e) => {
+      const hideEvent = EventHandler.trigger(this._parent, EVENT_HIDE_MDB, {
+        relatedTarget: e.relatedTarget,
+      });
+
+      if (hideEvent.defaultPrevented) {
+        e.preventDefault();
+        return;
+      }
+
+      this._menuStyle = this._menu.style.cssText;
+      this._popperPlacement = this._menu.getAttribute('data-popper-placement');
+      this._mdbPopperConfig = this._menu.getAttribute('data-mdb-popper');
+    });
+  }
+
+  _bindHiddenEvent() {
+    EventHandler.on(this._parent, EVENT_HIDDEN, (e) => {
+      const hiddenEvent = EventHandler.trigger(this._parent, EVENT_HIDDEN_MDB, {
+        relatedTarget: e.relatedTarget,
+      });
+
+      if (hiddenEvent.defaultPrevented) {
+        e.preventDefault();
+        return;
+      }
+
+      if (this._config.display !== 'static' && this._menuStyle !== '') {
+        this._menu.style.cssText = this._menuStyle;
+      }
+
+      this._menu.setAttribute('data-popper-placement', this._popperPlacement);
+      this._menu.setAttribute('data-mdb-popper', this._mdbPopperConfig);
+
+      this._dropdownAnimationStart('hide');
+    });
+  }
+
+  _dropdownAnimationStart(action) {
+    switch (action) {
+      case 'show':
+        this._menu.classList.add(ANIMATION_CLASS, ANIMATION_SHOW_CLASS);
+        this._menu.classList.remove(ANIMATION_HIDE_CLASS);
+        break;
+      default:
+        // hide
+        this._menu.classList.add(ANIMATION_CLASS, ANIMATION_HIDE_CLASS);
+        this._menu.classList.remove(ANIMATION_SHOW_CLASS);
+        break;
+    }
+
+    this._bindAnimationEnd();
+  }
+
+  _bindAnimationEnd() {
+    EventHandler.one(this._menu, 'animationend', () => {
+      this._menu.classList.remove(ANIMATION_CLASS, ANIMATION_HIDE_CLASS, ANIMATION_SHOW_CLASS);
+    });
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation - auto initialization
+ * ------------------------------------------------------------------------
+ */
+
+SelectorEngine.find(SELECTOR_EXPAND).forEach((el) => {
+  let instance = Dropdown.getInstance(el);
+  if (!instance) {
+    instance = new Dropdown(el);
+  }
+});
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .rating to jQuery only if jQuery is present
+ */
+
+onDOMContentLoaded(() => {
+  const $ = getjQuery();
+
+  if ($) {
+    const JQUERY_NO_CONFLICT = $.fn[NAME];
+    $.fn[NAME] = Dropdown.jQueryInterface;
+    $.fn[NAME].Constructor = Dropdown;
+    $.fn[NAME].noConflict = () => {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return Dropdown.jQueryInterface;
+    };
+  }
+});
+
+export default Dropdown;

data/_third_party/mdb-ui-kit/src/js/free/input.js

@@ -0,0 +1,443 @@
+import { element, getjQuery, onDOMContentLoaded } from '../mdb/util/index';
+import Data from '../mdb/dom/data';
+import EventHandler from '../mdb/dom/event-handler';
+import Manipulator from '../mdb/dom/manipulator';
+import SelectorEngine from '../mdb/dom/selector-engine';
+import 'detect-autofill';
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const NAME = 'input';
+const DATA_KEY = 'mdb.input';
+const CLASSNAME_WRAPPER = 'form-outline';
+const CLASSNAME_ACTIVE = 'active';
+const CLASSNAME_NOTCH = 'form-notch';
+const CLASSNAME_NOTCH_LEADING = 'form-notch-leading';
+const CLASSNAME_NOTCH_MIDDLE = 'form-notch-middle';
+const CLASSNAME_NOTCH_TRAILING = 'form-notch-trailing';
+const CLASSNAME_PLACEHOLDER_ACTIVE = 'placeholder-active';
+const CLASSNAME_HELPER = 'form-helper';
+const CLASSNAME_COUNTER = 'form-counter';
+
+const SELECTOR_OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
+const SELECTOR_OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
+const SELECTOR_NOTCH = `.${CLASSNAME_NOTCH}`;
+const SELECTOR_NOTCH_LEADING = `.${CLASSNAME_NOTCH_LEADING}`;
+const SELECTOR_NOTCH_MIDDLE = `.${CLASSNAME_NOTCH_MIDDLE}`;
+const SELECTOR_HELPER = `.${CLASSNAME_HELPER}`;
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+
+class Input {
+  constructor(element) {
+    this._element = element;
+    this._label = null;
+    this._labelWidth = 0;
+    this._labelMarginLeft = 0;
+    this._notchLeading = null;
+    this._notchMiddle = null;
+    this._notchTrailing = null;
+    this._initiated = false;
+    this._helper = null;
+    this._counter = false;
+    this._counterElement = null;
+    this._maxLength = 0;
+    this._leadingIcon = null;
+    if (this._element) {
+      Data.setData(element, DATA_KEY, this);
+      this.init();
+    }
+  }
+
+  // Getters
+  static get NAME() {
+    return NAME;
+  }
+
+  get input() {
+    const inputElement =
+      SelectorEngine.findOne('input', this._element) ||
+      SelectorEngine.findOne('textarea', this._element);
+    return inputElement;
+  }
+
+  // Public
+  init() {
+    if (this._initiated) {
+      return;
+    }
+    this._getLabelData();
+    this._applyDivs();
+    this._applyNotch();
+    this._activate();
+    this._getHelper();
+    this._getCounter();
+    this._initiated = true;
+  }
+
+  update() {
+    this._getLabelData();
+    this._getNotchData();
+    this._applyNotch();
+    this._activate();
+    this._getHelper();
+    this._getCounter();
+  }
+
+  forceActive() {
+    Manipulator.addClass(this.input, CLASSNAME_ACTIVE);
+  }
+
+  forceInactive() {
+    Manipulator.removeClass(this.input, CLASSNAME_ACTIVE);
+  }
+
+  dispose() {
+    this._removeBorder();
+
+    Data.removeData(this._element, DATA_KEY);
+    this._element = null;
+  }
+
+  // Private
+
+  /*
+  _getIcons() {
+    this._leadingIcon = SelectorEngine.findOne('i.leading', this._element);
+
+    if (this._leadingIcon !== null) {
+      this._applyLeadingIcon();
+    }
+  }
+
+  _applyLeadingIcon() {
+    this._label.innerHTML = ` ${this._label.innerHTML}`;
+    this._label.insertBefore(this._leadingIcon, this._label.firstChild);
+  }
+  */
+
+  _getLabelData() {
+    this._label = SelectorEngine.findOne('label', this._element);
+    if (this._label === null) {
+      this._showPlaceholder();
+    } else {
+      this._getLabelWidth();
+      this._getLabelPositionInInputGroup();
+      this._toggleDefaultDatePlaceholder();
+    }
+  }
+
+  _getHelper() {
+    this._helper = SelectorEngine.findOne(SELECTOR_HELPER, this._element);
+  }
+
+  _getCounter() {
+    this._counter = Manipulator.getDataAttribute(this.input, 'showcounter');
+    if (this._counter) {
+      this._maxLength = this.input.maxLength;
+      this._showCounter();
+    }
+  }
+
+  _showCounter() {
+    const counters = SelectorEngine.find('.form-counter', this._element);
+    if (counters.length > 0) {
+      return;
+    }
+    this._counterElement = document.createElement('div');
+    Manipulator.addClass(this._counterElement, CLASSNAME_COUNTER);
+    const actualLength = this.input.value.length;
+    this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;
+    this._helper.appendChild(this._counterElement);
+    this._bindCounter();
+  }
+
+  _bindCounter() {
+    EventHandler.on(this.input, 'input', () => {
+      const actualLength = this.input.value.length;
+      this._counterElement.innerHTML = `${actualLength} / ${this._maxLength}`;
+    });
+  }
+
+  _toggleDefaultDatePlaceholder(input = this.input) {
+    const isTypeDate = input.getAttribute('type') === 'date';
+
+    if (!isTypeDate) {
+      return;
+    }
+
+    const isInputFocused = document.activeElement === input;
+
+    if (!isInputFocused && !input.value) {
+      input.style.opacity = 0;
+    } else {
+      input.style.opacity = 1;
+    }
+  }
+
+  _showPlaceholder() {
+    Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
+  }
+
+  _getNotchData() {
+    this._notchMiddle = SelectorEngine.findOne(SELECTOR_NOTCH_MIDDLE, this._element);
+    this._notchLeading = SelectorEngine.findOne(SELECTOR_NOTCH_LEADING, this._element);
+  }
+
+  _getLabelWidth() {
+    this._labelWidth = this._label.clientWidth * 0.8 + 8;
+  }
+
+  _getLabelPositionInInputGroup() {
+    this._labelMarginLeft = 0;
+
+    if (!this._element.classList.contains('input-group')) return;
+    const input = this.input;
+    const prefix = SelectorEngine.prev(input, '.input-group-text')[0];
+    if (prefix === undefined) {
+      this._labelMarginLeft = 0;
+    } else {
+      this._labelMarginLeft = prefix.offsetWidth - 1;
+    }
+  }
+
+  _applyDivs() {
+    const allNotchWrappers = SelectorEngine.find(SELECTOR_NOTCH, this._element);
+    const notchWrapper = element('div');
+    Manipulator.addClass(notchWrapper, CLASSNAME_NOTCH);
+    this._notchLeading = element('div');
+    Manipulator.addClass(this._notchLeading, CLASSNAME_NOTCH_LEADING);
+    this._notchMiddle = element('div');
+    Manipulator.addClass(this._notchMiddle, CLASSNAME_NOTCH_MIDDLE);
+    this._notchTrailing = element('div');
+    Manipulator.addClass(this._notchTrailing, CLASSNAME_NOTCH_TRAILING);
+    if (allNotchWrappers.length >= 1) {
+      return;
+    }
+    notchWrapper.append(this._notchLeading);
+    notchWrapper.append(this._notchMiddle);
+    notchWrapper.append(this._notchTrailing);
+    this._element.append(notchWrapper);
+  }
+
+  _applyNotch() {
+    this._notchMiddle.style.width = `${this._labelWidth}px`;
+    this._notchLeading.style.width = `${this._labelMarginLeft + 9}px`;
+
+    if (this._label === null) return;
+    this._label.style.marginLeft = `${this._labelMarginLeft}px`;
+  }
+
+  _removeBorder() {
+    const border = SelectorEngine.findOne(SELECTOR_NOTCH, this._element);
+    if (border) border.remove();
+  }
+
+  _activate(event) {
+    onDOMContentLoaded(() => {
+      this._getElements(event);
+      const input = event ? event.target : this.input;
+
+      if (input.value !== '') {
+        Manipulator.addClass(input, CLASSNAME_ACTIVE);
+      }
+      this._toggleDefaultDatePlaceholder(input);
+    });
+  }
+
+  _getElements(event) {
+    if (event) {
+      this._element = event.target.parentNode;
+      this._label = SelectorEngine.findOne('label', this._element);
+    }
+
+    if (event && this._label) {
+      const prevLabelWidth = this._labelWidth;
+      this._getLabelData();
+
+      if (prevLabelWidth !== this._labelWidth) {
+        this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', event.target.parentNode);
+        this._notchLeading = SelectorEngine.findOne(
+          SELECTOR_NOTCH_LEADING,
+          event.target.parentNode
+        );
+        this._applyNotch();
+      }
+    }
+  }
+
+  _deactivate(event) {
+    const input = event ? event.target : this.input;
+
+    if (input.value === '') {
+      input.classList.remove(CLASSNAME_ACTIVE);
+    }
+    this._toggleDefaultDatePlaceholder(input);
+  }
+
+  static activate(instance) {
+    return function (event) {
+      instance._activate(event);
+    };
+  }
+
+  static deactivate(instance) {
+    return function (event) {
+      instance._deactivate(event);
+    };
+  }
+
+  static jQueryInterface(config, options) {
+    return this.each(function () {
+      let data = Data.getData(this, DATA_KEY);
+      const _config = typeof config === 'object' && config;
+      if (!data && /dispose/.test(config)) {
+        return;
+      }
+      if (!data) {
+        data = new Input(this, _config);
+      }
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`);
+        }
+        data[config](options);
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return Data.getData(element, DATA_KEY);
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return (
+      this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
+    );
+  }
+}
+
+EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
+
+EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
+
+EventHandler.on(window, 'shown.bs.modal', (e) => {
+  SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.update();
+  });
+  SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.update();
+  });
+});
+
+EventHandler.on(window, 'shown.bs.dropdown', (e) => {
+  const target = e.target.parentNode.querySelector('.dropdown-menu');
+  if (target) {
+    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
+      const instance = Input.getInstance(element.parentNode);
+      if (!instance) {
+        return;
+      }
+      instance.update();
+    });
+    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
+      const instance = Input.getInstance(element.parentNode);
+      if (!instance) {
+        return;
+      }
+      instance.update();
+    });
+  }
+});
+
+EventHandler.on(window, 'shown.bs.tab', (e) => {
+  let targetId;
+
+  if (e.target.href) {
+    targetId = e.target.href.split('#')[1];
+  } else {
+    targetId = Manipulator.getDataAttribute(e.target, 'target').split('#')[1];
+  }
+
+  const target = SelectorEngine.findOne(`#${targetId}`);
+  SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.update();
+  });
+  SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.update();
+  });
+});
+
+// auto-init
+SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).map((element) => new Input(element));
+
+// form reset handler
+EventHandler.on(window, 'reset', (e) => {
+  SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.forceInactive();
+  });
+  SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) {
+      return;
+    }
+    instance.forceInactive();
+  });
+});
+
+// auto-fill
+EventHandler.on(window, 'onautocomplete', (e) => {
+  const instance = Input.getInstance(e.target.parentNode);
+  if (!instance || !e.cancelable) {
+    return;
+  }
+  instance.forceActive();
+});
+
+onDOMContentLoaded(() => {
+  const $ = getjQuery();
+
+  if ($) {
+    const JQUERY_NO_CONFLICT = $.fn[NAME];
+    $.fn[NAME] = Input.jQueryInterface;
+    $.fn[NAME].Constructor = Input;
+    $.fn[NAME].noConflict = () => {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return Input.jQueryInterface;
+    };
+  }
+});
+
+export default Input;