Use $.facebox for dialog if its available

This commit is contained in:
Joshua Peek
2011-09-27 17:13:53 -05:00
parent 381a963971
commit 755c303008
@@ -11,12 +11,23 @@
debugOn: false, debugOn: false,
markupCreated: false, markupCreated: false,
markup: '',
attachEvents: function( evtOK ) { attachEvents: function( evtOK ) {
$('#gollum-dialog-action-ok').click(function( e ) { $('#gollum-dialog-action-ok').click(function( e ) {
Dialog.eventOK( e, evtOK ); Dialog.eventOK( e, evtOK );
}); });
$('#gollum-dialog-action-cancel').click( Dialog.eventCancel ); $('#gollum-dialog-action-cancel').click( Dialog.eventCancel );
$('#gollum-dialog-dialog input[type="text"]').keydown(function( e ) {
if ( e.keyCode == 13 ) {
Dialog.eventOK( e, evtOK );
}
});
},
detachEvents: function() {
$('#gollum-dialog-action-ok').unbind('click');
$('#gollum-dialog-action-cancel').unbind('click');
}, },
createFieldMarkup: function( fieldArray ) { createFieldMarkup: function( fieldArray ) {
@@ -70,21 +81,35 @@
createMarkup: function( title, body ) { createMarkup: function( title, body ) {
Dialog.markupCreated = true; Dialog.markupCreated = true;
return '<div id="gollum-dialog-dialog">' + if ($.facebox) {
'<div id="gollum-dialog-dialog-inner">' + return '<div id="gollum-dialog-dialog">' +
'<div id="gollum-dialog-dialog-bg">' + '<div id="gollum-dialog-dialog-title"><h4>' +
'<div id="gollum-dialog-dialog-title"><h4>' + title +'</h4></div>' +
title +'</h4></div>' + '<div id="gollum-dialog-dialog-body">' + body + '</div>' +
'<div id="gollum-dialog-dialog-body">' + body + '</div>' + '<div id="gollum-dialog-dialog-buttons">' +
'<div id="gollum-dialog-dialog-buttons">' + '<a href="#" title="Cancel" id="gollum-dialog-action-cancel" ' +
'<a href="#" title="Cancel" id="gollum-dialog-action-cancel" ' + 'class="gollum-minibutton">Cancel</a>' +
'class="minibutton">Cancel</a>' + '<a href="#" title="OK" id="gollum-dialog-action-ok" '+
'<a href="#" title="OK" id="gollum-dialog-action-ok" '+ 'class="gollum-minibutton">OK</a>' +
'class="minibutton">OK</a>' + '</div>' +
'</div>' + '</div>';
'</div>' + } else {
'</div>' + return '<div id="gollum-dialog-dialog">' +
'</div>'; '<div id="gollum-dialog-dialog-inner">' +
'<div id="gollum-dialog-dialog-bg">' +
'<div id="gollum-dialog-dialog-title"><h4>' +
title +'</h4></div>' +
'<div id="gollum-dialog-dialog-body">' + body + '</div>' +
'<div id="gollum-dialog-dialog-buttons">' +
'<a href="#" title="Cancel" id="gollum-dialog-action-cancel" ' +
'class="minibutton">Cancel</a>' +
'<a href="#" title="OK" id="gollum-dialog-action-ok" '+
'class="minibutton">OK</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
}
}, },
eventCancel: function( e ) { eventCancel: function( e ) {
@@ -111,16 +136,22 @@
}, },
hide: function() { hide: function() {
if ( $.browser.msie ) { if ( $.facebox ) {
$('#gollum-dialog-dialog').hide().removeClass('active'); Dialog.markupCreated = false;
$('select').css('visibility', 'visible'); $(document).trigger('close.facebox');
Dialog.detachEvents();
} else { } else {
$('#gollum-dialog-dialog').animate({ opacity: 0 }, { if ( $.browser.msie ) {
duration: 200, $('#gollum-dialog-dialog').hide().removeClass('active');
complete: function() { $('select').css('visibility', 'visible');
$('#gollum-dialog-dialog').removeClass('active'); } else {
} $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
}); duration: 200,
complete: function() {
$('#gollum-dialog-dialog').removeClass('active');
}
});
}
} }
}, },
@@ -149,14 +180,31 @@
} }
if ( Dialog.markupCreated ) { if ( Dialog.markupCreated ) {
$('#gollum-dialog-dialog').remove(); if ($.facebox) {
$(document).trigger('close.facebox');
} else {
$('#gollum-dialog-dialog').remove();
}
} }
var $dialog = $( Dialog.createMarkup( title, body ) );
$('body').append( $dialog ); Dialog.markup = Dialog.createMarkup( title, body );
if ( argObject.OK &&
typeof argObject.OK == 'function' ) { if ($.facebox) {
Dialog.attachEvents( argObject.OK ); $(document).bind('reveal.facebox', function() {
if ( argObject.OK &&
typeof argObject.OK == 'function' ) {
Dialog.attachEvents( argObject.OK );
$($('#facebox input[type="text"]').get(0)).focus();
}
});
} else {
$('body').append( Dialog.markup );
if ( argObject.OK &&
typeof argObject.OK == 'function' ) {
Dialog.attachEvents( argObject.OK );
}
} }
Dialog.show(); Dialog.show();
}, },
@@ -165,22 +213,26 @@
debug('Dialog: No markup to show. Please use init first.'); debug('Dialog: No markup to show. Please use init first.');
} else { } else {
debug('Showing dialog'); debug('Showing dialog');
if ( $.browser.msie ) { if ($.facebox) {
$('#gollum-dialog.dialog').addClass('active'); $.facebox( Dialog.markup );
Dialog.position();
$('select').css('visibility', 'hidden');
} else { } else {
$('#gollum-dialog.dialog').css('display', 'none'); if ( $.browser.msie ) {
$('#gollum-dialog-dialog').animate({ opacity: 0 }, { $('#gollum-dialog.dialog').addClass('active');
duration: 0, Dialog.position();
complete: function() { $('select').css('visibility', 'hidden');
$('#gollum-dialog-dialog').css('display', 'block'); } else {
Dialog.position(); // position this thing $('#gollum-dialog.dialog').css('display', 'none');
$('#gollum-dialog-dialog').animate({ opacity: 1 }, { $('#gollum-dialog-dialog').animate({ opacity: 0 }, {
duration: 0,
complete: function() {
$('#gollum-dialog-dialog').css('display', 'block');
Dialog.position(); // position this thing
$('#gollum-dialog-dialog').animate({ opacity: 1 }, {
duration: 500 duration: 500
}); });
} }
}); });
}
} }
} }
}, },
@@ -191,9 +243,14 @@
.css('height', dialogHeight + 'px') .css('height', dialogHeight + 'px')
.css('margin-top', -1 * parseInt( dialogHeight / 2 )); .css('margin-top', -1 * parseInt( dialogHeight / 2 ));
} }
}; };
if ($.facebox) {
$(document).bind('reveal.facebox', function() {
$('#facebox img.close_image').remove();
});
}
var debug = function(m) { var debug = function(m) {
if ( Dialog.debugOn if ( Dialog.debugOn
&& typeof console != 'undefined' ) { && typeof console != 'undefined' ) {