META-INF.resources.primefaces.lightbox.lightbox.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces Show documentation
Show all versions of primefaces Show documentation
PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more.
/**
* PrimeFaces LightBox Widget
*/
PrimeFaces.widget.LightBox = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.links = this.jq.children(':not(.ui-lightbox-inline)');
this.createPanel();
if(this.cfg.mode === 'image') {
this.setupImaging();
} else if(this.cfg.mode === 'inline') {
this.setupInline();
} else if(this.cfg.mode === 'iframe') {
this.setupIframe();
}
this.bindCommonEvents();
if(this.cfg.visible) {
this.links.eq(0).click();
}
this.panel.data('widget', this);
this.links.data('primefaces-lightbox-trigger', true).find('*').data('primefaces-lightbox-trigger', true);
},
refresh: function(cfg) {
$(PrimeFaces.escapeClientId(cfg.id) + '_panel').remove();
this.init(cfg);
},
destroy: function() {
this.panel.remove();
},
createPanel: function() {
var dom = '
';
$(document.body).append(dom);
this.panel = $(this.jqId + '_panel');
this.contentWrapper = this.panel.children('.ui-lightbox-content-wrapper');
this.content = this.contentWrapper.children('.ui-lightbox-content');
this.caption = this.panel.children('.ui-lightbox-caption');
this.captionText = this.caption.children('.ui-lightbox-caption-text');
this.closeIcon = this.caption.children('.ui-lightbox-close');
this.closeIcon.data('primefaces-lightbox-trigger', true).find('*').data('primefaces-lightbox-trigger', true);
},
setupImaging: function() {
var _self = this;
this.content.append('');
this.imageDisplay = this.content.children('img');
this.navigators = this.contentWrapper.children('a');
this.imageDisplay.on('load', function() {
var image = $(this);
_self.scaleImage(image);
//coordinates to center overlay
var leftOffset = (_self.panel.width() - image.width()) / 2,
topOffset = (_self.panel.height() - image.height()) / 2;
//resize content for new image
_self.content.removeClass('ui-lightbox-loading').animate({
width: image.width()
,height: image.height()
},
500,
function() {
//show image
image.fadeIn();
_self.showNavigators();
_self.caption.slideDown();
});
_self.panel.animate({
left: '+=' + leftOffset
,top: '+=' + topOffset
}, 500);
});
this.navigators.mouseover(function() {
$(this).addClass('ui-state-hover');
})
.mouseout(function() {
$(this).removeClass('ui-state-hover');
})
.click(function(e) {
var nav = $(this);
_self.hideNavigators();
if(nav.hasClass('ui-lightbox-nav-left')) {
var index = _self.current == 0 ? _self.links.length - 1 : _self.current - 1;
_self.links.eq(index).trigger('click');
}
else {
var index = _self.current == _self.links.length - 1 ? 0 : _self.current + 1;
_self.links.eq(index).trigger('click');
}
e.preventDefault();
});
this.links.click(function(e) {
var link = $(this);
if(_self.isHidden()) {
_self.content.addClass('ui-lightbox-loading').width(32).height(32);
_self.show();
}
else {
_self.imageDisplay.fadeOut(function() {
//clear for onload scaling
$(this).css({
'width': 'auto'
,'height': 'auto'
});
_self.content.addClass('ui-lightbox-loading');
});
_self.caption.slideUp();
}
setTimeout(function() {
_self.imageDisplay.attr('src', link.attr('href'));
_self.current = link.index();
var title = link.attr('title');
if(title) {
_self.captionText.html(title);
}
}, 1000);
e.preventDefault();
});
},
scaleImage: function(image) {
var win = $(window),
winWidth = win.width(),
winHeight = win.height(),
imageWidth = image.width(),
imageHeight = image.height(),
ratio = imageHeight / imageWidth;
if(imageWidth >= winWidth && ratio <= 1){
imageWidth = winWidth * 0.75;
imageHeight = imageWidth * ratio;
}
else if(imageHeight >= winHeight){
imageHeight = winHeight * 0.75;
imageWidth = imageHeight / ratio;
}
image.css({
'width':imageWidth + 'px'
,'height':imageHeight + 'px'
})
},
setupInline: function() {
this.inline = this.jq.children('.ui-lightbox-inline');
this.inline.appendTo(this.content).show();
var _self = this;
this.links.click(function(e) {
_self.show();
var title = $(this).attr('title');
if(title) {
_self.captionText.html(title);
_self.caption.slideDown();
}
e.preventDefault();
});
},
setupIframe: function() {
var $this = this;
this.iframeLoaded = false;
this.cfg.width = this.cfg.width||'640px';
this.cfg.height = this.cfg.height||'480px';
this.iframe = $('').appendTo(this.content);
if(this.cfg.iframeTitle) {
this.iframe.attr('title', this.cfg.iframeTitle);
}
this.links.click(function(e) {
if(!$this.iframeLoaded) {
$this.content.addClass('ui-lightbox-loading').css({
width: $this.cfg.width
,height: $this.cfg.height
});
$this.show();
$this.iframe.on('load', function() {
$this.iframeLoaded = true;
$this.content.removeClass('ui-lightbox-loading');
})
.attr('src', $this.links.eq(0).attr('href'));
}
else {
$this.show();
}
var title = $this.links.eq(0).attr('title');
if(title) {
$this.captionText.text(title);
$this.caption.slideDown();
}
e.preventDefault();
});
},
bindCommonEvents: function() {
var $this = this,
hideNS = PrimeFaces.env.ios ? 'touchstart.' + this.id: 'click.' + this.id,
resizeNS = 'resize.' + this.id;
this.closeIcon.mouseover(function() {
$(this).addClass('ui-state-hover');
})
.mouseout(function() {
$(this).removeClass('ui-state-hover');
})
this.closeIcon.click(function(e) {
$this.hide();
e.preventDefault();
});
//hide when outside is clicked
$(document.body).off(hideNS).on(hideNS, function (e) {
if($this.isHidden()) {
return;
}
//do nothing if target is the link
var target = $(e.target);
if(target.data('primefaces-lightbox-trigger')) {
return;
}
//hide if mouse is outside of lightbox
var offset = $this.panel.offset(),
pageX, pageY;
if(e.originalEvent && e.originalEvent.touches) {
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
} else {
pageX = e.pageX;
pageY = e.pageY;
}
if(pageX < offset.left ||
pageX > offset.left + $this.panel.width() ||
pageY < offset.top ||
pageY > offset.top + $this.panel.height()) {
e.preventDefault();
$this.hide();
}
});
//sync window resize
$(window).off(resizeNS).on(resizeNS, function() {
if(!$this.isHidden()) {
$(document.body).children('.ui-widget-overlay').css({
'width': $(document).width()
,'height': $(document).height()
});
}
});
},
show: function() {
this.center();
this.panel.css('z-index', ++PrimeFaces.zindex).show();
if(!this.isModalActive()) {
this.enableModality();
}
if(this.cfg.onShow) {
this.cfg.onShow.call(this);
}
},
hide: function() {
this.panel.fadeOut();
this.disableModality();
this.caption.hide();
if(this.cfg.mode == 'image') {
this.imageDisplay.hide().attr('src', '').removeAttr('style');
this.hideNavigators();
}
if(this.cfg.onHide) {
this.cfg.onHide.call(this);
}
},
center: function() {
var win = $(window),
left = (win.width() / 2 ) - (this.panel.width() / 2),
top = (win.height() / 2 ) - (this.panel.height() / 2);
this.panel.css({
'left': left,
'top': top
});
},
enableModality: function() {
$(document.body).append('').
children(this.jqId + '_modal').css({
'width': $(document).width()
,'height': $(document).height()
,'z-index': this.panel.css('z-index') - 1
});
},
disableModality: function() {
$(document.body).children(this.jqId + '_modal').remove();
},
isModalActive: function() {
return $(document.body).children(this.jqId + '_modal').length === 1;
},
showNavigators: function() {
this.navigators.zIndex(this.imageDisplay.zIndex() + 1).show();
},
hideNavigators: function() {
this.navigators.hide();
},
addOnshowHandler: function(fn) {
this.onshowHandlers.push(fn);
},
isHidden: function() {
return this.panel.is(':hidden');
},
showURL: function(opt) {
if(opt.width)
this.iframe.attr('width', opt.width);
if(opt.height)
this.iframe.attr('height', opt.height);
this.iframe.attr('src', opt.src);
this.captionText.text(opt.title||'');
this.caption.slideDown();
this.show();
}
});