Created
January 30, 2015 15:33
-
-
Save mudhairless/fe9285601ceba227b6b7 to your computer and use it in GitHub Desktop.
My fix for xtLightbox not centering in IE11
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
--- | |
name: XtLightbox.Renderer.Lightbox | |
description: extendable lightbox default Lightbox Renderer | |
license: MIT-style | |
authors: | |
- Anton Suprun <kpobococ@gmail.com> | |
requires: [Core/Fx.Tween, Core/Fx.Morph, XtLightbox.Renderer] | |
provides: [XtLightbox.Renderer.Lightbox] | |
... | |
*/ | |
XtLightbox.Renderer.Lightbox = new Class({ | |
Extends: XtLightbox.Renderer, | |
options: { | |
maskFxOptions: {}, | |
widthFxOptions: {}, | |
heightFxOptions: {}, | |
contentFxOptions: {}, | |
footerFxOptions: {}, | |
hideArrowsFor: ['YouTube', 'Vimeo'] | |
}, | |
create: function(){ | |
this.parent(); | |
this.fxWidth = new Fx.Morph(this.element, Object.merge({}, this.options.widthFxOptions, { | |
onStart: function(){}, | |
onCancel: function(){}, | |
onComplete: function(){ | |
this.onWidthChange(); | |
}.bind(this) | |
})); | |
this.fxTop = new Fx.Tween(this.element, Object.merge({}, this.options.heightFxOptions, { | |
property: 'top', | |
onStart: function(){}, | |
onCancel: function(){}, | |
onComplete: function(){} | |
})); | |
this.fxHeight = new Fx.Tween(this.elContent, Object.merge({}, this.options.heightFxOptions, { | |
property: 'height', | |
onStart: function(){}, | |
onCancel: function(){}, | |
onComplete: function(){ | |
this.onHeightChange(); | |
}.bind(this) | |
})); | |
this.fxContent = new Fx.Tween(this.elContent, Object.merge({}, this.options.contentFxOptions, { | |
property: 'opacity', | |
onStart: function(){}, | |
onCancel: function(){}, | |
onComplete: function(){ | |
this.onContentRender(); | |
}.bind(this) | |
})); | |
this.fxFooter = new Fx.Tween(this.elFooter, Object.merge({}, this.options.footerFxOptions, { | |
property: 'height', | |
onStart: function(){ | |
this.elFooter.setStyle('overflow', 'hidden'); | |
}.bind(this), | |
onCancel: function(){}, | |
onComplete: function(){ | |
this.elFooter.setStyle('overflow', ''); | |
}.bind(this) | |
})); | |
}, | |
destroy: function(){ | |
delete this.fxWidth; | |
delete this.fxTop; | |
delete this.fxHeight; | |
delete this.fxContent; | |
delete this.fxFooter; | |
return this.parent(); | |
}, | |
inject: function(){ | |
this.parent(); | |
this.removeEvents('show').removeEvents('hide'); | |
if (this.mask){ | |
this.mask.addEvent('click', this.fireEvent.pass('close', this)); | |
var fxShow = new Fx.Tween(this.mask, Object.merge({}, this.options.maskFxOptions, { | |
property: 'opacity', | |
onStart: function(){ | |
this.show(); | |
}.bind(this.mask), | |
onCancel: function(){}, | |
onComplete: function(){} | |
})); | |
var fxHide = new Fx.Tween(this.mask, Object.merge({}, this.options.maskFxOptions, { | |
property: 'opacity', | |
onStart: function(){}, | |
onCancel: function(){}, | |
onComplete: function(){ | |
this.hide(); | |
}.bind(this.mask) | |
})); | |
var mo = this.options.maskOpacity || this.mask.toElement().getStyle('opacity') || 1; | |
this.mask.toElement().setStyle('opacity', 0); | |
this.addEvents({ | |
show: function(){ | |
fxHide.cancel(); | |
fxShow.start(mo); | |
}, | |
hide: function(){ | |
fxShow.cancel(); | |
fxHide.start(0); | |
} | |
}); | |
} | |
}, | |
empty: function(){ | |
this.parent(); | |
this.elFooter.setStyle('display', 'none'); | |
this.btnPrev.setStyle('display', 'none'); | |
this.btnNext.setStyle('display', 'none'); | |
this._opts = {}; | |
this._cont = null; | |
this._fwopts = null; | |
this.fxHeight.cancel(); | |
this.fxTop.cancel(); | |
this.fxWidth.cancel(); | |
this.fxContent.cancel(); | |
this.fxFooter.cancel(); | |
return this; | |
}, | |
render: function(content, options){ | |
if (!content) return this; | |
options = Object.append({ | |
close: true | |
}, options); | |
this.empty(); | |
this.elTitle.set('text', options.title || ''); | |
if (options.position && options.total && (!this.options.hideSinglePosition || options.total > 1)){ | |
this.elPosition.set('text', this.options.positionText.substitute({ | |
x: options.position, | |
total: options.total | |
})); | |
} | |
this._opts = options; | |
this._cont = content; | |
this.resize(options.size); | |
return this; | |
}, | |
renderContent: function(){ | |
this.fxContent.set(0).start(1); | |
return this; | |
}, | |
onContentRender: function(){ | |
this.btnPrev.setStyle('display', this._opts.prev ? '' : 'none'); | |
this.btnNext.setStyle('display', this._opts.next ? '' : 'none'); | |
if (this.options.hideArrowsFor.contains(this._opts.adaptor) || (!this._opts.next && !this._opts.prev)) this.elArrows.setStyle('display', 'none'); | |
else this.elArrows.setStyle('display', ''); | |
this.btnClose.setStyle('display', this._opts.close ? '' : 'none'); | |
this.renderFooter(); | |
}, | |
renderFooter: function(){ | |
this.elFooter.setStyles({ | |
visibility: 'hidden', | |
display: '' | |
}); | |
var y = this.elFooter.getSize().y; | |
this.elFooter.setStyles({ | |
visibility: 'visible', | |
height: 0 | |
}); | |
this.fxFooter.start(y); | |
return this; | |
}, | |
resize: function(size){ | |
if (!this.shown) this.show(); | |
var winSize = window.getSize(), elSize; | |
if (size && size.x && size.y){ | |
this.elFooter.setStyles({ | |
display: '', | |
height: '' | |
}); | |
var elFull = this.element.getSize(); | |
var elBox = { | |
x: isNaN(this.elWrapper.getStyle('width').toInt()) ? elFull.x-40 : this.elWrapper.getStyle('width').toInt(), | |
y: isNaN(this.elWrapper.getStyle('height').toInt()) ? elFull.y : this.elWrapper.getStyle('height').toInt() | |
}; | |
var fY = this.elFooter.getSize().y; | |
this.elFooter.setStyle('display', 'none'); | |
elSize = { | |
x: elFull.x - elBox.x + size.x, | |
y: elFull.y - elBox.y + size.y + fY | |
}; | |
this._fwopts = { | |
width: elSize.x, | |
left: Math.round((winSize.x - elSize.x) / 2) | |
}; | |
if (size.y != this.elContent.getStyle('height').toInt()){ | |
this.resizing = true; | |
this.fxHeight.start(size.y); | |
this.fxTop.start(Math.round((winSize.y - elSize.y) / 2)); | |
} else this.onHeightChange(); | |
} else { | |
// Reset size | |
size = size || {}; | |
this.element.setStyle('width', size.x || ''); | |
this.elContent.setStyle('height', size.y || ''); | |
this.elFooter.setStyle('display', ''); | |
elSize = this.element.getSize(); | |
this.elFooter.setStyle('display', 'none'); | |
this.element.setStyles({ | |
left: Math.round((winSize.x - elSize.x) / 2), | |
top: Math.round((winSize.y - elSize.y) / 2) | |
}); | |
} | |
return this; | |
}, | |
onWidthChange: function(){ | |
this.resizing = false; | |
this.elContent.grab(this._cont); | |
this.renderContent(); | |
return this; | |
}, | |
onHeightChange: function(){ | |
if (this._fwopts.width != this.element.getStyle('width').toInt()) { | |
this.resizing = true; | |
this.fxWidth.start(this._fwopts); | |
} else this.onWidthChange(); | |
return this; | |
}, | |
reset: function(){ | |
if (!this.injected) return this; | |
this.resize(); | |
this.empty(); | |
this.elFooter.setStyle('display', 'none'); | |
return this; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment