forked from SimplesIP/pabx-app
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
13 KiB
506 lines
13 KiB
2 years ago
|
/*
|
||
|
* jQuery SuperBox! 0.9.1
|
||
|
* Copyright (c) 2009 Pierre Bertet (pierrebertet.net)
|
||
|
* Licensed under the MIT (MIT-LICENSE.txt)
|
||
|
*
|
||
|
* TODO :
|
||
|
* - Document.load if init is before </body> against IE crash.
|
||
|
* - Animations
|
||
|
* - Image / Gallery mode : display a legend
|
||
|
*/
|
||
|
;(function($){
|
||
|
|
||
|
// Local variables
|
||
|
var $overlay, $wrapper, $container, $superbox, $closeBtn, $loading, $nextprev, $nextBtn, $prevBtn, settings,
|
||
|
|
||
|
// Default settings
|
||
|
defaultSettings = {
|
||
|
boxId: "superbox",
|
||
|
boxClasses: "",
|
||
|
overlayOpacity: .8,
|
||
|
boxWidth: "600",
|
||
|
boxHeight: "400",
|
||
|
loadTxt: "Loading...",
|
||
|
closeTxt: "Close",
|
||
|
prevTxt: "Previous",
|
||
|
nextTxt: "Next",
|
||
|
beforeShow: function(){}
|
||
|
},
|
||
|
|
||
|
galleryGroups = {},
|
||
|
galleryMode = false,
|
||
|
hideElts = $([]);
|
||
|
|
||
|
// Init dispatcher
|
||
|
$.superbox = function(){
|
||
|
|
||
|
// Settings
|
||
|
settings = $.extend({}, defaultSettings, $.superbox.settings);
|
||
|
|
||
|
// If IE6, select elements to hide
|
||
|
if ($.browser.msie && $.browser.version < 7){
|
||
|
hideElts = hideElts.add("select");
|
||
|
}
|
||
|
|
||
|
// Create base elements
|
||
|
createElements();
|
||
|
|
||
|
// Dispatch types
|
||
|
dispatch();
|
||
|
};
|
||
|
|
||
|
// Dispatch types
|
||
|
function dispatch(){
|
||
|
|
||
|
// Match all superbox links
|
||
|
$("a[rel^=superbox],area[rel^=superbox]").each(function(){
|
||
|
|
||
|
// Optimisation
|
||
|
var $this = $(this),
|
||
|
relAttr = $this.attr("rel"),
|
||
|
|
||
|
// Match type (ex : superbox[gallery#my_id.my_class][my_gallery] > gallery
|
||
|
type = relAttr.match(/^superbox\[([^#\.\]]+)/)[1],
|
||
|
|
||
|
// Match additionnal classes or IDs (#xxx.yyy.zzz)
|
||
|
boxCurrentAttrs = relAttr.replace("superbox", "").match(/([#\.][^#\.\]]+)/g) || [],
|
||
|
|
||
|
// Box ID and classes
|
||
|
newBoxId = settings.boxId,
|
||
|
newBoxClasses = settings.boxClasses;
|
||
|
|
||
|
// Additionnal rel settings
|
||
|
this._relSettings = relAttr.replace("superbox["+ type + boxCurrentAttrs.join("") +"]", "");
|
||
|
|
||
|
// Redefine settings
|
||
|
$.each(boxCurrentAttrs, function(i, val){ // each class or id
|
||
|
if (val.substr(0,1) == "#"){
|
||
|
newBoxId = val.substr(1);
|
||
|
}
|
||
|
else if (val.substr(0,1) == "."){
|
||
|
newBoxClasses += " " + val.substr(1);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Call type method
|
||
|
if (type.search(/^image|gallery|iframe|content|ajax$/) != -1) {
|
||
|
$this.superbox(type, {boxId: newBoxId, boxClasses: newBoxClasses});
|
||
|
}
|
||
|
});
|
||
|
};
|
||
|
|
||
|
/*-- Superbox Method --*/
|
||
|
$.fn.superbox = function(type, curSettings){
|
||
|
curSettings = $.extend({}, settings, curSettings);
|
||
|
$.superbox[type](this, curSettings);
|
||
|
};
|
||
|
|
||
|
/*-- Types --*/
|
||
|
$.extend($.superbox, {
|
||
|
|
||
|
// Image
|
||
|
image: function($elt, curSettings, type){
|
||
|
|
||
|
var relSettings = getRelSettings($elt.get(0)),
|
||
|
dimensions = false;
|
||
|
|
||
|
// Extra settings
|
||
|
if (relSettings && type == "gallery")
|
||
|
dimensions = relSettings[1];
|
||
|
else if (relSettings)
|
||
|
dimensions = relSettings[0];
|
||
|
|
||
|
// On click event
|
||
|
$elt.click(function(e){
|
||
|
e.preventDefault();
|
||
|
|
||
|
prepareBox();
|
||
|
|
||
|
// "Prev / Next" buttons
|
||
|
if (type == "gallery")
|
||
|
nextPrev($elt, relSettings[0]);
|
||
|
|
||
|
// Loading anim
|
||
|
initLoading(function(){
|
||
|
|
||
|
// Dimensions
|
||
|
var dims = false,
|
||
|
|
||
|
// Image
|
||
|
$curImg;
|
||
|
|
||
|
if (dimensions) {
|
||
|
dims = dimensions.split("x");
|
||
|
}
|
||
|
|
||
|
// Image
|
||
|
$curImg = $('<img src="'+ $elt.attr("href") +'" title="'+ ($elt.attr("title") || $elt.text()) +'" />');
|
||
|
|
||
|
// On image load
|
||
|
$curImg.load(function(){
|
||
|
|
||
|
// Resize
|
||
|
resizeImageBox($curImg, dims);
|
||
|
|
||
|
// Id and Classes
|
||
|
setBoxAttrs({boxClasses: "image " + curSettings.boxClasses, boxId: curSettings.boxId});
|
||
|
|
||
|
// Show box
|
||
|
showBox();
|
||
|
|
||
|
}).appendTo($innerbox);
|
||
|
|
||
|
});
|
||
|
|
||
|
});
|
||
|
},
|
||
|
|
||
|
// Gallery
|
||
|
gallery: function($elt, curSettings){
|
||
|
|
||
|
// Extra settings
|
||
|
var extraSettings = getRelSettings($elt.get(0));
|
||
|
|
||
|
// Create group
|
||
|
if(!galleryGroups[extraSettings[0]]) {
|
||
|
galleryGroups[extraSettings[0]] = [];
|
||
|
}
|
||
|
|
||
|
// Add element to current group
|
||
|
galleryGroups[extraSettings[0]].push($elt);
|
||
|
|
||
|
$elt.get(0)._superboxGroupKey = (galleryGroups[extraSettings[0]].length - 1);
|
||
|
|
||
|
// Image Box
|
||
|
$.superbox["image"]($elt, curSettings, "gallery");
|
||
|
},
|
||
|
|
||
|
// iframe
|
||
|
iframe: function($elt, curSettings){
|
||
|
|
||
|
// Extra settings
|
||
|
var extraSettings = getRelSettings($elt.get(0));
|
||
|
|
||
|
// On click event
|
||
|
$elt.click(function(e){
|
||
|
e.preventDefault();
|
||
|
|
||
|
prepareBox();
|
||
|
|
||
|
// Loading anim
|
||
|
initLoading(function(){
|
||
|
|
||
|
// Dimensions
|
||
|
var dims = false,
|
||
|
|
||
|
// iframe
|
||
|
$iframe;
|
||
|
|
||
|
if (extraSettings) {
|
||
|
dims = extraSettings[0].split("x");
|
||
|
}
|
||
|
|
||
|
curSettings = $.extend({}, curSettings, {
|
||
|
boxWidth: dims[0] || curSettings.boxWidth,
|
||
|
boxHeight: dims[1] || curSettings.boxHeight
|
||
|
});
|
||
|
|
||
|
// iframe
|
||
|
$iframe = $('<iframe src="'+ $elt.attr("href") +'" name="'+ $elt.attr("href") +'" frameborder="0" scrolling="auto" hspace="0" width="'+ curSettings.boxWidth +'" height="'+ curSettings.boxHeight +'"></iframe>');
|
||
|
|
||
|
// On iframe load
|
||
|
$iframe.load(function(){
|
||
|
|
||
|
// Specified dimensions
|
||
|
$superbox.width( curSettings.boxWidth+"px" );
|
||
|
$innerbox.height( curSettings.boxHeight+"px" );
|
||
|
|
||
|
// Id and Classes
|
||
|
setBoxAttrs({boxClasses: "iframe " + curSettings.boxClasses, boxId: curSettings.boxId});
|
||
|
|
||
|
// Show box
|
||
|
showBox();
|
||
|
|
||
|
}).appendTo($innerbox);
|
||
|
});
|
||
|
|
||
|
});
|
||
|
},
|
||
|
|
||
|
// Content
|
||
|
content: function($elt, curSettings){
|
||
|
// Extra settings
|
||
|
var extraSettings = getRelSettings($elt.get(0));
|
||
|
|
||
|
// On click event
|
||
|
$elt.click(function(e){
|
||
|
e.preventDefault();
|
||
|
|
||
|
prepareBox();
|
||
|
|
||
|
// Loading anim
|
||
|
initLoading(function(){
|
||
|
|
||
|
// Dimensions
|
||
|
var dims = false;
|
||
|
if (extraSettings)
|
||
|
dims = extraSettings[0].split("x");
|
||
|
|
||
|
curSettings = $.extend({}, curSettings, {
|
||
|
boxWidth: dims[0] || curSettings.boxWidth,
|
||
|
boxHeight: dims[1] || curSettings.boxHeight
|
||
|
});
|
||
|
|
||
|
// Specified dimensions
|
||
|
$superbox.width( curSettings.boxWidth+"px" );
|
||
|
$innerbox.height( curSettings.boxHeight+"px" );
|
||
|
|
||
|
$($elt.attr('href')).clone().appendTo($innerbox).show();
|
||
|
|
||
|
// Id and Classes
|
||
|
setBoxAttrs({boxClasses: "content " + curSettings.boxClasses, boxId: curSettings.boxId});
|
||
|
|
||
|
// Show box
|
||
|
showBox();
|
||
|
});
|
||
|
|
||
|
});
|
||
|
},
|
||
|
|
||
|
// Ajax
|
||
|
ajax: function($elt, curSettings){
|
||
|
|
||
|
// Extra settings
|
||
|
var extraSettings = getRelSettings($elt.get(0));
|
||
|
|
||
|
// On click event
|
||
|
$elt.click(function(e){
|
||
|
e.preventDefault();
|
||
|
|
||
|
prepareBox();
|
||
|
|
||
|
// Loading anim
|
||
|
initLoading(function(){
|
||
|
|
||
|
// Dimensions
|
||
|
var dims = false;
|
||
|
if (extraSettings && extraSettings[3]) {
|
||
|
dims = extraSettings[3].split("x");
|
||
|
}
|
||
|
|
||
|
// Extend default dimension settings
|
||
|
curSettings = $.extend({}, curSettings, {
|
||
|
boxWidth: dims[0] || curSettings.boxWidth,
|
||
|
boxHeight: dims[1] || curSettings.boxHeight
|
||
|
});
|
||
|
|
||
|
// Specified dimensions
|
||
|
$superbox.width( curSettings.boxWidth+"px" );
|
||
|
$innerbox.height( curSettings.boxHeight+"px" );
|
||
|
|
||
|
$.get( extraSettings[2], function(data){
|
||
|
$(data).appendTo($innerbox);
|
||
|
});
|
||
|
|
||
|
// Id and Classes
|
||
|
setBoxAttrs({boxClasses: "ajax " + curSettings.boxClasses, boxId: curSettings.boxId});
|
||
|
|
||
|
// Show box
|
||
|
showBox();
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
// Get extra settings in rel attribute
|
||
|
function getRelSettings(elt){
|
||
|
return elt._relSettings.match(/([^\[\]]+)/g);
|
||
|
};
|
||
|
|
||
|
// Set image box dimensions
|
||
|
function resizeImageBox($curImg, dims){
|
||
|
|
||
|
// Auto
|
||
|
$superbox.width($curImg.width() + ($innerbox.css("paddingLeft").slice(0,-2)-0) + ($innerbox.css("paddingRight").slice(0,-2)-0)); // Padding ajouté, pour corriger le problème de définition padding sur $innerbox
|
||
|
$innerbox.height($curImg.height());
|
||
|
|
||
|
// Specified
|
||
|
if (dims && dims[0] != "") {
|
||
|
$superbox.width(dims[0] + "px");
|
||
|
}
|
||
|
if (dims && dims[1] != "" && dims[1] > $curImg.height()) {
|
||
|
$innerbox.height(dims[1] + "px");
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// Next / Previous
|
||
|
function nextPrev($elt, group){
|
||
|
$nextprev.show();
|
||
|
|
||
|
galleryMode = true;
|
||
|
|
||
|
var nextKey = $elt.get(0)._superboxGroupKey + 1,
|
||
|
prevKey = nextKey - 2;
|
||
|
|
||
|
// Next
|
||
|
if (galleryGroups[group][nextKey]){
|
||
|
$nextBtn.removeClass("disabled").unbind("click").bind("click", function(){
|
||
|
galleryGroups[group][nextKey].click();
|
||
|
});
|
||
|
}
|
||
|
else
|
||
|
$nextBtn.addClass("disabled").unbind("click");
|
||
|
|
||
|
// Prev
|
||
|
if (galleryGroups[group][prevKey]){
|
||
|
$prevBtn.removeClass("disabled").unbind("click").bind("click", function(){
|
||
|
galleryGroups[group][prevKey].click();
|
||
|
});
|
||
|
}
|
||
|
else
|
||
|
$prevBtn.addClass("disabled").unbind("click");
|
||
|
};
|
||
|
|
||
|
// Set ID and Class
|
||
|
function setBoxAttrs(attrs){
|
||
|
$superbox.attr("id", attrs.boxId).attr("class", attrs.boxClasses);
|
||
|
};
|
||
|
|
||
|
// Hide Box
|
||
|
function hideBox(){
|
||
|
$(document).unbind("keydown");
|
||
|
$loading.hide();
|
||
|
$nextprev.hide();
|
||
|
$wrapper.hide().css({position: "fixed", top: 0});
|
||
|
$innerbox.empty();
|
||
|
};
|
||
|
|
||
|
// Hide Box + Overlay
|
||
|
function hideAll(callback){
|
||
|
hideBox();
|
||
|
$overlay.fadeOut(300, function(){
|
||
|
// Show hidden elements for IE6
|
||
|
hideElts.show();
|
||
|
});
|
||
|
galleryMode = false;
|
||
|
};
|
||
|
|
||
|
// "Loading..."
|
||
|
function initLoading(callback){
|
||
|
|
||
|
var loading = function(){
|
||
|
|
||
|
// IE6
|
||
|
if($.browser.msie && $.browser.version < 7){
|
||
|
$wrapper.css({position: "absolute", top:"50%"});
|
||
|
}
|
||
|
|
||
|
// Hide elements for IE6
|
||
|
hideElts.hide();
|
||
|
|
||
|
$loading.show();
|
||
|
callback();
|
||
|
};
|
||
|
|
||
|
if (galleryMode){
|
||
|
$overlay.css("opacity", settings.overlayOpacity).show();
|
||
|
loading();
|
||
|
}
|
||
|
else {
|
||
|
$overlay.css("opacity", 0).show().fadeTo(300, settings.overlayOpacity, loading);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// "Prepare" box : Show $superbox with top:-99999px;
|
||
|
function prepareBox(){
|
||
|
$wrapper.show();
|
||
|
$innerbox.empty();
|
||
|
$superbox.css({position: "absolute", top: "-99999px"});
|
||
|
};
|
||
|
|
||
|
// Display box
|
||
|
function showBox(curSettings, $elt){
|
||
|
// Stop "Loading..."
|
||
|
$loading.hide();
|
||
|
|
||
|
// Keys shortcuts
|
||
|
$(document).unbind("keydown").bind("keydown",function(e){
|
||
|
// Escape
|
||
|
if (e.keyCode == 27)
|
||
|
hideAll();
|
||
|
// Left/right arrows
|
||
|
if (e.keyCode == 39 && $nextBtn.is(":visible"))
|
||
|
$nextBtn.click();
|
||
|
if (e.keyCode == 37 && $prevBtn.is(":visible"))
|
||
|
$prevBtn.click();
|
||
|
});
|
||
|
|
||
|
// Show $superbox
|
||
|
$superbox.css({position: "static", top: 0, opacity: 0});
|
||
|
|
||
|
// IE6 and IE7
|
||
|
if ($.browser.msie && $.browser.version < 8){
|
||
|
$superbox.css({position: "relative", top:"-50%"});
|
||
|
// IE6
|
||
|
if ($.browser.msie && $.browser.version < 7)
|
||
|
$wrapper.css({position: "absolute", top:"50%"});
|
||
|
}
|
||
|
|
||
|
// Position absolute if image height > window height
|
||
|
if ( $(window).height() < $wrapper.height() ){
|
||
|
$wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"});
|
||
|
}
|
||
|
|
||
|
settings.beforeShow();
|
||
|
|
||
|
$superbox.fadeTo(300,1);
|
||
|
|
||
|
};
|
||
|
|
||
|
// Create base elements (overlay, wrapper, box, loading)
|
||
|
function createElements(){
|
||
|
if (!$.superbox.elementsReady){
|
||
|
|
||
|
// Overlay (background)
|
||
|
$overlay = $('<div id="superbox-overlay"></div>').appendTo("body").hide();
|
||
|
|
||
|
// Wrapper
|
||
|
$wrapper = $('<div id="superbox-wrapper"></div>').appendTo("body").hide();
|
||
|
|
||
|
// Box container
|
||
|
$container = $('<div id="superbox-container"></div>').appendTo($wrapper);
|
||
|
|
||
|
// Box
|
||
|
$superbox = $('<div id="superbox"></div>').appendTo($container);
|
||
|
|
||
|
// Inner box
|
||
|
$innerbox = $('<div id="superbox-innerbox"></div>').appendTo($superbox);
|
||
|
|
||
|
// "Next / Previous"
|
||
|
$nextprev = $('<p class="nextprev"></p>').appendTo($superbox).hide();
|
||
|
$prevBtn = $('<a class="prev"><strong><span>'+ settings.prevTxt +'</span></strong></a>').appendTo($nextprev);
|
||
|
$nextBtn = $('<a class="next"><strong><span>'+ settings.nextTxt +'</span></strong></a>').appendTo($nextprev);
|
||
|
|
||
|
// Add close button
|
||
|
$closeBtn = $('<p class="close"><a><strong><span>'+ settings.closeTxt +'</span></strong></a></p>').prependTo($superbox).find("a");
|
||
|
|
||
|
// "Loading..."
|
||
|
$loading = $('<p class="loading">'+ settings.loadTxt +'</p>').appendTo($container).hide();
|
||
|
|
||
|
// Hide on click
|
||
|
$overlay.add($wrapper).add($closeBtn).click(function(){
|
||
|
hideAll();
|
||
|
});
|
||
|
|
||
|
// Remove "hide on click" on superbox
|
||
|
$superbox.click(function(e){
|
||
|
e.stopPropagation();
|
||
|
});
|
||
|
|
||
|
// Dont call this function twice
|
||
|
$.superbox.elementsReady = true;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
})(jQuery);
|