Diff
checker
Testo
Testo
Immagini
Documenti
Excel
Cartelle
Legal
Enterprise
Applicazione per desktop
Prezzi
Accedi
Scarica Diffchecker Desktop
Confronta il testo
Trova la differenza tra due file di testo
Strumenti
Cronologia
Editor live
Comprimi invariate
Senza a capo
Layout
Diviso
Unificato
Livello di dettaglio
Intelligente
Parola
Carattere
Evidenziazione sintassi
Scegli sintassi
Ignora
Trasforma testo
Vai alla prima modifica
Modifica input
Diffchecker Desktop
Il modo più sicuro per usare Diffchecker. Ottieni l'app Diffchecker Desktop: i tuoi diff non lasciano mai il tuo computer!
Ottieni Desktop
Untitled diff
Creato
8 anni fa
Il diff non scade mai
Eliminare
Esporta
Condividere
Spiegare
0 rimozioni
Linee
Totale
Rimosso
Caratteri
Totale
Rimosso
Per continuare a utilizzare questa funzione, aggiorna a
Diff
checker
Pro
Visualizza prezzi
614 linee
Copia tutti
13 aggiunte
Linee
Totale
Aggiunto
Caratteri
Totale
Aggiunto
Per continuare a utilizzare questa funzione, aggiorna a
Diff
checker
Pro
Visualizza prezzi
617 linee
Copia tutti
/*
/*
* 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
*/
*/
Copia
Copiato
Copia
Copiato
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,
Copia
Copiato
Copia
Copiato
title: title
title: title
,
customUrl: customUrl
});
});
return this.mediaList.length - 1;
return this.mediaList.length - 1;
};
};
Copia
Copiato
Copia
Copiato
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,
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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
*/
*/
Copia
Copiato
Copia
Copiato
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);
Copia
Copiato
Copia
Copiato
return this.galleries[gallery].addImage(src, title
);
return this.galleries[gallery].addImage(src, title
, customUrl
);
};
};
Copia
Copiato
Copia
Copiato
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);
Copia
Copiato
Copia
Copiato
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 );
Copia
Copiato
Copia
Copiato
var customUrl = el.getAttribute("data-custom-url");
var index = null;
var index = null;
//Add to gallery
//Add to gallery
if(isIframe)
if(isIframe)
Copia
Copiato
Copia
Copiato
index = this.addIframe(gallery, src, title,
width, height);
index = this.addIframe(gallery, src, title,
customUrl,
width, height);
else
else
Copia
Copiato
Copia
Copiato
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);
});
});
})();
})();
Diff salvati
Testo originale
Apri file
/* * WA MediaBox * * @author WA Studio <www.webarts.name> * @author Jiri Hybek <jiri@hybek.cz> * @license MIT */ (function(){ /* * Preloader constructor */ var Preloader = function(){ this.el = document.createElement("div"); this.el.classList.add("wa-mediabox-preloader"); this.wrap = document.createElement("div"); this.wrap.classList.add("wa-mediabox-preloader-wrap"); this.spinner = document.createElement("div"); this.spinner.classList.add("wa-mediabox-preloader-spinner"); this.patch = document.createElement("div"); this.patch.classList.add("wa-mediabox-preloader-patch"); this.clipperLeft = document.createElement("div"); this.clipperLeft.classList.add("wa-mediabox-preloader-clipper"); this.clipperLeft.classList.add("left"); this.clipperRight = document.createElement("div"); this.clipperRight.classList.add("wa-mediabox-preloader-clipper"); this.clipperRight.classList.add("right"); var circle = document.createElement("div"); circle.classList.add("wa-mediabox-preloader-circle"); this.patch.appendChild(circle); this.clipperLeft.appendChild(circle.cloneNode(true)); this.clipperRight.appendChild(circle.cloneNode(true)); this.spinner.appendChild(this.clipperLeft); this.spinner.appendChild(this.patch); this.spinner.appendChild(this.clipperRight); this.wrap.appendChild(this.spinner); this.el.appendChild(this.wrap); }; Preloader.prototype.show = function(){ this.el.classList.remove("hidden"); this.el.style.display = ''; }; Preloader.prototype.hide = function(){ var self = this; this.el.classList.add("hidden"); setTimeout(function(){ if(self.el.classList.contains("hidden")) self.el.style.display = 'none'; }, 350); }; /* * Gallery constructor */ var WAMediaBox_Gallery = function(parent){ this.parent = parent; this.mediaList = []; this.opened = false; this.loaded = false; this.current = null; this.containerWidth = null; this.containerHeight = null; }; /* * Media adders */ WAMediaBox_Gallery.prototype.addImage = function(src, title){ this.mediaList.push({ type: "image", src: src, title: title }); return this.mediaList.length - 1; }; WAMediaBox_Gallery.prototype.addIframe = function(src, title, width, height){ this.mediaList.push({ type: "iframe", src: src, title: title, width: width, height: height }); return this.mediaList.length - 1; }; /* * Open gallery */ WAMediaBox_Gallery.prototype.open = function(index){ if(this.opened) return; var self = this; this.current = -1; this.loaded = false; //Create overlay and content wrapper this.overlay = document.createElement("div"); this.overlay.classList.add("wa-mediabox-overlay"); this.frame = document.createElement("div"); this.frame.classList.add("wa-mediabox-frame"); this.container = document.createElement("div"); this.container.classList.add("wa-mediabox-container"); this.title = document.createElement("div"); this.title.classList.add("wa-mediabox-title"); this.loading = new Preloader(); //Buttons this.closeBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.close); this.prevBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.prev); this.nextBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.next); this.openBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.openInNew); //Put together this.frame.appendChild(this.container); this.frame.appendChild(this.title); this.frame.appendChild(this.loading.el); this.frame.appendChild(this.closeBtn); this.frame.appendChild(this.prevBtn); this.frame.appendChild(this.nextBtn); this.frame.appendChild(this.openBtn); this.overlay.appendChild(this.frame); document.body.appendChild(this.overlay); //Bind events this.overlay.addEventListener("click", function(ev){ ev.stopPropagation(); self.close(); }); this.closeBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.close(); }); this.prevBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.prev(); }); this.nextBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.next(); }); this.container.addEventListener("click", function(ev){ ev.stopPropagation(); self.next(); }); this.openBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.openSource(); }); //Resize this.resizeHandler = function(){ self.resizeContainer(); }; this.keyDownHandler = function(ev){ ev.preventDefault(); ev.stopPropagation(); if(ev.keyCode === 37) self.prev(); else if(ev.keyCode === 39) self.next(); else if(ev.keyCode === 27) self.close(); return false; }; window.addEventListener("resize", this.resizeHandler); document.body.addEventListener("keydown", this.keyDownHandler); //Open setTimeout(function(){ self.overlay.classList.add("opened"); self.loadMedia(index); }, 10); //Set opened this.opened = true; }; /* * Close gallery */ WAMediaBox_Gallery.prototype.close = function(){ if(!this.opened) return; var self = this; this.overlay.classList.remove("opened"); window.removeEventListener("resize", this.resizeHandler); document.body.removeEventListener("keydown", this.keyDownHandler); setTimeout(function(){ self.overlay.parentElement.removeChild(self.overlay); self.opened = false; self.nextBtn = null; self.prevBtn = null; self.closeBtn = null; self.openBtn = null; self.loading = null; self.container = null; self.frame = null; self.overlay = null; self.current = null; self.containerWidth = null; self.containerHeight = null; }, 450); }; /* * Resize container */ WAMediaBox_Gallery.prototype.resizeContainer = function(){ if(!this.opened) return; //Defaults if(!this.containerWidth) this.containerWidth = Math.round(this.overlay.offsetWidth * 0.7); if(!this.containerHeight) this.containerHeight = Math.round(this.overlay.offsetWidth * 0.7); var widthLimit = 160; if(this.overlay.offsetWidth < 480) widthLimit = 70; 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 targetWidth = this.containerWidth; var targetHeight = this.containerHeight; //Resize if neccesary var ratio = targetWidth / targetHeight; if(targetWidth > maxWidth){ targetWidth = Math.round(maxWidth); targetHeight = targetWidth / ratio; } if(targetHeight > maxHeight){ targetHeight = Math.round(maxHeight); targetWidth = targetHeight * ratio; } //Set styles this.frame.style.width = targetWidth + "px"; this.frame.style.height = targetHeight + "px"; this.frame.style.marginLeft = -Math.round(targetWidth / 2) + "px"; this.frame.style.marginTop = -Math.round(targetHeight / 2) + "px"; }; /* * Set media into container */ WAMediaBox_Gallery.prototype.setMedia = function(type, src, title, width, height){ if(!this.opened) return; var self = this; this.loaded = false; this.frame.classList.remove("can-open-in-new"); self.frame.classList.remove("has-title"); //Reset content this.container.innerHTML = ''; //Create proper element var mediaEl = null; if(type == "image"){ //Resize if(width) this.containerWidth = width; if(height) this.containerHeight = height; this.resizeContainer(); mediaEl = document.createElement("img"); mediaEl.addEventListener("load", function(){ self.containerWidth = mediaEl.width; self.containerHeight = mediaEl.height; self.resizeContainer(); self.frame.classList.add("can-open-in-new"); //Add to DOM self.container.appendChild(mediaEl); }); mediaEl.src = src; } else { //Resize if(width) this.containerWidth = width; if(height) this.containerHeight = height + ( title ? 52 : 0 ); this.resizeContainer(); mediaEl = document.createElement("iframe"); mediaEl.src = src; mediaEl.setAttribute("width", parseInt(this.frame.style.width)); mediaEl.setAttribute("height", parseInt(this.frame.style.height) - ( title ? 52 : 0 )); mediaEl.setAttribute("frameborder", "0"); mediaEl.setAttribute("allowfullscreen", "allowfullscreen"); //Add to DOM this.container.appendChild(mediaEl); } //Wait for load mediaEl.addEventListener("load", function(){ setTimeout(function(){ //Set title if(title){ self.title.innerHTML = title; self.frame.classList.add("has-title"); } //Show self.frame.classList.add("loaded"); self.loading.hide(); self.loaded = true; }, 550); }); }; /* * Load media at index */ WAMediaBox_Gallery.prototype.loadMedia = function(index){ if(!this.opened) return; if(index == this.current) return; var self = this; if(!this.mediaList[index]) throw new Error("Undefined media"); 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 ); }; if(this.loaded){ this.frame.classList.remove("loaded"); this.loading.show(); setTimeout(load, 350); } else { load(); } if(index > 0) this.frame.classList.add("has-prev"); else this.frame.classList.remove("has-prev"); if(index < this.mediaList.length - 1) this.frame.classList.add("has-next"); else this.frame.classList.remove("has-next"); this.current = index; }; /* * Switch to previous media */ WAMediaBox_Gallery.prototype.prev = function(){ if(!this.opened) return; var index = Math.max(0, this.current - 1); this.loadMedia(index); }; /* * Switch to next media */ WAMediaBox_Gallery.prototype.next = function(){ if(!this.opened) return; var index = Math.min(this.mediaList.length - 1, this.current + 1); this.loadMedia(index); }; WAMediaBox_Gallery.prototype.openSource = function(){ if(!this.opened) return; window.open( this.mediaList[this.current].src ); }; /* * ImageBox constructor */ var WAMediaBox = function(){ this.lang = { prev: "Previous", next: "Next", close: "Close", openInNew: "Open in new window" }; this.galleries = {}; }; WAMediaBox.prototype.openGallery = function(gallery, index){ if(!this.galleries[gallery]) throw new Error("Gallery not found"); this.galleries[gallery].open(index); }; /* * Media adders */ WAMediaBox.prototype.addImage = function(gallery, src, title){ if(!this.galleries[gallery]) this.galleries[gallery] = new WAMediaBox_Gallery(this); return this.galleries[gallery].addImage(src, title); }; WAMediaBox.prototype.addIframe = function(gallery, src, title, width, height){ if(!this.galleries[gallery]) this.galleries[gallery] = new WAMediaBox_Gallery(this); return this.galleries[gallery].addIframe(src, title, width, height); }; /* * Bind single elements */ WAMediaBox.prototype.bind = function(el){ if(el._waMediaBoxBound) return; el._waMediaBoxBound = true; var self = this; var gallery = el.getAttribute("data-mediabox") || "_"; var src = String(el.getAttribute("href") || el.getAttribute("data-src")); var title = el.getAttribute("data-title"); 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 height = ( el.hasAttribute("data-height") ? parseInt(el.getAttribute("data-height")) : null ); var index = null; //Add to gallery if(isIframe) index = this.addIframe(gallery, src, title, width, height); else index = this.addImage(gallery, src, title); //Bind open event el.addEventListener("click", function(ev){ ev.preventDefault(); ev.stopPropagation(); self.openGallery(gallery, index); return false; }); }; /* * Bind all elements in given parent node */ WAMediaBox.prototype.bindAll = function(parentEl){ var elements = parentEl.querySelectorAll("a[data-mediabox]"); for(var i = 0; i < elements.length; i++) this.bind(elements.item(i)); }; //Assign to window window.WAMediaBox = new WAMediaBox(); //Bind lightbox elements window.addEventListener("load", function(){ window.WAMediaBox.bindAll(document.body); }); })();
Testo modificato
Apri file
/* * WA MediaBox * * @author WA Studio <www.webarts.name> * @author Jiri Hybek <jiri@hybek.cz> * @license MIT */ (function(){ /* * Preloader constructor */ var Preloader = function(){ this.el = document.createElement("div"); this.el.classList.add("wa-mediabox-preloader"); this.wrap = document.createElement("div"); this.wrap.classList.add("wa-mediabox-preloader-wrap"); this.spinner = document.createElement("div"); this.spinner.classList.add("wa-mediabox-preloader-spinner"); this.patch = document.createElement("div"); this.patch.classList.add("wa-mediabox-preloader-patch"); this.clipperLeft = document.createElement("div"); this.clipperLeft.classList.add("wa-mediabox-preloader-clipper"); this.clipperLeft.classList.add("left"); this.clipperRight = document.createElement("div"); this.clipperRight.classList.add("wa-mediabox-preloader-clipper"); this.clipperRight.classList.add("right"); var circle = document.createElement("div"); circle.classList.add("wa-mediabox-preloader-circle"); this.patch.appendChild(circle); this.clipperLeft.appendChild(circle.cloneNode(true)); this.clipperRight.appendChild(circle.cloneNode(true)); this.spinner.appendChild(this.clipperLeft); this.spinner.appendChild(this.patch); this.spinner.appendChild(this.clipperRight); this.wrap.appendChild(this.spinner); this.el.appendChild(this.wrap); }; Preloader.prototype.show = function(){ this.el.classList.remove("hidden"); this.el.style.display = ''; }; Preloader.prototype.hide = function(){ var self = this; this.el.classList.add("hidden"); setTimeout(function(){ if(self.el.classList.contains("hidden")) self.el.style.display = 'none'; }, 350); }; /* * Gallery constructor */ var WAMediaBox_Gallery = function(parent){ this.parent = parent; this.mediaList = []; this.opened = false; this.loaded = false; this.current = null; this.containerWidth = null; this.containerHeight = null; }; /* * Media adders */ WAMediaBox_Gallery.prototype.addImage = function(src, title, customUrl){ this.mediaList.push({ type: "image", src: src, title: title, customUrl: customUrl }); return this.mediaList.length - 1; }; WAMediaBox_Gallery.prototype.addIframe = function(src, title, customUrl, width, height){ this.mediaList.push({ type: "iframe", src: src, title: title, customUrl: customUrl, width: width, height: height }); return this.mediaList.length - 1; }; /* * Open gallery */ WAMediaBox_Gallery.prototype.open = function(index){ if(this.opened) return; var self = this; this.current = -1; this.loaded = false; //Create overlay and content wrapper this.overlay = document.createElement("div"); this.overlay.classList.add("wa-mediabox-overlay"); this.frame = document.createElement("div"); this.frame.classList.add("wa-mediabox-frame"); this.container = document.createElement("div"); this.container.classList.add("wa-mediabox-container"); this.title = document.createElement("div"); this.title.classList.add("wa-mediabox-title"); this.loading = new Preloader(); //Buttons this.closeBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.close); this.prevBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.prev); this.nextBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.next); this.openBtn = document.createElement("button"); 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.setAttribute("title", this.parent.lang.openInNew); //Put together this.frame.appendChild(this.container); this.frame.appendChild(this.title); this.frame.appendChild(this.loading.el); this.frame.appendChild(this.closeBtn); this.frame.appendChild(this.prevBtn); this.frame.appendChild(this.nextBtn); this.frame.appendChild(this.openBtn); this.overlay.appendChild(this.frame); document.body.appendChild(this.overlay); //Bind events this.overlay.addEventListener("click", function(ev){ ev.stopPropagation(); self.close(); }); this.closeBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.close(); }); this.prevBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.prev(); }); this.nextBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.next(); }); this.container.addEventListener("click", function(ev){ ev.stopPropagation(); self.next(); }); this.openBtn.addEventListener("click", function(ev){ ev.stopPropagation(); self.openSource(); }); //Resize this.resizeHandler = function(){ self.resizeContainer(); }; this.keyDownHandler = function(ev){ ev.preventDefault(); ev.stopPropagation(); if(ev.keyCode === 37) self.prev(); else if(ev.keyCode === 39) self.next(); else if(ev.keyCode === 27) self.close(); return false; }; window.addEventListener("resize", this.resizeHandler); document.body.addEventListener("keydown", this.keyDownHandler); //Open setTimeout(function(){ self.overlay.classList.add("opened"); self.loadMedia(index); }, 10); //Set opened this.opened = true; }; /* * Close gallery */ WAMediaBox_Gallery.prototype.close = function(){ if(!this.opened) return; var self = this; this.overlay.classList.remove("opened"); window.removeEventListener("resize", this.resizeHandler); document.body.removeEventListener("keydown", this.keyDownHandler); setTimeout(function(){ self.overlay.parentElement.removeChild(self.overlay); self.opened = false; self.nextBtn = null; self.prevBtn = null; self.closeBtn = null; self.openBtn = null; self.loading = null; self.container = null; self.frame = null; self.overlay = null; self.current = null; self.containerWidth = null; self.containerHeight = null; }, 450); }; /* * Resize container */ WAMediaBox_Gallery.prototype.resizeContainer = function(){ if(!this.opened) return; //Defaults if(!this.containerWidth) this.containerWidth = Math.round(this.overlay.offsetWidth * 0.7); if(!this.containerHeight) this.containerHeight = Math.round(this.overlay.offsetWidth * 0.7); var widthLimit = 160; if(this.overlay.offsetWidth < 480) widthLimit = 70; 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 targetWidth = this.containerWidth; var targetHeight = this.containerHeight; //Resize if neccesary var ratio = targetWidth / targetHeight; if(targetWidth > maxWidth){ targetWidth = Math.round(maxWidth); targetHeight = targetWidth / ratio; } if(targetHeight > maxHeight){ targetHeight = Math.round(maxHeight); targetWidth = targetHeight * ratio; } //Set styles this.frame.style.width = targetWidth + "px"; this.frame.style.height = targetHeight + "px"; this.frame.style.marginLeft = -Math.round(targetWidth / 2) + "px"; this.frame.style.marginTop = -Math.round(targetHeight / 2) + "px"; }; /* * Set media into container */ WAMediaBox_Gallery.prototype.setMedia = function(type, src, title, width, height){ if(!this.opened) return; var self = this; this.loaded = false; this.frame.classList.remove("can-open-in-new"); self.frame.classList.remove("has-title"); //Reset content this.container.innerHTML = ''; //Create proper element var mediaEl = null; if(type == "image"){ //Resize if(width) this.containerWidth = width; if(height) this.containerHeight = height; this.resizeContainer(); mediaEl = document.createElement("img"); mediaEl.addEventListener("load", function(){ self.containerWidth = mediaEl.width; self.containerHeight = mediaEl.height; self.resizeContainer(); self.frame.classList.add("can-open-in-new"); //Add to DOM self.container.appendChild(mediaEl); }); mediaEl.src = src; } else { //Resize if(width) this.containerWidth = width; if(height) this.containerHeight = height + ( title ? 52 : 0 ); this.resizeContainer(); mediaEl = document.createElement("iframe"); mediaEl.src = src; mediaEl.setAttribute("width", parseInt(this.frame.style.width)); mediaEl.setAttribute("height", parseInt(this.frame.style.height) - ( title ? 52 : 0 )); mediaEl.setAttribute("frameborder", "0"); mediaEl.setAttribute("allowfullscreen", "allowfullscreen"); //Add to DOM this.container.appendChild(mediaEl); } //Wait for load mediaEl.addEventListener("load", function(){ setTimeout(function(){ //Set title if(title){ self.title.innerHTML = title; self.frame.classList.add("has-title"); } //Show self.frame.classList.add("loaded"); self.loading.hide(); self.loaded = true; }, 550); }); }; /* * Load media at index */ WAMediaBox_Gallery.prototype.loadMedia = function(index){ if(!this.opened) return; if(index == this.current) return; var self = this; if(!this.mediaList[index]) throw new Error("Undefined media"); 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 ); }; if(this.loaded){ this.frame.classList.remove("loaded"); this.loading.show(); setTimeout(load, 350); } else { load(); } if(index > 0) this.frame.classList.add("has-prev"); else this.frame.classList.remove("has-prev"); if(index < this.mediaList.length - 1) this.frame.classList.add("has-next"); else this.frame.classList.remove("has-next"); this.current = index; }; /* * Switch to previous media */ WAMediaBox_Gallery.prototype.prev = function(){ if(!this.opened) return; var index = Math.max(0, this.current - 1); this.loadMedia(index); }; /* * Switch to next media */ WAMediaBox_Gallery.prototype.next = function(){ if(!this.opened) return; var index = Math.min(this.mediaList.length - 1, this.current + 1); this.loadMedia(index); }; WAMediaBox_Gallery.prototype.openSource = function(){ if(!this.opened) return; window.open( this.mediaList[this.current].customUrl || this.mediaList[this.current].src ); }; /* * ImageBox constructor */ var WAMediaBox = function(){ this.lang = { prev: "Previous", next: "Next", close: "Close", openInNew: "Open in new window" }; this.galleries = {}; }; WAMediaBox.prototype.openGallery = function(gallery, index){ if(!this.galleries[gallery]) throw new Error("Gallery not found"); this.galleries[gallery].open(index); }; /* * Media adders */ WAMediaBox.prototype.addImage = function(gallery, src, title, customUrl){ if(!this.galleries[gallery]) this.galleries[gallery] = new WAMediaBox_Gallery(this); return this.galleries[gallery].addImage(src, title, customUrl); }; WAMediaBox.prototype.addIframe = function(gallery, src, title, customUrl, width, height){ if(!this.galleries[gallery]) this.galleries[gallery] = new WAMediaBox_Gallery(this); return this.galleries[gallery].addIframe(src, title, customUrl, width, height); }; /* * Bind single elements */ WAMediaBox.prototype.bind = function(el){ if(el._waMediaBoxBound) return; el._waMediaBoxBound = true; var self = this; var gallery = el.getAttribute("data-mediabox") || "_"; var src = String(el.getAttribute("href") || el.getAttribute("data-src")); var title = el.getAttribute("data-title"); 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 height = ( el.hasAttribute("data-height") ? parseInt(el.getAttribute("data-height")) : null ); var customUrl = el.getAttribute("data-custom-url"); var index = null; //Add to gallery if(isIframe) index = this.addIframe(gallery, src, title, customUrl, width, height); else index = this.addImage(gallery, src, title, customUrl); //Bind open event el.addEventListener("click", function(ev){ ev.preventDefault(); ev.stopPropagation(); self.openGallery(gallery, index); return false; }); }; /* * Bind all elements in given parent node */ WAMediaBox.prototype.bindAll = function(parentEl){ var elements = parentEl.querySelectorAll("a[data-mediabox]"); for(var i = 0; i < elements.length; i++) this.bind(elements.item(i)); }; //Assign to window window.WAMediaBox = new WAMediaBox(); //Bind lightbox elements window.addEventListener("load", function(){ window.WAMediaBox.bindAll(document.body); }); })();
Trovare la differenza