framework7 7.0.8 → 8.0.0-beta.1

package/components/messages/messages-class.js

@@ -1,18 +1,14 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
-
 import $jsx from '../../shared/$jsx.js';
-
 class Messages extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const m = this;
     const defaults = {
@@ -30,8 +26,9 @@ class Messages extends Framework7Class {
       sameAvatarMessageRule: undefined,
       customClassMessageRule: undefined,
       renderMessage: undefined
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     m.useModulesParams(defaults);
     m.params = extend(defaults, params);
     const $el = $(params.el).eq(0);
@@ -45,15 +42,15 @@ class Messages extends Framework7Class {
       el: $el[0],
       $pageContentEl,
       pageContentEl: $pageContentEl[0]
-    }); // Install Modules
-
-    m.useModules(); // Init
+    });
+    // Install Modules
+    m.useModules();
 
+    // Init
     m.init();
     return m;
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   getMessageData(messageEl) {
     const $messageEl = $(messageEl);
     const data = {
@@ -69,32 +66,25 @@ class Messages extends Framework7Class {
       imageSrc: $messageEl.find('.message-image img').attr('src'),
       typing: $messageEl.hasClass('message-typing')
     };
-
     if (data.isTitle) {
       data.text = $messageEl.html();
     }
-
     if (data.text && data.textHeader) {
       data.text = data.text.replace(`<div class="message-text-header">${data.textHeader}</div>`, '');
     }
-
     if (data.text && data.textFooter) {
       data.text = data.text.replace(`<div class="message-text-footer">${data.textFooter}</div>`, '');
     }
-
     let avatar = $messageEl.find('.message-avatar').css('background-image');
     if (avatar === 'none' || avatar === '') avatar = undefined;
-
     if (avatar && typeof avatar === 'string') {
       avatar = avatar.replace('url(', '').replace(')', '').replace(/"/g, '').replace(/'/g, '');
     } else {
       avatar = undefined;
     }
-
     data.avatar = avatar;
     return data;
   }
-
   getMessagesData() {
     const m = this;
     const data = [];
@@ -103,22 +93,18 @@ class Messages extends Framework7Class {
     });
     return data;
   }
-
   renderMessage(messageToRender) {
     const m = this;
     const message = extend({
       type: 'sent',
       attrs: {}
     }, messageToRender);
-
     if (m.params.renderMessage) {
       return m.params.renderMessage.call(m, message);
     }
-
     if (message.isTitle) {
       return `<div class="messages-title">${message.text}</div>`;
     }
-
     return $jsx("div", _extends({
       class: `message message-${message.type} ${message.isTyping ? 'message-typing' : ''} ${message.cssClass || ''}`
     }, message.attrs), message.avatar && $jsx("div", {
@@ -150,146 +136,117 @@ class Messages extends Framework7Class {
       class: "message-footer"
     }, message.footer)));
   }
-
   renderMessages(messagesToRender, method) {
     if (messagesToRender === void 0) {
       messagesToRender = this.messages;
     }
-
     if (method === void 0) {
       method = this.params.newMessagesFirst ? 'prepend' : 'append';
     }
-
     const m = this;
     const html = messagesToRender.map(message => m.renderMessage(message)).join('');
     m.$el[method](html);
   }
-
   isFirstMessage() {
     const m = this;
     if (m.params.firstMessageRule) return m.params.firstMessageRule(...arguments);
     return false;
   }
-
   isLastMessage() {
     const m = this;
     if (m.params.lastMessageRule) return m.params.lastMessageRule(...arguments);
     return false;
   }
-
   isTailMessage() {
     const m = this;
     if (m.params.tailMessageRule) return m.params.tailMessageRule(...arguments);
     return false;
   }
-
   isSameNameMessage() {
     const m = this;
     if (m.params.sameNameMessageRule) return m.params.sameNameMessageRule(...arguments);
     return false;
   }
-
   isSameHeaderMessage() {
     const m = this;
     if (m.params.sameHeaderMessageRule) return m.params.sameHeaderMessageRule(...arguments);
     return false;
   }
-
   isSameFooterMessage() {
     const m = this;
     if (m.params.sameFooterMessageRule) return m.params.sameFooterMessageRule(...arguments);
     return false;
   }
-
   isSameAvatarMessage() {
     const m = this;
     if (m.params.sameAvatarMessageRule) return m.params.sameAvatarMessageRule(...arguments);
     return false;
   }
-
   isCustomClassMessage() {
     const m = this;
     if (m.params.customClassMessageRule) return m.params.customClassMessageRule(...arguments);
     return undefined;
   }
-
   layout() {
     const m = this;
     m.$el.find('.message, .messages-title').each((messageEl, index) => {
       const $messageEl = $(messageEl);
-
       if (!m.messages) {
         m.messages = m.getMessagesData();
       }
-
       const classes = [];
       const message = m.messages[index];
       const previousMessage = m.messages[index - 1];
       const nextMessage = m.messages[index + 1];
-
       if (m.isFirstMessage(message, previousMessage, nextMessage)) {
         classes.push('message-first');
       }
-
       if (m.isLastMessage(message, previousMessage, nextMessage)) {
         classes.push('message-last');
       }
-
       if (m.isTailMessage(message, previousMessage, nextMessage)) {
         classes.push('message-tail');
       }
-
       if (m.isSameNameMessage(message, previousMessage, nextMessage)) {
         classes.push('message-same-name');
       }
-
       if (m.isSameHeaderMessage(message, previousMessage, nextMessage)) {
         classes.push('message-same-header');
       }
-
       if (m.isSameFooterMessage(message, previousMessage, nextMessage)) {
         classes.push('message-same-footer');
       }
-
       if (m.isSameAvatarMessage(message, previousMessage, nextMessage)) {
         classes.push('message-same-avatar');
       }
-
       let customMessageClasses = m.isCustomClassMessage(message, previousMessage, nextMessage);
-
       if (customMessageClasses && customMessageClasses.length) {
         if (typeof customMessageClasses === 'string') {
           customMessageClasses = customMessageClasses.split(' ');
         }
-
         customMessageClasses.forEach(customClass => {
           classes.push(customClass);
         });
       }
-
       $messageEl.removeClass('message-first message-last message-tail message-same-name message-same-header message-same-footer message-same-avatar');
       classes.forEach(className => {
         $messageEl.addClass(className);
       });
     });
   }
-
   clear() {
     const m = this;
     m.messages = [];
     m.$el.html('');
   }
-
   removeMessage(messageToRemove, layout) {
     if (layout === void 0) {
       layout = true;
     }
-
-    const m = this; // Index or El
-
+    const m = this;
+    // Index or El
     let index;
     let $el;
-
     if (typeof messageToRemove === 'number') {
       index = messageToRemove;
       $el = m.$el.find('.message, .messages-title').eq(index);
@@ -300,24 +257,19 @@ class Messages extends Framework7Class {
       $el = $(messageToRemove);
       index = $el.index();
     }
-
     if ($el.length === 0) {
       return m;
     }
-
     $el.remove();
     m.messages.splice(index, 1);
     if (m.params.autoLayout && layout) m.layout();
     return m;
   }
-
   removeMessages(messagesToRemove, layout) {
     if (layout === void 0) {
       layout = true;
     }
-
     const m = this;
-
     if (Array.isArray(messagesToRemove)) {
       const messagesToRemoveEls = [];
       messagesToRemove.forEach(messageToRemoveIndex => {
@@ -331,41 +283,33 @@ class Messages extends Framework7Class {
         m.removeMessage(messageToRemove, false);
       });
     }
-
     if (m.params.autoLayout && layout) m.layout();
     return m;
   }
-
   addMessage() {
     const m = this;
     let messageToAdd;
     let animate;
     let method;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     if (typeof args[1] === 'boolean') {
       [messageToAdd, animate, method] = args;
     } else {
       [messageToAdd, method, animate] = args;
     }
-
     if (typeof animate === 'undefined') {
       animate = true;
     }
-
     if (typeof method === 'undefined') {
       method = m.params.newMessagesFirst ? 'prepend' : 'append';
     }
-
     return m.addMessages([messageToAdd], animate, method);
   }
-
   setScrollData() {
-    const m = this; // Define scroll positions before new messages added
-
+    const m = this;
+    // Define scroll positions before new messages added
     const scrollHeightBefore = m.pageContentEl.scrollHeight;
     const heightBefore = m.pageContentEl.offsetHeight;
     const scrollBefore = m.pageContentEl.scrollTop;
@@ -380,36 +324,31 @@ class Messages extends Framework7Class {
       scrollBefore
     };
   }
-
   addMessages() {
     const m = this;
     let messagesToAdd;
     let animate;
     let method;
-
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     if (typeof args[1] === 'boolean') {
       [messagesToAdd, animate, method] = args;
     } else {
       [messagesToAdd, method, animate] = args;
     }
-
     if (typeof animate === 'undefined') {
       animate = true;
     }
-
     if (typeof method === 'undefined') {
       method = m.params.newMessagesFirst ? 'prepend' : 'append';
     }
-
     const {
       scrollHeightBefore,
       scrollBefore
-    } = m.setScrollData(); // Add message to DOM and data
+    } = m.setScrollData();
 
+    // Add message to DOM and data
     let messagesHTML = '';
     const typingMessage = m.messages.filter(el => el.isTyping)[0];
     messagesToAdd.forEach(messageToAdd => {
@@ -422,21 +361,17 @@ class Messages extends Framework7Class {
       } else {
         m.messages[method === 'append' ? 'push' : 'unshift'](messageToAdd);
       }
-
       messagesHTML += m.renderMessage(messageToAdd);
     });
     const $messagesEls = $(messagesHTML);
-
     if (animate) {
       if (method === 'append' && !m.params.newMessagesFirst) {
         $messagesEls.addClass('message-appear-from-bottom');
       }
-
       if (method === 'prepend' && m.params.newMessagesFirst) {
         $messagesEls.addClass('message-appear-from-top');
       }
     }
-
     if (typingMessage) {
       if (method === 'append') {
         $messagesEls.insertBefore(m.$el.find('.message-typing'));
@@ -445,41 +380,33 @@ class Messages extends Framework7Class {
       }
     } else {
       m.$el[method]($messagesEls);
-    } // Layout
-
+    }
 
+    // Layout
     if (m.params.autoLayout) m.layout();
-
     if (method === 'prepend' && !typingMessage) {
       m.pageContentEl.scrollTop = scrollBefore + (m.pageContentEl.scrollHeight - scrollHeightBefore);
     }
-
     if (m.params.scrollMessages && (method === 'append' && !m.params.newMessagesFirst || method === 'prepend' && m.params.newMessagesFirst && !typingMessage)) {
       m.scrollWithEdgeCheck(animate);
     }
-
     return m;
   }
-
   showTyping(message) {
     if (message === void 0) {
       message = {};
     }
-
     const m = this;
     const typingMessage = m.messages.filter(el => el.isTyping)[0];
-
     if (typingMessage) {
       m.removeMessage(m.messages.indexOf(typingMessage));
     }
-
     m.addMessage(extend({
       type: 'received',
       isTyping: true
     }, message));
     return m;
   }
-
   hideTyping() {
     const m = this;
     let typingMessageIndex;
@@ -487,25 +414,20 @@ class Messages extends Framework7Class {
     m.messages.forEach((message, index) => {
       if (message.isTyping) typingMessageIndex = index;
     });
-
     if (typeof typingMessageIndex !== 'undefined') {
       if (m.$el.find('.message').eq(typingMessageIndex).hasClass('message-typing')) {
         typingFound = true;
         m.removeMessage(typingMessageIndex);
       }
     }
-
     if (!typingFound) {
       const $typingMessageEl = m.$el.find('.message-typing');
-
       if ($typingMessageEl.length) {
         m.removeMessage($typingMessageEl);
       }
     }
-
     return m;
   }
-
   scrollWithEdgeCheck(animate) {
     const m = this;
     const {
@@ -513,29 +435,23 @@ class Messages extends Framework7Class {
       scrollHeightBefore,
       heightBefore
     } = m.scrollData;
-
     if (m.params.scrollMessagesOnEdge) {
       let onEdge = false;
-
       if (m.params.newMessagesFirst && scrollBefore === 0) {
         onEdge = true;
       }
-
       if (!m.params.newMessagesFirst && scrollBefore - (scrollHeightBefore - heightBefore) >= -10) {
         onEdge = true;
       }
-
       if (onEdge) m.scroll(animate ? undefined : 0);
     } else {
       m.scroll(animate ? undefined : 0);
     }
   }
-
   scroll(duration, scrollTop) {
     if (duration === void 0) {
       duration = 300;
     }
-
     const m = this;
     const currentScroll = m.pageContentEl.scrollTop;
     let newScrollTop;
@@ -546,35 +462,26 @@ class Messages extends Framework7Class {
     m.$pageContentEl.scrollTop(newScrollTop, duration);
     return m;
   }
-
   init() {
     const m = this;
-
     if (!m.messages || m.messages.length === 0) {
       m.messages = m.getMessagesData();
     }
-
     if (m.params.messages && m.params.messages.length) {
       m.renderMessages();
     }
-
     if (m.params.autoLayout) m.layout();
     if (m.params.scrollMessages) m.scroll(0);
   }
-
   destroy() {
     const m = this;
     m.emit('local::beforeDestroy messagesBeforeDestroy', m);
     m.$el.trigger('messages:beforedestroy');
-
     if (m.$el[0]) {
       m.$el[0].f7Messages = null;
       delete m.$el[0].f7Messages;
     }
-
     deleteProps(m);
   }
-
 }
-
 export default Messages;

package/components/messages/messages-ios.less

@@ -48,6 +48,7 @@
     .message-name {
       margin-left: var(--f7-message-bubble-padding-horizontal);
     }
+
     .message-bubble {
       padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
       -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>")
@@ -56,6 +57,10 @@
     .message-image {
       margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
     }
+    &.message-tail .message-bubble {
+      border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius)
+        var(--f7-message-bubble-border-radius) 0;
+    }
     &.message-tail:not(.message-typing) .message-bubble {
       -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>")
         50% 42% 46% 56%;
@@ -79,6 +84,10 @@
     .message-image {
       margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
     }
+    &.message-tail .message-bubble {
+      border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0
+        var(--f7-message-bubble-border-radius);
+    }
     &.message-tail .message-bubble {
       -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>")
         50% 56% 46% 42%;

package/components/messages/messages-md.less

@@ -20,50 +20,85 @@
   .message-text-footer {
     margin-top: 4px;
   }
-  .message-received,
-  .message-sent {
-    &.message-tail .message-bubble {
-      &:before {
-        position: absolute;
-        content: '';
-        bottom: 0;
-        width: 0;
-        height: 0;
-      }
+
+  .message-image {
+    margin: calc(-1 * var(--f7-message-bubble-padding-vertical))
+      calc(-1 * var(--f7-message-bubble-padding-horizontal));
+    &,
+    img {
+      border-radius: var(--f7-message-bubble-border-radius);
     }
   }
   .message-received {
     margin-left: calc(8px + var(--f7-safe-area-left));
-    .message-avatar + .message-content {
-      margin-left: var(--f7-message-bubble-padding-horizontal);
-    }
-    &.message-tail .message-bubble {
-      &:before {
-        border-left: 8px solid transparent;
-        border-right: 0 solid transparent;
-        border-bottom: 8px solid var(--f7-message-received-bg-color);
-        right: 100%;
+    .message-name,
+    .message-header,
+    .message-footer {
+      margin-left: 16px;
+    }
+    &.message-first:not(.message-last) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-left-radius: 4px;
       }
     }
+    &.message-last:not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-top-left-radius: 4px;
+      }
+    }
+    &:not(.message-last):not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
+      }
+    }
+    .message-avatar + .message-content {
+      margin-left: 8px;
+    }
   }
   .message-sent {
     margin-right: calc(8px + var(--f7-safe-area-right));
-    .message-avatar + .message-content {
-      margin-right: var(--f7-message-bubble-padding-horizontal);
+    .message-name,
+    .message-header,
+    .message-footer {
+      margin-right: 16px;
+    }
+    &.message-first:not(.message-last) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-right-radius: 4px;
+      }
+    }
+    &.message-last:not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-top-right-radius: 4px;
+      }
     }
-    &.message-tail .message-bubble {
-      &:before {
-        border-left: 0 solid transparent;
-        border-right: 8px solid transparent;
-        border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
-        left: 100%;
+    &:not(.message-last):not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
       }
     }
+    .message-avatar + .message-content {
+      margin-right: var(--f7-message-bubble-padding-horizontal);
+    }
   }
 
   // Rules
   .message + .message:not(.message-first) {
-    margin-top: 8px;
+    margin-top: 2px;
   }
 
   // Typing