Untitled diff
Created Diff never expires
0 removals
| Lines | |
|---|---|
| Total | |
| Removed | |
| Characters | |
| Total | |
| Removed | |
13 additions
| Lines | |
|---|---|
| Total | |
| Added | |
| Characters | |
| Total | |
| Added | |
/*
/*
* WA MediaBox
* WA MediaBox
*
*
* @author WA Studio <www.webarts.name>
* @author WA Studio <www.webarts.name>
* @author Jiri Hybek <jiri@hybek.cz>
* @author Jiri Hybek <jiri@hybek.cz>
* @license MIT
* @license MIT
*/
*/
(function(){
(function(){
/*
/*
* Preloader constructor
* Preloader constructor
*/
*/
var Preloader = function(){
var Preloader = function(){
this.el = document.createElement("div");
this.el = document.createElement("div");
this.el.classList.add("wa-mediabox-preloader");
this.el.classList.add("wa-mediabox-preloader");
this.wrap = document.createElement("div");
this.wrap = document.createElement("div");
this.wrap.classList.add("wa-mediabox-preloader-wrap");
this.wrap.classList.add("wa-mediabox-preloader-wrap");
this.spinner = document.createElement("div");
this.spinner = document.createElement("div");
this.spinner.classList.add("wa-mediabox-preloader-spinner");
this.spinner.classList.add("wa-mediabox-preloader-spinner");
this.patch = document.createElement("div");
this.patch = document.createElement("div");
this.patch.classList.add("wa-mediabox-preloader-patch");
this.patch.classList.add("wa-mediabox-preloader-patch");
this.clipperLeft = document.createElement("div");
this.clipperLeft = document.createElement("div");
this.clipperLeft.classList.add("wa-mediabox-preloader-clipper");
this.clipperLeft.classList.add("wa-mediabox-preloader-clipper");
this.clipperLeft.classList.add("left");
this.clipperLeft.classList.add("left");
this.clipperRight = document.createElement("div");
this.clipperRight = document.createElement("div");
this.clipperRight.classList.add("wa-mediabox-preloader-clipper");
this.clipperRight.classList.add("wa-mediabox-preloader-clipper");
this.clipperRight.classList.add("right");
this.clipperRight.classList.add("right");
var circle = document.createElement("div");
var circle = document.createElement("div");
circle.classList.add("wa-mediabox-preloader-circle");
circle.classList.add("wa-mediabox-preloader-circle");
this.patch.appendChild(circle);
this.patch.appendChild(circle);
this.clipperLeft.appendChild(circle.cloneNode(true));
this.clipperLeft.appendChild(circle.cloneNode(true));
this.clipperRight.appendChild(circle.cloneNode(true));
this.clipperRight.appendChild(circle.cloneNode(true));
this.spinner.appendChild(this.clipperLeft);
this.spinner.appendChild(this.clipperLeft);
this.spinner.appendChild(this.patch);
this.spinner.appendChild(this.patch);
this.spinner.appendChild(this.clipperRight);
this.spinner.appendChild(this.clipperRight);
this.wrap.appendChild(this.spinner);
this.wrap.appendChild(this.spinner);
this.el.appendChild(this.wrap);
this.el.appendChild(this.wrap);
};
};
Preloader.prototype.show = function(){
Preloader.prototype.show = function(){
this.el.classList.remove("hidden");
this.el.classList.remove("hidden");
this.el.style.display = '';
this.el.style.display = '';
};
};
Preloader.prototype.hide = function(){
Preloader.prototype.hide = function(){
var self = this;
var self = this;
this.el.classList.add("hidden");
this.el.classList.add("hidden");
setTimeout(function(){
setTimeout(function(){
if(self.el.classList.contains("hidden"))
if(self.el.classList.contains("hidden"))
self.el.style.display = 'none';
self.el.style.display = 'none';
}, 350);
}, 350);
};
};
/*
/*
* Gallery constructor
* Gallery constructor
*/
*/
var WAMediaBox_Gallery = function(parent){
var WAMediaBox_Gallery = function(parent){
this.parent = parent;
this.parent = parent;
this.mediaList = [];
this.mediaList = [];
this.opened = false;
this.opened = false;
this.loaded = false;
this.loaded = false;
this.current = null;
this.current = null;
this.containerWidth = null;
this.containerWidth = null;
this.containerHeight = null;
this.containerHeight = null;
};
};
/*
/*
* Media adders
* Media adders
*/
*/
WAMediaBox_Gallery.prototype.addImage = function(src, title){
WAMediaBox_Gallery.prototype.addImage = function(src, title, customUrl){
this.mediaList.push({
this.mediaList.push({
type: "image",
type: "image",
src: src,
src: src,
title: title
title: title,
customUrl: customUrl
});
});
return this.mediaList.length - 1;
return this.mediaList.length - 1;
};
};
WAMediaBox_Gallery.prototype.addIframe = function(src, title, width, height){
WAMediaBox_Gallery.prototype.addIframe = function(src, title, customUrl, width, height){
this.mediaList.push({
this.mediaList.push({
type: "iframe",
type: "iframe",
src: src,
src: src,
title: title,
title: title,
customUrl: customUrl,
width: width,
width: width,
height: height
height: height
});
});
return this.mediaList.length - 1;
return this.mediaList.length - 1;
};
};
/*
/*
* Open gallery
* Open gallery
*/
*/
WAMediaBox_Gallery.prototype.open = function(index){
WAMediaBox_Gallery.prototype.open = function(index){
if(this.opened) return;
if(this.opened) return;
var self = this;
var self = this;
this.current = -1;
this.current = -1;
this.loaded = false;
this.loaded = false;
//Create overlay and content wrapper
//Create overlay and content wrapper
this.overlay = document.createElement("div");
this.overlay = document.createElement("div");
this.overlay.classList.add("wa-mediabox-overlay");
this.overlay.classList.add("wa-mediabox-overlay");
this.frame = document.createElement("div");
this.frame = document.createElement("div");
this.frame.classList.add("wa-mediabox-frame");
this.frame.classList.add("wa-mediabox-frame");
this.container = document.createElement("div");
this.container = document.createElement("div");
this.container.classList.add("wa-mediabox-container");
this.container.classList.add("wa-mediabox-container");
this.title = document.createElement("div");
this.title = document.createElement("div");
this.title.classList.add("wa-mediabox-title");
this.title.classList.add("wa-mediabox-title");
this.loading = new Preloader();
this.loading = new Preloader();
//Buttons
//Buttons
this.closeBtn = document.createElement("button");
this.closeBtn = document.createElement("button");
this.closeBtn.classList.add("wa-mediabox-close");
this.closeBtn.classList.add("wa-mediabox-close");
this.closeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>';
this.closeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>';
this.closeBtn.setAttribute("title", this.parent.lang.close);
this.closeBtn.setAttribute("title", this.parent.lang.close);
this.prevBtn = document.createElement("button");
this.prevBtn = document.createElement("button");
this.prevBtn.classList.add("wa-mediabox-prev");
this.prevBtn.classList.add("wa-mediabox-prev");
this.prevBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg>';
this.prevBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg>';
this.prevBtn.setAttribute("title", this.parent.lang.prev);
this.prevBtn.setAttribute("title", this.parent.lang.prev);
this.nextBtn = document.createElement("button");
this.nextBtn = document.createElement("button");
this.nextBtn.classList.add("wa-mediabox-next");
this.nextBtn.classList.add("wa-mediabox-next");
this.nextBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>';
this.nextBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>';
this.nextBtn.setAttribute("title", this.parent.lang.next);
this.nextBtn.setAttribute("title", this.parent.lang.next);
this.openBtn = document.createElement("button");
this.openBtn = document.createElement("button");
this.openBtn.classList.add("wa-mediabox-open");
this.openBtn.classList.add("wa-mediabox-open");
this.openBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>';
this.openBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>';
this.openBtn.setAttribute("title", this.parent.lang.openInNew);
this.openBtn.setAttribute("title", this.parent.lang.openInNew);
//Put together
//Put together
this.frame.appendChild(this.container);
this.frame.appendChild(this.container);
this.frame.appendChild(this.title);
this.frame.appendChild(this.title);
this.frame.appendChild(this.loading.el);
this.frame.appendChild(this.loading.el);
this.frame.appendChild(this.closeBtn);
this.frame.appendChild(this.closeBtn);
this.frame.appendChild(this.prevBtn);
this.frame.appendChild(this.prevBtn);
this.frame.appendChild(this.nextBtn);
this.frame.appendChild(this.nextBtn);
this.frame.appendChild(this.openBtn);
this.frame.appendChild(this.openBtn);
this.overlay.appendChild(this.frame);
this.overlay.appendChild(this.frame);
document.body.appendChild(this.overlay);
document.body.appendChild(this.overlay);
//Bind events
//Bind events
this.overlay.addEventListener("click", function(ev){
this.overlay.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.close();
self.close();
});
});
this.closeBtn.addEventListener("click", function(ev){
this.closeBtn.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.close();
self.close();
});
});
this.prevBtn.addEventListener("click", function(ev){
this.prevBtn.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.prev();
self.prev();
});
});
this.nextBtn.addEventListener("click", function(ev){
this.nextBtn.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.next();
self.next();
});
});
this.container.addEventListener("click", function(ev){
this.container.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.next();
self.next();
});
});
this.openBtn.addEventListener("click", function(ev){
this.openBtn.addEventListener("click", function(ev){
ev.stopPropagation();
ev.stopPropagation();
self.openSource();
self.openSource();
});
});
//Resize
//Resize
this.resizeHandler = function(){
this.resizeHandler = function(){
self.resizeContainer();
self.resizeContainer();
};
};
this.keyDownHandler = function(ev){
this.keyDownHandler = function(ev){
ev.preventDefault();
ev.preventDefault();
ev.stopPropagation();
ev.stopPropagation();
if(ev.keyCode === 37)
if(ev.keyCode === 37)
self.prev();
self.prev();
else if(ev.keyCode === 39)
else if(ev.keyCode === 39)
self.next();
self.next();
else if(ev.keyCode === 27)
else if(ev.keyCode === 27)
self.close();
self.close();
return false;
return false;
};
};
window.addEventListener("resize", this.resizeHandler);
window.addEventListener("resize", this.resizeHandler);
document.body.addEventListener("keydown", this.keyDownHandler);
document.body.addEventListener("keydown", this.keyDownHandler);
//Open
//Open
setTimeout(function(){
setTimeout(function(){
self.overlay.classList.add("opened");
self.overlay.classList.add("opened");
self.loadMedia(index);
self.loadMedia(index);
}, 10);
}, 10);
//Set opened
//Set opened
this.opened = true;
this.opened = true;
};
};
/*
/*
* Close gallery
* Close gallery
*/
*/
WAMediaBox_Gallery.prototype.close = function(){
WAMediaBox_Gallery.prototype.close = function(){
if(!this.opened) return;
if(!this.opened) return;
var self = this;
var self = this;
this.overlay.classList.remove("opened");
this.overlay.classList.remove("opened");
window.removeEventListener("resize", this.resizeHandler);
window.removeEventListener("resize", this.resizeHandler);
document.body.removeEventListener("keydown", this.keyDownHandler);
document.body.removeEventListener("keydown", this.keyDownHandler);
setTimeout(function(){
setTimeout(function(){
self.overlay.parentElement.removeChild(self.overlay);
self.overlay.parentElement.removeChild(self.overlay);
self.opened = false;
self.opened = false;
self.nextBtn = null;
self.nextBtn = null;
self.prevBtn = null;
self.prevBtn = null;
self.closeBtn = null;
self.closeBtn = null;
self.openBtn = null;
self.openBtn = null;
self.loading = null;
self.loading = null;
self.container = null;
self.container = null;
self.frame = null;
self.frame = null;
self.overlay = null;
self.overlay = null;
self.current = null;
self.current = null;
self.containerWidth = null;
self.containerWidth = null;
self.containerHeight = null;
self.containerHeight = null;
}, 450);
}, 450);
};
};
/*
/*
* Resize container
* Resize container
*/
*/
WAMediaBox_Gallery.prototype.resizeContainer = function(){
WAMediaBox_Gallery.prototype.resizeContainer = function(){
if(!this.opened) return;
if(!this.opened) return;
//Defaults
//Defaults
if(!this.containerWidth)
if(!this.containerWidth)
this.containerWidth = Math.round(this.overlay.offsetWidth * 0.7);
this.containerWidth = Math.round(this.overlay.offsetWidth * 0.7);
if(!this.containerHeight)
if(!this.containerHeight)
this.containerHeight = Math.round(this.overlay.offsetWidth * 0.7);
this.containerHeight = Math.round(this.overlay.offsetWidth * 0.7);
var widthLimit = 160;
var widthLimit = 160;
if(this.overlay.offsetWidth < 480)
if(this.overlay.offsetWidth < 480)
widthLimit = 70;
widthLimit = 70;
var maxWidth = Math.min(this.overlay.offsetWidth * 0.9, this.overlay.offsetWidth - widthLimit);
var maxWidth = Math.min(this.overlay.offsetWidth * 0.9, this.overlay.offsetWidth - widthLimit);
var maxHeight = Math.min(this.overlay.offsetHeight * 0.9, this.overlay.offsetHeight - 64);
var maxHeight = Math.min(this.overlay.offsetHeight * 0.9, this.overlay.offsetHeight - 64);
var targetWidth = this.containerWidth;
var targetWidth = this.containerWidth;
var targetHeight = this.containerHeight;
var targetHeight = this.containerHeight;
//Resize if neccesary
//Resize if neccesary
var ratio = targetWidth / targetHeight;
var ratio = targetWidth / targetHeight;
if(targetWidth > maxWidth){
if(targetWidth > maxWidth){
targetWidth = Math.round(maxWidth);
targetWidth = Math.round(maxWidth);
targetHeight = targetWidth / ratio;
targetHeight = targetWidth / ratio;
}
}
if(targetHeight > maxHeight){
if(targetHeight > maxHeight){
targetHeight = Math.round(maxHeight);
targetHeight = Math.round(maxHeight);
targetWidth = targetHeight * ratio;
targetWidth = targetHeight * ratio;
}
}
//Set styles
//Set styles
this.frame.style.width = targetWidth + "px";
this.frame.style.width = targetWidth + "px";
this.frame.style.height = targetHeight + "px";
this.frame.style.height = targetHeight + "px";
this.frame.style.marginLeft = -Math.round(targetWidth / 2) + "px";
this.frame.style.marginLeft = -Math.round(targetWidth / 2) + "px";
this.frame.style.marginTop = -Math.round(targetHeight / 2) + "px";
this.frame.style.marginTop = -Math.round(targetHeight / 2) + "px";
};
};
/*
/*
* Set media into container
* Set media into container
*/
*/
WAMediaBox_Gallery.prototype.setMedia = function(type, src, title, width, height){
WAMediaBox_Gallery.prototype.setMedia = function(type, src, title, width, height){
if(!this.opened) return;
if(!this.opened) return;
var self = this;
var self = this;
this.loaded = false;
this.loaded = false;
this.frame.classList.remove("can-open-in-new");
this.frame.classList.remove("can-open-in-new");
self.frame.classList.remove("has-title");
self.frame.classList.remove("has-title");
//Reset content
//Reset content
this.container.innerHTML = '';
this.container.innerHTML = '';
//Create proper element
//Create proper element
var mediaEl = null;
var mediaEl = null;
if(type == "image"){
if(type == "image"){
//Resize
//Resize
if(width) this.containerWidth = width;
if(width) this.containerWidth = width;
if(height) this.containerHeight = height;
if(height) this.containerHeight = height;
this.resizeContainer();
this.resizeContainer();
mediaEl = document.createElement("img");
mediaEl = document.createElement("img");
mediaEl.addEventListener("load", function(){
mediaEl.addEventListener("load", function(){
self.containerWidth = mediaEl.width;
self.containerWidth = mediaEl.width;
self.containerHeight = mediaEl.height;
self.containerHeight = mediaEl.height;
self.resizeContainer();
self.resizeContainer();
self.frame.classList.add("can-open-in-new");
self.frame.classList.add("can-open-in-new");
//Add to DOM
//Add to DOM
self.container.appendChild(mediaEl);
self.container.appendChild(mediaEl);
});
});
mediaEl.src = src;
mediaEl.src = src;
} else {
} else {
//Resize
//Resize
if(width) this.containerWidth = width;
if(width) this.containerWidth = width;
if(height) this.containerHeight = height + ( title ? 52 : 0 );
if(height) this.containerHeight = height + ( title ? 52 : 0 );
this.resizeContainer();
this.resizeContainer();
mediaEl = document.createElement("iframe");
mediaEl = document.createElement("iframe");
mediaEl.src = src;
mediaEl.src = src;
mediaEl.setAttribute("width", parseInt(this.frame.style.width));
mediaEl.setAttribute("width", parseInt(this.frame.style.width));
mediaEl.setAttribute("height", parseInt(this.frame.style.height) - ( title ? 52 : 0 ));
mediaEl.setAttribute("height", parseInt(this.frame.style.height) - ( title ? 52 : 0 ));
mediaEl.setAttribute("frameborder", "0");
mediaEl.setAttribute("frameborder", "0");
mediaEl.setAttribute("allowfullscreen", "allowfullscreen");
mediaEl.setAttribute("allowfullscreen", "allowfullscreen");
//Add to DOM
//Add to DOM
this.container.appendChild(mediaEl);
this.container.appendChild(mediaEl);
}
}
//Wait for load
//Wait for load
mediaEl.addEventListener("load", function(){
mediaEl.addEventListener("load", function(){
setTimeout(function(){
setTimeout(function(){
//Set title
//Set title
if(title){
if(title){
self.title.innerHTML = title;
self.title.innerHTML = title;
self.frame.classList.add("has-title");
self.frame.classList.add("has-title");
}
}
//Show
//Show
self.frame.classList.add("loaded");
self.frame.classList.add("loaded");
self.loading.hide();
self.loading.hide();
self.loaded = true;
self.loaded = true;
}, 550);
}, 550);
});
});
};
};
/*
/*
* Load media at index
* Load media at index
*/
*/
WAMediaBox_Gallery.prototype.loadMedia = function(index){
WAMediaBox_Gallery.prototype.loadMedia = function(index){
if(!this.opened) return;
if(!this.opened) return;
if(index == this.current) return;
if(index == this.current) return;
var self = this;
var self = this;
if(!this.mediaList[index]) throw new Error("Undefined media");
if(!this.mediaList[index]) throw new Error("Undefined media");
var load = function(){
var load = function(){
self.setMedia( self.mediaList[index].type, self.mediaList[index].src, self.mediaList[index].title, self.mediaList[index].width, self.mediaList[index].height );
self.setMedia( self.mediaList[index].type, self.mediaList[index].src, self.mediaList[index].title, self.mediaList[index].width, self.mediaList[index].height );
};
};
if(this.loaded){
if(this.loaded){
this.frame.classList.remove("loaded");
this.frame.classList.remove("loaded");
this.loading.show();
this.loading.show();
setTimeout(load, 350);
setTimeout(load, 350);
} else {
} else {
load();
load();
}
}
if(index > 0)
if(index > 0)
this.frame.classList.add("has-prev");
this.frame.classList.add("has-prev");
else
else
this.frame.classList.remove("has-prev");
this.frame.classList.remove("has-prev");
if(index < this.mediaList.length - 1)
if(index < this.mediaList.length - 1)
this.frame.classList.add("has-next");
this.frame.classList.add("has-next");
else
else
this.frame.classList.remove("has-next");
this.frame.classList.remove("has-next");
this.current = index;
this.current = index;
};
};
/*
/*
* Switch to previous media
* Switch to previous media
*/
*/
WAMediaBox_Gallery.prototype.prev = function(){
WAMediaBox_Gallery.prototype.prev = function(){
if(!this.opened) return;
if(!this.opened) return;
var index = Math.max(0, this.current - 1);
var index = Math.max(0, this.current - 1);
this.loadMedia(index);
this.loadMedia(index);
};
};
/*
/*
* Switch to next media
* Switch to next media
*/
*/
WAMediaBox_Gallery.prototype.next = function(){
WAMediaBox_Gallery.prototype.next = function(){
if(!this.opened) return;
if(!this.opened) return;
var index = Math.min(this.mediaList.length - 1, this.current + 1);
var index = Math.min(this.mediaList.length - 1, this.current + 1);
this.loadMedia(index);
this.loadMedia(index);
};
};
WAMediaBox_Gallery.prototype.openSource = function(){
WAMediaBox_Gallery.prototype.openSource = function(){
if(!this.opened) return;
if(!this.opened) return;
window.open( this.mediaList[this.current].src );
window.open( this.mediaList[this.current].customUrl || this.mediaList[this.current].src );
};
};
/*
/*
* ImageBox constructor
* ImageBox constructor
*/
*/
var WAMediaBox = function(){
var WAMediaBox = function(){
this.lang = {
this.lang = {
prev: "Previous",
prev: "Previous",
next: "Next",
next: "Next",
close: "Close",
close: "Close",
openInNew: "Open in new window"
openInNew: "Open in new window"
};
};
this.galleries = {};
this.galleries = {};
};
};
WAMediaBox.prototype.openGallery = function(gallery, index){
WAMediaBox.prototype.openGallery = function(gallery, index){
if(!this.galleries[gallery]) throw new Error("Gallery not found");
if(!this.galleries[gallery]) throw new Error("Gallery not found");
this.galleries[gallery].open(index);
this.galleries[gallery].open(index);
};
};
/*
/*
* Media adders
* Media adders
*/
*/
WAMediaBox.prototype.addImage = function(gallery, src, title){
WAMediaBox.prototype.addImage = function(gallery, src, title, customUrl){
if(!this.galleries[gallery])
if(!this.galleries[gallery])
this.galleries[gallery] = new WAMediaBox_Gallery(this);
this.galleries[gallery] = new WAMediaBox_Gallery(this);
return this.galleries[gallery].addImage(src, title);
return this.galleries[gallery].addImage(src, title, customUrl);
};
};
WAMediaBox.prototype.addIframe = function(gallery, src, title, width, height){
WAMediaBox.prototype.addIframe = function(gallery, src, title, customUrl, width, height){
if(!this.galleries[gallery])
if(!this.galleries[gallery])
this.galleries[gallery] = new WAMediaBox_Gallery(this);
this.galleries[gallery] = new WAMediaBox_Gallery(this);
return this.galleries[gallery].addIframe(src, title, width, height);
return this.galleries[gallery].addIframe(src, title, customUrl, width, height);
};
};
/*
/*
* Bind single elements
* Bind single elements
*/
*/
WAMediaBox.prototype.bind = function(el){
WAMediaBox.prototype.bind = function(el){
if(el._waMediaBoxBound) return;
if(el._waMediaBoxBound) return;
el._waMediaBoxBound = true;
el._waMediaBoxBound = true;
var self = this;
var self = this;
var gallery = el.getAttribute("data-mediabox") || "_";
var gallery = el.getAttribute("data-mediabox") || "_";
var src = String(el.getAttribute("href") || el.getAttribute("data-src"));
var src = String(el.getAttribute("href") || el.getAttribute("data-src"));
var title = el.getAttribute("data-title");
var title = el.getAttribute("data-title");
var isIframe = ( el.hasAttribute("data-iframe") || src.indexOf("youtube") >= 0 ? true : false );
var isIframe = ( el.hasAttribute("data-iframe") || src.indexOf("youtube") >= 0 ? true : false );
var width = ( el.hasAttribute("data-width") ? parseInt(el.getAttribute("data-width")) : null );
var width = ( el.hasAttribute("data-width") ? parseInt(el.getAttribute("data-width")) : null );
var height = ( el.hasAttribute("data-height") ? parseInt(el.getAttribute("data-height")) : null );
var height = ( el.hasAttribute("data-height") ? parseInt(el.getAttribute("data-height")) : null );
var customUrl = el.getAttribute("data-custom-url");
var index = null;
var index = null;
//Add to gallery
//Add to gallery
if(isIframe)
if(isIframe)
index = this.addIframe(gallery, src, title, width, height);
index = this.addIframe(gallery, src, title, customUrl, width, height);
else
else
index = this.addImage(gallery, src, title);
index = this.addImage(gallery, src, title, customUrl);
//Bind open event
//Bind open event
el.addEventListener("click", function(ev){
el.addEventListener("click", function(ev){
ev.preventDefault();
ev.preventDefault();
ev.stopPropagation();
ev.stopPropagation();
self.openGallery(gallery, index);
self.openGallery(gallery, index);
return false;
return false;
});
});
};
};
/*
/*
* Bind all elements in given parent node
* Bind all elements in given parent node
*/
*/
WAMediaBox.prototype.bindAll = function(parentEl){
WAMediaBox.prototype.bindAll = function(parentEl){
var elements = parentEl.querySelectorAll("a[data-mediabox]");
var elements = parentEl.querySelectorAll("a[data-mediabox]");
for(var i = 0; i < elements.length; i++)
for(var i = 0; i < elements.length; i++)
this.bind(elements.item(i));
this.bind(elements.item(i));
};
};
//Assign to window
//Assign to window
window.WAMediaBox = new WAMediaBox();
window.WAMediaBox = new WAMediaBox();
//Bind lightbox elements
//Bind lightbox elements
window.addEventListener("load", function(){
window.addEventListener("load", function(){
window.WAMediaBox.bindAll(document.body);
window.WAMediaBox.bindAll(document.body);
});
});
})();
})();