Use button group for methods

Author: Emmanouil Konstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -58,7 +58,7 @@ $( document ).ready(function() {
 
   var makeRequest = function () {
     var url = $('#requestForm #urlInput').val();
-    var method = 'POST';
+    var method = $("#methods").find( ".active" ).text();
 
     $.ajax({
       url: url,
@@ -77,29 +77,18 @@ $( document ).ready(function() {
     $('#urlInput').val(data.path);
 
     // List Methods (Radio Buttons)
-    // FIXME: Use regex - conver to JSON
+    // FIXME: Use regex - convert to JSON
     var methods = data.methods.replace("[", "").replace("]", "").replace(/'/g, "").replace(/\s/g, "").split(',');
-
     $.each( methods, function( i, method ) {
-      var methodClass = "radio-inline method " + method.toLowerCase();
-      $('#methods').append("" +
-        "<label class='" + methodClass + "'>"+
-        "<input type='radio' name='methodRadio' value='" + method + "'>" + method +
-        "</label>" +
-      "")
+      var methodClass = "btn btn-sm method " + method.toLowerCase();
+      $('#methods').append("<button type='button' class='" + methodClass + "'>" + method + "</button>");
     });
 
-    $(".radio-inline.method").off().on('click', function (evt) {
-      // Prevent the event firing twice
-      evt.stopPropagation();
-      evt.preventDefault();
-
-      // Uncheck all checkboxes and
-      // Check the clicked radio
-      $('.radio-inline.method').removeClass('active');
-      $('.radio-inline.method').children('input').attr('checked', false);
-      $(this).addClass("active");
-      $(this).children('input').first().attr('checked', true);
+    $('#methods').children(".btn").first().addClass( 'active' );
+
+    $("#methods .method").on('click', function (evt) {
+      $("#methods .method").removeClass( 'active' );
+      $(this).addClass( 'active' );
     });
 
     $('#requestForm').submit(function (e) {
@@ -111,9 +100,10 @@ $( document ).ready(function() {
     });
   };
 
-  $('.plug').bind('click', function(e) {
+  $('.plug').bind('click', function(evt) {
     // Prevent the accordion from collapsing
-    e.stopPropagation();
+    evt.stopPropagation();
+    evt.preventDefault();
 
     // Open Modal
     $('#liveAPIModal').modal('toggle');

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -176,23 +176,20 @@ body {
     .methods {
 
       .method {
-        padding: 4px 8px;
         color: #FFF;
+        background-color: @gray-light;
+        border-left: 1px solid @gray;
 
-        &.get { background-color: @GetColor; }
-        &.post { background-color: @PostColor; }
-        &.patch { background-color: @PutColor; }
-        &.put { background-color: @PatchColor; }
-        &.delete { background-color: @DeleteColor; }
-        &.options { background-color: @OptionsColor; }
-
-        &.active {
-          border: 2px solid red;
+        &:first-child {
+          border-left: 0;
         }
 
-        input[type='radio'] {
-          display: none;
-        }
+        &.get.active { background-color: @GetColor; }
+        &.post.active { background-color: @PostColor; }
+        &.patch.active { background-color: @PutColor; }
+        &.put.active { background-color: @PatchColor; }
+        &.delete.active { background-color: @DeleteColor; }
+        &.options.active { background-color: @OptionsColor; }
       }
     }
   }

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -106,7 +106,7 @@ <h3>Request</h3>
                   <input type="text" class="form-control" id="urlInput" placeholder="Url">
                 </div>
 
-                <div id="methods" class="methods"></div>
+                <div class="btn-group methods" id="methods" role="group"></div>
 
                 <h5>Headers</h5>
                 <div class="form-group">