encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2024-11-14 05:36:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5001 from jpadilla/docs-cleanup

Browse Source 
JavaScript cleanup in API Docs.
This commit is contained in:
Tom Christie 2017-03-22 14:01:00 +00:00 committed by GitHub
commit 0fdaf4f481
3 changed files with 238 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

304
rest_framework/static/rest_framework/docs/js/api.js
View File

@ -1,33 +1,24 @@
var responseDisplay = 'data'
var coreapi = window.coreapi
var schema = window.schema
function normalizeHTTPHeader (str) { function normalizeHTTPHeader (str) {
// Capitalize HTTP headers for display. // Capitalize HTTP headers for display.
return (str.charAt(0).toUpperCase() + str.substring(1)) return (str.charAt(0).toUpperCase() + str.substring(1))
.replace(/-(.)/g, function ($1) { return $1.toUpperCase() }) .replace(/-(.)/g, function ($1) {
.replace(/(Www)/g, function ($1) { return 'WWW' }) return $1.toUpperCase()
.replace(/(Xss)/g, function ($1) { return 'XSS' }) })
.replace(/(Md5)/g, function ($1) { return 'MD5' }) .replace(/(Www)/g, function ($1) {
return 'WWW'
})
.replace(/(Xss)/g, function ($1) {
return 'XSS'
})
.replace(/(Md5)/g, function ($1) {
return 'MD5'
})
} }
var responseDisplay = 'data'
const coreapi = window.coreapi
const schema = window.schema
// Language Control
$('#language-control li').click(function (event) {
event.preventDefault();
const languageMenuItem = $(this).find('a');
var language = languageMenuItem.data("language")
var languageControls = $(this).closest('ul').find('li');
languageControls.find('a').not('[data-language="' + language +'"]').parent().removeClass("active")
languageControls.find('a').filter('[data-language="' + language +'"]').parent().addClass("active")
$('#selected-language').text(language)
var codeBlocks = $('pre.highlight')
codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
codeBlocks.filter('[data-language="' + language +'"]').removeClass("hide")
})
function formEntries (form) { function formEntries (form) {
// Polyfill for new FormData(form).entries() // Polyfill for new FormData(form).entries()
var formData = new FormData(form) var formData = new FormData(form)
@ -37,42 +28,80 @@ function formEntries (form) {
var entries = [] var entries = []
for (var {name, type, value, files, checked, selectedOptions} of Array.from(form.elements)) { for (var i = 0; i < form.elements.length; i++) {
if (!name) { var element = form.elements[i]
if (!element.name) {
continue continue
} }
if (type === 'file') { if (element.type === 'file') {
for (var file of files) { for (var j = 0; j < element.files.length; j++) {
entries.push([name, file]) entries.push([element.name, element.files[j]])
} }
} else if (type === 'select-multiple' || type === 'select-one') { } else if (element.type === 'select-multiple' || element.type === 'select-one') {
for (var elm of Array.from(selectedOptions)) { for (var j = 0; j < element.selectedOptions.length; j++) {
entries.push([name, elm.value]) entries.push([element.name, element.selectedOptions[j].value])
} }
} else if (type === 'checkbox') { } else if (element.type === 'checkbox') {
if (checked) { if (element.checked) {
entries.push([name, value]) entries.push([element.name, element.value])
} }
} else { } else {
entries.push([name, value]) entries.push([element.name, element.value])
} }
} }
return entries return entries
} }
// API Explorer $(function () {
$('form.api-interaction').submit(function(event) { var $selectedAuthentication = $('#selected-authentication')
event.preventDefault(); var $authControl = $('#auth-control')
var $authTokenModal = $('#auth_token_modal')
const form = $(this).closest("form"); // Language Control
const key = form.data("key"); $('#language-control li').click(function (event) {
var params = {}; event.preventDefault()
var $languageMenuItem = $(this).find('a')
var $languageControls = $(this).closest('ul').find('li')
var $languageControlLinks = $languageControls.find('a')
var language = $languageMenuItem.data('language')
const entries = formEntries(form.get()[0]); $languageControlLinks.not('[data-language="' + language + '"]').parent().removeClass('active')
for (var [paramKey, paramValue] of entries) { $languageControlLinks.filter('[data-language="' + language + '"]').parent().addClass('active')
var elem = form.find("[name=" + paramKey + "]")
var dataType = elem.data('type') || 'string' $('#selected-language').text(language)
var $codeBlocks = $('pre.highlight')
$codeBlocks.not('[data-language="' + language + '"]').addClass('hide')
$codeBlocks.filter('[data-language="' + language + '"]').removeClass('hide')
})
// API Explorer
$('form.api-interaction').submit(function (event) {
event.preventDefault()
var $form = $(this).closest('form')
var $requestMethod = $form.find('.request-method')
var $requestUrl = $form.find('.request-url')
var $toggleView = $form.closest('.modal-content').find('.toggle-view')
var $responseStatusCode = $form.find('.response-status-code')
var $meta = $form.find('.meta')
var $responseRawResponse = $form.find('.response-raw-response')
var $requestAwaiting = $form.find('.request-awaiting')
var $responseRaw = $form.find('.response-raw')
var $responseData = $form.find('.response-data')
var key = $form.data('key')
var params = {}
var entries = formEntries($form.get()[0])
for (var i = 0; i < entries.length; i++) {
var entry = entries[i]
var paramKey = entry[0]
var paramValue = entry[1]
var $elem = $form.find('[name=' + paramKey + ']')
var dataType = $elem.data('type') || 'string'
if (dataType === 'integer' && paramValue) { if (dataType === 'integer' && paramValue) {
var value = parseInt(paramValue) var value = parseInt(paramValue)
@ -109,54 +138,54 @@ $('form.api-interaction').submit(function(event) {
} }
} }
form.find(":checkbox").each(function( index ) { $form.find(':checkbox').each(function (index) {
// Handle unselected checkboxes // Handle unselected checkboxes
var name = $(this).attr("name"); var name = $(this).attr('name')
if (!params.hasOwnProperty(name)) { if (!params.hasOwnProperty(name)) {
params[name] = false params[name] = false
} }
}) })
function requestCallback(request) { function requestCallback (request) {
// Fill in the "GET /foo/" display. // Fill in the "GET /foo/" display.
var parser = document.createElement('a'); var parser = document.createElement('a')
parser.href = request.url; parser.href = request.url
const method = request.options.method var method = request.options.method
const path = parser.pathname + parser.hash + parser.search var path = parser.pathname + parser.hash + parser.search
form.find(".request-method").text(method) $requestMethod.text(method)
form.find(".request-url").text(path) $requestUrl.text(path)
} }
function responseCallback(response, responseText) { function responseCallback (response, responseText) {
// Display the 'Data'/'Raw' control. // Display the 'Data'/'Raw' control.
form.closest(".modal-content").find(".toggle-view").removeClass("hide") $toggleView.removeClass('hide')
// Fill in the "200 OK" display. // Fill in the "200 OK" display.
form.find(".response-status-code").removeClass("label-success").removeClass("label-danger") $responseStatusCode.removeClass('label-success').removeClass('label-danger')
if (response.ok) { if (response.ok) {
form.find(".response-status-code").addClass("label-success") $responseStatusCode.addClass('label-success')
} else { } else {
form.find(".response-status-code").addClass("label-danger") $responseStatusCode.addClass('label-danger')
} }
form.find(".response-status-code").text(response.status) $responseStatusCode.text(response.status)
form.find(".meta").removeClass("hide") $meta.removeClass('hide')
// Fill in the Raw HTTP response display. // Fill in the Raw HTTP response display.
var panelText = 'HTTP/1.1 ' + response.status + ' ' + response.statusText + '\n'; var panelText = 'HTTP/1.1 ' + response.status + ' ' + response.statusText + '\n'
response.headers.forEach(function(header, key) { response.headers.forEach(function (header, key) {
panelText += normalizeHTTPHeader(key) + ': ' + header + '\n' panelText += normalizeHTTPHeader(key) + ': ' + header + '\n'
}) })
if (responseText) { if (responseText) {
panelText += '\n' + responseText panelText += '\n' + responseText
} }
form.find(".response-raw-response").text(panelText) $responseRawResponse.text(panelText)
} }
// Instantiate a client to make the outgoing request. // Instantiate a client to make the outgoing request.
var options = { var options = {
requestCallback: requestCallback, requestCallback: requestCallback,
responseCallback: responseCallback, responseCallback: responseCallback
} }
// Setup authentication options. // Setup authentication options.
@ -180,101 +209,104 @@ $('form.api-interaction').submit(function(event) {
}) })
} }
const client = new coreapi.Client(options) var client = new coreapi.Client(options)
client.action(schema, key, params).then(function (data) { client.action(schema, key, params).then(function (data) {
var response = JSON.stringify(data, null, 2); var response = JSON.stringify(data, null, 2)
form.find(".request-awaiting").addClass("hide") $requestAwaiting.addClass('hide')
form.find(".response-raw").addClass("hide") $responseRaw.addClass('hide')
form.find(".response-data").addClass("hide") $responseData.addClass('hide').text('').jsonView(response)
form.find(".response-data").text('')
form.find(".response-data").jsonView(response)
if (responseDisplay === 'data') { if (responseDisplay === 'data') {
form.find(".response-data").removeClass("hide") $responseData.removeClass('hide')
} else { } else {
form.find(".response-raw").removeClass("hide") $responseRaw.removeClass('hide')
} }
}).catch(function (error) { }).catch(function (error) {
var response = JSON.stringify(error.content, null, 2); var response = JSON.stringify(error.content, null, 2)
form.find(".request-awaiting").addClass("hide") $requestAwaiting.addClass('hide')
form.find(".response-raw").addClass("hide") $responseRaw.addClass('hide')
form.find(".response-data").addClass("hide") $responseData.addClass('hide').text('').jsonView(response)
form.find(".response-data").text('')
form.find(".response-data").jsonView(response)
if (responseDisplay === 'data') { if (responseDisplay === 'data') {
form.find(".response-data").removeClass("hide") $responseData.removeClass('hide')
} else { } else {
form.find(".response-raw").removeClass("hide") $responseRaw.removeClass('hide')
} }
}) })
}); })
// 'Data'/'Raw' control
$('.toggle-view button').click(function () {
var $modalContent = $(this).closest('.modal-content')
var $modalResponseRaw = $modalContent.find('.response-raw')
var $modalResponseData = $modalContent.find('.response-data')
responseDisplay = $(this).data('display-toggle')
$(this).removeClass('btn-default').addClass('btn-info').siblings().removeClass('btn-info')
// 'Data'/'Raw' control
$('.toggle-view button').click(function() {
responseDisplay = $(this).data("display-toggle");
$(this).removeClass("btn-default").addClass('btn-info').siblings().removeClass('btn-info');
if (responseDisplay === 'raw') { if (responseDisplay === 'raw') {
$(this).closest(".modal-content").find(".response-raw").removeClass("hide"); $modalResponseRaw.removeClass('hide')
$(this).closest(".modal-content").find(".response-data").addClass("hide"); $modalResponseData.addClass('hide')
} else { } else {
$(this).closest(".modal-content").find(".response-data").removeClass("hide"); $modalResponseData.removeClass('hide')
$(this).closest(".modal-content").find(".response-raw").addClass("hide"); $modalResponseRaw.addClass('hide')
} }
}); })
// Authentication: none // Authentication: none
$('#auth-control').find("[data-auth='none']").click(function (event) { $authControl.find("[data-auth='none']").click(function (event) {
event.preventDefault(); event.preventDefault()
window.auth = null; window.auth = null
$('#selected-authentication').text('none'); $selectedAuthentication.text('none')
$('#auth-control').children().removeClass('active'); $authControl.children().removeClass('active')
$('#auth-control').find("[data-auth='none']").addClass('active'); $authControl.find("[data-auth='none']").addClass('active')
}) })
// Authentication: token // Authentication: token
$('form.authentication-token-form').submit(function(event) { $('form.authentication-token-form').submit(function (event) {
event.preventDefault(); event.preventDefault()
const form = $(this).closest("form"); var $form = $(this).closest('form')
const scheme = form.find('input#scheme').val(); var scheme = $form.find('input#scheme').val()
const token = form.find('input#token').val(); var token = $form.find('input#token').val()
window.auth = { window.auth = {
'type': 'token', 'type': 'token',
'scheme': scheme, 'scheme': scheme,
'token': token 'token': token
}; }
$('#selected-authentication').text('token'); $selectedAuthentication.text('token')
$('#auth-control').children().removeClass('active'); $authControl.children().removeClass('active')
$('#auth-control').find("[data-auth='token']").addClass('active'); $authControl.find("[data-auth='token']").addClass('active')
$('#auth_token_modal').modal('hide'); $authTokenModal.modal('hide')
}); })
// Authentication: basic // Authentication: basic
$('form.authentication-basic-form').submit(function(event) { $('form.authentication-basic-form').submit(function (event) {
event.preventDefault(); event.preventDefault()
const form = $(this).closest("form"); var $form = $(this).closest('form')
const username = form.find('input#username').val(); var username = $form.find('input#username').val()
const password = form.find('input#password').val(); var password = $form.find('input#password').val()
window.auth = { window.auth = {
'type': 'basic', 'type': 'basic',
'username': username, 'username': username,
'password': password 'password': password
}; }
$('#selected-authentication').text('basic'); $selectedAuthentication.text('basic')
$('#auth-control').children().removeClass('active'); $authControl.children().removeClass('active')
$('#auth-control').find("[data-auth='basic']").addClass('active'); $authControl.find("[data-auth='basic']").addClass('active')
$('#auth_basic_modal').modal('hide'); $authTokenModal.modal('hide')
}); })
// Authentication: session // Authentication: session
$('form.authentication-session-form').submit(function(event) { $('form.authentication-session-form').submit(function (event) {
event.preventDefault(); event.preventDefault()
window.auth = { window.auth = {
'type': 'session', 'type': 'session'
}; }
$('#selected-authentication').text('session'); $selectedAuthentication.text('session')
$('#auth-control').children().removeClass('active'); $authControl.children().removeClass('active')
$('#auth-control').find("[data-auth='session']").addClass('active'); $authControl.find("[data-auth='session']").addClass('active')
$('#auth_session_modal').modal('hide'); $authTokenModal.modal('hide')
}); })
})

42
rest_framework/static/rest_framework/docs/js/base.js
View File

@ -1,42 +0,0 @@
function getSearchTerm()
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == 'q')
{
return sParameterName[1];
}
}
}
$(document).ready(function() {
var search_term = getSearchTerm(),
$search_modal = $('#mkdocs_search_modal');
if(search_term){
$search_modal.modal();
}
// make sure search input gets autofocus everytime modal opens.
$search_modal.on('shown.bs.modal', function () {
$search_modal.find('#mkdocs-search-query').focus();
});
// Highlight.js
hljs.initHighlightingOnLoad();
$('table').addClass('table table-striped table-hover');
});
$('body').scrollspy({
target: '.bs-sidebar',
});
/* Prevent disabled links from causing a page reload */
$("li.disabled a").click(function() {
event.preventDefault();
});

8
rest_framework/templates/rest_framework/docs/sidebar.html
View File

@ -22,10 +22,10 @@
<a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span> <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
</li> </li>
<ul class="sub-menu collapse out" id="auth-control"> <ul class="sub-menu collapse out" id="auth-control">
<li data-auth="none" {% if not user.is_authenticated %}class="active"{% endif %}><a href="#" data-language="none">none</a></li> <li {% if not user.is_authenticated %}class="active"{% endif %}><a data-auth="none" href="#">none</a></li>
<li data-auth="token" data-toggle="modal" data-target="#auth_token_modal"><a href="#">token</a></li> <li><a data-auth="token" data-toggle="modal" data-target="#auth_token_modal" href="#">token</a></li>
<li data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal"><a href="#">basic</a></li> <li><a data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal" href="#">basic</a></li>
<li data-auth="session" data-toggle="modal" data-target="#auth_session_modal" {% if user.is_authenticated %}class="active"{% endif %}><a href="#">session</a></li> <li {% if user.is_authenticated %}class="active"{% endif %}><a data-auth="session" data-toggle="modal" data-target="#auth_session_modal" href="#">session</a></li>
</ul> </ul>
<li data-toggle="collapse" data-target="#language-control" class="collapsed"> <li data-toggle="collapse" data-target="#language-control" class="collapsed">