material 0.4.3 → 0.5.0

package/src/skin/material.bak/view/listview.sass

@@ -0,0 +1,195 @@
+.material-list
+  padding: 0
+  overflow: scroll
+
+  .material-item
+    display: flex
+    flex-direction: horizontal
+    flex-wrap: nowrap
+    text-align: left
+    width: 100%
+    display: block
+    font-size: 1rem
+    line-height: 1.2rem
+    appearance: span
+    padding: 14px 16px
+
+    //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    transition: .1s
+
+    &.is-selected
+      background-color: rgba(0, 0, 0, 0.05)
+      transition: .1s
+
+    .ui-icon
+      flex: none
+      padding: 24px
+
+    .ui-text
+      flex: 1
+      padding: 16px 12px 16px 0
+
+  .material-button
+    display: flex
+    flex-direction: horizontal
+    flex-wrap: nowrap
+    text-align: left
+    width: 100%
+    display: block
+    -ms-appearance: span
+    -moz-appearance: span
+    -webkit-appearance: span
+    appearance: span
+
+    .ui-icon
+      flex: none
+      padding: 24px
+
+    .button-label
+      flex: 1
+      padding: 16px 12px 16px 0
+
+  .ui-separator
+    display: block
+    height: 1px
+    margin: 12px
+    background-color: #DDD
+
+
+
+
+
+
+
+  &.type-image
+    max-width: 1000px
+    display: flex
+    flex-wrap: wrap
+    margin: 0 auto
+    padding: 0
+    
+    .material-image
+      //float: left
+      //background-color: red
+      position: relative
+      display: list-item
+      //height: 125px
+      width: 125px
+      overflow: hidden
+      margin: 2px 2px
+      padding: 0
+      //background-color: red
+      -webkit-column-break-inside: avoid
+      break-inside: avoid-column
+      display: list-item
+      text-align: -webkit-match-parent
+      position: relative
+      box-sizing: border-box
+      //margin-bottom: 16px
+
+      .image-image
+        //height: 125px
+        width: 125px
+        display: block
+
+      .image-info
+        // padding: 16px
+        background-color: rgba(0,0,0,.6)
+        display: block
+        position: absolute
+        bottom: 0
+        left: 0
+        right: 0
+        display: flex
+        flex-direction: row
+        flex-wrap: nowrap
+        padding: 8px 16px
+  
+
+        .image-label
+          line-height: 24px
+          flex: 1 
+          color: rgba(255,255,255,.8)
+          overflow: hidden
+          text-overflow: ellipsis
+          height: 24px
+          // background-color: rgba(0,0,0,.6)
+          // display: block
+          // position: absolute
+          // bottom: 0
+          // left: 0
+          // right: 0
+        .image-icon
+          flex: none
+          svg
+            fill: white
+
+    &.hide-info
+      .image-info
+        display: none !important 
+
+    &.info-below
+      .image-info
+        //display: none !important 
+        color: initial !important 
+        padding: 16px
+        background-color: transparent  !important 
+        //display: block
+        position: initial !important 
+        padding:  8px 0 !important 
+        line-height: 16px
+        // bottom: 0
+        // left: 0
+        // right: 0
+        .image-label
+          line-height: 24px
+          flex: 1 
+          color: rgba(0,0,0,.8)
+        .image-icon
+          flex: none
+          svg
+            fill: rgba(0,0,0,.8)
+
+    &.layout-masonry
+      -webkit-column-count: 3
+      column-count: 3
+      -webkit-column-gap: 16px
+      column-gap: 16px
+      max-width: 1000px
+      display: block
+      flex-wrap: wrap
+      margin: 0 auto
+      padding: 0
+      .material-image
+        //float: left
+        //background-color: red
+        position: relative
+        display: list-item
+        // height: 118px
+        // width: 177px
+        overflow: hidden
+        margin: 0 2px
+        padding: 0
+        background-color: red
+        -webkit-column-break-inside: avoid
+        break-inside: avoid-column
+        display: list-item
+        text-align: -webkit-match-parent
+        position: relative
+        box-sizing: border-box
+        margin-bottom: 16px
+
+        // .image-image
+        //   // height: 118px
+        //   // width: 177px
+        //   display: block
+
+        // .image-label
+        //   color: rgba(255,255,255,.8)
+        //   padding: 16px
+        //   background-color: rgba(0,0,0,.6)
+        //   display: block
+        //   position: absolute
+        //   bottom: 0
+        //   left: 0
+        //   right: 0

package/src/skin/material.bak/view/map.sass

@@ -0,0 +1,6 @@
+.ui-map
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0

package/src/skin/material.bak/view/page.sass

@@ -0,0 +1,4 @@
+.material-page
+	border: none
+	margin: 0
+		

package/src/skin/material.bak/view/tabview-bak.sass

