search

romancow / dimdom

A small, simple way to represent a DOM - a “diminished DOM”
MIT License
0 stars 0 forks source link

Functional approach to defining longer DOMs #3

Open romancow opened 8 years ago

romancow commented 8 years ago

A proposed new feature for a semi-terse approach for defining a longer document. How it would look in coffeescript:

dom = DimDom (dd) ->
    dd 'html',
        dd 'head',
            dd 'title', 'DimDom Example'
        dd 'body', 'background-color':'#f1f3f4',
            dd 'div', id:'main', styles:{height:'100%', width:'100%'},
                dd 'h1', 'An Example'
                dd 'p', color:' #333333', 'Here is some text.'

Or a version using namespaces:

dom = DimDom.SVG (svg) ->
    svg 'svg', {width:500, height: 300},
        svg 'circle', {cx:50, cy:50, r:10}
        svg 'foreignObject', DimDom.HTML (html) ->
            html 'body', {},
                html 'p', 'This is a test...'
        svg 'foreignObject', DimDom.NS 'http://alternate/namespace', (alt) ->
            alt 'madeUp'

Or if you're going to be switching back and forth between namespaces a lot:

dom = DimDom.NS [DimDom.NS.HTML, DimDom.NS.SVG, 'http://alternate/namespace'], (html, svg, alt) ->
    svg 'svg', {width:500, height: 300},
        svg 'circle', {cx:50, cy:50, r:10}
        svg 'foreignObject',
            html 'body', {},
                html 'p', 'This is a test...'
        svg 'foreignObject',
            alt 'madeUp'