internalize modal-box

https://coveord.atlassian.net/browse/JSUI-3531

gulpTasks/compile.js

@@ -27,45 +27,28 @@ const analyze = gulp.series(
 
 function pipeModalBoxFiles() {
   return event_stream
-    .merge(
-      gulp
-        .src('./node_modules/modal-box/bin/modalBox.css')
-        .pipe(rename('_ModalBox.scss'))
-        .pipe(gulp.dest('./bin/sass/'))
-    )
+    .merge(gulp.src('./modal-box/bin/modalBox.css').pipe(rename('_ModalBox.scss')).pipe(gulp.dest('./bin/sass/')))
     .pipe(event_stream.wait());
 }
 
 function deprecatedDependencies() {
-  return gulp
-    .src('./src/Dependencies.js')
-    .pipe(rename('CoveoJsSearch.Dependencies.js'))
-    .pipe(gulp.dest('./bin/js/'));
+  return gulp.src('./src/Dependencies.js').pipe(rename('CoveoJsSearch.Dependencies.js')).pipe(gulp.dest('./bin/js/'));
 }
 
 // We duplicate css file to help on upgrade (deployments using the "NewDesign" file)
 // This should help mitigate 404 on those files, and hopefully possible maintenance case(s).
 function duplicateCssFile() {
-  return gulp
-    .src('./bin/css/CoveoFullSearch.css')
-    .pipe(rename('CoveoFullSearchNewDesign.css'))
-    .pipe(gulp.dest('./bin/css'));
+  return gulp.src('./bin/css/CoveoFullSearch.css').pipe(rename('CoveoFullSearchNewDesign.css')).pipe(gulp.dest('./bin/css'));
 }
 
 function duplicateCssMapFile() {
-  return gulp
-    .src('./bin/css/CoveoFullSearch.css.map')
-    .pipe(rename('CoveulFullSearchNewDesign.css.map'))
-    .pipe(gulp.dest('./bin/css'));
+  return gulp.src('./bin/css/CoveoFullSearch.css.map').pipe(rename('CoveulFullSearchNewDesign.css.map')).pipe(gulp.dest('./bin/css'));
 }
 
 // This cause an issue when dep are bundled together : the lack of EOL makes it so
 // that part of the bundled code can be commented out or not valid
 function addEolDependencies() {
-  return gulp
-    .src('./node_modules/underscore/underscore-min.js')
-    .pipe(eol())
-    .pipe(gulp.dest('./node_modules/underscore/'));
+  return gulp.src('./node_modules/underscore/underscore-min.js').pipe(eol()).pipe(gulp.dest('./node_modules/underscore/'));
 }
 
 module.exports = { compile, compileTSOnly, minimize, analyze };

modal-box/_bin/ModalBox.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The button to use when creating a ModalBox
+ */
+export declare enum BUTTON {
+  OK = 1,
+  APPLY = 2,
+  YES = 4,
+  NO = 8,
+  CANCEL = 16
+}
+/**
+ * Content of a ModalBox
+ */
+export interface ModalBox {
+  /**
+   * The modalBox container itself
+   */
+  modalBox: HTMLElement;
+  /**
+   * The overlay added on the body, which can be clicked to close the modalbox
+   */
+  overlay: HTMLElement;
+  /**
+   * The wrapper of the content
+   */
+  wrapper: HTMLElement;
+  /**
+   * The availables buttons (Ok, Apply, Cancel, etc.)
+   */
+  buttons: HTMLElement;
+  /**
+   * The content itself
+   */
+  content: HTMLElement;
+  /**
+   * The function that can be called to close the modal box. Note that this is also called by validation button such as APPLY, YES, etc.<br/>
+   * Force close will close all open modalbox and skip the validation (if one was provided)
+   * @param button
+   * @param forceClose
+   */
+  close: (button?: BUTTON, forceClose?: boolean) => boolean;
+}
+/**
+ * Possible options when creating a ModalBox
+ */
+export interface Options {
+  /**
+   * Specify if you wish to open the modal box full screen. Default is `false`. If false, the modal box will fit the size of the content.
+   */
+  fullscreen?: boolean;
+  /**
+   * Specify that you wish the modal box to close when the user click on the title. Default is `false`.
+   */
+  titleClose?: boolean;
+  /**
+   * Specify if you wish to close the modal box when the overlay (black background) is clicked. Default is `false`.
+   */
+  overlayClose?: boolean;
+  /**
+   * Specify that you wish to add a prefix to the class name of the modal box container, to not clash with existing css in the page
+   */
+  className?: string;
+  /**
+   * The button you wish to create (Using {@link BUTTON} enum
+   */
+  buttons?: number;
+  /**
+   * Specify a validation function, which receives the button that was pressed.<br/>
+   * If the validation function return true, the modal box closes, otherwise it stays open
+   * @param button
+   */
+  validation?: (button: BUTTON) => boolean;
+  /**
+   * Specify the title of the modal box
+   */
+  title?: string | HTMLElement;
+  /**
+   * Specify the content that you wish to put inside the modal box
+   */
+  body?: HTMLElement;
+  /**
+   * The size for the modal box
+   */
+  sizeMod: 'small' | 'normal' | 'big';
+}
+/**
+ * Open a modal box with the given content
+ * @param content The content to display, as an HTMLElement
+ * @param options The {@link Options} to use for this modal box
+ * @returns {{modalBox: (HTMLDivElement|HTMLElement), overlay: (HTMLDivElement|HTMLElement), wrapper: (HTMLDivElement|HTMLElement), buttons: HTMLElement, content: HTMLElement, close: (function(BUTTON=, boolean=): (boolean|boolean))}}
+ */
+export declare function open(content: HTMLElement, options?: Options): ModalBox;
+/**
+ * Close all open modal box instance
+ * @param forceClose Will skip validation
+ */
+export declare function close(forceClose?: boolean): void;

modal-box/_bin/ModalBox.js

@@ -0,0 +1,194 @@
+/**
+ * The button to use when creating a ModalBox
+ */
+export var BUTTON;
+(function (BUTTON) {
+  BUTTON[(BUTTON['OK'] = 1)] = 'OK';
+  BUTTON[(BUTTON['APPLY'] = 2)] = 'APPLY';
+  BUTTON[(BUTTON['YES'] = 4)] = 'YES';
+  BUTTON[(BUTTON['NO'] = 8)] = 'NO';
+  BUTTON[(BUTTON['CANCEL'] = 16)] = 'CANCEL';
+})(BUTTON || (BUTTON = {}));
+var closeFunctions = [];
+/**
+ * Open a modal box with the given content
+ * @param content The content to display, as an HTMLElement
+ * @param options The {@link Options} to use for this modal box
+ * @returns {{modalBox: (HTMLDivElement|HTMLElement), overlay: (HTMLDivElement|HTMLElement), wrapper: (HTMLDivElement|HTMLElement), buttons: HTMLElement, content: HTMLElement, close: (function(BUTTON=, boolean=): (boolean|boolean))}}
+ */
+export function open(content, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var body = options.body || document.body;
+  if (body.className) {
+    if (body.className.indexOf('coveo-modal-opened') == -1) {
+      body.className += ' coveo-modal-opened';
+    }
+  } else {
+    body.className = 'coveo-modal-opened';
+  }
+  var modalBox = document.createElement('div');
+  modalBox.className = 'coveo-modal-container coveo-opened ';
+  if (options.sizeMod == 'small') {
+    modalBox.className += ' coveo-mod-small';
+  }
+  if (options.sizeMod == 'big') {
+    modalBox.className += ' coveo-mod-big';
+  }
+  setTimeout(function () {
+    modalBox.className += ' coveo-mod-fade-in-scale';
+  }, 0);
+  body.appendChild(modalBox);
+  if (options.fullscreen === true) {
+    modalBox.className += ' coveo-fullscreen';
+  }
+  var overlay = document.createElement('div');
+  overlay.className = 'coveo-modal-backdrop coveo-modal-transparent';
+  body.appendChild(overlay);
+  setTimeout(function () {
+    removeClassName(overlay, 'coveo-modal-transparent');
+  }, 0);
+  var modalBoxContent = document.createElement('div');
+  modalBoxContent.className = 'coveo-modal-content';
+  modalBox.appendChild(modalBoxContent);
+  var close = function (button, forceClose) {
+    if (button === void 0) {
+      button = 0;
+    }
+    if (forceClose === void 0) {
+      forceClose = false;
+    }
+    var valid = options.validation == null || options.validation(button);
+    if (valid !== false || forceClose) {
+      modalBox.parentElement && modalBox.parentElement.removeChild(modalBox);
+      var index = closeFunctions.indexOf(close);
+      if (index >= 0) {
+        closeFunctions.splice(index, 1);
+      }
+      if (body.querySelector('.coveo-modal-container') == null) {
+        removeClassName(body, 'coveo-modal-opened');
+      }
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+      return true;
+    }
+    return false;
+  };
+  var _a = buildHeader(options, close),
+    header = _a.header,
+    closeIcon = _a.closeIcon;
+  modalBoxContent.appendChild(header);
+  modalBoxContent.appendChild(buildBody(options, content));
+  closeIcon.addEventListener('click', function () {
+    document.removeEventListener('keyup', closeOnEscape);
+    close();
+  });
+  overlay.addEventListener('click', function () {
+    document.removeEventListener('keyup', closeOnEscape);
+    close();
+  });
+  var closeOnEscape = function (e) {
+    if (e.keyCode == 27 && body.className.indexOf('coveo-modal-opened') != -1) {
+      close();
+      document.removeEventListener('keyup', closeOnEscape);
+    }
+  };
+  document.addEventListener('keyup', closeOnEscape);
+  var buttonsContainer;
+  var buildButton = function (text, type) {
+    var btn = document.createElement('button');
+    btn.className = 'coveo-btn';
+    btn.textContent = text;
+    btn.addEventListener('click', function () {
+      return close(type);
+    });
+    buttonsContainer.appendChild(btn);
+  };
+  if (options.buttons != null) {
+    buttonsContainer = document.createElement('footer');
+    buttonsContainer.className = 'coveo-modal-footer';
+    modalBoxContent.appendChild(buttonsContainer);
+    if (options.buttons & BUTTON.OK) {
+      buildButton('Ok', BUTTON.OK);
+    }
+    if (options.buttons & BUTTON.APPLY) {
+      buildButton('Apply', BUTTON.APPLY);
+    }
+    if (options.buttons & BUTTON.YES) {
+      buildButton('Yes', BUTTON.YES);
+    }
+    if (options.buttons & BUTTON.NO) {
+      buildButton('No', BUTTON.NO);
+    }
+    if (options.buttons & BUTTON.CANCEL) {
+      buildButton('Cancel', BUTTON.CANCEL);
+    }
+  }
+  closeFunctions.push(close);
+  if (options.className != null) {
+    modalBox.className += ' ' + options.className;
+  }
+  return {
+    modalBox: modalBox,
+    wrapper: modalBoxContent,
+    buttons: buttonsContainer,
+    content: modalBoxContent,
+    overlay: overlay,
+    close: close
+  };
+}
+/**
+ * Close all open modal box instance
+ * @param forceClose Will skip validation
+ */
+export function close(forceClose) {
+  if (forceClose === void 0) {
+    forceClose = false;
+  }
+  var i = 0;
+  while (closeFunctions.length > i) {
+    var closed = closeFunctions[i](0, forceClose);
+    if (!closed) {
+      i++;
+    }
+  }
+}
+function buildHeader(options, close) {
+  var header = document.createElement('header');
+  header.className = 'coveo-modal-header';
+  if (options.title != null) {
+    var title = document.createElement('h1');
+    header.appendChild(title);
+    if (options.title instanceof HTMLElement) {
+      title.appendChild(options.title);
+    } else {
+      title.innerHTML = options.title;
+    }
+    if (options.titleClose === true) {
+      title.addEventListener('click', function () {
+        return close();
+      });
+    }
+  }
+  var closeIcon = document.createElement('span');
+  closeIcon.className = 'coveo-small-close';
+  header.appendChild(closeIcon);
+  var svgCloseIcon =
+    '<svg viewBox="0 0 22 22" class="coveo-icon coveo-fill-pure-white">\n                    <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">\n                        <path d="m9-3.4h2v26.9h-2z"></path>\n                        <path d="m-3.4 9h26.9v2h-26.9z"></path>\n                    </g>\n                </svg>';
+  closeIcon.innerHTML = svgCloseIcon;
+  return {
+    header: header,
+    closeIcon: closeIcon
+  };
+}
+function buildBody(options, content) {
+  var modalBoxBody = document.createElement('div');
+  modalBoxBody.className = 'coveo-modal-body coveo-mod-header-paddding coveo-mod-form-top-bottom-padding';
+  modalBoxBody.appendChild(content);
+  return modalBoxBody;
+}
+function removeClassName(el, className) {
+  el.className = el.className.replace(new RegExp('(^|\\s)' + className + '(\\s|\\b)', 'g'), '$1');
+}