@@ -0,0 +1,40 @@
+.tabview
+  position: relative
+  display: flex
+  flex-direction: column
+  height: 100%
+  width: 100%
+  white-space: no-wrap
+  overflow: hidden
+  >.indicator
+    position: absolute
+    height: 2px
+    transition: 0.2s
+    background-color: $secondary-color
+  >.tabs
+    flex: none
+    display: flex
+    flex-direction: row
+    overflow: hidden 
+    //height: 48px
+    >.material-divider
+      margin: 0
+      padding: 0
+      flex: 1 
+      display: inline-block
+    >button
+      flex: 1
+      display: inline-block
+      padding: 0 10px
+      height: 48px
+      border-radius: 0
+      margin: 0
+      text-align: center
+      background-repeat: no-repeat
+      background-size: 30%
+      background-position: center
+      >label
+        color: $default-color-text
+  >.views
+    >div
+      display: none

package/src/skin/material.bak/view/tabview.sass

@@ -0,0 +1,55 @@
+.tabview
+  position: relative
+  display: flex
+  flex-direction: column
+  height: 100%
+  width: 100%
+  white-space: no-wrap
+  overflow: hidden
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  >.indicator
+    position: absolute
+    height: 2px
+    transition: 0.2s
+  >.tabs
+    flex: none
+    display: flex
+    flex-direction: row
+    overflow: hidden 
+    //height: 48px
+    >.divider
+      margin: 0
+      padding: 0
+      flex: 1 
+      display: inline-block
+    >button
+      flex: 1
+      display: inline-block
+      padding: 0
+      height: 48px
+      border-radius: 0
+      margin: 0
+      text-align: center
+      background-repeat: no-repeat
+      background-size: 25%
+      background-position: center
+      transition: 50ms transform
+      &:hover, &.selected
+        background-color: transparent
+        transform: scale(1.1)
+        transition: 50ms transform
+      
+      &.type-action
+        max-width: 60px
+
+
+  >.views
+    position: relative
+    flex: 1
+    >div
+      position: absolute
+      left: 0
+      top: 0
+      right: 0
+      bottom: 0

package/src/skin/material.bak/view/tree.sass

@@ -0,0 +1,73 @@
+.material-tree
+  padding: 16px 0
+  overflow: scroll
+
+  ul
+    margin: 0
+    padding: 0
+    .item-tree
+      display: flex
+      flex-direction: horizontal
+      flex-wrap: nowrap
+      text-align: left
+      width: 100%
+      display: block
+      -ms-appearance: span
+      -moz-appearance: span
+      -webkit-appearance: span
+      appearance: span
+      padding: 8px 16px
+
+    .material-item 
+      display: flex
+      flex-direction: horizontal
+      flex-wrap: nowrap
+      text-align: left
+      width: 100%
+      display: block
+      -ms-appearance: span
+      -moz-appearance: span
+      -webkit-appearance: span
+      appearance: span
+      padding: 8px 16px
+
+      //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      transition: .3s
+
+      &.is-selected
+        background-color: rgba(0, 0, 0, 0.05)
+        transition: .3s
+
+      .ui-icon
+        flex: none
+        padding: 24px
+
+      .ui-text
+        flex: 1
+        padding: 16px 12px 16px 0
+
+    .material-button
+      display: flex
+      flex-direction: horizontal
+      flex-wrap: nowrap
+      text-align: left
+      width: 100%
+      display: block
+      -ms-appearance: span
+      -moz-appearance: span
+      -webkit-appearance: span
+      appearance: span
+
+      .ui-icon
+        flex: none
+        padding: 24px
+
+      .ui-text
+        flex: 1
+        padding: 16px 12px 16px 0
+
+    .ui-separator
+      display: block
+      height: 1px
+      margin: 12px
+      background-color: #DDD

package/src/skin/material.bak/view/view.sass

@@ -0,0 +1,7 @@
+// .material-view
+//   position: absolute
+//   top: 0
+//   right: 0
+//   bottom: 0
+//   left: 0
+//   overflow: scroll

package/src/switch.js

@@ -123,7 +123,7 @@ class Switch {
         }
         break
       default:
-        this.setValue(prop, silent)
+        this.setValue(prop, value)
     }
 
     return this

package/src/tabview.js

@@ -1,5 +1,6 @@
 import emitter from './module/emitter'
 import observer from './module/observer'
