@xenknight/framework7 0.0.2

package/components/messages/messages.less

@@ -0,0 +1,218 @@
+/* === Messages === */
+@import './messages-vars.less';
+.messages-content,
+.messages {
+  background: var(--f7-messages-content-bg-color);
+}
+.messages {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  position: relative;
+  z-index: 1;
+}
+.messages-title,
+.message {
+  margin-top: var(--f7-message-margin);
+  &:last-child {
+    margin-bottom: var(--f7-message-margin);
+  }
+}
+.messages-title {
+  text-align: center;
+  width: 100%;
+  line-height: 1;
+  color: var(--f7-messages-title-text-color);
+  font-size: var(--f7-messages-title-font-size);
+  font-weight: var(--f7-messages-title-font-weight);
+}
+.message {
+  max-width: 70%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  z-index: 1;
+  transform: translate3d(0, 0, 0);
+}
+.message-avatar {
+  border-radius: var(--f7-message-avatar-border-radius);
+  position: relative;
+  background-size: cover;
+  align-self: flex-end;
+  flex-shrink: 0;
+  width: var(--f7-message-avatar-size);
+  height: var(--f7-message-avatar-size);
+}
+.message-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.message-header,
+.message-footer,
+.message-name {
+  line-height: 1;
+}
+.message-header {
+  color: var(--f7-message-header-text-color);
+  font-size: var(--f7-message-header-font-size);
+}
+.message-footer {
+  color: var(--f7-message-footer-text-color);
+  font-size: var(--f7-message-footer-font-size);
+  margin-bottom: -1em;
+}
+.message-name {
+  color: var(--f7-message-name-text-color);
+  font-size: var(--f7-message-name-font-size);
+  font-weight: var(--f7-message-name-font-weight);
+}
+.message-bubble {
+  box-sizing: border-box;
+  word-break: break-word;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  line-height: var(--f7-message-bubble-line-height);
+  font-size: var(--f7-message-bubble-font-size);
+  border-radius: var(--f7-message-bubble-border-radius);
+  padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
+  min-height: var(--f7-message-bubble-min-height);
+}
+.message-image {
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+  }
+}
+.message-text-header,
+.message-text-footer {
+  line-height: 1;
+}
+.message-text-header {
+  color: var(--f7-message-text-header-text-color);
+  opacity: var(--f7-message-text-header-opacity);
+  font-size: var(--f7-message-text-header-font-size);
+}
+.message-text-footer {
+  color: var(--f7-message-text-footer-text-color);
+  opacity: var(--f7-message-text-footer-opacity);
+  font-size: var(--f7-message-text-footer-font-size);
+}
+.message-text {
+  text-align: left;
+}
+.message-sent {
+  text-align: right;
+  .ltr({
+    flex-direction: row-reverse;
+    align-self: flex-end;
+  });
+  .rtl({
+    flex-direction: row;
+    align-self: flex-start;
+  });
+  .message-bubble {
+    color: var(--f7-message-sent-text-color);
+    background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
+  }
+  .message-content {
+    .ltr({
+      align-items: flex-end;
+    });
+    .rtl({
+      align-items: flex-start;
+    });
+  }
+}
+// Rules
+.message-received {
+  .ltr({
+    flex-direction: row;
+  });
+  .rtl({
+    flex-direction: row-reverse;
+    align-self: flex-end;
+  });
+  .message-bubble {
+    color: var(--f7-message-received-text-color);
+    background: var(--f7-message-received-bg-color);
+  }
+  .message-content {
+    .ltr({
+      align-items: flex-start;
+    });
+    .rtl({
+      align-items: flex-end;
+    });
+  }
+}
+.message:not(.message-last) {
+  .message-avatar {
+    opacity: 0;
+  }
+}
+.message:not(.message-first) {
+  .message-name {
+    display: none;
+  }
+}
+.message.message-same-name {
+  .message-name {
+    display: none;
+  }
+}
+.message.message-same-header {
+  .message-header {
+    display: none;
+  }
+}
+.message.message-same-footer {
+  .message-footer {
+    display: none;
+  }
+}
+.message-appear-from-bottom {
+  animation: message-appear-from-bottom 300ms;
+}
+.message-appear-from-top {
+  animation: message-appear-from-top 300ms;
+}
+.message-typing-indicator {
+  display: inline-block;
+  font-size: 0;
+  vertical-align: middle;
+  > div {
+    display: inline-block;
+    position: relative;
+    background: var(--f7-message-typing-indicator-bg-color);
+    opacity: var(--f7-message-typing-indicator-opacity);
+    vertical-align: middle;
+    border-radius: 50%;
+  }
+}
+@keyframes message-appear-from-bottom {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes message-appear-from-top {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+.if-ios-theme({
+  @import './messages-ios.less';
+});
+.if-md-theme({
+  @import './messages-md.less';
+});

package/components/modal/custom-modal-class.js

@@ -0,0 +1,66 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Modal from './modal-class.js';
+class CustomModal extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      backdrop: true,
+      closeByBackdropClick: true,
+      on: {}
+    }, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const customModal = this;
+    customModal.params = extendedParams;
+
+    // Find Element
+    let $el;
+    if (!customModal.params.el) {
+      $el = $(customModal.params.content);
+    } else {
+      $el = $(customModal.params.el);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el.length === 0) {
+      return customModal.destroy();
+    }
+    let $backdropEl;
+    if (customModal.params.backdrop) {
+      $backdropEl = app.$el.children('.custom-modal-backdrop');
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="custom-modal-backdrop"></div>');
+        app.$el.append($backdropEl);
+      }
+    }
+    function handleClick(e) {
+      if (!customModal || customModal.destroyed) return;
+      if ($backdropEl && e.target === $backdropEl[0]) {
+        customModal.close();
+      }
+    }
+    customModal.on('customModalOpened', () => {
+      if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
+        app.on('click', handleClick);
+      }
+    });
+    customModal.on('customModalClose', () => {
+      if (customModal.params.closeByBackdropClick && customModal.params.backdrop) {
+        app.off('click', handleClick);
+      }
+    });
+    extend(customModal, {
+      app,
+      $el,
+      el: $el[0],
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      type: 'customModal'
+    });
+    $el[0].f7Modal = customModal;
+    return customModal;
+  }
+}
+export default CustomModal;

