nexmo-oas-renderer 2.1.1

data/lib/nexmo/oas/renderer/public/assets/javascripts/volta.modal.js

@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) 2001-present, Vonage.
+ *
+ * Modals (requires core)
+ */
+
+'use strict';
+
+Volta.modal = function () {
+  var _class = {
+    auto: 'Vlt-modal--auto',
+    bodyModalOpen: 'Vlt-body--modal-open',
+    cancel: 'Vlt-modal__cancel',
+    confirm: 'Vlt-modal__confirm',
+    content: 'Vlt-modal__content',
+    modal: 'Vlt-modal',
+    out: 'Vlt-modal--out',
+    panel: 'Vlt-modal__panel',
+    trigger: 'Vlt-modal-trigger',
+    visible: 'Vlt-modal_visible',
+    dismiss: 'Vlt-modal__dismiss',
+  }
+
+  var body,
+    dismissModalHandler,
+    cancelModalHandler,
+    confirmModalHandler,
+    escHandler,
+    clickHandler,
+    escAttached;
+
+  function Modal() {}
+
+  Modal.prototype = {
+    attachButtons: function() {
+      var _this = this;
+      _this.dismissBtn = _this.modal.querySelector('.' + _class.dismiss);
+
+      if(_this.dismissBtn) {
+        dismissModalHandler = dismissModal.bind(_this);
+        _this.dismissBtn.addEventListener('click', dismissModalHandler);
+      }
+
+      _this.cancelBtn = _this.modal.querySelector('.' + _class.cancel);
+
+      if(_this.cancelBtn) {
+        cancelModalHandler = cancelModal.bind(_this);
+        _this.cancelBtn.addEventListener('click', cancelModalHandler);
+      }
+
+      _this.confirmBtn = _this.modal.querySelector('.' + _class.confirm);
+
+      if(_this.confirmBtn) {
+        confirmModalHandler = confirmModal.bind(_this);
+        _this.confirmBtn.addEventListener('click', confirmModalHandler);
+      }
+    },
+    html: function(newHtml) {
+      this.modal.innerHTML = newHtml;
+      return this;
+    },
+    init: function(elementOrId) {
+      if(elementOrId.length) {
+        this.modal = document.querySelector('#' + elementOrId);
+      } else {
+        this.modal = elementOrId;
+      }
+
+      this._callback = Volta._getFunction(this.modal.dataset.callback);
+    },
+    open: function(e) {
+      if(e && e.preventDefault) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      this.modal.classList.remove(_class.out);
+      this.modal.classList.add(_class.visible);
+      this.attachButtons();
+
+      disableScroll();
+
+      if(!escAttached && !this.modal.dataset.disableEsc || this.modal.dataset.disableEsc === "false") {
+        escHandler = closeModalOnEscape.bind(this);
+        body.addEventListener('keyup', escHandler, { once: true });
+        escAttached = true;
+      }
+
+      if(!this.modal.dataset.disableClick || this.modal.dataset.disableClick === "false") {
+        clickHandler = closeModalOnClick.bind(this);
+        this.modal.addEventListener('click', clickHandler, { once: true });
+      }
+    },
+    dismiss: function(e, confirmed) {
+      var _this = this;
+
+      if(e && e.preventDefault) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      enableScroll();
+
+      if(_this.modal){
+        _this.modal.classList.remove(_class.visible);
+        _this.modal.classList.add(_class.out);
+      }
+
+      if(_this._callback) {
+        _this._callback(confirmed);
+      }
+
+      removeModal(_this);
+    }
+  }
+
+  return {
+    create: create,
+    init: attachModalHandlers
+  }
+
+  /**
+   *	@public
+   *
+   *	@description Attach a click listener to each modals trigger on the screen, which will open the modal
+   */
+  function attachModalHandlers() {
+    if(!body) {
+      body = document.querySelector('body');
+    }
+
+    var triggers = document.querySelectorAll('.' + _class.trigger);
+
+    if(triggers.length > 0) {
+      triggers.forEach(attachTriggerHandler);
+    }
+
+    //Not the recommended way to use modals
+    var modals = document.querySelectorAll('.' + _class.modal);
+
+    if(modals.length > 0) {
+      modals.forEach(attachModalHandler);
+    }
+
+    function attachModalHandler(modal) {
+      if(Volta._hasClass(modal, _class.auto)) {
+        var trigger = document.querySelector('#' + modal.dataset.trigger);
+        trigger.addEventListener('click', function() {
+          create(modal).open();
+        });
+      }
+    }
+
+    function attachTriggerHandler(trigger) {
+      if(trigger.dataset.modal) {
+        var modal = document.querySelector('#' + trigger.dataset.modal);
+
+        if(!modal) {
+          console.warn('Volta: modal ' + trigger.dataset.modal + ' cannot be found');
+        }
+
+        trigger.addEventListener('click', function() {
+          create(modal).open();
+        });
+      }
+    }
+  }
+
+  /**
+   *	@private
+   *
+   *	@description Close the modal, triggered by cancel button, passes false to callback function
+   *  @param {event} e
+   */
+  function cancelModal(e) {
+    return this.dismiss(e, false);
+  }
+
+  /**
+   *	@private
+   *
+   *	@description Close the modal, triggered by confirm button, passes true to callback function
+   *  @param {event} e
+   */
+  function confirmModal(e) {
+    return this.dismiss(e, true);
+  }
+
+  /**
+   *	@private
+   *
+   *	@description Close the modal, triggered by 'x' button, passes false to callback function
+   *  @param {event} e
+   */
+  function dismissModal(e) {
+    return this.dismiss(e, false);
+  }
+
+  /**	@private
+   *
+   *	@description Close the modal, triggered by 'esc' key, passes false to callback function
+   *  @param {event} e
+   */
+  function closeModalOnEscape(e){
+    if(e && e.keyCode === 27) {
+      this.dismiss(e, false);
+    } else {
+      body.addEventListener('click', escHandler, { once: true });
+    }
+  }
+
+
+  /**	@private
+   *
+   *	@description Close the modal, triggered by 'body click, passes false to callback function
+   *  @param {event} e
+   */
+  function closeModalOnClick(e){
+    if(!Volta._hasClass(e.target, _class.trigger)
+      && !Volta._closest(e.target, '.' + _class.trigger, '.' + _class.trigger)
+      && !Volta._closest(e.target, '.' + _class.panel, '.' + _class.panel)) {
+      this.dismiss(e, false);
+    } else if(this.modal) {
+      this.modal.addEventListener('click', clickHandler, { once: true });
+    }
+  }
+
+  /**
+   *	@public
+   *
+   *	@description Create the modal object
+   *  @param {HTMLElement|string} elementOrId Reference to the modal element or the id
+   *. @return {Object} A modal object
+   */
+  function create(elementOrId) {
+    if(!body) {
+      body = document.querySelector('body');
+    }
+    var modal = Object.create(Modal.prototype, {})
+    modal.init(elementOrId);
+    return modal;
+  }
+
+  /**
+   * Private functions to disable body scroll when modal is open
+   */
+  function disableScroll() {
+    body.classList.add(_class.bodyModalOpen);
+    body.addEventListener('touchmove', preventScroll);
+    body.querySelector('main').addEventListener('touchmove', preventScroll);
+    body.querySelector('.' + _class.content).addEventListener('touchmove', allowScroll);
+  }
+
+  function enableScroll() {
+    body.classList.remove(_class.bodyModalOpen);
+    body.removeEventListener('touchmove', preventScroll);
+    body.querySelector('main').removeEventListener('touchmove', preventScroll);
+    var modalContent = body.querySelector('.' + _class.content);
+    if(modalContent) modalContent.removeEventListener('touchmove', allowScroll);
+  }
+
+  function allowScroll(e) {
+    e.stopPropagation();
+  }
+
+  function preventScroll(e) {
+    e.preventDefault();
+  }
+
+  /**
+   *	@private
+   *
+   *	@description Remove the modal after dismiss, makes sure to delete the modal properties so it can be garbage collected, and removes event listeners
+   *  @param {HTMLElement|string} elementOrId Reference to the modal element or the id
+   */
+  function removeModal(modal) {
+    delete modal.modal;
+
+    if(modal.dismissBtn) {
+      modal.dismissBtn.removeEventListener('click', dismissModalHandler);
+    }
+
+    if(modal.cancelBtn) {
+      modal.cancelBtn.removeEventListener('click', cancelModalHandler);
+    }
+
+    if(modal.confirmBtn) {
+      modal.confirmBtn.removeEventListener('click', confirmModalHandler);
+    }
+
+    if(clickHandler) {
+      body.removeEventListener('click', clickHandler);
+    }
+
+    if(escHandler) {
+      body.removeEventListener('keyup', escHandler);
+      escAttached = false;
+    }
+  }
+}();

