Cacher is the code snippet organizer for pro developers

/////////////////////
// assign buttons ///
/////////////////////

var ASSIGN_BUTTONS = (function(){
  var assignKeys = (function(){
    var handles = {
      assignKeysButtons: 'assign-keys'
    };

    return function(config){
      var formats = {
        'handle': handles[config.handle],
        'class': "." + handles[config.handle],
        '$': $("." + handles[config.handle]),
        'getElement': document.getElementsByClassName(handles[config.handle]),
        'clicks$': Rx.Observable.fromEvent($("." + handles[config.handle]), 'click')
      };

      return formats[config.format];
    }
  }());

  Rx.DOM.ready().subscribe(function(){
    assignKeys({ handle: 'assignKeysButtons', format: 'clicks$' })
        .map(function(event){ return $(event.target).data('name'); })
        .tap(function(productName){ DATA.access({ source: 'assignContext', method: 'update', params: { productName: productName } }) })
        .tap(function(productName){ ACTIONS.publish({ message: 'productPage::showAssignKeysModal', data: { keysToAssign: 1 } }) })
        .subscribe();
  });
}());

///////////////////
// list section ///
///////////////////

var ListSection = React.createClass({
  componentDidMount: function(){
    var frameDOM = $(React.findDOMNode(this)).contents();

    console.log(frameDOM)
  },
  render: function(){
    return <div className="ui raised segment">
      <div id="users">
        {/*
          <div className="ui input">
            <input className="search" type="text" placeholder="Search">
          </div>
          <button className="ui button sort" data-sort="product-name">Sort by name</button>
        */}
        <div className="ui middle aligned divided list"></div>
      </div>
    </div>;
  }
});

React.render(<ListSection />, document.getElementById('list-section-mount'));

