kdutify 0.16.9-rc.0

package/src/util/helpers.js

@@ -0,0 +1,125 @@
+export function createSimpleFunctional (c, el = 'div', name) {
+  name = name || c.replace(/__/g, '-')
+
+  return {
+    name: `k-${name}`,
+    functional: true,
+
+    render: (h, { data, children }) => {
+      data.staticClass = (`${c} ${data.staticClass || ''}`).trim()
+
+      return h(el, data, children)
+    }
+  }
+}
+
+export function createSimpleTransition (name, origin = 'top center 0', mode) {
+  return {
+    name,
+
+    functional: true,
+
+    props: {
+      origin: {
+        type: String,
+        default: origin
+      }
+    },
+
+    render (h, context) {
+      context.data = context.data || {}
+      context.data.props = { name }
+      context.data.on = context.data.on || {}
+      if (!Object.isExtensible(context.data.on)) {
+        context.data.on = { ...context.data.on }
+      }
+
+      if (mode) context.data.props.mode = mode
+
+      context.data.on.beforeEnter = el => {
+        el.style.transformOrigin = context.props.origin
+        el.style.webkitTransformOrigin = context.props.origin
+      }
+
+      return h('transition', context.data, context.children)
+    }
+  }
+}
+
+export function createJavaScriptTransition (name, functions, css = true, mode = 'in-out') {
+  return {
+    name,
+
+    functional: true,
+
+    props: {
+      css: {
+        type: Boolean,
+        default: css
+      },
+      mode: {
+        type: String,
+        default: mode
+      }
+    },
+
+    render (h, context) {
+      const data = {
+        props: {
+          ...context.props,
+          name
+        },
+        on: functions
+      }
+
+      return h('transition', data, context.children)
+    }
+  }
+}
+
+export function directiveConfig (binding, defaults = {}) {
+  return Object.assign({},
+    defaults,
+    binding.modifiers,
+    { value: binding.arg },
+    binding.value || {}
+  )
+}
+
+export function addOnceEventListener (el, event, cb) {
+  var once = () => {
+    cb()
+    el.removeEventListener(event, once, false)
+  }
+
+  el.addEventListener(event, once, false)
+}
+
+export function getObjectValueByPath (obj, path) {
+  // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621
+  if (!path || path.constructor !== String) return
+  path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  path = path.replace(/^\./, '') // strip a leading dot
+  const a = path.split('.')
+  for (var i = 0, n = a.length; i < n; ++i) {
+    var k = a[i]
+    if (obj instanceof Object && k in obj) {
+      obj = obj[k]
+    } else {
+      return
+    }
+  }
+  return obj
+}
+
+export function createRange (length) {
+  return [...Array.from({ length }, (v, k) => k)]
+}
+
+export function getZIndex (el) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return 0
+  var zi = document.defaultView.getComputedStyle(el).getPropertyValue('z-index')
+  if (isNaN(zi)) return getZIndex(el.parentNode)
+
+  return zi
+}

package/src/util/load.js

@@ -0,0 +1,13 @@
+function load (cb, i = 0) {
+  if (!document._loadCallbacks) {
+    document._loadCallbacks = []
+  }
+
+  if (document.readyState === 'complete') {
+    return cb()
+  }
+
+  document._loadCallbacks.push(cb)
+}
+
+export default load

package/src/util/mask.js

