@domql/qsql 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# qsql
+DOM manipulation using document queries. Uses [DOMQL](https://github.com/domql/domql) API.
+
+### Installation
+```
+yarn add classql
+```
+
+### Examples
+
+Initialization: 
+
+```javascript
+import DOM from 'qsql'
+
+DOM.query({
+  logo: { query: '.logo' }
+})
+```
+
+Attributes:
+```javascript
+DOM.query({
+  modal: {
+    query: '.modal',
+    style: { display: 'none' }
+  }
+})
+```
+
+Events and update:
+```javascript
+DOM.query({
+  CTA: {
+    query: '.button',
+    on: {
+      click: (event, element, node) => {
+        DOM.find('modal').update({
+          style: { display: 'block' }
+        })
+      }
+    }
+  }
+})
+```

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@domql/qsql",
+  "version": "0.1.0",
+  "main": "src/index.js",
+  "author": "symbo.ls",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "domql": "latest"
+  }
+}

package/src/apply.js

@@ -0,0 +1,22 @@
+'use strict'
+
+import { init } from '@rackai/domql/src/event/on'
+import { exec, isObject } from '@rackai/domql/src/utils/object'
+
+import params from './params'
+import on from './on'
+
+export default element => {
+  element.nodes.forEach(node => {
+    if (isObject(element.on)) on(element, node)
+
+    for (let key in element) {
+      var elemParam = element[key]
+      var param = params[key]
+      if (param) param(elemParam, element, node)
+    }
+
+    if (element.on && typeof element.on.init === 'function')
+      init(element.on.init, element, node)
+  })
+}

package/src/define.js

@@ -0,0 +1,12 @@
+'use strict'
+
+import params from './params'
+
+export default (newParams, options = {}) => {
+  var { overwrite } = options
+  for (const param in newParams) {
+    if (params[param] && !overwrite) {
+      console.log(`Can't overwrite to default params. Use { overwrite: true } to force update`)
+    } else params[param] = newParams[param]
+  }
+}

package/src/find.js

@@ -0,0 +1,5 @@
+'use strict'
+
+import registry from './registry'
+
+export default query => registry[query] || console.warn(`Can't find element "${query}"`)

package/src/index.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import '@rackai/domql'
+
+import query from './query'
+import registry from './registry'
+import define from './define'
+import find from './find'
+import { methods, setMethod } from './methods'
+
+export default {
+  registry,
+  query,
+  define,
+  find,
+  methods,
+  setMethod
+}

package/src/methods.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const methods = {}
+
+export const setMethod = newMethods => {
+  for (const param in newMethods) {
+    methods[param] = newMethods[param]
+  }
+  return methods
+}

package/src/on.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import * as events from '@rackai/domql/src/event/on'
+
+events.init = (param, element, node) => {
+  param.call(element, element, node)
+}
+
+export default (element, node) => {
+  for (const param in element.on) {
+    if (param === 'init' || param === 'render') continue
+
+    var appliedFunction = element.on[param]
+    if (typeof appliedFunction === 'function') {
+      node.addEventListener(param, event => appliedFunction(event, element), true)
+    }
+  }
+}

package/src/params.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import {
+  attr,
+  classList,
+  data,
+  style,
+  html
+} from '@rackai/domql/src/element/params'
+
+export default {
+  attr,
+  class: classList,
+  data,
+  style,
+  text: (param, element, node) => {
+    node.innerText = param
+  },
+  html
+}

package/src/query.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import registry from './registry'
+import apply from './apply'
+import update from './update'
+import { methods } from './methods'
+import { is } from '@rackai/domql/src/event'
+
+var query = params => {
+  for (let key in params) {
+    var element = params[key]
+    var { query, node } = element
+    var nodesArr = []
+
+    if (is.node(node)) nodesArr = [node]
+    else {
+      var nodes = document.querySelectorAll(query)
+      var { length } = nodes
+      if (length === 0) console.warn(`Could not find element "${key}"`)
+      nodes.forEach((node, key) => nodesArr[key] = node)
+    }
+
+    element.nodes = nodesArr
+    element.key = key
+    element.update = update
+
+    for (var one in methods) if (key !== one) element[one] = methods[one]
+    
+    registry[key] = params[key]
+
+    apply(element)
+  }
+
+  return registry
+}
+
+export default query

package/src/registry.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export default {}

package/src/update.js

@@ -0,0 +1,24 @@
+'use strict'
+
+import params from './params'
+import on from './on'
+import { exec, isObject } from '@rackai/domql/src/utils/object'
+
+const update = function (newParams) {
+  var element = this
+  element.nodes.forEach(node => {
+    if (isObject(newParams.on)) on(element, node)
+    for (let param in newParams) {
+      var newParam = newParams[param]
+      var hasParam = params[param]
+      if (hasParam) hasParam(newParam, element, node)
+    }
+  })
+
+  // run onUpdate
+  if (element.on && typeof element.on.update === 'function') {
+    on.update(element.on.update, element, node)
+  }
+}
+
+export default update