array-stack-flash.js

var Event = require('geval')
var Observ = require('observ')
var event = Event(function(broadcast) {
  var releases = []
  state.items(rebind)

  function handle (event) {
    if (event.event === 'start') {
      broadcast()
    }
  }

  function rebind () {
    while (releases.length) {
      releases.pop()()
    }

    state.items.forEach(function(item) {
      if (item && item.node && item.node.onTrigger) {
        releases.push(item.node.onTrigger(handle))
      }
    })
  }
})

var computed = require('observ/computed')
function ArrayStack (items) {
  return computed(items, function(_) {
    var result = []
    for (var i = 0; i < arguments.length; i++) {
      var arr = arguments[i]
      for (var k = 0; k < arr.length; k++) {
        if (arr[k] != null) {
          result[k] = arr[k]
        }
      }
    }
    return result
  })
}

function FlashArray () {
  var obs = Observ([])
  var active = []
  var refreshing = false

  obs.flash = function(i, value, duration) {
    
    var obj = [i, value]
    active.push(obj)
    refresh()

    setTimeout(function() {
      active.splice(active.indexOf(obj), 1)
      refresh()
    }, duration)
  
  }

  return obs

  function refresh () {
    if (!refreshing) {
      refreshing = true
      window.requestAnimationFrame(refreshNow)
    }
  }

  function refreshNow() {
    obs.set(active.reduce(flatten, []))
    refreshing = false
  }
}

function flatten(result, obj) {
  result[obj[0]] = obj[1]
  return result
}

var fl = FlashArray()

event(function () {
  fl.flash(1, 127, 20)
})

var ar = Observ([3, 3, 3, 3])
ArrayStack([ar, fl])(function(data) {
  console.log(data)
})