Permalink
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (90 sloc) 2.39 KB
static {
let exportsJSON;
let bgSvgData;
function importExports(component){
return component.getEl().children[0].dataset.exports;
}
let isServer = false;
let state = {};
}
server-static {
}
server {
isServer = true;
state.previewImageUrl = input.previewSvg;
state.fullImageUrl = input.imgSrc;
state.loadedClass = "";
state.fullImage = "";
let exportsPromise = state;
}
class {
onCreate(){
this.state = state;
}
onMount(){
let imageLoaded = false;
this.state = JSON.parse(this.getEl().dataset.exports);
this.state.fullImage = "";
if (this.input.trigger) {
this.subscribeTo(document).on(this.input.trigger, () => {
if(!imageLoaded){
this.loadFullImage();
imageLoaded = true;
}
});
} else {
this.loadFullImage();
}
}
loadFullImage(){
let component = this;
let placeholder = this.getEl().querySelector('.progressive-image-full');
const imgLarge = new Image();
imgLarge.src = this.state.fullImageUrl;
imgLarge.onload = function () {
component.state.fullImage = imgLarge.src;
placeholder.classList.add('loaded');
};
}
}
<div data-exports=(!isServer ? importExports(component) : null)>
<span data-exports:no-update=JSON.stringify((isServer ? exportsPromise : state))></span>
<div.progressive-image-wrap>
<object type="image/svg+xml" data:no-update="${state.previewImageUrl}"></object>
<div.progressive-image-full class="${state.loadedClass}"><img src="${state.fullImage}" /></div>
</div>
</div>
style.sass {
.progressive-image-wrap {
background-color: #f6f6f6;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
font-size: 0px;
}
.progressive-image-preview {
width: 930px;
height: 620px;
position: relative;
top: 0;
left: 0;
width: 100%;
filter: blur(20px);
transform: scale(1);
}
.progressive-image-full {
transition: opacity 0.6s linear;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
&.loaded {
opacity: 1;
}
img {
width: 100%;
}
}
}