misojs icon indicating copy to clipboard operation
misojs copied to clipboard

Create message queue

Open jsguy opened this issue 10 years ago • 3 comments
trafficstars

See issue 2 for details and discussion

jsguy avatar Jan 20 '15 21:01 jsguy

you mean a flash-message component?

StephanHoyer avatar Jan 20 '15 22:01 StephanHoyer

Yes pretty much - this will be separate from miso (a standalone NPM), so if you know of a nice one, we can use it instead of making our own - it must have a small footprint, and allow flexibility in how it is presented...

jsguy avatar Jan 21 '15 00:01 jsguy

did a simple component for my project:

'use strict';

var m = require('mithril');
var remove = require('lodash').remove;
var icons = require('../icons');
var messages = [];

var id = 0;

function info(text, duration) {
  duration = duration || 5000;
  m.startComputation();
  var message = {
    id: id++,
    type: 'info',
    text: text,
    state: 'new'
  };
  messages.push(message);
  setTimeout(function() {
    m.startComputation();
    message.state = 'visible';
    m.endComputation();
  }, 10);
  setTimeout(function() {
    m.startComputation();
    message.state = 'hidden';
    m.endComputation();
  }, duration);
  setTimeout(function() {
    m.startComputation();
    remove(messages, message);
    m.endComputation();
  }, duration + 1000);
  m.endComputation();
}

function view() {
  if (!messages.length) {
    return;
  }
  return m('ul.messages', messages.map(function(message) {
    return m('li', {
      key: message.id,
      className: message.state
    }, [
      icons.message[message.type],
      m('.text', message.text)
    ]);
  }));
}

function clearAll() {
  messages = [];
}

module.exports = {
  view: view,
  info: info,
  clearAll: clearAll
};

This needs to be improved of cause

StephanHoyer avatar Jan 21 '15 13:01 StephanHoyer