Messagebar

    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:

    app.messagebar.create(parameters) Initialize Messagebar with parameters
    • parameters - object - object with Messagebar parameters
    • Method returns initialized Messagebar instance
    app.messagebar.destroy(el) Destroy Messagebar instance
    • el - HTMLElement or string (with CSS Selector) or object. Messagebar element or Messagebar instance to destroy.
    app.messagebar.get(el) Get Messagebar instance by HTML element
    • el - HTMLElement or string (with CSS Selector). Messagebar element.
    • Method returns Messagebar's instance

    Messagebar Parameters

    Let's look on list of all available parameters:

    Parameter Type Default Description
    el string
    HTMLElement
    CSS selector or HTML element of messagebar element (div class="messagebar")
    textareaEl string
    HTMLElement
    CSS selector or HTML element of messagebar textarea element. By default (if not passed) will try to look for textarea inside of messagebar
    maxHeight number null Max height of textarea when it resized depending on amount of its text
    attachments array [] Array with attachments. For example ['path/to/image1.png', 'path/to/image2.png']
    resizePage boolean true Disable if you don't want to resize messages page when messagebar textarea size changed
    on object Object with events handlers. For example:
    var messagebar = app.messagebar.create({
      el: '.messagebar',
      on: {
        change: function () {
          console.log('Textarea value changed')
        }
      }
    })
    Render functions
    renderAttachments function(attachments) Function to render attachments block. Must return full attachments HTML string
    renderAttachment function(attachment) Function to render single attachment. Must return full attachment HTML string

    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:

    Properties
    messagebar.el Messagebar HTML element.
    messagebar.$el Dom7 element with messagebar HTML element.
    messagebar.textareaEl Messagebar textarea HTML element
    messagebar.$textareaEl Dom7 element with messagebar textarea HTML element
    messagebar.params Object with passed initialization parameters
    messagebar.attachments Array with messagebar attachments
    Methods
    messagebar.getValue(); Get messagebar textarea value
    messagebar.setValue(value); Set messagebar textarea value/text
    messagebar.clear(); Clear textarea and update/reset its size
    messagebar.focus(); Focus messagebar textarea
    messagebar.blur(); Remove focus from messagebar textarea
    messagebar.setPlaceholder(placeholder) Set/change messagebar placeholder text
    messagebar.resizePage() Force Messagebar to resize messages page depending on messagebar height/size
    messagebar.attachmentsCreate() Dynamically create attachments block HTML element
    messagebar.attachmentsShow() Show attachments block
    messagebar.attachmentsHide() Hide attachments block
    messagebar.attachmentsToggle() Toggle attachments block
    messagebar.renderAttachments() Render attachments block based on attachments data
    messagebar.sheetCreate() Dynamically create messagebar sheet block HTML element
    messagebar.sheetShow() Show messagebar sheet
    messagebar.sheetHide() Hide messagebar sheet
    messagebar.sheetToggle() Toggle messagebar sheet
    messagebar.destroy(); Destroy messagebar instance

    Messagebar Events

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

    DOM Events

    Event Target Description
    messagebar:change Messagebar Element<div class="messagebar"> Event will be triggered after messagebar textarea value changed
    messagebar:focus Messagebar Element<div class="messagebar"> Event will be triggered when messagebar textarea gets focus
    messagebar:blur Messagebar Element<div class="messagebar"> Event will be triggered when messagebar textarea loses focus
    messagebar:resizepage Messagebar Element<div class="messagebar"> Event will be triggered when messagebar resizes messages page
    messagebar:attachmentdelete Messagebar attachment element<div class="messagebar-attachment"> Event will be triggered after click on messagebar attachment delete button
    messagebar:attachmentclick Messagebar attachment element<div class="messagebar-attachment"> Event will be triggered on messagebar attachment click
    messagebar:beforedestroy Messagebar Element<div class="messagebar"> Event will be triggered right before Messagebar instance will be destroyed

    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.

    Event Target Arguments Description
    change messagebar (messagebar) Event will be triggered after messagebar textarea value changed. As an argument event handler receives messagebar instance
    messagebarChange app
    focus messagebar (messagebar) Event will be triggered when messagebar textarea gets focus. As an argument event handler receives messagebar instance
    messagebarFocus app
    blur messagebar (messagebar) Event will be triggered when messagebar textarea loses focus. As an argument event handler receives messagebar instance
    messagebarBlur app
    resizePage messagebar (messagebar) Event will be triggered when messagebar resizes messages page. As an argument event handler receives messagebar instance
    messagebarResizePage app
    attachmentDelete messagebar (messagebar, attachmentEl, attachmentIndex) Event will be triggered after click on messagebar attachment delete button. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number
    messagebarAttachmentDelete app
    attachmentClick messagebar (messagebar, attachmentEl, attachmentIndex) Event will be triggered on messagebar attachment click. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number
    messagebarAttachmentClick app
    beforeDestroy messagebar (messagebar) Event will be triggered right before Messagebar instance will be destroyed
    messagebarBeforeDestroy app

    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>

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

    Examples

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