pinstripe 0.1.2

data/web/javascripts/_pinstripe/node_wrapper.js

@@ -0,0 +1,354 @@
+
+import { capitalize } from './util'
+import { VirtualNode } from './virtual_node'
+import { EventWrapper } from './event_wrapper' 
+
+const nodeWrappers = [];
+
+export class NodeWrapper {
+
+    static get selector(){ return `.${this.name}` }
+
+    static register(){
+        const klass = this
+
+        nodeWrappers.unshift(klass)
+
+        Object.defineProperty(NodeWrapper.prototype, klass.name, {
+            get: function(){
+                let current = this.parent
+                while(current){
+                    if(current instanceof klass){
+                        return current
+                    }
+                    current = current.parent
+                }
+            } 
+        })
+        
+        Object.defineProperty(NodeWrapper.prototype, `is${capitalize(klass.name)}`, {
+            get: function(){
+                return this instanceof klass
+            } 
+        })
+    }
+
+    static instanceFor(node){
+        if(!node.$p){
+            node.$p = new NodeWrapper(node)
+            nodeWrappers.some((klass) => {
+                if(node.$p.is(klass.selector)){
+                    node.$p = new klass(node)
+                    return true
+                }
+            })
+        }
+        return node.$p
+    }
+
+    constructor(node){
+        this.node = node
+        this.$registeredEventListeners = []
+    }
+
+
+    get type(){
+        return this.node instanceof DocumentType ? '#doctype' : this.node.nodeName.toLowerCase()
+    }
+
+    get attributes(){
+        const out = {}
+        if(this.node.attributes){
+            for(let i = 0; i < this.node.attributes.length; i++){
+                out[this.node.attributes[i].name] = this.node.attributes[i].value
+            }
+        }
+        return out
+    }
+
+    get text(){
+        return this.node.textContent
+    }
+
+    get realParent(){
+        return this.node.parentNode ? this.constructor.instanceFor(this.node.parentNode) : null
+    }
+
+    get parent(){
+        if(this.$parent){
+            return this.$parent
+        }
+        return this.realParent
+    }
+
+    get parents(){
+        const out = []
+        let current = this
+        while(current.parent){
+            current = current.parent
+            out.push(parent)
+        }
+        return out
+    }
+
+    get children(){
+        return [...this.node.childNodes].map(
+            node => this.constructor.instanceFor(node)
+        )
+    }
+
+    get siblings(){
+        if(this.parent){
+            return this.parent.children
+        } else {
+            return [this]
+        }
+    }
+
+    get previousSibling(){
+        if(this.node.previousSibling){
+            return this.constructor.instanceFor(this.node.previousSibling)
+        } else {
+            return null
+        }
+    }
+
+    get nextSibling(){
+        if(this.node.nextSibling){
+            return this.constructor.instanceFor(this.node.nextSibling)
+        } else {
+            return null
+        }
+    }
+
+    get nextSiblings(){
+        const out = []
+        let current = this
+        while(current.nextSibling){
+            current = current.nextSibling
+            out.push(current)
+        }
+        return out
+    }
+
+    get previousSiblings(){
+        const out = []
+        let current = this
+        while(current.previousSibling){
+            current = current.previousSibling
+            out.push(current)
+        }
+        return out
+    }
+
+    get descendants(){
+        return this.find(() => true)
+    }
+
+    find(selector, out = []){
+        this.children.forEach((child) => {
+            if(child.is(selector)){
+                out.push(child)
+            }
+            child.find(selector, out)
+        })
+        return out;
+    }
+
+    is(selector){
+        if(typeof selector == 'function'){
+            return selector.call(this, this)
+        }
+        return (this.node.matches || this.node.matchesSelector || this.node.msMatchesSelector || this.node.mozMatchesSelector || this.node.webkitMatchesSelector || this.node.oMatchesSelector || (() => false)).call(this.node, selector)
+    }
+
+    on(name, ...args){
+        const fn = args.pop()
+        const selector = args.pop()
+
+        const wrapperFn = (event, ...args) => {
+            const eventWrapper = EventWrapper.instanceFor(event)
+            if(selector){
+                if(eventWrapper.target.is(selector)){
+                    return fn.call(eventWrapper.target, eventWrapper, ...args)
+                }
+            } else {
+                return fn.call(this, eventWrapper, ...args)
+            }
+        }
+
+        this.node.addEventListener(name, wrapperFn)
+
+        this.$registeredEventListeners.push([name, wrapperFn])
+
+        return this
+    }
+    
+    trigger(name, data){
+        if (window.CustomEvent && typeof window.CustomEvent === 'function') {
+            var event = new CustomEvent(name, { bubbles: true, cancelable: true, detail: data } );
+        } else {
+            var event = document.createEvent('CustomEvent')
+            event.initCustomEvent(name, true, true, data)
+        }
+        
+        this.node.dispatchEvent(event)
+
+        return this
+    }
+
+    remove(){
+        if(this.type != '#doctype'){
+            this.realParent.node.removeChild(this.node)
+        }
+        return this
+    }
+
+    addClass(name){
+        this.node.classList.add(name)
+        return this
+    }
+
+    removeClass(name){
+        this.node.classList.remove(name)
+        return this
+    }
+
+    patch(html){
+        cleanChildren.call(this)
+        patchChildren.call(this, VirtualNode.fromString(html).children)
+        initChildren.call(this)
+        return this.children
+    }
+
+    append(html){
+        return prepend.call(this, html)
+    }
+
+    prepend(html){
+        return prepend.call(this, html, this.children[0])
+    }
+
+    insertBefore(html){
+        return prepend.call(this.realParent, html, this)
+    }
+
+    insertAfter(html){
+        return prepend.call(this.realParent, html, this.nextSibling)
+    }
+
+}
+
+function cleanChildren(){
+    this.children.forEach(child => clean.call(child))
+}
+
+function clean(){
+    [...this.node.childNodes].forEach(node => node.$p && clean.call(node.$p))
+
+    while(this.$registeredEventListeners.length){
+        this.node.removeEventListener(...this.$registeredEventListeners.pop())
+    }
+    this.node.$p = undefined
+}
+
+function initChildren(){
+    this.children.forEach(child => initChildren.call(child))
+}
+
+function prepend(html, referenceChild){
+    const out = []
+    VirtualNode.fromString(html).children.forEach((virtualChild) => {
+        out.push(insert.call(this, virtualChild, referenceChild))
+    })
+    return out
+}
+
+function patch(attributes, virtualChildren){
+    patchAttributes.call(this, attributes)
+    patchChildren.call(this, virtualChildren)
+}
+
+function patchAttributes(attributes){
+    if(this.type == '#text' || this.type == '#comment'){
+        if(this.node.textContent != attributes.value){
+            this.node.textContent = attributes.value
+        }
+    } else if(this.type != '#doctype'){
+        const currentAttributes = this.attributes
+        Object.keys(currentAttributes).forEach((key) => {
+            if(attributes[key] === undefined){
+                this.node.removeAttribute(key)
+            }
+        })
+        Object.keys(attributes).forEach((key) => {
+            if(currentAttributes[key] != attributes[key]){
+                this.node.setAttribute(key, attributes[key])
+            }
+        })
+    }
+}
+
+function patchChildren(virtualChildren){
+    const children = [...this.node.childNodes].map(
+        node => new NodeWrapper(node)
+    )
+
+    for(let i = 0; i < virtualChildren.length; i++){
+        let child = children[0]
+        const virtualChild = virtualChildren[i]
+
+        if(child && child.type == virtualChild.type){
+            patch.call(children.shift(), virtualChild.attributes, virtualChild.children)
+        } else if(virtualChild.type == '#doctype'){
+            // ignore
+        } else if(virtualChild.type.match(/^#(text|comment)/)){
+            insert.call(this, virtualChild, child)
+        } else {
+            while(children.length > 0 && children[0].type.match(/^#/)){
+                children.shift().remove()
+            }
+            child = children[0]
+            if(child && child.type == virtualChild.type){
+                patch.call(children.shift(), virtualChild.attributes, virtualChild.children);
+            } else {
+                insert.call(this, virtualChild, child)
+            }
+        }
+    }
+
+    while(children.length > 0){
+        children.shift().remove()
+    }
+}
+
+function insert(virtualNode, referenceChild, returnNodeWrapper = true){
+    const { type, attributes, children } = virtualNode
+
+    let node
+
+    if(type == '#text'){
+        node = document.createTextNode(attributes.value)
+    } else if(type == '#comment'){
+        node = document.createComment(attributes.value)
+    } else {
+        node = document.createElement(type)
+        Object.keys(attributes).forEach((key) => {
+            node.setAttribute(key, attributes[key]) 
+        })
+    }
+
+    children.forEach(child => {
+        insert.call(new NodeWrapper(node), child, null, false)
+    })
+    
+    this.node.insertBefore(
+        node,
+        referenceChild && referenceChild.node
+    )
+    
+    if(returnNodeWrapper){
+        return NodeWrapper.instanceFor(node)
+    }
+}
+

data/web/javascripts/_pinstripe/node_wrappers/anchor.js

@@ -0,0 +1,56 @@
+
+import { NodeWrapper } from '../node_wrapper'
+import { Url } from '../url'
+
+export class Anchor extends NodeWrapper {
+
+    static get name(){ return 'anchor' }
+    
+    static get selector(){ return 'a, .anchor' }
+
+    constructor(...args){
+        super(...args)
+
+        this.on('click', (event) => {
+            if(this.url.host == this.frame.url.host && this.url.port == this.frame.url.port){
+                event.preventDefault()
+
+                const confirm = this.attributes['data-confirm']
+                const method = this.attributes['data-method'] || 'GET'
+                const target = this.attributes['target'] || this.attributes['data-target'] || '_top'
+
+                if(!confirm || window.confirm(confirm)){
+                    if(target == '_modal'){
+                        this.document.find('html').pop().addClass('is-clipped')
+                        this.document.find('body').pop().append(`<div class="modal is-active" data-url="${this.url}"></div>`).forEach((modal) => {
+                            modal.$parent = this
+                            modal.load({})
+                        })
+                    } else {
+                        this.frame.load({ $method: method, $url: this.url })
+                    }
+                }
+            }
+        })
+    }
+
+    get url(){
+        if(this.$url === undefined){
+            this.$url = Url.fromString(
+                this.attributes['href'] || this.attributes['data-url'],
+                this.frame.url
+            )
+        }
+        return this.$url
+    }
+
+    set url(url){
+        this.$url = Url.fromString(
+            url,
+            this.url
+        )
+    }
+
+}
+
+Anchor.register()

data/web/javascripts/_pinstripe/node_wrappers/document.js

@@ -0,0 +1,27 @@
+import { Frame } from './frame'
+
+export class Document extends Frame {
+
+    static get name(){ return 'document' }
+    
+    static get selector(){ return function(){ return this.type == '#document' } }
+
+    constructor(...args){
+        super(...args)
+        window.onpopstate = (event) => {
+            this.load({ $pushState: false, $url: event.state || window.location })
+        }
+        window.$p = this
+    }
+
+    load({ $pushState = true, ...params }){
+        const previousUrl = this.url.toString()
+        super.load(params)
+        if($pushState && params.$method == 'GET' && previousUrl != this.url.toString()){
+            history.pushState(this.url.toString(), null, this.url.toString())
+        }
+    }
+
+}
+
+Document.register()

data/web/javascripts/_pinstripe/node_wrappers/form.js

@@ -0,0 +1,52 @@
+
+import { NodeWrapper } from '../node_wrapper'
+import { Url } from '../url'
+
+export class Form extends NodeWrapper {
+
+    static get name(){ return 'form' }
+    
+    static get selector(){ return 'form, .form' }
+    
+    constructor(...args){
+        super(...args)
+
+        this.on('submit', (event) => {
+            console.log('Form submit', event)
+            event.preventDefault();
+            this.frame.load({$method: this.method, $url: this.url, ...this.params })
+        })
+    }
+
+    get method(){
+        return this.attributes['method'] || this.attributes['data-method'] || 'POST'
+    }
+
+    get url(){
+        if(this.$url === undefined){
+            this.$url = Url.fromString(
+                this.attributes['action'] || this.attributes['data-url'],
+                this.frame.url
+            )
+        }
+        return this.$url
+    }
+
+    get inputs(){
+        return this.descendants.filter((descendant) => descendant.isInput)
+    }
+
+    get params(){
+        const out = {}
+        this.inputs.forEach(input => {
+            const value = input.value
+            if(value !== undefined){
+                out[input.name] = value
+            }
+        })
+        return out
+    }
+
+}
+
+Form.register()

data/web/javascripts/_pinstripe/node_wrappers/frame.js

@@ -0,0 +1,72 @@
+
+import { NodeWrapper } from '../node_wrapper'
+import { Url } from '../url'
+
+export class Frame extends NodeWrapper {
+
+    static get name(){ return 'frame' }
+    
+    constructor(...args){
+        super(...args)
+    }
+    
+    get url(){
+        if(this.$url === undefined){
+            this.$url = Url.fromString(
+                this.attributes['data-url'] || window.location,
+                this.frame ? this.frame.url : window.location
+            )
+        }
+        return this.$url
+    }
+
+    set url(url){
+        this.$url = Url.fromString(
+            url,
+            this.url
+        )
+    }
+
+    load({$method = 'GET', $url = this.url.toString(), $headers = {}, ...params }){
+        if(this.request){
+            this.request.abort()
+        }
+
+        $method = $method.toUpperCase();
+        
+        this.url = $url
+        const isRequestBody = $method == 'POST' || $method == 'PUT' || $method == 'PATCH';
+        if(!isRequestBody){
+            this.url.params = {...this.url.params, ...params}
+        }
+
+        this.request = new XMLHttpRequest();
+
+        this.request.open($method, this.url.toString(), true);
+
+        this.request.onload = () => {
+            if (this.request.status >= 200 && this.request.status < 400) {
+                this.patch(this.request.response)
+            }
+        }
+
+        const defaultHeaders = {};
+        const document = this.document || this
+        const csrfToken = document.find('meta[name="csrf-token"').map(nodeWrapper => nodeWrapper.attributes.content).pop()
+        if(csrfToken){
+            defaultHeaders['X-CSRF-Token'] = csrfToken
+        }
+        const headers = {...defaultHeaders, ...this.headers}
+        Object.keys(headers).forEach((name) => this.request.setRequestHeader(name, headers[name]))
+
+        const formData = new FormData();
+        if(isRequestBody){
+            Object.keys(params).forEach((name) => formData.append(name, params[name]));
+        }
+        
+        this.request.send(formData)
+    }
+
+}
+
+Frame.register()

data/web/javascripts/_pinstripe/node_wrappers/index.js

@@ -0,0 +1,8 @@
+
+export * from './anchor'
+export * from './document'
+export * from './form'
+export * from './frame'
+export * from './input'
+export * from './modal'
+export * from './script'

data/web/javascripts/_pinstripe/node_wrappers/input.js

@@ -0,0 +1,23 @@
+
+import { NodeWrapper } from '../node_wrapper'
+
+export class Input extends NodeWrapper {
+
+    static get name(){ return 'input' }
+    
+    static get selector(){ return 'input, textarea, .input' }
+
+    get name(){
+        return this.attributes.name
+    }
+    
+    get value(){
+        if(this.is('input[type="checkbox"], input[type="radio"]')){
+            return this.is(':checked') ? this.node.value : undefined
+        }
+        return this.node.value
+    }
+
+}
+
+Input.register()

data/web/javascripts/_pinstripe/node_wrappers/modal.js

@@ -0,0 +1,36 @@
+
+import { Frame } from './frame'
+import { NodeWrapper } from '../node_wrapper'
+
+export class Modal extends Frame {
+
+    static get name(){ return 'modal' }
+
+    constructor(...args){
+        super(...args)
+        this.on('click', '.modal-background, .modal-close', (event) => {
+            event.stopPropagation()
+            this.close()
+        })
+    }
+
+    close(){
+        this.remove()
+        if(!this.document.find('body').pop().children.filter((child) => child.is('.modal')).length){
+            this.document.find('html').pop().removeClass('is-clipped')
+        }
+    }
+
+    patch(html){
+        return super.patch(`
+            <div class="modal-background"></div>
+            <div class="modal-content">
+                <div class="box">${html}</div>
+            </div>
+            <button class="modal-close is-large" aria-label="close"></button>
+        `)
+    }
+
+}
+
+Modal.register()

data/web/javascripts/_pinstripe/node_wrappers/script.js

@@ -0,0 +1,17 @@
+
+import { NodeWrapper } from '../node_wrapper'
+
+export class Script extends NodeWrapper {
+
+    static get name(){ return 'script' }
+    
+    static get selector(){ return 'script[type="pinstripe"]' }
+
+    constructor(...args){
+        super(...args)
+        eval(this.text)
+    }
+
+}
+
+Script.register()

data/web/javascripts/_pinstripe/string_reader.js

@@ -0,0 +1,24 @@
+
+export class StringReader {
+
+    constructor(string){
+        this.string = (string || '').toString();
+    }
+
+    get length(){
+        return this.string.length
+    }
+
+    toString(){
+        return this.string
+    }
+
+    match(...args){
+        const out = this.string.match(...args)
+        if(out){
+            this.string = this.string.substr(out[0].length)
+        }
+        return out
+    }
+
+}