hootstrap 0.1.0

data/assets/javascripts/hootstrap/rails.js

@@ -0,0 +1,28 @@
+//= require ./utils/dynamicListener
+
+document.addEventListener('turbolinks:load', () => {
+  let confirmed = false;
+
+  addDynamicEventListener(document.body, 'click', '[data-prompt]', handleClick);
+
+  function handleClick(event) {
+    if (confirmed) {
+      confirmed = false;
+      return;
+    }
+
+    Rails.stopEverything(event);
+
+    const target = event.target;
+
+    new Toast({
+      message: target.getAttribute('data-prompt'),
+      type: 'danger',
+      action: 'OK',
+      onClick: () => {
+        confirmed = true;
+        target.click({ something: 'hello' });
+      }
+    });
+  }
+});

data/assets/javascripts/hootstrap/toast.js

@@ -0,0 +1,166 @@
+/**
+ * Toast
+ *
+ * API
+ *
+ * @param {string} message - The text to be displayed inside the Toast.
+ * @param {string} type - The context: success, danger, primary, or warning.
+ * @param {string} [action] - The text inside the actionable button.
+ * @param {function} [onClick] - The callback function after actionable button is clicked.
+ *
+ */
+
+function Toast(options) {
+  if (!options.message) {
+    throw new Error('You need a message to use a Toast');
+    return;
+  }
+
+  if (!options.type) {
+    throw new Error('You need a type to use Toast');
+    return;
+  }
+
+  const types = ['success', 'danger', 'primary', 'warning'];
+  if (!types.includes(options.type)) {
+    throw new Error(
+      'You need a valid type to use Toast: `success`, `danger`, `primary`, `warning`'
+    );
+    return;
+  }
+
+  if (options.action && !options.onClick) {
+    throw new Error('You need an onClick function to use `action`');
+    return;
+  }
+
+  this.options = options;
+  this.containerEl = document.querySelector('.toast-container');
+  this.el = document.querySelector('.toast');
+  this.handleKeyup = this.handleKeyup.bind(this);
+
+  this.init();
+}
+
+Toast.prototype._createElements = function() {
+  return new Promise((resolve, reject) => {
+    this.containerEl = document.createElement('div');
+    this.containerEl.classList.add('toast-container');
+    this.containerEl.setAttribute('role', 'alert');
+    this.containerEl.setAttribute('aria-hidden', true);
+
+    this.el = document.createElement('div');
+    this.el.classList.add('toast');
+
+    this.containerEl.appendChild(this.el);
+    document.body.appendChild(this.containerEl);
+
+    resolve();
+  });
+};
+
+Toast.prototype.bindEventListeners = function() {
+  const dismissEl = document.querySelector('[data-dismiss="toast"]');
+
+  dismissEl.addEventListener('click', () => {
+    this.close();
+  });
+
+  if (this.options.action) {
+    const actionButton = document.querySelector(
+      '[data-behavior="toast-action"]'
+    );
+
+    actionButton.addEventListener('click', event => {
+      this.options.onClick(event);
+      this.close();
+    });
+  }
+
+  document.addEventListener('keyup', this.handleKeyup);
+};
+
+Toast.prototype.handleKeyup = function(event) {
+  if (event.keyCode == 27) {
+    this.close();
+  }
+};
+
+Toast.prototype.close = function() {
+  return new Promise((resolve, reject) => {
+    this.containerEl.setAttribute('aria-hidden', true);
+
+    this.el.innerHTML = '';
+    this.el.classList.remove(
+      'toast-success',
+      'toast-danger',
+      'toast-primary',
+      'toast-warning'
+    );
+
+    if (this.focusedElBeforeOpen) {
+      this.focusedElBeforeOpen.focus();
+    }
+
+    document.removeEventListener('keyup', this.handleKeyup);
+
+    resolve();
+  });
+};
+
+Toast.prototype._open = function() {
+  this.el.classList.add(`toast-${this.options.type}`);
+  this.containerEl.setAttribute('aria-hidden', false);
+
+  let actionButton = '';
+  if (this.options.action) {
+    actionButton = `
+      <button type="button"
+        class="btn btn-${this.options.type} btn-sm"
+        data-behavior="toast-action">
+        ${this.options.action}
+      </button>
+    `;
+  }
+
+  const textClass = this.options.action ? '' : 'mb-0';
+
+  this.el.innerHTML = `
+    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
+    <p class="${textClass}">${this.options.message}</p>
+
+    ${actionButton}
+  `;
+
+  this.focusedElBeforeOpen = document.activeElement;
+
+  if (this.options.action) {
+    document.querySelector('[data-behavior="toast-action"]').focus();
+  } else {
+    document.querySelector('[data-dismiss="toast"]').focus();
+  }
+};
+
+Toast.prototype.init = function() {
+  Promise.resolve()
+    .then(() => {
+      if (this.containerEl) {
+        return Promise.resolve();
+      }
+
+      return this._createElements();
+    })
+    .then(() => {
+      if (this.containerEl.getAttribute('aria-hidden') == 'false') {
+        return this.close();
+      }
+      return Promise.resolve();
+    })
+    .then(() => {
+      this._open();
+      this.bindEventListeners();
+    });
+};

