Coder Social home page Coder Social logo

dimdom's People

Contributors

romancow avatar

dimdom's Issues

Functional approach w/ element->method map

Experimental extension to #3

Allow one to "map" elements' names to functions that can be used when using a functional approach. This could make things a bit cleaner if there is a subset of elements you are using a lot.

For example:

elements = ['html', 'head', 'title', 'body', 'div', 'h1', 'p']

dom = DimDom elements, (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.'

You could also pass in an object instead of an array to map elements to other names, like {body:'body', div:'div', p:'p', custom:'div'}. Maybe allow one to map an element with some default attributes to a custom name somehow?

Another possibility - allow the use of this to call the mapped methods in addition to the passed function arg: @p color:'#333333', 'Here is some text.'

We could "pre-map" such functions, but that seems like a lot of potential element names to map. So maybe keep it opt-in, and allow the user to define the subset of elements they will be using themselves.

There is also the potential to check the browser for support of the Proxy object, and (if supported) automatically convert any method called on he function parameter (or this) to an element name.

Separate file prepend module

For most recent release, the single source file was finally separated into multiple source files. I wanted a really simple way to combine them that I had control over, rather than using a more "comprehensive" solution like browserify or webpack. So I inserted my own "cake-prepend" commands that would be parsed in the cakefile when the project is built, similar to what I've seen CodeKit and Prepos do.

It would be nice to move this processing into it's own module for ease of reuse (and for other to use). It could support both prepend and append commands, with a customizable prefix so it could actually support the CodeKit and Prepos commands.

Add license info

Add a LICENSE.md file

Should we also add license info to the top of js file since this would be the distributed part?

Attribute namespaces

Support some method for setting attribute's wit namespaces - for example thexlink:href for svg.

Not sure what the syntax for this should be. Maybe pass a two item array as the attribute value?

new DimDom.SVG('image', {href: ["xlink", "example.jpg"]})

I'd prefer the namespace to be more associated with the attribute name than the value, though.

Option to create elements as shadow DOMs

We could check for support of the shadow DOM and provide an option to create/attach a DimDom element as that instead of as a document fragment.

Would using two different possible implementation like this cause other complications?

Support event attributes

If a function is passed in the attributes object, then it should be treated like an event, and that function should be added to created elements as an event listener.

Could check for existence of element's addEventListener and fallback on event properties (element.onclick = someFunction;) when not present.

`create` should return a DocumentFragment

Instead of using the passed document to create elements, create should get a DocumentFragment (via document.createDocumentFragment()), use it to create and add elements, then return it. This method, according to docs, is more efficient.

Functional approach to defining longer DOMs

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'

Write README

Possible included topics:

  • description
  • what it's for / why it was created
  • installation (npm, bower)
  • how to use
  • examples
  • possible "experimental" features

Bind to created nodes

We could bind to created nodes and update them to match their DimDom object when the DimDom object is altered. For changing something like the name or namespace, would probably have to remove the children, create a new element, then re-add the children. Or we could just make those properties read-only.

Might want to make something like this opt-in, since someone might not want to use it - e.g. because of the extra overhead or they are using the same DimDom instance to "stamp-out" multiple cookie-cutter element structures.

Add a collection object

Need a way to represent a collection of DimDom elements. It should basically behave like and array but provide the create and appendTo methods.

var elems = new DimDoms([
    new DimDom("p", "Some text content."),
    new DimDom("p", "Some more text content.")
]);

Not necessarily sold on the DimDoms class name. Maybe something like DimDomCollection? Maybe even something more functional, like:

var elems = DimDom.collect(
    new DimDom("p", "Some text content."),
    new DimDom("p", "Some more text content.")
);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.