guide.js

'use strict'

Promise.all([
  _getGuideSection(),
  _getCollections(),
  _getSubscriptions()
]).then(valueArr => {
  var guideSection = valueArr[0]
  var collections = valueArr[1]
  var subscriptions = valueArr[2]

  var _getSubscriptionCount = function(id) {
    var guideItem = document.getElementById(id+'-guide-item')
    return guideItem.querySelector('span.no-count') ? 0 : parseInt(guideItem.querySelector('.guide-count-value').textContent)
  }

  var _getCollectionCount = function(id) {
    return Object.keys(subscriptions).filter(k => {
        return (_getSubscriptionGuideItem(k) !== null)
          && (subscriptions[k] == id)
      })
      .map(k => _getSubscriptionCount(k)).reduce((p,c) => p+c,0)
  }

  var _updateCollectionCount = function(id) {
    var count = Array.prototype.slice.call(_getCollectionGuideItem(id)
    .querySelector('ul').querySelectorAll('.guide-item'))
    .map(e => {
      return e.querySelector('span.no-count') ? 0 : parseInt(e.querySelector('.guide-count-value').textContent)
    }).reduce((p,c) => p+c,0)

    _getCollectionGuideItem(id).querySelector('.guide-count-value').textContent = count
  }

  var _getCollectionGuideItem = function(id) {
    return document.getElementById(id+'-collection-guide-item')
  }

  var _getSubscriptionGuideItem = function(id) {
    return document.getElementById(id+'-guide-item')
  }

  var _renderGuideCollectionItem = function(id,name) {
    return template.render('guide-section-item',{
      id: id,
      name: name,
      count: function(count) { return count === 0 ? '':count; }(_getCollectionCount(id))
    }).then(html => {
      var elem = document.createElement('li')
      document.querySelector('#guide-collection-list .guide-channels-list').appendChild(elem)
      elem.outerHTML = html

      Object.keys(subscriptions).filter(key => {
        return (_getSubscriptionGuideItem(key) !== null) &&
          (subscriptions[key] === id)
      }).forEach(key => {
        _cloneSubscriptionItem(key,id)
      })
    })
  }

  var _cloneSubscriptionItem = function(subId,collectionId) {
    var newNode = _getSubscriptionGuideItem(subId).cloneNode(true)
    newNode.removeAttribute('id')
    var thumb = newNode.querySelector('img')
    var imgSrc = thumb.dataset.thumb
    if(imgSrc !== undefined) {
      thumb.setAttribute('src',thumb.dataset.thumb)
    }

    document.getElementById(collectionId+'-guide-channel-list').appendChild(newNode)
  }

  var _updateCollectionListHeight = function(id) {
    var elem = _getCollectionGuideItem(id)
    if(elem.classList.contains('collection-list-open')) {
      var height = 28
      var id = elem.querySelector('.collection-item a').dataset.collectionId
      var listNode = document.getElementById(id+'-guide-channel-list')
      height += listNode.offsetHeight
      elem.style.maxHeight = height+'px'
    }
  }

  template.render('guide-section',{ title:'Collections' }).then(html => {
    var node = document.createElement('li')
    guideSection.parentNode.insertBefore(node,guideSection)
    node.outerHTML = html
    return document.querySelector('#guide-collection-list .guide-channels-list')
  }).then(node => {
    node.addEventListener('click',e => {
      if(e.target.closest('.collection-item a').hasAttribute('data-collection-id')) {
        var height = 28
        if(e.target.closest('.collection-item').classList.toggle('collection-list-open')) {
          var id = e.target.closest('.collection-item a').dataset.collectionId
          var listNode = document.getElementById(id+'-guide-channel-list')
          height += listNode.offsetHeight
        }
        e.target.closest('.collection-item').style.maxHeight = height+'px'
      }
    })

    return document.querySelector('#guide-collection-list .guide-channels-list')
  }).then(node => {
    return Object.keys(collections).map(id => {
      _renderGuideCollectionItem(id,collections[id].name)
    })
  })

  window.addEventListener('message',event => {
    if (event.source != window) {
      return
    }

    if (event.data.type) {
      switch(event.data.type) {
        case 'SUBSCRIPTION_ADDED':
          _cloneSubscriptionItem(event.data.subscriptionId,event.data.collectionId)
          _updateCollectionListHeight(event.data.collectionId)
          _updateCollectionCount(event.data.collectionId)
          break;
        case 'SUBSCRIPTION_REMOVED':
          var elem = _getCollectionGuideItem(event.data.collectionId)
          if(elem) {
            elem.querySelector('a[data-external-id="'+event.data.subscriptionId+'"]').closest('li').remove()
          _updateCollectionCount(event.data.collectionId)
          }
          break;
        case 'SUBSCRIPTION_UPDATED':
          _getCollectionGuideItem(event.data.oldValue)
            .querySelector('a[data-external-id="'+event.data.subscriptionId+'"]').closest('li').remove()
          _cloneSubscriptionItem(event.data.subscriptionId,event.data.newValue)
          _updateCollectionListHeight(event.data.newValue)
          _updateCollectionCount(event.data.newValue)
          _updateCollectionCount(event.data.oldValue)
          break;
        case 'COLLECTION_ADDED':
          _renderGuideCollectionItem(event.data.id,event.data.name)
          break;
        case 'COLLECTION_REMOVED':
          _getCollectionGuideItem(event.data.id).remove()
          break;
        case 'COLLECTION_UPDATED':
          break;
      }
    }
  })
})