@crystalui/angular-lightbox
Version:
Angular library for viewing images in a pop-up window with touch screen support.
993 lines (963 loc) • 69.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs')) :
typeof define === 'function' && define.amd ? define('@crystalui/angular-lightbox', ['exports', '@angular/core', '@angular/common', 'rxjs'], factory) :
(global = global || self, factory((global.crystalui = global.crystalui || {}, global.crystalui['angular-lightbox'] = {}), global.ng.core, global.ng.common, global.rxjs));
}(this, (function (exports, core, common, rxjs) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __exportStar(m, exports) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var EventService = /** @class */ (function () {
function EventService() {
this.emitter = new rxjs.ReplaySubject(1);
}
EventService.prototype.emitChangeEvent = function (data) {
this.emitter.next(data);
};
EventService = __decorate([
core.Injectable()
], EventService);
return EventService;
}());
var Utils = /** @class */ (function () {
function Utils() {
}
Utils.mobileCheck = function () {
var check = false;
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
check = true; })(navigator.userAgent || navigator.vendor);
return check;
};
;
return Utils;
}());
var LightboxCommonComponent = /** @class */ (function () {
function LightboxCommonComponent(eventService) {
this.eventService = eventService;
this.currentImageIndex = 0;
this.indexCurrentSlide = 1;
this.containerStyles = {
transition: '',
transform: '',
width: '',
height: '',
opacity: ''
};
this.currImageLoadingState = 'not-loaded';
this.isMobile = Utils.mobileCheck();
}
Object.defineProperty(LightboxCommonComponent.prototype, "lightboxImage", {
get: function () {
return this._lightboxImage;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "lightboxImageElement", {
get: function () {
if (this.lightboxImage) {
return this.lightboxImage.nativeElement;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "lightboxImageNaturalHeight", {
get: function () {
if (this.lightboxImageElement) {
return this.lightboxImageElement.naturalHeight;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "lightboxImageNaturalWidth", {
get: function () {
if (this.lightboxImageElement) {
return this.lightboxImageElement.naturalWidth;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "index", {
get: function () {
return this.currentImageIndex;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "properties", {
get: function () {
return this.lightboxData.properties;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "images", {
get: function () {
return this.lightboxData.images || [this.lightboxData.image];
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "thumbnailImage", {
get: function () {
return this.images[this.currentImageIndex].nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "thumbnailImagePosition", {
get: function () {
return this.thumbnailImage.getBoundingClientRect();
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "virtualImageDimension", {
// Image size if it is larger than the window size
get: function () {
var height = this.lightboxImageNaturalHeight;
var width = height * this.imageAspectRatio;
var windowWidth = document.body.clientWidth;
var windowHeight = window.innerHeight;
if (this.isImageLargerWindow) {
if (height > windowHeight) {
height = windowHeight;
width = height * this.imageAspectRatio;
}
if (width > windowWidth) {
width = windowWidth;
height = width / this.imageAspectRatio;
}
}
else {
width = this.lightboxImageNaturalWidth;
height = this.lightboxImageNaturalHeight;
}
if (width === 0 || Number.parseInt(height) === 0) {
return { width: 200, height: 200 };
}
return { width: width, height: height };
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "containerInitialPosition", {
get: function () {
var scale = (this.showState === 'initial-thumbnail-image') ? 1 : this.containerScale;
var top = this.thumbnailImagePosition.top;
var left = this.thumbnailImagePosition.left;
return 'matrix(' + scale + ', 0, 0, ' + scale + ',' + left + ',' + top + ')';
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "containerFullscreenPosition", {
get: function () {
var left = (document.body.clientWidth - this.virtualImageDimension.width) / 2;
var top = (window.innerHeight - this.virtualImageDimension.height) / 2;
return 'translate3d(' + left + 'px, ' + top + 'px, 0)';
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "containerScale", {
get: function () {
return this.thumbnailImagePosition.width / this.virtualImageDimension.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "imageAspectRatio", {
get: function () {
return this.thumbnailImage.naturalWidth / this.thumbnailImage.naturalHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "isImageLargerWindow", {
get: function () {
var imageNaturalWidth = this.lightboxImageNaturalWidth;
var imageNaturalHeight = this.lightboxImageNaturalHeight;
var windowWidth = document.body.clientWidth;
var windowHeight = window.innerHeight;
return imageNaturalWidth > windowWidth || imageNaturalHeight > windowHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "isFirstImage", {
get: function () {
if (this.properties.loop) {
return false;
}
else {
return this.index === 0;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "isLastImage", {
get: function () {
if (this.properties.loop) {
return false;
}
else {
return this.index === this.latestImageIndex;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "latestImageIndex", {
get: function () {
return this.images.length - 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "backgroundColor", {
get: function () {
var opacity = this.properties.backgroundOpacity;
var color = this.properties.backgroundColor;
if (color === 'black') {
return 'rgba(0, 0, 0, ' + opacity + ')';
}
else {
return 'rgba(255, 255, 255, ' + opacity + ')';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "animationDuration", {
get: function () {
var animationDuration = this.properties.animationDuration;
if (typeof animationDuration === "string") {
return Number.parseInt(animationDuration);
}
else {
return animationDuration;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "animationMode", {
get: function () {
if (this.currImageLoadingState === 'error') {
return 'default';
}
return this.properties.animationMode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "animationTimingFunction", {
get: function () {
return this.properties.animationTimingFunction;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "closeButtonText", {
get: function () {
return this.properties.closeButtonText;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "counterSeparator", {
get: function () {
return this.properties.counterSeparator;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxCommonComponent.prototype, "counter", {
get: function () {
return this.currentImageIndex + 1 + this.counterSeparator + this.images.length;
},
enumerable: true,
configurable: true
});
LightboxCommonComponent.prototype.emitState = function (type, state) {
if (state === 'initial-virtual-image' ||
state === 'initial-styles') {
return;
}
if (state === 'initial-default' ||
state === 'initial-thumbnail-image') {
state = 'initial';
}
this.eventService.emitChangeEvent({
type: type + ':' + state
});
};
LightboxCommonComponent.prototype.setShowState = function (state) {
this.showState = state;
this.emitState('show-state', state);
};
LightboxCommonComponent.prototype.setClosingState = function (state) {
this.closingState = state;
this.emitState('closing-state', state);
};
LightboxCommonComponent.prototype.setAnimationDuration = function () {
this.hostStyleTransition = 'background-color ' + this.animationDuration + 'ms';
this.containerStyles.transition = 'all ' + this.animationDuration + 'ms ' + this.animationTimingFunction;
};
LightboxCommonComponent.prototype.setBackgroundColor = function () {
this.hostStyleBackgroundColor = this.backgroundColor;
};
LightboxCommonComponent.prototype.getContainerHeight = function () {
return this.thumbnailImagePosition.height / this.containerScale + 'px';
};
LightboxCommonComponent.prototype.showThumbnailImage = function () {
this.thumbnailImage.style.opacity = '';
};
LightboxCommonComponent.prototype.hideThumbnailImage = function () {
this.thumbnailImage.style.opacity = 0;
};
LightboxCommonComponent.prototype.updateThumbnailPosition = function () {
this.containerStyles.transform = this.containerInitialPosition;
};
LightboxCommonComponent.ctorParameters = function () { return [
{ type: EventService }
]; };
__decorate([
core.Input()
], LightboxCommonComponent.prototype, "lightboxData", void 0);
__decorate([
core.HostBinding('style.backgroundColor')
], LightboxCommonComponent.prototype, "hostStyleBackgroundColor", void 0);
__decorate([
core.HostBinding('style.transition')
], LightboxCommonComponent.prototype, "hostStyleTransition", void 0);
__decorate([
core.ViewChild('imageFirst', { static: true })
], LightboxCommonComponent.prototype, "_imageFirst", void 0);
__decorate([
core.ViewChild('imageSecond', { static: true })
], LightboxCommonComponent.prototype, "_imageSecond", void 0);
__decorate([
core.ViewChild('imageLast', { static: true })
], LightboxCommonComponent.prototype, "_imageLast", void 0);
__decorate([
core.ViewChild('lightboxImage', { static: true })
], LightboxCommonComponent.prototype, "_lightboxImage", void 0);
LightboxCommonComponent = __decorate([
core.Component({
selector: 'lightbox-common',
template: ''
})
], LightboxCommonComponent);
return LightboxCommonComponent;
}());
var LightboxComponent = /** @class */ (function (_super) {
__extends(LightboxComponent, _super);
function LightboxComponent(elementRef, ref, eventService) {
var _this = _super.call(this, eventService) || this;
_this.elementRef = elementRef;
_this.ref = ref;
_this.eventService = eventService;
_this.spinnerHeight = 30;
_this.minTimeout = 30;
_this.preloaderTimeout = 100;
_this.spinnerStyles = {
transform: ''
};
_this.configThumbnailPreloader = true;
_this.events = new core.EventEmitter();
_this.hostShown = false;
_this.hideControls = false;
return _this;
}
Object.defineProperty(LightboxComponent.prototype, "simpleMode", {
get: function () {
return this.properties.simpleMode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "hostLightTheme", {
get: function () {
return this.properties.backgroundColor === 'white';
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "currImagePath", {
get: function () {
var image = this.images[this.index];
var path;
if (!image) {
return false;
}
if (image.fullImage && image.fullImage.path) {
path = image.fullImage.path;
}
else if (image.thumbnailImage && image.thumbnailImage.path) {
path = image.thumbnailImage.path;
}
else if (image.path) {
path = image.path;
}
return path;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "prevImagePath", {
get: function () {
return this.images[this.prevIndex];
},
set: function (value) {
this.images[this.prevIndex] = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "isHiddenPrevArrow", {
get: function () {
return this.isFirstImage && !this.properties.loop || this.isZoomIn;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "isHiddenNextArrow", {
get: function () {
return this.isLastImage && !this.properties.loop || this.isZoomIn;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "isPreloader", {
get: function () {
return this.animationMode === 'zoom-preloader' &&
this.showState != 'animation-end' &&
this.currImageLoadingState === 'loading';
},
enumerable: true,
configurable: true
});
Object.defineProperty(LightboxComponent.prototype, "imageOrientation", {
get: function () {
if (this.thumbnailImage.naturalWidth > this.thumbnailImage.naturalHeight) {
return 'horizontal';
}
else {
return 'vertical';
}
},
enumerable: true,
configurable: true
});
LightboxComponent.prototype.scrolling = function () {
if (this.showState === 'initial-thumbnail-image' ||
this.showState === 'initial-virtual-image' ||
this.closingState === 'animation') {
this.updateThumbnailPosition();
}
};
LightboxComponent.prototype.onKeyDown = function (event) {
switch (event.key) {
case 'ArrowLeft':
this.prev();
break;
case 'ArrowRight':
this.next();
break;
case 'Escape':
this.closeLightbox();
break;
}
};
LightboxComponent.prototype.onMouseEnter = function (event) {
this.hideControls = false;
};
LightboxComponent.prototype.transitionEnd = function (event) {
if (event.propertyName === "transform" && this.hostAnimation) {
this.hostAnimation = false;
}
};
LightboxComponent.prototype.ngOnInit = function () {
this.currentImageIndex = this.properties.index;
this.initialLightbox();
};
LightboxComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () {
if (_this.currImageLoadingState === 'not-loaded') {
_this.currImageLoadingState = 'loading';
}
}, this.preloaderTimeout);
// Mode: default
if (this.animationMode === 'default') {
setTimeout(function () {
_this.showLightboxAnimation();
}, this.minTimeout);
}
};
LightboxComponent.prototype.onImageLoaded = function () {
var _this = this;
// When opening lightbox
if (this.animationMode === 'zoom-preloader' &&
this.showState === 'initial-thumbnail-image') {
this.initialLightboxVirtualImage();
setTimeout(function () {
_this.currImageLoadingState = 'uploaded';
_this.showLightboxAnimation();
if (_this.properties.hideThumbnail) {
_this.hideThumbnailImage();
}
}, this.minTimeout);
}
// When opening next / previous image
if (this.showState === 'animation-end') {
this.currImageLoadingState = 'uploaded';
if (this.properties.hideThumbnail) {
this.hideThumbnailImage();
}
}
this.ref.detectChanges();
};
LightboxComponent.prototype.onImageError = function (event) {
var _this = this;
this.currImageLoadingState = 'error';
this.initialLightboxDefault();
setTimeout(function () {
_this.showLightboxAnimation();
}, this.minTimeout);
};
LightboxComponent.prototype.onContainerClick = function (event) {
if (event.target === this.lightboxContainerElem.nativeElement || this.simpleMode) {
this.closeLightbox();
}
};
LightboxComponent.prototype.initialLightbox = function () {
this.setMaxDimensions();
this.setAnimationDuration();
switch (this.animationMode) {
case 'zoom-preloader':
this.initialLightboxThumbnailImage();
break;
case 'default':
this.initialLightboxDefault();
break;
}
};
LightboxComponent.prototype.initialLightboxDefault = function () {
this.showState = 'initial-default';
this.containerStyles = {
transform: 'translate3d(0, 0, 0)',
height: '100%',
width: '100%',
opacity: '0'
};
// next step: AfterViewInit
};
LightboxComponent.prototype.initialLightboxVirtualImage = function () {
this.setShowState('initial-virtual-image');
this.containerStyles = {
transform: this.containerInitialPosition,
height: this.virtualImageDimension.height + 'px',
width: this.virtualImageDimension.width + 'px'
};
// next step: onImageLoaded() -> showLightboxAnimation()
};
LightboxComponent.prototype.initialLightboxThumbnailImage = function () {
this.setShowState('initial-thumbnail-image');
this.containerStyles = {
transform: this.containerInitialPosition,
height: this.thumbnailImagePosition.height + 'px',
width: this.thumbnailImagePosition.width + 'px'
};
// next step: onImageLoaded()
};
LightboxComponent.prototype.showLightboxAnimation = function () {
this.hostAnimation = true;
this.setShowState('animation');
this.hostShown = true;
this.setBackgroundColor();
this.setAnimationDuration();
// Mode: zoom preloader
if (this.animationMode === 'zoom-preloader' &&
this.currImageLoadingState !== 'error') {
this.containerStyles.transform = this.containerFullscreenPosition;
}
// Mode: default
if (this.animationMode === 'default') {
this.containerStyles.opacity = '1';
}
// next step: handleLightboxTransitionEnd
};
LightboxComponent.prototype.showLightboxAnimationEnd = function () {
this.setShowState('animation-end');
this.containerStyles = {
transform: 'translate3d(0, 0, 0)',
height: '100%',
width: '100%',
};
};
LightboxComponent.prototype.closeLightbox = function () {
this.setClosingState('initial');
this.hostShown = false;
this.closeLightboxInitial();
};
LightboxComponent.prototype.closeLightboxInitial = function () {
var _this = this;
this.setClosingState('initial-styles');
// Mode: zoom preloader
if (this.animationMode === 'zoom-preloader') {
this.containerStyles = {
transform: this.containerFullscreenPosition,
height: this.virtualImageDimension.height + 'px',
width: this.virtualImageDimension.width + 'px',
};
}
// Mode: default
if (this.animationMode === 'default') {
this.containerStyles.opacity = '1';
}
setTimeout(function () {
_this.closeLightboxAnimation();
}, this.minTimeout);
};
LightboxComponent.prototype.closeLightboxAnimation = function () {
this.setClosingState('animation');
// Mode: zoom preloader
if (this.animationMode === 'zoom-preloader') {
this.hostAnimation = true;
this.containerStyles = {
transform: this.containerInitialPosition,
height: this.getContainerHeight(),
width: this.getContainerWidth(),
};
this.hostStyleBackgroundColor = '';
}
// Mode: default
if (this.animationMode === 'default') {
this.hostAnimation = true;
this.containerStyles.opacity = '0';
this.hostStyleBackgroundColor = '';
}
this.setAnimationDuration();
// next step: handleLightboxTransitionEnd
if (this.animationDuration === 0) { // in the future, change to a type conversion getter
this.closeLightboxAnimationEnd();
}
};
LightboxComponent.prototype.closeLightboxAnimationEnd = function () {
this.setClosingState('animation-end');
this.events.emit({ type: 'close' });
// Mode: zoom preloader
if (this.animationMode === 'zoom-preloader') {
this.showThumbnailImage();
}
};
/*
* Transition End
*/
LightboxComponent.prototype.handleLightboxTransitionEnd = function (event) {
if (this.showState === 'animation') {
this.showLightboxAnimationEnd();
}
// Last close step
if (this.closingState === 'animation') {
this.closeLightboxAnimationEnd();
}
};
LightboxComponent.prototype.next = function () {
var _this = this;
if (this.animationMode === 'zoom-preloader') {
this.showThumbnailImage();
}
if (this.isLastImage) {
if (this.properties.loop) {
this.currentImageIndex = 0;
}
else {
return;
}
}
else {
this.currentImageIndex++;
this.currImageLoadingState = 'loading';
}
setTimeout(function () {
if (_this.currImageLoadingState !== 'uploaded') {
_this.currImageLoadingState = 'loading';
}
}, this.preloaderTimeout);
};
LightboxComponent.prototype.prev = function () {
var _this = this;
if (this.animationMode === 'zoom-preloader') {
this.showThumbnailImage();
}
if (this.isFirstImage) {
if (this.properties.loop) {
this.currentImageIndex = this.latestImageIndex;
}
else {
return;
}
}
else {
this.currentImageIndex--;
this.currImageLoadingState = 'loading';
}
setTimeout(function () {
if (_this.currImageLoadingState !== 'uploaded') {
_this.currImageLoadingState = 'loading';
}
}, this.preloaderTimeout);
};
LightboxComponent.prototype.setMaxDimensions = function () {
this.lightboxImage.nativeElement.style.maxHeight = 'calc(' + this.properties.imageMaxHeight + ')';
this.lightboxImage.nativeElement.style.maxWidth = this.properties.imageMaxWidth;
};
LightboxComponent.prototype.handlePinchZoomEvents = function (event) {
if (event.type === "zoom-in") {
this.isZoomIn = true;
}
if (event.type === "zoom-out") {
this.isZoomIn = false;
}
};
LightboxComponent.prototype.getContainerWidth = function () {
return this.thumbnailImagePosition.width / this.containerScale + 'px';
};
LightboxComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.ChangeDetectorRef },
{ type: EventService }
]; };
__decorate([
core.HostBinding('class.lightbox-shown')
], LightboxComponent.prototype, "hostShown", void 0);
__decorate([
core.HostBinding('class.lightbox-hide-controls')
], LightboxComponent.prototype, "hideControls", void 0);
__decorate([
core.HostBinding('class.lightbox-animation')
], LightboxComponent.prototype, "hostAnimation", void 0);
__decorate([
core.HostBinding('class.lightbox-simple-mode')
], LightboxComponent.prototype, "simpleMode", null);
__decorate([
core.HostBinding('class.lightbox-light')
], LightboxComponent.prototype, "hostLightTheme", null);
__decorate([
core.HostBinding('style.backgroundColor')
], LightboxComponent.prototype, "hostStyleBackgroundColor", void 0);
__decorate([
core.ViewChild('prevImageElem', { static: true })
], LightboxComponent.prototype, "prevImageElem", void 0);
__decorate([
core.ViewChild('lightboxContainer', { static: true })
], LightboxComponent.prototype, "lightboxContainerElem", void 0);
__decorate([
core.HostListener('window:scroll')
], LightboxComponent.prototype, "scrolling", null);
__decorate([
core.HostListener('window:keydown', ['$event'])
], LightboxComponent.prototype, "onKeyDown", null);
__decorate([
core.HostListener("mouseenter", ['$event'])
], LightboxComponent.prototype, "onMouseEnter", null);
__decorate([
core.HostListener('transitionend', ['$event'])
], LightboxComponent.prototype, "transitionEnd", null);
LightboxComponent = __decorate([
core.Component({
selector: 'crystal-lightbox',
template: "<div class=\"lightbox-counter\" *ngIf=\"properties.counter && images.length > 1\">{{counter}}</div>\n<div class=\"lightbox-close\" *ngIf=\"!simpleMode\" (click)=\"closeLightbox()\">{{closeButtonText}}</div>\n<div class=\"lightbox-spinner\" \n\t*ngIf=\"currImageLoadingState === 'loading' && showState === 'animation-end'\"></div>\n<div class=\"lightbox-container\" \n\t#lightboxContainer\n\t[ngStyle]=\"containerStyles\"\n\t(transitionend)=\"handleLightboxTransitionEnd($event)\"\n\t(click)=\"onContainerClick($event)\">\n\n\t<div class=\"lightbox-preloader\" *ngIf=\"isPreloader\">\n\t\t<div class=\"lightbox-spinner\"></div>\n\t</div>\n\n\t<div class=\"lightbox-error\" *ngIf=\"currImageLoadingState === 'error' && !closingState\">Failed to load image</div>\n\n\t<img class=\"lightbox-curr-image\" \n\t\t#lightboxImage\n\t\t[src]=\"currImagePath\" \n\t\t[class.lightbox-show]=\"currImageLoadingState === 'uploaded'\" \n\t\t(load)=\"onImageLoaded()\"\n\t\t(error)=\"onImageError($event)\" />\n</div>\n\n<div class=\"lightbox-prev\" [hidden]=\"isHiddenPrevArrow\" (click)=\"prev()\"></div>\n<div class=\"lightbox-next\" [hidden]=\"isHiddenNextArrow\" (click)=\"next()\"></div>",
styles: [".lightbox-spinner,.lightbox-spinner:after,.lightbox-spinner:before{border-radius:50%;width:10px;height:10px;-webkit-animation:1.5s ease-in-out infinite lightbox-load;animation:1.5s ease-in-out infinite lightbox-load}.lightbox-spinner{color:#fff;font-size:10px;margin:0 auto 20px;position:relative;text-indent:-9999em;transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.lightbox-spinner:after,.lightbox-spinner:before{content:\"\";position:absolute;top:0}.lightbox-spinner:before{left:-32px;-webkit-animation-delay:-.32s;animation-delay:-.32s}.lightbox-spinner:after{left:32px}@-webkit-keyframes lightbox-load{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes lightbox-load{0%,100%,80%{box-shadow:0 10px 0 -1.3em}40%{box-shadow:0 10px 0 0}}:host.lightbox-shown{opacity:1}:host.lightbox-shown .lightbox-close,:host.lightbox-shown .lightbox-next,:host.lightbox-shown .lightbox-prev{opacity:.5;transition-delay:.1s}:host.lightbox-shown .lightbox-close:hover,:host.lightbox-shown .lightbox-next:hover,:host.lightbox-shown .lightbox-prev:hover{opacity:1;transition-delay:0}:host.lightbox-shown .lightbox-counter{opacity:1}:host.lightbox-hide-controls .lightbox-close,:host.lightbox-hide-controls .lightbox-next,:host.lightbox-hide-controls .lightbox-prev{opacity:0}:host.lightbox-simple-mode .lightbox-container{cursor:zoom-out}:host:not(.lightbox-animation) .lightbox-container{display:flex;align-items:center;justify-content:center;top:0;left:0;height:100%}:host.lightbox-light{color:#000;text-shadow:none}:host{position:fixed;top:0;left:0;width:100%;height:100%;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.65);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10000}:host img{opacity:1;max-width:100%;max-height:100%}:host img.lightbox-curr-image.lightbox-show{opacity:1}:host img.lightbox-curr-image{opacity:0;z-index:10}:host .lightbox-container.lightbox-hide{display:none}:host .lightbox-container{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform-origin:top left}:host .lightbox-preloader{background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute}:host .lightbox-spinner{position:absolute;top:51%;left:50%;margin-top:-15px;margin-left:-5px}:host .lightbox-preloader .lightbox-spinner{margin-top:-9px;margin-left:-3px}:host .lightbox-preloader .lightbox-spinner,:host .lightbox-preloader .lightbox-spinner:after,:host .lightbox-preloader .lightbox-spinner:before{width:6px;height:6px}:host .lightbox-preloader .lightbox-spinner:before{left:-21px}:host .lightbox-preloader .lightbox-spinner:after{left:21px}:host .lightbox-counter{text-align:left;position:absolute;left:22px;top:13px;font-size:14px;z-index:30}:host .lightbox-description{text-align:center;max-width:calc(100% - 200px);margin:0 auto;font-size:14px;line-height:43px;position:relative;z-index:50}:host .lightbox-error{color:rgba(255,255,255,.75);font-size:19px}:host .lightbox-close{position:absolute;top:0;right:0;padding:13px 22px;font-size:13px;text-transform:uppercase;cursor:pointer;opacity:.5;z-index:30;transition:opacity .1s ease-in-out}:host .lightbox-next,:host .lightbox-prev{width:100px;height:100%;position:absolute;top:0;cursor:pointer;opacity:.5;z-index:20;transition:opacity .1s ease-in-out;-webkit-tap-h