Design your own markup languages to build responsive cross-screen UI components
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
darkdom.js
jsdoc.json
package.json

README.md

DarkDOM

  • Design your own markup languages on a higher level of abstraction than HTML
  • Build responsive cross-screen UI components
  • Better separation of concerns
  • Separate the presentation layer and business layer from the traditional content layer

Usages and Examples

Components Library

CardKit is a mobile UI library provides a series of building blocks to help you build mobile web apps quickly and simply, or transfer entire website to mobile-first web app for touch devices.

CardKit building blocks are all use-html-as-configure-style (like Custom Elements, directive...) components built on DarkDOM and Moui.

AMD and OzJS

Get the code

Add to your project as new dependency

Or download directly from Github

Dependencies

API and Usage

DarkComponent API

var darkdom = require('darkdom');
var component = darkdom(options); // see component.set(options)
  • component.set(options) --
    • options --
      • unique: false --
      • enableSource: false --
      • entireAsContent: false --
      • sourceAsContent: false --
      • render: function(data){ return '<...>...</...>'; } --
        • data.state
        • data.content
        • data.component
        • data.context
  • component.state(stateName, attrName) --
  • component.state(stateName, getter, setter) --
  • component.state({ stateName: attrName, stateName: getter, stateName: [getter, setter], ... }) --
  • component.contain(childComponentName, otherComponent) --
  • component.contain(childComponentName, function(childComponent){ ...;return childComponent; }) --
  • component.contain({ childComponentName: otherComponent, ... }) --
  • component.forward('eventType selector', eventName) --
  • component.response(updateEvent, function(changes){ ...; return resolved; }) --
    • updateEvent -- "state:name", "component:name", "content", "remove"...
    • changes --
    • resolved --
  • component.component(childComponentName) --
  • component.createGuard() --

DarkGuard API

var guard = component.createGuard();
  • guard.state() -- see component.state
  • guard.component(childComponentName, function(childGuard){ /*spec*/ }) --
  • guard.component({ childComponentName: spec, ... }) --
  • guard.forward(eventName, 'eventType selector') --
  • guard.forward(eventName, handler) --
  • guard.source() --
  • guard.watch(selector) --
  • guard.watch(element) --
  • guard.unwatch(selector) --
  • guard.unwatch(element) --
  • guard.unwatch() --
  • guard.mount() --
  • guard.unmount() --
  • guard.update() --
  • guard.render() --
  • guard.stateGetter(name) --
  • guard.stateSetter(name) --
  • guard.createRoot() --
  • guard.createSource() --

DOM API

var root = $(selector)[0];
guard.watch(root);
  • root.darkGuard() --
  • root.mountDarkDOM() --
  • root.unmountDarkDOM() --
  • root.resetDarkDOM() --
  • root.getDarkState(name) --
  • root.setDarkState(name, value, options) --
    • options --
      • update: false --
  • root.updateDarkStates() --
  • root.updateDarkDOM() --
  • root.feedDarkDOM(sourceData) --
  • root.feedDarkDOM(function(sourceData){...}) --
  • root.responseDarkDOM(updateEvent, function(changes){...}) -- see component.response
  • root.addEventListener(darkEvent, handler)
    • darkEvent --
      • darkdom:willMount --
      • darkdom:mounted --
      • darkdom:willUpdate --
      • darkdom:updated --
      • darkdom:rendered --
      • darkdom:removed --

More coming soon...

More References

See OzJS Project Homepage

Release History

See OzJS Release History

License

Copyright (c) 2010 - 2014 dexteryy
Licensed under the MIT license.