var LIST_DISPLAY = (function(){

  var options = {
    valueNames: [ 'product-name' ],
    item: '<div class="ui segment">'+
    '<div class="ui grid">'+
    '<div class="two wide column product-image-section" style="background-size: cover; background-repeat: no-repeat; background-position: center center; cursor:pointer;"></div>'+
    '<div class="fourteen wide column product-action-section">' +
    '<div class="ui grid">'+
    '<div class="eight wide column product-title"><h3 class="product-name" style="cursor:pointer;"></h3></div>'+
    '<div class="eight wide column product-actions">'+
    '<button class="ui right floated button order-keys">Order More Keys</button>'+
    '<button class="ui blue right floated button assign-keys">Assign Keys <div class="ui active mini inline loader"></div></button>'+
    '</div>'+
    '<div class="sixteen wide column product-actions-buttons">'+
    '<div class="five ui basic buttons">'+
    '<button class="ui gray button state-filter-button list-filter-button-all">All <div class="ui active mini inline loader"></div></button>'+
    '<button class="ui gray button state-filter-button list-filter-button-assigned">Assigned <div class="ui active mini inline loader"></div></button>'+
    '<button class="ui gray button state-filter-button list-filter-button-progress">In Progress <div class="ui active mini inline loader"></div></button>'+
    '<button class="ui gray button state-filter-button list-filter-button-completed">Completed <div class="ui active mini inline loader"></div></button>'+
    '</div>'+
    '</div>'+
    '</div>'+
    '</div></div></div>'
    //item: '<div class="item"><div class="right floated content"><div class="ui button">Add</div></div><img class="ui avatar image" src="http://pngimg.com/upload/face_PNG5660.png"><div class="content"><h3 class="name"></h3><p class="born"></p></div></div>'
    //item: '<li><h3 class="name"></h3><p class="born"></p></li>'
  };

  var values = _.map(pageData.products, function(product){ return { 'product-name': product.name, 'product-id': product.id, 'product-image': product.background } });

  var userList = new List('users', options, values);

  userList.items.forEach(function(item){

    var DRAW_COUNTS = (function(){
      var drawCounts = function(){
        var product = item.values()['product-name'];
        var counts = DATA.access({ source: 'counts', method: 'get' })[product];
        var $assignKeysButton = $(item.elm).children().children('.product-action-section').children().children('.product-actions').children('.assign-keys');
        var $stateButtons = $(item.elm).children().children('.product-action-section').children().children('.product-actions-buttons').children().children();

        $assignKeysButton.html('Assign Keys (' + counts['available'] + ')').data('name', item.values()['product-name']);

        if(counts['available'] === 0){
          if(!$assignKeysButton.hasClass('disabled')){ $assignKeysButton.addClass('disabled') };
        } else {
          $assignKeysButton.removeClass('disabled');
        }

        $stateButtons.each(function(index, button){
          var $button = $(button);

          if($button.hasClass('list-filter-button-all')){ $button.html('All (' + counts['total'] + ')') }
          if($button.hasClass('list-filter-button-assigned')){ $button.html('Assigned (' + counts['assigned'] + ')') }
          if($button.hasClass('list-filter-button-progress')){ $button.html('In Progress (' + counts['activated'] + ')') }
          if($button.hasClass('list-filter-button-completed')){ $button.html('Completed (' + counts['completed'] + ')') }
        });
      };

      // initialize \\
      //TODO: remove with retries
      if(!R.isEmpty(DATA.access({ source: 'counts', method: 'get' }))){drawCounts();}

      // upkeep \\
      DATA.updates$
          .filter(function(payload){ return payload.message === 'keysUpdate' })
          .pluck('data')
          .filter(function(counts){ return R.compose(R.not, R.isEmpty)(counts) })
          .tap(drawCounts)
          .subscribe();

    }());

    var DRAW_IMAGES = (function(){
      var imageUrl = item.values()['product-image'];
      var $productImage = $(item.elm).children().children('.product-image-section');

      $productImage.css("background-image","url("+LOGIC.images.productImage(imageUrl)+")");
    }());

  });

  var pageTransition = function($button){
    $('.button').addClass('disabled');
    if($button){ $button.html('<div class="ui active mini inline loader"></div>') }
  };

  Rx.Observable.fromEvent($('.product-image-section'), 'click')
      .tap(function(event){ pageTransition(); })
      .map(function(event){ return { state: 'all', productTitle: $(event.target).parent().children('.product-action-section').children().children('.product-title').children('.product-name').html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: 'all', id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.product-name'), 'click')
      .tap(function(event){ pageTransition(); })
      .map(function(event){ return { state: 'all', productTitle: $(event.target).html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: 'all', id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.list-filter-button-all'), 'click')
      .tap(function(event){ pageTransition($(event.target)); })
      .map(function(event){ return { state: 'all', productTitle: $(event.target).parent().parent().siblings('.product-title').children().html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: payload.state, id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.list-filter-button-available'), 'click')
      .tap(function(event){ pageTransition($(event.target)); })
      .map(function(event){ return { state: 'available', productTitle: $(event.target).parent().parent().siblings('.product-title').children().html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: payload.state, id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.list-filter-button-assigned'), 'click')
      .tap(function(event){ pageTransition($(event.target)); })
      .map(function(event){ return { state: 'assigned', productTitle: $(event.target).parent().parent().siblings('.product-title').children().html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: payload.state, id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.list-filter-button-progress'), 'click')
      .tap(function(event){ pageTransition($(event.target)); })
      .map(function(event){ return { state: 'activated', productTitle: $(event.target).parent().parent().siblings('.product-title').children().html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: payload.state, id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

  Rx.Observable.fromEvent($('.list-filter-button-completed'), 'click')
      .tap(function(event){ pageTransition($(event.target)); })
      .map(function(event){ return { state: 'completed', productTitle: $(event.target).parent().parent().siblings('.product-title').children().html() } })
      .map(function(payload){ return R.compose(R.head, R.map(function(item){ return { state: payload.state, id: item['product-id'], name: item['product-name'] } }), R.filter(function(items){ return items['product-name'] === payload.productTitle }), R.map(function(item){ return item.values() }))(userList.items) })
      .tap(function(payload){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: payload.state, productId: payload.id, productName: payload.name } }) })
      .subscribe();

}());

///////////////////
// grid section ///
///////////////////

var GridSection = React.createClass({
  componentDidMount: function(){
    var frameDOM = $(React.findDOMNode(this)).contents();

    console.log(frameDOM)
  },
  render: function(){
    return <div className="ui raised segment">
      <div id="demo-grid" className="ui cards" height="100px;"></div>
    </div>;
  }
});

React.render(<GridSection />, document.getElementById('grid-section-mount'));

var GRID_DISPLAY = (function(){
  var demoGrid = $("#demo-grid");
  var grid = new Gridifier(demoGrid, {class: "grid-item"});

  var simulateDelayedAppends = function() {
    _.forEach(_.map(pageData.products, function(product){ return { name: product.name, id: product.id, image: product.background } }), function(product, i){
      var currentProduct = product;

      var gridItem = '<div class="card">' +
          '<div class="blurring dimmable image" ' +
          'style="background:url('+LOGIC.images.productImage(product.image)+') no-repeat center center; width:100%; height: 364px; background-size: cover;">' +
          '<div class="ui dimmer">' +
          '<div class="content">' +
          '<div class="center">' +
          '<button id="assign-keys-' + product.id + '" class="ui fluid button assign-keys" data-name="' + product.name + '">Assign Keys</button>'+
          '<button class="ui fluid button order-keys" style="margin-top:8px;">Order More Keys</button>'+

          '<div class="ui fluid selection dropdown" style="margin-top:8px;"><input class="ui left icon input" type="hidden" name="manage"><i class="setting icon"></i><i class="dropdown icon"></i><div class="default text">Manage</div><div class="menu">'+
          '<div id="all-keys-' + product.id + '" class="item" data-value="all">All</div>'+
          '<div id="assigned-keys-' + product.id + '" class="item" data-value="assigned">Assigned</div>'+
          '<div id="in-progress-keys-' + product.id + '" class="item" data-value="inProgress">In Progress</div>'+
          '<div id="completed-keys-' + product.id + '" class="item" data-value="completed">Completed</div>'+
          '</div></div>'+

          '</div>' +
          '</div>' +
          '</div>' +
          '</div>' +
          '<div class="content">'+
          '<div class="meta"><h2 class="ui">'+ product.name +'</h2></div></div>'+
          '</div>';

      demoGrid.append(gridItem);

      var DRAW_COUNTS = (function(){
        var product = currentProduct;
        var $assignKeysButton = $('#assign-keys-' + product.id);
        var $allButton = $('#all-keys-' + product.id);
        var $assignedButton = $('#assigned-keys-' + product.id);
        var $inProgressButton = $('#in-progress-keys-' + product.id);
        var $completedButton = $('#completed-keys-' + product.id);

        var drawCounts = function(){
          var counts = DATA.access({ source: 'counts', method: 'get' })[product.name];

          $assignKeysButton.html('Assign Keys (' + counts['available'] + ')');

          if(counts['available'] === 0){
            if(!$assignKeysButton.hasClass('disabled')){ $assignKeysButton.addClass('disabled') }
          } else {
            $assignKeysButton.removeClass('disabled');
          }

          $allButton.html('All (' + counts['total'] + ')');
          $assignedButton.html('Assigned (' + counts['assigned'] + ')');
          $inProgressButton.html('In Progress (' + counts['activated'] + ')');
          $completedButton.html('Completed (' + counts['completed'] + ')');
        };

        // initialize \\
        //TODO: remove with retries
        if(!R.isEmpty(DATA.access({ source: 'counts', method: 'get' }))){drawCounts();}

        // upkeep \\
        DATA.updates$
            .filter(function(payload){ return payload.message === 'keysUpdate' })
            .pluck('data')
            .filter(function(counts){ return R.compose(R.not, R.isEmpty)(counts) })
            .tap(drawCounts)
            .subscribe();

        var pageTransition = function($button){
          $button.html('<div class="ui active mini inline loader"></div>');
          $('.selection').addClass('disabled');
          $('.assign-keys').addClass('disabled');
          $('.order-keys').addClass('disabled');
        };

        Rx.Observable.fromEvent($allButton, 'click')
            .tap(function(event){ pageTransition($(event.target)); })
            .tap(function(){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: 'all', productId: product.id, productName: product.name } }) })
            .subscribe();

        Rx.Observable.fromEvent($assignedButton, 'click')
            .tap(function(event){ pageTransition($(event.target)); })
            .tap(function(){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: 'assigned', productId: product.id, productName: product.name } }) })
            .subscribe();

        Rx.Observable.fromEvent($inProgressButton, 'click')
            .tap(function(event){ pageTransition($(event.target)); })
            .tap(function(){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: 'activated', productId: product.id, productName: product.name } }) })
            .subscribe();

        Rx.Observable.fromEvent($completedButton, 'click')
            .tap(function(event){ pageTransition($(event.target)); })
            .tap(function(){ ACTIONS.publish({ message: 'navigateToSingleProductPage', data: { state: 'completed', productId: product.id, productName: product.name } }) })
            .subscribe();
      }());

      (function(gridItem) {
        setTimeout(function(){
          //demoGrid.append(gridItem);
        }, i * 200);
      })(gridItem);
    });

    $('.card .image').dimmer({
      on: 'hover'
    });

  };

  var watchDemoGrid = function() {
    setTimeout(function() {
      // Alternatively, you can use a shorthand - grid.appendNew()
      grid.append(grid.collectNew());
      watchDemoGrid();
      $('.ui.dropdown').dropdown();
    }, 100);
  };

  simulateDelayedAppends();
  watchDemoGrid();
}());