/**
* gollum.dialog.js * * Used for dialogs. Duh. * */
(function($) {
var Dialog = { debugOn: false, markupCreated: false, markup: '', currentAspect: function(){ if (window.innerWidth < 480) return "small-mobile"; if ($('#gollum-dialog-dialog').css('position') == 'fixed') return "large-mobile"; return "desktop"; }, attachEvents: function( evtOK ) { $('#gollum-dialog-action-ok').click(function( e ) { Dialog.eventOK( e, evtOK ); }); $('#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 ) { var fieldMarkup = '<fieldset>'; for ( var i=0; i < fieldArray.length; i++ ) { if ( typeof fieldArray[i] == 'object' ) { fieldMarkup += '<div class="field">'; switch ( fieldArray[i].type ) { case 'text': fieldMarkup += Dialog.createFieldText( fieldArray[i] ); break; case 'file': fieldMarkup += Dialog.createFieldFile( fieldArray[i] ); break; default: break; } fieldMarkup += '</div>'; } } fieldMarkup += '</fieldset>'; return fieldMarkup; }, createFieldText: function( fieldAttributes ) { var html = ''; if ( fieldAttributes.name ) { html += '<label'; if ( fieldAttributes.id ) { html += ' for="gollum-dialog-dialog-generated-field-' + fieldAttributes.id + '"'; } html += '>' + fieldAttributes.name + '</label>'; } html += '<input type="text" class="form-control input-sm width-full"'; if ( fieldAttributes.id ) { html += ' name="' + fieldAttributes.id + '"' if ( fieldAttributes.type == 'code' ) { html+= ' class="code"'; } if ( fieldAttributes.defaultValue ) { html+= ' value="' + fieldAttributes.defaultValue.split('"').join('"') + '"'; } html += ' id="gollum-dialog-dialog-generated-field-' + fieldAttributes.id + '">'; } if( fieldAttributes.context ){ html += '<span class="context">' + fieldAttributes.context + '</span>'; } return html; }, createFieldFile: function( fieldAttributes ) { // Not actually a field, but an embedded form. var html = ''; var id = fieldAttributes.id || 'upload'; var name = fieldAttributes.name || 'file'; var action = fieldAttributes.action || routePath('upload_file'); html += '<form method=post enctype="multipart/form-data" ' + 'action="' + action + '" ' + 'id="' + id + '">'; html += '<input type=file name="' + name + '" class="form-control width-full">'; html += '</form>'; if( fieldAttributes.context ){ html += '<span class="context">' + fieldAttributes.context + '</span>'; } return html; }, createMarkup: function( title, body ) { Dialog.markupCreated = true; return '<div id="gollum-dialog-dialog">' + '<div id="gollum-dialog-dialog-inner" class="border rounded-1">' + '<div id="gollum-dialog-dialog-title"><h4 class="f2 border-bottom mb-3">' + title +'</h4></div>' + '<div id="gollum-dialog-dialog-body">' + body + '</div>' + '<div id="gollum-dialog-dialog-buttons" class="pt-2 float-right">' + '<button name="Cancel" id="gollum-dialog-action-cancel" ' + 'class="btn">Cancel</button>' + '<span class="px-1"></span>' + '<button name="OK" id="gollum-dialog-action-ok" '+ 'class="btn btn-primary">OK</button>' + '</div>' + '</div>' + '</div>'; }, eventCancel: function( e ) { e.preventDefault(); debug('Cancelled dialog.'); Dialog.hide(); }, eventOK: function( e, evtOK ) { e.preventDefault(); var results = []; // get the results from each field and build them into the object $('#gollum-dialog-dialog-body input').each(function() { results[$(this).attr('name')] = $(this).val(); }); // pass them to evtOK if it exists (which it should) if ( evtOK && typeof evtOK == 'function' ) { evtOK( results ); } Dialog.hide(); }, hide: function() { $('#gollum-dialog-dialog').animate({ opacity: 0 }, { duration: 200, complete: function() { $('#gollum-dialog-dialog').removeClass('active'); $('#gollum-dialog-dialog').css('display', 'none'); } }); $(window).unbind('resize', Dialog.resize); }, init: function( argObject ) { var title = ''; var body = ''; // bail out if necessary if ( !argObject || typeof argObject != 'object' ) { debug('Editor Dialog: Cannot init; invalid init object'); return; } if ( argObject.body && typeof argObject.body == 'string' ) { body = '<p>' + argObject.body + '</p>'; } // alright, build out fields if ( argObject.fields && typeof argObject.fields == 'object' ) { body += Dialog.createFieldMarkup( argObject.fields ); } if ( argObject.title && typeof argObject.title == 'string' ) { title = argObject.title; } if ( Dialog.markupCreated ) { $('#gollum-dialog-dialog').remove(); } Dialog.markup = Dialog.createMarkup( title, body ); $('body').append( Dialog.markup ); if ( argObject.OK && typeof argObject.OK == 'function' ) { Dialog.attachEvents( argObject.OK ); } Dialog.show(); }, show: function() { if ( !Dialog.markupCreated ) { debug('Dialog: No markup to show. Please use init first.'); } else { debug('Showing dialog'); $('#gollum-dialog.dialog').css('display', 'none'); $('#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 }); $($('#gollum-dialog-dialog input[type="text"]').get(0)).focus(); } }); $(window).bind('resize', Dialog.resize); } }, resize: function(){ Dialog.position(); }, position: function() { if (Dialog.currentAspect() == "small-mobile") { $('#gollum-dialog-dialog-inner').css('height', '100%').css('margin-top', 'auto'); } else if (Dialog.currentAspect() == "large-mobile") { $('#gollum-dialog-dialog-inner').css('height', 'auto').css('margin-top', 'auto'); } else if (Dialog.currentAspect() == "desktop") { var dialogHeight = $('#gollum-dialog-dialog-inner').height(); $('#gollum-dialog-dialog-inner') .css('height', dialogHeight + 'px') .css('margin-top', -1 * parseInt( dialogHeight / 2 )); } } }; var debug = function(m) { if ( Dialog.debugOn && typeof console != 'undefined' ) { console.log( m ); } }; $.GollumDialog = Dialog;
})(jQuery);