data/lib/nexmo/oas/renderer/public/assets/javascripts/volta.tabs.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2001-present, Vonage.
+ *
+ * Tabs (requires core)
+ */
+
+'use strict';
+
+Volta.tab = function () {
+  var _class = {
+    link: 'Vlt-tabs__link',
+    linkJs: 'Vlt-js-tabs__link',
+    linkActive: 'Vlt-tabs__link_active',
+    linkDisabled: 'Vlt-tabs__link_disabled',
+    linkJsActive: 'Vlt-js-tabs__link_active',
+    panel: 'Vlt-tabs__panel',
+    panelActive: 'Vlt-tabs__panel_active',
+    panelJsActive: 'Vlt-js-tabs__panel_active',
+    tabs: 'Vlt-tabs',
+  }
+
+  function Tabs() {}
+
+  Tabs.prototype = {
+    init: function(element, isWrapper) {
+      var _this = this,
+        tabsHeader,
+        tabsContent;
+
+      if(isWrapper) {
+        tabsHeader = element.children.item(0);
+        tabsContent = element.children.item(1);
+      } else {
+        _this.isJs = true;
+        tabsHeader = element;
+        tabsContent = element.dataset.tabContent ?
+          document.querySelector('#' + element.dataset.tabContent)
+          : null;
+      }
+
+      var linkClass = _this.isJs ? _class.linkJs : _class.link;
+      _this._links = tabsHeader.querySelectorAll('.' + linkClass);
+      _this._panels = tabsContent ? tabsContent.children : undefined;
+
+      this._setActiveElements();
+
+      if(_this._panels && _this._panels.length === _this._links.length) {
+        _this._links.forEach(function(link){
+          var link = link;
+
+          link.addEventListener('toggle', function() {
+              _this.toggle(link);
+          });
+
+          link.addEventListener('click', function() {
+            _this.toggle(link);
+          });
+        });
+      } else if (_this._panels && _this._panels.length > 0) {
+        console.log('Volta: Tabs, number of links and panels do not match');
+      }
+    },
+    toggle: function(linkElement) {
+      var linkActiveClass = this.isJs ? _class.linkJsActive : _class.linkActive;
+      var panelActiveClass = this.isJs ? _class.panelJsActive : _class.panelActive;
+
+      if(!Volta._hasClass(linkElement, _class.linkDisabled) && (!this._activeLink || this._activeLink !== linkElement)) {
+        if(this._activeLink) {
+          this._activeLink.classList.remove(linkActiveClass);
+          this._activePanel.classList.remove(panelActiveClass);
+        }
+
+        this._setActiveElements(linkElement);
+
+        this._activeLink.classList.add(linkActiveClass);
+        this._activePanel.classList.add(panelActiveClass);
+
+        if(Volta.tooltip) {
+          Volta.tooltip.init();
+        }
+      }
+    },
+    _setActiveElements: function(linkElement){
+      var linkActiveClass = this.isJs ? _class.linkJsActive :_class.linkActive;
+
+      if(!linkElement) {
+        this._activeLink = this._links.item(linkActiveClass);
+      } else {
+        this._activeLink = linkElement;
+      }
+
+      var tabIndex;
+      var currentNode = 0;
+
+      while(!tabIndex && currentNode < this._links.length) {
+        if(this._links.item(currentNode) === this._activeLink) {
+          tabIndex = currentNode;
+          break;
+        }
+        currentNode++;
+      }
+
+      if(this._panels) {
+        this._activePanel = this._panels.item(tabIndex);
+      }
+    }
+  }
+
+  return {
+    create: create,
+    init: attachTabHandlers
+  }
+
+  /**
+   *	@public
+   *
+   *	@description Attach a listener to the tab header
+   */
+  function attachTabHandlers() {
+    //traditional tabs
+    document.querySelectorAll('.' + _class.tabs).forEach(create);
+
+    document.querySelectorAll('[data-tab-content]').forEach(create);
+  }
+
+  /**
+   *	@public
+   *
+   *	@description Create a tabs component
+   *  @param {HTMLElement} element
+   */
+  function create(element) {
+    var tabs = Object.create(Tabs.prototype, {})
+
+    if(Volta._hasClass(element, _class.tabs)) {
+      tabs.init(element, true);
+    } else {
+      tabs.init(element);
+    }
+
+    return tabs;
+  }
+}();

