/*!
* modified Simple lightbox effect in pure JS
* @see {@link https://github.com/squeral/lightbox}
* @see {@link https://github.com/squeral/lightbox/blob/master/lightbox.js}
* @params {Object} elem Node element
* @params {Object} [rate] debounce rate, default 500ms
* new IframeLightbox(elem)
* passes jshint
*/
(function (root, document) {
"use strict";
var docBody = document.body || "";
var appendChild = "appendChild";
var classList = "classList";
var createElement = "createElement";
var dataset = "dataset";
var getAttribute = "getAttribute";
var getElementById = "getElementById";
var getElementsByClassName = "getElementsByClassName";
var _addEventListener = "addEventListener";
var containerClass = "iframe-lightbox";
var iframeLightboxOpenClass = "iframe-lightbox--open";
var iframeLightboxLinkIsBindedClass = "iframe-lightbox-link--is-binded";
var isLoadedClass = "is-loaded";
var isOpenedClass = "is-opened";
var isShowingClass = "is-showing";
var IframeLightbox = function (elem, settings) {
var options = settings || {};
this.trigger = elem;
this.el = document[getElementsByClassName](containerClass)[0] || "";
this.body = this.el ? this.el[getElementsByClassName]("body")[0] : "";
this.content = this.el ? this.el[getElementsByClassName]("content")[0] : "";
this.src = elem[dataset].src || "";
this.href = elem[getAttribute]("href") || "";
this.dataPaddingBottom = elem[dataset].paddingBottom || "";
this.dataScrolling = elem[dataset].scrolling || "";
this.rate = options.rate || 500;
this.scrolling = options.scrolling;
/*!
* Event handlers
*/
this.onOpened = options.onOpened;
this.onIframeLoaded = options.onIframeLoaded;
this.onLoaded = options.onLoaded;
this.onCreated = options.onCreated;
this.onClosed = options.onClosed;
this.init();
};
IframeLightbox.prototype.init = function () {
var _this = this;
if (!this.el) {
this.create();
}
var debounce = function (func, wait) {
var timeout,
args,
context,
timestamp;
return function () {
context = this;
args = [].slice.call(arguments, 0);
timestamp = new Date();
var later = function () {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
func.apply(context, args);
}
};
if (!timeout) {
timeout = setTimeout(later, wait);
}
};
};
var logic = function () {
_this.open();
};
if (!this.trigger[classList].contains(iframeLightboxLinkIsBindedClass)) {
this.trigger[classList].add(iframeLightboxLinkIsBindedClass);
this.trigger[_addEventListener]("click", function (e) {
e.stopPropagation();
e.preventDefault();
debounce(logic, this.rate).call();
});
}
};
IframeLightbox.prototype.create = function () {
var _this = this,
bd = document[createElement]("div");
this.el = document[createElement]("div");
this.content = document[createElement]("div");
this.body = document[createElement]("div");
this.el[classList].add(containerClass);
bd[classList].add("backdrop");
this.content[classList].add("content");
this.body[classList].add("body");
this.el[appendChild](bd);
this.content[appendChild](this.body);
this.contentHolder = document[createElement]("div");
this.contentHolder[classList].add("content-holder");
this.contentHolder[appendChild](this.content);
this.el[appendChild](this.contentHolder);
this.btnClose = document[createElement]("a");
this.btnClose[classList].add("btn-close");
/* jshint -W107 */
this.btnClose.setAttribute("href", "javascript:void(0);");
/* jshint +W107 */
this.el[appendChild](this.btnClose);
docBody[appendChild](this.el);
bd[_addEventListener]("click", function () {
_this.close();
});
this.btnClose[_addEventListener]("click", function () {
_this.close();
});
root[_addEventListener]("keyup", function (ev) {
if (27 === (ev.which || ev.keyCode)) {
_this.close();
}
});
var clearBody = function () {
if (_this.isOpen()) {
return;
}
_this.el[classList].remove(isShowingClass);
_this.body.innerHTML = "";
};
this.el[_addEventListener]("transitionend", clearBody, false);
this.el[_addEventListener]("webkitTransitionEnd", clearBody, false);
this.el[_addEventListener]("mozTransitionEnd", clearBody, false);
this.el[_addEventListener]("msTransitionEnd", clearBody, false);
this.callCallback(this.onCreated, this);
};
IframeLightbox.prototype.loadIframe = function () {
var _this = this;
this.iframeId = containerClass + Date.now();
this.iframeSrc = this.src || this.href || "";
/*!
* @see {@link https://stackoverflow.com/questions/18648203/how-remove-horizontal-scroll-bar-for-iframe-on-google-chrome}
*/
var iframeHTML = [];
iframeHTML.push('<iframe src="' + this.iframeSrc + '" name="' + this.iframeId + '" id="' + this.iframeId + '" onload="this.style.opacity=1;" style="opacity:0;border:none;" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" height="166" frameborder="no" allow="local-fonts; clipboard-read; clipboard-write"></iframe>');
/*!
* @see {@link https://epic-spinners.epicmax.co/}
*/
/*iframeHTML.push('<div class="spring-spinner"><div class="spring-spinner-part top"><div class="spring-spinner-rotator"></div></div><div class="spring-spinner-part bottom"><div class="spring-spinner-rotator"></div></div></div>');*/
iframeHTML.push('<div class="half-circle-spinner"><div class="circle circle-1"></div><div class="circle circle-2"></div></div>');
this.body.innerHTML = iframeHTML.join("");
(function (iframeId, body) {
var iframe = document[getElementById](iframeId);
iframe.onload = function () {
/* console.log("loaded iframe:", this.iframeSrc); */
this.style.opacity = 1;
body[classList].add(isLoadedClass);
if (_this.scrolling || _this.dataScrolling) {
iframe.removeAttribute("scrolling");
iframe.style.overflow = "scroll";
} else {
iframe.setAttribute("scrolling", "no");
iframe.style.overflow = "hidden";
}
_this.callCallback(_this.onIframeLoaded, _this);
_this.callCallback(_this.onLoaded, _this);
};
})(this.iframeId, this.body);
};
IframeLightbox.prototype.open = function () {
this.loadIframe();
if (this.dataPaddingBottom) {
this.content.style.paddingBottom = this.dataPaddingBottom;
} else {
this.content.removeAttribute("style");
}
this.el[classList].add(isShowingClass);
this.el[classList].add(isOpenedClass);
docBody[classList].add(iframeLightboxOpenClass);
this.callCallback(this.onOpened, this);
};
IframeLightbox.prototype.close = function () {
this.el[classList].remove(isOpenedClass);
this.body[classList].remove(isLoadedClass);
docBody[classList].remove(iframeLightboxOpenClass);
this.callCallback(this.onClosed, this);
};
IframeLightbox.prototype.isOpen = function () {
return this.el[classList].contains(isOpenedClass);
};
IframeLightbox.prototype.callCallback = function (func, data) {
if (typeof func !== "function") {
return;
}
var caller = func.bind(this);
caller(data);
};
root.IframeLightbox = IframeLightbox;
})("undefined" !== typeof window ? window : this, document);
(function(root, document) {
"use strict";
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
el.lightbox = new IframeLightbox(el, {
onCreated: function() {
console.log(el);
},
onLoaded: function() {
/* hide your preloader */
var photokit = document.getElementById(el.lightbox.iframeId)
/*
photokit.contentWindow.postMessage({type: 'photokitsdk',name:'saveimagetype',savetype:'postMessage'},'*');
The image save mode "local" and "postMessage", the user clicks the save button or saves through the api:
In local mode, the image will be saved locally.
In postMessage mode, the image base64 data is passed to the parent window through possMessage.
*/
console.log(el)
console.log(el.getAttribute("dataimgsrc"))
toDataURL(el.getAttribute("dataimgsrc"),
function(dataUrl) {
photokit.contentWindow.postMessage({type: 'photokitsdk',name:'openimage',data:dataUrl,opentype:0},'*');
//Open main image opentype:0
});
window.addEventListener("message", function (event) {
// In postMessage mode, monitor the saved image data.
if(event.data.type=="photokitsdk" && event.data.name=="saveimage"){
document.getElementById('demo').setAttribute("src",event.data.imagedata);
document.getElementById('demo').setAttribute("alt",event.data.imagename);
document.getElementsByClassName("btn-close")[0].click();
}
}, false);
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
},
onError: function() {
/* hide your preloader */
},
onClosed: function() {
/* hide your preloader */
},
scrolling: false,
/* default: false */
rate: 500 /* default: 500 */
});
});
})("undefined" !== typeof window ? window : this, document);
!
