static create()

in src/Habitat.js [139:218]


	static create(ele, id, options = {}) {

		if (window.document.body === ele || ele === null || ele === undefined) {
			Logger.warn('RHW04', 'Cannot open a habitat for element.', ele);
			return null;
		}

		let tag = ele.getAttribute('data-habitat-tag') || options.tag || null;

		if (!tag) {
			tag = 'span';
			// If tag is a block level element, then replicate it with the portal
			if (getDisplayType(ele) === 'block') {
				tag = 'div';
			}
		}

		const habitat = window.document.createElement(tag);
		const className = ele.getAttribute('data-habitat-class') || options.className || null;

		let replaceDisabled = typeof options.replaceDisabled === 'boolean' ? options.replaceDisabled : false;
		if (ele.getAttribute('data-habitat-no-replace') !== null) {
			replaceDisabled = ele
					.getAttribute('data-habitat-no-replace')
					.toLocaleLowerCase() === 'true';
		}

		// Keep references to habitats container id's
		habitat.setAttribute(HABITAT_NAMESPACE, id);

		// Set habitat class name if any
		if (className) {
			habitat.className = `${className}`;
		}

		// inject habitat
		ele.parentNode.insertBefore(habitat, ele.nextSibling);

		// Determine if we should keep host element in the dom
		if (ele.tagName !== 'INPUT') {

			// Not an input so assumed we don't need to keep the target
			// element around

			if (!replaceDisabled) {
				// Detach it
				const host = ele.parentNode.removeChild(ele);

				// But try to keep a reference to the host in-case destroy is ever called
				// and we need to reinstate it back to how we found it

				try {
					// It might be better if we keep references in a weak map, need to look
					// at this in the future
					habitat[HABITAT_HOST_KEY] = host;
				} catch (e) {
					if (hasExpandoWarning) {
						// Expando is off
						Logger.warn('RHW06', 'Arbitrary properties are disabled.' +
							' The container may not dispose correctly.', e);
						hasExpandoWarning = true;
					}
				}
			}

		} else {
			// The element is an input, leave it in the
			// dom to allow passing data back to the backend again
			// Set a flag so we know its been proccessed
			ele.setAttribute(ACTIVE_HABITAT_FLAG, 'true');

			// Set display none however if the input is not a hidden input
			// TODO: Investigate what this does to accessibility
			if (ele.getAttribute('type') !== 'hidden') {
				ele.setAttribute('style', 'display: none;');
			}
		}

		return habitat;
	}