@@ -0,0 +1,138 @@
+/**
+ * Mask keys
+ *
+ * @type {Object}
+ */
+const allowedMasks = {
+  '#': {
+    test: char => char.match(/[0-9]/)
+  },
+  'A': {
+    test: char => char.match(/[A-Z]/i),
+    convert: char => char.toUpperCase()
+  },
+  'a': {
+    test: char => char.match(/[a-z]/i),
+    convert: char => char.toLowerCase()
+  },
+  'N': {
+    test: char => char.match(/[0-9A-Z]/i),
+    convert: char => char.toUpperCase()
+  },
+  'n': {
+    test: char => char.match(/[0-9a-z]/i),
+    convert: char => char.toLowerCase()
+  },
+  'X': {
+    test: isMaskDelimiter
+  }
+}
+
+/**
+ * Default delimiter RegExp
+ *
+ * @type {RegExp}
+ */
+export const defaultDelimiters = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/\\ ]/
+
+/**
+ * Is Character mask
+ *
+ * @param  {String} char
+ *
+ * @return {Boolean}
+ */
+const isMask = char => allowedMasks.hasOwnProperty(char)
+
+/**
+ * Automatically convert char case
+ *
+ * @param  {String} mask
+ * @param  {String} char
+ *
+ * @return {String}
+ */
+const convert = (mask, char) => {
+  return allowedMasks[mask].convert ? allowedMasks[mask].convert(char) : char
+}
+
+/**
+ *
+ * @param {String} char
+ *
+ * @return {Boolean}
+ */
+export const isMaskDelimiter = char => char && char.match(defaultDelimiters)
+
+/**
+ * Mask Validation
+ *
+ * @param  {String} mask
+ * @param  {String} char
+ *
+ * @return {Boolean}
+ */
+const maskValidates = (mask, char) => {
+  if (char == null || !isMask(mask)) return false
+  return allowedMasks[mask].test(char)
+}
+
+/**
+ * Mask Text
+ *
+ * Takes an array of characters
+ * and returns a compiled str
+ *
+ * @param {*} text
+ * @param {Array|String} masked
+ * @param {Boolean} [dontFillMaskBlanks]
+ *
+ * @return {String}
+ */
+export const maskText = (text, masked, dontFillMaskBlanks) => {
+  if (text == null) return ''
+  text = String(text)
+  if (!masked.length || !text.length) return text
+  if (!Array.isArray(masked)) masked = masked.split('')
+
+  let textIndex = 0
+  let maskIndex = 0
+  let newText = ''
+  while (maskIndex < masked.length) {
+    const mask = masked[maskIndex]
+
+    // Assign the next character
+    const char = text[textIndex]
+
+    // Check if mask is delimiter
+    // and current char matches
+    if (!isMask(mask) && char === mask) {
+      newText += mask
+      textIndex++
+    // Check if not mask
+    } else if (!isMask(mask) && !dontFillMaskBlanks) {
+      newText += mask
+    // Check if is mask and validates
+    } else if (maskValidates(mask, char)) {
+      newText += convert(mask, char)
+      textIndex++
+    } else {
+      return newText
+    }
+
+    maskIndex++
+  }
+
+  return newText
+}
+
+/**
+ * Unmask Text
+ *
+ * @param {String} text
+ *
+ * @return {String}
+ */
+export const unmaskText = (text) => {
+  return text.replace(new RegExp(defaultDelimiters, 'g'), '')
+}

package/src/util/testing.js

