Навігація

Повідомлення

Макет повідомлень

<div class="page">
  <div class="page-content messages-content">
    <div class="messages">
      <!-- Штамп дати -->
      <div class="messages-title"><b>Sunday, Feb 9</b> 12:58</div>

      <!-- Надіслане повідомлення (за умовчанням - зелений і праворуч) -->
      <div class="message message-sent">
        <div class="message-content">
          <!-- Бульбашка з текстом -->
          <div class="message-bubble">
            <div class="message-text">Hi, Kate</div>
          </div>
        </div>
      </div>

      <!-- Ще одне надіслане повідомлення-->
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">How are you?</div>
          </div>
        </div>
      </div>

      <!--Отримане повідомлення (за умовчанням - сірий зліва) -->
      <div class="message message-received">
        <!-- Аватар відправника -->
        <div class="message-avatar" style="background-image:url(path/to/avatar.jpg)"></div>
        <div class="message-content">
          <!--Ім'я відправника-->
          <div class="message-name">Blue Ninja</div>
          <!-- Бульбашка з текстом -->
          <div class="message-bubble">
            <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Макет одного повідомлення

<div class="message">
  <div class="message-avatar" style="background-image:url(path/to/avatar)"></div>
  <div class="message-content">
    <div class="message-name">John Doe</div>
    <div class="message-header">Message header</div>
    <div class="message-bubble">
      <div class="message-text-header">Text header</div>
      <div class="message-image">
        <img src="path/to/image" />
      </div>
      <div class="message-text">Hello world!</div>
      <div class="message-text-footer">Text footer</div>
    </div>
    <div class="message-footer">Message footer</div>
  </div>
</div>

Додаткові класи для одного контейнера повідомлень

Методи застосунку Messages

Параметри повідомлень

var messages = app.messages.create({
  el: '.messages',
  on: {
    change: function () {
      console.log('Textarea value changed')
    }
  }
})

Умови автоверстки

Параметри одного повідомлення

var message = {
  text: 'Hello!',
  attrs: {
    'data-id': 1,
    'data-author-id': 150
  }
}

Методи та властивості повідомлень

var messages = app.messages.create({ /* parameters */ })

Властивості

Методи

Події Повідомлення

Події DOM

Події екземплярів застосунку та повідомлень

Автоматична ініціалізація повідомлень

<div class="messages messages-init" data-new-messages-first="true">
  ...
</div>

Змінні CSS