package/components/modal/modal-class.js

@@ -0,0 +1,224 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+const openedModals = [];
+const dialogsQueue = [];
+function clearDialogsQueue() {
+  if (dialogsQueue.length === 0) return;
+  const dialog = dialogsQueue.shift();
+  dialog.open();
+}
+class Modal extends Framework7Class {
+  constructor(app, params) {
+    super(params, [app]);
+    const modal = this;
+    const defaults = {};
+
+    // Extend defaults with modules params
+    modal.useModulesParams(defaults);
+    modal.params = extend(defaults, params);
+    modal.opened = false;
+    let $containerEl = modal.params.containerEl ? $(modal.params.containerEl).eq(0) : app.$el;
+    if (!$containerEl.length) $containerEl = app.$el;
+    modal.$containerEl = $containerEl;
+    modal.containerEl = $containerEl[0];
+
+    // Install Modules
+    modal.useModules();
+    return this;
+  }
+  onOpen() {
+    const modal = this;
+    modal.opened = true;
+    openedModals.push(modal);
+    $('html').addClass(`with-modal-${modal.type.toLowerCase()}`);
+    modal.$el.trigger(`modal:open ${modal.type.toLowerCase()}:open`);
+    modal.emit(`local::open modalOpen ${modal.type}Open`, modal);
+  }
+  onOpened() {
+    const modal = this;
+    modal.$el.trigger(`modal:opened ${modal.type.toLowerCase()}:opened`);
+    modal.emit(`local::opened modalOpened ${modal.type}Opened`, modal);
+  }
+  onClose() {
+    const modal = this;
+    modal.opened = false;
+    if (!modal.type || !modal.$el) return;
+    openedModals.splice(openedModals.indexOf(modal), 1);
+    $('html').removeClass(`with-modal-${modal.type.toLowerCase()}`);
+    modal.$el.trigger(`modal:close ${modal.type.toLowerCase()}:close`);
+    modal.emit(`local::close modalClose ${modal.type}Close`, modal);
+  }
+  onClosed() {
+    const modal = this;
+    if (!modal.type || !modal.$el) return;
+    modal.$el.removeClass('modal-out');
+    modal.$el.hide();
+    if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
+      modal.$backdropEl.remove();
+    }
+    modal.$el.trigger(`modal:closed ${modal.type.toLowerCase()}:closed`);
+    modal.emit(`local::closed modalClosed ${modal.type}Closed`, modal);
+  }
+  open(animateModal, force) {
+    const modal = this;
+    const document = getDocument();
+    const app = modal.app;
+    const $el = modal.$el;
+    const $backdropEl = modal.$backdropEl;
+    const type = modal.type;
+    let animate = true;
+    if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
+      animate = modal.params.animate;
+    }
+    if (!$el || $el.hasClass('modal-in')) {
+      if (animateModal === false && $el[0] && type !== 'dialog') {
+        $el[0].style.display = 'block';
+      }
+      if (!force) return modal;
+    }
+    if (type === 'dialog' && app.params.modal.queueDialogs) {
+      let pushToQueue;
+      if ($('.dialog.modal-in').length > 0) {
+        pushToQueue = true;
+      } else if (openedModals.length > 0) {
+        openedModals.forEach(openedModal => {
+          if (openedModal.type === 'dialog') pushToQueue = true;
+        });
+      }
+      if (pushToQueue) {
+        dialogsQueue.push(modal);
+        return modal;
+      }
+    }
+    const $modalParentEl = $el.parent();
+    const wasInDom = $el.parents(document).length > 0;
+    if (!$modalParentEl.is(modal.$containerEl)) {
+      modal.$containerEl.append($el);
+      modal.once(`${type}Closed`, () => {
+        if (wasInDom) {
+          $modalParentEl.append($el);
+        } else {
+          $el.remove();
+        }
+      });
+    }
+    // Show Modal
+    $el.show();
+    if (modal.params.backdrop && (modal.params.backdropUnique || modal.forceBackdropUnique) && modal.$backdropEl) {
+      modal.$backdropEl.insertBefore($el);
+    }
+
+    /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+    modal._clientLeft = $el[0].clientLeft;
+
+    // Modal
+    function transitionEnd() {
+      if ($el.hasClass('modal-out')) {
+        modal.onClosed();
+      } else if ($el.hasClass('modal-in')) {
+        modal.onOpened();
+      }
+    }
+    if (animate) {
+      if ($backdropEl) {
+        $backdropEl.removeClass('not-animated');
+        $backdropEl.addClass('backdrop-in');
+      }
+      $el.animationEnd(() => {
+        transitionEnd();
+      });
+      $el.transitionEnd(() => {
+        transitionEnd();
+      });
+      $el.removeClass('modal-out not-animated').addClass('modal-in');
+      modal.onOpen();
+    } else {
+      if ($backdropEl) {
+        $backdropEl.addClass('backdrop-in not-animated');
+      }
+      $el.removeClass('modal-out').addClass('modal-in not-animated');
+      modal.onOpen();
+      modal.onOpened();
+    }
+    return modal;
+  }
+  close(animateModal) {
+    const modal = this;
+    const $el = modal.$el;
+    const $backdropEl = modal.$backdropEl;
+    let animate = true;
+    if (typeof animateModal !== 'undefined') animate = animateModal;else if (typeof modal.params.animate !== 'undefined') {
+      animate = modal.params.animate;
+    }
+    if (!$el || !$el.hasClass('modal-in')) {
+      if (dialogsQueue.indexOf(modal) >= 0) {
+        dialogsQueue.splice(dialogsQueue.indexOf(modal), 1);
+      }
+      return modal;
+    }
+
+    // backdrop
+    if ($backdropEl) {
+      let needToHideBackdrop = true;
+      if (modal.type === 'popup') {
+        modal.$el.prevAll('.popup.modal-in').add(modal.$el.nextAll('.popup.modal-in')).each(popupEl => {
+          const popupInstance = popupEl.f7Modal;
+          if (!popupInstance) return;
+          if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === modal.backdropEl) {
+            needToHideBackdrop = false;
+          }
+        });
+      }
+      if (needToHideBackdrop) {
+        $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
+        $backdropEl.removeClass('backdrop-in');
+      }
+    }
+
+    // Modal
+    $el[animate ? 'removeClass' : 'addClass']('not-animated');
+    function transitionEnd() {
+      if ($el.hasClass('modal-out')) {
+        modal.onClosed();
+      } else if ($el.hasClass('modal-in')) {
+        modal.onOpened();
+      }
+    }
+    if (animate) {
+      $el.animationEnd(() => {
+        transitionEnd();
+      });
+      $el.transitionEnd(() => {
+        transitionEnd();
+      });
+      $el.removeClass('modal-in').addClass('modal-out');
+      // Emit close
+      modal.onClose();
+    } else {
+      $el.addClass('not-animated').removeClass('modal-in').addClass('modal-out');
+      // Emit close
+      modal.onClose();
+      modal.onClosed();
+    }
+    if (modal.type === 'dialog') {
+      clearDialogsQueue();
+    }
+    return modal;
+  }
+  destroy() {
+    const modal = this;
+    if (modal.destroyed) return;
+    modal.emit(`local::beforeDestroy modalBeforeDestroy ${modal.type}BeforeDestroy`, modal);
+    if (modal.$el) {
+      modal.$el.trigger(`modal:beforedestroy ${modal.type.toLowerCase()}:beforedestroy`);
+      if (modal.$el.length && modal.$el[0].f7Modal) {
+        delete modal.$el[0].f7Modal;
+      }
+    }
+    deleteProps(modal);
+    modal.destroyed = true;
+  }
+}
+export default Modal;

package/components/modal/modal.d.ts

@@ -0,0 +1,82 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Modal {
+  interface Modal extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Modal HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with modal HTML element */
+    $el: Dom7Array; // Dom7Array
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array; // Dom7Array
+    /** Modal parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether modal is opened or not */
+    opened: boolean;
+
+    /** Open modal */
+    open(animate: boolean): Modal;
+    /** Close modal. */
+    close(animate: boolean): Modal;
+    /** Destroy modal */
+    destroy(): void;
+  }
+  interface Parameters {
+    /** Modal element. Can be useful if you already have Modal element in your HTML and want to create new instance using this element. */
+    el: HTMLElement | CSSSelector;
+    /** Enables Modal backdrop (dark semi transparent layer behind). (default true) */
+    backdrop?: boolean;
+    /** When enabled, modal will be closed on backdrop click. (default true) */
+    closeByBackdropClick?: boolean;
+    /** Whether the Modal should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods. (default true) */
+    animate?: boolean;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Events {
+    /** Event will be triggered when Custom Modal starts its opening animation. As an argument event handler receives modal instance */
+    open: (modal: Modal) => void;
+    /** Event will be triggered after Custom Modal completes its opening animation. As an argument event handler receives modal instance */
+    opened: (modal: Modal) => void;
+    /** Event will be triggered when Custom Modal starts its closing animation. As an argument event handler receives modal instance */
+    close: (modal: Modal) => void;
+    /** Event will be triggered after Custom Modal completes its closing animation. As an argument event handler receives modal instance */
+    closed: (modal: Modal) => void;
+    /** Event will be triggered right before Custom Modal instance will be destroyed. As an argument event handler receives modal instance */
+    beforeDestroy: (modal: Modal) => void;
+  }
+
+  interface AppMethods {
+    customModal: {
+      /** Creates Custom modal */
+      create(parameters: Parameters): Modal;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {
+    /** Event will be triggered when Modal starts its opening animation. As an argument event handler receives modal instance */
+    customModalOpen: (modal: Modal) => void;
+    /** Event will be triggered after Modal completes its opening animation. As an argument event handler receives modal instance */
+    customModalOpened: (modal: Modal) => void;
+    /** Event will be triggered when Modal starts its closing animation. As an argument event handler receives modal instance */
+    customModalClose: (modal: Modal) => void;
+    /** Event will be triggered after Modal completes its closing animation. As an argument event handler receives modal instance */
+    customModalClosed: (modal: Modal) => void;
+    /** Event will be triggered right before Modal instance will be destroyed. As an argument event handler receives modal instance */
+    customModalBeforeDestroy: (modal: Modal) => void;
+  }
+}
+
+declare const ModalComponent: Framework7Plugin;
+
+export default ModalComponent;

package/components/modal/modal.js

@@ -0,0 +1,22 @@
+import Modal from './modal-class.js';
+import CustomModal from './custom-modal-class.js';
+export default {
+  name: 'modal',
+  static: {
+    Modal,
+    CustomModal
+  },
+  create() {
+    const app = this;
+    app.customModal = {
+      create(params) {
+        return new CustomModal(app, params);
+      }
+    };
+  },
+  params: {
+    modal: {
+      queueDialogs: true
+    }
+  }
+};

package/components/modal/modal.less

@@ -0,0 +1,14 @@
+.custom-modal-backdrop {
+  z-index: 10500;
+}
+
+.custom-modal-backdrop,
+.actions-backdrop,
+.dialog-backdrop,
+.popover-backdrop,
+.popup-backdrop,
+.preloader-backdrop,
+.sheet-backdrop,
+.fab-backdrop {
+  .modal-backdrop();
+}