@xenknight/framework7 0.0.2

package/components/messagebar/messagebar-class.js

@@ -0,0 +1,367 @@
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+class Messagebar extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const messagebar = this;
+    const defaults = {
+      top: false,
+      topOffset: 0,
+      bottomOffset: 0,
+      attachments: [],
+      renderAttachments: undefined,
+      renderAttachment: undefined,
+      maxHeight: null,
+      resizePage: true
+    };
+
+    // Extend defaults with modules params
+    messagebar.useModulesParams(defaults);
+    messagebar.params = extend(defaults, params);
+
+    // El
+    const $el = $(messagebar.params.el);
+    if ($el.length === 0) return messagebar;
+    if ($el[0].f7Messagebar) return $el[0].f7Messagebar;
+    $el[0].f7Messagebar = messagebar;
+
+    // Page and PageContent
+    const $pageEl = $el.parents('.page').eq(0);
+    const $pageContentEl = $pageEl.find('.page-content').eq(0);
+
+    // Area
+    const $areaEl = $el.find('.messagebar-area');
+
+    // Textarea
+    let $textareaEl;
+    if (messagebar.params.textareaEl) {
+      $textareaEl = $(messagebar.params.textareaEl);
+    } else {
+      $textareaEl = $el.find('textarea');
+    }
+
+    // Attachments & Library
+    const $attachmentsEl = $el.find('.messagebar-attachments');
+    const $sheetEl = $el.find('.messagebar-sheet');
+    if (messagebar.params.top) {
+      $el.addClass('messagebar-top');
+    }
+    extend(messagebar, {
+      $el,
+      el: $el[0],
+      $areaEl,
+      areaEl: $areaEl[0],
+      $textareaEl,
+      textareaEl: $textareaEl[0],
+      $attachmentsEl,
+      attachmentsEl: $attachmentsEl[0],
+      attachmentsVisible: $attachmentsEl.hasClass('messagebar-attachments-visible'),
+      $sheetEl,
+      sheetEl: $sheetEl[0],
+      sheetVisible: $sheetEl.hasClass('messagebar-sheet-visible'),
+      $pageEl,
+      pageEl: $pageEl[0],
+      $pageContentEl,
+      pageContentEl: $pageContentEl,
+      top: $el.hasClass('messagebar-top') || messagebar.params.top,
+      attachments: []
+    });
+
+    // Events
+    function onAppResize() {
+      if (messagebar.params.resizePage) {
+        messagebar.resizePage();
+      }
+    }
+    function onSubmit(e) {
+      e.preventDefault();
+    }
+    function onAttachmentClick(e) {
+      const index = $(this).index();
+      if ($(e.target).closest('.messagebar-attachment-delete').length) {
+        $(this).trigger('messagebar:attachmentdelete', index);
+        messagebar.emit('local::attachmentDelete messagebarAttachmentDelete', messagebar, this, index);
+      } else {
+        $(this).trigger('messagebar:attachmentclick', index);
+        messagebar.emit('local::attachmentClick messagebarAttachmentClick', messagebar, this, index);
+      }
+    }
+    function onTextareaChange() {
+      messagebar.checkEmptyState();
+      messagebar.$el.trigger('messagebar:change');
+      messagebar.emit('local::change messagebarChange', messagebar);
+    }
+    function onTextareaFocus() {
+      messagebar.sheetHide();
+      messagebar.$el.addClass('messagebar-focused');
+      messagebar.$el.trigger('messagebar:focus');
+      messagebar.emit('local::focus messagebarFocus', messagebar);
+    }
+    function onTextareaBlur() {
+      messagebar.$el.removeClass('messagebar-focused');
+      messagebar.$el.trigger('messagebar:blur');
+      messagebar.emit('local::blur messagebarBlur', messagebar);
+    }
+    messagebar.attachEvents = function attachEvents() {
+      $el.on('textarea:resize', onAppResize);
+      $el.on('submit', onSubmit);
+      $el.on('click', '.messagebar-attachment', onAttachmentClick);
+      $textareaEl.on('change input', onTextareaChange);
+      $textareaEl.on('focus', onTextareaFocus);
+      $textareaEl.on('blur', onTextareaBlur);
+      app.on('resize', onAppResize);
+    };
+    messagebar.detachEvents = function detachEvents() {
+      $el.off('textarea:resize', onAppResize);
+      $el.off('submit', onSubmit);
+      $el.off('click', '.messagebar-attachment', onAttachmentClick);
+      $textareaEl.off('change input', onTextareaChange);
+      $textareaEl.off('focus', onTextareaFocus);
+      $textareaEl.off('blur', onTextareaBlur);
+      app.off('resize', onAppResize);
+    };
+
+    // Install Modules
+    messagebar.useModules();
+
+    // Init
+    messagebar.init();
+    return messagebar;
+  }
+  focus() {
+    const messagebar = this;
+    messagebar.$textareaEl.focus();
+    return messagebar;
+  }
+  blur() {
+    const messagebar = this;
+    messagebar.$textareaEl.blur();
+    return messagebar;
+  }
+  clear() {
+    const messagebar = this;
+    messagebar.$textareaEl.val('').trigger('change');
+    return messagebar;
+  }
+  getValue() {
+    const messagebar = this;
+    return messagebar.$textareaEl.val().trim();
+  }
+  setValue(value) {
+    const messagebar = this;
+    messagebar.$textareaEl.val(value).trigger('change');
+    return messagebar;
+  }
+  setPlaceholder(placeholder) {
+    const messagebar = this;
+    messagebar.$textareaEl.attr('placeholder', placeholder);
+    return messagebar;
+  }
+  resizePage() {
+    const messagebar = this;
+    const {
+      params,
+      $el,
+      top,
+      $pageEl,
+      $pageContentEl,
+      $areaEl,
+      $textareaEl,
+      $sheetEl,
+      $attachmentsEl
+    } = messagebar;
+    const elHeight = $el[0].offsetHeight;
+    let maxHeight = params.maxHeight;
+    if (top) {
+      /*
+      Disable at the moment
+      const requiredPaddingTop = elHeight + params.topOffset;
+      const currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+      if (requiredPaddingTop !== currentPaddingTop) {
+        if (!maxHeight) {
+          maxHeight = $pageEl[0].offsetHeight - currentPaddingTop - $sheetEl.outerHeight() - $attachmentsEl.outerHeight() - parseInt($areaEl.css('margin-top'), 10) - parseInt($areaEl.css('margin-bottom'), 10);
+        }
+        $textareaEl.css('max-height', `${maxHeight}px`);
+        $pageContentEl.css('padding-top', `${requiredPaddingTop}px`);
+        $el.trigger('messagebar:resizePage');
+        messagebar.emit('local::resizepage messagebarResizePage');
+      }
+      */
+    } else {
+      const currentPaddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
+      const requiredPaddingBottom = elHeight + params.bottomOffset;
+      if (requiredPaddingBottom !== currentPaddingBottom && $pageContentEl.length) {
+        const currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+        const pageScrollHeight = $pageContentEl[0].scrollHeight;
+        const pageOffsetHeight = $pageContentEl[0].offsetHeight;
+        const pageScrollTop = $pageContentEl[0].scrollTop;
+        const scrollOnBottom = pageScrollTop === pageScrollHeight - pageOffsetHeight;
+        if (!maxHeight) {
+          maxHeight = $pageEl[0].offsetHeight - currentPaddingTop - $sheetEl.outerHeight() - $attachmentsEl.outerHeight() - parseInt($areaEl.css('margin-top'), 10) - parseInt($areaEl.css('margin-bottom'), 10);
+        }
+        $textareaEl.css('max-height', `${maxHeight}px`);
+        $pageContentEl.css('padding-bottom', `${requiredPaddingBottom}px`);
+        if (scrollOnBottom) {
+          $pageContentEl.scrollTop($pageContentEl[0].scrollHeight - pageOffsetHeight);
+        }
+        $el.trigger('messagebar:resizepage');
+        messagebar.emit('local::resizePage messagebarResizePage', messagebar);
+      }
+    }
+  }
+  checkEmptyState() {
+    const messagebar = this;
+    const {
+      $el,
+      $textareaEl
+    } = messagebar;
+    const value = $textareaEl.val().trim();
+    if (value && value.length) {
+      $el.addClass('messagebar-with-value');
+    } else {
+      $el.removeClass('messagebar-with-value');
+    }
+  }
+  attachmentsCreate(innerHTML) {
+    if (innerHTML === void 0) {
+      innerHTML = '';
+    }
+    const messagebar = this;
+    const $attachmentsEl = $(`<div class="messagebar-attachments">${innerHTML}</div>`);
+    $attachmentsEl.insertBefore(messagebar.$textareaEl);
+    extend(messagebar, {
+      $attachmentsEl,
+      attachmentsEl: $attachmentsEl[0]
+    });
+    return messagebar;
+  }
+  attachmentsShow(innerHTML) {
+    if (innerHTML === void 0) {
+      innerHTML = '';
+    }
+    const messagebar = this;
+    messagebar.$attachmentsEl = messagebar.$el.find('.messagebar-attachments');
+    if (messagebar.$attachmentsEl.length === 0) {
+      messagebar.attachmentsCreate(innerHTML);
+    }
+    messagebar.$el.addClass('messagebar-attachments-visible');
+    messagebar.attachmentsVisible = true;
+    if (messagebar.params.resizePage) {
+      messagebar.resizePage();
+    }
+    return messagebar;
+  }
+  attachmentsHide() {
+    const messagebar = this;
+    messagebar.$el.removeClass('messagebar-attachments-visible');
+    messagebar.attachmentsVisible = false;
+    if (messagebar.params.resizePage) {
+      messagebar.resizePage();
+    }
+    return messagebar;
+  }
+  attachmentsToggle() {
+    const messagebar = this;
+    if (messagebar.attachmentsVisible) {
+      messagebar.attachmentsHide();
+    } else {
+      messagebar.attachmentsShow();
+    }
+    return messagebar;
+  }
+  renderAttachment(attachment) {
+    const messagebar = this;
+    if (messagebar.params.renderAttachment) {
+      return messagebar.params.renderAttachment.call(messagebar, attachment);
+    }
+    return `
+      <div class="messagebar-attachment">
+        <img src="${attachment}">
+        <span class="messagebar-attachment-delete"></span>
+      </div>
+    `;
+  }
+  renderAttachments() {
+    const messagebar = this;
+    let html;
+    if (messagebar.params.renderAttachments) {
+      html = messagebar.params.renderAttachments.call(messagebar, messagebar.attachments);
+    } else {
+      html = `${messagebar.attachments.map(attachment => messagebar.renderAttachment(attachment)).join('')}`;
+    }
+    if (messagebar.$attachmentsEl.length === 0) {
+      messagebar.attachmentsCreate(html);
+    } else {
+      messagebar.$attachmentsEl.html(html);
+    }
+  }
+  sheetCreate(innerHTML) {
+    if (innerHTML === void 0) {
+      innerHTML = '';
+    }
+    const messagebar = this;
+    const $sheetEl = $(`<div class="messagebar-sheet">${innerHTML}</div>`);
+    messagebar.$el.append($sheetEl);
+    extend(messagebar, {
+      $sheetEl,
+      sheetEl: $sheetEl[0]
+    });
+    return messagebar;
+  }
+  sheetShow(innerHTML) {
+    if (innerHTML === void 0) {
+      innerHTML = '';
+    }
+    const messagebar = this;
+    messagebar.$sheetEl = messagebar.$el.find('.messagebar-sheet');
+    if (messagebar.$sheetEl.length === 0) {
+      messagebar.sheetCreate(innerHTML);
+    }
+    messagebar.$el.addClass('messagebar-sheet-visible');
+    messagebar.sheetVisible = true;
+    if (messagebar.params.resizePage) {
+      messagebar.resizePage();
+    }
+    return messagebar;
+  }
+  sheetHide() {
+    const messagebar = this;
+    messagebar.$el.removeClass('messagebar-sheet-visible');
+    messagebar.sheetVisible = false;
+    if (messagebar.params.resizePage) {
+      messagebar.resizePage();
+    }
+    return messagebar;
+  }
+  sheetToggle() {
+    const messagebar = this;
+    if (messagebar.sheetVisible) {
+      messagebar.sheetHide();
+    } else {
+      messagebar.sheetShow();
+    }
+    return messagebar;
+  }
+  init() {
+    const messagebar = this;
+    messagebar.attachEvents();
+    messagebar.checkEmptyState();
+    return messagebar;
+  }
+  destroy() {
+    const messagebar = this;
+    messagebar.emit('local::beforeDestroy messagebarBeforeDestroy', messagebar);
+    messagebar.$el.trigger('messagebar:beforedestroy');
+    messagebar.detachEvents();
+    if (messagebar.$el[0]) {
+      messagebar.$el[0].f7Messagebar = null;
+      delete messagebar.$el[0].f7Messagebar;
+    }
+    deleteProps(messagebar);
+  }
+}
+export default Messagebar;

