78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
import Doc from './doc';
|
|
import Format from './format';
|
|
import {highlightHtml, replaceMultiple} from './functions';
|
|
|
|
const $newLinePattern = /\{n}/g;
|
|
const $spacePattern = /\{s}/g;
|
|
const $tabPattern = /\{t}/g;
|
|
|
|
/**
|
|
* Callback for form element iteration
|
|
*
|
|
* Formats each form element section
|
|
*
|
|
* @param {Element} parent
|
|
*/
|
|
const each = parent => {
|
|
// Get the elements required to display
|
|
const labelElements = Doc.getByTag('label', parent);
|
|
const formElements = [].concat(
|
|
Doc.getByTag('input', parent),
|
|
Doc.getByTag('button', parent),
|
|
Doc.getByTag('textarea', parent),
|
|
Doc.getByTag('select', parent),
|
|
Doc.getByTag('datalist', parent),
|
|
Doc.getByTag('keygen', parent),
|
|
Doc.getByTag('meter', parent),
|
|
Doc.getByTag('output', parent),
|
|
Doc.getByTag('progress', parent)
|
|
);
|
|
|
|
// If the required elements do not exist, bail out early
|
|
if (!(Array.isArray(formElements)) && labelElements != null) {
|
|
console.error('Missing required elements. {}', parent);
|
|
return;
|
|
}
|
|
|
|
let labelHTML = '';
|
|
let formElementHTML = '';
|
|
|
|
if (Format.isLabelWrapped(labelElements)) {
|
|
// If there are labels wrapping the form elements, treat them
|
|
// a little differently.
|
|
// Since the elements are wrapped in labels, the label elements are what we want
|
|
// to work with.
|
|
labelElements.forEach(element => {
|
|
formElementHTML += Format.formatLabelWrappedElement(element);
|
|
});
|
|
} else {
|
|
labelHTML = Format.formatHtml(labelElements[0], 0);
|
|
|
|
formElements.forEach(formElement => {
|
|
formElementHTML += '{n}{n}' + Format.formatHtml(formElement, 0);
|
|
});
|
|
}
|
|
|
|
// Join the label markup with the form element markup
|
|
const formCode = labelHTML + formElementHTML.trim();
|
|
|
|
// Now replace the placeholders with proper whitespace equivalent markup
|
|
// Setup up the highlighter
|
|
let highLighted = highlightHtml(formCode);
|
|
highLighted = replaceMultiple(highLighted, [
|
|
[$newLinePattern, '<br />'],
|
|
[$spacePattern, ' '],
|
|
[$tabPattern, ' ']
|
|
]);
|
|
highLighted = `<pre>${highLighted}</pre>`;
|
|
|
|
// Piece together the HTML for the prettier HTML examples
|
|
const codeElement = document.createElement('code');
|
|
codeElement.className = 'DlHighlight html';
|
|
codeElement.innerHTML = highLighted;
|
|
|
|
// Append the prettified HTML to the parent element
|
|
parent.appendChild(codeElement);
|
|
};
|
|
|
|
export default each; |