jsguy / misojs

Isomorphic JavaScript framework using mithril
MIT License
56 stars 3 forks source link

Create message queue #8

Open jsguy opened 9 years ago

jsguy commented 9 years ago

See issue 2 for details and discussion

StephanHoyer commented 9 years ago

you mean a flash-message component?

jsguy commented 9 years ago

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

StephanHoyer commented 9 years ago

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