Messagebar

Framework7 comes with special resizealbe toolbar for usage with Messages

Messagebar layour is pretty simple:

Where

• - block with messagebar attachments. Optional
• **messagebar-sheet** - block with messagebar sheet. Optional

Messagebar place is very important, it should be inside of page and right before 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">
    ... messages
  </div>
</div>

<div class="messagebar-sheet">
  <!-- selectable sheet image -->
  <label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image1.png)">
    <input type="checkbox">
    <i class="icon icon-checkbox"></i>
  </label>
  <!-- another selectable sheet image -->
  <label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image2.png)">
    <input type="checkbox">
    <i class="icon icon-checkbox"></i>
  </label>
  <!-- some custom sheet item -->
  <div class="messagebar-sheet-item">
    <!-- any custom content here -->
  </div>
</div>

Messages attachments block is designed to display currently attached message items/images:

Messagebar App Methods

Now, when we have Messagebar’ HTML, we need to initialize it. We need to use related App’s method:

Let’s look on list of all available parameters:

Messagebar Methods & Properties

So to create Messagebar we have to call:

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

Messagebar will fire the following DOM events on messagebar element and events on app and messagebar instance:

Messagebar instance emits events on both self instance and app instance. App instance events has same names prefixed with messagebar.

Messagebar Auto Initialization

If you don’t need to use Messagebar API and your Messagebar is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional **messagebar-init** class to messagebar element, and all required parameters can be passed using **data-** attributes:

Parameters that used in camelCase, for example maxHeight, in data- attributes should be used in kebab-case as data-max-height

<div class="page">
  <div class="navbar">
      <div class="title">Messages</div>
    </div>
  </div>
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <a class="link toggle-sheet" href="#">
        <i class="icon f7-icons ios-only">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>
  </div>
</div>

var app = new Framework7();
var $$ = Dom7;
// Init Messages
var messages = app.messages.create({
  ...
});
// Init messagebar
var messagebar = app.messagebar.create({
  el: '.messagebar',
  attachments: []
});
// Available Images
var images = [
  'http://lorempixel.com/300/300/cats/1/',
  'http://lorempixel.com/200/300/cats/2/',
  'http://lorempixel.com/400/300/cats/3/',
  'http://lorempixel.com/300/150/cats/4/',
  'http://lorempixel.com/150/300/cats/5/',
  'http://lorempixel.com/300/300/cats/6/',
  'http://lorempixel.com/300/300/cats/7/',
  'http://lorempixel.com/200/300/cats/8/',
  'http://lorempixel.com/400/300/cats/9/',
  'http://lorempixel.com/300/150/cats/10/'
// Create sheet items
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);
/*========================
  Handle Attachments
  ========================*/
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) {
    // Add to attachments
    messagebar.attachments.unshift(image)
  } else {
    // Remove from attachments
    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();
  // Uncheck in sheet
  var imageIndex = images.indexOf(image);
  messagebar.$el.find('.messagebar-sheet .checkbox').eq(imageIndex).find('input').prop('checked', false);
});
/*========================
  Toggle Sheet
  ========================*/
$$('a.toggle-sheet').on('click', function () {
  messagebar.sheetToggle();