swagger-ui/build/javascripts/swagger-ui.js

jQuery(function($) {

  // this.baseUrl = "http://swagr.api.wordnik.com/v4";

  // this.baseUrl = "http://petstore.swagger.wordnik.com/api";
  // this.apiKey = "special-key";
  
  var ApiSelectionController = Spine.Controller.create({
    proxied: ["showApi"],

    baseUrlList: new Array(),

    init: function() {
      if (this.supportsLocalStorage()) {
        var baseUrl = localStorage.getItem("com.wordnik.swagger.ui.baseUrl");
        var apiKey = localStorage.getItem("com.wordnik.swagger.ui.apiKey");

        if (baseUrl && baseUrl.length > 0)
        $("#input_baseUrl").val(baseUrl);

        if (apiKey && apiKey.length > 0)
        $("#input_apiKey").val(apiKey);

      } else {
        log("localStorage not supported, user will need to specifiy the api url");
      }

      $("a#explore").click(this.showApi);

      this.adaptToScale();
      $(window).resize(function() {
      	apiSelectionController.adaptToScale();
      });

    },
    
    adaptToScale: function() {
      // var form_width = $('form#api_selector').width();
      // var inputs_width = 0;
      // $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
      // 
      // // Update with of baseUrl input
      // var free_width = form_width - inputs_width;
      // $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
    },

    slapOn: function() {
      // messageController.showMessage("Please enter the base URL of the API that you wish to explore.");
      $("#content_message").show();
      
      $("#resources_container").hide();
      this.showApi();
    },

    supportsLocalStorage: function() {
      try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } catch(e) {
        return false;
      }
    },

    showApi: function() {
      var baseUrl = jQuery.trim($("#input_baseUrl").val());
      var apiKey = jQuery.trim($("#input_apiKey").val());
      if (baseUrl.length == 0) {
        $("#input_baseUrl").wiggle();
      } else {

        if (this.supportsLocalStorage()) {
          localStorage.setItem("com.wordnik.swagger.ui.apiKey", apiKey);
          localStorage.setItem("com.wordnik.swagger.ui.baseUrl", baseUrl);

        }
        var resourceListController = ResourceListController.init({
          baseUrl: baseUrl,
          apiKey: apiKey
        });
      }
    }
  });

  var MessageController = Spine.Controller.create({
    showMessage: function(msg) {
      if (msg) {
        $("#content_message").html(msg);
        $("#content_message").show();
      } else {
        $("#content_message").html("");
        $("#content_message").hide();
      }

    },

    clearMessage: function() {
      this.showMessage();
    }
  });
  var messageController = MessageController.init();

  // The following heirarchy is followed by these view controllers
  // ResourceListController
  //   >>> ResourceController
  // >>> ApiController
  //  >>> OperationController
  var ResourceListController = Spine.Controller.create({
    proxied: ["addAll", "addOne"],

    ApiResource: null,

    init: function() {
      if (this.baseUrl == null) {
        throw new Error("A baseUrl must be passed to ResourceListController");
      }

      $("#content_message").hide();
      $("#resources_container").hide();
      $("#resources").html("");

      // create and initialize SwaggerService
      var swaggerService = new SwaggerService(this.baseUrl, this.apiKey,
      function(msg) {
        if (msg)
        messageController.showMessage(msg);
        else
        messageController.showMessage("Fetching remote JSON...");
      });

      // $("#api_host_url").html(swaggerService.apiHost());
      
      swaggerService.init();

      // Create convenience references to Spine models
      this.ApiResource = swaggerService.ApiResource();

      this.ApiResource.bind("refresh", this.addAll);
    },

    addAll: function() {
      this.ApiResource.each(this.addOne);
      messageController.clearMessage();
      $("#resources_container").slideDown(function() {
        setTimeout(function() {
          Docs.shebang();
        },
        400);
      });
    },

    addOne: function(apiResource) {
      ResourceController.init({
        item: apiResource,
        container: "#resources"
      });
    }
  });

  var ResourceController = Spine.Controller.create({
    proxied: ["renderApi", "renderOperation"],

    templateName: "#resourceTemplate",
    apiResource: null,
    apiList: null,
    modelList: null,

    init: function() {
      this.render();

      this.apiResource = this.item;
      this.apiList = this.apiResource.apiList;
      this.modelList = this.apiResource.modelList;

      // log("------------- apiResource : " + this.apiResource.name);
      // this.apiList.logAll();
      // this.modelList.logAll();
      this.apiList.each(this.renderApi);
    },

    render: function() {
      $(this.templateName).tmpl(this.item).appendTo(this.container);
      $('#colophon').fadeIn();
    },

    renderApi: function(api) {
      var resourceApisContainer = "#" + this.apiResource.name + "_endpoint_list";
      ApiController.init({
        item: api,
        container: resourceApisContainer
      });

    }

  });


  var ApiController = Spine.Controller.create({
    proxied: ["renderOperation"],

    api: null,
    templateName: "#apiTemplate",

    init: function() {
      this.render();

      this.api = this.item;

      this.api.operations.each(this.renderOperation);
    },

    render: function() {
      $(this.templateName).tmpl(this.item).appendTo(this.container);
    },

    renderOperation: function(operation) {
      var operationsContainer = "#" + this.api.name + "_endpoint_operations";
      OperationController.init({
        item: operation,
        container: operationsContainer
      });
    }
  });

  
  // Param Model
  // ----------------------------------------------------------------------------------------------
  var Param = Spine.Model.setup(
    "Param",
    ["name", "defaultValue", 'description', 'required', 'dataType', 'allowableValues', 'paramType', 'allowMultiple', "readOnly"]
  );
  
  Param.include({

    cleanup: function() {
      this.defaultValue = this.defaultValue || '';
    },

    templateName: function(){
      var n = "#paramTemplate";
      
      if (this.allowableValues && this.allowableValues.length > 0) {
        n += "Select";
      } else {
        if (this.required) n += "Required";
        if (this.readOnly) n += "ReadOnly";
      }
      
      return(n);
    }

  });
  
  
  var OperationController = Spine.Controller.create({
    proxied: ["submitOperation", "showResponse", "showErrorStatus", "showCompleteStatus"],

    operation: null,
    templateName: "#operationTemplate",
    elementScope: "#operationTemplate",

    init: function() {
      this.render();

      this.operation = this.item;
      this.isGetOperation = (this.operation.httpMethodLowercase == "get");
      this.elementScope = "#" + this.operation.apiName + "_" + this.operation.nickname + "_" + this.operation.httpMethod;

      this.renderParams();
    },

    render: function() {
      $(this.templateName).tmpl(this.item).appendTo(this.container);
    },

    renderParams: function() {
      if (this.operation.parameters && this.operation.parameters.count() > 0) {
        var operationParamsContainer = this.elementScope + "_params";

        for (var p = 0; p < this.operation.parameters.count(); p++) {
          var param = Param.init(this.operation.parameters.all()[p]);
          // Only GET operations display forms..
          param.readOnly = !this.isGetOperation;
          param.cleanup();
          
          $(param.templateName()).tmpl(param).appendTo(operationParamsContainer);
        }
      }

      var submitButtonId = this.elementScope + "_content_sandbox_response_button";
      if (this.isGetOperation) {
        $(submitButtonId).click(this.submitOperation);
      } else {
        $(submitButtonId).hide();

        var valueHeader = this.elementScope + "_value_header";
        $(valueHeader).html("Default Value");
      }

    },

    submitOperation: function() {
      var form = $(this.elementScope + "_form");
      var error_free = true;
      var missing_input = null;

      // Cycle through the form's required inputs
      form.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() == '') {
          if (missing_input == null)
          missing_input = $(this);
          $(this).addClass('error');
          $(this).wiggle();
          error_free = false;
        }

      });
      
      if (error_free) {
        var invocationUrl = this.operation.invocationUrl(form.serializeArray());
        $(".request_url", this.elementScope + "_content_sandbox_response").html("<pre>" + invocationUrl + "</pre>");
        $.getJSON(invocationUrl, this.showResponse).complete(this.showCompleteStatus).error(this.showErrorStatus);
      }

    },

    showResponse: function(response) {
      // log(response);
      var prettyJson = JSON.stringify(response, null, "\t").replace(/\n/g, "<br>");
      // log(prettyJson);
      $(".response_body", this.elementScope + "_content_sandbox_response").html(prettyJson);

      $(this.elementScope + "_content_sandbox_response").slideDown();
    },

    showErrorStatus: function(data) {
      // log("error " + data.status);
      this.showStatus(data);
      $(this.elementScope + "_content_sandbox_response").slideDown();
    },

    showCompleteStatus: function(data) {
      // log("complete " + data.status);
      this.showStatus(data);
    },

    showStatus: function(data) {
      // log(data);
      // log(data.getAllResponseHeaders());
      var response_body = "<pre>" + JSON.stringify(JSON.parse(data.responseText), null, 2).replace(/\n/g, "<br>") + "</pre>";
      $(".response_code", this.elementScope + "_content_sandbox_response").html("<pre>" + data.status + "</pre>");
      $(".response_body", this.elementScope + "_content_sandbox_response").html(response_body);
      $(".response_headers", this.elementScope + "_content_sandbox_response").html("<pre>" + data.getAllResponseHeaders() + "</pre>");
    }

  });

  // Attach controller to window
  window.apiSelectionController = ApiSelectionController.init();
  
  if (this.baseUrl) {
    window.resourceListController = ResourceListController.init({
      baseUrl: this.baseUrl,
      apiKey: this.apiKey
    });
  } else {
    apiSelectionController.slapOn();
  }

});