:root {
  --t4-message-text-header-text-color: inherit;
  --t4-message-text-header-opacity: 0.65;
  --t4-message-text-header-font-size: 12px;
  --t4-message-text-footer-text-color: inherit;
  --t4-message-text-footer-opacity: 0.65;
  --t4-message-text-footer-font-size: 12px;
  --t4-message-bubble-line-height: 1.2;
  --t4-message-header-font-size: 12px;
  --t4-message-footer-font-size: 11px;
  --t4-message-name-font-size: 12px;
  --t4-message-name-font-weight: inherit;
  --t4-message-avatar-border-radius: 50%;
  --t4-messages-title-font-weight: inherit;
  /*
  --t4-message-sent-bg-color: var(--t4-theme-color);
  */
  --t4-message-sent-text-color: #fff;
  --t4-messages-content-bg-color: #fff;
  --t4-message-typing-indicator-bg-color: #000;
  --t4-message-received-bg-color: #e5e5ea;
  --t4-message-received-text-color: #000;
}
:root .dark,
:root.dark {
  --t4-messages-title-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-header-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-name-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-footer-text-color: rgba(255, 255, 255, 0.54);
  --t4-messages-content-bg-color: transparent;
  --t4-message-received-bg-color: #252525;
  --t4-message-received-text-color: #fff;
  --t4-message-typing-indicator-bg-color: #fff;
}
.ios {
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.45);
  --t4-messages-title-font-size: 11px;
  --t4-message-header-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-avatar-size: 29px;
  --t4-message-margin: 10px;
  --t4-message-bubble-min-height: 32px;
  --t4-message-bubble-font-size: 17px;
  --t4-message-bubble-border-radius: 16px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 16px;
  --t4-message-typing-indicator-opacity: 0.35;
}
.md {
  --t4-messages-title-font-size: 12px;
  --t4-message-avatar-size: 32px;
  --t4-message-margin: 16px;
  --t4-message-bubble-min-height: 32px;
  --t4-message-bubble-font-size: 16px;
  --t4-message-bubble-border-radius: 4px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 8px;
  --t4-message-typing-indicator-opacity: 0.6;
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-header-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.51);
}
.aurora {
  --t4-messages-title-font-size: 14px;
  --t4-message-avatar-size: 32px;
  --t4-message-margin: 16px;
  --t4-message-bubble-min-height: 34px;
  --t4-message-bubble-font-size: 16px;
  --t4-message-bubble-line-height: 1.4;
  --t4-message-bubble-border-radius: 16px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 10px;
  --t4-message-typing-indicator-opacity: 0.5;
  --t4-message-header-font-size: 14px;
  --t4-message-footer-font-size: 12px;
  --t4-message-name-font-size: 14px;
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-header-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.51);
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Messages</div>
      </div>
    </div>
    <div class="toolbar messagebar">
      <div class="toolbar-inner">
        <div class="messagebar-area">
          <textarea class="resizable" placeholder="Message"></textarea>
        </div>
        <a class="link send-link" href="#" @click=${sendMessage}>Send</a>
      </div>
    </div>
    <div class="page-content messages-content">
      <div class="messages">
        <div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
        <div class="message message-sent">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">John Doe</div>
            <div class="message-header">Message header</div>
            <div class="message-bubble">
              <div class="message-text-header">Text header</div>
              <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              <div class="message-text-footer">Text footer</div>
            </div>
            <div class="message-footer">Message footer</div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">John Doe</div>
            <div class="message-header">Message header</div>
            <div class="message-bubble">
              <div class="message-text-header">Text header</div>
              <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              <div class="message-text-footer">Text footer</div>
            </div>
            <div class="message-footer">Message footer</div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hi, Kate</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">How are you?</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Hi, I am good!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Blue Ninja</div>
            <div class="message-bubble">
              <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hey, look, cutest kitten ever!</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-image">
                <img src="https://cdn.techno4.io/placeholder/cats-200x260-4.jpg"
                  style="width:200px; height: 260px" />
              </div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Nice!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Like it very much!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Blue Ninja</div>
            <div class="message-bubble">
              <div class="message-text">Awesome!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $, $on }) => {
    let messages;
    let messagebar;

    // Response flag
    var responseInProgress = false;

    // Dummy response
    var answers = [
      'Yes!',
      'No',
      'Hm...',
      'I am not sure',
      'And what about you?',
      'May be ;)',
      'Lorem ipsum dolor sit amet, consectetur',
      'What?',
      'Are you sure?',
      'Of course',
      'Need to think about it',
      'Amazing!!!'
    ]
    var people = [
      {
        name: 'Kate Johnson',
        avatar: 'https://cdn.techno4.io/placeholder/people-100x100-9.jpg'
      },
      {
        name: 'Blue Ninja',
        avatar: 'https://cdn.techno4.io/placeholder/people-100x100-7.jpg'
      }
    ];

    // Отримати повідомлення
    const receiveMessage = () => {
      responseInProgress = true;
      setTimeout(function () {
        // Отримайте випадкову відповідь і випадкову особу
        var answer = answers[Math.floor(Math.random() * answers.length)];
        var person = people[Math.floor(Math.random() * people.length)];

        // Показати індикатор набору тексту
        messages.showTyping({
          header: person.name + ' is typing',
          avatar: person.avatar
        });

        setTimeout(function () {
          // Додати отримане фіктивне повідомлення
          messages.addMessage({
            text: answer,
            type: 'received',
            name: person.name,
            avatar: person.avatar
          });
          // Приховати індикатор набору тексту
          messages.hideTyping();
          responseInProgress = false;
        }, 4000);
      }, 1000);
    }

    // Відправити повідомлення
    const sendMessage = () => {
      var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
      // повернути, якщо повідомлення пусте
      if (!text.length) return;

      // Очистити зону
      messagebar.clear();

      // Повернути фокус до області
      messagebar.focus();

      // Додати повідомлення до повідомлень
      messages.addMessage({
        text: text,
      });

      if (responseInProgress) return;
      // Отримати фіктивне повідомлення
      receiveMessage();
    }

    $on('pageInit', () => {
      // ініціалізація Повідомлення 
      messages = app.messages.create({
        el: '.messages',

        // Правило першого повідомлення
        firstMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити заголовок
          if (message.isTitle) return false;
          /* якщо:
             - попереднього повідомлення немає
             - або інший тип попереднього повідомлення (надіслано/отримано).
             - або ім'я відправника попереднього повідомлення інше

          */
          if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
          return false;
        },
        // Правило останнього повідомлення
        lastMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити заголовок
          if (message.isTitle) return false;
          /* якщо:
             - наступного повідомлення немає
             - або тип наступного повідомлення (відправлено/отримано) інший
             - або ім'я відправника наступного повідомлення інше

          */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        },
        // Правило останнього повідомлення
        tailMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити якщо це  заголовок
          if (message.isTitle) return false;
          /* if (загалом те саме, що lastMessageRule):
           - наступного повідомлення немає
           - або тип наступного повідомлення (відправлено/отримано) інший
           - або ім'я відправника наступного повідомлення інше
        */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        }
      });

      // Init Messagebar
      messagebar = app.messagebar.create({
        el: '.messagebar'
      });
    });

    return $render;
  }



</script>