Skip to content

Instantly share code, notes, and snippets.

@webcss
Last active September 28, 2015 12:27
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webcss/c0529ccbb9a63a12b8a7 to your computer and use it in GitHub Desktop.
Save webcss/c0529ccbb9a63a12b8a7 to your computer and use it in GitHub Desktop.
m.dom.<Tag/Component>
var HTMLTags = ['A', 'DIV', 'SECTION', 'HEADER', 'FOOTER', 'P',....];
m.dom = {};
m.defineDOM = function defineDOM(elementName, component, conf) {
// register a html tag, no special component view given
if (!component) {
elementName = elementName.toLowerCase();
m.dom[elementName] = function(attrs, children) {
return m(elementName, attrs, children);
};
}
// register a full blown module with (optional) controller and mandatory view
else if (component.toString() === '[object Object]') {
if(!component.controller) component.controller = function(){};
m.dom[elementName] = function(attrs, children) {
return m.module(component, attrs, children);
};
}
// register the result of m() -> only the view portion of a module
else if (typeof component === 'function') {
m.dom[elementName] = component;
}
// register simple tagname
else if (typeof component === 'string') {
m.dom[elementName] = function(attrs, children) {
return m(component, attrs, children);
};
}
else {
throw new Error('invalid DOM definition ' + elementName);
}
};
HTMLTags.forEach(function(tag) {
m.defineDOM(tag);
});
//====== defineDOM
/** Titles **/
m.defineDOM('PrimaryTitle', 'h4');
m.defineDOM('SubTitle', 'h5');
/** Input elements **/
m.defineDOM('TextInput', function TextInput(attrs, children) {
var label = attrs.label || '';
var hintText = attrs.hintText || '';
var errorText = attrs.errorText || '';
attrs.placeholder = attrs.placeholder || label;
return m('fieldset', [
m('input', attrs),
m('label', label),
m('span.input-bar'),
m('span.input-hint', hintText),
m('span.input-error', errorText)
]);
});
/****************************************
/* tabset component
/****************************************/
m.defineDOM('Tabset', function Tabset(attrs) {
return m.dom.section({'class': 'tabs'}, [
m.dom.nav([
attrs.tabs.map(function(item, index) {
return m.dom.a({
'key': index,
'class': (index == attrs.selectedIndex)? 'active': '',
'onclick': attrs.onSelect.bind(this, index)
}, (typeof item === 'string')? item: item[attrs.displayTitle]);
})
])
]);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment