Diff
checker
टेक्स्ट
टेक्स्ट
छवियां
दस्तावेज़
Excel
फ़ोल्डर्स
Legal
Enterprise
डेस्कटॉप
मूल्य
साइन इन करें
Diffchecker डेस्कटॉप डाउनलोड करें
टेक्स्ट की तुलना करें
दो टेक्स्ट फ़ाइलों के बीच अंतर ढूंढें
उपकरण
इतिहास
रियल-टाइम एडिटर
अपरिवर्तित संक्षिप्त करें
लाइन रैप बंद
लेआउट
विभाजित
संयुक्त
परिवर्तन हाइलाइट करें
स्मार्ट
शब्द
अक्षर
सिंटैक्स हाइलाइटिंग
सिंटैक्स चुनें
अनदेखा करें
टेक्स्ट बदलें
पहले अंतर पर जाएँ
इनपुट संपादित करें
Diffchecker Desktop
Diffchecker चलाने का सबसे सुरक्षित तरीका। Diffchecker Desktop ऐप पाएं: आपके diffs कभी आपके कंप्यूटर से बाहर नहीं जाते!
Desktop पाएं
Untitled diff
बनाया गया
8 वर्ष पहले
Diff कभी समाप्त नहीं होता
साफ़
निर्यात करें
शेयर करें
समझाएं
0 हटाए गए
लाइनें
कुल
हटाया गया
अक्षर
कुल
हटाया गया
इस सुविधा का उपयोग जारी रखने के लिए, अपग्रेड करें
Diff
checker
Pro
मूल्य देखें
614 लाइनें
सभी को कॉपी करें
13 जोड़े गए
लाइनें
कुल
जोड़ा गया
अक्षर
कुल
जोड़ा गया
इस सुविधा का उपयोग जारी रखने के लिए, अपग्रेड करें
Diff
checker
Pro
मूल्य देखें
617 लाइनें
सभी को कॉपी करें
/*
/*
* 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);
});
});
})();
})();
सेव किए गए Diffs
ऑरिजनल टेक्स्ट
फ़ाइल खोलें
/* * 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); }); })();
परिवर्तित टेक्स्ट
फ़ाइल खोलें
/* * 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); }); })();
अंतर खोजें