// adds a method:
// getViewportSize()
//
// usage:
vs = this.getViewportSize()
vs.width
vs.height

// adds a method:
// getDocumentHeight()
//
// usage:
height = this.getDocumentHeight()

// adds a method:
// onceDocument(event, cb, useCapture)
//
// usage:
dispose = this.onceDocument('click',function(e){
  doSomething()
  // return true will remove the listener
  // return false will not remove the listener
  },false)
dispose() // will remove the listener

// adds a method:
// click(event) which will call this.onClick(e) if available
//
// usage:
this.onClick = function(e) {doSomething()}

// adds two methods:
// - click(event) will call the last function in this.onClickStack if available
// - addToClickStack(fn) will add a function to this.onClickStack and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
  doSomething()
  dispose() // to remove from stack
}
dispose = this.addToClickStack(cb)

// adds two methods:
// - click(event) will call all functions in this.onClickStore
// - onClick(fn) will add a function to this.onClickStore and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
  doSomething()
  dispose() // to remove from store
}
dispose = this.onClickStore(cb)

// adds a method: onWindowResize(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowResize(function(){/*doSomethingOnWindowResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

// adds a method: onElementResize(el, cb) which will return a function to dispose it
//
// usage:
dispose = this.onElementResize(el, function(){/*doSomethingOnElementResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

// adds a method: onWindowScroll(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowScroll(function(){/*doSomethingOnWindowScroll*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

// adds a method:
// setCss(element,cssProperty, cssValue)
//
// usage:
this.setCss(document.body,"overflow","hidden")

// remove overflow from style attribute
this.setCss(document.body,"overflow")
// or
this.setCss(document.body,"overflow", "")

// used to create a stylesheet and set rules in it.
// adds a method:
// setCssRules(newRules)
//
// usage:
this.setCssRules({body: {overflow: "hidden"}})
// to remove a rule:
this.setCssRules({body: {overflow: null}})
// nesting:
this.setCssRules({body: {"& div": {width: "10px"},overflow:"hidden"}})
// is short for: (& will be replaced by the parent selector)
// deeper nesting is allowed
this.setCssRules({body: {overflow:"hidden"},"body div": {width: "10px"}})

// adds a computed property:
// Vue
//
// usage:
Vue = this.Vue

// adds a boolean prop "isOpened" which will call "this.toggle()" on change
// the state is saved on "opened"
//
// adds two methods:
// setOpened(), setClosed() which will set "this.isOpened" without triggering
// the toggle
//  and emit a event "toggled(opened)"
//
// usage:
methods:
  toggle: function(){
    if (this.opened) {
      this.close()
    } else {
      this.open()
    }
  }
  open: function() {
    this.setOpened()
  }
  close: function() {
    this.setClosed()
  }  

// adds two props: "ignoreParent" and "parent", which
// defaults to "this.$el.parentElement"
//
// usage:
methods:
  onParentClick: function() {
    // will be called when "ignoreParent" is false on click on parent
  }

// adds a method: "fragToString"
// usage:
str = this.fragToString(someFrag)
// str contains outerHTML of someFrag

// adds a computed property: "computedClass"
// which merges a "mergeClass" data object/array and a "class" prop.
// usage:
template: "<div :class=computedClass></div>",
props: {
  class: {
    default: function() {
      return ["someClass"]
    }
  }
},
data: function() {
  return {
    mergeClass: ["anotherClass"]
  }
}
// computedClass will be ["anotherClass","someClass"] when no prop is given
// if the component is used like this <comp :class="['yetAnotherClass']"></comp>
// computedClass will be ["anotherClass","yetAnotherClass"]
// works also with object notation and a mixture of both

// adds a computed property: "computedStyle"
// which merges a "mergeStyle" data object and a "style" prop.
// usage:
template: "<div :style=computedStyle></div>",
props: {
  style: {
    default: function() {
      return {color:"red"}
    }
  }
},
data: function() {
  return {
    mergeStyle: {color:"blue"}
  }
}
// computedStyle will be [{color:"blue"},{color:"red"}] when no prop is given
// if the component is used like this <comp :style="{color:white}"></comp>
// computedStyle will be [{color:"blue"},{color:"white"}]
// works also with array notation and a mixture of both

// adds a method: "processTransition" and a computed value "cTransition"
// usage:
template: "<div :transition=cTransition></div>",
props: {
  transition: {
    type: String,
    default: "someDefaultTransition"
 }
},
ready: function() {
  this.$on("before-enter",function(){
    // will be called after element is inserted in dom but before transition starts
    // regardless of a optional provided transition
  })
}

// adds a method: onMouseMove(cb) which will return a function to dispose it
//
// usage:
dispose = this.onMouseMove(function(){/*doSomethingOnMouseMove*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`