Toggle data & raw

rest_framework/static/rest_framework/docs/css/base.css

@@ -3,6 +3,11 @@
   padding-right: 30px;
 }
 
+.btn:focus,
+.btn:focus:active {
+  outline: none;
+}
+
 .sidebar {
   overflow: auto;
   font-family: verdana;
@@ -308,7 +313,7 @@ body {
   color: #93c54b;
 }
 
-.api-modal .modal-body .request-info {
+.api-modal .modal-body .request-awaiting {
   background-color: #f8f5f0;
   text-align: center;
   padding: 5px 10px;
@@ -329,3 +334,12 @@ body {
     padding: .2em .6em .3em;
     font-size: 14px;
 }
+
+.api-modal .modal-content .toggle-view {
+  text-align: right;
+  float: right;
+} 
+
+.api-modal .modal-content .response .well {
+  margin: 0;
+}

rest_framework/templates/rest_framework/docs/index.html

@@ -122,15 +122,18 @@
                 })
 
                 function requestCallback(request) {
-                    var requestText = request.options.method + ' ' + request.url;
-
-                    var parser = document.createElement('a');
+                    let parser = document.createElement('a');
                     parser.href = request.url;
+                    const method = request.options.method
+                    const path = parser.pathname + parser.hash + parser.search
 
-                    form.find(".request-response").text(requestText)
-                    form.find(".request-response").removeClass("hide")
-                    form.find(".request-method").text(request.options.method)
-                    form.find(".request-url").text(parser.pathname + parser.hash + parser.search)
+                    // Filling the main response meta
+                    form.closest(".modal-content").find(".toggle-view").removeClass("hide")
+                    form.find(".request-method").text(method)
+                    form.find(".request-url").text(path)
+
+                    // Filling the raw panel
+                    form.find(".response-raw-request").text(method + ' ' + path + '\n\n')
                 }
 
                 function responseCallback(response) {
@@ -144,27 +147,38 @@
                     form.find(".response-status-code").text(response.status)
                     
                     form.find(".meta").removeClass("hide")
+                    
+                    // Filling the raw panel
+                    console.log(response);
+                    form.find(".response-raw-response").text('HTTP/1.1 ' + response.status + ' ' + response.statusText)
                 }
 
                 const client = new coreapi.Client({csrf: csrf, requestCallback: requestCallback, responseCallback: responseCallback})
 
                 client.action(doc, key, params).then(function (data) {
                     var response = JSON.stringify(data, null, 2);
-                    form.find(".request-info").addClass("hide")
+                    form.find(".request-awaiting").addClass("hide")
                     form.find(".response-data").text(response)
                     form.find(".response-data").removeClass("hide")
-                    form.find(".response-error").addClass("hide")
                 }).catch(function (error) {
                     var response = JSON.stringify(error.content, null, 2);
-                    form.find(".request-info").addClass("hide")
-                    form.find(".response-error").text(error.message)
+                    form.find(".request-awaiting").addClass("hide")
                     form.find(".response-data").text(response)
-                    form.find(".response-error").removeClass("hide")
                     form.find(".response-data").removeClass("hide")
-
-                    /*form.find(".response-data").addClass("hide")*/
                 })
             });
+
+            $('.toggle-view button').click(function() {
+                var selectedView = $(this).data("display-toggle");
+                $(this).removeClass("btn-default").addClass('btn-info').siblings().removeClass('btn-info');
+                if (selectedView === 'raw') {
+                    $(this).closest(".modal-content").find(".response-raw").removeClass("hide");
+                    $(this).closest(".modal-content").find(".response-data").addClass("hide");
+                } else {
+                    $(this).closest(".modal-content").find(".response-data").removeClass("hide");
+                    $(this).closest(".modal-content").find(".response-raw").addClass("hide");
+                }
+            });
         </script>
     </body>
 </html>

rest_framework/templates/rest_framework/docs/interact.html

@@ -5,8 +5,15 @@
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <div class="toggle-view hide">
+        <div class="btn-group" role="group">
+          <button type="button" data-display-toggle="data" class="btn btn-sm btn-info">Data</button>
+          <button type="button" data-display-toggle="raw" class="btn btn-sm">Raw</button>
+        </div>
+      </div>
+
       <h3 class="modal-title"><i class="fa fa-exchange"></i> {{ link.title|default:link_key }}</h3>
+
     </div>
 
     <form data-key='["{{ section_key }}", "{{ link_key }}"]'>
@@ -16,8 +23,10 @@
           {% form_for_link link %}
         </div>
 
+        <hr class="hidden-lg hidden-xl" />
+
         <div class="col-lg-6 response" id="response">
-          <div class="request-info">Awaiting request</div>
+          <div class="request-awaiting">Awaiting request</div>
 
           <div class="meta hide">
             <span class="label label-primary request-method"></span>
@@ -25,9 +34,8 @@
             <label class="label label-lg response-status-code pull-right"></label>
           </div>
 
-          <pre class="request-response hide"></pre>
-
-          <pre class="response-data hide"></pre>
+          <pre class="well response-data hide"></pre>
+          <pre class="well response-raw hide"><div class="response-raw-request"></div><div class="response-raw-response"></div></pre>
         </div>
       </div>
     </div>