material 0.4.2 → 0.5.0

package/src/map/display.js

@@ -0,0 +1,135 @@
+
+export default {
+  setMap (decades, cb) {
+    // console.log('setMap', decades)
+    // object used to cache map by decade
+    this.mapsvg = this.mapsvg || {}
+
+    var decade = decades[0]
+
+    // do not update map when in taxi mode
+    // if (typeof decade !== 'number') {
+    //   return
+    // }
+
+    // map is cached, use it
+    if (this.mapsvg[decade]) {
+      this.initMap(this.mapsvg[decade], decades)
+
+      // execute callback
+      if (cb) cb()
+    } else {
+      // fetch map for the corresponding decade
+      var url = this.options.path + decade + '.svg'
+      // console.log(url)
+      fetch(url).then((response) => {
+        response.text().then((map) => {
+          this.mapsvg[decade] = map
+          this.initMap(map, decades)
+
+          // execute callback
+          if (cb) cb()
+        })
+      })
+    }
+  },
+
+  initMap (map, decades) {
+    // console.log('initMap', decades)
+    this.insertMap(map)
+
+    this.highlight(this.isocodes)
+    this.publish('mapReady', decades)
+
+    // this.optimizeMap(decades[0])
+
+    // this is the beginning of the map that will hide path
+    // if out of the viewport
+
+    // this.updatePaths()
+    // this.updateViewport()
+  },
+
+  optimizeMap (decade) {
+    // console.log('optimizing map', decade)
+    var parts = this.map.querySelectorAll('g[data-isocode]')
+    var country = {}
+
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i]
+      var code = part.dataset.isocode
+      if (!country[code]) {
+        country[code] = part
+      } else {
+        country[code].appendChild(part.firstChild)
+        part.parentNode.removeChild(part)
+      }
+    }
+  },
+
+  insertMap (map) {
+    this.svg.innerHTML = map
+    // this.updateSize()
+    this.updatePosition()
+  },
+
+  updatePosition () {
+    // console.log('updatePosition')
+    // this.screenSize()
+    // this.updateRoot()
+    this.map.classList.add('show')
+    // this.updateMap()
+  },
+
+  updateRoot () {
+    this.offsetX = this.screen.width - this.root.offsetWidth
+    this.offsetY = this.screen.height - this.root.offsetHeight
+
+    // console.log('--', this.offsetX / 2 + 'px')
+
+    this.root.style.left = (this.offsetX / 2) + 'px'
+    this.root.style.top = (this.offsetY / 2) + 'px'
+
+    // if (isTouchScreen()) {
+    //   this.root.style.top = (this.offsetY / 2) + 70 + 'px'
+    // } else {
+    //   this.root.style.top = -1200 + 'px'
+    // }
+  },
+
+  updateMap () {
+    var offsetX = this.root.offsetWidth - this.map.offsetWidth
+    // var offsetY = this.root.height - this.map.offsetHeight
+
+    // console.log('--', this.offsetX / 2 + 'px')
+
+    this.map.style.left = (offsetX / 2) + 'px'
+
+    // if (isTouchScreen()) {
+    //   this.map.style.top = (offsetY / 2) + 70 + 'px'
+    // } else {
+    //   this.map.style.top = -1200 + 'px'
+    // }
+  },
+
+  screenSize () {
+    // console.log('screensize')
+    var width = window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth
+
+    var height = window.innerHeight ||
+    document.documentElement.clientHeight ||
+    document.body.clientHeight
+
+    var screen = {
+      width: width,
+      height: height
+    }
+
+    this.screen = screen
+
+    return screen
+  }
+
+}

package/src/map/focus.js

@@ -0,0 +1,39 @@
+export default {
+  /**
+   * Focus on country
+   * @param  {[type]} country isocode
+   * @return {[type]}         [description]
+   */
+  focus (country) {
+    // console.log('focus', country)
+    var part = this.getCountryParts(country)
+    // console.log('focus on part', part)
+    this.draggable.focus(part)
+
+    return part
+  },
+
+  getCountryParts (country) {
+    // console.log('focus', country)
+    var parts = this.map.querySelectorAll('[data-isocode="' + country + '"]')
+    // console.log('parts', parts)
+
+    return this.getBiggestPart(parts)
+  },
+
+  getBiggestPart (parts) {
+    var surface = 0
+    var biggest = null
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i]
+      var rect = part.getBoundingClientRect()
+
+      if (rect.width * rect.height > surface) {
+        surface = rect.width * rect.height
+        biggest = part
+      }
+    }
+
+    return biggest
+  }
+}

