Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Collapsible extra headers.

  • Loading branch information...
commit 13b60ff088bdac12c1a7aae363fa24600102e28d 1 parent 84806ec
@dv authored
Showing with 59 additions and 31 deletions.
  1. +34 −1 static/hookscope.js
  2. +25 −30 static/index.html
View
35 static/hookscope.js
@@ -8,9 +8,42 @@ function setLabel(name, value) {
}
function createRequestView(request) {
- return $($("#request-template").data("compiled")(request));
+ var el = $($("#request-template").data("compiled")(request));
+ var tbody = el.find(".headers-table");
+ var popularHeaders = tbody.find(".popular-header");
+ var extraHeaders = tbody.find(".extra-header");
+
+ var minHeight = popularHeaders.length * 38;
+ var maxHeight = (popularHeaders.length + extraHeaders.length) * 38;
+
+ el.find(".show-more-headers").click(function() {
+ //el.find(".show-more-headers-label").toggle()
+ //el.find(".more-headers").toggle("customSlide", { direction: "up" }, 1000);
+
+ var curHeight = tbody.height();
+
+ if(curHeight == minHeight){
+ tbody.animate({
+ height: maxHeight
+ }, 500);
+
+ //$('#read-more a').html('Close');
+ //$('#gradient').fadeOut();
+ } else {
+ tbody.animate({
+ height: minHeight
+ }, "normal");
+
+ //$('#read-more a').html('Click to Read More');
+ //$('#gradient').fadeIn();
+ }
+ //return false;
+ });
+
+ return el;
}
+
// Compile all the templates
$(function() {
$("[type='text/template']").each(function(index, element) {
View
55 static/index.html
@@ -7,7 +7,8 @@
<script src="jquery.customslide.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script src="jquery.easydate-0.2.4.min.js"></script>
- <script src="http://github.com/dv/dollars/raw/master/dollars.js"></script>
+ <!-- <script src="http://github.com/dv/dollars/raw/master/dollars.js"></script> -->
+ <script src="dollars.js"></script>
<script src="hookscope.js"></script>
<style type="text/css">
body {
@@ -22,8 +23,17 @@
.request-query {
color: #5789FF;
}
+
+ table {
+ position: relative;
+ }
</style>
<script type="text/template" id="request-template">
+ <%
+ var popularHeaderKeys = ["user-agent"];
+ var popularHeaders = $$.filterKeys(headers, popularHeaderKeys);
+ var extraHeaders = $$.withoutKeys(headers, popularHeaderKeys);
+ %>
<div class="row">
<div class="span4">
<h2><%- method %></h2>
@@ -77,44 +87,29 @@
<th colspan="2">Headers</th>
</tr>
</thead>
- <tbody>
- <% _.each($$.filterKeys(headers, ["user-agent"]), function(value, key) { %>
- <tr>
+ <tbody class="headers-table" style="display: block; overflow: hidden; height: <%= _.size(popularHeaders) * 38 %>px">
+ <% _.each(popularHeaders, function(value, key) { %>
+ <tr class="popular-header">
+ <th><%- key %></th>
+ <td style="width: 100%"><%- value %></td>
+ </tr>
+ <% }); %>
+ <% _.each(extraHeaders, function(value, key) { %>
+ <tr class="extra-header">
<th><%- key %></th>
<td><%- value %></td>
</tr>
<% }); %>
</tbody>
- <tbody class=""
+ <tbody class="show-more-headers">
+ <tr>
+ <th colspan="2" class="show-more-headers-label">Show More...</th>
+ </tr>
+ </tbody>
</table>
</div>
</div>
</script>
- <script type="text/template" id="request-template-old">
- <div class="row">
- <div class="span4">
- <h2><%- method %></h2>
- <p>
- <code class="easydate"><%- datetime %></code>
- <code><%- "http/" + httpVersion %></code>
- </p>
- </div>
- <div class="span12">
- <h3><%- url.href %></h3>
- <p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around <code>&lt;p&gt;</code> and <code>&lt;small&gt;</code> tags. Use the <code>&lt;small&gt;</code> element to cite your source and youll get an em dash <code>&amp;mdash;</code> before it.</p>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
- </blockquote>
-<pre class="prettyprint linenums">
-&lt;blockquote&gt;
- &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.&lt;/p&gt;
- &lt;small&gt;Dr. Julius Hibbert&lt;/small&gt;
-&lt;/blockquote&gt;
-</pre>
- </div>
- </div>
- </script>
</head>
Please sign in to comment.
Something went wrong with that request. Please try again.