material 0.7.2 → 0.7.5

package/LICENSE

@@ -1,20 +1,11 @@
-The MIT License (MIT)
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, under the terms of the GNU General Public License as published by the Free Software Foundation, version 3 of the License.
 
-Copyright (c) 2019 2nd Floor
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.

package/index.js

@@ -1,32 +1,40 @@
 import AppBar from './src/appbar'
+import Badge from './src/badge'
 import Button from './src/button'
 import Card from './src/card'
+import Checkbox from './src/checkbox'
 import Component from './src/component'
-import DateHour from './src/control/datehour'
+import DateHour from './src/datehour'
 import Dialog from './src/dialog'
-import File from './src/control/file'
-import Loading from './src/control/loading'
-import Menu from './src/control/menu'
-import Select from './src/select'
-import Selecter from './src/control/selecter'
-import Snackbar from './src/snackbar'
-import Switch from './src/switch'
-import Switcher from './src/control/switcher'
-import Text from './src/text'
-import Textfield from './src/textfield'
+import Drawer from './src/drawer'
 import Element from './src/element'
+import File from './src/file'
+import Form from './src/form'
+import Image from './src/image'
 import Layout from './src/layout'
 import List from './src/list'
-import Tabview from './src/tabview'
+import Loading from './src/loading'
+import Menu from './src/menu'
+import Navigation from './src/navigation'
+import Progress from './src/progress'
+import Select from './src/select'
+import Selecter from './src/selecter'
+import Snackbar from './src/snackbar'
+import Slider from './src/slider'
+import Switch from './src/switch'
+import Switcher from './src/switcher'
+import Tabs from './src/tabs'
 import TabView from './src/tabview'
 import Text from './src/text'
+import Textfield from './src/textfield'
 import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
+import View from './src/view'
 import attach from './src/module/attach'
 import attributes from './src/module/attributes'
 import build from './src/module/build'
 import dataset from './src/module/dataset'
-import display from './src/module/display'
+import display from './src/mixin/display'
 import events from './src/module/attach'
 import emitter from './src/module/emitter'
 import jsonToHTML from './src/module/jsontohtml'
