nodulator

<!DOCTYPE html> <html> <head> <title>DOM.ls</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="Nodulator.html"> Nodulator.ls </a> <a class="source" href="ClientDB.html"> ClientDB.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="Resource.html"> Resource.ls </a> <a class="source" href="Bus.html"> Bus.ls </a> <a class="source" href="Cache.html"> Cache.ls </a> <a class="source" href="ChangeWatcher.html"> ChangeWatcher.ls </a> <a class="source" href="Debug.html"> Debug.ls </a> <a class="source" href="Wrappers.html"> Wrappers.ls </a> <a class="source" href="Nodulator.html"> Nodulator.ls </a> <a class="source" href="Resource.html"> Resource.ls </a> <a class="source" href="Schema.html"> Schema.ls </a> <a class="source" href="NModule.html"> NModule.ls </a> <a class="source" href="AccountResource.html"> AccountResource.ls </a> <a class="source" href="User.html"> User.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="Nodulator-Angular.html"> Nodulator-Angular.ls </a> <a class="source" href="TaskDirective.html"> TaskDirective.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="TaskService.html"> TaskService.ls </a> <a class="source" href="main.html"> main.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="Task.html"> Task.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="DOM.html"> DOM.ls </a> <a class="source" href="View.html"> View.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="Nodulator.html"> Nodulator.ls </a> <a class="source" href="Mongo.html"> Mongo.ls </a> <a class="source" href="Mysql.html"> Mysql.ls </a> <a class="source" href="SqlMem.html"> SqlMem.ls </a> <a class="source" href="index.html"> index.ls </a> <a class="source" href="Resource.html"> Resource.ls </a> <a class="source" href="Request.html"> Request.ls </a> <a class="source" href="Route.html"> Route.ls </a> <a class="source" href="index.html"> index.ls </a> </div> </div> </li> </ul> <ul class="sections"> <li id="title"> <div class="annotation"> <h1>DOM.ls</h1> </div> </li> <li id="section-1"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-1">¶</a> </div> </div> <div class="content"><div class='highlight'><pre>require! { underscore: _ q async } tags = <[a abbr address area article aside audio b base bdo blockquote body br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form head header h1 h2 h3 h4 h5 h6 hr html i iframe img ins input kbd keygen label legend li link map mark menu menuitem meta meter nav object ol optgroup option output p param pre progress q s samp script section select small source span strong style sub summary sup table td th tr textarea time title track u ul var video]> selfClosingTags = <[area base br col command embed hr img input keygen link meta param source track wbr]> customTags = <[root text func]> events = <[click change]> window.DOM = {} class Node @anchorNb = 0 (@name, @attrs = {}, ...@origChildren) -> @_type = 'Node' throw "Unknown Tag: #{name}" if @name not in tags and @name not in customTags if @name in customTags switch @name | \text => @text = @attrs @Resolve = -> @text if @attrs? and (typeof! @attrs isnt \Object or @attrs._promise? or @attrs.then? or @attrs._type is \Node) @origChildren.unshift @attrs @attrs = {} @attrs.anchor = Node.anchorNb++ @origChildren = @_Flatten @origChildren</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">¶</a> </div> Change every child into a Renderable Node </div> <div class="content"><div class='highlight'><pre> Resolve: -> d = q.defer! async.mapSeries @origChildren, @~_ResolveType, (err, childs) ~> return d.reject err if err? childs = @_Flatten childs childs = childs |> map ~> it.parent = @; it @children = childs async.mapSeries childs, (item, done) ~> promise = item.Resolve! if promise.then? promise.then -> done null it promise.catch done else done null promise ,(err, childs) ~> return d.reject err if err? d.resolve @ return d.promise Render: (parent) -> if (anchor = @GetElement!) anchor.outerHTML = '' if not parent anchor = document.querySelector("body") else anchor = parent.GetElement! if @name is \text return anchor.innerHTML += @text @node = "<#{@name}#{@_MakeAttrStr!}" if @name in selfClosingTags and @origChildren.length throw "Self closing tags cannot have children: #{@name}" else if @name in selfClosingTags @node += ' />' return anchor.innerHTML += @node else @node += '>' anchor.innerHTML += @node if @children? @children |> map ~> if typeof! it is \Array it |> map ~> it.Render @ else it.Render? @ SetEvents: -> node = @GetElement! if @name isnt \root and any (in events), keys @attrs if @attrs.click? node.onclick = ~> @attrs.click ... if @attrs.keyup? node.onkeyup = ~> @attrs.keyup ... if @attrs.change? node.onchange = ~> @attrs.change ... if typeof! @attrs?.value is \Function node.value = @attrs.value! if @children? @children |> map (.SetEvents?!) Make: -> d = q.defer! dom = @Resolve! dom .then ~> d.resolve it.Render @parent it.SetEvents! .catch -> d.reject it return d.promise GetElement: -> if @name is \text and @parent? return document.querySelector("#{@name}[anchor='#{@attrs.anchor}']")</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">¶</a> </div> else </div> <div class="content"><div class='highlight'><pre> document.querySelector("#{@name}[anchor='#{@attrs.anchor}']") Empty: (@origChildren = []) -> AddChild: -> @origChildren.push it @ _Flatten: (array) -> newArray = [] for item in array if typeof! item is \Array newArray = newArray.concat item else newArray.push item newArray |> filter -> it? _MakeAttrStr: -> return '' if not @attrs? res = '' for k, v of @attrs when k isnt \click res += " #k=\"#v\"" res _ResolveType: (child, done) -></pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">¶</a> </div> console.log ‘Child’, child </div> <div class="content"><div class='highlight'><pre> switch | child is undefined => @_String '', done | typeof! child is \String => @_String child, done | typeof! child is \Array => @_Array child, done | child.then? => @_Promise child, done | child._promise? => @_ResourcePromise child, done | child.Then? => @_ResourceInst child, done | child._type is \Node => @_Node child, done | child.Render? => @_View child, done | typeof! child is \Function => @_Function child, done | _ => @_String '' + child, done _String: (text, done) -> done null new Node \text text _Node: (node, done) -> done null node _Array: (array, done) -> async.mapSeries array, @~_ResolveType, done _Function: (f, done) -> done null new WatchableNode f, @ _View: (view, done) -> view.Render (err, res) ~> return done err if err? @_ResolveType res, done _Promise: (promise, done) -> promise .then -> done null, it .catch -> done it _ResourceInst: (resourceInst, done) -> throw "No Render() on #{resourceInst._type}. Attach view first" if not resourceInst.Render? resourceInst.Render done _ResourcePromise: (resourcePromise, done) -> resourcePromise .Then ~> @_ResolveType it, done .Catch -> done it class WatchableNode extends Node (@func, @parent) -> @name = \func @attrs = anchor: Node.anchorNb++ @children = [] first = true N.Watch ~></pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> res = @func! </div> <div class="content"><div class='highlight'><pre> @Rerender first .catch console~error if first first := false Resolve: -> d = q.defer! @_ResolveType @func!, (err, child) ~> return d.reject err if err? if typeof! child isnt \Array child = [child] @children = child async.mapSeries @children, (item, done) ~> promise = item.Resolve! if promise.then? promise.then -> done null it promise.catch done else done null promise ,(err, childs) ~> return d.reject err if err? d.resolve @ return d.promise Rerender: (first) -> d = q.defer! if first @func! d.resolve null return d.promise @Resolve! .then ~> if (anchor = @GetElement!) anchor.innerHTML = '' it.Render @parent it.SetEvents! d.resolve it .catch -> d.reject it return d.promise tags |> each (tag) -> DOM[tag] = (...args) -> new (Node.bind.apply Node, [Node, tag].concat args) DOM.root = (...args) -> new (Node.bind.apply Node, [Node, \root].concat args) DOM.map_ = DOM.map DOM.head_ = DOM.head delete DOM.map delete DOM.head</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> (intersection tags, keys window) |> each -> if it isnt \div and it isnt \span DOM[it + _] = DOM[it] delete DOM[it] else window[it + _] = window[it] delete window[it] </div> <div class="content"><div class='highlight'><pre>window import DOM</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</a> </div> window.Node = Node </div> </li> </ul> </div> </body> </html>