material 0.4.3 → 0.5.0

package/src/list/virtual.js

@@ -1,167 +1,235 @@
+import passiveEvents from '../module/passive'
 import emitter from '../module/emitter'
-import observer from '../module/observer'
 
-const defaults = {
-  class: 'virtual',
-  width: '100%',
-  height: '100%'
+// based on https://sergimansilla.com/blog/virtual-scrolling/
 
+function VirtualList (options) {
+  this.options = Object.assign({}, options || {})
+  Object.assign(this, emitter)
+
+  this.itemHeight = options.itemHeight
+
+  // console.log('itemHeight', this.itemHeight)
+  this.next = false
+  this.size = options.size
+  this.chunkSize = options.size
+
+  this.items = options.items
+  this.render = options.render
+
+  this.scroller = VirtualList.createScroller()
+  this.container = options.container
+
+  // get offset height
+  this.setOffset()
+
+  // console.log('itemBySreen', this.itemsByScreen)
+
+  window.addEventListener('resize', () => {
+    clearTimeout(this.resizeTimeout)
+
+    this.resizeTimeout = setTimeout(() => {
+      this.setOffset()
+    }, 50)
+  })
+
+  this.container.classList.add('virtual')
 }
 
-class Virtual {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
-
-    this.items = this.options.items
-    this.itemHeight = this.options.itemHeight
-    this.render = this.options.render
-
-    this.build()
-    this.setup()
-    this.attach()
-
-    return this
-  }
+VirtualList.prototype._renderChunk = function (node, from, number) {
+  // console.log('_renderChunk', from, number, this.options.class)
 
-  build () {
-    this.root = document.createElement('ul')
-    this.root.classList.add(this.options.class)
+  var fragment = document.createDocumentFragment()
+  fragment.appendChild(this.scroller)
 
-    this.buildScroller()
+  var last = from + number
+  if (last > this.count) last = this.count
 
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-  }
+  for (var i = from; i < last; i++) {
+    var item = this.render(i)
 
-  buildScroller () {
-    // console.log('build')
-    this.scroller = document.createElement('div')
-    this.scroller.classList.add('scroller')
-    this.root.appendChild(this.scroller)
+    item.style.position = 'absolute'
+    item.style.top = i * this.itemHeight + 'px'
+    fragment.appendChild(item)
   }
 
-  setup () {
-    // console.log('setup', this.root.offsetHeight, this.itemHeight)
-    this.itemPerView = Math.ceil(this.root.offsetHeight / this.itemHeight)
-    // console.log('itemPerView', this.itemPerView)
-    this.maxBuffer = this.itemPerView * this.itemHeight
-    // console.log('maxBuffer', this.maxBuffer)
+  node.innerHTML = ''
+  node.appendChild(fragment)
 
-    this.lastRepaintY = 0
-    this.lastScrolled = 0
+  // console.log('last', last, 'count', this.count, 'size', this.size, 'chunk')
+  // console.log('---------------------------------')
+  // console.log('last && last > (this.count - this.size / 2)')
+  // console.log(last + '>' + '(' + this.count + '-' + this.size + '/' + '2)' + (this.count - this.size / 2))
 
-    return this
+  if (this.next && last && last > (this.count - this.size / 2)) {
+    // console.log('emit next', last, this.count, this.size)
+    this.emit('next', this.count)
   }
 
-  attach () {
-    var self = this
-
-    // As soon as scrolling has stopped, this interval asynchronouslyremoves all
-    // the nodes that are not used anymore
-    this.rmNodeInterval = setInterval(() => {
-      if (Date.now() - this.lastScrolled > 100) {
-        var badNodes = this.root.querySelectorAll('[data-rm="1"]')
-        for (var i = 0, l = badNodes.length; i < l; i++) {
-          this.root.removeChild(badNodes[i])
-        }
-      }
-    }, 300)
-
-    function onScroll (e) {
-      // console.log('this.lastRepaintY', self.lastRepaintY)
-      var scrollTop = e.target.scrollTop // Triggers reflow
-      if (!this.lastRepaintY || Math.abs(scrollTop - self.lastRepaintY) > self.maxBuffer) {
-        var first = parseInt(scrollTop / self.itemHeight) - self.itemPerView
-        self._renderChunk(first < 0 ? 0 : first)
-        self.lastRepaintY = scrollTop
-      }
-
-      this.lastScrolled = Date.now()
-      e.preventDefault && e.preventDefault()
-    }
+  this.next = true
+
+  // console.log('last', final, this.count)
+}
 
-    this.root.addEventListener('scroll', onScroll)
+VirtualList.prototype.set = function (items) {
+  // console.log('set', items.length)
+  this.next = false
+  this.items = items
+  this.count = items.length
 
-    // var refresh
-    // window.onresize = () => {
-    //   clearTimeout(refresh)
-    //   refresh = setTimeout(() => {
-    //     this.refresh()
-    //   }, 300)
+  // console.log('count', this.count)
+
+  if (this.count < 1 || this.count === undefined) return
+
+  this.container.innerHTML = ''
+  this.container.scrollTop = 0
+
+  var height = this.itemHeight * this.count
+
+  this.scroller.style.height = height + 'px'
+
+  this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // console.log('offsetHeioght', this.container.offsetHeight)
+  // console.log('this.itemsByScreen', this.itemsByScreen)
+
+  // Cache 4 times the number of items that fit in the container viewport
+  var size = this.itemsByScreen * 4
+  this._renderChunk(this.container, 0, size)
+
+  this.size = size
+
+  // console.log('emit size', size)
+  this.emit('size', size)
+
+  var self = this
+  var lastRepaintY
+  var maxBuffer = this.itemsByScreen * this.itemHeight
+
+  function onScroll (e) {
+    // console.log('scroll', e.target.scrollTop, height)
+    var scrollTop = e.target.scrollTop
+
+    // console.log('itemsByScreen', self.itemsByScreen)
+
+    // console.log('offsetHeight', self.container.offsetHeight)
+    // console.log('size', self.size)
+    // if (this.itemsByScreen === 0) {
+    //   size = self.size = this.itemsByScreen * 4
     // }
+
+    // console.log('scrollTop', scrollTop)
+
+    if (scrollTop < 0) return
+
+    // console.log('itemsByScreen', self.itemsByScreen)
+
+    var first = parseInt(scrollTop / self.itemHeight) - self.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    size = self.itemsByScreen * 4
+
+    if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+      self._renderChunk(self.container, first, size)
+      lastRepaintY = scrollTop
+    }
+
+    var progress = Math.ceil((scrollTop / self.itemHeight) + self.itemsByScreen) - 1
+    // console.log('progress', progress)
+    self.emit('progress', progress)
+
+    // e.preventDefault && e.preventDefault()
   }
 
-  refresh () {
-    this.itemPerView = Math.ceil(this.root.offsetHeight / this.itemHeight)
-    this.maxBuffer = this.itemPerView * this.itemHeight
+  // console.log('this.scrollEvents', this.scrollEvents)
 
-    return this
+  if (!this.scrollEvents) {
+    this.container.addEventListener('scroll', onScroll, passiveEvents() ? { passive: true } : false)
+    this.scrollEvents = true
   }
 
-  set (items) {
-    // console.log('set', items)
-    if (!items || Array.isArray(items) === false) {
-      return
-    }
+  // this.container.addEventListener('scroll', onScroll)
+}
 
-    this.root.innerHTML = ''
-    this.root.scrollTop = 0
-    if (items.length < 1 || items === undefined) return
+VirtualList.prototype.update = function (items) {
+  // console.log('update', items)
+  this.items = items || this.items
 
-    this.buildScroller()
+  if (!this.items) return
 
-    this.items = items
-    this.itemsCount = items.length
+  this.count = this.items.length
 
-    this.setup()
+  // var itemsByScreen = Math.ceil(this.container.offsetHeight / this.itemHeight)
+  var cachedItemsLen = this.itemsByScreen * 4
+  var scrollTop = this.container.scrollTop
 
-    this.scroller.style.height = (this.itemHeight * this.itemsCount) + 'px'
-    this.itemBuffer = this.itemPerView * 3
+  var height = this.itemHeight * this.count
 
-    this._renderChunk(0)
-  }
+  this.scroller.style.height = height + 'px'
 
-  createRow (i) {
-    // console.log('createRow', this.render)
-    var item = this.render(i)
+  var first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+  first = first < 0 ? 0 : first
 
-    item.classList.add('vrow')
-    item.style.position = 'absolute'
-    item.style.top = (i * this.itemHeight) + 'px'
-    return item
-  }
+  // console.log('first', first, cachedItemsLen)
 
-  _renderChunk (from) {
-    // console.log('_renderChunk', from, this.root)
-    var finalItem = from + this.itemBuffer
-    if (finalItem > this.itemsCount) { finalItem = this.itemsCount }
+  this._renderChunk(this.container, first, cachedItemsLen)
+}
 
-    // Append all the new rows in a document fragment that we will later append to
-    // the parent node
-    var fragment = document.createDocumentFragment()
+VirtualList.prototype.add = function (items) {
+  // console.log('add', items.length)
+  this.items = items || this.items
 
-    // console.log('finalItem', finalItem)
+  if (!this.items) return
 
-    for (var i = from; i < finalItem; i++) {
-      fragment.appendChild(this.createRow(i))
-    }
+  this.count = this.items.length
 
-    // Hide and mark obsolete nodes for deletion.
-    for (var j = 1, l = this.root.childNodes.length; j < l; j++) {
-      this.root.childNodes[j].style.display = 'none'
-      this.root.childNodes[j].setAttribute('data-rm', '1')
-    }
+  var height = this.itemHeight * this.count
+
+  this.scroller.style.height = height + 'px'
+}
+
+VirtualList.prototype.reset = function () {
+  // console.log('reset')
+  this.items = []
+  this.count = 0
+
+  this.container.scrollTop = 0
+
+  this.scroller.style.height = 0
+}
+
+VirtualList.prototype.setOffset = function (info) {
+  // console.log('setOffset', info)
 
-    // console.log('fragment', fragment)
-    this.root.appendChild(fragment)
+  this.offsetHeight = this.container.offsetHeight
+  if (this.offsetHeight < 1) {
+    this.offsetHeight = window.innerHeight ||
+    document.documentElement.clientHeight ||
+    document.body.clientHeight
   }
+
+  this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // console.log('new itemsByScreen', this.itemsByScreen)
+
+  var itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+  // Cache 4 times the number of items that fit in the container viewport
+  var size = itemsByScreen * 4
+
+  return size
+}
+
+VirtualList.prototype.getCount = function () {
+  // console.log('getCount')
+
+  return this.count
+}
+
+VirtualList.createScroller = function () {
+  var scroller = document.createElement('div')
+  scroller.classList.add('scroller')
+  return scroller
 }
 
-export default Virtual
+export default VirtualList

package/src/map/build.js

@@ -0,0 +1,103 @@
+import observer from '../module/observer'
+import Islands from '../view/islands'
+import preventPullRefresh from '../module/preventPullRefresh'
+import touch from '../module/touchscreen'
+import PinchZoom from '../module/pinchzoom'
+import PanZoom from '../module/panzoom'
+// import PinchZoomElement from '../../module/pinch-zoom'
+
+export default {
+
+  /**
+   * Build worlddmap related methods
+   * @return {void} This class instance
+   */
+  build () {
+    this.root = document.createElement(this.options.tag)
+    this.root.classList.add(this.options.class)
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    this.label = document.createElement('div')
+    this.label.classList.add('country-label')
+    document.body.appendChild(this.label)
+
+    this.buildMap()
+    this.screenSize()
+
+    observer.insert(this.root, () => {
+      // if (touch()) {
+      //   // console.log('pinchzoom', this.options.pichZoom)
+      //   this.draggable = new PinchZoom(this.slide, {
+      //     maxZoom: 128,
+      //     minZoom: 3,
+      //     setOffsetsOnce: true,
+      //     verticalPadding: 64,
+      //     horizontalPadding: 64,
+      //     onZoomStart: function (object, event) {
+      //       object.el.classList.add('zoom')
+      //     },
+      //     onZoomEnd: function (object, event) {
+      //       object.el.classList.remove('zoom')
+      //     },
+      //     onDragStart: function (object, event) {
+      //       object.el.classList.add('drag')
+      //     },
+      //     onDragEnd: function (object, event) {
+      //       object.el.classList.remove('drag')
+      //     }
+
+      //   })
+      // } else {
+        // console.log('panzoom')
+      this.draggable = new PanZoom(this.slide, {
+        maxZoom: 16,
+        minZoom: 1
+      })
+      // }
+
+      this.rect = this.root.getBoundingClientRect()
+
+      this.screen = {
+        y: window.pageYOffset,
+        x: window.pageXOffset,
+        height: window.innerHeight,
+        width: window.innerWidth
+      }
+    })
+
+    this.islands = new Islands({
+      container: this.options.container,
+      map: this.map
+    })
+
+    return this
+  },
+
+  /**
+   * BuildMmap method for container background and vector map
+   * @return {[type]} [description]
+   */
+  buildMap () {
+    // console.log('buildmap')
+    this.slide = document.createElement('div')
+    this.slide.classList.add('slide')
+    this.root.appendChild(this.slide)
+
+    this.map = document.createElement('div')
+    this.map.classList.add('map')
+    this.slide.appendChild(this.map)
+
+    this.bg = document.createElement('div')
+    this.bg.classList.add('bg')
+    this.map.appendChild(this.bg)
+
+    this.svg = document.createElement('div')
+    this.svg.classList.add('svg')
+    this.map.appendChild(this.svg)
+
+    preventPullRefresh(this.map)
+  }
+}

package/src/map/countries.js

@@ -0,0 +1,114 @@
+
+export default {
+  /**
+   * [updateCountries description]
+   * @param  {[type]} countries [description]
+   * @return {[type]}           [description]
+   */
+  updateCountries (isocodes) {
+    // console.log('updateCountries', isocodes.length)
+    var list = document.querySelectorAll('svg.mapsvg g')
+    // console.log('svg', list)
+
+    for (var i = 0; i < list.length; i++) {
+      if (isocodes.indexOf(list[i].dataset.isocode) > -1) {
+        list[i].classList.remove('empty')
+      } else {
+        list[i].classList.add('empty')
+      }
+    }
+
+    // set a random isocode if not defined
+    // if (!this.isocode) {
+    //   this.random(isocodes)
+    // }
+  },
+
+  /**
+   * [random description]
+   * @param  {[type]} isocodes [description]
+   * @return {[type]}          [description]
+   */
+  random (isocodes) {
+    // console.log('random', isocodes.length)
+    let i = Math.floor(Math.random() * isocodes.length)
+    this.isocodes = isocodes[i]
+    this.highlight(this.isocodes)
+
+    this.emit('select', this.isocodes)
+  },
+
+  /**
+   * [setAllCountries description]
+   */
+  setAllCountries () {
+    var list = document.querySelectorAll('svg.mapsvg g')
+    // console.log('svg', list)
+
+    for (var i = 0; i < list.length; i++) {
+      list[i].classList.remove('empty')
+    }
+  },
+
+  /**
+   * Highlight/unhighlight country on the for the given isocode
+   * @param  {[type]} isocode [description]
+   * @param  {[type]} option  [description]
+   * @return {[type]}         [description]
+   */
+  highlight (isocodes, option) {
+    // console.log('highlight', isocode, option)
+
+    if (!isocodes) return
+
+    if (typeof isocodes === 'string') {
+      this.highlightCountry(isocodes, option)
+    } else {
+      for (var i = 0; i < isocodes.length; i++) {
+        this.highlightCountry(isocodes[i], option)
+      }
+    }
+  },
+
+  /**
+   * [highlightCountry description]
+   * @param  {[type]} isocode [description]
+   * @param  {[type]} option  [description]
+   * @return {[type]}         [description]
+   */
+  highlightCountry (isocode, option) {
+    // console.log('highlightCountry', isocode, option)
+    var group = this.map.querySelector('[data-isocode="' + isocode + '"]')
+
+    if (!group) return
+
+    if (option === false) {
+      group.classList.remove('selected')
+    } else {
+      group.classList.add('selected')
+    }
+
+    if (option === 'playing') {
+      this.removePlaying()
+    }
+  },
+
+  /**
+   * Highlight/unhighlight country on the for the given isocode
+   * @param  {[type]} isocode [description]
+   * @param  {[type]} option  [description]
+   * @return {[type]}         [description]
+   */
+  highlightGroup (group) {
+    // console.log('highlightGroup', group)
+
+    if (!group) return
+
+    group.classList.add('selected')
+  },
+
+  removePlaying () {
+    var group = document.querySelector('svg.mapsvg g.playing')
+    group.classList.remove('playing')
+  }
+}