api_explorer 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,13 @@
+= ApiExplorer
+
+This project is intended to be mounte on an existing Rails Application.
+
+
+The only precondition is that it requires a multithreaded rails server. 
+
+Instructions:
+
+- gem "thin", "~> 1.6.1"
+- bundle install
+- Add to development.rb (or production.rb): config.thread_safe!
+- Start the server with "thin start --threaded" 

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'ApiExplorer'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/api_explorer/api.js

@@ -0,0 +1,193 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+$(document).ready(function(){
+	var container = $("body.api_explorer")
+	var parameters_container = $("#parameters_container", container);
+	var headers_container = $("#headers_container", container);
+	var authentication_container = $("#authentication_container", container);
+	
+	var method_description = $("#method_description", container);
+	var select_method = $("#api_methods", container);
+	var response_placeholder = $("#response_placeholder", container);
+	var tab_history = $("#response_placeholder").find(".tab_history");
+	var history_menu = tab_history.find(".history_menu");
+	var authentication_method = $("#authentication_type", container);
+
+	// Change selected method
+	select_method.change(function(){
+		$("#graph_path", container).val($(this).val());
+		
+		
+
+		var position = $(this)[0].selectedIndex;
+
+		// if a method is selected
+		if (position > 0)
+			$.get("api_explorer/method", {position: position}).done(function(data){
+				parameters_container.html(data.parameters_html);
+				method_description.html(data.description);
+				
+				parameters_container.show();
+				headers_container.show();
+				method_description.show();
+				authentication_container.show();
+			});
+		else
+		{
+			// Clean everything
+			parameters_container.html('');
+			method_description.html('');
+			parameters_container.hide();
+			headers_container.hide();
+			method_description.hide();
+			authentication_container.hide();
+		}
+	})	
+
+	authentication_method.change(function(){
+		if ($(this).val() != ''){
+			$('.auth_wrapper', authentication_container).hide();
+			$('input[type="text"]',authentication_container).val('');
+			$('#' + $(this).val() ,authentication_container).show();
+		}
+		else{
+			$('.auth_wrapper', authentication_container).hide();
+			$('input[type="text"]',authentication_container).val('');
+		}
+	});
+
+	// Clear parameters button
+	$(container).on('click', '#clear_parameters', function(){
+		$("input", parameters_container).val('')
+	})
+
+	$('#clear_headers', container).click(function(){
+		$("input", headers_container).val('');
+		$(".deletable", headers_container).remove();
+		
+	})
+
+	$('#clear_authentication', container).click(function(){
+		$("input", authentication_container).val('');
+		$("select", authentication_container).val('');
+		$(".auth_wrapper", authentication_container).hide();
+	})
+
+	// Add headers
+	headers_container.on('focus', ".parameter_input",function(){
+		header_line = $(this).parents(".headers_line");
+		if (header_line.is(':last-child'))
+		{ 
+
+			header_line.parent().append('<div class="headers_line"><div class="header_field"><input type="text" placeholder="Header name" name="header[name][]" class="parameter_input" /></div><div class="header_field"><input type="text" placeholder="Value" name="header[value][]" class="parameter_input" /></div></div>');
+			
+			// Add delete button
+			header_line.append('<div class="delete_btn"></div>');
+			header_line.addClass('deletable');
+		}
+	}); 
+
+	headers_container.on('click', ".delete_btn",function(){
+		$(this).parents('.headers_line').remove();
+	});
+
+	var  minimize_container = function(self, min_container)
+	{
+		min_container.addClass('minimized');
+		self.removeClass('minimize');
+		self.addClass('maximize');
+		self.attr('title','Maximize');
+	} 
+
+	var  maximize_container = function(self, max_container)
+	{
+		max_container.removeClass('minimized');
+		self.removeClass('maximize');
+		self.addClass('minimize');
+		self.attr('title','Minimize');
+	}
+
+	headers_container.on('click', ".minimize",function(){
+		minimize_container($(this), headers_container);
+	});
+
+	headers_container.on('click', ".maximize",function(){
+		maximize_container($(this),headers_container);
+	});
+
+	parameters_container.on('click', ".minimize",function(){
+		minimize_container($(this),parameters_container);
+	});
+
+	parameters_container.on('click', ".maximize",function(){
+		maximize_container($(this), parameters_container);
+	});
+
+	authentication_container.on('click', ".minimize",function(){
+		minimize_container($(this),authentication_container);
+	});
+
+	authentication_container.on('click', ".maximize",function(){
+		maximize_container($(this), authentication_container);
+	});
+
+	history_menu.on('click', '.history_item', function(){
+		$(".history_item", history_menu).removeClass('active');
+		$(this).addClass('active');
+		var history_content = tab_history.find(".history_content");
+		var timestamp = $(this).data('timestamp');
+		$(".content_wrapper", history_content).hide();
+			
+		$("."+ timestamp, history_content).show();
+	});
+
+	//make request
+	$("#api_explorer_submit", container).click(function(e){
+		e.preventDefault();
+		
+		var data = $("input", parameters_container).serializeArray().concat($("input", headers_container).serializeArray()).concat($("input, select", authentication_container).serializeArray());
+		
+		data.push({name: 'url', value: $("#graph_path", container).val()});
+		data.push({name: 'method', value: select_method.find('option:selected').data('method')});
+
+		$.post("api_explorer/execute", data, function(response){
+			headers_container.addClass('minimized');
+			parameters_container.addClass('minimized');
+			authentication_container.addClass('minimized');
+
+			headers_container.find('.minimize').removeClass('minimize').addClass('maximize');
+			parameters_container.find('.minimize').removeClass('minimize').addClass('maximize');
+			authentication_container.find('.minimize').removeClass('minimize').addClass('maximize');
+			
+			response_placeholder.find(".tab_response").find(".content").html(response.response_html);
+			response_placeholder.find(".tab_request").find(".content").html(response.request_html);
+			
+			var history_content = tab_history.find(".history_content");
+
+			$(".history_item", history_menu).removeClass('active');
+			// If I have more than 9 elements, remove the last one
+			if ($(".history_item", history_menu).length > 9)
+			{
+				$(".history_item", history_menu).last().remove();
+				$(".content_wrapper", history_content).last().remove();
+			}
+
+			history_content.prepend(response.history_html);
+			history_menu.prepend("<div class='history_item active' data-timestamp='"+ response.timestamp + "'>" + response.http_method + " to "+response.request_url +" ( at " + response.date +" ) " + "</div>");
+			
+			$(".content_wrapper", history_content).hide();
+			$("." + response.timestamp, history_content).show();
+
+
+			response_placeholder.slideDown();
+			$('html, body').animate({
+		        scrollTop: response_placeholder.offset().top + 50
+		    }, 500);
+
+
+			console.log(response);
+
+		})
+
+	});
+})