package/src/map/init.js

@@ -0,0 +1,24 @@
+import mediator from '../module/mediator'
+import { isocode } from '../data/country'
+
+export default {
+  /**
+   * init method
+   * @param  {Object} Options object
+   * @return {void} Null
+   */
+  init (options) {
+    this.initMediator()
+
+    this.mode = this.options.mode
+    this.country = isocode
+    this.isocodes = []
+    this.zoom = this.options.zoom
+    this.playing = null
+    this.isocodes = this.options.isocodes || []
+  },
+
+  initMediator () {
+    mediator.installTo(this)
+  }
+}

package/src/map/mode.js

@@ -0,0 +1,44 @@
+export default {
+  setMode (mode, options) {
+    // console.log('setMode', mode, this.options)
+    if (this.mode === mode) return
+
+    if (mode === 'unique') {
+      this.setUnique()
+    } else if (mode === 'multiple') {
+      this.setMultiple()
+    }
+    this.mode = mode
+
+    return this
+  },
+
+  setUnique () {
+    this.isocodes = this.isocodes || []
+
+    if (this.isocodes.length > 0) {
+      this.list = this.isocodes.slice()
+    }
+
+    this.highlight(this.isocodes, false)
+
+    this.isocodes = this.info.slice()
+    this.highlight(this.isocodes)
+  },
+
+  setMultiple () {
+    // console.log('setMultiple')
+
+    this.info = this.isocodes.slice()
+
+    this.highlight(this.isocodes, false)
+
+    if (this.list) {
+      this.isocodes = this.list.slice()
+    }
+
+    this.highlight(this.isocodes)
+
+    return this
+  }
+}

package/src/map/mouse.js

@@ -0,0 +1,65 @@
+import isTouch from '../module/touchscreen'
+
+export default {
+  mouseUp (event) {
+    // console.log('mouseup', event.target)
+    if (this.clickSelect || !this.slide.classList.contains('dragging')) {
+      if (event.target.classList.contains('empty')) { return }
+
+      event.preventDefault()
+      event.target.classList.remove('dragging')
+
+      if (event.target.dataset.island !== undefined) {
+        this.selectIsland(event.target)
+      }
+
+      if (event.target.parentNode.dataset.isocode !== undefined) {
+        this.select(event.target.parentNode.dataset.isocode, event.target.parentNode)
+      }
+    }
+  },
+
+  mouseDown (event) {
+    // if (isTouch()) return
+    // console.log('mouseup', this.clickSelect)
+    this.clickSelect = true
+    this.clickTimeOut = setTimeout(() => {
+      this.clickSelect = false
+    }, 200)
+  },
+
+  mouseMove (event) {
+    // console.log('over', event.relatedTarget, event.clientX, event.clientY)
+    if (event.target.parentNode.dataset.isocode !== undefined) {
+      // console.log('enter', event.clientX, event.clientY)
+      this.label.innerHTML = this.country[event.target.parentNode.dataset.isocode]
+      if (!isTouch()) {
+        this.label.style.left = (event.clientX - 24) + 'px'
+        this.label.style.top = (event.clientY - 36) + 'px'
+      }
+      this.label.classList.add('show')
+    } else if (event.target.dataset.island !== undefined) {
+      this.label.innerHTML = event.target.dataset.island
+      this.label.style.left = (event.clientX - 24) + 'px'
+      this.label.style.top = (event.clientY - 36) + 'px'
+      this.label.classList.add('show')
+    } else {
+      this.label.innerHTML = ''
+      this.label.classList.remove('show')
+    }
+  },
+
+  mouseLeave () {
+    this.label.innerHTML = ''
+    this.label.classList.remove('show')
+  },
+
+  mouseOut () {
+    this.label.innerHTML = ''
+    this.label.classList.remove('show')
+  },
+
+  mouseClick (event) {
+    event.preventDefault()
+  }
+}