package/components/messagebar/messagebar-ios.less

@@ -0,0 +1,88 @@
+.ios {
+  .messagebar {
+    a.link.icon-only:first-child {
+      margin-left: -8px;
+    }
+    a.link.icon-only:last-child {
+      margin-right: -8px;
+    }
+    a.link:not(.icon-only) + .messagebar-area {
+      margin-left: 8px;
+    }
+    .messagebar-area + a.link:not(.icon-only) {
+      margin-left: 8px;
+    }
+  }
+  .messagebar-area {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  .messagebar-attachments {
+    padding: 5px;
+    border-radius: var(--f7-messagebar-textarea-border-radius)
+      var(--f7-messagebar-textarea-border-radius) 0 0;
+    border: 1px solid var(--f7-messagebar-attachments-border-color);
+    border-bottom: none;
+  }
+  .messagebar-attachments-visible {
+    .messagebar-attachments + textarea {
+      border-radius: 0 0 var(--f7-messagebar-textarea-border-radius)
+        var(--f7-messagebar-textarea-border-radius);
+    }
+  }
+  .messagebar-attachment {
+    font-size: 14px;
+    + .messagebar-attachment {
+      .ltr({
+        margin-left: 8px;
+      });
+      .rtl({
+        margin-right: 8px;
+      });
+    }
+  }
+  .messagebar-attachment-delete {
+    right: 5px;
+    top: 5px;
+    width: 20px;
+    height: 20px;
+    background: #7d7e80;
+    border: 2px solid #fff;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+    &:after,
+    &:before {
+      width: 10px;
+      height: 2px;
+      background: #fff;
+      margin-left: -5px;
+      margin-top: -1px;
+    }
+  }
+  .messagebar-sheet-image,
+  .messagebar-sheet-item {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin-top: 1px;
+    position: relative;
+    overflow: hidden;
+    height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
+    width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
+    .ltr({
+    margin-left: 1px;
+  });
+    .rtl({
+    margin-right: 1px;
+  });
+    @media (orientation: landscape) {
+      width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
+      height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
+    }
+    .icon-checkbox,
+    .icon-radio {
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      z-index: 1;
+    }
+  }
+}

package/components/messagebar/messagebar-md.less

@@ -0,0 +1,114 @@
+.md {
+  .messagebar {
+    --f7-toolbar-link-height: var(--f7-messagebar-height);
+  }
+  .messagebar-attachments {
+    padding: 16px 16px 0;
+    border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
+  }
+
+  .messagebar-attachment {
+    img {
+      width: var(--f7-messagebar-attachment-height);
+      height: var(--f7-messagebar-attachment-height);
+      object-fit: cover;
+      object-position: center;
+    }
+    + .messagebar-attachment {
+      .ltr({
+        margin-left: 16px;
+      });
+      .rtl({
+        margin-right: 16px;
+      });
+    }
+  }
+  .messagebar-attachments-visible {
+    .messagebar-attachments {
+      background: var(--f7-messagebar-textarea-bg-color);
+      border-radius: var(--f7-messagebar-textarea-border-radius)
+        var(--f7-messagebar-textarea-border-radius) 0 0;
+    }
+    textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+  .messagebar-area {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
+  .messagebar-attachment-delete {
+    right: -6px;
+    top: -6px;
+    width: 24px;
+    height: 24px;
+    background-color: var(--f7-md-inverse-surface);
+    border-radius: 24px;
+    border: 2px solid var(--f7-messagebar-textarea-bg-color);
+    &:after,
+    &:before {
+      width: 12px;
+      height: 2px;
+      background: var(--f7-messagebar-textarea-bg-color);
+      margin-left: -6px;
+      margin-top: -1px;
+    }
+  }
+  .messagebar-sheet-image,
+  .messagebar-sheet-item {
+    --f7-touch-ripple-color: transparent;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin-top: 8px;
+    position: relative;
+    overflow: hidden;
+    height: calc((var(--f7-messagebar-sheet-height) - 24px) / 2);
+    width: calc((var(--f7-messagebar-sheet-height) - 24px) / 2);
+    border-radius: 4px;
+    .ltr({
+      margin-left: 8px;
+    });
+    .rtl({
+      margin-right: 8px;
+    });
+    @media (orientation: landscape) {
+      width: calc((var(--f7-messagebar-sheet-landscape-height) - 8px) / 2);
+      height: calc((var(--f7-messagebar-sheet-landscape-height) - 24px) / 2);
+    }
+    input:checked ~ img {
+      transform: scale(0.85);
+    }
+    input:checked ~ .icon-checkbox,
+    input:checked ~ .icon-radio {
+      transform: translate(-50%, -50%) scale(1);
+    }
+    .icon-checkbox,
+    .icon-radio {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0.85);
+      border: none;
+      z-index: 1;
+      --f7-checkbox-inactive-color: var(--f7-md-surface);
+      --f7-checkbox-active-color: var(--f7-md-surface);
+      &::after {
+        color: var(--f7-md-on-surface);
+        font-size: 18px;
+        width: auto;
+        height: 100%;
+        line-height: 32px;
+        left: 0;
+        position: static;
+      }
+    }
+  }
+}

package/components/messagebar/messagebar-rtl.css

@@ -0,0 +1 @@
+:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-sheet-border-color:transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-textarea-placeholder-color:rgba(0, 0, 0, 0.4);--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-textarea-placeholder-color:rgba(255, 255, 255, 0.4);--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color);--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:transparent;--f7-messagebar-attachments-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.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}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-outline:before{display:none!important}.messagebar.toolbar-hidden:after{display:none!important}.messagebar .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));flex-direction:row-reverse}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar 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)}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;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){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;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){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-sheet-image>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;transition-duration:.2s}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-right:8px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-right:1px}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height)}.md .messagebar-attachments{padding:16px 16px 0;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-attachment img{width:var(--f7-messagebar-attachment-height);height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center}.md .messagebar-attachment+.messagebar-attachment{margin-right:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-attachment-delete{right:-6px;top:-6px;width:24px;height:24px;background-color:var(--f7-md-inverse-surface);border-radius:24px;border:2px solid var(--f7-messagebar-textarea-bg-color)}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:12px;height:2px;background:var(--f7-messagebar-textarea-bg-color);margin-left:-6px;margin-top:-1px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:transparent;box-sizing:border-box;flex-shrink:0;margin-top:8px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);border-radius:4px;margin-right:8px}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/ 2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);border:none;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox::after,.md .messagebar-sheet-image .icon-radio::after,.md .messagebar-sheet-item .icon-checkbox::after,.md .messagebar-sheet-item .icon-radio::after{color:var(--f7-md-on-surface);font-size:18px;width:auto;height:100%;line-height:32px;left:0;position:static}

