Messagebar

• Messagebar Layout
• Messagebar Sheet Layout
• Messagebar Attachments Layout
• Messagebar App Methods
• Messagebar Parameters
• Messagebar Methods & Properties
• Messagebar Events
• DOM Events
• App and Messagebar Instance Events
• Messagebar Auto Initialization
• CSS Variables
• Examples

Framework7 comes with special resizealbe toolbar for usage with Messages

Messagebar Layout

Messagebar layour is pretty simple:

<div class="toolbar messagebar">
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <!-- messagebar attachments -->
      <div class="messagebar-attachments">...</div>
      <!-- messagebar resizable textarea -->
      <textarea class="resizable" placeholder="Message"></textarea>
    </div>
    <a href="#" class="link">Send</a>
  </div>
  <!-- messagebar sheet -->
  <div class="messagebar-sheet">...</div>
</div>

Where

• messagebar-attachments - 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>

Messagebar Sheet Layout

If need additional sheet with, for example, images that we can attach to message then we use extra block designed for this:

<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>

Messagebar Attachments Layout

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

<div class="messagebar-attachments">
  <!-- image attachment -->
  <div class="messagebar-attachment">
    <img src="path/to/image1.png">
  </div>

  <!-- deletable image attachment -->
  <div class="messagebar-attachment">
    <img src="path/to/image2.png">
    <!-- attachment delete button -->
    <span class="messagebar-attachment-delete"></span>
  </div>
</div>

Messagebar App Methods

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

Messagebar Parameters

Let's look on list of all available parameters:

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

Messagebar Methods & Properties

So to create Messagebar we have to call:

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

After we initialize Messagebar we have its initialized instance in variable (like messagebar variable in example above) with helpful methods and properties:

Messagebar Events

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

DOM Events

App and Messagebar Instance Events

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:

<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 Variables

Below is the list of related CSS variables (CSS custom properties).

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

<div class="page">
  <div class="navbar">
    <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 f7-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>
  </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 = [
  'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
  'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
  'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
  'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
  'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
  'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
  'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
  'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
  'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
  'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg'
]
// Create sheet items
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);

/*========================
  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();
});