ambient.min.js

var AmbientElement=function(){function AmbientElement(container,attributes){this.name=container.getAttribute("id")||undefined;this.originalAttributes=attributes||[];this.container=container;this._shadowElement=this.container.querySelector(".ambient__shadow")}AmbientElement.prototype.disable=function(){if(this._shadowElement.style.display!=="none")this._shadowElement.style.display="none"};AmbientElement.prototype.enable=function(){if(this._shadowElement.style.display!=="block")this._shadowElement.style.display="block "};return AmbientElement}();var Ambient=function(){var _customBlur,_retainAttributes;function Ambient(options){options=options||{};this.options=Object.assign({insertCSS:true,retainAttributes:false,blur:-1},options);if(this.options.insertCSS){applyDefaultStyles()}if(this.options.blur>=0&&this.options.blur!==45)_customBlur=this.options.blur;_retainAttributes=this.options.retainAttributes;this.elements=[]}Ambient.prototype.mount=function(element){var images=document.querySelectorAll("img[data-ambient]");for(var i=0;i<images.length;i++)this.elements.push(renderImage(images[i]));var videos=document.querySelectorAll("video[data-ambient]");for(var i=0;i<videos.length;i++)this.elements.push(renderVideo(videos[i]));return this.elements};Ambient.prototype.unmount=function(){this.elements.forEach(function(ambientElement){var container=ambientElement.container;var visibleElement=container.querySelector(".ambient__visible");visibleElement.classList.remove("ambient__visible");visibleElement.setAttribute("data-ambient",ambientElement.name||"");for(var i=0;i<ambientElement.originalAttributes.length;i++){var attribute=ambientElement.originalAttributes[i];if(!visibleElement.hasAttribute(attribute.name)||visibleElement.getAttribute(attribute.name)!==attribute.value){visibleElement.setAttribute(attribute.name,attribute.value)}}container.parentNode.insertBefore(visibleElement,container);container.parentNode.removeChild(container)});this.elements=[]};function renderVideo(videoElement){var element=videoElement;var container=document.createElement("div");container.className="ambient__container";if(element.getAttribute("data-ambient").length>0)container.id=element.getAttribute("data-ambient");var visibleElement=element.cloneNode(true);var originalAttributes=[];if(!_retainAttributes){originalAttributes=visibleElement.attributes;for(var i=0;i<visibleElement.attributes.length;i++){var name=visibleElement.attributes[i].name.toLowerCase();if(name==="src")continue;visibleElement.removeAttribute(name)}}visibleElement.classList.add("ambient__visible");var shadowElement=document.createElement("canvas");shadowElement.className="ambient__shadow";if(_customBlur)applyBlur(shadowElement,_customBlur);visibleElement.removeAttribute("data-ambient");(function(video,canvas){var context=canvas.getContext("2d");var shouldRequestNewFrame=false;function mirrorCanvas(){context.clearRect(0,0,canvas.width,canvas.height);context.drawImage(video,0,0,canvas.width,canvas.height);if(shouldRequestNewFrame)window.requestAnimationFrame(mirrorCanvas)}video.onloadeddata=function(){window.requestAnimationFrame(mirrorCanvas)};video.onplay=function(){shouldRequestNewFrame=true;window.requestAnimationFrame(mirrorCanvas)};video.onpause=function(){shouldRequestNewFrame=false};video.onabort=function(){shouldRequestNewFrame=false}})(visibleElement,shadowElement);container.appendChild(visibleElement);container.appendChild(shadowElement);element.parentNode.insertBefore(container,element);element.parentNode.removeChild(element);return new AmbientElement(container,originalAttributes)}function renderImage(imgElement){var container=document.createElement("div");container.className="ambient__container";if(imgElement.getAttribute("data-ambient").length>0)container.id=imgElement.getAttribute("data-ambient");var visibleElement;var originalAttributes=[];if(_retainAttributes)visibleElement=imgElement.cloneNode();else{originalAttributes=imgElement.attributes;visibleElement=document.createElement("img");visibleElement.src=imgElement.src;visibleElement.alt=imgElement.alt}visibleElement.classList.add("ambient__visible");var shadowElement=document.createElement("img");shadowElement.className="ambient__shadow";shadowElement.src=visibleElement.src;if(_customBlur)applyBlur(shadowElement,_customBlur);visibleElement.removeAttribute("data-ambient");shadowElement.removeAttribute("data-ambient");(function(visible,shadow){visibleElement.onload=function(){shadowElement.src=visibleElement.src}})(visibleElement,shadowElement);container.appendChild(visibleElement);container.appendChild(shadowElement);imgElement.parentNode.insertBefore(container,imgElement);imgElement.parentNode.removeChild(imgElement);return new AmbientElement(container,originalAttributes)}function applyBlur(element,value){var blur="blur("+value+"px)";element.style.filter=blur;element.style.webkitFilter=blur;element.style.mozFilter=blur;element.style.msFilter=blur}function applyStyles(element,styles){for(var item in styles){if(styles.hasOwnProperty(item)){element.style[item]=styles[item]}}}function applyDefaultStyles(){var defaultStyles="LmFtYmllbnRfX2NvbnRhaW5lcntwb3NpdGlvbjpyZWxhdGl2ZX0uYW1iaWVudF9fdmlzaWJsZXtkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOnJlbGF0aXZlO3otaW5kZXg6MTA7d2lkdGg6MTAwJX0uYW1iaWVudF9fc2hhZG93e2Rpc3BsYXk6YmxvY2s7cG9zaXRpb246YWJzb2x1dGU7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt6LWluZGV4OjU7bGVmdDowO3RvcDowOy13ZWJraXQtZmlsdGVyOmJsdXIoNDVweCk7LW1vei1maWx0ZXI6Ymx1cig0NXB4KTstbXMtZmlsdGVyOmJsdXIoNDVweCk7ZmlsdGVyOmJsdXIoNDVweCl9";var styleEl=document.createElement("style");styleEl.textContent=atob(defaultStyles);var head=document.querySelector("head");head.appendChild(styleEl)}return Ambient}();