package/components/messagebar/messagebar-vars.less

@@ -0,0 +1,75 @@
+:root {
+  --f7-messagebar-attachments-height: 155px;
+
+  --f7-messagebar-sheet-height: 252px;
+  --f7-messagebar-sheet-landscape-height: 192px;
+  /*
+  --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
+  --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
+  */
+  .light-vars({
+
+  });
+  .dark-vars({
+
+  });
+}
+.ios-vars({
+  --f7-messagebar-height: 44px;
+  --f7-messagebar-font-size: 17px;
+  --f7-messagebar-textarea-bg-color: transparent;
+  /*
+  --f7-messagebar-link-color: var(--f7-theme-color);
+  */
+  --f7-messagebar-border-color: transparent;
+  --f7-messagebar-textarea-border-radius: 17px;
+  --f7-messagebar-textarea-padding: 6px 16px;
+  --f7-messagebar-textarea-height: 34px;
+  --f7-messagebar-textarea-font-size: 17px;
+  --f7-messagebar-textarea-line-height: 20px;
+  --f7-messagebar-sheet-bg-color: #d1d5da;
+  --f7-messagebar-sheet-border-color: transparent;
+  --f7-messagebar-attachment-border-radius: 12px;
+  --f7-messagebar-attachment-height: 155px;
+  --f7-messagebar-attachment-landscape-height: 120px;
+  .light-vars({
+    --f7-messagebar-textarea-placeholder-color: rgba(0,0,0,0.4);
+    --f7-messagebar-textarea-text-color: #000;
+    --f7-messagebar-textarea-border: 1px solid #c8c8cd;
+    --f7-messagebar-attachments-border-color: #c8c8cd;
+    --f7-messagebar-bg-color: #fff;
+    --f7-messagebar-bg-color-rgb: 255, 255, 255;
+  });
+  .dark-vars({
+    --f7-messagebar-textarea-placeholder-color: rgba(255, 255, 255, 0.4);
+    --f7-messagebar-textarea-text-color: #fff;
+    --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
+    --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
+    --f7-messagebar-bg-color: var(--f7-bars-bg-color);
+    --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  });
+});
+.md-vars({
+  --f7-messagebar-height: 64px;
+  --f7-messagebar-font-size: 16px;
+  --f7-messagebar-textarea-border-radius: 24px;
+  --f7-messagebar-textarea-padding: 12px 16px;
+  --f7-messagebar-textarea-height: 48px;
+  --f7-messagebar-textarea-font-size: 16px;
+  --f7-messagebar-textarea-line-height: 22px;
+  --f7-messagebar-textarea-border: 1px solid transparent;
+  --f7-messagebar-attachment-border-radius: 12px;
+  --f7-messagebar-attachment-height: 72px;
+  --f7-messagebar-attachment-landscape-height: 72px;
+  --f7-messagebar-border-color: transparent;
+  --f7-messagebar-attachments-border-color: transparent;
+});
+.md-color-vars({
+  --f7-messagebar-textarea-placeholder-color: var(--f7-md-on-surface-variant);
+  --f7-messagebar-textarea-bg-color: var(--f7-md-surface-variant);
+  --f7-messagebar-bg-color: var(--f7-md-surface);
+  --f7-messagebar-textarea-text-color: var(--f7-md-on-surface);
+  --f7-messagebar-sheet-bg-color: var(--f7-md-surface);
+  --f7-messagebar-sheet-border-color: var(--f7-md-outline-variant);
+  --f7-messagebar-link-color: var(--f7-md-on-surface);
+});