@@ -0,0 +1,154 @@
+import Kdu from 'kdu'
+import load from '~util/load'
+import { mount, shallow } from 'avoriaz'
+import toHaveBeenWarnedInit from '~util/to-have-been-warned'
+
+export function test(name, cb) {
+  toHaveBeenWarnedInit()
+
+  Kdu.prototype.$kdutify = {
+    load: (fn) => fn(),
+    breakpoint: {}
+  }
+
+/*
+  const app = document.createElement('div')
+  app.setAttribute('data-app', true)
+  document.body.appendChild(app)
+*/
+
+  rafPolyfill(window)
+
+  describe(name, () => cb({
+    functionalContext,
+    mount,
+    shallow
+  }))
+}
+
+test.skip = describe.skip
+
+export function functionalContext(context = {}, children = []) {
+  if (!Array.isArray(children)) children = [children]
+  return {
+    context: Object.assign({
+      data: {},
+      props: {}
+    }, context),
+    children
+  }
+}
+
+//requestAnimationFrame polyfill | Milos Djakonovic ( @Miloshio ) | MIT | https://github.com/milosdjakonovic/requestAnimationFrame-polyfill
+export function rafPolyfill(w) {
+  /**
+   *
+   * How many times should polyfill call
+   * update callback? By canon, it should
+   * be 60 times per second, so that ideal
+   * framerate 60fps could be reached.
+   *
+   * However, even native implementations
+   * of requestAnimationFrame often cannot
+   * do 60fps, but, unlike any polyfill,
+   * they can synchronise achievable fps
+   * rate with screen refresh rate.
+   *
+   * So, leave this value 1000/60 unless
+   * you target specific browser on spec
+   * ific device that is going to work
+   * better with custom value. I think
+   * that this is the longest comment I've
+   * written on single variable so far.
+  **/
+  var FRAME_RATE_INTERVAL = 1000/60,
+
+  /**
+   * All queued callbacks in given cycle.
+  **/
+  allCallbacks = [],
+
+  executeAllScheduled = false,
+
+  shouldCheckCancelRaf = false,
+
+  /**
+   * Callbacks queued for cancellation.
+  **/
+  callbacksForCancellation = [],
+
+  /**
+   * Should callback be cancelled?
+   * @param cb - callback
+  **/
+  isToBeCancelled = function(cb){
+    for(var i=0;i<callbacksForCancellation.length;i++){
+      if(callbacksForCancellation[i] === cb ){
+        callbacksForCancellation.splice(i,1);
+        return true;
+      }
+    }
+  },
+
+
+
+  /**
+   *
+   * Executes all (surprise) callbacks in
+   * and removes them from callback queue.
+   *
+  **/
+  executeAll = function(){
+    executeAllScheduled = false;
+    var _allCallbacks = allCallbacks;
+    allCallbacks = [];
+    for(var i=0;i<_allCallbacks.length;i++){
+      if(shouldCheckCancelRaf===true){
+        if (isToBeCancelled(_allCallbacks[i])){
+          shouldCheckCancelRaf = false;
+          return;
+        }
+      }
+      _allCallbacks[i].apply(w, [ new Date().getTime() ] );
+    }
+  },
+
+  /**
+   *
+   * requestAnimationFrame polyfill
+   * @param callback - callback to be queued & executed | executed
+   * @return callback
+   *
+  **/
+  raf = function(callback){
+    allCallbacks.push(callback);
+    if(executeAllScheduled===false){
+      w.setTimeout(executeAll, FRAME_RATE_INTERVAL);
+      executeAllScheduled = true;
+    }
+    return callback;
+  },
+
+  /**
+   *
+   * Cancels raf.
+  **/
+  cancelRaf = function(callback){
+    callbacksForCancellation.push(callback);
+    shouldCheckCancelRaf = true;
+  },
+
+
+  //https://gist.github.com/paulirish/1579671
+  vendors = ['ms', 'moz', 'webkit', 'o'];
+
+    for(var x = 0; x < vendors.length && !w.requestAnimationFrame; ++x) {
+        w.requestAnimationFrame = w[vendors[x]+'RequestAnimationFrame'];
+        w.cancelAnimationFrame = w[vendors[x]+'CancelAnimationFrame']
+        || w[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+
+  if (!w.requestAnimationFrame) w.requestAnimationFrame = raf;
+  if (!w.cancelAnimationFrame)  w.cancelAnimationFrame  = cancelRaf;
+
+}

package/src/util/to-have-been-warned.js

@@ -0,0 +1,68 @@
+// From Kdu, slightly modified
+
+function noop() { }
+
+if (typeof console === 'undefined') {
+  window.console = {
+    warn: noop,
+    error: noop
+  }
+}
+
+// avoid info messages during test
+console.info = noop
+
+const asserted = []
+
+function createCompareFn (spy) {
+  const hasWarned = msg => {
+    for (const args of spy.calls.allArgs()) {
+      if (args.some(arg => (
+        arg.toString().includes(msg)
+      ))) return true
+    }
+  }
+
+  return {
+    compare: msg => {
+      asserted.push(msg)
+      const warned = Array.isArray(msg)
+        ? msg.some(hasWarned)
+        : hasWarned(msg)
+      return {
+        pass: warned,
+        message: warned
+          ? `Expected message "${msg}" not to have been warned`
+          : `Expected message "${msg}" to have been warned`
+      }
+    }
+  }
+}
+
+function toHaveBeenWarnedInit() {
+  // define custom matcher for warnings
+  beforeEach(() => {
+    asserted.length = 0
+    spyOn(console, 'warn')
+    spyOn(console, 'error')
+    jasmine.addMatchers({
+      toHaveBeenWarned: () => createCompareFn(console.error),
+      toHaveBeenTipped: () => createCompareFn(console.warn)
+    })
+  })
+
+  afterEach(done => {
+    for (const type of ['error', 'warn']) {
+      const warned = msg => asserted.some(assertedMsg => msg.toString().includes(assertedMsg))
+      for (const args of console[type].calls.allArgs()) {
+        if (!warned(args[0])) {
+          done.fail(`Unexpected console.${type} message: ${args[0]}`)
+          return
+        }
+      }
+    }
+    done()
+  })
+}
+
+export default toHaveBeenWarnedInit

package/src/util/touchSupport.js

@@ -0,0 +1,12 @@
+import { addOnceEventListener } from './helpers'
+
+/**
+ * @mixin
+ */
+export default {
+  mounted () {
+    addOnceEventListener(window, 'touchstart', () => {
+      this.$kdutify.touchSupport = true
+    })
+  }
+}