MediaWiki:WDSIcons/code.js

/** Snippet intended to make using Wikia Design System icons easier to use in user scripts */ define('fosl.wds', function {        /**     * Inserts the loaded SVG content to the element once it's fetched     * Executed in the context of the element     * @param {XMLHttpRequest} xhr     * @private     */    function renderIcon(xhr) {        if (xhr.status === 200) {            this.innerHTML = xhr.responseXML.rootElement.innerHTML;            this.classList.remove('not-loaded');        }    }

/**    * Fetches an icon from Design System and renders it once finished * Icons are cached in browser cache * @param {SVGElement} svg element to append to    * @private */   function loadIcon(container) { var xhr = new XMLHttpRequest; xhr.open('GET', 'https://cdn.rawgit.com/Wikia/design-system/master/assets/icons/' + encodeURIComponent(container.getAttribute('data-name')) + '.svg'); xhr.onload = renderIcon.bind(container, xhr); xhr.send; }

/**    * @param {string} icon name * @param {Array} array of classes to add * @param {Number} optional size * @return {SVGElement} */   function wdsIcon(name, classNames, size) { var elem = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); elem.className = 'wds-icon not-loaded'; if (Array.isArray(classNames)) { elem.classList.add.apply(elem.classList, classNames); }

elem.style.width = elem.style.height = size || 24; elem.setAttribute('viewBox', '0 0 24 24'); elem.setAttribute('data-name', name);

loadIcon(elem); return elem; }

/**    * Loads all Design System svgs marked for loading (via not-loaded class) * that are descendants of the specified selector * @param {String} selector a CSS selector */   function render(selector) { Array.prototype.slice.call(document.querySelector(selector).getElementsByClassName('wds-icon not-loaded')) .forEach(loadIcon); }

return { icon: wdsIcon, renderIcons: render }; });