Replace lightbox icons
This commit is contained in:
@@ -1,3 +1,6 @@
|
||||
import { icon } from '@fortawesome/fontawesome-svg-core';
|
||||
import { getIcon } from './icons.js';
|
||||
|
||||
const defaults = {
|
||||
albumLabel: 'Image %1 of %2',
|
||||
alwaysShowNavOnTouchDevices: false,
|
||||
@@ -14,6 +17,8 @@ const defaults = {
|
||||
onClosing: () => {}
|
||||
};
|
||||
|
||||
|
||||
|
||||
class Lightbox {
|
||||
constructor() {
|
||||
this.album = [];
|
||||
@@ -59,6 +64,10 @@ class Lightbox {
|
||||
this.start(link);
|
||||
}
|
||||
|
||||
renderIcon(name) {
|
||||
return icon(getIcon(name), {classes: ['spot-icon', name]}).html;
|
||||
}
|
||||
|
||||
build() {
|
||||
if (document.getElementById('lightbox')) return;
|
||||
|
||||
@@ -71,14 +80,14 @@ class Lightbox {
|
||||
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
|
||||
<div class="lb-nav">
|
||||
<div class="lb-prev-area">
|
||||
<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>
|
||||
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
|
||||
</div>
|
||||
<div class="lb-next-area">
|
||||
<a class="lb-next" aria-label="Next image" href="" role="button"></a>
|
||||
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-loader">
|
||||
<a class="lb-cancel" href="#"></a>
|
||||
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +97,7 @@ class Lightbox {
|
||||
<span class="lb-caption"></span>
|
||||
</div>
|
||||
<div class="lb-closeContainer">
|
||||
<a class="lb-close" role="button"></a>
|
||||
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,6 @@
|
||||
@use "common";
|
||||
@use "color";
|
||||
|
||||
@mixin lightbox-icon($icon) {
|
||||
background: none;
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
@if $icon == prev {
|
||||
content: "‹";
|
||||
}
|
||||
@else if $icon == next {
|
||||
content: "›";
|
||||
}
|
||||
@else if $icon == close {
|
||||
content: "×";
|
||||
}
|
||||
@else if $icon == cancel {
|
||||
content: "□";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -102,9 +80,9 @@ body.lb-disable-scrolling {
|
||||
line-height: 1.33333333em;
|
||||
|
||||
&.comment {
|
||||
.spot-icon {
|
||||
vertical-align: center;
|
||||
}
|
||||
.spot-icon {
|
||||
vertical-align: center;
|
||||
}
|
||||
.comment-text {
|
||||
display: inline-block;
|
||||
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
|
||||
@@ -201,8 +179,7 @@ body.lb-disable-scrolling {
|
||||
cursor: pointer;
|
||||
color: color.$over-img;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px 1px color.$over-img-shadow;
|
||||
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
@@ -211,25 +188,26 @@ body.lb-disable-scrolling {
|
||||
transition: opacity 0.3s, color 0.3s;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
font-size: 2em;
|
||||
|
||||
&:hover {
|
||||
color: color.$over-img-hover;
|
||||
}
|
||||
|
||||
.spot-icon {
|
||||
vertical-align: inherit;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
a.lb-prev {
|
||||
@include lightbox-icon(prev);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
a.lb-next {
|
||||
@include lightbox-icon(next);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -244,8 +222,8 @@ body.lb-disable-scrolling {
|
||||
line-height: 0;
|
||||
|
||||
.lb-cancel {
|
||||
@include lightbox-icon(cancel);
|
||||
@extend .flicker;
|
||||
font-size: 2em;
|
||||
color: color.$default;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -275,13 +253,13 @@ body.lb-disable-scrolling {
|
||||
}
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
@include lightbox-icon(close);
|
||||
@extend .clickable;
|
||||
height: auto;
|
||||
font-size: 1.3333333333em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
color: color.$default-inv;
|
||||
|
||||
&:hover {
|
||||
color: color.$default-inv-hover;
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
|
||||
.drill-hover-icon {
|
||||
display: none;
|
||||
text-shadow: color.$over-img-shadow 3px 3px 3px;
|
||||
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
.drill-icon {
|
||||
.drill-image, .drill-video {
|
||||
color: color.$media-bg;
|
||||
text-shadow: color.$over-img-shadow 3px 3px 3px;
|
||||
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 2.5em;
|
||||
filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
|
||||
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
|
||||
|
||||
&.message {
|
||||
transform: translate(-50%, -100%);
|
||||
@@ -46,7 +46,7 @@
|
||||
.spot-icon-stack {
|
||||
&:not(.drill-icon) {
|
||||
font-size: 2.5em;
|
||||
filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
|
||||
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
|
||||
}
|
||||
|
||||
&.message {
|
||||
|
||||
Reference in New Issue
Block a user