data/assets/javascripts/hootstrap/utils/dynamicListener.js

@@ -0,0 +1,80 @@
+// Credits
+// https://github.com/Cristy94/dynamic-listener
+//
+// Usage
+//
+// addDynamicEventListener(document.body, 'click', '[data-prompt]', event => {
+//   console.log(event);
+// });
+(function(globalSope) {
+  'use strict';
+
+  /**
+     * Including this file adds the `addDynamicListener` to the ELement prototype.
+     *
+     * The dynamic listener gets an extra `selector` parameter that only calls the callback
+     * if the target element matches the selector.
+     *
+     * The listener has to be added to the container/root element and the selector should match
+     * the elements that should trigger the event.
+     *
+     * Browser support: IE9+
+     */
+
+  // Polyfil Element.matches
+  // https://developer.mozilla.org/en/docs/Web/API/Element/matches#Polyfill
+  if (!Element.prototype.matches) {
+    Element.prototype.matches =
+      Element.prototype.matchesSelector ||
+      Element.prototype.mozMatchesSelector ||
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.oMatchesSelector ||
+      Element.prototype.webkitMatchesSelector ||
+      function(s) {
+        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+          i = matches.length;
+        while (--i >= 0 && matches.item(i) !== this) {}
+        return i > -1;
+      };
+  }
+
+  /**
+     * Returns a modified callback function that calls the
+     * initial callback function only if the target element matches the given selector
+     *
+     * @param {string} selector
+     * @param {function} callback
+     */
+  function getConditionalCallback(selector, callback) {
+    return function(e) {
+      if (!e.target) return;
+      if (!e.target.matches(selector)) return;
+      callback.apply(this, arguments);
+    };
+  }
+
+  /**
+     *
+     *
+     * @param {Element} rootElement The root element to add the linster too.
+     * @param {string} eventType The event type to listen for.
+     * @param {string} selector The selector that should match the dynamic elements.
+     * @param {function} callback The function to call when an event occurs on the given selector.
+     * @param {boolean|object} options Passed as the regular `options` parameter to the addEventListener function
+     *                                 Set to `true` to use capture.
+     *                                 Usually used as an object to add the listener as `passive`
+     */
+  globalSope.addDynamicEventListener = function(
+    rootElement,
+    eventType,
+    selector,
+    callback,
+    options
+  ) {
+    rootElement.addEventListener(
+      eventType,
+      getConditionalCallback(selector, callback),
+      options
+    );
+  };
+})(this);

data/assets/javascripts/hootstrap.js

@@ -0,0 +1,3 @@
+//= require hootstrap/modal
+//= require hootstrap/rails
+//= require hootstrap/toast

data/assets/stylesheets/hootstrap/base/_base.scss

@@ -0,0 +1,5 @@
+@import "hootstrap/base/variables";
+@import "hootstrap/base/mixins/background";
+@import "hootstrap/base/mixins/button";
+@import "hootstrap/base/mixins/toast";
+@import "hootstrap/base/mixins/tooltip";