material 0.4.2 → 0.5.0

package/src/module/extract.js

@@ -1,43 +1,26 @@
-/**
- * extract.f extract a function from a string using dot
- * @param  {string} func A string representing a function accessible in dot notation
- * @return {function}      The function
- */
-function f(instance, func) {
-  if (!func) return
-
-  if (typeof func === 'function') {
-    return func
-  } else if (!func.match(/\./)) return instance[func]
-  var iteration
-
-  var keys = func.split('.')
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i]
-
-    iteration = iteration || instance
-    iteration = iteration[key]
-  }
-
-  return iteration
-}
 
 /**
  * extract.e extract a event and the context
  * @param  {[type]} str [description]
  * @return {[type]}     [description]
  */
-function e(instance, ev) {
+function e (instance, ev) {
   if (!ev) return instance
-  else if (!ev.match(/\./)) return instance[ev]
+  else if (!ev.match(/\./)) {
+    return {
+      element: instance,
+      name: ev
+    }
+  }
+
   var iteration
   var obj = {}
   var element
 
   var keys = ev.split('.')
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i]
 
+  for (var i = 0, l = keys.length; i <= l; i++) {
+    var key = keys[i]
     iteration = iteration || instance
     iteration = iteration[key]
 
@@ -51,4 +34,28 @@ function e(instance, ev) {
   return obj
 }
 
-export default { e, f }
+/**
+ * extract.f extract a function from a string using dot
+ * @param  {string} func A string representing a function accessible in dot notation
+ * @return {function}      The function
+ */
+function f (instance, func) {
+  if (!func) return
+
+  if (typeof func === 'function') {
+    return func
+  } else if (!func.match(/\./)) return instance[func]
+  var iteration
+
+  var keys = func.split('.')
+  for (var i = 0, l = keys.length; i < l; i++) {
+    var key = keys[i]
+
+    iteration = iteration || instance
+    iteration = iteration[key]
+  }
+
+  return iteration
+}
+
+export default { e, f }

package/src/module/mediator.js

@@ -0,0 +1,56 @@
+const mediator = ((() => {
+  /**
+   * @description Subscribe to an event, supply a callback to be executed when that event is broadcast
+   * @param store {string}
+   * @param fn {function}
+   * @returns {subscribe} {object}
+   */
+  const subscribe = function (store, fn) {
+    if (!mediator.stores[store]) {
+      mediator.stores[store] = []
+    }
+
+    mediator.stores[store].push({
+      context: this,
+      callback: fn
+    })
+
+    return this
+  }
+
+  /**
+   * @description Publish/broadcast an event to the rest of the application
+   * @param store {string}
+   * @param args {object}
+   * @returns {*||boolean}
+   */
+  const publish = function (store, ...args) {
+    // console.log('publish', store, args)
+    if (!mediator.stores[store]) {
+      return false
+    }
+
+    for (let value of mediator.stores[store]) {
+      const subscription = value
+      subscription.callback.apply(subscription.context, args)
+    }
+
+    return this
+  }
+
+  return {
+    stores: {},
+    publish,
+    subscribe,
+    installTo: function (obj) {
+      obj.subscribe = subscribe
+      obj.publish = publish
+    },
+    init: function (obj) {
+      obj.subscribe = subscribe
+      obj.publish = publish
+    }
+  }
+})())
+
+export default mediator

package/src/module/object.js

@@ -1,7 +1,23 @@
+
 function is (object) {
   return object &&
     typeof object === 'object' &&
     Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-export { is }
+function byString (o, s) {
+  s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  s = s.replace(/^\./, '')           // strip a leading dot
+  var a = s.split('.')
+  for (var i = 0, n = a.length; i < n; ++i) {
+    var k = a[i]
+    if (k in o) {
+      o = o[k]
+    } else {
+      return
+    }
+  }
+  return o
+}
+
+export { is, byString }

package/src/module/observer.js

@@ -3,7 +3,7 @@ const observer = {
   insert: (element, cb) => {
     var observer = new MutationObserver((mutations) => {
       if (document.contains(element)) {
-        if (typeof cb === 'function') {
+        if (typeof cb === 'function' && !element.classList.contains('inserted')) {
           cb()
         }
 

package/src/module/passive.js

@@ -0,0 +1,17 @@
+
+function passive () {
+  var supportsPassive = false
+  try {
+    var opts = Object.defineProperty({}, 'passive', {
+      get: function () {
+        supportsPassive = true
+      }
+    })
+    window.addEventListener('testPassive', null, opts)
+    window.removeEventListener('testPassive', null, opts)
+  } catch (e) {}
+
+  return supportsPassive
+}
+
+export default passive

package/src/module/remove.js

@@ -0,0 +1,74 @@
+import extract from './extract'
+
+/**
+ * attach function to events
+ * @module module/attach
+ * @category module
+ */
+
+/**
+ * [attach description]
+ * @param  {object} component [description]
+ * @param  {[type]} events    [description]
+ * @return {[type]}           [description]
+ */
+export default {
+  remove: function (events) {
+    // console.log('attach', events)
+    events = events || this.options.events
+    if (!events) return
+
+    // console.log('attach', events, this)
+    var instance = this
+    events.map((def) => {
+      var e = extract.e(instance, def[0])
+      var f = extract.f(instance, def[1])
+      var option = def[2]
+
+      var keys = def[1].split('.')
+
+      keys.pop()
+      var bound = this.last(keys.join('.'))
+
+      if (f && bound && e && e.element && e.element.addEventListener) {
+        if (!f) { console.log('error') }
+
+        if (option) {
+          e.element.removeEventListener(e.name, f.bind(bound), option)
+        } else {
+          console.log('removeEventListener', e.name, f.bind(bound))
+          e.element.removeEventListener(e.name, f.bind(bound), false)
+        }
+      } else if (e && e.element && e.element.off && f && bound) {
+        e.element.off(e.name, f.bind(bound))
+      } else {
+        console.trace('can\'t attach', def[0])
+        console.log('can\'t attach', def[0])
+      }
+    })
+
+    return this
+  },
+
+  /**
+   * Return the last reference from an object
+   * @param  {string} str Object path for example key1.key2.key3
+   * @return {value} The value of the last reference
+   */
+  last: function (str) {
+    // console.log('_path', str)
+    if (!str) return this
+    else if (!str.match(/\./)) return this[str]
+    var last
+
+    var keys = str.split('.')
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+
+      last = last || this
+      last = last[key]
+    }
+
+    return last
+  }
+}

package/src/module/scrollbar.js

@@ -0,0 +1,48 @@
+
+window._scrollbar = {}
+
+function scrollbar () {
+  // if (window._scrollbar.checked) return
+
+  var list = document.createElement('div')
+  list.classList.add('list')
+  list.style['z-index'] = '1000'
+  list.style.display = 'block'
+  list.style.width = '300px'
+  list.style['minWidth'] = '300px'
+  list.style.height = '20px'
+  list.style.position = 'absolute'
+  list.style.top = '-200px'
+  list.style.right = 'initial'
+  list.style.bottom = 'initial'
+  list.style.left = '200px'
+  list.style['overflowY'] = 'hidden'
+  document.body.appendChild(list)
+
+  var body = document.createElement('div')
+  body.classList.add('body')
+  body.style['overflowY'] = 'scroll'
+  list.appendChild(body)
+
+  var item = document.createElement('div')
+  item.classList.add('item')
+  item.style.height = '40px'
+  item.style.margin = '0'
+  item.style.padding = '0'
+  item.style.border = '0'
+  item.style['backgroundColor'] = 'green'
+  body.appendChild(item)
+
+  var info = item.getBoundingClientRect()
+  // console.log('width', 300 - info.width)
+
+  // console.log('list', list)
+
+  document.body.removeChild(list)
+
+  window._scrollbar.checked = true
+
+  return 300 - info.width
+}
+
+export default scrollbar

package/src/module/smoothscroll.js

@@ -0,0 +1,20 @@
+function smoothscroll (e, top, time) {
+  // console.log('smoothscroll', top, e.scrollTop)
+
+  var start = top - e.scrollTop
+
+  time = time || 275
+  var step = start / 100
+  var current = 0
+  while (current <= time) {
+    window.setTimeout(scrolling, current, e, step)
+    current += time / 100
+  }
+}
+
+function scrolling (e, step) {
+  // console.log('scrolling', step, e.scrollTop)
+  e.scrollBy(0, step)
+}
+
+export default smoothscroll

package/src/module/viewport.js

@@ -0,0 +1,20 @@
+
+function viewport (el) {
+  if (!el) return
+
+  var rect = el.getBoundingClientRect()
+
+  var top = rect.top
+  var left = rect.left
+  var width = rect.width
+  var height = rect.height
+
+  return (
+    top >= window.pageYOffset &&
+    left >= window.pageXOffset &&
+    (top + height) <= (window.pageYOffset + window.innerHeight) &&
+    (left + width) <= (window.pageXOffset + window.innerWidth)
+  )
+}
+
+export default viewport

package/src/selector.js

@@ -0,0 +1,239 @@
+import emitter from './module/emitter'
+import attach from './module/attach'
+
+const defaults = {
+  class: 'selector',
+  tag: 'div',
+  styles: ['style', 'color'],
+  modules: ['border', 'label', 'resizer'],
+  resizer: {
+    keepRatio: true,
+    minWidth: 10,
+    minHeight: 10
+  },
+  events: [
+    ['resizer.pointerdown', 'onPointerDown']
+  ]
+
+}
+
+class Selector {
+  static isComponent () {
+    return true
+  }
+
+  /**
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    // console.log('constructor')
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter, attach)
+    // console.log('options', options)
+
+    this.init()
+
+    return this
+  }
+
+  init () {
+    this.build()
+    this.setup()
+    this.attach()
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+  }
+
+  /**
+   * Build Method
+   * @return {Object} This class instance
+   */
+  build () {
+    this.root = document.createElement(this.options.tag)
+
+    this.root.classList.add('selector')
+
+    if (this.options.class !== 'selector') {
+      this.root.setAttribute('class', this.options.class)
+    }
+
+    if (this.options.modules.indexOf('border') > -1) {
+      this.border = document.createElement('div')
+      this.border.classList.add('border')
+      this.root.appendChild(this.border)
+    }
+
+    if (this.options.modules.indexOf('label') > -1) {
+      this.label = document.createElement('div')
+      this.label.classList.add('label')
+      this.root.appendChild(this.label)
+    }
+
+    if (this.options.modules.indexOf('resizer') > -1) {
+      this.resizer = document.createElement('div')
+      this.resizer.classList.add('resizer')
+      this.root.appendChild(this.resizer)
+    }
+
+    return this
+  }
+
+  setup () {
+    if (!this.options.src) return
+
+    this.setTarget(this.options.element)
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  set (prop, value) {
+    // console.log('set', this.root, prop, value)
+    switch (prop) {
+      case 'target':
+        this.setTarget(value)
+        break
+      default:
+        // console.log('prop', prop)
+        this.setTarget(prop)
+    }
+
+    return this
+  }
+
+  setTarget (target) {
+    this.target = target
+
+    this.update(this.target)
+
+    this.root.classList.remove('hide')
+
+    // console.log('target', this.root, this.target)
+  }
+
+  update (target) {
+    target = target || this.target
+    if (!target) return
+    var coords = target.getBoundingClientRect()
+    var pcoords = this.root.parentNode.getBoundingClientRect()
+
+    this.root.style.top = coords.top - pcoords.top + 'px'
+    this.root.style.left = coords.left - pcoords.left + 'px'
+    this.root.style.width = coords.width + 'px'
+    this.root.style.height = coords.height + 'px'
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  get (prop, value) {
+    switch (prop) {
+      case 'value':
+        return this.root.value
+      case 'label':
+        return this.label.innerHTML
+      default:
+        return this.root.value
+    }
+  }
+
+  onPointerDown (ev) {
+    // console.log('pointerdown', ev.target)
+    ev = ev || window.event
+
+    let width = 0
+    let height = 0
+
+    const offsetX = this.root.getBoundingClientRect().x
+    const offsetY = this.root.getBoundingClientRect().y
+    const element = document.body
+
+    var ratio = parseInt(this.root.style.width, 10) / parseInt(this.root.style.height, 10)
+
+    this.border.setPointerCapture(ev.pointerId)
+
+    element.onpointermove = (e) => {
+      // console.log('pointermove')
+
+      e.stopPropagation()
+
+      e = e || window.event
+
+      if (e.pageX) width = e.pageX - offsetX
+      else if (e.clientX) width = e.clientX - offsetX
+
+      if (e.pageY) height = e.pageY - offsetY
+      else if (e.clientY) height = e.clientY - offsetY
+
+      if (width < this.options.resizer.minWidth) width = this.options.resizer.minWidth
+
+      if (this.options.resizer.keepRatio) {
+        // console.log('keepRatio', width, ratio)
+        height = width / ratio
+      } else {
+        if (height < this.options.resizer.minHeight) height = this.options.resizer.minHeight
+      }
+
+      this.root.style.width = width + 'px'
+      this.root.style.height = height + 'px'
+
+      this.emit('resize', width, height)
+    }
+
+    element.onpointerup = (e) => {
+      // console.log('pointerup', e.target)
+
+      element.onpointermove = null
+      element.onpointerup = null
+      this.root.releasePointerCapture(e.pointerId)
+
+      // if (e.target !== this.root) return
+    }
+  }
+
+  disable () {
+    this.root.disabled = true
+  }
+
+  enable () {
+    this.root.disabled = false
+  }
+
+  hide () {
+    this.root.classList.add('hide')
+  }
+
+  show () {
+    this.root.classList.remove('hide')
+  }
+
+  destroy () {
+    if (this.root && this.root.parentNode) {
+      this.root.parentNode.removeChild(this.root)
+    }
+  }
+
+  click (ev) {
+    this.emit('click', ev)
+  }
+
+  mousedown (ev) {
+    this.root.classList.add('pushed')
+  }
+
+  mouseup (ev) {
+    this.root.classList.remove('pushed')
+  }
+}
+
+export default Selector

package/src/skin/material/base/body.sass

@@ -44,6 +44,9 @@ button
   &:hover
     outline: none
 
+button
+  user-select: none
+
 // set all container boder-box
 *
   box-sizing: border-box

package/src/skin/material/button/file.sass

@@ -1,6 +1,6 @@
 
 // type file
-.material-button.type-file,
+.material-button.type-file
   overflow: hidden
   position: relative
   vertical-align: middle

package/src/skin/material/container/container.sass

@@ -1 +1 @@
-.material-container
+

package/src/skin/material/container/dialog.sass

@@ -1,3 +1,60 @@
+.dialog
+  position: fixed
+  top: 0
+  left: 0
+  bottom: 0
+  right: 0
+  background-color: rgba(0, 0, 0, 0.5)
+  display: flex
+  align-items: center
+  justify-content: center
+  overflow: hidden
+
+  //display: none;
+  //visibility: hidden;
+  opacity: 0
+
+  //z-index: -1;
+  transition: .2s
+
+  &.show
+    // display: flex;
+    // width: 10;
+    // height: 0;
+    //transition: .2s;
+    transition: .1s
+    opacity: 1
+
+    .surface
+      transform: translateY(0) scale(1)
+      opacity: 1
+      margin-top: 0
+      transition: .1s
+
+  .surface
+    transition: .1s
+    max-height: 600px
+    display: flex
+    flex-direction: column
+    flex-wrap: nowrap
+    opacity: 0
+    border-radius: 2px
+    background-color: $background-color
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
+    transform: translateY(150px) scale(0.8)
+
+
+
+
+
+
+
+
+
+
+
+
+
 .material-dialog
   position: fixed
   top: 0
@@ -59,7 +116,6 @@
       text-align: right
       overflow: hidden
       //padding: 8px
-      .material-button
 
     .material-toolbar
       position: relative