package/src/map/select.js

@@ -0,0 +1,68 @@
+export default {
+  select (isocode, group) {
+    this.isocodes = this.isocodes || []
+    // console.log('select', isocode)
+    if (!isocode) {
+      return
+    }
+
+    // console.log('islands', this.islands)
+
+    this.unSelectIsland()
+
+    if (this.mode !== 'multiple') {
+      if (this.isocodes[0] === isocode) return
+      this.highlight(this.isocodes[0], false)
+      this.highlight(isocode)
+      this.isocodes = [isocode]
+    } else {
+      this.isocodes = this.isocodes || []
+      var index = this.isocodes.indexOf(isocode)
+      if (index > -1) {
+        this.isocodes.splice(index, 1)
+        this.highlight(isocode, false)
+      } else {
+        this.isocodes.push(isocode)
+        this.highlight(isocode)
+      }
+    }
+
+    this.publish('countrySelect', this.isocodes)
+
+    return this
+  },
+
+  selectIsland (island) {
+    // console.log('selectIsland', island)
+    if (this.island === island) return
+
+    if (this.island) {
+      this.island.classList.remove('selected')
+    }
+
+    this.island = island
+    this.island.classList.add('selected')
+    this.islands.splashScreen(island.dataset.splash)
+
+    this.islands.selectecd = island
+
+    if (this.isocodes && this.isocodes[0]) {
+      this.highlight(this.isocodes, false)
+    }
+
+    this.isocodes = null
+
+    // console.log('islands list', this.islands.list, island.dataset.id)
+
+    var info = this.islands.list[island.dataset.id]
+
+    this.emit('island', info)
+  },
+
+  unSelectIsland () {
+    if (this.island) {
+      this.island.classList.remove('selected')
+      this.island = null
+    }
+  }
+}

package/src/map/set.js

@@ -0,0 +1,71 @@
+
+export default {
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   */
+  set (prop, value, options) {
+    // console.log('set worldmap', prop, value)
+    switch (prop) {
+      case 'isocodes':
+        this.setIsocodes(value)
+        break
+      case 'zoom':
+        this.setZoom(value, options)
+        break
+      case 'selected':
+        this.highlight(value, options)
+        break
+      case 'map':
+        this.setMap(value)
+        break
+      case 'mode':
+        this.setMode(value)
+        break
+      default:
+        this.setIsocodes(prop)
+        break
+    }
+
+    return this
+  },
+
+  get (prop) {
+    // console.log('set worldmap', prop, value)
+    switch (prop) {
+      case 'zoom':
+        return this.zoom
+        break
+      case 'isocodes':
+        return this.isocodes
+        break
+      case 'map':
+        return this.map
+        break
+      case 'mode':
+        return this.mode
+        break
+      default:
+        return this.isocodes
+        break
+    }
+  },
+
+  setIsocodes (isocodes) {
+    this.isocodes = this.isocodes || []
+    var l = this.isocodes.length
+    for (var i = 0; i < l; i++) {
+      var isocode = this.isocodes.splice(0, 1)
+      this.highlight(isocode, false)
+    }
+
+    this.isocodes = isocodes
+    this.highlight(this.isocodes)
+  },
+
+  setZoom (delta) {
+    // console.log('set zoom', delta)
+    if (this.draggable.setZoom) { this.draggable.setZoom(delta) }
+  }
+}

package/src/map/viewport.js

