Bug Fix: Login centering now works correctly

This also adds in additional functionality to the .center() plugin. A choice to animate centering and also the success event fired.
This commit is contained in:
Matthew Harrison-Jones 2013-08-20 11:55:44 +01:00
parent 0ce2958ee7
commit b4702a6dd0
2 changed files with 25 additions and 12 deletions

View File

@ -23,18 +23,31 @@
* Center an element to the window vertically and centrally
* @returns {*}
*/
$.fn.center = function () {
this.css({
'position': 'fixed',
'left': '50%',
'top': '50%'
$.fn.center = function (options) {
var $window = $(window),
config = $.extend({
animate : true,
successTrigger : 'centered'
}, options);
return this.each(function () {
var $this = $(this);
$this.css({
'position': 'absolute'
});
if (config.animate) {
$this.animate({
'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px',
'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px'
});
} else {
$this.css({
'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px',
'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px'
});
}
$(window).trigger(config.successTrigger);
});
this.css({
'margin-left': -this.outerWidth() / 2 + 'px',
'margin-top': -this.outerHeight() / 2 + 'px'
});
$(window).trigger('centered');
return this;
};
$.fn.selectText = function () {

View File

@ -254,7 +254,7 @@
},
afterRender: function () {
this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el);
this.$el.children(".js-modal").center().css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag
this.$el.children(".js-modal").center({animate: false}).css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag
this.$el.addClass("active dark");
if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters