Навігація

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

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

<div class="toolbar messagebar">
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <!-- вкладення панелі повідомлень -->
      <div class="messagebar-attachments">...</div>
      <!-- панель повідомлень зі змінним розміром текстового поля -->
      <textarea class="resizable" placeholder="Message"></textarea>
    </div>
    <a href="#" class="link">Send</a>
  </div>
  <!-- лист панелі повідомлень -->
  <div class="messagebar-sheet">...</div>
</div>

<div class="page">
  <!-- navbar -->
  <div class="navbar">...</div>

  <!-- messagebar -->
  <div class="toolbar messagebar">...</div>

  <!-- page-content/messages-content -->
  <div class="page-content messages-content">
    ... Повідомлення
  </div>
</div>

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

<div class="messagebar-sheet">
  <!-- зображення аркуша, яке можна вибрати -->
  <label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image1.png)">
    <input type="checkbox" />
    <i class="icon icon-checkbox"></i>
  </label>

  <!-- інше зображення аркуша, яке можна вибрати -->
  <label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image2.png)">
    <input type="checkbox" />
    <i class="icon icon-checkbox"></i>
  </label>

  <!-- якийсь нестандартний елемент аркуша -->
  <div class="messagebar-sheet-item">
    <!-- будь-який спеціальний вміст тут -->
  </div>
</div>

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

<div class="messagebar-attachments">
  <!-- вкладення зображення -->
  <div class="messagebar-attachment">
    <img src="path/to/image1.png" />
  </div>

  <!-- вкладене зображення, яке можна видалити -->
  <div class="messagebar-attachment">
    <img src="path/to/image2.png" />
    <!-- кнопка видалення вкладення -->
    <span class="messagebar-attachment-delete"></span>
  </div>
</div>

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

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

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

Функції візуалізації

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

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

Властивості

Методи

Події панелі повідомлень

Події DOM

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

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

<div class="toolbar messagebar messagebar-init" data-max-height="200">
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <textarea placeholder="Message"></textarea>
    </div>
    <a href="#" class="link">Send</a>
  </div>
</div>

Змінні CSS

:root {
  --t4-messagebar-shadow-image: none;
  --t4-messagebar-textarea-bg-color: transparent;
  --t4-messagebar-attachments-height: 155px;
  --t4-messagebar-attachment-height: 155px;
  --t4-messagebar-attachment-landscape-height: 120px;
  --t4-messagebar-sheet-height: 252px;
  --t4-messagebar-sheet-landscape-height: 192px;
  /*
  --t4-messagebar-inner-padding-left: var(--t4-toolbar-inner-padding-left);
  --t4-messagebar-inner-padding-right: var(--t4-toolbar-inner-padding-right);
  */
  --t4-messagebar-bg-color: #fff;
  --t4-messagebar-bg-color-rgb: 255, 255, 255;
}
:root .dark,
:root.dark {
  --t4-messagebar-bg-color: var(--t4-bars-bg-color);
  --t4-messagebar-bg-color-rgb: var(--t4-bars-bg-color-rgb);
}
.ios {
  --t4-messagebar-height: 44px;
  --t4-messagebar-font-size: 17px;
  /*
  --t4-messagebar-link-color: var(--t4-theme-color);
  */
  --t4-messagebar-border-color: transparent;
  --t4-messagebar-textarea-border-radius: 17px;
  --t4-messagebar-textarea-padding: 6px 16px;
  --t4-messagebar-textarea-height: 34px;
  --t4-messagebar-textarea-font-size: 17px;
  --t4-messagebar-textarea-line-height: 20px;
  --t4-messagebar-sheet-bg-color: #d1d5da;
  --t4-messagebar-attachment-border-radius: 12px;
  --t4-messagebar-textarea-text-color: #000;
  --t4-messagebar-textarea-border: 1px solid #c8c8cd;
  --t4-messagebar-attachments-border-color: #c8c8cd;
}
.ios .dark,
.ios.dark {
  --t4-messagebar-textarea-text-color: #fff;
  --t4-messagebar-textarea-border: 1px solid var(--t4-bars-border-color);
  --t4-messagebar-attachments-border-color: var(--t4-bars-border-color);
}
.md {
  --t4-messagebar-height: 48px;
  --t4-messagebar-font-size: 16px;
  --t4-messagebar-textarea-border-radius: 0px;
  --t4-messagebar-textarea-padding: 5px 8px;
  --t4-messagebar-textarea-height: 32px;
  --t4-messagebar-textarea-font-size: 16px;
  --t4-messagebar-textarea-line-height: 22px;
  --t4-messagebar-textarea-border: 1px solid transparent;
  --t4-messagebar-sheet-bg-color: #fff;
  --t4-messagebar-attachment-border-radius: 4px;
  --t4-messagebar-link-color: #333;
  --t4-messagebar-border-color: #d1d1d1;
  --t4-messagebar-textarea-text-color: #333;
  --t4-messagebar-attachments-border-color: #ddd;
}
.md .dark,
.md.dark {
  --t4-messagebar-border-color: transparent;
  --t4-messagebar-link-color: rgba(255, 255, 255, 0.87);
  --t4-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  --t4-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
}
.aurora {
  --t4-messagebar-height: 48px;
  --t4-messagebar-font-size: 16px;
  /*
  --t4-messagebar-link-color: var(--t4-theme-color);
  */
  --t4-messagebar-border-color: transparent;
  --t4-messagebar-textarea-border-radius: 8px;
  --t4-messagebar-textarea-padding: 4px 8px;
  --t4-messagebar-textarea-height: 32px;
  --t4-messagebar-textarea-font-size: 16px;
  --t4-messagebar-textarea-line-height: 22px;
  --t4-messagebar-sheet-bg-color: #fff;
  --t4-messagebar-attachment-border-radius: 8px;
  --t4-messagebar-textarea-text-color: #000;
  --t4-messagebar-textarea-border: 1px solid #c8c8cd;
  --t4-messagebar-attachments-border-color: #c8c8cd;
}
.aurora .dark,
.aurora.dark {
  --t4-messagebar-textarea-text-color: #fff;
  --t4-messagebar-textarea-border: 1px solid var(--t4-bars-border-color);
  --t4-messagebar-attachments-border-color: var(--t4-bars-border-color);
}