@@ -0,0 +1,46 @@
+export default {
+
+  updatePaths () {
+    this.path = {}
+    this.paths = []
+    var paths = this.paths = this.map.querySelectorAll('path')
+    this.path = this.path || {}
+
+    for (var i = 0; i < paths.length; i++) {
+      var path = paths[i]
+      var rect = path.getBoundingClientRect()
+      this.path[i] = rect
+    }
+  },
+
+  updateViewport () {
+    console.log('updateViewport', this.rect, this.screen)
+    var paths = this.paths
+    for (var i = 0; i < paths.length; i++) {
+      var path = paths[i]
+      if (this.viewport(this.path[i])) {
+        path.classList.remove('hide')
+      } else {
+        path.classList.add('hide')
+      }
+    }
+  },
+
+  viewport (rect) {
+    if (!rect) return
+
+    // *var rect = this.path[path]
+
+    var top = rect.top
+    var left = rect.left
+    var width = rect.width
+    var height = rect.height
+
+    return (
+      top >= this.screen.y &&
+      left >= this.screen.x &&
+      (top + height) <= (this.screen.y + this.screen.height) &&
+      (left + width) <= (this.screen.x + this.screen.width)
+    )
+  }
+}

package/src/map.js

@@ -0,0 +1,71 @@
+
+import mediator from '../module/mediator'
+import emitter from 'material/src/module/emitter'
+import attach from 'material/src/module/attach'
+
+import init from './map/init'
+import build from './map/build'
+import viewport from './map/viewport'
+import countries from './map/countries'
+import set from './map/set'
+import mouse from './map/mouse'
+import display from './map/display'
+import mode from './map/mode'
+import select from './map/select'
+import focus from './map/focus'
+
+const events = [
+  ['root.mousedown', 'mouseDown'],
+  ['root.mouseup', 'mouseUp'],
+  ['root.mousemove', 'mouseMove'],
+  ['root.mouseleave', 'mouseLeave'],
+  ['root.mouseout', 'mouseOut'],
+  ['root.click', 'mouseClick'],
+  ['root.touchStart', 'mouseClick']
+]
+
+const defaults = {
+  class: 'worldmap',
+  tag: 'main',
+  zoom: 0.3,
+  isocodes: [],
+  mode: 'unique',
+  path: '/dist/map/',
+  pinchZoom: {
+    maxZoom: 128,
+    minZoom: 3,
+    setOffsetsOnce: true,
+    verticalPadding: 64,
+    horizontalPadding: 64,
+    tapZoomFactor: 0
+  }
+}
+
+class Map {
+  /**
+   * Constructor component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    Object.assign(
+      this, attach, emitter, init, build, viewport, mouse,
+      mode, countries,
+      set, display, select, focus
+    )
+
+    mediator.installTo(this)
+
+    this.init(options)
+
+    this.build()
+    this.attach(events)
+
+    this.publish('initWorldmap')
+
+    return this
+  }
+}
+
+export default Map

package/src/module/attach.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import extract from './extract'
 
 /**
@@ -25,26 +23,26 @@ export default {
     events.map((def) => {
       var e = extract.e(instance, def[0])
       var f = extract.f(instance, def[1])
-      var o = def[2] || false
-
-      // console.log('attach', def[0], def[1])
+      var option = def[2]
 
       var keys = def[1].split('.')
+
       keys.pop()
-      var bound = this._path(keys.join('.'))
+      var bound = this.last(keys.join('.'))
+
+      if (f && bound && e && e.element && e.element.addEventListener) {
+        if (!f) { console.log('error') }
 
-      if (e.element && e.element.addEventListener) {
-        e.element.addEventListener(e.name, f.bind(bound), o)
-      } else if (e.element && e.element.on) {
-        // console.log('on', e.name)
-        if (!f) {
-          console.log('can\'t attach event', e.name, 'to', def[1])
+        if (option) {
+          e.element.addEventListener(e.name, f.bind(bound), option)
         } else {
-          e.element.on(e.name, f.bind(bound))
+          e.element.addEventListener(e.name, f.bind(bound))
         }
+      } else if (e && e.element && e.element.on && f && bound) {
+        e.element.on(e.name, f.bind(bound))
       } else {
-        console.log('can\'t attach', def[0], def[1])
-        // console.log('--', e, f)
+        // console.trace('can\'t attach', def[0])
+        // console.log('can\'t attach', def[0])
       }
     })
 
@@ -56,7 +54,8 @@ export default {
    * @param  {string} str Object path for example key1.key2.key3
    * @return {value} The value of the last reference
    */
-  _path: function (str) {
+  last: function (str) {
+    // console.log('_path', str)
     if (!str) return this
     else if (!str.match(/\./)) return this[str]
     var last