data/lib/nexmo/oas/renderer/public/assets/javascripts/volta.tooltip.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2001-present, Vonage.
+ *
+ * Tooltips (requires popper.js, tooltip.js)
+ */
+'use strict';
+
+Volta.tooltip = function () {
+    var _class = {
+        bottom: 'Vlt-tooltip--bottom',
+        left: 'Vlt-tooltip--left',
+        tooltip: 'Vlt-tooltip',
+        top: 'Vlt-tooltip--top',
+        right: 'Vlt-tooltip--right',
+        large: 'Vlt-tooltip--large'
+    }
+
+    return {
+        create: create,
+        init: attachTooltipHandlers
+    }
+
+    /**
+     *	@public
+     *
+     *	@description Create a Tooltip instance for every Vlt-tooltip
+     */
+    function attachTooltipHandlers() {
+        document.querySelectorAll('.' + _class.tooltip).forEach(create);
+    }
+
+    /**
+     *	@public
+     *
+     *	@description Create a Tooltip instance
+     *	@param {HTMLElement} tooltip
+     *  @return {object} a Tooltip element
+     */
+    function create(tooltip) {
+        var placement;
+        var size;
+
+        if (Volta._hasClass(tooltip, _class.bottom)) {
+            placement = 'bottom';
+        } else if (Volta._hasClass(tooltip, _class.top)) {
+            placement = 'top';
+        } else if (Volta._hasClass(tooltip, _class.left)) {
+            placement = 'left';
+        } else if (Volta._hasClass(tooltip, _class.right)) {
+            placement = 'right';
+        }
+
+        if (Volta._hasClass(tooltip, _class.large)) {
+            size = ' Vlt-tooltip--large';
+        } else {
+            size='';
+        }
+
+        var template =
+            '<div class="Vlt-tooltip--js' + size + '" role="tooltip">' +
+            '<div class="tooltip-arrow Vlt-tooltip__arrow"></div>' +
+            '<div class="tooltip-inner Vlt-tooltip__content"></div>' +
+            '</div>';
+
+        var title = tooltip.title;
+        //remove the title so deafult title does not show
+        tooltip.title = "";
+
+        return new Tooltip(tooltip, {
+            html: true,
+            template: template,
+            title: title,
+            placement: placement
+        });
+    }
+}();