code to display resources in default/list/expended style. style can be
passed as a option while creating swagerUi object. In future I would like to achieve this by passing options to templates and have a template helper method manipulate dom and apply correct classes.This approach will improve the performance as we need not go over the entire dom and call Doc.collapseOperationsForResource or Doc.expandOperationsForResource on each matched element
This commit is contained in:
Arjun Balla
@@ -1,162 +1,162 @@
|
||||
$(function() {
|
||||
|
||||
// Helper function for vertically aligning DOM elements
|
||||
// http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
|
||||
$.fn.vAlign = function() {
|
||||
return this.each(function(i){
|
||||
var ah = $(this).height();
|
||||
var ph = $(this).parent().height();
|
||||
var mh = (ph - ah) / 2;
|
||||
$(this).css('margin-top', mh);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.stretchFormtasticInputWidthToParent = function() {
|
||||
return this.each(function(i){
|
||||
var p_width = $(this).closest("form").innerWidth();
|
||||
var p_padding = parseInt($(this).closest("form").css('padding-left') ,10) + parseInt($(this).closest("form").css('padding-right'), 10);
|
||||
var this_padding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10);
|
||||
$(this).css('width', p_width - p_padding - this_padding);
|
||||
});
|
||||
};
|
||||
|
||||
$('form.formtastic li.string input, form.formtastic textarea').stretchFormtasticInputWidthToParent();
|
||||
|
||||
// Vertically center these paragraphs
|
||||
// Parent may need a min-height for this to work..
|
||||
$('ul.downplayed li div.content p').vAlign();
|
||||
|
||||
// When a sandbox form is submitted..
|
||||
$("form.sandbox").submit(function(){
|
||||
|
||||
var error_free = true;
|
||||
|
||||
// Cycle through the forms required inputs
|
||||
$(this).find("input.required").each(function() {
|
||||
|
||||
// Remove any existing error styles from the input
|
||||
$(this).removeClass('error');
|
||||
|
||||
// Tack the error style on if the input is empty..
|
||||
if ($(this).val() == '') {
|
||||
$(this).addClass('error');
|
||||
$(this).wiggle();
|
||||
error_free = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return error_free;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function clippyCopiedCallback(a) {
|
||||
$('#api_key_copied').fadeIn().delay(1000).fadeOut();
|
||||
|
||||
// var b = $("#clippy_tooltip_" + a);
|
||||
// b.length != 0 && (b.attr("title", "copied!").trigger("tipsy.reload"), setTimeout(function() {
|
||||
// b.attr("title", "copy to clipboard")
|
||||
// },
|
||||
// 500))
|
||||
}
|
||||
|
||||
// Logging function that accounts for browsers that don't have window.console
|
||||
function log() {
|
||||
if (window.console) console.log.apply(console,arguments);
|
||||
}
|
||||
|
||||
var Docs = {
|
||||
|
||||
shebang: function() {
|
||||
|
||||
// If shebang has an operation nickname in it..
|
||||
// e.g. /docs/#!/words/get_search
|
||||
var fragments = $.param.fragment().split('/');
|
||||
fragments.shift(); // get rid of the bang
|
||||
|
||||
switch (fragments.length) {
|
||||
case 1:
|
||||
// Expand all operations for the resource and scroll to it
|
||||
// log('shebang resource:' + fragments[0]);
|
||||
var dom_id = 'resource_' + fragments[0];
|
||||
|
||||
Docs.expandEndpointListForResource(fragments[0]);
|
||||
$("#"+dom_id).slideto({highlight: false});
|
||||
break;
|
||||
case 2:
|
||||
// Refer to the endpoint DOM element, e.g. #words_get_search
|
||||
// log('shebang endpoint: ' + fragments.join('_'));
|
||||
|
||||
// Expand Resource
|
||||
Docs.expandEndpointListForResource(fragments[0]);
|
||||
$("#"+dom_id).slideto({highlight: false});
|
||||
|
||||
// Expand operation
|
||||
var li_dom_id = fragments.join('_');
|
||||
var li_content_dom_id = li_dom_id + "_content";
|
||||
|
||||
// log("li_dom_id " + li_dom_id);
|
||||
// log("li_content_dom_id " + li_content_dom_id);
|
||||
|
||||
Docs.expandOperation($('#'+li_content_dom_id));
|
||||
$('#'+li_dom_id).slideto({highlight: false});
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
toggleEndpointListForResource: function(resource) {
|
||||
var elem = $('li#resource_' + Docs.escapeResourceName(resource) + ' ul.endpoints');
|
||||
if (elem.is(':visible')) {
|
||||
Docs.collapseEndpointListForResource(resource);
|
||||
} else {
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
}
|
||||
},
|
||||
|
||||
// Expand resource
|
||||
expandEndpointListForResource: function(resource) {
|
||||
$('#resource_' + resource).addClass('active');
|
||||
|
||||
var elem = $('li#resource_' + Docs.escapeResourceName(resource) + ' ul.endpoints');
|
||||
elem.slideDown();
|
||||
},
|
||||
|
||||
// Collapse resource and mark as explicitly closed
|
||||
collapseEndpointListForResource: function(resource) {
|
||||
$('#resource_' + resource).removeClass('active');
|
||||
|
||||
var elem = $('li#resource_' + Docs.escapeResourceName(resource) + ' ul.endpoints');
|
||||
elem.slideUp();
|
||||
},
|
||||
|
||||
expandOperationsForResource: function(resource) {
|
||||
// Make sure the resource container is open..
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
$('li#resource_' + Docs.escapeResourceName(resource) + ' li.operation div.content').each(function() {
|
||||
Docs.expandOperation($(this));
|
||||
});
|
||||
},
|
||||
|
||||
collapseOperationsForResource: function(resource) {
|
||||
// Make sure the resource container is open..
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
$('li#resource_' + Docs.escapeResourceName(resource) + ' li.operation div.content').each(function() {
|
||||
Docs.collapseOperation($(this));
|
||||
});
|
||||
},
|
||||
|
||||
escapeResourceName: function(resource) {
|
||||
return resource.replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]\^`{|}~]/g, "\\$&")
|
||||
},
|
||||
|
||||
expandOperation: function(elem) {
|
||||
elem.slideDown();
|
||||
},
|
||||
|
||||
collapseOperation: function(elem) {
|
||||
elem.slideUp();
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
// Helper function for vertically aligning DOM elements
|
||||
// http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
|
||||
$.fn.vAlign = function() {
|
||||
return this.each(function(i){
|
||||
var ah = $(this).height();
|
||||
var ph = $(this).parent().height();
|
||||
var mh = (ph - ah) / 2;
|
||||
$(this).css('margin-top', mh);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.stretchFormtasticInputWidthToParent = function() {
|
||||
return this.each(function(i){
|
||||
var p_width = $(this).closest("form").innerWidth();
|
||||
var p_padding = parseInt($(this).closest("form").css('padding-left') ,10) + parseInt($(this).closest("form").css('padding-right'), 10);
|
||||
var this_padding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10);
|
||||
$(this).css('width', p_width - p_padding - this_padding);
|
||||
});
|
||||
};
|
||||
|
||||
$('form.formtastic li.string input, form.formtastic textarea').stretchFormtasticInputWidthToParent();
|
||||
|
||||
// Vertically center these paragraphs
|
||||
// Parent may need a min-height for this to work..
|
||||
$('ul.downplayed li div.content p').vAlign();
|
||||
|
||||
// When a sandbox form is submitted..
|
||||
$("form.sandbox").submit(function(){
|
||||
|
||||
var error_free = true;
|
||||
|
||||
// Cycle through the forms required inputs
|
||||
$(this).find("input.required").each(function() {
|
||||
|
||||
// Remove any existing error styles from the input
|
||||
$(this).removeClass('error');
|
||||
|
||||
// Tack the error style on if the input is empty..
|
||||
if ($(this).val() == '') {
|
||||
$(this).addClass('error');
|
||||
$(this).wiggle();
|
||||
error_free = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return error_free;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function clippyCopiedCallback(a) {
|
||||
$('#api_key_copied').fadeIn().delay(1000).fadeOut();
|
||||
|
||||
// var b = $("#clippy_tooltip_" + a);
|
||||
// b.length != 0 && (b.attr("title", "copied!").trigger("tipsy.reload"), setTimeout(function() {
|
||||
// b.attr("title", "copy to clipboard")
|
||||
// },
|
||||
// 500))
|
||||
}
|
||||
|
||||
// Logging function that accounts for browsers that don't have window.console
|
||||
function log() {
|
||||
if (window.console) console.log.apply(console,arguments);
|
||||
}
|
||||
|
||||
var Docs = {
|
||||
|
||||
shebang: function() {
|
||||
|
||||
// If shebang has an operation nickname in it..
|
||||
// e.g. /docs/#!/words/get_search
|
||||
var fragments = $.param.fragment().split('/');
|
||||
fragments.shift(); // get rid of the bang
|
||||
|
||||
switch (fragments.length) {
|
||||
case 1:
|
||||
// Expand all operations for the resource and scroll to it
|
||||
// log('shebang resource:' + fragments[0]);
|
||||
var dom_id = 'resource_' + fragments[0];
|
||||
|
||||
Docs.expandEndpointListForResource(fragments[0]);
|
||||
$("#"+dom_id).slideto({highlight: false});
|
||||
break;
|
||||
case 2:
|
||||
// Refer to the endpoint DOM element, e.g. #words_get_search
|
||||
// log('shebang endpoint: ' + fragments.join('_'));
|
||||
|
||||
// Expand Resource
|
||||
Docs.expandEndpointListForResource(fragments[0]);
|
||||
$("#"+dom_id).slideto({highlight: false});
|
||||
|
||||
// Expand operation
|
||||
var li_dom_id = fragments.join('_');
|
||||
var li_content_dom_id = li_dom_id + "_content";
|
||||
|
||||
// log("li_dom_id " + li_dom_id);
|
||||
// log("li_content_dom_id " + li_content_dom_id);
|
||||
|
||||
Docs.expandOperation($('#'+li_content_dom_id));
|
||||
$('#'+li_dom_id).slideto({highlight: false});
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
toggleEndpointListForResource: function(resource) {
|
||||
var elem = $('li[id^=resource_' + Docs.escapeResourceName(resource) + '] ul.endpoints');
|
||||
if (elem.is(':visible')) {
|
||||
Docs.collapseEndpointListForResource(resource);
|
||||
} else {
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
}
|
||||
},
|
||||
|
||||
// Expand resource
|
||||
expandEndpointListForResource: function(resource) {
|
||||
$('[id^=resource_' + resource + ']').addClass('active');
|
||||
|
||||
var elem = $('li[id^=resource_' + Docs.escapeResourceName(resource) + '] ul.endpoints');
|
||||
elem.slideDown();
|
||||
},
|
||||
|
||||
// Collapse resource and mark as explicitly closed
|
||||
collapseEndpointListForResource: function(resource) {
|
||||
$('[id^=resource_' + resource + ']').removeClass('active');
|
||||
|
||||
var elem = $('li[id^=resource_' + Docs.escapeResourceName(resource) + '] ul.endpoints');
|
||||
elem.slideUp();
|
||||
},
|
||||
|
||||
expandOperationsForResource: function(resource) {
|
||||
// Make sure the resource container is open..
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
$('li[id^=resource_' + Docs.escapeResourceName(resource) + '] li.operation div.content').each(function() {
|
||||
Docs.expandOperation($(this));
|
||||
});
|
||||
},
|
||||
|
||||
collapseOperationsForResource: function(resource) {
|
||||
// Make sure the resource container is open..
|
||||
Docs.expandEndpointListForResource(resource);
|
||||
$('li[id^=resource_' + Docs.escapeResourceName(resource) + '] li.operation div.content').each(function() {
|
||||
Docs.collapseOperation($(this));
|
||||
});
|
||||
},
|
||||
|
||||
escapeResourceName: function(resource) {
|
||||
return resource.replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]\^`{|}~]/g, "\\$&")
|
||||
},
|
||||
|
||||
expandOperation: function(elem) {
|
||||
elem.slideDown();
|
||||
},
|
||||
|
||||
collapseOperation: function(elem) {
|
||||
elem.slideUp();
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user