2 | ngx-image-gallery 3 |
4 | 5 | 151 | 152 | 153 | 154 | 155 | 156 | 157 |
4 |
5 |
66 |
67 |
68 |
69 |
71 |
73 |
74 |
6 |
7 |
38 |
39 |
40 |
10 | ![]()
13 |
14 |
15 |
16 |
17 |
36 |
37 |
41 |
65 | {{ activeImage.title }}
46 |
47 |
48 |
49 |
64 |
50 |
63 |
60 |
61 |
62 |
75 |
78 |
79 |
80 |
84 |
85 |
81 |
82 |
83 |
86 |
91 |
--------------------------------------------------------------------------------
/src/projects/ngx-image-gallery/src/lib/components/ngx-image-gallery/ngx-image-gallery.component.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | exports.__esModule = true;
9 | var core_1 = require("@angular/core");
10 | var lodash_1 = require("lodash");
11 | // key codes to react
12 | var KEY_CODES = {
13 | 37: 'LEFT',
14 | 39: 'RIGHT',
15 | 27: 'ESC'
16 | };
17 | // default gallery configuration
18 | var DEFAULT_CONF = {
19 | imageBorderRadius: '3px',
20 | imageOffset: '20px',
21 | imagePointer: false,
22 | showDeleteControl: false,
23 | showCloseControl: true,
24 | showExtUrlControl: true,
25 | showImageTitle: true,
26 | showThumbnails: true,
27 | closeOnEsc: true,
28 | reactToKeyboard: true,
29 | reactToMouseWheel: true,
30 | reactToRightClick: false,
31 | thumbnailSize: 30,
32 | backdropColor: 'rgba(13,13,14,0.85)',
33 | inline: false,
34 | showArrows: true
35 | };
36 | var NgxImageGalleryComponent = (function () {
37 | /***************************************************/
38 | function NgxImageGalleryComponent(galleryElem, renderer) {
39 | var _this = this;
40 | this.galleryElem = galleryElem;
41 | this.renderer = renderer;
42 | // gallery opened memory
43 | this.opened = false;
44 | // gallery configuration
45 | this.conf = {};
46 | // gallery images
47 | this.images = [];
48 | // event emmiters
49 | this.onOpen = new core_1.EventEmitter();
50 | this.onClose = new core_1.EventEmitter();
51 | this.onDelete = new core_1.EventEmitter();
52 | this.onImageChange = new core_1.EventEmitter();
53 | this.onImageClicked = new core_1.EventEmitter();
54 | /***************************************************/
55 | // loading animation memory
56 | this.loading = false;
57 | // current active image index
58 | this.activeImageIndex = null;
59 | // thumbnail margin and scroll position
60 | this.thumbnailMargin = '0px 8px';
61 | this.thumbnailsScrollerLeftMargin = '0px';
62 | // adjust thumbnail margin to perfectly fit viewport
63 | this.fitThumbnails = lodash_1.debounce(function () {
64 | // if thumbnails not visible, return false
65 | if (_this.conf.showThumbnails == false)
66 | return false;
67 | var thumbnailParams = _this.thumbnailsRenderParams;
68 | _this.thumbnailMargin = '0 ' + (thumbnailParams.newThumbnailMargin / 2) + 'px';
69 | }, 300);
70 | // debounced prev
71 | this.debouncedPrev = lodash_1.debounce(function () { return _this.prev(); }, 100, { 'leading': true, 'trailing': false });
72 | // debounced next
73 | this.debouncedNext = lodash_1.debounce(function () { return _this.next(); }, 100, { 'leading': true, 'trailing': false });
74 | }
75 | Object.defineProperty(NgxImageGalleryComponent.prototype, "activeImage", {
76 | // active image
77 | get: function () {
78 | return this.images[this.activeImageIndex];
79 | },
80 | enumerable: true,
81 | configurable: true
82 | });
83 | Object.defineProperty(NgxImageGalleryComponent.prototype, "onFirstImage", {
84 | // if gallery is on : first image
85 | get: function () {
86 | return this.activeImageIndex == 0;
87 | },
88 | enumerable: true,
89 | configurable: true
90 | });
91 | Object.defineProperty(NgxImageGalleryComponent.prototype, "onLastImage", {
92 | // if gallery is on : last image
93 | get: function () {
94 | return this.activeImageIndex == (this.images.length - 1);
95 | },
96 | enumerable: true,
97 | configurable: true
98 | });
99 | Object.defineProperty(NgxImageGalleryComponent.prototype, "thumbnailsRenderParams", {
100 | // get thumbnails viewport rendering parameters
101 | get: function () {
102 | var thumbnailsContainerWidth = this.thumbnailsElem.nativeElement.offsetWidth;
103 | var thumbnailMargin = 16;
104 | var thumbnailSize = thumbnailMargin + this.conf.thumbnailSize;
105 | var thumbnailsInView = Math.floor(thumbnailsContainerWidth / thumbnailSize);
106 | var extraSpaceInThumbnailsContainer = thumbnailsContainerWidth - (thumbnailsInView * thumbnailSize);
107 | var extraMargin = extraSpaceInThumbnailsContainer / thumbnailsInView;
108 | var newThumbnailMargin = thumbnailMargin + extraMargin;
109 | var newThumbnailSize = newThumbnailMargin + this.conf.thumbnailSize;
110 | var relativePositionOfActiveImageThumbnailToScroller = thumbnailsInView - (thumbnailsInView - this.activeImageIndex);
111 | var thumbnailsScrollerLeftMargin;
112 | if (relativePositionOfActiveImageThumbnailToScroller > thumbnailsInView - 2) {
113 | var outThumbnails = ((this.activeImageIndex + 1) - thumbnailsInView) + 1;
114 | if (this.activeImageIndex != (this.images.length - 1)) {
115 | thumbnailsScrollerLeftMargin = '-' + (newThumbnailSize * outThumbnails) + 'px';
116 | }
117 | else {
118 | thumbnailsScrollerLeftMargin = '-' + (newThumbnailSize * (outThumbnails - 1)) + 'px';
119 | }
120 | }
121 | else {
122 | thumbnailsScrollerLeftMargin = '0px';
123 | }
124 | return {
125 | thumbnailsInView: thumbnailsInView,
126 | newThumbnailMargin: newThumbnailMargin,
127 | newThumbnailSize: newThumbnailSize,
128 | thumbnailsScrollerLeftMargin: thumbnailsScrollerLeftMargin
129 | };
130 | },
131 | enumerable: true,
132 | configurable: true
133 | });
134 | // set gallery configuration
135 | NgxImageGalleryComponent.prototype.setGalleryConf = function (conf) {
136 | this.conf = lodash_1.assign(DEFAULT_CONF, conf);
137 | };
138 | // load image and return promise
139 | NgxImageGalleryComponent.prototype.loadImage = function (index) {
140 | var _this = this;
141 | var galleryImage = this.images[index];
142 | // check if image is cached
143 | if (galleryImage._cached) {
144 | return Promise.resolve(index);
145 | }
146 | else {
147 | return new Promise(function (resolve, reject) {
148 | _this.loading = true;
149 | var image = new Image();
150 | image.src = galleryImage.url;
151 | image.onload = function () {
152 | _this.loading = false;
153 | galleryImage._cached = true;
154 | resolve(index);
155 | };
156 | image.onerror = function (error) {
157 | _this.loading = false;
158 | reject(error);
159 | };
160 | });
161 | }
162 | };
163 | // activate image (set active image)
164 | NgxImageGalleryComponent.prototype.activateImage = function (imageIndex) {
165 | var _this = this;
166 | // prevent loading if already loading
167 | if (this.loading)
168 | return false;
169 | // emit event
170 | this.onImageChange.emit(imageIndex);
171 | this.loadImage(imageIndex)
172 | .then(function (_imageIndex) {
173 | _this.activeImageIndex = _imageIndex;
174 | // scroll thumbnails
175 | setTimeout(function () {
176 | _this.fitThumbnails();
177 | setTimeout(function () { return _this.scrollThumbnails(); }, 300);
178 | });
179 | })["catch"](function (error) { return console.warn(error); });
180 | };
181 | // scroll thumbnails to perfectly position active image thumbnail in viewport
182 | NgxImageGalleryComponent.prototype.scrollThumbnails = function () {
183 | // if thumbnails not visible, return false
184 | if (this.conf.showThumbnails == false)
185 | return false;
186 | var thumbnailParams = this.thumbnailsRenderParams;
187 | this.thumbnailsScrollerLeftMargin = thumbnailParams.thumbnailsScrollerLeftMargin;
188 | };
189 | // keyboard event
190 | NgxImageGalleryComponent.prototype.onKeyboardInput = function (event) {
191 | if (this.conf.reactToKeyboard && this.opened && !this.loading) {
192 | if (KEY_CODES[event.keyCode] == 'RIGHT') {
193 | this.next();
194 | }
195 | else if (KEY_CODES[event.keyCode] == 'LEFT') {
196 | this.prev();
197 | }
198 | else if ((KEY_CODES[event.keyCode] == 'ESC') && this.conf.closeOnEsc) {
199 | this.close();
200 | }
201 | }
202 | };
203 | // window resize event
204 | NgxImageGalleryComponent.prototype.onWindowResize = function (event) {
205 | var _this = this;
206 | if (this.opened && !this.loading) {
207 | this.fitThumbnails();
208 | setTimeout(function () { return _this.scrollThumbnails(); }, 300);
209 | }
210 | };
211 | NgxImageGalleryComponent.prototype.ngOnInit = function () {
212 | // create final gallery configuration
213 | this.setGalleryConf(this.conf);
214 | // apply backdrop color
215 | this.renderer.setStyle(this.galleryElem.nativeElement, 'background-color', this.conf.backdropColor);
216 | // gallery inline class and auto open
217 | if (this.conf.inline) {
218 | this.renderer.addClass(this.galleryElem.nativeElement, 'inline');
219 | this.open(0);
220 | }
221 | };
222 | NgxImageGalleryComponent.prototype.ngOnChanges = function (changes) {
223 | // when gallery configuration changes
224 | if (changes.conf && changes.conf.firstChange == false) {
225 | this.setGalleryConf(changes.conf.currentValue);
226 | // apply backdrop color
227 | this.renderer.setStyle(this.galleryElem.nativeElement, 'background-color', this.conf.backdropColor);
228 | // gallery inline class and auto open
229 | if ((changes.conf.previousValue.inline != true) && this.conf.inline) {
230 | this.renderer.addClass(this.galleryElem.nativeElement, 'inline');
231 | this.open(0);
232 | }
233 | }
234 | // when gallery images changes
235 | if (changes.images && changes.images.firstChange == false) {
236 | this.images = changes.images.currentValue;
237 | if (this.images.length) {
238 | this.activateImage(0);
239 | }
240 | }
241 | };
242 | /***************************************************/
243 | // open gallery
244 | NgxImageGalleryComponent.prototype.open = function (index) {
245 | if (index === void 0) { index = 0; }
246 | if (this.images.length) {
247 | this.opened = true;
248 | // emit event
249 | this.onOpen.emit(index);
250 | // activate image at given index
251 | this.activateImage(index);
252 | }
253 | else {
254 | console.warn('No images provided to ngx-image-gallery!');
255 | }
256 | };
257 | // close gallery
258 | NgxImageGalleryComponent.prototype.close = function () {
259 | this.opened = false;
260 | this.activeImageIndex = 0;
261 | // emit event
262 | this.onClose.emit();
263 | };
264 | // change prev image
265 | NgxImageGalleryComponent.prototype.prev = function () {
266 | if (this.onFirstImage == false) {
267 | this.activateImage(this.activeImageIndex - 1);
268 | }
269 | };
270 | // change next image
271 | NgxImageGalleryComponent.prototype.next = function () {
272 | if (this.onLastImage == false) {
273 | this.activateImage(this.activeImageIndex + 1);
274 | }
275 | };
276 | // set image (activate)
277 | NgxImageGalleryComponent.prototype.setActiveImage = function (index) {
278 | this.activateImage(index);
279 | };
280 | // delete image
281 | NgxImageGalleryComponent.prototype.deleteImage = function (index) {
282 | this.onDelete.emit(index);
283 | };
284 | // mouse wheel up (prev image)
285 | NgxImageGalleryComponent.prototype.mouseWheelUp = function () {
286 | if (this.conf.reactToMouseWheel) {
287 | this.debouncedNext();
288 | }
289 | };
290 | // mouse wheel down (next image)
291 | NgxImageGalleryComponent.prototype.mouseWheelDown = function () {
292 | if (this.conf.reactToMouseWheel) {
293 | this.debouncedPrev();
294 | }
295 | };
296 | // click on image
297 | NgxImageGalleryComponent.prototype.clickOnImage = function (index) {
298 | this.onImageClicked.emit(index);
299 | };
300 | // right click on image
301 | NgxImageGalleryComponent.prototype.rightClickOnImage = function (event) {
302 | event.stopPropagation();
303 | return this.conf.reactToRightClick;
304 | };
305 | return NgxImageGalleryComponent;
306 | }());
307 | __decorate([
308 | core_1.HostBinding('class.active')
309 | ], NgxImageGalleryComponent.prototype, "opened");
310 | __decorate([
311 | core_1.Input()
312 | ], NgxImageGalleryComponent.prototype, "conf");
313 | __decorate([
314 | core_1.Input()
315 | ], NgxImageGalleryComponent.prototype, "images");
316 | __decorate([
317 | core_1.Output()
318 | ], NgxImageGalleryComponent.prototype, "onOpen");
319 | __decorate([
320 | core_1.Output()
321 | ], NgxImageGalleryComponent.prototype, "onClose");
322 | __decorate([
323 | core_1.Output()
324 | ], NgxImageGalleryComponent.prototype, "onDelete");
325 | __decorate([
326 | core_1.Output()
327 | ], NgxImageGalleryComponent.prototype, "onImageChange");
328 | __decorate([
329 | core_1.Output()
330 | ], NgxImageGalleryComponent.prototype, "onImageClicked");
331 | __decorate([
332 | core_1.ViewChild('thumbnails')
333 | ], NgxImageGalleryComponent.prototype, "thumbnailsElem");
334 | __decorate([
335 | core_1.HostListener('window:keydown', ['$event'])
336 | ], NgxImageGalleryComponent.prototype, "onKeyboardInput");
337 | __decorate([
338 | core_1.HostListener('window:resize', ['$event'])
339 | ], NgxImageGalleryComponent.prototype, "onWindowResize");
340 | NgxImageGalleryComponent = __decorate([
341 | core_1.Component({
342 | selector: 'ngx-image-gallery',
343 | templateUrl: './ngx-image-gallery.component.html',
344 | styleUrls: ['./ngx-image-gallery.component.scss']
345 | })
346 | ], NgxImageGalleryComponent);
347 | exports.NgxImageGalleryComponent = NgxImageGalleryComponent;
348 |
--------------------------------------------------------------------------------
/src/projects/ngx-image-gallery/src/lib/components/ngx-image-gallery/ngx-image-gallery.component.scss:
--------------------------------------------------------------------------------
1 | // zoom scale in
2 | @keyframes zoomScaleIn {
3 | 0%{
4 | transform: scale(0.99);
5 | opacity: 0;
6 | }
7 |
8 | 100%{
9 | transform: scale(1);
10 | opacity: 1;
11 | }
12 | }
13 |
14 | // thumbnail box shadow animation
15 | @keyframes thumbShadowAnimation {
16 | 0%{
17 | box-shadow: 0 0 3px 2px rgba(255,255,255,0.05);
18 | }
19 |
20 | 100%{
21 | box-shadow: 0 0 3px 2px rgba(255,255,255,0.2);
22 | }
23 | }
24 |
25 | // prevent drag, highlight and select
26 | @mixin no-select{
27 | backface-visibility: hidden;
28 | -webkit-backface-visibility: hidden;
29 | -webkit-touch-callout: none;
30 | -webkit-user-select: none;
31 | -moz-user-select: none;
32 | -ms-user-select: none;
33 | user-select: none;
34 | user-drag: none;
35 | -webkit-user-drag: none;
36 | }
37 |
38 | // click feedback
39 | @keyframes clickFeedback1 {
40 | 0% {
41 | opacity: 1;
42 | transform: scale3d(0.5, 0.5, 1);
43 | }
44 | 100% {
45 | opacity: 0;
46 | transform: scale3d(1.1, 1.1, 1);
47 | }
48 | }
49 | @keyframes clickFeedback2 {
50 | 0% {
51 | opacity: 1;
52 | transform: scale3d(0.5, 0.5, 1);
53 | }
54 | 50%{
55 | opacity: 0;
56 | transform: scale3d(1.2, 1.2, 1);
57 | }
58 | 100%{
59 | opacity: 0;
60 | transform: scale3d(1.2, 1.2, 1);
61 | }
62 | }
63 | .feedback{
64 | position: absolute;
65 | z-index: 1;
66 | left: 0;
67 | top: 0;
68 | right: 0;
69 | bottom: 0;
70 |
71 | &:before,
72 | &:after {
73 | position: absolute;
74 | top: 50%;
75 | left: 50%;
76 | margin: -30px 0 0 -30px;
77 | width: 60px;
78 | height: 60px;
79 | border-radius: 50%;
80 | content: '';
81 | opacity: 0;
82 | pointer-events: none;
83 | box-shadow: 0 0 0 2px rgba(111,148,182,0.5);
84 | }
85 |
86 | &:active{
87 | &:before{
88 | animation: clickFeedback1 0.5s forwards;
89 | }
90 |
91 | &:after{
92 | animation: clickFeedback2 0.5s forwards;
93 | }
94 | }
95 | }
96 |
97 | /**************************************************/
98 |
99 | :host{
100 | display: none;
101 | position: fixed;
102 | z-index: 10000;
103 | left: 0;
104 | top: 0;
105 | right: 0;
106 | bottom: 0;
107 |
108 | // inline gallery
109 | &.inline{
110 | display: block;
111 | position: relative;
112 | width: 100%;
113 | height: 500px;
114 | }
115 |
116 | &.active{
117 | display: block;
118 | }
119 |
120 | >.galleria{
121 | position: absolute;
122 | left: 80px;
123 | right: 80px;
124 | top: 0;
125 | bottom: 0;
126 | z-index: 1;
127 | display: flex;
128 | flex-direction: column;
129 | animation: zoomScaleIn 0.2s 1 forwards;
130 |
131 | >.images-container{
132 | flex: 1;
133 | width: 100%;
134 | position: relative;
135 |
136 | >.image{
137 | position: absolute;
138 | left: 0;
139 | right: 0;
140 | top: 0;
141 | bottom: 0;
142 | display: none;
143 |
144 | &.active{
145 | display: block;
146 | }
147 |
148 | >img{
149 | position: absolute;
150 | left: 0;
151 | right: 0;
152 | top: 0;
153 | bottom: 0;
154 | margin: auto;
155 | max-width: 100%;
156 | max-height: 100%;
157 | animation: zoomScaleIn 0.2s 1 forwards;
158 | @include no-select;
159 | }
160 | }
161 |
162 | >.loading-animation{
163 | position: absolute;
164 | left: 0;
165 | top: 0;
166 | right: 0;
167 | bottom: 0;
168 | z-index: 100;
169 | display: flex;
170 | justify-content: center;
171 | align-items: center;
172 |
173 | >svg{
174 | flex: none;
175 | width: 100px;
176 | height: 100px;
177 | }
178 | }
179 | }
180 |
181 | >.info-container{
182 | flex: none;
183 | width: 100%;
184 | display: flex;
185 | flex-direction: column;
186 | align-items: center;
187 |
188 | >.title{
189 | padding-top: 30px;
190 | line-height: 1.4;
191 | font-size: 13px;
192 | color: #fff;
193 | text-align: center;
194 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
195 |
196 | &.dark{
197 | color: #222;
198 | }
199 | }
200 |
201 | >.thumbnails{
202 | padding-top: 20px;
203 | padding-bottom: 20px;
204 | overflow: hidden;
205 | white-space: nowrap;
206 | width: auto;
207 | margin: 0 auto;
208 | max-width: 100%;
209 |
210 | .thumbnails-scroller{
211 | white-space: nowrap;
212 | transition: all 0.3s ease;
213 |
214 | >.thumbnail{
215 | display: inline-block;
216 | border-radius: 100%;
217 | vertical-align: middle;
218 | background-color: #999;
219 | opacity: 0.5;
220 | filter: grayscale(100%);
221 | background-size: cover;
222 | background-position: center top;
223 | cursor: pointer;
224 | position: relative;
225 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
226 | outline: none;
227 | transition: all 0.3s ease;
228 | @include no-select;
229 |
230 | &.active,
231 | &:hover{
232 | filter: grayscale(30%);
233 |
234 | &:after{
235 | content: "";
236 | display: block;
237 | position: absolute;
238 | left: -3px;
239 | top: -3px;
240 | right: -3px;
241 | bottom: -3px;
242 | border-radius: 100%;
243 | overflow: hidden;
244 | animation: thumbShadowAnimation 1s infinite alternate;
245 | }
246 | }
247 |
248 | &.active{
249 | opacity: 1;
250 | filter: grayscale(0%);
251 | }
252 | }
253 | }
254 | }
255 | }
256 | }
257 |
258 | >.control{
259 | z-index: 20;
260 | @include no-select;
261 |
262 | &.arrow{
263 | position: absolute;
264 | top: 50%;
265 | margin-top: -60px;
266 | width: 50px;
267 | height: 50px;
268 | background-size: 100% 100%;
269 | background-repeat: no-repeat;
270 | overflow: hidden;
271 | cursor: pointer;
272 | transition: all 100ms ease;
273 |
274 | &.disabled{
275 | opacity: 0.3;
276 | }
277 |
278 | &:not(.disabled):active{
279 | width: 60px;
280 | }
281 |
282 | &.left{
283 | left: 0;
284 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDc3LjE3NSA0NzcuMTc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzcuMTc1IDQ3Ny4xNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPg0KPGc+DQoJPHBhdGggZD0iTTE0NS4xODgsMjM4LjU3NWwyMTUuNS0yMTUuNWM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMXMtMTMuOC01LjMtMTkuMSwwbC0yMjUuMSwyMjUuMWMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjFsMjI1LjEsMjI1ICAgYzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMUwxNDUuMTg4LDIzOC41NzV6IiBmaWxsPSIjRkZGRkZGIi8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==');
285 |
286 | &.dark{
287 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTE1NS43ODQsMjU1Ljk4NkwzODcuMDEyLDI0Ljc1OWM1LjY4Ny01LjY4Nyw1LjY4Ny0xNC44MDcsMC0yMC40OTRjLTUuNjg4LTUuNjg3LTE0LjgwNy01LjY4Ny0yMC40OTQsMA0KCQlMMTI0Ljk4OSwyNDUuNzkzYy01LjY4Nyw1LjY4Ny01LjY4NywxNC44MDcsMCwyMC40OTRsMjQxLjUyOCwyNDEuNDIxYzIuNzksMi43OSw2LjU0NSw0LjI5MiwxMC4xOTMsNC4yOTINCgkJczcuNDAzLTEuMzk1LDEwLjE5My00LjI5MmM1LjY4Ny01LjY4Nyw1LjY4Ny0xNC44MDcsMC0yMC40OTRMMTU1Ljc4NCwyNTUuOTg2eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
288 | }
289 | }
290 |
291 | &.right{
292 | right: 0;
293 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDc3LjE3NSA0NzcuMTc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzcuMTc1IDQ3Ny4xNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPg0KPGc+DQoJPHBhdGggZD0iTTM2MC43MzEsMjI5LjA3NWwtMjI1LjEtMjI1LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwcy01LjMsMTMuOCwwLDE5LjFsMjE1LjUsMjE1LjVsLTIxNS41LDIxNS41ICAgYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0YzMuNCwwLDYuOS0xLjMsOS41LTRsMjI1LjEtMjI1LjFDMzY1LjkzMSwyNDIuODc1LDM2NS45MzEsMjM0LjI3NSwzNjAuNzMxLDIyOS4wNzV6ICAgIiBmaWxsPSIjRkZGRkZGIi8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==');
294 |
295 | &.dark{
296 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTM4Ny4wNTgsMjQ1Ljc5M0wxNDUuNTMsNC4yNjVjLTUuNjg3LTUuNjg3LTE0LjgwNy01LjY4Ny0yMC40OTQsMHMtNS42ODcsMTQuODA3LDAsMjAuNDk0bDIzMS4yMjgsMjMxLjIyOA0KCQlMMTI1LjAzNiw0ODcuMjE0Yy01LjY4Nyw1LjY4OC01LjY4NywxNC44MDgsMCwyMC40OTRjMi43OSwyLjc5LDYuNTQ1LDQuMjkyLDEwLjE5Myw0LjI5MmMzLjY0OCwwLDcuNDAzLTEuMzk1LDEwLjE5My00LjI5Mg0KCQlMMzg2Ljk1LDI2Ni4xOEMzOTIuNjM3LDI2MC42MDEsMzkyLjYzNywyNTEuMzczLDM4Ny4wNTgsMjQ1Ljc5M3oiLz4NCjwvZz4NCjwvc3ZnPg0K');
297 | }
298 | }
299 | }
300 |
301 | &.left-top,
302 | &.right-top{
303 | position: absolute;
304 | top: 20px;
305 |
306 | &.left-top{
307 | left: 10px;
308 | }
309 |
310 | &.right-top{
311 | right: 10px;
312 | }
313 |
314 | >.delete-img,
315 | >.ext-url,
316 | >.close{
317 | position: relative;
318 | display: inline-block;
319 | width: 30px;
320 | height: 30px;
321 | cursor: pointer;
322 | text-decoration: none;
323 | color: #fff;
324 | vertical-align: bottom;
325 | transition: background-color .3s ease-in-out;
326 |
327 | &:hover{
328 | background-color: rgba(255,255,255,.1);
329 | }
330 |
331 | &:before{
332 | content: "";
333 | display: block;
334 | position: absolute;
335 | top: 5px;
336 | right: 5px;
337 | bottom: 5px;
338 | left: 5px;
339 | background-size: 100% 100%;
340 | background-repeat: no-repeat;
341 | }
342 |
343 | &.delete-img{
344 | &:before{
345 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU5IDU5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1OSA1OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIGQ9Ik01Mi41LDZIMzguNDU2Yy0wLjExLTEuMjUtMC40OTUtMy4zNTgtMS44MTMtNC43MTFDMzUuODA5LDAuNDM0LDM0Ljc1MSwwLDMzLjQ5OSwwSDIzLjVjLTEuMjUyLDAtMi4zMSwwLjQzNC0zLjE0NCwxLjI4OSAgQzE5LjAzOCwyLjY0MiwxOC42NTMsNC43NSwxOC41NDMsNkg2LjVjLTAuNTUyLDAtMSwwLjQ0Ny0xLDFzMC40NDgsMSwxLDFoMi4wNDFsMS45MTUsNDYuMDIxQzEwLjQ5Myw1NS43NDMsMTEuNTY1LDU5LDE1LjM2NCw1OSAgaDI4LjI3MmMzLjc5OSwwLDQuODcxLTMuMjU3LDQuOTA3LTQuOTU4TDUwLjQ1OSw4SDUyLjVjMC41NTIsMCwxLTAuNDQ3LDEtMVM1My4wNTIsNiw1Mi41LDZ6IE0yMC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDEgIHMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMXMxLDAuNDQ3LDEsMVY1MHogTTMwLjUsNTBjMCwwLjU1My0wLjQ0OCwxLTEsMXMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMSAgczEsMC40NDcsMSwxVjUweiBNNDAuNSw1MGMwLDAuNTUzLTAuNDQ4LDEtMSwxcy0xLTAuNDQ3LTEtMVYxN2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxVjUweiBNMjEuNzkyLDIuNjgxICBDMjIuMjQsMi4yMjMsMjIuNzk5LDIsMjMuNSwyaDkuOTk5YzAuNzAxLDAsMS4yNiwwLjIyMywxLjcwOCwwLjY4MWMwLjgwNSwwLjgyMywxLjEyOCwyLjI3MSwxLjI0LDMuMzE5SDIwLjU1MyAgQzIwLjY2NSw0Ljk1MiwyMC45ODgsMy41MDQsMjEuNzkyLDIuNjgxeiIgZmlsbD0iI0ZGRkZGRiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
346 | }
347 |
348 | &.dark{
349 | &:before{
350 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU5IDU5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1OSA1OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIGQ9Ik01Mi41LDZIMzguNDU2Yy0wLjExLTEuMjUtMC40OTUtMy4zNTgtMS44MTMtNC43MTFDMzUuODA5LDAuNDM0LDM0Ljc1MSwwLDMzLjQ5OSwwSDIzLjVjLTEuMjUyLDAtMi4zMSwwLjQzNC0zLjE0NCwxLjI4OSAgQzE5LjAzOCwyLjY0MiwxOC42NTMsNC43NSwxOC41NDMsNkg2LjVjLTAuNTUyLDAtMSwwLjQ0Ny0xLDFzMC40NDgsMSwxLDFoMi4wNDFsMS45MTUsNDYuMDIxQzEwLjQ5Myw1NS43NDMsMTEuNTY1LDU5LDE1LjM2NCw1OSAgaDI4LjI3MmMzLjc5OSwwLDQuODcxLTMuMjU3LDQuOTA3LTQuOTU4TDUwLjQ1OSw4SDUyLjVjMC41NTIsMCwxLTAuNDQ3LDEtMVM1My4wNTIsNiw1Mi41LDZ6IE0yMC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDEgIHMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMXMxLDAuNDQ3LDEsMVY1MHogTTMwLjUsNTBjMCwwLjU1My0wLjQ0OCwxLTEsMXMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMSAgczEsMC40NDcsMSwxVjUweiBNNDAuNSw1MGMwLDAuNTUzLTAuNDQ4LDEtMSwxcy0xLTAuNDQ3LTEtMVYxN2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxVjUweiBNMjEuNzkyLDIuNjgxICBDMjIuMjQsMi4yMjMsMjIuNzk5LDIsMjMuNSwyaDkuOTk5YzAuNzAxLDAsMS4yNiwwLjIyMywxLjcwOCwwLjY4MWMwLjgwNSwwLjgyMywxLjEyOCwyLjI3MSwxLjI0LDMuMzE5SDIwLjU1MyAgQzIwLjY2NSw0Ljk1MiwyMC45ODgsMy41MDQsMjEuNzkyLDIuNjgxeiIgZmlsbD0iIzk5OTk5OSIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
351 | }
352 | }
353 | }
354 |
355 | &.close{
356 | &:before{
357 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTJweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0Ij4NCiAgPGc+DQogICAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI4Ljk0MSwzMS43ODZMMC42MTMsNjAuMTE0Yy0wLjc4NywwLjc4Ny0wLjc4NywyLjA2MiwwLDIuODQ5YzAuMzkzLDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OSAgIGMwLjUxNiwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTlsMjguNTQxLTI4LjU0MWwyOC41NDEsMjguNTQxYzAuMzk0LDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OWMwLjUxNSwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTkgICBjMC43ODctMC43ODcsMC43ODctMi4wNjIsMC0yLjg0OUwzNS4wNjQsMzEuNzg2TDYzLjQxLDMuNDM4YzAuNzg3LTAuNzg3LDAuNzg3LTIuMDYyLDAtMi44NDljLTAuNzg3LTAuNzg2LTIuMDYyLTAuNzg2LTIuODQ4LDAgICBMMzIuMDAzLDI5LjE1TDMuNDQxLDAuNTljLTAuNzg3LTAuNzg2LTIuMDYxLTAuNzg2LTIuODQ4LDBjLTAuNzg3LDAuNzg3LTAuNzg3LDIuMDYyLDAsMi44NDlMMjguOTQxLDMxLjc4NnoiLz4NCiAgPC9nPg0KPC9zdmc+DQo=');
358 | }
359 |
360 | &.dark{
361 | &:before{
362 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik0yMzEuNTI4LDI1NC4yODhMNC45MDQsNDgwLjkxMmMtNi4yOTYsNi4yOTYtNi4yOTYsMTYuNDk2LDAsMjIuNzkyYzMuMTQ0LDMuMTUyLDcuMjcyLDQuNzIsMTEuMzkyLDQuNzINCgkJYzQuMTI4LDAsOC4yNDgtMS41NjcsMTEuMzkyLTQuNzJsMjI4LjMyOC0yMjguMzI4bDIyOC4zMjgsMjI4LjMyOGMzLjE1MiwzLjE1Miw3LjI3Miw0LjcyLDExLjM5Myw0LjcyDQoJCWM0LjExOSwwLDguMjQ4LTEuNTY3LDExLjM5Mi00LjcyYzYuMjk2LTYuMjk2LDYuMjk2LTE2LjQ5NiwwLTIyLjc5MkwyODAuNTEyLDI1NC4yODhMNTA3LjI4LDI3LjUwNA0KCQljNi4yOTYtNi4yOTYsNi4yOTYtMTYuNDk2LDAtMjIuNzkyYy02LjI5Ni02LjI4OC0xNi40OTYtNi4yODgtMjIuNzg0LDBMMjU2LjAyNCwyMzMuMkwyNy41MjgsNC43Mg0KCQljLTYuMjk2LTYuMjg4LTE2LjQ4OC02LjI4OC0yMi43ODQsMGMtNi4yOTYsNi4yOTYtNi4yOTYsMTYuNDk2LDAsMjIuNzkyTDIzMS41MjgsMjU0LjI4OHoiLz4NCjwvZz4NCjwvc3ZnPg0K');
363 | }
364 | }
365 | }
366 |
367 | &.ext-url{
368 | &:before{
369 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTkxLjYgNTkxLjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU5MS42IDU5MS42OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNNTgxLjQsMjA0Yy01LjcxMiwwLTEwLjIsNC40ODgtMTAuMiwxMC4ydjMyNi40YzAsMTYuOTMyLTEzLjY2OCwzMC42LTMwLjYsMzAuNkg1MWMtMTYuOTMyLDAtMzAuNi0xMy42NjgtMzAuNi0zMC42VjUxICAgIGMwLTE2LjkzMiwxMy42NjgtMzAuNiwzMC42LTMwLjZoMzI2LjRjNS43MTIsMCwxMC4yLTQuNDg4LDEwLjItMTAuMlMzODMuMTEyLDAsMzc3LjQsMEg1MUMyMi44NDgsMCwwLDIyLjg0OCwwLDUxdjQ4OS42ICAgIGMwLDI4LjE1MiwyMi44NDgsNTEsNTEsNTFoNDg5LjZjMjguMTUyLDAsNTEtMjIuODQ4LDUxLTUxVjIxNC4yQzU5MS42LDIwOC42OTIsNTg2LjkwOCwyMDQsNTgxLjQsMjA0eiIgZmlsbD0iI0ZGRkZGRiIvPg0KCQk8cGF0aCBkPSJNNTkxLjM5Niw4LjE2YzAtMC4yMDQtMC4yMDQtMC42MTItMC4yMDQtMC44MTZjMC0wLjQwOC0wLjIwNC0wLjYxMi0wLjQwOC0xLjAyYy0wLjIwNC0wLjQwOC0wLjQwOC0wLjYxMi0wLjYxMi0xLjAyICAgIGMtMC4yMDQtMC4yMDQtMC4yMDQtMC42MTItMC40MDgtMC44MTZjLTAuODE2LTEuMDItMS42MzItMi4wNC0yLjg1Ni0yLjg1NmMtMC4yMDQtMC4yMDQtMC42MTItMC4yMDQtMC44MTYtMC40MDggICAgYy0wLjQwOC0wLjIwNC0wLjYxMi0wLjQwOC0xLjAyLTAuNjEyYy0wLjQwOC0wLjIwNC0wLjYxMi0wLjIwNC0xLjAyLTAuNDA4Yy0wLjIwNCwwLTAuNjEyLTAuMjA0LTAuODE2LTAuMjA0ICAgIGMtMC42MTIsMC4yMDQtMS4yMjQsMC0xLjgzNiwwbDAsMEg0MzguNmMtNS43MTIsMC0xMC4yLDQuNDg4LTEwLjIsMTAuMnM0LjQ4OCwxMC4yLDEwLjIsMTAuMmgxMTguMTE2bC0zNzAuMjYsMzcwLjI2ICAgIGMtNC4wOCw0LjA4LTQuMDgsMTAuNDA0LDAsMTQuNDg0YzIuMDQsMi4wNCw0LjY5MiwzLjA2LDcuMTQsMy4wNmMyLjQ0OCwwLDUuMzA0LTEuMDIsNy4xNC0zLjA2TDU3MS4yLDM0Ljg4NFYxNTMgICAgYzAsNS43MTIsNC40ODgsMTAuMiwxMC4yLDEwLjJzMTAuMi00LjQ4OCwxMC4yLTEwLjJWMTAuMkM1OTEuNiw5LjU4OCw1OTEuMzk2LDguOTc2LDU5MS4zOTYsOC4xNnoiIGZpbGw9IiNGRkZGRkYiLz4NCgkJPHBhdGggZD0iTTUxLDQ1LjljLTIuODU2LDAtNS4xLDIuMjQ0LTUuMSw1LjF2MTQyLjhjMCwyLjg1NiwyLjI0NCw1LjEsNS4xLDUuMXM1LjEtMi4yNDQsNS4xLTUuMVY1Ni4xaDEzNy43ICAgIGMyLjg1NiwwLDUuMS0yLjI0NCw1LjEtNS4xcy0yLjI0NC01LjEtNS4xLTUuMUg1MXoiIGZpbGw9IiNGRkZGRkYiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==');
370 | }
371 |
372 | &.dark{
373 | &:before{
374 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik01MDMuMTczLDE3Ni41NTJjLTQuOTQ0LDAtOC44MjgsMy44ODQtOC44MjgsOC44Mjh2MjgyLjQ4M2MwLDE0LjY1My0xMS44MjksMjYuNDgyLTI2LjQ4MiwyNi40ODJINDQuMTM4DQoJCQljLTE0LjY1MywwLTI2LjQ4Mi0xMS44MjktMjYuNDgyLTI2LjQ4MlY0NC4xMzhjMC0xNC42NTMsMTEuODI5LTI2LjQ4MiwyNi40ODItMjYuNDgyaDI4Mi40ODNjNC45NDMsMCw4LjgyNy0zLjg4NCw4LjgyNy04LjgyOA0KCQkJUzMzMS41NjQsMCwzMjYuNjIxLDBINDQuMTM4QzE5Ljc3NCwwLDAsMTkuNzc0LDAsNDQuMTM4djQyMy43MjVDMCw0OTIuMjI3LDE5Ljc3NCw1MTIsNDQuMTM4LDUxMmg0MjMuNzI1DQoJCQlDNDkyLjIyNyw1MTIsNTEyLDQ5Mi4yMjcsNTEyLDQ2Ny44NjJWMTg1LjM3OUM1MTIsMTgwLjYxMiw1MDcuOTM5LDE3Ni41NTIsNTAzLjE3MywxNzYuNTUyeiIvPg0KCQk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNNTExLjgyMyw3LjA2MmMwLTAuMTc2LTAuMTc3LTAuNTMtMC4xNzctMC43MDZjMC0wLjM1My0wLjE3Ni0wLjUzLTAuMzUzLTAuODgzcy0wLjM1NC0wLjUzLTAuNTMtMC44ODMNCgkJCWMtMC4xNzYtMC4xNzYtMC4xNzYtMC41My0wLjM1My0wLjcwNmMtMC43MDYtMC44ODMtMS40MTItMS43NjYtMi40NzItMi40NzJjLTAuMTc3LTAuMTc3LTAuNTI5LTAuMTc3LTAuNzA2LTAuMzUzDQoJCQljLTAuMzU0LTAuMTc3LTAuNTMtMC4zNTQtMC44ODMtMC41M2MtMC4zNTQtMC4xNzctMC41My0wLjE3Ny0wLjg4My0wLjM1M2MtMC4xNzcsMC0wLjUzLTAuMTc3LTAuNzA2LTAuMTc3DQoJCQljLTAuNTMsMC4xNzctMS4wNiwwLTEuNTksMGwwLDBIMzc5LjU4NmMtNC45NDMsMC04LjgyNywzLjg4NC04LjgyNyw4LjgyOHMzLjg4NCw4LjgyOCw4LjgyNyw4LjgyOEg0ODEuODFMMTYxLjM2OCwzMzguMDk3DQoJCQljLTMuNTMxLDMuNTMxLTMuNTMxLDkuMDA0LDAsMTIuNTM1YzEuNzY2LDEuNzY2LDQuMDYxLDIuNjQ4LDYuMTc5LDIuNjQ4YzIuMTE5LDAsNC41OS0wLjg4Myw2LjE4LTIuNjQ4TDQ5NC4zNDUsMzAuMTl2MTAyLjIyNA0KCQkJYzAsNC45NDMsMy44ODQsOC44MjcsOC44MjgsOC44MjdjNC45NDMsMCw4LjgyNy0zLjg4NCw4LjgyNy04LjgyN1Y4LjgyOEM1MTIsOC4yOTgsNTExLjgyMyw3Ljc2OCw1MTEuODIzLDcuMDYyeiIvPg0KCQk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNNDQuMTM4LDM5LjcyNGMtMi40NzIsMC00LjQxNCwxLjk0Mi00LjQxNCw0LjQxNHYxMjMuNTg2YzAsMi40NzIsMS45NDIsNC40MTQsNC40MTQsNC40MTQNCgkJCWMyLjQ3MiwwLDQuNDE0LTEuOTQyLDQuNDE0LTQuNDE0VjQ4LjU1MmgxMTkuMTcyYzIuNDcyLDAsNC40MTQtMS45NDIsNC40MTQtNC40MTRjMC0yLjQ3Mi0xLjk0Mi00LjQxNC00LjQxNC00LjQxNEg0NC4xMzh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
375 | }
376 | }
377 | }
378 | }
379 | }
380 | }
381 | }
--------------------------------------------------------------------------------
/src/projects/ngx-image-gallery/src/lib/components/ngx-image-gallery/ngx-image-gallery.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | OnInit,
4 | HostBinding,
5 | Input,
6 | HostListener,
7 | ElementRef,
8 | Renderer2,
9 | EventEmitter,
10 | Output,
11 | OnChanges,
12 | SimpleChanges,
13 | ViewChild,
14 | ChangeDetectorRef
15 | } from '@angular/core';
16 |
17 | import {assign, debounce} from 'lodash';
18 |
19 | import {GALLERY_CONF, GALLERY_IMAGE} from '../../ngx-image-gallery.conf';
20 | import { DomSanitizer } from '@angular/platform-browser';
21 |
22 | // key codes to react
23 | const KEY_CODES = {
24 | 37: 'LEFT',
25 | 39: 'RIGHT',
26 | 27: 'ESC'
27 | };
28 |
29 | // default gallery configuration
30 | const DEFAULT_CONF: GALLERY_CONF = {
31 | imageBorderRadius: '3px',
32 | imageOffset: '20px',
33 | imagePointer: false,
34 | showDeleteControl: false,
35 | showCloseControl: true,
36 | showExtUrlControl: true,
37 | showImageTitle: true,
38 | showThumbnails: true,
39 | closeOnEsc: true,
40 | reactToKeyboard: true,
41 | reactToMouseWheel: true,
42 | reactToRightClick: false,
43 | thumbnailSize: 30,
44 | backdropColor: 'rgba(13,13,14,0.85)',
45 | inline: false,
46 | showArrows: true
47 | };
48 |
49 | @Component({
50 | selector: 'ngx-image-gallery',
51 | templateUrl: './ngx-image-gallery.component.html',
52 | styleUrls: ['./ngx-image-gallery.component.scss']
53 | })
54 | export class NgxImageGalleryComponent implements OnInit, OnChanges {
55 |
56 | // gallery opened memory
57 | @HostBinding('class.active') opened: boolean = false;
58 |
59 | // gallery configuration
60 | @Input() conf: GALLERY_CONF = {};
61 |
62 | // gallery images
63 | @Input() images: GALLERY_IMAGE[] = [];
64 |
65 | // event emmiters
66 | @Output() onOpen = new EventEmitter();
67 | @Output() onClose = new EventEmitter();
68 | @Output() onDelete = new EventEmitter();
69 | @Output() onImageChange = new EventEmitter();
70 | @Output() onImageClicked = new EventEmitter();
71 | @Output() onError = new EventEmitter();
72 |
73 | // thumbnails container
74 | @ViewChild('thumbnails') thumbnailsElem: ElementRef;
75 |
76 | /***************************************************/
77 |
78 | // loading animation memory
79 | loading: boolean = false;
80 |
81 | // current active image index
82 | activeImageIndex: number = null;
83 |
84 | // thumbnail margin and scroll position
85 | thumbnailMargin: string = '0px 8px';
86 | thumbnailsScrollerLeftMargin: string = '0px';
87 |
88 | // active image
89 | get activeImage(): GALLERY_IMAGE {
90 | return this.images[this.activeImageIndex];
91 | }
92 |
93 | // if gallery is on : first image
94 | get onFirstImage(): boolean {
95 | return this.activeImageIndex == 0;
96 | }
97 |
98 | // if gallery is on : last image
99 | get onLastImage(): boolean {
100 | return this.activeImageIndex == (this.images.length - 1);
101 | }
102 |
103 | // get thumbnails viewport rendering parameters
104 | get thumbnailsRenderParams(): { thumbnailsInView: number, newThumbnailMargin: number, newThumbnailSize: number, thumbnailsScrollerLeftMargin: any } {
105 | let thumbnailsContainerWidth = this.thumbnailsElem.nativeElement.offsetWidth;
106 |
107 | let thumbnailMargin = 16;
108 | let thumbnailSize = thumbnailMargin + this.conf.thumbnailSize;
109 | let thumbnailsInView = Math.floor(thumbnailsContainerWidth / thumbnailSize);
110 | let extraSpaceInThumbnailsContainer = thumbnailsContainerWidth - (thumbnailsInView * thumbnailSize);
111 | let extraMargin = extraSpaceInThumbnailsContainer / thumbnailsInView;
112 |
113 | let newThumbnailMargin = thumbnailMargin + extraMargin;
114 | let newThumbnailSize = newThumbnailMargin + this.conf.thumbnailSize;
115 |
116 | let relativePositionOfActiveImageThumbnailToScroller = thumbnailsInView - (thumbnailsInView - this.activeImageIndex);
117 | let thumbnailsScrollerLeftMargin: any;
118 |
119 | if (relativePositionOfActiveImageThumbnailToScroller > thumbnailsInView - 2) {
120 | var outThumbnails = ((this.activeImageIndex + 1) - thumbnailsInView) + 1;
121 |
122 | if (this.activeImageIndex != (this.images.length - 1)) {
123 | thumbnailsScrollerLeftMargin = '-' + (newThumbnailSize * outThumbnails) + 'px';
124 | }
125 | else {
126 | thumbnailsScrollerLeftMargin = '-' + (newThumbnailSize * (outThumbnails - 1)) + 'px';
127 | }
128 | } else {
129 | thumbnailsScrollerLeftMargin = '0px';
130 | }
131 |
132 | return {
133 | thumbnailsInView,
134 | newThumbnailMargin,
135 | newThumbnailSize,
136 | thumbnailsScrollerLeftMargin
137 | };
138 | }
139 |
140 | // set gallery configuration
141 | private setGalleryConf(conf: GALLERY_CONF) {
142 | this.conf = assign(DEFAULT_CONF, conf);
143 | }
144 |
145 | // load image and return promise
146 | private loadImage(index: number): Promise
88 |
89 |
90 |