material 0.7.0 → 0.7.2

package/src/list.js

@@ -1,255 +1,67 @@
-'use strict'
-
-import Item from './item'
-import Divider from './divider'
-
-// import init from './mixin/init'
-import emitter from './module/emitter'
-import insert from './element/insert'
-import css from './module/css'
-import attach from './module/attach'
+import * css from './module/css'
 
 const defaults = {
-  prefix: 'material',
-  class: 'list',
-  tag: 'ul',
-  functions: ['render', 'select'],
-  target: 'LI',
-  events: [
-    ['root.click', 'handleSelect']
-  ]
+  className: 'text',
+  tag: 'span',
+  seprator: ' | '
 }
 
-/**
- * List view class
- * @class
- * @param {Object} options Default options for view
- * @extends {View}
- * @since 0.0.4
- * @author Jerome Vial
- *
- * @type {prime}
- */
 class List {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
-    this.init(this.options)
-    this.build(this.options)
-    this.attach(this.options.events)
-
-    return this
-  }
-
-  /**
-   * [_initView description]
-   * @return  Class instance
-   */
-  init () {
-    this.filters = []
-    this.data = []
-    this.items = []
-
-    // assign modules
-    Object.assign(this, emitter, attach)
+    // console.log('options', this.options)
 
-    // init function
-    this._initFunction(this.options.functions)
+    this.build()
 
     return this
   }
 
