material 0.9.6 → 0.9.7

package/src/map/build.js

@@ -1,103 +0,0 @@
-import observer from '../module/element/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.element = document.createElement(this.options.tag)
-    this.element.classList.add(this.options.class)
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    this.label = document.createElement('div')
-    this.label.classList.add('country-label')
-    document.body.appendChild(this.label)
-
-    this.buildMap()
-    this.screenSize()
-
-    observer.insert(this.element, () => {
-      // 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.element.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.element.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

@@ -1,114 +0,0 @@
-
-export default {
-  /**
-   * [updateCountries description]
-   * @param  {[type]} countries [description]
-   * @return {[type]}           [description]
-   */
-  updateCountries (isocodes) {
-    // console.log('updateCountries', isocodes.length)
-    const list = document.querySelectorAll('svg.mapsvg g')
-    // console.log('svg', list)
-
-    for (let 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)
-    const i = Math.floor(Math.random() * isocodes.length)
-    this.isocodes = isocodes[i]
-    this.highlight(this.isocodes)
-
-    this.emit('select', this.isocodes)
-  },
-
-  /**
-   * [setAllCountries description]
-   */
-  setAllCountries () {
-    const list = document.querySelectorAll('svg.mapsvg g')
-    // console.log('svg', list)
-
-    for (let 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 (let 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)
-    const 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 () {
-    const group = document.querySelector('svg.mapsvg g.playing')
-    group.classList.remove('playing')
-  }
-}

package/src/map/display.js

@@ -1,135 +0,0 @@
-
-export default {
-  setMap (decades, cb) {
-    // console.log('setMap', decades)
-    // object used to cache map by decade
-    this.mapsvg = this.mapsvg || {}
-
-    const 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
-      const 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)
-    const parts = this.map.querySelectorAll('g[data-isocode]')
-    const country = {}
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i]
-      const 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.element.offsetWidth
-    this.offsetY = this.screen.height - this.element.offsetHeight
-
-    // console.log('--', this.offsetX / 2 + 'px')
-
-    this.element.style.left = (this.offsetX / 2) + 'px'
-    this.element.style.top = (this.offsetY / 2) + 'px'
-
-    // if (isTouchScreen()) {
-    //   this.element.style.top = (this.offsetY / 2) + 70 + 'px'
-    // } else {
-    //   this.element.style.top = -1200 + 'px'
-    // }
-  },
-
-  updateMap () {
-    const offsetX = this.element.offsetWidth - this.map.offsetWidth
-    // var offsetY = this.element.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')
-    const width = window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth
-
-    const height = window.innerHeight ||
-    document.documentElement.clientHeight ||
-    document.body.clientHeight
-
-    const screen = {
-      width,
-      height
-    }
-
-    this.screen = screen
-
-    return screen
-  }
-
-}

package/src/map/focus.js

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

package/src/map/init.js

@@ -1,24 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 || []
-      const 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)
-
-    const 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

@@ -1,71 +0,0 @@
-
-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 || []
-    const l = this.isocodes.length
-    for (let i = 0; i < l; i++) {
-      const 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) }
-  }
-}