Skip to main content

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

Techno4 поставляється зі спеціальною панеллю інструментів зі змінним розміром для використання з повідомленнями.

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

Макет панелі повідомлень досить простий:
<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>
Де

messagebar-attachments - блок із вкладеннями панелі повідомлень. Необов'язково

messagebar-sheet - блок із панеллю повідомлень. Необов'язково

Розташування панелі повідомлень дуже важливо, воно має бути всередині сторінки page та безпосередньо перед вмістом сторінки page-content:
<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>

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

Тепер, коли у нас є HTML-код панелі повідомлень, нам потрібно його ініціалізувати. Нам потрібно використовувати метод пов’язаного застосунку:
МетодОпис
app.messagebar.create(parameters)
Ініціалізація панелі повідомлень із параметрами:

parameters - object - об’єкт із параметрами панелі повідомлень

Метод повертає ініціалізований екземпляр панелі повідомлень
app.messagebar.destroy(el)
Знищити екземпляр панелі повідомлень

el - HTMLElement or string (with CSS Selector) or object. Елемент панелі повідомлень або екземпляр панелі повідомлень для знищення.

app.messagebar.get(el)
Отримати екземпляр панелі повідомлень за елементом HTML

el - HTMLElement or string (with CSS Selector). Елемент панелі повідомлень.

Метод повертає екземпляр панелі повідомлень

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

Давайте подивимося на список усіх доступних параметрів:
ПараметрЗа замовчуваннямОписТип
el
Селектор CSS або елемент HTML елемента панелі повідомлень (div class="messagebar")
HTMLElement

string

textareaEl
Селектор CSS або елемент HTML текстового поля панелі повідомлень. За умовчанням (якщо не передано) спробує шукати текстове поле всередині панелі повідомлень
HTMLElement

string

maxHeight
null
Максимальна висота текстового поля під час зміни його розміру залежно від обсягу тексту
number
attachments
[]
Масив із вкладеннями. Наприклад ['path/to/image1.png', 'path/to/image2.png']
array
resizePage
true
Вимкніть, якщо ви не хочете змінювати розмір сторінки повідомлень, коли змінюється розмір текстової області панелі повідомлень
boolean

ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var messagebar = app.messagebar.create({
  el: '.messagebar',
  on: {
    change: function () {
      console.log('Textarea value changed')
    }
  }
})
Функції візуалізації
ПараметрОписТип
renderAttachments
Функція відтворення блоку вкладень. Має повертати повний рядок HTML вкладень
function(attachments)
renderAttachment
Функція відтворення одного вкладення. Має повертати повний рядок HTML вкладення
function(attachment)

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

