framework7/lazy-components/messages.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,s){void 0===s&&(s=!0);document,window;var f=e.$,o=(e.Template7,e.utils),a=(e.device,e.support,e.Class),t=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,function(n){function e(e,s){void 0===s&&(s={}),n.call(this,s,[e]);var a=this,t={autoLayout:!0,messages:[],newMessagesFirst:!1,scrollMessages:!0,scrollMessagesOnEdge:!0,firstMessageRule:void 0,lastMessageRule:void 0,tailMessageRule:void 0,sameNameMessageRule:void 0,sameHeaderMessageRule:void 0,sameFooterMessageRule:void 0,sameAvatarMessageRule:void 0,customClassMessageRule:void 0,renderMessage:void 0};a.useModulesParams(t),a.params=o.extend(t,s);var r=f(s.el).eq(0);if(0===r.length)return a;if(r[0].f7Messages)return r[0].f7Messages;r[0].f7Messages=a;var i=r.closest(".page-content").eq(0);return o.extend(a,{messages:a.params.messages,$el:r,el:r[0],$pageContentEl:i,pageContentEl:i[0]}),a.useModules(),a.init(),a}return n&&(e.__proto__=n),((e.prototype=Object.create(n&&n.prototype)).constructor=e).prototype.getMessageData=function(e){var s=f(e),a={name:s.find(".message-name").html(),header:s.find(".message-header").html(),textHeader:s.find(".message-text-header").html(),textFooter:s.find(".message-text-footer").html(),footer:s.find(".message-footer").html(),isTitle:s.hasClass("messages-title"),type:s.hasClass("message-sent")?"sent":"received",text:s.find(".message-text").html(),image:s.find(".message-image").html(),imageSrc:s.find(".message-image img").attr("src"),typing:s.hasClass("message-typing")};a.isTitle&&(a.text=s.html()),a.text&&a.textHeader&&(a.text=a.text.replace('<div class="message-text-header">'+a.textHeader+"</div>","")),a.text&&a.textFooter&&(a.text=a.text.replace('<div class="message-text-footer">'+a.textFooter+"</div>",""));var t=s.find(".message-avatar").css("background-image");return"none"!==t&&""!==t||(t=void 0),t=t&&"string"==typeof t?t.replace("url(","").replace(")","").replace(/"/g,"").replace(/'/g,""):void 0,a.avatar=t,a},e.prototype.getMessagesData=function(){var a=this,t=[];return a.$el.find(".message, .messages-title").each(function(e,s){t.push(a.getMessageData(s))}),t},e.prototype.renderMessage=function(e){var s=this,a=o.extend({type:"sent"},e);return s.params.renderMessage?s.params.renderMessage.call(s,a):a.isTitle?'<div class="messages-title">'+a.text+"</div>":'\n      <div class="message message-'+a.type+" "+(a.isTyping?"message-typing":"")+'">\n        '+(a.avatar?'\n        <div class="message-avatar" style="background-image:url('+a.avatar+')"></div>\n        ':"")+'\n        <div class="message-content">\n          '+(a.name?'<div class="message-name">'+a.name+"</div>":"")+"\n          "+(a.header?'<div class="message-header">'+a.header+"</div>":"")+'\n          <div class="message-bubble">\n            '+(a.textHeader?'<div class="message-text-header">'+a.textHeader+"</div>":"")+"\n            "+(a.image?'<div class="message-image">'+a.image+"</div>":"")+"\n            "+(a.imageSrc&&!a.image?'<div class="message-image"><img src="'+a.imageSrc+'"></div>':"")+"\n            "+(a.text||a.isTyping?'<div class="message-text">'+(a.text||"")+(a.isTyping?'<div class="message-typing-indicator"><div></div><div></div><div></div></div>':"")+"</div>":"")+"\n            "+(a.textFooter?'<div class="message-text-footer">'+a.textFooter+"</div>":"")+"\n          </div>\n          "+(a.footer?'<div class="message-footer">'+a.footer+"</div>":"")+"\n        </div>\n      </div>\n    "},e.prototype.renderMessages=function(e,s){void 0===e&&(e=this.messages),void 0===s&&(s=this.params.newMessagesFirst?"prepend":"append");var a=this,t=e.map(function(e){return a.renderMessage(e)}).join("");a.$el[s](t)},e.prototype.isFirstMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.firstMessageRule&&(e=this.params).firstMessageRule.apply(e,s)},e.prototype.isLastMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.lastMessageRule&&(e=this.params).lastMessageRule.apply(e,s)},e.prototype.isTailMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.tailMessageRule&&(e=this.params).tailMessageRule.apply(e,s)},e.prototype.isSameNameMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.sameNameMessageRule&&(e=this.params).sameNameMessageRule.apply(e,s)},e.prototype.isSameHeaderMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.sameHeaderMessageRule&&(e=this.params).sameHeaderMessageRule.apply(e,s)},e.prototype.isSameFooterMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.sameFooterMessageRule&&(e=this.params).sameFooterMessageRule.apply(e,s)},e.prototype.isSameAvatarMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];return!!this.params.sameAvatarMessageRule&&(e=this.params).sameAvatarMessageRule.apply(e,s)},e.prototype.isCustomClassMessage=function(){for(var e,s=[],a=arguments.length;a--;)s[a]=arguments[a];if(this.params.customClassMessageRule)return(e=this.params).customClassMessageRule.apply(e,s)},e.prototype.layout=function(){var g=this;g.$el.find(".message, .messages-title").each(function(e,s){var a=f(s);g.messages||(g.messages=g.getMessagesData());var t=[],r=g.messages[e],i=g.messages[e-1],n=g.messages[e+1];g.isFirstMessage(r,i,n)&&t.push("message-first"),g.isLastMessage(r,i,n)&&t.push("message-last"),g.isTailMessage(r,i,n)&&t.push("message-tail"),g.isSameNameMessage(r,i,n)&&t.push("message-same-name"),g.isSameHeaderMessage(r,i,n)&&t.push("message-same-header"),g.isSameFooterMessage(r,i,n)&&t.push("message-same-footer"),g.isSameAvatarMessage(r,i,n)&&t.push("message-same-avatar");var o=g.isCustomClassMessage(r,i,n);o&&o.length&&("string"==typeof o&&(o=o.split(" ")),o.forEach(function(e){t.push(e)})),a.removeClass("message-first message-last message-tail message-same-name message-same-header message-same-footer message-same-avatar"),t.forEach(function(e){a.addClass(e)})})},e.prototype.clear=function(){this.messages=[],this.$el.html("")},e.prototype.removeMessage=function(e,s){void 0===s&&(s=!0);var a,t,r=this;return"number"==typeof e?(a=e,t=r.$el.find(".message, .messages-title").eq(a)):r.messages&&0<=r.messages.indexOf(e)?(a=r.messages.indexOf(e),t=r.$el.children().eq(a)):a=(t=f(e)).index(),0===t.length||(t.remove(),r.messages.splice(a,1),r.params.autoLayout&&s&&r.layout()),r},e.prototype.removeMessages=function(e,s){void 0===s&&(s=!0);var a=this;if(Array.isArray(e)){var t=[];e.forEach(function(e){t.push(a.$el.find(".message, .messages-title").eq(e))}),t.forEach(function(e){a.removeMessage(e,!1)})}else f(e).each(function(e,s){a.removeMessage(s,!1)});return a.params.autoLayout&&s&&a.layout(),a},e.prototype.addMessage=function(){for(var e,s,a=[],t=arguments.length;t--;)a[t]=arguments[t];var r,i,n;return"boolean"==typeof a[1]?(r=(e=a)[0],i=e[1],n=e[2]):(r=(s=a)[0],n=s[1],i=s[2]),void 0===i&&(i=!0),void 0===n&&(n=this.params.newMessagesFirst?"prepend":"append"),this.addMessages([r],i,n)},e.prototype.addMessages=function(){for(var e,s,a=[],t=arguments.length;t--;)a[t]=arguments[t];var r,i,n,o=this;"boolean"==typeof a[1]?(r=(e=a)[0],i=e[1],n=e[2]):(r=(s=a)[0],n=s[1],i=s[2]),void 0===i&&(i=!0),void 0===n&&(n=o.params.newMessagesFirst?"prepend":"append");var g=o.pageContentEl.scrollHeight,m=o.pageContentEl.offsetHeight,l=o.pageContentEl.scrollTop,p="",d=o.messages.filter(function(e){return e.isTyping})[0];r.forEach(function(e){d?"append"===n?o.messages.splice(o.messages.indexOf(d),0,e):o.messages.splice(o.messages.indexOf(d)+1,0,e):o.messages["append"===n?"push":"unshift"](e),p+=o.renderMessage(e)});var u=f(p);if(i&&("append"!==n||o.params.newMessagesFirst||u.addClass("message-appear-from-bottom"),"prepend"===n&&o.params.newMessagesFirst&&u.addClass("message-appear-from-top")),d?"append"===n?u.insertBefore(o.$el.find(".message-typing")):u.insertAfter(o.$el.find(".message-typing")):o.$el[n](u),o.params.autoLayout&&o.layout(),"prepend"!==n||d||(o.pageContentEl.scrollTop=l+(o.pageContentEl.scrollHeight-g)),o.params.scrollMessages&&("append"===n&&!o.params.newMessagesFirst||"prepend"===n&&o.params.newMessagesFirst&&!d))if(o.params.scrollMessagesOnEdge){var c=!1;o.params.newMessagesFirst&&0===l&&(c=!0),!o.params.newMessagesFirst&&-10<=l-(g-m)&&(c=!0),c&&o.scroll(i?void 0:0)}else o.scroll(i?void 0:0);return o},e.prototype.showTyping=function(e){void 0===e&&(e={});var s=this,a=s.messages.filter(function(e){return e.isTyping})[0];return a&&s.removeMessage(s.messages.indexOf(a)),s.addMessage(o.extend({type:"received",isTyping:!0},e)),s},e.prototype.hideTyping=function(){var a,e,s=this;if(s.messages.forEach(function(e,s){e.isTyping&&(a=s)}),void 0!==a&&s.$el.find(".message").eq(a).hasClass("message-typing")&&(e=!0,s.removeMessage(a)),!e){var t=s.$el.find(".message-typing");t.length&&s.removeMessage(t)}return s},e.prototype.scroll=function(e,s){void 0===e&&(e=300);var a,t=this,r=t.pageContentEl.scrollTop;if(void 0!==s)a=s;else if((a=t.params.newMessagesFirst?0:t.pageContentEl.scrollHeight-t.pageContentEl.offsetHeight)===r)return t;return t.$pageContentEl.scrollTop(a,e),t},e.prototype.init=function(){var e=this;e.messages&&0!==e.messages.length||(e.messages=e.getMessagesData()),e.params.messages&&e.params.messages.length&&e.renderMessages(),e.params.autoLayout&&e.layout(),e.params.scrollMessages&&e.scroll(0)},e.prototype.destroy=function(){var e=this;e.emit("local::beforeDestroy messagesBeforeDestroy",e),e.$el.trigger("messages:beforedestroy",e),e.$el[0]&&(e.$el[0].f7Messages=null,delete e.$el[0].f7Messages),o.deleteProps(e)},e}(a)),i={name:"messages",static:{Messages:r},create:function(){this.messages=t({defaultSelector:".messages",constructor:r,app:this,domProp:"f7Messages",addMethods:"renderMessages layout scroll clear removeMessage removeMessages addMessage addMessages".split(" ")})},on:{tabBeforeRemove:function(e){var a=this;f(e).find(".messages-init").each(function(e,s){a.messages.destroy(s)})},tabMounted:function(e){var a=this;f(e).find(".messages-init").each(function(e,s){a.messages.create({el:s})})},pageBeforeRemove:function(e){var a=this;e.$el.find(".messages-init").each(function(e,s){a.messages.destroy(s)})},pageInit:function(e){var a=this;e.$el.find(".messages-init").each(function(e,s){a.messages.create({el:s})})}},vnode:{"messages-init":{insert:function(e){var s=e.elm;this.messages.create({el:s})},destroy:function(e){var s=e.elm;this.messages.destroy(s)}}}};if(s){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))