material 0.6.2 → 0.7.1

package/src/list.js

@@ -1,255 +1,67 @@
-'use strict'
-
-import Item from './item'
-import Divider from './divider'
-
-// import init from './component/init'
-import emitter from './module/emitter'
-import insert from './element/insert'
-import css from './module/css'
-import attach from './module/attach'
+import addClass from './module/addclass'
 
 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.root = document.createElement(this.options.tag)
+    addClass(this.root, 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.root = document.createElement(tag)
-    css.add(this.root, 'material-' + this.options.class)
-
-    if (options.name) {
-      css.add(this.root, options.class + '-' + options.name)
-    }
-
-    if (options.type) {
-      css.add(this.root, 'type-' + options.type)
-    }
-
-    if (options.layout) {
-      css.add(this.root, 'layout-' + options.layout)
+    if (this.options.class !== 'text') {
+      this.root.classList.add('text')
     }
 
     if (this.options.list) {
-      this.set('list', this.options.list)
+      this.set(this.options.list)
     }
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      this.options.container.appendChild(this.root)
     }
 
-    // this.root.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.root.scrollTop = this.root.scrollHeight - this.root.getBoundingClientRect().height
-  }
+    var label = this.options.label || ''
 
-  /**
-   * [add description]
-   * @param {Object} item [description]
-   */
-  addItem (item /*, index */) {
-    if (!item) {
-      return
-    }
+    this.root.innerHTML = label + text
 
-    var where = 'bottom'
-    if (item.root) {
-      insert(item.root, this.root, where)
-    } else {
-      insert(item, this.root, where)
+    if (this.options.spaceAfter) {
+      this.root.innerHTML = this.root.innerHTML + ' '
     }
-
-    this.items.push(item)
-
-    return item
   }
 
-  insert (container, context) {
-    insert(this.root, container, context)
-  }
-
-  empty () {
-    this.root.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.root.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

@@ -13,11 +13,11 @@ export default {
    * @return {void} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement(this.options.tag)
+    this.element.classList.add(this.options.class)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     this.label = document.createElement('div')
@@ -27,7 +27,7 @@ export default {
     this.buildMap()
     this.screenSize()
 
-    observer.insert(this.root, () => {
+    observer.insert(this.element, () => {
       // if (touch()) {
       //   // console.log('pinchzoom', this.options.pichZoom)
       //   this.draggable = new PinchZoom(this.slide, {
@@ -58,7 +58,7 @@ export default {
       })
       // }
 
-      this.rect = this.root.getBoundingClientRect()
+      this.rect = this.element.getBoundingClientRect()
 
       this.screen = {
         y: window.pageYOffset,
@@ -84,7 +84,7 @@ export default {
     // console.log('buildmap')
     this.slide = document.createElement('div')
     this.slide.classList.add('slide')
-    this.root.appendChild(this.slide)
+    this.element.appendChild(this.slide)
 
     this.map = document.createElement('div')
     this.map.classList.add('map')

package/src/map/display.js

@@ -82,24 +82,24 @@ export default {
   },
 
   updateRoot () {
-    this.offsetX = this.screen.width - this.root.offsetWidth
-    this.offsetY = this.screen.height - this.root.offsetHeight
+    this.offsetX = this.screen.width - this.element.offsetWidth
+    this.offsetY = this.screen.height - this.element.offsetHeight
 
     // console.log('--', this.offsetX / 2 + 'px')
 
-    this.root.style.left = (this.offsetX / 2) + 'px'
-    this.root.style.top = (this.offsetY / 2) + 'px'
+    this.element.style.left = (this.offsetX / 2) + 'px'
+    this.element.style.top = (this.offsetY / 2) + 'px'
 
     // if (isTouchScreen()) {
-    //   this.root.style.top = (this.offsetY / 2) + 70 + 'px'
+    //   this.element.style.top = (this.offsetY / 2) + 70 + 'px'
     // } else {
-    //   this.root.style.top = -1200 + 'px'
+    //   this.element.style.top = -1200 + 'px'
     // }
   },
 
   updateMap () {
-    var offsetX = this.root.offsetWidth - this.map.offsetWidth
-    // var offsetY = this.root.height - this.map.offsetHeight
+    var offsetX = this.element.offsetWidth - this.map.offsetWidth
+    // var offsetY = this.element.height - this.map.offsetHeight
 
     // console.log('--', this.offsetX / 2 + 'px')
 

package/src/menu.js

@@ -1,140 +1,84 @@
-'use strict'
+import EventEmitter from './mixin/emitter'
+// menu related modules
+import build from './module/build'
+import bindEvents from './module/events'
+import display from './mixin/display'
+
+import Element from './element'
+import Button from './button'
+
+class Menu extends EventEmitter {
+  static defaults = {
+    class: 'menu',
+    transition: 200,
+    modal: false,
+    layout: [
+      [Element, 'surface', { class: 'surface' },
+        [Element, 'list', { tag: 'ul', class: 'items' }]
+      ]
+    ],
+    events: [
+      ['element.click', 'close']
+    ]
+  };
 
-import classify from './component/classify'
-import css from './module/css'
-import events from './component/events'
-import insert from './element/insert'
-import offset from './element/offset'
-
-import create from './element/create'
-
-import attach from './module/attach'
-import emitter from './module/emitter'
-
-import List from './list'
-import Item from './item'
-import Divider from './divider'
-
-const defaults = {
-  prefix: 'material',
-  class: 'menu',
-  tag: 'div',
-  events: [
-    ['root.click', 'hide'],
-    ['mask.click', 'hide']
-  ]
-}
-
-/**
- * This Class represents a menu.
- *
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class Menu {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
+    super()
+    
     this.init(options)
-    this.build()
-    this.setup()
+    this.build(this.constructor)    
+    this.bindEvents()
 
-    this.attach()
-
-    this.emit('ready')
-
-    return this
+    this.render(this.options.items)
   }
 
-  /**
-   * [init description]
-   * @return {[type]} [description]
-   */
-  init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    Object.assign(this, emitter, events, attach, insert)
+  init(options) {
+    this.options = Object.assign({}, Menu.defaults, options || {})
+    Object.assign(this, build, bindEvents, display)
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = create(this.options.tag, this.options.css)
-    this.mask = create(this.options.tag, this.options.class + '-mask')
-
-    if (this.options.position) {
-      this.root.style.position = this.options.position
+  render (items) {
+      if (items && Array.isArray(items)) {
+      for (var i = 0; i < items.length; i++) {
+        this.add(items[i])
+      }
     }
 
-    classify(this.root, this.options)
-
-    if (this.options.list) {
-      this.list = new List({
-        // root: this.root,
-        list: this.options.list,
-        target: '.material-item',
-        height: 600,
-        label: 'Flat',
-        select: (item) => {
-          this.selected = item
-          this.hide()
-        }
-      }).insert(this.root)
-    }
-
-    this.emit('built', this.root)
-
     return this
   }
 
-  insert () {
-    insert(this.mask, document.body)
-    insert(this.root, document.body)
-  }
-
-  setup () {
-    // this.subscribe('click', () => {
-    //   console.log('click');
-    //   this.close();
-    // });
-    //
-    window.addEventListener('resize', () => this.position())
-  }
-
-  show (e) {
-    css.add(this.mask, 'mask-show')
-
-    if (e) this.caller = e.target
+  add (obj) {
+    if (typeof obj !== 'object') return this;
+    let item;
+    if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else {
+      obj.container = this.ui.list
+      obj.class = 'item'
+      item = new Button(obj).on('click', (ev) => {
+        // console.log('select', ev.target.name)
+        this.emit('select', ev.target.name)
+      })
+    }
 
-    css.add(this.root, this.options.class + '-show')
-    this.position(this.caller)
+    return this
   }
 
-  position () {
-    if (!this.caller) return
-    var offs = offset(this.caller)
+  position(target) {
+    if (!target) return
+    var offs = target.getBoundingClientRect()
 
-    var offsw = this.offset = offset(this.root)
+    var offsw = this.offset = this.ui.surface.getBoundingClientRect()
 
-    // console.log('offset')
-    // console.log('caller', this.caller, offs, screen.width)
+    this.ui.surface.style.top = (offs.top - 4) + 'px'
+    this.ui.surface.style.left = offs.left - offsw.width + offs.width + 'px'
 
-    this.root.style.top = offs.top + 'px'
-    this.root.style.left = offs.left - offsw.width + offs.width + 'px'
-    // this.root.style.right = offs.right + offs.width + offsw.width  + 'px'
+    return this
   }
 
-  hide () {
-    // console.log('hide')
-    css.remove(this.root, this.options.class + '-show')
-    css.remove(this.mask, 'mask-show')
+  close() {
+    // console.log('close')
+    this.destroy()
   }
 }