Отже, щоб створити панель повідомлень, ми повинні викликати:
var messagebar = app.messagebar.create({ /* parameters */ })
Після ініціалізації панелі повідомлень ми маємо її ініціалізований екземпляр у змінній (наприклад, змінну панелі повідомлень messagebar у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
messagebar.el
HTML-елемент панелі повідомлень.
messagebar.$el
Елемент DOM64 із HTML-елементом панелі повідомлень.>
messagebar.textareaEl
HTML-елемент текстового поля панелі повідомлень
messagebar.$textareaEl
Елемент DOM64 із HTML-елементом textarea на панелі повідомлень
messagebar.params
Об'єкт із переданими параметрами ініціалізації
messagebar.attachments
Масив із вкладеннями панелі повідомлень
Методи
МетодОпис
messagebar.getValue();
Отримати значення текстового поля панелі повідомлень
messagebar.setValue(value);
Установити значення/текст текстового поля панелі повідомлень
messagebar.clear();
Очистити текстове поле та оновити/скинути його розмір
messagebar.focus();
Перейти до текстового поля панелі повідомлень
messagebar.blur();
Видалити фокус із текстової області панелі повідомлень
messagebar.setPlaceholder(placeholder)
Встановити/змінити текст заповнювача панелі повідомлень
messagebar.resizePage()
Змусити панель повідомлень змінювати розмір сторінки повідомлень залежно від висоти/розміру панелі повідомлень
messagebar.attachmentsCreate()
Динамічно створювати вкладені блоки елемента HTML
messagebar.attachmentsShow()
Показати блок вкладень
messagebar.attachmentsHide()
Приховати блок вкладень
messagebar.attachmentsToggle()
Перемкнути блок вкладень
messagebar.renderAttachments()
Відобразити блок вкладень на основі даних вкладень
messagebar.sheetCreate()
Динамічно створює HTML-елемент блоку панелі повідомлень
messagebar.sheetShow()
Показати панель повідомлень
messagebar.sheetHide()
Приховати лист панелі повідомлень
messagebar.sheetToggle()
Перемкнути панель повідомлень
messagebar.destroy();
Знищити екземпляр панелі повідомлень

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

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

Події DOM

ПодіяОб'єктОпис
messagebar:change
Елемент панелі повідомлень

<div class="messagebar">

Подія буде ініційована після зміни значення текстового поля на панелі повідомлень
messagebar:focus
Елемент панелі повідомлень

<div class="messagebar">

Подія буде ініційована, коли текстове поле панелі повідомлень отримує фокус
messagebar:blur
Елемент панелі повідомлень

<div class="messagebar">

Подія буде ініційована, коли текстове поле на панелі повідомлень втрачає фокус
messagebar:resizepage
Елемент панелі повідомлень

<div class="messagebar">

Подія буде ініційована, коли панель повідомлень змінює розмір сторінки повідомлень
messagebar:attachmentdelete
Елемент вкладення панелі повідомлень

<div class="messagebar-attachment">

Подію буде запущено після натискання кнопки видалення вкладення на панелі повідомлень
messagebar:attachmentclick
Елемент вкладення панелі повідомлень

<div class="messagebar-attachment">

Подію буде ініційовано після натискання вкладеного файлу на панелі повідомлень
messagebar:beforedestroy
Елемент панелі повідомлень

<div class="messagebar">

Подія буде ініційована безпосередньо перед тим, як екземпляр панелі повідомлень буде знищено

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

Екземпляр панелі повідомлень запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом messagebar.
ПодіяАргументОписОб'єкт
change
(messagebar)
Подія буде ініційована після зміни значення текстового поля на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень
messagebar
messagebarChange
(messagebar)
Подія буде ініційована після зміни значення текстового поля на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень
app
focus
(messagebar)
Подія буде ініційована, коли текстове поле панелі повідомлень отримує фокус. Як аргумент обробник події отримує екземпляр панелі повідомлень
messagebar
messagebarFocus
(messagebar)
Подія буде ініційована, коли текстове поле панелі повідомлень отримує фокус. Як аргумент обробник події отримує екземпляр панелі повідомлень
app
blur
(messagebar)
Подія буде ініційована, коли текстове поле на панелі повідомлень втрачає фокус. Як аргумент обробник події отримує екземпляр панелі повідомлень
messagebar
messagebarBlur
(messagebar)
Подія буде ініційована, коли текстове поле на панелі повідомлень втрачає фокус. Як аргумент обробник події отримує екземпляр панелі повідомлень
app
resizePage
(messagebar)
Подія буде ініційована, коли панель повідомлень змінює розмір сторінки повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень
messagebar
messagebarResizePage
(messagebar)
Подія буде ініційована, коли панель повідомлень змінює розмір сторінки повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень
app
attachmentDelete
(messagebar,

attachmentEl,

attachmentIndex)

Подію буде запущено після натискання кнопки видалення вкладення на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень, HTML-елемент вкладення та номер індексу вкладення
messagebar
messagebarAttachmentDelete
(messagebar,

attachmentEl,

attachmentIndex)

Подію буде запущено після натискання кнопки видалення вкладення на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень, HTML-елемент вкладення та номер індексу вкладення
app
attachmentClick
(messagebar,

attachmentEl,

attachmentIndex)

Подію буде ініційовано після натискання вкладеного файлу на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень, HTML-елемент вкладення та номер індексу вкладення
messagebar
messagebarAttachmentClick
(messagebar,

attachmentEl,

attachmentIndex)

Подію буде ініційовано після натискання вкладеного файлу на панелі повідомлень. Як аргумент обробник події отримує екземпляр панелі повідомлень, HTML-елемент вкладення та номер індексу вкладення
app
beforeDestroy
(messagebar)
Подія буде ініційована безпосередньо перед тим, як екземпляр панелі повідомлень буде знищено
messagebar
messagebarBeforeDestroy
(messagebar)
Подія буде ініційована безпосередньо перед тим, як екземпляр панелі повідомлень буде знищено
app

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

Якщо вам не потрібен API панелі повідомлень і ваша панель повідомлень знаходиться всередині сторінки та представлена в DOM на момент ініціалізації сторінки, тоді її можна автоматично ініціалізувати, просто додавши додатковий клас messagebar-init ініціалізації панелі повідомлень до елемента панелі повідомлень, і всі необхідні параметри можна передаватися за допомогою атрибутів даних data-:
<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>
Параметри, які використовуються в camelCase, наприклад maxHeight, в атрибутах data- повинні використовуватися в kebab-case як data-max-height!

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості 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>