onemsdk
Version:
ONEm developer library for NodeJS
738 lines (600 loc) • 23.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
tag.js - Documentation
</title>
<link href="https://www.braintreepayments.com/images/favicon-ccda0b14.png" rel="icon" type="image/png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
<link type="text/css" rel="stylesheet" href="styles/collapse.css">
<!-- start Mixpanel -->
<script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
mixpanel.init("1919205b2da72e4da3b9b6639b444d59");</script>
<!-- end Mixpanel -->
</head>
<body>
<svg style="display: none;">
<defs>
<symbol id="linkIcon" fill="#706d77" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
</symbol>
</defs>
</svg>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<div class="top-nav-wrapper">
<ul>
<li >
<a href="index.html">
<svg fill="#6D6D6D" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</a>
</li>
</ul>
</div>
<nav>
<h3 class="reference-title">
ONEm Node.js SDK
</h3>
<h3>Classes</h3><ul><li id="ATag-nav"><a href="global.html#ATag">ATag</a><ul class='methods'><li data-type="method" id="ATag-getAttributes-nav"><a href="global.html#ATag#.getAttributes">getAttributes</a></li></ul></li><li id="ATagAttrs-nav"><a href="ATagAttrs.html">ATagAttrs</a></li><li id="BrTag-nav"><a href="global.html#BrTag">BrTag</a></li><li id="FooterTag-nav"><a href="global.html#FooterTag">FooterTag</a></li><li id="Form-nav"><a href="global.html#Form">Form</a><ul class='methods'><li data-type="method" id="Form-fromTag-nav"><a href="global.html#Form#.fromTag">fromTag</a></li></ul></li><li id="FormItemContent-nav"><a href="global.html#FormItemContent">FormItemContent</a><ul class='methods'><li data-type="method" id="FormItemContent-fromTag-nav"><a href="global.html#FormItemContent#.fromTag">fromTag</a></li></ul></li><li id="FormItemMenu-nav"><a href="global.html#FormItemMenu">FormItemMenu</a><ul class='methods'><li data-type="method" id="FormItemMenu-fromTag-nav"><a href="global.html#FormItemMenu#.fromTag">fromTag</a></li></ul></li><li id="FormItemMenuItem-nav"><a href="global.html#FormItemMenuItem">FormItemMenuItem</a><ul class='methods'><li data-type="method" id="FormItemMenuItem-fromTag-nav"><a href="global.html#FormItemMenuItem#.fromTag">fromTag</a></li></ul></li><li id="FormItemMenuMeta-nav"><a href="global.html#FormItemMenuMeta">FormItemMenuMeta</a></li><li id="FormMeta-nav"><a href="global.html#FormMeta">FormMeta</a></li><li id="FormTag-nav"><a href="global.html#FormTag">FormTag</a></li><li id="FormTagAttrs-nav"><a href="FormTagAttrs.html">FormTagAttrs</a></li><li id="HeaderTag-nav"><a href="global.html#HeaderTag">HeaderTag</a></li><li id="InputTag-nav"><a href="global.html#InputTag">InputTag</a><ul class='methods'><li data-type="method" id="InputTag-getAttributes-nav"><a href="global.html#InputTag#.getAttributes">getAttributes</a></li></ul></li><li id="InputTagAttrs-nav"><a href="InputTagAttrs.html">InputTagAttrs</a></li><li id="LiTag-nav"><a href="global.html#LiTag">LiTag</a></li><li id="LiTagAttrs-nav"><a href="LiTagAttrs.html">LiTagAttrs</a></li><li id="Menu-nav"><a href="global.html#Menu">Menu</a><ul class='methods'><li data-type="method" id="Menu-fromTag-nav"><a href="global.html#Menu#.fromTag">fromTag</a></li></ul></li><li id="MenuItem-nav"><a href="global.html#MenuItem">MenuItem</a><ul class='methods'><li data-type="method" id="MenuItem-fromTag-nav"><a href="global.html#MenuItem#.fromTag">fromTag</a></li></ul></li><li id="MenuMeta-nav"><a href="global.html#MenuMeta">MenuMeta</a></li><li id="PTag-nav"><a href="global.html#PTag">PTag</a></li><li id="Response-nav"><a href="global.html#Response">Response</a><ul class='methods'><li data-type="method" id="Response-fromTag-nav"><a href="global.html#Response#.fromTag">fromTag</a></li></ul></li><li id="SectionTag-nav"><a href="global.html#SectionTag">SectionTag</a></li><li id="SectionTagAttrs-nav"><a href="SectionTagAttrs.html">SectionTagAttrs</a></li><li id="Tag-nav"><a href="global.html#Tag">Tag</a><ul class='methods'><li data-type="method" id="Tag-fromNode-nav"><a href="global.html#Tag#.fromNode">fromNode</a></li><li data-type="method" id="Tag-getAttributes-nav"><a href="global.html#Tag#.getAttributes">getAttributes</a></li></ul></li><li id="UlTag-nav"><a href="global.html#UlTag">UlTag</a></li></ul><h3 id="global-nav">Global</h3><ul><li><a href="global.html#loadHtml">loadHtml</a></li><li><a href="global.html#loadTemplate">loadTemplate</a></li><li><a href="global.html#tagClsMap">tagClsMap</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">
tag.js
</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>const parser = require('node-html-parser');
/**
* @typedef Tag
* @property {Array<Tag> | undefined} children
* @property {Object | undefined} attrs
* @property {string} tagName
*/
/**
* @typedef HeaderTag
* @extends Tag
* @property {Array<string>} children
* @property {undefined} attrs
*/
/**
* @typedef FooterTag
* @extends Tag
* @property {Array<string>} children
* @property {undefined} attrs
*/
/**
* @typedef LabelTag
* @extends Tag
* @property {Array<string>} children
* @property {undefined} attrs
*/
/**
* @typedef InputTag
* @extends Tag
* @property {undefined} children
* @property {InputTagAttrs} attrs
*/
/**
* @typedef ATag
* @extends Tag
* @property {Array<string>} children
* @property {ATagAttrs} attrs
*/
/**
* @typedef PTag
* @extends Tag
* @property {Array<string>} children
* @property {undefined} attrs
*/
/**
* @typedef BrTag
* @extends Tag
* @property {undefined} children
* @property {undefined} attrs
*/
/**
* @typedef LiTag
* @extends Tag
* @property {Array<ATag | string>} children
* @property {LiTagAttrs} attrs
*/
/**
* @typedef UlTag
* @extends Tag
* @property {Array<LiTag>} children
* @property {undefined} attrs
*/
/**
* @typedef SectionTag
* @extends Tag
* @property {Array<HeaderTag|FooterTag|UlTag|PTag|BrTag|InputTag|LabelTag>} children
* @property {SectionTagAttrs} attrs
*/
/**
* @typedef FormTag
* @extends Tag
* @property {Array<SectionTag>} children
* @property {FormTagAttrs} attrs
*/
/**
* @type {{br: *, p: *, a: *, input: *, form: *, footer: *, ul: *, header: *, section: *, label: *, li: *}}
*/
const tagClsMap = {
a: ATag,
br: BrTag,
footer: FooterTag,
form: FormTag,
header: HeaderTag,
input: InputTag,
label: LabelTag,
li: LiTag,
p: PTag,
section: SectionTag,
ul: UlTag,
};
function getTagCls(tagName) {
return tagClsMap[tagName];
}
/**
* Instantiates a Tag
* @param {Array<Tag> | undefined} children
* @param {Object | undefined} attrs
* @constructor
*/
function Tag(children, attrs) {
this.children = children;
this.attrs = attrs;
}
Tag.tagName = undefined;
/**
* @param {HTMLElement} node
* @returns {FormTag | SectionTag | UlTag | LiTag | ATag | PTag | BrTag | HeaderTag | FooterTag | InputTag | LabelTag}
*/
Tag.fromNode = function (node) {
if (this.tagName !== node.tagName) {
throw Error(`Expected <${this.tagName}>, received <${node.tagName}>`)
}
const attrs = this.getAttributes(node);
let children = [];
node.childNodes.forEach(function (childNode) {
const childCls = getTagCls(childNode.tagName);
if (childNode instanceof parser.TextNode) {
children.push(childNode.text);
} else {
children.push(childCls.fromNode(childNode));
}
});
return new this(children, attrs);
};
/**
* Returns the attributes specific to a certain tag
* @param {HTMLElement} node
* @returns {Object | undefined}
*/
Tag.getAttributes = function (node) {
return undefined;
};
/**
* Instantiates a new HeaderTag
* @param {Array<string>} children
* @constructor
*/
function HeaderTag(children) {
if (children.length !== 1 || typeof children[0] !== 'string') {
throw Error('<header> must have 1 text child')
}
this.children = children;
}
HeaderTag.__proto__ = Tag;
HeaderTag.tagName = 'header';
HeaderTag.prototype.toString = function headerTagToString() {
if (this.children.length === 1) {
return `${this.children[0]}`;
}
return '';
};
/**
* Instantiates a new FooterTag
* @param {Array<string>} children
* @constructor
*/
function FooterTag(children) {
if (children.length !== 1 || typeof children[0] !== 'string') {
throw Error('<footer> must have 1 text child')
}
this.children = children;
}
FooterTag.__proto__ = Tag;
FooterTag.tagName = 'footer';
FooterTag.prototype.toString = function () {
return this.children[0];
};
/**
* @constructor
*/
function BrTag() {
}
BrTag.__proto__ = Tag;
BrTag.tagName = 'br';
BrTag.prototype.toString = function brTagToString() {
return '\n';
};
/**
* @param {Array<string>} children
* @constructor
*/
function PTag(children) {
if (children.length > 1) {
throw Error('<p> cannot have more than 1 child');
}
if (children.length === 1 && typeof children[0] !== 'string') {
throw Error('<p> child must be text');
}
this.children = children;
}
PTag.__proto__ = Tag;
PTag.tagName = 'p';
PTag.prototype.toString = function pTagToString() {
if (this.children.length === 1) {
return `${this.children[0]}`;
}
return '';
};
/**
* @param {string} href
* @param {('GET'|'POST')} method default 'GET'
* @constructor
*/
function ATagAttrs(href, method) {
if (!href) {
throw Error('<a> must contain href attribute');
}
this.href = href;
this.method = method || 'GET';
}
/**
* @param {Array<string>} children
* @param {ATagAttrs} attrs
* @constructor
*/
function ATag(children, attrs) {
if (children.length !== 1 || typeof children[0] !== 'string') {
throw Error('<a> must have 1 text child')
}
this.children = children;
this.attrs = attrs;
}
ATag.__proto__ = Tag;
ATag.tagName = 'a';
ATag.prototype.toString = function aTagToString() {
return this.children[0];
};
/**
*
* @param {HTMLAnchorElement} node
*/
ATag.getAttributes = function (node) {
return new ATagAttrs(node.attributes.href, node.attributes.method);
};
/**
* @param {string|undefined} value
* @constructor
*/
function LiTagAttrs(value) {
this.value = value || null;
}
/**
* @param {Array<ATag|string>} children
* @param {LiTagAttrs} attrs
* @constructor
*/
function LiTag(children, attrs) {
if (
children.length !== 1 ||
!(children[0] instanceof ATag || typeof children[0] === 'string')
) {
throw Error('<li> must have 1 child (<a> or text)')
}
this.children = children;
this.attrs = attrs;
}
LiTag.__proto__ = Tag;
LiTag.tagName = 'li';
LiTag.getAttributes = function (node) {
return new LiTagAttrs(node.attributes.value);
};
LiTag.prototype.toString = function liTagToString() {
if (this.children[0] instanceof ATag) {
return this.children[0].toString();
}
return this.children[0];
};
/**
* @param {Array<LiTag>} children
* @constructor
*/
function UlTag(children) {
if (children.length === 0) {
throw Error('<ul> must have at least 1 child')
}
children.forEach(function (child) {
if (!(child instanceof LiTag)) {
throw Error('<ul> can have only <li> children')
}
});
this.children = children;
}
UlTag.__proto__ = Tag;
UlTag.tagName = 'ul';
UlTag.prototype.toString = function ulTagToString() {
return this.children.map(function (child) {
return child.toString();
}).join('\n');
};
/**
*
* @param {('text'|'date'|'datetime')} type
* @constructor
*/
function InputTagAttrs(type) {
this.type = type;
}
/**
* @param {undefined} children
* @param {InputTagAttrs} attrs
* @constructor
*/
function InputTag(children, attrs) {
this.children = undefined;
this.attrs = attrs;
}
InputTag.__proto__ = Tag;
InputTag.tagName = 'input';
/**
* @param {HTMLInputElement} node
* @returns {InputTagAttrs}
*/
InputTag.getAttributes = function (node) {
return new InputTagAttrs(node.attributes.type);
};
InputTag.prototype.toString = function () {
return '';
};
function LabelTag(children) {
if (children.length !== 1 || typeof children[0] !== 'string') {
throw Error('<label> must have 1 text child')
}
this.children = children;
}
LabelTag.__proto__ = Tag;
LabelTag.tagName = 'label';
LabelTag.prototype.toString = function labelTagToString() {
return this.children[0];
};
/**
* Instantiates a new SectionTagAttrs
* @param {string|undefined} name this attribute is relevant only if the
* SectionTag is part of a FormTag
* @param {string|undefined} header text that will be included in header
* @param {string|undefined} footer text that will be included in footer
* @param {boolean|undefined} autoSelect
* @param {boolean|undefined} multiSelect
* @param {boolean|undefined} numbered
* @constructor
*/
function SectionTagAttrs(name, header, footer, autoSelect, multiSelect, numbered) {
this.header = header || null;
this.footer = footer || null;
this.name = name || null;
this.autoSelect = autoSelect;
this.multiSelect = multiSelect;
this.numbered = numbered;
}
/**
* Instantiates a new SectionTag. A SectionTag may represent a step in a form,
* a menu or a block of text. A user will always receive the content of a
* SectionTag at a time.
* @param {Array<PTag | BrTag | UlTag | LabelTag | HeaderTag | FooterTag | InputTag>} children
* @param {SectionTagAttrs} attrs
* @constructor
*/
function SectionTag(children, attrs) {
if (children.length === 0) {
throw Error('<section> must have at least 1 child');
}
children.forEach(function (child) {
switch (child.constructor.tagName) {
case 'p':
case 'br':
case 'ul':
case 'input':
case 'label':
case 'header':
case 'footer':
break;
default:
if (typeof child !== 'string') {
throw Error(`<section> cannot have <${child.constructor.tagName}> child`);
}
}
});
this.children = children;
this.attrs = attrs;
}
SectionTag.__proto__ = Tag;
SectionTag.tagName = 'section';
SectionTag.getAttributes = function (node) {
// Note that boolean attributes in HTML are evaluated to true if they are
// present (their actual value does not matter). They are evaluated to false
// only when they are missing
const autoSelect = node.attributes.hasOwnProperty('auto-select') ||
node.attributes.hasOwnProperty('autoSelect');
const multiSelect = node.attributes.hasOwnProperty('multi-select') ||
node.attributes.hasOwnProperty('multiSelect');
const numbered = node.attributes.hasOwnProperty('numbered');
return new SectionTagAttrs(
node.attributes.name,
node.attributes.header,
node.attributes.footer,
autoSelect,
multiSelect,
numbered
);
};
SectionTag.prototype.toString = function sectionTagToString(excludeHeader, excludeFooter) {
// Add a temporary \n for help
let renderedChildren = ['\n'];
this.children.forEach(function (child) {
let text;
if (child instanceof HeaderTag && excludeHeader) {
// Do not include the header
return;
}
if (child instanceof FooterTag && excludeFooter) {
// Do not include the footer
return;
}
if (typeof child === 'string') {
text = child;
} else {
text = child.toString();
}
if (text) {
if (child instanceof PTag || child instanceof UlTag) {
if (renderedChildren[renderedChildren.length - 1] !== '\n') {
renderedChildren.push('\n');
}
renderedChildren.push(child.toString());
renderedChildren.push('\n');
} else {
renderedChildren.push(child.toString());
}
}
});
if (renderedChildren[renderedChildren.length - 1] === '\n') {
renderedChildren = renderedChildren.slice(0, renderedChildren.length - 1);
}
// Remove the temporary \n
return renderedChildren.slice(1, undefined).join('');
};
/**
* Instantiates a new FormTagAttrs
* @param {string} action the path where the form data is sent to after the user
* finishes the form
* @param {string} method the method use to send the form data
* @param {string|undefined} header the global form header which can be
* overwritten at the SectionTag level
* @param {string|undefined} footer the global form footer which can be
* overwritten at the SectionTag level
* @param {boolean|undefined} completionStatusShow whether to display the
* progress the user made in a form
* @param {boolean|undefined} completionStatusInHeader whether to display
* that progress in header (if false it will be displayed in body)
* @param {boolean|undefined} confirmationNeeded whether the user will receive
* a form confirmation at the end of the form
* @constructor
*/
function FormTagAttrs(action, method, header, footer, completionStatusShow,
completionStatusInHeader, confirmationNeeded) {
if (!action) {
throw Error('(action) is a required attribute for <form>');
}
this.action = action;
this.method = method || 'POST';
this.header = null;
this.footer = null;
this.completionStatusInHeader = completionStatusInHeader;
this.completionStatusShow = completionStatusShow;
this.confirmationNeeded = confirmationNeeded;
if (typeof header === 'string') {
this.header = header;
}
if (typeof footer === 'string') {
this.footer = footer;
}
}
/**
* Instantiates a new FormTag. It is the equivalent of the HTML <form> tag and
* it is always the root (it cannot be placed inside of another tag). The
* FormTag is be used in all the situations where some data is expected from the
* user. The FormTag can have only SectionTag children and each SectionTag
* deals with one piece of data from the user.
* @param {Array<SectionTag>} children
* @param {FormTagAttrs} attrs
* @constructor
* */
function FormTag(children, attrs) {
if (children.length === 0) {
throw Error('<form> must have at least 1 child');
}
children.forEach(function (sectionTag) {
if (!(sectionTag instanceof SectionTag)) {
throw Error('<form> can have only <section> children')
}
if (!sectionTag.attrs.name) {
throw Error('<form> can contain only named <section> tags. ' +
'Please add a unique "name" attribute in each form section.')
}
});
this.children = children;
this.attrs = attrs;
}
FormTag.__proto__ = Tag;
FormTag.tagName = 'form';
FormTag.getAttributes = function (node) {
const completionStatusShow = node.attributes.hasOwnProperty('completionStatusShow') ||
node.attributes.hasOwnProperty('completion-status-show');
const completionStatusInHeader = node.attributes.hasOwnProperty('completionStatusInHeader') ||
node.attributes.hasOwnProperty('completion-status-in-header');
const confirmationNeeded = node.attributes.hasOwnProperty('confirmationNeeded') ||
node.attributes.hasOwnProperty('confirmation-needed');
return new FormTagAttrs(
node.attributes.action,
node.attributes.method,
node.attributes.header,
node.attributes.footer,
completionStatusShow,
completionStatusInHeader,
confirmationNeeded,
);
};
exports.ATag = ATag;
exports.BrTag = BrTag;
exports.FooterTag = FooterTag;
exports.FormTag = FormTag;
exports.HeaderTag = HeaderTag;
exports.InputTag = InputTag;
exports.LabelTag = LabelTag;
exports.LiTag = LiTag;
exports.PTag = PTag;
exports.SectionTag = SectionTag;
exports.UlTag = UlTag;
exports.Tag = Tag;
exports.getTagCls = getTagCls;
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a>
</footer>
<script src="scripts/linenumber.js"></script>
<script src="scripts/pagelocation.js"></script>
</body>
</html>