Please wait. This can take some minutes ...
Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.resources.primefaces.lightbox.lightbox.js Maven / Gradle / Ivy
/**
* 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.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.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();
}
});