@xenknight/framework7 0.0.2

package/components/messagebar/messagebar.d.ts

@@ -0,0 +1,165 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Messagebar {
+  interface Messagebar extends Framework7EventsClass<Events> {
+    /** Messagebar HTML element. */
+    el: HTMLElement;
+    /** Dom7 element with messagebar HTML element. */
+    $el: Dom7Array;
+    /** Messagebar textarea HTML element */
+    textareaEl: HTMLTextAreaElement;
+    /** Dom7 element with messagebar textarea HTML element */
+    $textareaEl: Dom7Array;
+    /** Object with passed initialization parameters */
+    params: Parameters;
+    /** Array with messagebar attachments */
+    attachments: string[];
+
+    /** Get messagebar textarea value */
+    getValue(): string;
+    /** Set messagebar textarea value/text */
+    setValue(value: string): Messagebar;
+    /** Clear textarea and update/reset its size */
+    clear(): Messagebar;
+    /** Focus messagebar textarea */
+    focus(): Messagebar;
+    /** Remove focus from messagebar textarea */
+    blur(): Messagebar;
+    /** Set/change messagebar placeholder text */
+    setPlaceholder(placeholder: string): Messagebar;
+    /** Force Messagebar to resize messages page depending on messagebar height/size */
+    resizePage(): Messagebar;
+    /** Dynamically create attachments block HTML element */
+    attachmentsCreate(): Messagebar;
+    /** Show attachments block */
+    attachmentsShow(): Messagebar;
+    /** Hide attachments block */
+    attachmentsHide(): Messagebar;
+    /** Toggle attachments block */
+    attachmentsToggle(): Messagebar;
+    /** Render attachments block based on attachments data */
+    renderAttachments(): Messagebar;
+    /** Dynamically create messagebar sheet block HTML element */
+    sheetCreate(): Messagebar;
+    /** Show messagebar sheet */
+    sheetShow(): Messagebar;
+    /** Hide messagebar sheet */
+    sheetHide(): Messagebar;
+    /** Toggle messagebar sheet */
+    sheetToggle(): Messagebar;
+    /** Destroy messagebar instance */
+    destroy(): void;
+  }
+
+  interface Parameters {
+    /** CSS selector or HTML element of messagebar element (div class="messagebar"). */
+    el: HTMLElement | CSSSelector;
+    /** CSS selector or HTML element of messagebar textarea element. By default (if not passed) will try to look for textarea inside of messagebar. */
+    textareaEl?: HTMLElement | CSSSelector;
+    /** Max height of textarea when it resized depending on amount of its text. (default null) */
+    maxHeight?: number;
+    /** Array with attachments. For example ['path/to/image1.png', 'path/to/image2.png']. (default []) */
+    attachments?: string[];
+    /** Disable if you don't want to resize messages page when messagebar textarea size changed. (default true) */
+    resizePage?: boolean;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+
+    /** Function to render attachments block. Must return full attachments HTML string. */
+    renderAttachments?: (attachments: string[]) => string;
+    /** Function to render single attachment. Must return full attachment HTML string. */
+    renderAttachment?: (attachment: string) => string;
+  }
+
+  interface Events {
+    /** Event will be triggered after messagebar textarea value changed. As an argument event handler receives messagebar instance */
+    change(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar textarea gets focus. As an argument event handler receives messagebar instance */
+    focus(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar textarea loses focus. As an argument event handler receives messagebar instance */
+    blur(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar resizes messages page. As an argument event handler receives messagebar instance */
+    resizePage(messagebar: Messagebar): void;
+    /** Event will be triggered after click on messagebar attachment delete button. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number */
+    attachmentDelete(
+      messagebar: Messagebar,
+      attachmentEl: HTMLElement,
+      attachmentIndex: number,
+    ): void;
+    /** Event will be triggered on messagebar attachment click. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number */
+    attachmentClick(
+      messagebar: Messagebar,
+      attachmentEl: HTMLElement,
+      attachmentIndex: number,
+    ): void;
+    /** Event will be triggered right before Messagebar instance will be destroyed */
+    beforeDestroy(messagebar: Messagebar): void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered after messagebar textarea value changed */
+    'messagebar:change': void;
+    /** Event will be triggered when messagebar textarea gets focus */
+    'messagebar:focus': void;
+    /** Event will be triggered when messagebar textarea loses focus */
+    'messagebar:blur': void;
+    /** Event will be triggered when messagebar resizes messages page */
+    'messagebar:resizepage': void;
+    /** Event will be triggered after click on messagebar attachment delete button */
+    'messagebar:attachmentdelete': void;
+    /** Event will be triggered on messagebar attachment click */
+    'messagebar:attachmentclick': void;
+    /** Event will be triggered right before Messagebar instance will be destroyed */
+    'messagebar:beforedestroy': void;
+  }
+  interface AppMethods {
+    messagebar: {
+      /** create Messagebar instance */
+      create(parameters: Parameters): Messagebar;
+
+      /** destroy Messagebar instance */
+      destroy(el: HTMLElement | CSSSelector | Messagebar): void;
+
+      /** get Messagebar instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Messagebar;
+    };
+  }
+  interface AppParams {
+    messagebar?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered after messagebar textarea value changed. As an argument event handler receives messagebar instance */
+    messagebarChange(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar textarea gets focus. As an argument event handler receives messagebar instance */
+    messagebarFocus(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar textarea loses focus. As an argument event handler receives messagebar instance */
+    messagebarBlur(messagebar: Messagebar): void;
+    /** Event will be triggered when messagebar resizes messages page. As an argument event handler receives messagebar instance */
+    messagebarResizePage(messagebar: Messagebar): void;
+    /** Event will be triggered after click on messagebar attachment delete button. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number */
+    messagebarAttachmentDelete(
+      messagebar: Messagebar,
+      attachmentEl: HTMLElement,
+      attachmentIndex: number,
+    ): void;
+    /** Event will be triggered on messagebar attachment click. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number */
+    messagebarAttachmentClick(
+      messagebar: Messagebar,
+      attachmentEl: HTMLElement,
+      attachmentIndex: number,
+    ): void;
+    /** Event will be triggered right before Messagebar instance will be destroyed */
+    messagebarBeforeDestroy(messagebar: Messagebar): void;
+  }
+}
+
+declare const MessagebarComponent: Framework7Plugin;
+
+export default MessagebarComponent;

package/components/messagebar/messagebar.js

@@ -0,0 +1,66 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Messagebar from './messagebar-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'messagebar',
+  static: {
+    Messagebar
+  },
+  create() {
+    const app = this;
+    app.messagebar = ConstructorMethods({
+      defaultSelector: '.messagebar',
+      constructor: Messagebar,
+      app,
+      domProp: 'f7Messagebar',
+      addMethods: 'clear getValue setValue setPlaceholder resizePage focus blur attachmentsCreate attachmentsShow attachmentsHide attachmentsToggle renderAttachments sheetCreate sheetShow sheetHide sheetToggle'.split(' ')
+    });
+  },
+  on: {
+    tabBeforeRemove(tabEl) {
+      const app = this;
+      $(tabEl).find('.messagebar-init').each(messagebarEl => {
+        app.messagebar.destroy(messagebarEl);
+      });
+    },
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.messagebar-init').each(messagebarEl => {
+        app.messagebar.create(extend({
+          el: messagebarEl
+        }, $(messagebarEl).dataset()));
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.messagebar-init').each(messagebarEl => {
+        app.messagebar.destroy(messagebarEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.messagebar-init').each(messagebarEl => {
+        app.messagebar.create(extend({
+          el: messagebarEl
+        }, $(messagebarEl).dataset()));
+      });
+    }
+  },
+  vnode: {
+    'messagebar-init': {
+      insert(vnode) {
+        const app = this;
+        const messagebarEl = vnode.elm;
+        app.messagebar.create(extend({
+          el: messagebarEl
+        }, $(messagebarEl).dataset()));
+      },
+      destroy(vnode) {
+        const app = this;
+        const messagebarEl = vnode.elm;
+        app.messagebar.destroy(messagebarEl);
+      }
+    }
+  }
+};

package/components/messagebar/messagebar.less

@@ -0,0 +1,162 @@
+/* === Messagebar === */
+@import './messagebar-vars.less';
+
+.messagebar {
+  transform: translate3d(0, 0, 0);
+  background: var(--f7-messagebar-bg-color);
+  height: auto;
+  min-height: var(--f7-messagebar-height);
+  font-size: var(--f7-messagebar-font-size);
+  padding-bottom: var(--f7-safe-area-bottom);
+  bottom: 0;
+  .hairline(top, var(--f7-messagebar-border-color));
+  .ios-translucent-bars(var(--f7-messagebar-bg-color-rgb));
+  &.no-outline {
+    &:before {
+      display: none !important;
+    }
+  }
+  &.toolbar-hidden {
+    &:after {
+      display: none !important;
+    }
+  }
+  .toolbar-inner {
+    top: auto;
+    position: relative;
+    height: auto;
+    bottom: auto;
+    padding-left: calc(
+      var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) +
+        var(--f7-safe-area-left)
+    );
+    padding-right: calc(
+      var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) +
+        var(--f7-safe-area-right)
+    );
+    .rtl({
+      flex-direction: row-reverse;
+    });
+  }
+  &.messagebar-sheet-visible > .toolbar-inner {
+    bottom: 0;
+  }
+  .messagebar-area {
+    width: 100%;
+    flex-shrink: 1;
+    overflow: hidden;
+    position: relative;
+  }
+  textarea {
+    width: 100%;
+    flex-shrink: 1;
+    background-color: var(--f7-messagebar-textarea-bg-color);
+    border-radius: var(--f7-messagebar-textarea-border-radius);
+    padding: var(--f7-messagebar-textarea-padding);
+    height: var(--f7-messagebar-textarea-height);
+    color: var(--f7-messagebar-textarea-text-color);
+    font-size: var(--f7-messagebar-textarea-font-size);
+    line-height: var(--f7-messagebar-textarea-line-height);
+    border: var(--f7-messagebar-textarea-border);
+    &::placeholder {
+      color: var(--f7-messagebar-textarea-placeholder-color);
+    }
+  }
+  a.link {
+    align-self: flex-end;
+    flex-shrink: 0;
+    color: var(--f7-messagebar-link-color, var(--f7-theme-color));
+  }
+}
+.messagebar-attachments {
+  width: 100%;
+  .scrollable();
+  font-size: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  position: relative;
+}
+.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
+  display: none;
+}
+.messagebar-attachment {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  height: var(--f7-messagebar-attachment-height);
+  position: relative;
+  border-radius: var(--f7-messagebar-attachment-border-radius);
+  @media (orientation: landscape) {
+    height: var(--f7-messagebar-attachment-landscape-height);
+  }
+  img {
+    display: block;
+    width: auto;
+    height: 100%;
+    border-radius: var(--f7-messagebar-attachment-border-radius);
+  }
+}
+.messagebar-sheet {
+  .scrollable();
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-content: flex-start;
+  height: var(--f7-messagebar-sheet-height);
+  background-color: var(--f7-messagebar-sheet-bg-color);
+  border-top: 1px solid var(--f7-messagebar-sheet-border-color);
+  padding-left: var(--f7-safe-area-left);
+  padding-right: var(--f7-safe-area-right);
+  @media (orientation: landscape) {
+    height: var(--f7-messagebar-sheet-landscape-height);
+  }
+}
+
+.messagebar-sheet-image {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: inherit;
+    transition-duration: 200ms;
+  }
+}
+.messagebar-attachment-delete {
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  box-sizing: border-box;
+  cursor: pointer;
+  &:after,
+  &:before {
+    position: absolute;
+    content: '';
+    left: 50%;
+    top: 50%;
+  }
+  &:after {
+    transform: rotate(45deg);
+  }
+  &:before {
+    transform: rotate(-45deg);
+  }
+}
+.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
+  display: none;
+}
+.messagebar ~ * {
+  --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
+}
+.if-ios-theme({
+  @import './messagebar-ios.less';
+});
+.if-md-theme({
+  @import './messagebar-md.less';
+});