-  /**
-   * [_initFunction description]
-   * @param  {?} functions [description]
-   * @return {?}           [description]
-   */
-  _initFunction (functions) {
-    for (var i = 0; i < functions.length; i++) {
-      var name = functions[i]
-      if (this.options[name]) {
-        this[name] = this.options[name]
-      }
-    }
-  }
+  build () {
+    this.element = document.createElement(this.options.tag)
+    css.add(this.element, this.options.class)
 
-  /**
-   * [_initList description]
-   * @param  {Object} options this class options
-   * @return {Object} The class instance
-   */
-  build (options) {
-    // define main tag
-    var tag = this.options.tag || 'ul'
-
-    this.element = document.createElement(tag)
-    css.add(this.element, 'material-' + this.options.class)
-
-    if (options.name) {
-      css.add(this.element, options.class + '-' + options.name)
-    }
-
-    if (options.type) {
-      css.add(this.element, 'type-' + options.type)
-    }
-
-    if (options.layout) {
-      css.add(this.element, 'layout-' + options.layout)
+    if (this.options.class !== 'text') {
+      this.element.classList.add('text')
     }
 
     if (this.options.list) {
-      this.set('list', this.options.list)
+      this.set(this.options.list)
     }
 
     if (this.options.container) {
-      insert(this.element, this.options.container)
+      this.options.container.appendChild(this.element)
     }
 
-    // this.element.addEventListener("click", function(e) {
-    //   // console.log("list", this, e);
-    //   // e.target was the clicked element
-    // });
-
     return this
   }
 
-  /**
-   * [onSelect description]
-   * @param  {?} e [description]
-   * @return {?}   [description]
-   */
-  handleSelect (e) {
-    // console.log('handleSelect-', e.currentTarget, this.options.target)
-    e.stopPropagation()
-
-    if (e.target === e.currentTarget) {
-      return
-    }
-
-    if (e && e.target) {
-      var el = e.target
-      // console.log('el', el, el.matches(this.options.target))
-      while (el && !el.matches(this.options.target)) {
-        el = el.parentNode
-      }
-
-      css.remove(this.item, 'is-selected')
-      css.add(el, 'is-selected')
-
-      this.select(el, e, this.item)
-      this.item = el
-    }
-  }
-
-  /**
-   * select
-   * @param  {Element} item  [description]
-   * @param  {event} event The caller event
-   * @return        [description]
-   */
-  select (item, e, selected) {
-    this.emit('select', item)
-  }
-
-  /**
-   * [render description]
-   * @param  {?} info [description]
-   * @return {?}      [description]
-   */
-  render (info) {
-    var item
-
-    if (info.type === 'divider') {
-      item = new Divider()
-    } else {
-      item = new Item({
-        name: info.name,
-        text: info.text || info.name
-      })
-    }
-
-    return item
-  }
+  set (list) {
+    var text = ''
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
-  set (prop, value, options) {
-    // console.log('set', prop, value)
-    switch (prop) {
-      case 'list':
-        this.setList(value, options)
-        break
-      default:
-        this.setList(prop, options)
-    }
-
-    return this
-  }
-
-  /**
-   * Set list
-   * @param {Array} list List of info object
-   * @return {Object} The class instance
-   */
-  setList (list) {
     for (var i = 0; i < list.length; i++) {
-      this.addItem(this.render(list[i]), i)
+      if (i < list.length - 1) {
+        text = text + list[i] + this.options.seprator
+      } else {
+        text = text + list[i]
+      }
     }
 
-    return this
-  }
+    // console.log('set', text)
+    if (text === undefined) return
 
-  scrollToBottom () {
-    this.element.scrollTop = this.element.scrollHeight - this.element.getBoundingClientRect().height
-  }
+    var label = this.options.label || ''
 
-  /**
-   * [add description]
-   * @param {Object} item [description]
-   */
-  addItem (item /*, index */) {
-    if (!item) {
-      return
-    }
+    this.element.innerHTML = label + text
 
-    var where = 'bottom'
-    if (item.root) {
-      insert(item.root, this.element, where)
-    } else {
-      insert(item, this.element, where)
+    if (this.options.spaceAfter) {
+      this.element.innerHTML = this.element.innerHTML + ' '
     }
-
-    this.items.push(item)
-
-    return item
   }
 
-  insert (container, context) {
-    insert(this.element, container, context)
-  }
-
-  empty () {
-    this.element.innerHTML = ''
-    this.items = []
-    this.item = null
-  }
-
-  /**
-   * Reverse the list order
-   * @return {Object} The class instance
-   */
-  reverse () {
-    this.list.reverse()
-    this.update(this.list)
-
-    return this
+  setText (text) {
+    // console.log('setText', text)
+    this.element.innerHTML = text
   }
 }
 

package/src/loading.js

@@ -0,0 +1,73 @@
+import build from './module/build'
+
+class Loading {
+  static isComponent () {
+    return true
+  }
+
+  static defaults = {
+    class: 'loading',
+    tag: 'div',
+    delay: 1000,
+    type: 'indeterminate',
+    circular: `<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+      </svg>`
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+    this.buildLoading()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Loading.defaults, options || {})
+    Object.assign(this, build)
+  }
+
+  buildLoading (options) {
+    if (this.options.type === 'circular') {
+      this.element.innerHTML = this.options.circular
+    } if (this.options.type === 'indeterminate') {
+      this.bar = document.createElement(this.options.tag)
+      this.bar.classList.add('bar')
+      this.element.classList.add('type-indeterminate')
+      this.element.appendChild(this.bar)
+    }
+  }
+
+  set (progress) {
+    this.bar.setAttribute('style', 'width: ' + progress)
+  }
+
+  show (delay) {
+    delay = delay || this.options.delay
+
+    clearTimeout(this.showTimeout)
+    this.showTimeout = setTimeout(() => {
+      this.element.classList.add('show')
+    }, this.options.delay)
+
+    this.visible = true
+
+    return this
+  }
+
+  showNow () {
+    this.element.classList.add('show')
+
+    this.visible
+
+    return this
+  }
+
+  hide () {
+    clearTimeout(this.showTimeout)
+    this.element.classList.remove('show')
+    this.visible = false
+    return this
+  }
+}
+
+export default Loading

package/src/map/build.js

@@ -1,4 +1,4 @@
-import observer from '../module/observer'
+import observer from '../module/element/observer'
 import Islands from '../view/islands'
 import preventPullRefresh from '../module/preventPullRefresh'
 import touch from '../module/touchscreen'
@@ -51,7 +51,7 @@ export default {
 
       //   })
       // } else {
-        // console.log('panzoom')
+      // console.log('panzoom')
       this.draggable = new PanZoom(this.slide, {
         maxZoom: 16,
         minZoom: 1

package/src/map/countries.js

@@ -7,10 +7,10 @@ export default {
    */
   updateCountries (isocodes) {
     // console.log('updateCountries', isocodes.length)
-    var list = document.querySelectorAll('svg.mapsvg g')
+    const list = document.querySelectorAll('svg.mapsvg g')
     // console.log('svg', list)
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       if (isocodes.indexOf(list[i].dataset.isocode) > -1) {
         list[i].classList.remove('empty')
       } else {
@@ -31,7 +31,7 @@ export default {
    */
   random (isocodes) {
     // console.log('random', isocodes.length)
-    let i = Math.floor(Math.random() * isocodes.length)
+    const i = Math.floor(Math.random() * isocodes.length)
     this.isocodes = isocodes[i]
     this.highlight(this.isocodes)
 
@@ -42,10 +42,10 @@ export default {
    * [setAllCountries description]
    */
   setAllCountries () {
-    var list = document.querySelectorAll('svg.mapsvg g')
+    const list = document.querySelectorAll('svg.mapsvg g')
     // console.log('svg', list)
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       list[i].classList.remove('empty')
     }
   },
@@ -64,7 +64,7 @@ export default {
     if (typeof isocodes === 'string') {
       this.highlightCountry(isocodes, option)
     } else {
-      for (var i = 0; i < isocodes.length; i++) {
+      for (let i = 0; i < isocodes.length; i++) {
         this.highlightCountry(isocodes[i], option)
       }
     }
@@ -78,7 +78,7 @@ export default {
    */
   highlightCountry (isocode, option) {
     // console.log('highlightCountry', isocode, option)
-    var group = this.map.querySelector('[data-isocode="' + isocode + '"]')
+    const group = this.map.querySelector('[data-isocode="' + isocode + '"]')
 
     if (!group) return
 
@@ -108,7 +108,7 @@ export default {
   },
 
   removePlaying () {
-    var group = document.querySelector('svg.mapsvg g.playing')
+    const group = document.querySelector('svg.mapsvg g.playing')
     group.classList.remove('playing')
   }
 }

package/src/map/display.js

@@ -5,7 +5,7 @@ export default {
     // object used to cache map by decade
     this.mapsvg = this.mapsvg || {}
 
-    var decade = decades[0]
+    const decade = decades[0]
 
     // do not update map when in taxi mode
     // if (typeof decade !== 'number') {
@@ -20,7 +20,7 @@ export default {
       if (cb) cb()
     } else {
       // fetch map for the corresponding decade
-      var url = this.options.path + decade + '.svg'
+      const url = this.options.path + decade + '.svg'
       // console.log(url)
       fetch(url).then((response) => {
         response.text().then((map) => {
@@ -52,12 +52,12 @@ export default {
 
   optimizeMap (decade) {
     // console.log('optimizing map', decade)
-    var parts = this.map.querySelectorAll('g[data-isocode]')
-    var country = {}
+    const parts = this.map.querySelectorAll('g[data-isocode]')
+    const country = {}
 
-    for (var i = 0; i < parts.length; i++) {
-      var part = parts[i]
-      var code = part.dataset.isocode
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const code = part.dataset.isocode
       if (!country[code]) {
         country[code] = part
       } else {
@@ -98,7 +98,7 @@ export default {
   },
 
   updateMap () {
-    var offsetX = this.element.offsetWidth - this.map.offsetWidth
+    const offsetX = this.element.offsetWidth - this.map.offsetWidth
     // var offsetY = this.element.height - this.map.offsetHeight
 
     // console.log('--', this.offsetX / 2 + 'px')
@@ -114,17 +114,17 @@ export default {
 
   screenSize () {
     // console.log('screensize')
-    var width = window.innerWidth ||
+    const width = window.innerWidth ||
     document.documentElement.clientWidth ||
     document.body.clientWidth
 
-    var height = window.innerHeight ||
+    const height = window.innerHeight ||
     document.documentElement.clientHeight ||
     document.body.clientHeight
 
-    var screen = {
-      width: width,
-      height: height
+    const screen = {
+      width,
+      height
     }
 
     this.screen = screen

package/src/map/focus.js

@@ -6,7 +6,7 @@ export default {
    */
   focus (country) {
     // console.log('focus', country)
-    var part = this.getCountryParts(country)
+    const part = this.getCountryParts(country)
     // console.log('focus on part', part)
     this.draggable.focus(part)
 
@@ -15,18 +15,18 @@ export default {
 
   getCountryParts (country) {
     // console.log('focus', country)
-    var parts = this.map.querySelectorAll('[data-isocode="' + country + '"]')
+    const 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()
+    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

package/src/map/select.js

@@ -17,7 +17,7 @@ export default {
       this.isocodes = [isocode]
     } else {
       this.isocodes = this.isocodes || []
-      var index = this.isocodes.indexOf(isocode)
+      const index = this.isocodes.indexOf(isocode)
       if (index > -1) {
         this.isocodes.splice(index, 1)
         this.highlight(isocode, false)
@@ -54,7 +54,7 @@ export default {
 
     // console.log('islands list', this.islands.list, island.dataset.id)
 
-    var info = this.islands.list[island.dataset.id]
+    const info = this.islands.list[island.dataset.id]
 
     this.emit('island', info)
   },

package/src/map/set.js

@@ -54,9 +54,9 @@ export default {
 
   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)
+    const l = this.isocodes.length
+    for (let i = 0; i < l; i++) {
+      const isocode = this.isocodes.splice(0, 1)
       this.highlight(isocode, false)
     }
 

package/src/map/viewport.js

@@ -3,21 +3,21 @@ export default {
   updatePaths () {
     this.path = {}
     this.paths = []
-    var paths = this.paths = this.map.querySelectorAll('path')
+    const 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()
+    for (let i = 0; i < paths.length; i++) {
+      const path = paths[i]
+      const 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]
+    const paths = this.paths
+    for (let i = 0; i < paths.length; i++) {
+      const path = paths[i]
       if (this.viewport(this.path[i])) {
         path.classList.remove('hide')
       } else {
@@ -31,10 +31,10 @@ export default {
 
     // *var rect = this.path[path]
 
-    var top = rect.top
-    var left = rect.left
-    var width = rect.width
-    var height = rect.height
+    const top = rect.top
+    const left = rect.left
+    const width = rect.width
+    const height = rect.height
 
     return (
       top >= this.screen.y &&