material 0.5.2 → 0.6.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "material",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git@gitlab.com:alkaloid/material.git"
+    "url": "git+ssh://git@gitlab.com/alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
   "license": "MIT",
@@ -14,7 +14,7 @@
   },
   "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
-    "lightweight material design component es6 es2015 vanilla javascript"
+    "lightweight material design ui component es6 vanilla javascript"
   ],
   "devDependencies": {
     "babel-core": "^6.26.0",

package/src/control/link.js

@@ -35,7 +35,7 @@ class Link {
       this.set(this.options.link)
     }
 
-    if (this.options.target) {
+    if (this.options.target !== 'blank') {
       this.root.target = this.options.target
     }
 
@@ -54,7 +54,15 @@ class Link {
     // console.log('set', text)
     if (link === undefined) return
 
-    this.root.href = link
+    if (this.options.target === 'blank') {
+      this.root.href = '#'
+      this.root.addEventListener('click', () => {
+        window.open(link)
+        return false
+      })
+    } else {
+      this.root.href = link
+    }
   }
 }
 

package/src/control/textfield.js

@@ -93,7 +93,7 @@ class Text {
   }
 
   onInput (ev) {
-    console.log('onInput', this.value, this.input.value)
+    // console.log('onInput', this.value, this.input.value)
 
     this.emit('change', ev)
   }
@@ -109,7 +109,7 @@ class Text {
   }
 
   onClick (ev) {
-    console.log('click')
+    // console.log('click')
     this.emit('click', ev)
   }
 

package/src/form/controller.js

@@ -39,7 +39,7 @@ export default {
   },
 
   changeMode (mode) {
-    console.log('changeMode', mode)
+    // console.log('changeMode', mode)
 
     if (mode === 'update' && this.enableControls) {
       this.enableControls()

package/src/layout.js

@@ -1,33 +1,14 @@
-
 import { is as isObject } from './module/object'
 import css from './module/css'
 
-/**
- *
- */
 class Layout {
-  /**
-   * [constructor description]
-   * @param  {?} schema    [description]
-   * @param  {?} container [description]
-   * @return {?}           [description]
-   */
   constructor (schema, container) {
     this.components = []
     this.component = this.create(schema, container)
 
-    // console.log('this', this)
-
     return this
   }
 
-  /**
-   * [create description]
-   * @param  {?} schema    [description]
-   * @param  {?} container [description]
-   * @param  {?} structure [description]
-   * @return {?}           [description]
-   */
   create (schema, container, structure, level) {
     level = level || 0
     level++
@@ -79,6 +60,10 @@ class Layout {
             var wrapper = container.root || container
 
             wrapper.appendChild(element)
+
+            if (component.onInserted) {
+              component.onInserted(wrapper)
+            }
           }
           component._container = container
         }
@@ -94,11 +79,6 @@ class Layout {
     return structure
   }
 
-  /**
-   * [_initFlexDirection description]
-   * @param  {Element} container Init direction for the given container
-   * @param  {string} direction (horizontal,vertical)
-   */
   display (element, options) {
     var display = options.display
     var direction = options.direction || 'horizontal'
@@ -112,11 +92,6 @@ class Layout {
     }
   }
 
-  /**
-   * [style description]
-   * @param  {?} component [description]
-   * @return {?}           [description]
-   */
   style (component) {
     var options = component.options || {}
 
@@ -166,16 +141,9 @@ class Layout {
       }
     }
 
-    // console.log('--- field', field)
-
     return field
   }
 
-  /**
-   * [get description]
-   * @param  {?} name [description]
-   * @return {?}      [description]
-   */
   get (name) {
     if (name) return this.component[name]
     else return this.component

package/src/list/build.js

@@ -79,10 +79,7 @@ export default {
         // console.log('render', this.data[i])
         return this.renderItem(this.data[i])
       }
-    })
-
-    // console.log('dynamic')
-    this.virtual.on('next', (total) => {
+    }).on('next', (total) => {
       // console.log('next', total)
       if (this.stop) return
 
@@ -113,6 +110,7 @@ export default {
       // console.log('!!!!size', size)
       // this.size = size
     // })
+    //
   },
 
   onProgress (value) {

package/src/list/filter.js

@@ -21,12 +21,12 @@ export default {
   },
 
   getFilter () {
-    // console.log('getFilter')
+    console.log('getFilter')
     var filter = null
     for (var name in this.filter) {
       if (this.filter.hasOwnProperty(name)) {
-        // console.log('--', typeof this.filter[name].get(), this.filter[name].get())
-        if (this.filter[name].get() !== '' && this.filter[name].get() !== []) {
+        console.log('--', typeof this.filter[name].get(), this.filter[name].get())
+        if (this.filter[name].get() !== ''/* && this.filter[name].get() !== [] */) {
           if (filter) {
             filter = filter + '&' + name + '=' + this.filter[name].get()
           } else {

package/src/list/select.js

@@ -41,6 +41,14 @@ export default {
     this.item = null
   },
 
+  getInfoById (id) {
+    return this.dataStore[id]
+  },
+
+  getSelectedInfo () {
+    return this.dataStore[this.id]
+  },
+
   getItemById (id, silent) {
     // console.log('selectItemById', id)
     var item = this.ui.body.querySelector('[data-id="' + id + '"]')
@@ -102,6 +110,7 @@ export default {
     item.classList.add('selected')
 
     if (this.options.updatePosition === true) {
+      // console.log('selectPosition', item)
       this.selectPosition(item, direction)
     }
 
@@ -181,6 +190,15 @@ export default {
     }
   },
 
+  scrollIntoView (item) {
+    // console.log('selectPrevious', this.id)
+    item = item || this.item
+
+    if (item) {
+      item.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' })
+    }
+  },
+
   highlight (item) {
     if (this.item) {
       this.item.classList.remove('selected')

package/src/list/virtual.new.js

@@ -0,0 +1,202 @@
+// based on https://sergimansilla.com/blog/virtual-scrolling/
+
+// Import necessary modules
+import passiveEvents from '../module/passive'  // Import the passiveEvents utility.
+import emitter from '../module/emitter'        // Import the emitter module.
+
+// Define the VirtualList class
+class VirtualList {
+  constructor (options) {
+    // Initialize the class with options passed to the constructor.
+    this.options = { ...(options || {}) }  // Spread operator to merge options with default values.
+    Object.assign(this, emitter)           // Assign emitter methods to the instance.
+
+    // Destructure options for easier access to properties.
+    const { itemHeight = 0, size = 0, items = [], render, container } = options
+
+    // Initialize instance variables with default or provided values.
+    this.itemHeight = itemHeight
+    this.next = false
+    this.size = size
+    this.chunkSize = size
+    this.items = items
+    this.render = render
+    this.scroller = VirtualList.createScroller()
+    this.container = container
+
+    // Get the offset height of the container.
+    this.setOffset()
+
+    // Add a window resize event listener to update the offset height.
+    window.addEventListener('resize', () => {
+      clearTimeout(this.resizeTimeout)
+
+      this.resizeTimeout = setTimeout(() => {
+        this.setOffset()
+      }, 50)
+    })
+
+    // Add 'virtual' class to the container element.
+    this.container.classList.add('virtual')
+  }
+
+  // Method to render a chunk of items within the visible range.
+  renderChunk (node, from, number) {
+    const fragment = document.createDocumentFragment()
+    fragment.appendChild(this.scroller)
+
+    let last = from + number
+    if (last > this.count) last = this.count
+
+    for (let i = from; i < last; i++) {
+      const item = this.render(i)
+
+      // Position the item absolutely based on its index and item height.
+      item.style.position = 'absolute'
+      item.style.top = i * this.itemHeight + 'px'
+      fragment.appendChild(item)
+    }
+
+    node.innerHTML = ''
+    node.appendChild(fragment)
+
+    // Emit 'next' event if applicable.
+    console.log('last', last)
+    console.log('count', this.count)
+    console.log('next', this.next)
+    console.log('size', this.size)
+
+    if (this.next && last && last > (this.count - this.size / 2)) {
+      this.emit('next', this.count)
+    }
+
+    this.next = true
+  }
+
+  // Method to set the items and render the initial chunk.
+  set (items) {
+    this.next = false
+    this.items = items
+    this.count = items.length
+
+    if (this.count < 1 || this.count === undefined) return
+
+    this.container.innerHTML = ''
+    this.container.scrollTop = 0
+
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    let size = this.itemsByScreen * 4
+    this.renderChunk(this.container, 0, size)
+
+    this.size = size
+
+    this.emit('size', size)
+
+    let lastRepaintY
+    const maxBuffer = this.itemsByScreen * this.itemHeight
+
+    // Add a scroll event listener to render items dynamically.
+    const onScroll = (e) => {
+      const scrollTop = e.target.scrollTop
+      let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+
+      size = this.itemsByScreen * 4
+
+      if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+        this.renderChunk(this.container, first, size)
+        lastRepaintY = scrollTop
+      }
+
+      const progress = Math.ceil((scrollTop / this.itemHeight) + this.itemsByScreen) - 1
+      this.emit('progress', progress)
+    }
+
+    if (!this.scrollEvents) {
+      // Add scroll event listener with passive option if supported.
+      this.container.addEventListener(
+        'scroll',
+        onScroll,
+        passiveEvents() ? { passive: true } : false
+      )
+      this.scrollEvents = true
+    }
+  }
+
+  // Method to update the items and re-render the visible chunk.
+  update (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const cachedItemsLen = this.itemsByScreen * 4
+    const scrollTop = this.container.scrollTop
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    this.renderChunk(this.container, first, cachedItemsLen)
+  }
+
+  // Method to add items and update the container height.
+  add (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+  }
+
+  // Method to reset the items and container to an initial state.
+  reset () {
+    this.items = []
+    this.count = 0
+
+    this.container.scrollTop = 0
+
+    this.scroller.style.height = '0'
+  }
+
+  // Method to set the offset height of the container.
+  setOffset (info) {
+    this.offsetHeight = this.container.offsetHeight
+    if (this.offsetHeight < 1) {
+      this.offsetHeight = window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight
+    }
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    const itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+    const size = itemsByScreen * 4
+
+    return size
+  }
+
+  // Method to get the total count of items.
+  getCount () {
+    return this.count
+  }
+
+  // Static method to create a scroller element.
+  static createScroller () {
+    const scroller = document.createElement('div')
+    scroller.classList.add('scroller')
+    return scroller
+  }
+}
+
+// Export the VirtualList class as the default export.
+export default VirtualList

package/src/module/attach.js

@@ -41,7 +41,6 @@ export default {
       } else if (e && e.element && e.element.on && f && bound) {
         e.element.on(e.name, f.bind(bound))
       } else {
-        // console.trace('can\'t attach', def[0])
         // console.log('can\'t attach', def[0])
       }
     })

package/src/module/passive.js

@@ -1,17 +1,22 @@
+function passiveEvents () {
+  let supportsPassive = false
 
-function passive () {
-  var supportsPassive = false
   try {
-    var opts = Object.defineProperty({}, 'passive', {
-      get: function () {
+    const opts = Object.defineProperty({}, 'passive', {
+      get () {
         supportsPassive = true
       }
     })
+
+    // Test if the browser supports passive event listeners
     window.addEventListener('testPassive', null, opts)
     window.removeEventListener('testPassive', null, opts)
-  } catch (e) {}
+  } catch (e) {
+    // If there was an error, it's safe to assume that passive event listeners are not supported
+    supportsPassive = false
+  }
 
   return supportsPassive
 }
 
-export default passive
+export default passiveEvents

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

@@ -43,18 +43,6 @@
     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
@@ -143,7 +131,7 @@
       // justify-content: flex-end;
       padding: 8px
 
-      .material-buttion
+      .material-button
         margin: 0 0 0 8px
 
   &.dialog-show