@@ -35,39 +43,9 @@ import observer from './src/module/observer'
 import smoothscroll from './src/module/smoothscroll'
 
 export {
-  AppBar
-  Button,
-  DateHour,
-  Datehour,
-  Dialog,
-  Card,
-  Component,
-  Element,
-  File,
-  Loading,
-  Menu,
-  Select,
-  Selecter,
-  Snackbar,
-  Switch,
-  Switcher,
-  Tabview,
-  TabView,
-  Text,
-  Textfield,
-  Toolbar,
-  Tooltip,
-  Layout,
-  List,
-  attach,
-  attributes,
-  build,
-  dataset,
-  display,
-  events,
-  emitter,
-  jsonToHTML,
-  mediator,
-  observer,
-  smoothscroll
+  AppBar, Button, Card, Checkbox, Component, DateHour, Dialog, Drawer, Element,
+  File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
+  Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
+  View, attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
+  observer, smoothscroll
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "material",
-  "version": "0.7.2",
-  "description": "A lightweight implementation of Material Design Components - ES6",
+  "version": "0.7.5",
+  "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",
   "repository": {
@@ -9,26 +9,18 @@
     "url": "git+ssh://git@gitlab.com/alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
-  "license": "MIT",
+  "license": "GPL-3",
   "bugs": {
     "url": "https://gitlab.com/alkaloid/material/issues"
   },
   "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
-    "lightweight material design ui component es6 vanilla javascript"
+    "lightweight material design ui component web es6 vanilla javascript"
   ],
   "devDependencies": {
-    "esbuild": "^0.14.47",
-    "esbuild-plugin-svg": "^0.1.0",
-    "@jgoz/esbuild-plugin-livereload": "^2.0.3",
     "standard": "^10.0.3"
   },
   "scripts": {
-    "build": "node ./esbuild.js",
-    "build:watch": "node ./esbuild.watch.js",
-    "styles": "sass --watch dist/styles/demo.sass:dist/demo.css",
-    "watch": "npm-run-all --parallel reload dev",
-    "docs": "jsdoc src -r -d docs",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

package/src/card.js

@@ -11,11 +11,6 @@ const defaults = {
 }
 
 class Card {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()

package/src/checkbox.js

@@ -1,74 +1,67 @@
-import events from './mixin/events'
-import control from './mixin/control'
-import label from './mixin/label'
-
-import insert from './element/insert'
-import build from './element/build'
-
-import emitter from './module/emitter'
+import EventEmitter from './mixin/events'
+// import control from './mixin/control'
+import build from './module/build'
 import attach from './module/attach'
 import * as css from './module/css'
 
 import icon from './skin/material/icon/checkbox.svg'
-// element related modules
-
-const defaults = {
-  prefix: 'material',
-  class: 'checkbox',
-  type: 'control',
-  // modules: [events, control, emitter, attach],
-  build: ['$root.material-checkbox', {},
-    ['input$input', {}],
-    ['span$control.checkbox-control']
-  ],
-  events: [
-    ['element.control.click', 'click', {}],
-    ['element.label.click', 'toggle', {}],
-    // for accessibility purpose
-    // ['element.input.click', 'toggle', {}],
-    ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur'],
-    ['element.input.keydown', 'keydown', {}]
-  ]
-}
+
+import Element from './element'
 
 class Checkbox {
+  static defaults = {
+    class: 'checkbox',
+    layout: [
+      [Element, 'input', { type: 'checkbox' } ],
+      [Element, 'control', { type: 'checkbox' } ],
+      [Element, 'label', { tag: 'label' }]
+    ],
+    events: [
+      ['ui.control.click', 'click'],
+      ['ui.label.click', 'toggle'],
+      // for accessibility purpose
+      // ['element.input.click', 'toggle'],
+      ['ui.input.focus', 'focus'],
+      ['ui.input.blur', 'blur'],
+      ['ui.input.keydown', 'keydown']
+    ]
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
     this.attach()
-
-    return this
   }
 
   init (options) {
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, events, control, emitter, attach)
+    Object.assign(this, build, attach)
 
     return this
   }
 
-  build () {
+  setup () {
     this.element = build(this.options.build)
     this.element = this.element.root
 
-    this.element.control.innerHTML = icon
+    this.ui.control.innerHTML = icon
 
     const text = this.options.text || this.options.label
 
-    this.element.label = label(this.element, text, this.options)
+    this.ui.label.innerHTML = text
 
-    this.element.input.setAttribute('type', 'checkbox')
-    this.element.input.setAttribute('name', this.options.name)
-    this.element.input.setAttribute('aria-label', this.options.name)
+    this.ui.input.setAttribute('type', 'checkbox')
+    this.ui.input.setAttribute('name', this.options.name)
+    this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.value) {
-      this.element.input.setAttribute('value', this.options.value)
+      this.ui.input.setAttribute('value', this.options.value)
     }
 
     if (this.options.disabled) {
       this.disabled = this.options.disabled
-      this.element.input.setAttribute('disabled', 'disabled')
+      this.ui.input.setAttribute('disabled', 'disabled')
       css.add(this.element, 'is-disabled')
     }
 
@@ -79,13 +72,6 @@ class Checkbox {
     if (this.options.value) {
       this.set('value', this.value)
     }
-
-    // insert if container options is given
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    return this
   }
 
   set (prop, value) {
@@ -106,15 +92,25 @@ class Checkbox {
     return this
   }
 
-  insert (container, context) {
-    insert(this.element, container, context)
-
+  check (checked) {
+    if (checked === true) {
+      css.add(this.element, 'is-checked')
+      this.ui.input.checked = true
+      this.checked = true
+      this.emit('change', this.checked)
+    } else {
+      css.remove(this.element, 'is-checked')
+      this.ui.input.checked = false
+      this.checked = false
+      this.emit('change', this.checked)
+    }
     return this
   }
 
+
   click (e) {
     this.toggle(e)
-    this.element.input.focus()
+    this.ui.input.focus()
 
     return this
   }
@@ -122,7 +118,7 @@ class Checkbox {
   setValue (value) {
     // console.log('setValue', value)
     this.value = value
-    this.element.input.setAttribute('value', value)
+    this.ui.input.setAttribute('value', value)
 
     return this
   }

package/src/element/insert.js

@@ -1,10 +1,12 @@
 import dom from '../module/dom'
 
-const insert = (element, container, context = 'bottom') => {
-  if (!element || !container) return
+const insert = (component, container, context = 'bottom') => {
+  // console.log('insert', component, container, context)
 
-  element = element.root || element
-  container = container.root || container
+  if (!component || !container) return
+
+  const element = component.element || component
+  container = container.element || container
 
   const contexts = ['top', 'bottom', 'after', 'before']
   const methods = ['prepend', 'append', 'after', 'before']

package/src/list.js

@@ -1,4 +1,4 @@
-import * css from './module/css'
+import * as css from './module/css'
 
 const defaults = {
   className: 'text',
@@ -10,8 +10,6 @@ class List {
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
-    // console.log('options', this.options)
-
     this.build()
 
     return this

package/src/loader.js

@@ -0,0 +1,88 @@
+class Loader {
+  static defaults = {
+    class: 'loader'
+  }
+
+  constructor (options) {
+    this.options = Object.assign({}, Loader.defaults, options || {})
+
+    // Object.assign(this, attach, mediator, build)
+
+    this.build()
+
+    return this
+  }
+
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add(this.options.class || 'loader')
+
+    this.container = document.createElement('div')
+    this.container.classList.add('container')
+    this.element.appendChild(this.container)
+
+    const svg = `
+      <svg 
+        version="1.1" 
+        id="dc-spinner" 
+        xmlns="http://www.w3.org/2000/svg" 
+        x="0px" y="0px"
+        width:"38"
+        height:"38"
+        viewBox="0 0 38 38" 
+        preserveAspectRatio="xMinYMin meet"
+      >
+        <path class="circles" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
+          C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
+          C34.797,11.841,28.159,5.203,20,5.203z">
+        </path>
+
+        <path class="circles" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
+          S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
+          S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
+        </path>
+
+        <path class="circletwo" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
+            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
+        <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 20 20"
+              to="360 20 20"
+              calcMode="spline"
+              keySplines="0.4, 0, 0.2, 1"
+              keyTimes="0;1"
+              dur="2s"
+              repeatCount="indefinite" />      
+         </path>
+
+        <path class="circleone" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
+        c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
+        C12.875,32.922,7.078,27.125,7.078,20z">
+         <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 20 20"
+            to="360 20 20"
+            dur="1.8s"  
+            repeatCount="indefinite" />  
+        </path>
+      </svg>`
+
+    this.container.innerHTML = svg
+    this.text = document.createElement(this.options.tag || 'span')
+    this.text.classList.add('text')
+    this.text.innerHTML = this.options.text
+    this.container.appendChild(this.text)
+  }
+
+  show () {
+    this.element.classList.add('show')
+  }
+
+  hide () {
+    this.element.classList.remove('show')
+  }
+}
+
+export default Loader

package/src/module/attach.js

@@ -1,5 +1,5 @@
-// Assuming extract is imported or defined elsewhere
 import extract from './extract'
+import last from './last'
 
 const attachModule = {
   attach (events) {
@@ -18,7 +18,7 @@ const attachModule = {
         keys.pop()
       }
 
-      const bound = this.last(keys.join('.'))
+      const bound = last(keys.join('.'), this)
 
       let handler = null
 
@@ -45,14 +45,8 @@ const attachModule = {
     })
 
     return this
-  },
-
-  last (str) {
-    if (!str) return this
-    if (!str.includes('.')) return this[str]
-
-    return str.split('.').reduce((acc, key) => acc[key], this)
   }
+
 }
 
 export default attachModule

package/src/module/attributes.js

@@ -1,21 +1,14 @@
 const special = ['required', 'disabled', 'multiple', 'checked']
 
-function attributes (element, o) {
-  // console.log('attributes', o.attributes, element)
+const attributes = (element, options) => {
+  if (!element || !options.attributes) return
 
-  if (!element) return
-
-  for (let i = 0; i < o.attributes.length; i++) {
-    const attribute = o.attributes[i]
-
-    if (o[attribute] && o[attribute] !== 'undefined') {
-      if (special.indexOf(attribute) > -1) {
-        element.setAttribute(attribute, attribute)
-      } else {
-        element.setAttribute(attribute, o[attribute])
-      }
+  options.attributes.forEach(attribute => {
+    if (options[attribute] && String(options[attribute]) !== 'undefined') {
+      const value = special.includes(attribute) ? attribute : options[attribute]
+      element.setAttribute(attribute, value)
     }
-  }
+  })
 }
 
 export default attributes

package/src/module/build.js

@@ -16,13 +16,11 @@ export default {
       css.add(this.element, this.options.class)
     }
 
-    if (defaults.class === 'account') console.log('data')
-
     if (this.options.data) {
       dataset(this.element, this.options.data)
     }
 
-    if (this.options.base === 'view') {
+    if (this.options.base === 'view' || this.options.base === 'app') {
       this.container = this.options.container || document.body
     } else {
       this.container = this.options.container

package/src/module/cookie.js

@@ -0,0 +1,24 @@
+const cookie = {
+  set: (name, value, expire = 365) => {
+    const d = new Date()
+    d.setTime(d.getTime() + (expire * 24 * 60 * 60 * 1000))
+    const expires = `expires=${d.toUTCString()}`
+    document.cookie = `${name}=${value};${expires};path=/`
+  },
+  get: name => {
+    const nameEQ = `${name}=`
+    const ca = decodeURIComponent(document.cookie).split(';')
+
+    for (let c of ca) {
+      while (c.charAt(0) === ' ') c = c.substring(1)
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length)
+    }
+
+    return ''
+  },
+  del: name => {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
+  }
+}
+
+export default cookie

package/src/module/dom.js

@@ -1,6 +1,7 @@
 // DOM manipulation function
 
 function append (container, element) {
+  console.log(container, element)
   container.appendChild(element)
   return element
 }

package/src/module/last.js

@@ -1,18 +1,8 @@
-export default {
-  (str) => {
-    // console.log('_path', str)
-    if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    var last
+const last = (str, that) => {
+  if (!str) return that
+  if (!str.includes('.')) return that[str]
 
-    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
-  }
+  return str.split('.').reduce((acc, key) => acc[key], that)
 }
+
+export default last

package/src/module/numabbr.js

@@ -0,0 +1,24 @@
+const numabbr = (number, decimals = 2) => {
+  const factor = Math.pow(10, decimals)
+  const abbrev = ['k', 'm', 'b', 't']
+
+  for (let i = abbrev.length - 1; i >= 0; i--) {
+    const size = Math.pow(10, (i + 1) * 3)
+
+    if (size <= number) {
+      let num = Math.round(number * factor / size) / factor
+
+      // Handle special case where we round up to the next abbreviation
+      if (num === 1000 && i < abbrev.length - 1) {
+        num = 1
+        i++
+      }
+
+      return `${num}${abbrev[i]}`
+    }
+  }
+
+  return number.toString()
+}
+
+export default numabbr

package/src/module/object.js

@@ -1,11 +1,11 @@
 
-function is (object) {
+const is = (object) => {
   return object &&
     typeof object === 'object' &&
     Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-function byString (o, s) {
+const byString = (o, s) => {
   s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   s = s.replace(/^\./, '') // strip a leading dot
   const a = s.split('.')

package/src/module/passive.js

@@ -1,4 +1,4 @@
-function passiveEvents () {
+const passiveEvents = () => {
   let supportsPassive = false
 
   try {