+import display from './view/display'
 
 /**
  * Class Tab
@@ -22,14 +23,23 @@ class TabView {
    * @return {DOMElement} The dom element
    */
   constructor (options) {
+    // console.log('TabView')
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    Object.assign(this, emitter, display)
 
     this.build()
 
+    var ready = false
+
     observer.insert(this.root, () => {
-      this.setup()
-      this.attach()
+      // console.log('!!! inserted')
+      if (!ready) {
+        ready = true
+        this.setup()
+        this.attach()
+
+        this.emit('ready')
+      }
     })
 
     return this
@@ -37,7 +47,13 @@ class TabView {
 
   build () {
     this.root = document.createElement(this.options.tag || 'div')
-    this.root.classList.add(this.options.class)
+    this.root.classList.add('tabview')
+
+    this.root.classList.add('view')
+
+    if (this.options.class !== 'tabview') {
+      this.root.classList.add(this.options.class)
+    }
 
     this.ui = {}
   }
@@ -54,6 +70,8 @@ class TabView {
     this.ui.buttons = this.ui.tabs.childNodes
     this.ui.views = this.ui.view.childNodes
 
+    // console.log('views', this.ui.views)
+
     for (var i = 0; i < this.ui.views.length; i++) {
       if (this.ui.views[i].dataset) {
         this.views.push(this.ui.views[i].dataset.view)
@@ -79,34 +97,68 @@ class TabView {
 
   select (view) {
     // console.log('select', view, this.ui.tabs)
-    var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
-    // console.log('tab', button)
-    if (button) {
-      this.click(button)
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        this.click(button)
+      }
+    } else {
+      this.emit('notready')
+    }
+  }
+
+  disable (view) {
+    // console.log('select', view)
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        button.disabled = 'disabled'
+      }
+    } else {
+      this.emit('notready')
+    }
+  }
+
+  enable (view) {
+    // console.log('select', view)
+
+    if (this.ui && this.ui.tabs) {
+      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      // console.log('tab', button)
+      if (button) {
+        button.disabled = false
+      }
+    } else {
+      this.emit('notready')
     }
   }
 
   hideView () {
+    // console.log('hideView')
     for (var i = 0; i < this.ui.views.length; i++) {
+      // console.log('hide', this.ui.views[i])
       this.ui.views[i].classList.add('hide')
     }
   }
 
   click (button) {
-    // console.log('click', button.dataset.view)
+    // console.log('click', button.dataset.view, true)
     var view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
     this.hideView()
 
-    button.classList.add('selected')
-
     if (this.button) {
       this.button.classList.remove('selected')
     }
 
+    this.button = button
+
+    button.classList.add('selected')
+
     this.indicator(button)
 
     if (view) {
-      // console.log('view block', view)
       view.classList.remove('hide')
     } else {
       console.log('view ', button.dataset.view, button, this.ui.views, ' not found')
@@ -114,8 +166,6 @@ class TabView {
 
     this.emit('select', button.dataset.view)
 
-    this.button = button
-
     return view
   }
 

package/src/tooltip.js

@@ -42,6 +42,7 @@ class Tooltip {
 
     this.root = document.createElement('span')
     this.root.classList.add('tooltip')
+    this.root.classList.add('control')
 
     this.pointer = document.createElement('span')
     this.pointer.classList.add('pointer')
@@ -62,26 +63,35 @@ class Tooltip {
       targets[i].addEventListener('mouseover', (e) => {
         // console.log('tooltip', touch(), this.disabled)
         if (touch()) return
-        if (this.disabled === true) return
+
+        if (this.disabled === true) {
+          this.hide()
+          return
+        }
+
+        if (e.currentTarget.classList.contains('selected')) {
+          this.hide()
+          return
+        }
 
         this.label.innerHTML = e.currentTarget.dataset.tooltip
         var coord = this.offset(e.currentTarget)
 
-        this.root.classList.add('show')
+        this.show()
         this.root.style.top = (coord.top + this.options.offset.top) + 'px'
         this.root.style.left = coord.left - (this.root.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
       })
 
       targets[i].addEventListener('mouseleave', (e) => {
         this.label.innerHTML = ''
-        this.root.classList.remove('show')
+        this.hide()
       })
     }
 
     this.root.addEventListener('click', (e) => {
       e.preventDefault()
       e.stop()
-      this.root.classList.remove('show')
+      this.hide()
     })
   }
 
@@ -92,9 +102,17 @@ class Tooltip {
     return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
   }
 
+  hide () {
+    this.root.classList.remove('show')
+  }
+
+  show () {
+    this.root.classList.add('show')
+  }
+
   disable () {
     // console.log('disable')
-    this.root.classList.remove('show')
+    this.hide()
     this.disabled = true
   }
 

package/src/view/build.js

@@ -1,12 +1,16 @@
+import scrollbar from '../module/scrollbar'
 import dataset from './dataset'
 import Layout from '../layout'
 
 export default {
   build () {
     this.root = document.createElement('div')
-    this.root.classList.add(this.options.class)
     this.root.classList.add('view')
 
+    if (this.options.class) {
+      this.addClass(this.options.class)
+    }
+
     if (this.options.data) {
       dataset(this.root, this.options.data)
     }
@@ -18,5 +22,13 @@ export default {
       this.layout = new Layout(this.options.layout, this.root)
       this.ui = this.layout.component
     }
+  },
+
+  addClass (c) {
+    var list = c.split(' ')
+
+    for (var i = 0; i < list.length; i++) {
+      this.root.classList.add(list[i])
+    }
   }
 }