[feature] animated card gallery component

[serapath]

the searchbar filters and searches and does all kinds of stuff ... and then gives updated filtered data to the "gallery component" so that the user can see a nice result
...

example code from brainstorming:

var wizard_gallery = require('wizard_gallery')
var wizard_searchbar = require('wizard_searchbar')
var get_github_data = require('get-github-data')
var bel = require('bel')

// usage example
get_github_data(function (data) {
   var searchbar = wizard_searchbar(data)
   var gallery = wizard_gallery()
   

   // gallery.update(data)

   searchbar.on(gallery)
   
   var app = bel`
     <div class="wizardpage">
       ${searchbar.render()}
       ${gallery.render()}
     </div>
   `
   document.body.appendChild(app)
})

/**********************************************************************
  gallery.js (module internals) [example]
**********************************************************************/
module.exports = gallery

var _data
var dom

function gallery (data) {
   _data = data
   var api = {
     update: function (newdata) {
       _data = newdata
        var tmp = template(_data)
        dom.parentElement.replaceElement(tmp, dom)
        dom = tmp
     }
     render: function () {
        dom = template(_data)
        return dom
     }
   }
   return api
}
/**********************************************************************
  searchbar.js (module internals) [example]
**********************************************************************/
var _data = {}
var listteners = []
var searchbar = {
   on: function (gallery) {
      listeners.push(gallery)
   },
   trigger: function (data) {
     listeners.forEach(gallery => gallery.update(_data)
   }
}


input.addEventListener('change', function (event) {
   var userinput = event.target.value
   _data.selection = userinput
   searchbar.trigger(_data)
})