Приклади

<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">
        <a class="link toggle-sheet" href="#">
          <i class="icon t4-icons if-not-md">camera_fill</i>
          <i class="icon material-icons md-only">camera_alt</i>
        </a>
        <div class="messagebar-area">
          <textarea placeholder="Message"></textarea>
        </div>
        <a class="link" href="#">Send</a>
      </div>
      <div class="messagebar-sheet"></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-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;

    $on('pageInit', () => {
      messages = $t4.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 (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        }
      });

      // Ініціалізація панелі повідомлень
      messagebar = $t4.messagebar.create({
        el: '.messagebar',
        attachments: []
      });

      // Доступні зображення
      var images = [
        'https://cdn.Techno4.io/placeholder/cats-300x300-1.jpg',
        'https://cdn.Techno4.io/placeholder/cats-200x300-2.jpg',
        'https://cdn.Techno4.io/placeholder/cats-400x300-3.jpg',
        'https://cdn.Techno4.io/placeholder/cats-300x150-4.jpg',
        'https://cdn.Techno4.io/placeholder/cats-150x300-5.jpg',
        'https://cdn.Techno4.io/placeholder/cats-300x300-6.jpg',
        'https://cdn.Techno4.io/placeholder/cats-300x300-7.jpg',
        'https://cdn.Techno4.io/placeholder/cats-200x300-8.jpg',
        'https://cdn.Techno4.io/placeholder/cats-400x300-9.jpg',
        'https://cdn.Techno4.io/placeholder/cats-300x150-10.jpg'
      ]
      // Створення елементів аркуша
      var sheetHtml = '';
      images.forEach(function (image) {
        sheetHtml += `
          <label class="checkbox messagebar-sheet-image" style="background-image:url(${image})">
            <input type="checkbox">
            <i class="icon icon-checkbox"></i>
          </label>
        `;
      });

      $('.messagebar-sheet').html(sheetHtml);

      /*========================
        Обробка вкладень
        ========================*/
      function checkAttachments() {
        if (messagebar.attachments.length > 0) {
          messagebar.attachmentsShow();
          messagebar.setPlaceholder('Add comment or Send');
        } else {
          messagebar.attachmentsHide();
          messagebar.setPlaceholder('Message');
        }
      }

      $('.messagebar-sheet-image input').on('change', function (e) {
        var index = $(e.target).parents('.messagebar-sheet-image').index();
        var image = images[index];
        if (e.target.checked) {
          //Додати до вкладень
          messagebar.attachments.unshift(image)
        } else {
          // Видалити з вкладень
          messagebar.attachments.splice(messagebar.attachments.indexOf(image), 1);
        }
        messagebar.renderAttachments();
        checkAttachments();
      });

      messagebar.on('attachmentDelete', function (messagebar, attachmentEl, attachmentIndex) {
        var image = messagebar.attachments.splice(attachmentIndex, 1)[0];
        messagebar.renderAttachments();
        checkAttachments();
        // Зніміть прапорець на аркуші
        var imageIndex = images.indexOf(image);
        messagebar.$el.find('.messagebar-sheet .checkbox').eq(imageIndex).find('input').prop('checked', false);
      });

      /*========================
        Перемкнути аркуш
        ========================*/
      $('a.toggle-sheet').on('click', function () {
        messagebar.sheetToggle();
      });
    })

    return $render;
  }


</script>