File: js/vue/src/util/dom.js

Recommend this page to a friend!
  Classes of Sergey Beskorovayniy   Vue Resume   js/vue/src/util/dom.js   Download  
File: js/vue/src/util/dom.js
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: Vue Resume
Build reactive Web user interfaces
Author: By
Last change:
Date: 7 years ago
Size: 9,211 bytes
 

Contents

Class file image Download
import config from '../config' import { isIE9 } from './env' import { warn } from './debug' import { camelize } from './lang' import { removeWithTransition } from '../transition/index' /** * Query an element selector if it's not an element already. * * @param {String|Element} el * @return {Element} */ export function query (el) { if (typeof el === 'string') { var selector = el el = document.querySelector(el) if (!el) { process.env.NODE_ENV !== 'production' && warn( 'Cannot find element: ' + selector ) } } return el } /** * Check if a node is in the document. * Note: document.documentElement.contains should work here * but always returns false for comment nodes in phantomjs, * making unit tests difficult. This is fixed by doing the * contains() check on the node's parentNode instead of * the node itself. * * @param {Node} node * @return {Boolean} */ export function inDoc (node) { if (!node) return false var doc = node.ownerDocument.documentElement var parent = node.parentNode return doc === node || doc === parent || !!(parent && parent.nodeType === 1 && (doc.contains(parent))) } /** * Get and remove an attribute from a node. * * @param {Node} node * @param {String} _attr */ export function getAttr (node, _attr) { var val = node.getAttribute(_attr) if (val !== null) { node.removeAttribute(_attr) } return val } /** * Get an attribute with colon or v-bind: prefix. * * @param {Node} node * @param {String} name * @return {String|null} */ export function getBindAttr (node, name) { var val = getAttr(node, ':' + name) if (val === null) { val = getAttr(node, 'v-bind:' + name) } return val } /** * Check the presence of a bind attribute. * * @param {Node} node * @param {String} name * @return {Boolean} */ export function hasBindAttr (node, name) { return node.hasAttribute(name) || node.hasAttribute(':' + name) || node.hasAttribute('v-bind:' + name) } /** * Insert el before target * * @param {Element} el * @param {Element} target */ export function before (el, target) { target.parentNode.insertBefore(el, target) } /** * Insert el after target * * @param {Element} el * @param {Element} target */ export function after (el, target) { if (target.nextSibling) { before(el, target.nextSibling) } else { target.parentNode.appendChild(el) } } /** * Remove el from DOM * * @param {Element} el */ export function remove (el) { el.parentNode.removeChild(el) } /** * Prepend el to target * * @param {Element} el * @param {Element} target */ export function prepend (el, target) { if (target.firstChild) { before(el, target.firstChild) } else { target.appendChild(el) } } /** * Replace target with el * * @param {Element} target * @param {Element} el */ export function replace (target, el) { var parent = target.parentNode if (parent) { parent.replaceChild(el, target) } } /** * Add event listener shorthand. * * @param {Element} el * @param {String} event * @param {Function} cb * @param {Boolean} [useCapture] */ export function on (el, event, cb, useCapture) { el.addEventListener(event, cb, useCapture) } /** * Remove event listener shorthand. * * @param {Element} el * @param {String} event * @param {Function} cb */ export function off (el, event, cb) { el.removeEventListener(event, cb) } /** * For IE9 compat: when both class and :class are present * getAttribute('class') returns wrong value... * * @param {Element} el * @return {String} */ function getClass (el) { var classname = el.className if (typeof classname === 'object') { classname = classname.baseVal || '' } return classname } /** * In IE9, setAttribute('class') will result in empty class * if the element also has the :class attribute; However in * PhantomJS, setting `className` does not work on SVG elements... * So we have to do a conditional check here. * * @param {Element} el * @param {String} cls */ export function setClass (el, cls) { /* istanbul ignore if */ if (isIE9 && !/svg$/.test(el.namespaceURI)) { el.className = cls } else { el.setAttribute('class', cls) } } /** * Add class with compatibility for IE & SVG * * @param {Element} el * @param {String} cls */ export function addClass (el, cls) { if (el.classList) { el.classList.add(cls) } else { var cur = ' ' + getClass(el) + ' ' if (cur.indexOf(' ' + cls + ' ') < 0) { setClass(el, (cur + cls).trim()) } } } /** * Remove class with compatibility for IE & SVG * * @param {Element} el * @param {String} cls */ export function removeClass (el, cls) { if (el.classList) { el.classList.remove(cls) } else { var cur = ' ' + getClass(el) + ' ' var tar = ' ' + cls + ' ' while (cur.indexOf(tar) >= 0) { cur = cur.replace(tar, ' ') } setClass(el, cur.trim()) } if (!el.className) { el.removeAttribute('class') } } /** * Extract raw content inside an element into a temporary * container div * * @param {Element} el * @param {Boolean} asFragment * @return {Element|DocumentFragment} */ export function extractContent (el, asFragment) { var child var rawContent /* istanbul ignore if */ if (isTemplate(el) && isFragment(el.content)) { el = el.content } if (el.hasChildNodes()) { trimNode(el) rawContent = asFragment ? document.createDocumentFragment() : document.createElement('div') /* eslint-disable no-cond-assign */ while (child = el.firstChild) { /* eslint-enable no-cond-assign */ rawContent.appendChild(child) } } return rawContent } /** * Trim possible empty head/tail text and comment * nodes inside a parent. * * @param {Node} node */ export function trimNode (node) { var child /* eslint-disable no-sequences */ while (child = node.firstChild, isTrimmable(child)) { node.removeChild(child) } while (child = node.lastChild, isTrimmable(child)) { node.removeChild(child) } /* eslint-enable no-sequences */ } function isTrimmable (node) { return node && ( (node.nodeType === 3 && !node.data.trim()) || node.nodeType === 8 ) } /** * Check if an element is a template tag. * Note if the template appears inside an SVG its tagName * will be in lowercase. * * @param {Element} el */ export function isTemplate (el) { return el.tagName && el.tagName.toLowerCase() === 'template' } /** * Create an "anchor" for performing dom insertion/removals. * This is used in a number of scenarios: * - fragment instance * - v-html * - v-if * - v-for * - component * * @param {String} content * @param {Boolean} persist - IE trashes empty textNodes on * cloneNode(true), so in certain * cases the anchor needs to be * non-empty to be persisted in * templates. * @return {Comment|Text} */ export function createAnchor (content, persist) { var anchor = config.debug ? document.createComment(content) : document.createTextNode(persist ? ' ' : '') anchor.__v_anchor = true return anchor } /** * Find a component ref attribute that starts with $. * * @param {Element} node * @return {String|undefined} */ var refRE = /^v-ref:/ export function findRef (node) { if (node.hasAttributes()) { var attrs = node.attributes for (var i = 0, l = attrs.length; i < l; i++) { var name = attrs[i].name if (refRE.test(name)) { return camelize(name.replace(refRE, '')) } } } } /** * Map a function to a range of nodes . * * @param {Node} node * @param {Node} end * @param {Function} op */ export function mapNodeRange (node, end, op) { var next while (node !== end) { next = node.nextSibling op(node) node = next } op(end) } /** * Remove a range of nodes with transition, store * the nodes in a fragment with correct ordering, * and call callback when done. * * @param {Node} start * @param {Node} end * @param {Vue} vm * @param {DocumentFragment} frag * @param {Function} cb */ export function removeNodeRange (start, end, vm, frag, cb) { var done = false var removed = 0 var nodes = [] mapNodeRange(start, end, function (node) { if (node === end) done = true nodes.push(node) removeWithTransition(node, vm, onRemoved) }) function onRemoved () { removed++ if (done && removed >= nodes.length) { for (var i = 0; i < nodes.length; i++) { frag.appendChild(nodes[i]) } cb && cb() } } } /** * Check if a node is a DocumentFragment. * * @param {Node} node * @return {Boolean} */ export function isFragment (node) { return node && node.nodeType === 11 } /** * Get outerHTML of elements, taking care * of SVG elements in IE as well. * * @param {Element} el * @return {String} */ export function getOuterHTML (el) { if (el.outerHTML) { return el.outerHTML } else { var container = document.createElement('div') container.appendChild(el.cloneNode(true)) return container.innerHTML } }