data/app/assets/javascripts/api_explorer/application.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require_tree .

data/app/assets/stylesheets/api_explorer/api.css

@@ -0,0 +1,355 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+.api_explorer {
+	background-color: #e9eaed;
+
+}
+
+.api_explorer table {
+	display: table;
+	border-collapse: separate;
+	border-color: gray;
+	border-spacing: 0 !important;
+}
+.api_explorer tbody {
+	display: table-row-group;
+	vertical-align: middle;
+	border-color: inherit;
+}
+
+.api_explorer tr {
+	display: table-row;
+	vertical-align: inherit;
+	border-color: inherit;
+}
+
+.api_explorer td{
+	white-space: nowrap;
+}
+
+.api_explorer select {
+   height: 28px;
+   border: 1px solid #5b74a8;
+}
+
+.api_explorer .container {
+	
+	margin: 0 auto;
+	padding-top: 12px;
+	width: 924px;		
+}
+
+.api_explorer .panel {
+	background: #fff;
+	border: 1px solid;
+	border-color: #d6d7da #d5d8dd #c7c8ca;
+	border-radius: 3px;
+	margin-bottom: 20px;
+}
+
+.api_explorer .panel_header{
+	border-top: none;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background-color: #f6f7f8;
+	padding: 12px;
+}
+
+
+.api_explorer .panel_body{
+	border-top: 1px solid #e5e5e5;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	padding: 12px;
+	margin-bottom: 20px;
+}
+
+
+.api_explorer .full_width_cell {
+	width: 86%;
+	border: none;
+	padding: 0;
+	margin: 0;
+	white-space: nowrap;
+}
+
+.api_explorer .inputtext{
+	
+	margin: 0 0 0 -2px;
+	outline: 0;
+	width: 100%;
+	border: 1px solid #bdc7d8;
+	border-left: none;
+	padding: 3px 3px 4px 0;
+	-webkit-appearance: none;
+	border-radius: 0;
+	background-color: white;
+	display: inline-block;
+}
+
+
+.api_explorer #api_explorer_submit{
+	background-color: #5b74a8;
+	border: 1px solid #e9eaed;
+	color: #fff;
+	padding: 4px 8px;
+	cursor: pointer;
+}
+
+.api_explorer #api_prefix{
+	border: 1px solid #bdc7d8;
+	border-right: none;
+	color: #777;
+	cursor: pointer;
+	display: inline-block;
+	font-size: 11px;
+	height: 20px;
+	line-height: 20px;
+	padding: 0 5px 0 3px;
+}
+
+
+.api_explorer .fields_section{
+	margin-top: 20px;
+	padding: 10px 30px 20px;
+	font-weight: bold;
+	border: 2px solid #f6f7f8;
+	display: none;
+	position: relative;
+}
+
+.api_explorer #method_description{
+	display: none;
+	margin: 10px 0 20px 0;
+	font-style: italic;
+}
+
+.api_explorer .fields_section h2{ 
+	font-weight: bold;
+	color: #5b74a8;
+	margin-top: 5px;
+	font-size: 19px;
+}
+
+.api_explorer .fields_section #clear_parameters, .api_explorer .fields_section #clear_headers,
+.api_explorer .fields_section #clear_authentication{
+	width: 30px;
+	height: 30px;
+	background-size: cover;
+	background-image: url(clear.png);
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+}
+
+.api_explorer .editor-label{
+	float: left;
+    width: 200px;
+    font-size: 15px;
+    padding-top: 8px;
+}
+
+
+.api_explorer .editor-field{
+	margin-left: 200px;
+}
+
+.api_explorer .parameter_input{
+	color: #333;
+	padding: 5px;
+	border: none;
+	box-shadow: none;
+	border-bottom: solid thin #CCC;
+	border-radius: 0;
+	outline: none;
+	margin-right: 10px;
+	width: 224px;
+	line-height: 16px;
+}
+
+.api_explorer .editor-field input {
+	position: relative;
+	top: -4px;   
+}
+
+.api_explorer .delete_btn{
+	width: 18px;
+	height: 18px;
+	background-image: url(delete.png);
+	cursor: pointer;
+}
+
+.api_explorer #headers_container .delete_btn{
+	display: inline-block;
+	position: relative;
+	top: 10px;
+}
+
+.api_explorer #headers_container .header_field{
+	display:inline-block;
+	width: 230px;
+	margin-right: 20px;
+}
+
+/* Font size 0 will remove spaces between inline-block elements. Dirty hack but works. */
+.api_explorer .headers_line{
+	font-size: 0;
+}
+
+.api_explorer .minimize {
+	width: 30px;
+	height: 30px;
+	background-image: url(minimize.png);
+	background-size: cover;
+	cursor: pointer;
+}
+
+.api_explorer .maximize {
+	width: 30px;
+	height: 30px;
+	background-image: url(maximize.png);
+	background-size: cover;
+	cursor: pointer;
+}
+		
+	
+.api_explorer .fields_section .minimize, .api_explorer .fields_section .maximize{
+	position: absolute;
+	top: 10px;
+	right: 45px;
+}
+
+.api_explorer .fields_section.minimized {
+	height: 25px;
+	overflow: hidden;
+}
+
+/* TABS */
+
+.api_explorer .tabs {
+	position: relative;
+	min-height: 700px;
+	clear: both;
+	margin: 25px 0;
+}
+
+.api_explorer .tab {
+	float: left;
+}
+
+.api_explorer .tab [type=radio] {
+	display: none;
+}
+
+.api_explorer .tabs [type=radio]:checked ~ label ~ .content {
+	z-index: 1;
+}
+
+.api_explorer .tabs [type=radio]:checked ~ label ~ .content > * {
+	opacity: 1;
+	-webkit-transform: translateX(0);
+	-moz-transform: translateX(0);
+	-ms-transform: translateX(0);
+	-o-transform: translateX(0);
+}
+
+.api_explorer .tabs [type=radio]:checked ~ label {
+	background: white;
+	border-bottom: 1px solid white;
+	z-index: 2;
+}
+
+.api_explorer .tab label {
+	background: #eee;
+	padding: 10px;
+	border: 1px solid #ccc;
+	margin-left: -1px;
+	position: relative;
+	left: 1px;
+}
+
+.api_explorer  .tabs .content {
+	position: absolute;
+	top: 28px;
+	left: 0;
+	background: white;
+	right: 0;
+	bottom: 0;
+	padding: 20px;
+	border: 1px solid #ccc;
+	overflow: hidden;
+	overflow-y: scroll;
+}
+
+.api_explorer  .tabs .content.overflow {
+	overflow: auto;
+}
+
+.api_explorer  .content > * {
+	opacity: 0;
+	-webkit-transform: translate3d(0, 0, 0);
+	-webkit-transform: translateX(-100%);
+	-moz-transform: translateX(-100%);
+	-ms-transform: translateX(-100%);
+	-o-transform: translateX(-100%);
+	-webkit-transition: all 0.6s ease;
+	-moz-transition: all 0.6s ease;
+	-ms-transition: all 0.6s ease;
+	-o-transition: all 0.6s ease;
+}
+
+.api_explorer .history_menu {
+	float: right;
+	max-width: 250px;
+	font-size: 0.8em;
+	background: #eee;
+}
+
+.api_explorer .history_item {
+	padding: 10px;
+	border: 1px solid #ccc;
+	cursor: pointer;
+}
+
+.api_explorer .history_item.active {
+	background-color: #5b74a8;
+	color: white;
+}
+
+
+.api_explorer .history_wrapper {
+	border: 1px solid #ccc;
+}
+
+.api_explorer .history_wrapper .content_wrapper{
+	display:none;
+}
+
+.api_explorer .history_content
+{
+	float: left;
+	max-width: 500px;
+	padding-left: 15px;
+}
+
+/* Authentication */
+.api_explorer #basic_auth, .api_explorer #hash_url_auth{
+	margin-left: 80px;
+	margin-top: 20px;
+	display: none;
+}
+
+
+.api_explorer #hash_url_auth .information_field {
+	margin-bottom: 10px;
+}
+
+.api_explorer #hash_url_auth .auth_method_description{
+	margin: 10px 0 20px 0;
+	font-style: italic;
+	font-weight: normal;
+}

data/app/assets/stylesheets/api_explorer/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */