encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2025-02-10 16:40:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup and refactor docs api.js script

Browse Source
This commit is contained in:
José Padilla 2017-03-17 21:44:40 -04:00
parent d8507d3f9c
commit b0f2ec785e
No known key found for this signature in database
GPG Key ID: AAE3EF579B2987B1
1 changed files with 217 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,23 @@
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' })
}
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")
}) })
.replace(/(Www)/g, function ($1) {
return 'WWW'
})
.replace(/(Xss)/g, function ($1) {
return 'XSS'
})
.replace(/(Md5)/g, function ($1) {
return 'MD5'
})
}
function formEntries (form) { function formEntries (form) {
// Polyfill for new FormData(form).entries() // Polyfill for new FormData(form).entries()
@ -58,21 +49,54 @@ function formEntries (form) {
entries.push([name, value]) entries.push([name, value])
} }
} }
return entries return entries
} }
$(function () {
var $selectedAuthentication = $('#selected-authentication')
var $authControl = $('#auth-control')
var $authTokenModal = $('#auth_token_modal')
// Language Control
$('#language-control li').click(function (event) {
event.preventDefault()
var $languageMenuItem = $(this).find('a')
var $languageControls = $(this).closest('ul').find('li')
var $languageControlLinks = $languageControls.find('a')
var language = $languageMenuItem.data('language')
$languageControlLinks.not('[data-language="' + language + '"]').parent().removeClass('active')
$languageControlLinks.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')
})
// API Explorer // API Explorer
$('form.api-interaction').submit(function (event) { $('form.api-interaction').submit(function (event) {
event.preventDefault(); event.preventDefault()
const form = $(this).closest("form"); var $form = $(this).closest('form')
const key = form.data("key"); var $requestMethod = $form.find('.request-method')
var params = {}; 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])
const entries = formEntries(form.get()[0]);
for (var [paramKey, paramValue] of entries) { for (var [paramKey, paramValue] of entries) {
var elem = form.find("[name=" + paramKey + "]") var $elem = $form.find('[name=' + paramKey + ']')
var dataType = elem.data('type') || 'string' var dataType = $elem.data('type') || 'string'
if (dataType === 'integer' && paramValue) { if (dataType === 'integer' && paramValue) {
var value = parseInt(paramValue) var value = parseInt(paramValue)
@ -109,9 +133,9 @@ $('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
} }
@ -119,44 +143,44 @@ $('form.api-interaction').submit(function(event) {
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 +204,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 // 'Data'/'Raw' control
$('.toggle-view button').click(function () { $('.toggle-view button').click(function () {
responseDisplay = $(this).data("display-toggle"); var $modalContent = $(this).closest('.modal-content')
$(this).removeClass("btn-default").addClass('btn-info').siblings().removeClass('btn-info'); 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')
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')
}); })
})