package/components/messagebar/messagebar.css

@@ -0,0 +1 @@
+:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-sheet-border-color:transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-textarea-placeholder-color:rgba(0, 0, 0, 0.4);--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-textarea-placeholder-color:rgba(255, 255, 255, 0.4);--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color);--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:transparent;--f7-messagebar-attachments-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.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}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-outline:before{display:none!important}.messagebar.toolbar-hidden:after{display:none!important}.messagebar .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))}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar 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)}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;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){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;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){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-sheet-image>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;transition-duration:.2s}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-left:8px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-left:1px}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height)}.md .messagebar-attachments{padding:16px 16px 0;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-attachment img{width:var(--f7-messagebar-attachment-height);height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center}.md .messagebar-attachment+.messagebar-attachment{margin-left:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-attachment-delete{right:-6px;top:-6px;width:24px;height:24px;background-color:var(--f7-md-inverse-surface);border-radius:24px;border:2px solid var(--f7-messagebar-textarea-bg-color)}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:12px;height:2px;background:var(--f7-messagebar-textarea-bg-color);margin-left:-6px;margin-top:-1px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:transparent;box-sizing:border-box;flex-shrink:0;margin-top:8px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);border-radius:4px;margin-left:8px}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/ 2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);border:none;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox::after,.md .messagebar-sheet-image .icon-radio::after,.md .messagebar-sheet-item .icon-checkbox::after,.md .messagebar-sheet-item .icon-radio::after{color:var(--f7-md-on-surface);font-size:18px;width:auto;height:100%;line-height:32px;left:0;position:static}