muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

added image preloader

Browse source
This commit is contained in:
Fedor Katurov 2020-11-06 22:16:32 +07:00
parent 3a59e5789e
commit 145901d72c
2 changed files with 61 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -272,7 +272,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
<div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}> <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
<div <div
className={classNames(styles.placeholder, { className={classNames(styles.placeholder, {
[styles.is_loading]: is_loading || !loaded[current], [styles.is_loading]: is_loading,
})} })}
> >
<div> <div>
@ -295,32 +295,46 @@ const NodeImageSlideBlock: FC<IProps> = ({
images.map((file, index) => ( images.map((file, index) => (
<div <div
className={classNames(styles.image_wrap, { className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index], [styles.is_active]: index === current,
})} })}
ref={setRef(index)} ref={setRef(index)}
key={node.updated_at + file.id} key={node.updated_at + file.id}
> >
{
// check if metadata is available, then show loader
}
<svg <svg
viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`} viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
className={styles.image} className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
style={{ style={{
maxHeight: max_height, maxHeight: max_height,
// height: file.metadata.height, width: '100%',
width: file.metadata.width,
}} }}
> >
<defs> <defs>
<filter id="f1" x="0" y="0"> <filter id="f1" x="0" y="0">
<feGaussianBlur stdDeviation="10" /> <feBlend
<feColorMatrix in="a1" type="saturate" values="0.5" /> mode="multiply"
<feColorMatrix in="a1" type="brightness" values="2" /> x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
in2="SourceGraphic"
result="blend"
/>
<feGaussianBlur
stdDeviation="15 15"
x="0%"
y="0%"
width="100%"
height="100%"
in="blend"
edgeMode="none"
result="blur2"
/>
</filter> </filter>
</defs> </defs>
<rect fill="#333333" width="100%" height="100%" /> <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
<image <image
xlinkHref={getURL(file, PRESETS['300'])} xlinkHref={getURL(file, PRESETS['300'])}
@ -329,16 +343,15 @@ const NodeImageSlideBlock: FC<IProps> = ({
filter="url(#f1)" filter="url(#f1)"
/> />
</svg> </svg>
{
<img <img
className={styles.image} className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
src={getURL(file, PRESETS['1600'])} src={getURL(file, PRESETS['1600'])}
alt="" alt=""
key={file.id} key={file.id}
onLoad={onImageLoad(index)} onLoad={onImageLoad(index)}
style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }} style={{ maxHeight: max_height }}
/> />
}
</div> </div>
))} ))}
</div> </div>

39
src/components/node/NodeImageSlideBlock/styles.module.scss
View file

@ -39,18 +39,6 @@
transition: none; transition: none;
} }
.image {
max-width: 100%;
opacity: 1;
border-radius: $radius;
box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
@include tablet {
border-radius: 0;
}
}
&.is_dragging { &.is_dragging {
transition: none; transition: none;
} }
@ -67,7 +55,7 @@
padding: 0 $gap / 2; padding: 0 $gap / 2;
position: relative; position: relative;
&:global(.is_active) { &.is_active {
opacity: 1; opacity: 1;
} }
@ -170,3 +158,28 @@
fill: white; fill: white;
} }
} }
.image, .preview {
max-width: 100%;
border-radius: $radius;
@include tablet {
border-radius: 0;
}
}
.image {
position: absolute;
opacity: 0;
&.is_loaded {
opacity: 1;
position: static;
}
}
.preview {
&.is_loaded {
display: none;
}
}