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 - об’єкт із параметрами панелі повідомлень

Метод повертає ініціалізований екземпляр панелі повідомлень
object
app.messagebar.destroy(el)
Знищити екземпляр панелі повідомлень
  • el - HTMLElement or string — (with CSS Selector) or object. Елемент панелі повідомлень або екземпляр панелі повідомлень для знищення.
HTMLElement
app.messagebar.get(el)
Отримати екземпляр панелі повідомлень за елементом HTML
  • el - HTMLElement or string — (with CSS Selector). Елемент панелі повідомлень.
HTMLElement

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

Давайте подивимося на список усіх доступних параметрів:
ПараметрЗа замовчуваннямОписТип
el
Селектор CSS або елемент HTML елемента панелі повідомлень (div class="messagebar")
string
textareaEl
Селектор CSS або елемент HTML текстового поля панелі повідомлень. За умовчанням (якщо не передано) спробує шукати текстове поле всередині панелі повідомлень
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
renderAttachment
Функція відтворення одного вкладення. Має повертати повний рядок HTML вкладення
function

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

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

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

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

Події DOM

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

<div class="messagebar">

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

<div class="messagebar">

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

<div class="messagebar">

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

<div class="messagebar">

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

<div class="messagebar-attachment">

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

<div class="messagebar-attachment">

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

<div class="messagebar">

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

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

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

attachmentEl,

attachmentIndex)

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

attachmentEl,

attachmentIndex)

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

attachmentEl,

attachmentIndex)

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

attachmentEl,

attachmentIndex)

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

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

Якщо вам не потрібен 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>