material 0.4.3 → 0.5.0

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

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

@@ -71,7 +71,7 @@
   z-index: 15
   flex: 1
   position: relative
-  display:inline
+  display: inline
   // right: 0
   // top: 0
   // bottom: 0
@@ -116,7 +116,7 @@
   z-index: 15
   flex: 1
   position: relative
-  display:inline
+  display: inline
   right: 0
   top: 0
   bottom: 0
@@ -129,7 +129,7 @@
     position: fixed
 
   .material-toolbar
-    position:relative
+    position: relative
 
   .drawer-panel
     position: relative

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

@@ -0,0 +1,125 @@
+.button
+  user-select: none
+  font-size: 0.875rem
+  line-height: 1.5rem
+  text-transform: uppercase
+  flex: none
+  display: flex
+  -webkit-font-smoothing: antialiased
+  white-space: nowrap
+  position: relative
+  vertical-align: middle
+  cursor: default
+  height: 36px
+  padding: 6px 12px
+  margin: 0 8px
+  border: none
+  border-radius: 3px
+  overflow: hidden
+  background-color: transparent
+  background-repeat: no-repeat
+
+  i
+    pointer-events: none
+    height: 24px
+    width: 24px
+    padding: 0
+
+  &.hide
+    display: none
+
+  // pseudo class
+  
+
+  &:focus
+    background-color: rgba(0, 0, 0, .1)
+
+  &:active
+    background-color: rgba(0, 0, 0, .1)
+
+  &:disabled
+    opacity: .5
+    background-color: transparent
+    &:hover
+      background-color: transparent
+
+  &[type="submit"]
+    font-weight: 600
+    padding: 6px 20px
+
+  // size
+  &.small-size
+    height: 36px
+    padding: 6px 12px
+
+  // styles
+  &.style-raised
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
+
+  &.style-outline
+    border: 1px solid #E1E1E1
+
+  &.style-action
+    width: 40px
+    height: 40px
+    border-radius: 50%
+    padding: 8px
+    background-position: center
+    i
+      pointer-events: none
+
+      height: 24px
+      width: 24px
+      margin-left: 0
+      svg
+        fill: rgba(0, 0, 0, 0.67)
+    
+    &:hover
+      background-color: rgba(0,0,0,.1)
+
+    &.small-size
+      width: 36px
+      height: 36px
+      padding: 6px
+
+  &.bold
+    font-weight: 600
+
+  &.normal-case
+    text-transform: none
+
+  &.color-secondary
+    color: $secondary-color-text
+    background-color: darken($secondary-color, 10%)
+    &:hover
+      background-color: darken($secondary-color, 5%)
+      &:focus
+        background-color: darken($secondary-color, 5%)
+    &:focus
+      background-color: darken($secondary-color, 10%)
+    &:disabled
+      background-color: darken($secondary-color, 10%)
+      &:hover
+        background-color: darken($secondary-color, 10%)
+
+  &.color-primary
+    color: $primary-color-text
+    background-color: darken($primary-color, 10%)
+    &:hover
+      background-color: darken($primary-color, 5%)
+      &:focus
+        background-color: darken($primary-color, 5%)
+    &:focus
+      background-color: darken($primary-color, 10%)
+    &:disabled
+      background-color: darken($primary-color, 10%)
+      &:hover
+        background-color: darken($primary-color, 10%)
+
+
+@media only screen and (min-width: 640px)
+.button
+  &:hover
+    background-color: rgba(0, 0, 0, .1)
+    &:focus
+      background-color: rgba(0, 0, 0, .1)