make api method headers anchor links so a speicif method can be refered to through its unique id

This commit is contained in:
Kevin Saliou 2013-09-05 19:04:17 +02:00
parent f690529fc6
commit 23bc2b6f47
4 changed files with 83 additions and 72 deletions

View File

@ -119,6 +119,8 @@ abstract class AbstractFormatter implements FormatterInterface
$annotation['response'] = $this->compressNestedParameters($annotation['response']); $annotation['response'] = $this->compressNestedParameters($annotation['response']);
} }
$annotation['id'] = strtolower($annotation['method']).'-'.str_replace('/', '-', $annotation['uri']);
return $annotation; return $annotation;
} }

View File

@ -188,14 +188,14 @@ li.resource:last-child {
} }
/* heading */ /* heading */
div.heading { a.heading {
border: 1px solid transparent; border: 1px solid transparent;
float: none; float: none;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
div.heading h2 { a.heading h2 {
color: #999999; color: #999999;
padding-left: 0; padding-left: 0;
display: block; display: block;
@ -204,7 +204,7 @@ div.heading h2 {
font-family: "Droid Sans", sans-serif; font-family: "Droid Sans", sans-serif;
font-weight: bold; font-weight: bold;
} }
div.heading ul.options { a.heading ul.options {
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
display: block; display: block;
@ -212,7 +212,7 @@ div.heading ul.options {
float: right; float: right;
margin: 6px 10px 0 0; margin: 6px 10px 0 0;
} }
div.heading ul.options li { a.heading ul.options li {
float: left; float: left;
clear: none; clear: none;
margin: 0; margin: 0;
@ -221,12 +221,12 @@ div.heading ul.options li {
color: #666666; color: #666666;
font-size: 0.9em; font-size: 0.9em;
} }
div.heading ul.options li:first-child, a.heading ul.options li:first-child,
div.heading ul.options li.first { a.heading ul.options li.first {
padding-left: 0; padding-left: 0;
} }
div.heading ul.options li:last-child, a.heading ul.options li:last-child,
div.heading ul.options li.last { a.heading ul.options li.last {
padding-right: 0; padding-right: 0;
border-right: none; border-right: none;
} }
@ -240,13 +240,13 @@ li.operation {
margin: 0 0 10px; margin: 0 0 10px;
padding: 0 0 0 0; padding: 0 0 0 0;
} }
li.operation div.heading { li.operation a.heading {
margin: 0 0 0 0; margin: 0 0 0 0;
padding: 0; padding: 0;
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
li.operation div.heading h3 { li.operation a.heading h3 {
display: block; display: block;
clear: none; clear: none;
float: left; float: left;
@ -256,25 +256,25 @@ li.operation div.heading h3 {
line-height: 1.1em; line-height: 1.1em;
color: black; color: black;
} }
li.operation div.heading h3 span { li.operation a.heading h3 span {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li.operation div.heading h3 span.icon { li.operation a.heading h3 span.icon {
display: inline-block; display: inline-block;
height: 12px; height: 12px;
width: 12px; width: 12px;
margin-left: 3px; margin-left: 3px;
background: no-repeat center center; background: no-repeat center center;
} }
li.operation div.heading h3 span.lock { li.operation a.heading h3 span.lock {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUHEisepJ6ljAAAAJ5JREFUGNNt0LEOAUEUheEPuwkFtSg0old4Eo/imbQKiULpBZQSCtFoaIjSktXMxpjsSW5xzvnnZmb4aYMymg9WEq1Decc1zCNkyxisoFGUTXDGEZpR8cIp8jccKiaLigwDdMP9hughr8ptALtYoB18C+Pgd5KXlrhgX5P/mSfmmKVgM/mmDP1qQ1rEyjFFkYKNmtMF3uikYFGzOdXnC5FWMZNd2GfvAAAAAElFTkSuQmCC"); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUHEisepJ6ljAAAAJ5JREFUGNNt0LEOAUEUheEPuwkFtSg0old4Eo/imbQKiULpBZQSCtFoaIjSktXMxpjsSW5xzvnnZmb4aYMymg9WEq1Decc1zCNkyxisoFGUTXDGEZpR8cIp8jccKiaLigwDdMP9hughr8ptALtYoB18C+Pgd5KXlrhgX5P/mSfmmKVgM/mmDP1qQ1rEyjFFkYKNmtMF3uikYFGzOdXnC5FWMZNd2GfvAAAAAElFTkSuQmCC");
} }
li.operation div.heading h3 span.keys { li.operation a.heading h3 span.keys {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUHEisb1PRRAwAAAN9JREFUKM9lz71KQ0EQhuEnJ7EIKhZWaRULu4htLLwDvYRgZWmTWoI3kAuIlVik0U5Io4USRMFOUGwU7cQ/kAQMajMHDpuBZWd235lvPtjHDT4xxhuu0ZJEhhXU8YAG7rCKBWyn8EnkVSxjOuoPbKTT1/GXnCd0YqWt4uQrk3GLGcxiswgPcRgG4QsDzKMSKtUc/kUbFwEf4BlrUdeCk8WOj3jBO+5xhGOMwmQzh6Ec9zemwtgOLuN9D4tZYqwUSvnuu3jFHLpZASqHUqXQfIZe5PX8Y4RTLKGfqLVwjp9/HR4zOkGnnAoAAAAASUVORK5CYII="); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUHEisb1PRRAwAAAN9JREFUKM9lz71KQ0EQhuEnJ7EIKhZWaRULu4htLLwDvYRgZWmTWoI3kAuIlVik0U5Io4USRMFOUGwU7cQ/kAQMajMHDpuBZWd235lvPtjHDT4xxhuu0ZJEhhXU8YAG7rCKBWyn8EnkVSxjOuoPbKTT1/GXnCd0YqWt4uQrk3GLGcxiswgPcRgG4QsDzKMSKtUc/kUbFwEf4BlrUdeCk8WOj3jBO+5xhGOMwmQzh6Ec9zemwtgOLuN9D4tZYqwUSvnuu3jFHLpZASqHUqXQfIZe5PX8Y4RTLKGfqLVwjp9/HR4zOkGnnAoAAAAASUVORK5CYII=");
} }
li.operation div.heading h3 span.http_method a, li.operation div.heading h3 span.deprecated a { li.operation a.heading h3 span.http_method i, li.operation a.heading h3 span.deprecated i {
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: white; color: white;
@ -288,11 +288,11 @@ li.operation div.heading h3 span.http_method a, li.operation div.heading h3 span
border-radius: 2px; border-radius: 2px;
background-color: #ccc; background-color: #ccc;
} }
li.operation div.heading h3 span.deprecated a { li.operation a.heading h3 span.deprecated i {
width: 75px; width: 75px;
background-color: #F00; background-color: #F00;
} }
li.operation div.heading h3 span.path { li.operation a.heading h3 span.path {
padding-left: 5px; padding-left: 5px;
} }
@ -321,14 +321,14 @@ li.operation div.content form input[type='text'].error {
} }
/* GET operations */ /* GET operations */
li.operation.get div.heading { li.operation.get a.heading {
border-color: #c3d9ec; border-color: #c3d9ec;
background-color: #e7f0f7; background-color: #e7f0f7;
} }
li.operation.get div.heading h3 span.http_method a { li.operation.get a.heading h3 span.http_method i {
background-color: #0f6ab4; background-color: #0f6ab4;
} }
li.operation.get div.heading ul.options li { li.operation.get a.heading ul.options li {
border-right-color: #c3d9ec; border-right-color: #c3d9ec;
color: #0f6ab4; color: #0f6ab4;
} }
@ -342,14 +342,14 @@ li.operation.get div.content h4 {
} }
/* POST operations */ /* POST operations */
li.operation.post div.heading { li.operation.post a.heading {
border-color: #a7e1a1; border-color: #a7e1a1;
background-color: #d4f7cd; background-color: #d4f7cd;
} }
li.operation.post div.heading h3 span.http_method a{ li.operation.post a.heading h3 span.http_method i{
background-color: #10a54a; background-color: #10a54a;
} }
li.operation.post div.heading ul.options li { li.operation.post a.heading ul.options li {
border-right-color: #c3e8d1; border-right-color: #c3e8d1;
color: #10a54a; color: #10a54a;
} }
@ -363,14 +363,14 @@ li.operation.post div.content h4 {
} }
/* ANY operations */ /* ANY operations */
li.operation.any div.heading { li.operation.any a.heading {
background-color: lightgray; background-color: lightgray;
border-color: gray; border-color: gray;
} }
li.operation.any div.heading h3 span.http_method a { li.operation.any a.heading h3 span.http_method i {
background-color: #000; background-color: #000;
} }
li.operation.any div.heading ul.options li { li.operation.any a.heading ul.options li {
color: #000; color: #000;
border-right-color: gray; border-right-color: gray;
} }
@ -384,14 +384,14 @@ li.operation.any div.content h4 {
} }
/* PUT operations */ /* PUT operations */
li.operation.put div.heading { li.operation.put a.heading {
background-color: #f9f2e9; background-color: #f9f2e9;
border-color: #f0e0ca; border-color: #f0e0ca;
} }
li.operation.put div.heading h3 span.http_method a { li.operation.put a.heading h3 span.http_method i {
background-color: #c5862b; background-color: #c5862b;
} }
li.operation.put div.heading ul.options li { li.operation.put a.heading ul.options li {
border-right-color: #f0e0ca; border-right-color: #f0e0ca;
color: #c5862b; color: #c5862b;
} }
@ -405,14 +405,14 @@ li.operation.put div.content h4 {
} }
/* DELETE operations */ /* DELETE operations */
li.operation.delete div.heading { li.operation.delete a.heading {
background-color: #f5e8e8; background-color: #f5e8e8;
border-color: #e8c6c7; border-color: #e8c6c7;
} }
li.operation.delete div.heading h3 span.http_method a { li.operation.delete a.heading h3 span.http_method i {
background-color: #a41e22; background-color: #a41e22;
} }
li.operation.delete div.heading ul.options li { li.operation.delete a.heading ul.options li {
border-right-color: #e8c6c7; border-right-color: #e8c6c7;
color: #a41e22; color: #a41e22;
} }
@ -426,14 +426,14 @@ li.operation.delete div.content h4 {
} }
/* PATCH operations */ /* PATCH operations */
li.operation.patch div.heading { li.operation.patch a.heading {
background-color: #f5e8e8; background-color: #f5e8e8;
border-color: #e8c6e7; border-color: #e8c6e7;
} }
li.operation.patch div.heading h3 span.http_method a { li.operation.patch a.heading h3 span.http_method i {
background-color: #a41ee2; background-color: #a41ee2;
} }
li.operation.patch div.heading ul.options li { li.operation.patch a.heading ul.options li {
border-right-color: #e8c6c7; border-right-color: #e8c6c7;
color: #a41ee2; color: #a41ee2;
} }
@ -447,13 +447,13 @@ li.operation.patch div.content h4 {
} }
/* LINK operations */ /* LINK operations */
li.operation.link div.heading { li.operation.link a.heading {
background-color: #F7F7D5; background-color: #F7F7D5;
} }
li.operation.link div.heading h3 span.http_method a { li.operation.link a.heading h3 span.http_method i {
background-color: #C3D448; background-color: #C3D448;
} }
li.operation.link div.heading ul.options li { li.operation.link a.heading ul.options li {
color: #C3D448; color: #C3D448;
} }
@ -465,13 +465,13 @@ li.operation.link div.content h4 {
} }
/* UNLINK operations */ /* UNLINK operations */
li.operation.unlink div.heading { li.operation.unlink a.heading {
background-color: #FFEBDE; background-color: #FFEBDE;
} }
li.operation.unlink div.heading h3 span.http_method a { li.operation.unlink a.heading h3 span.http_method i {
background-color: #FF8438; background-color: #FF8438;
} }
li.operation.unlink div.heading ul.options li { li.operation.unlink a.heading ul.options li {
color: #FF8438; color: #FF8438;
} }

View File

@ -48,6 +48,15 @@
Documentation auto-generated on {{ date }} Documentation auto-generated on {{ date }}
</p> </p>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() {
var elem = $(window.location.hash);
if(elem) {
$('body').scrollTop(elem.top);
elem.find('a.toggler').click();
}
});
$('.toggler').click(function() { $('.toggler').click(function() {
$(this).next().slideToggle('fast'); $(this).next().slideToggle('fast');
}); });

View File

@ -1,37 +1,37 @@
<li class="{{ data.method|lower }} operation"> <li class="{{ data.method|lower }} operation" id="{{ data.id }}">
<div class="heading toggler{% if data.deprecated %} deprecated{% endif %}"> <a class="heading toggler{% if data.deprecated %} deprecated{% endif %}" href="#{{ data.id }}">
<h3> <h3>
<span class="http_method"> <span class="http_method">
<a>{{ data.method|upper }}</a> <i>{{ data.method|upper }}</i>
</span> </span>
{% if data.deprecated %} {% if data.deprecated %}
<span class="deprecated"> <span class="deprecated">
<a>DEPRECATED</a> <i>DEPRECATED</i>
</span> </span>
{% endif %} {% endif %}
{% if data.https %} {% if data.https %}
<span class="icon lock" title="HTTPS"></span> <span class="icon lock" title="HTTPS"></span>
{% endif %} {% endif %}
{% if data.authentication %} {% if data.authentication %}
<span class="icon keys" title="Needs authentication"></span> <span class="icon keys" title="Needs authentication"></span>
{% endif %} {% endif %}
<span class="path"> <span class="path">
{% if data.host is defined -%} {% if data.host is defined -%}
{{ data.https ? 'https://' : 'http://' -}} {{ data.https ? 'https://' : 'http://' -}}
{{ data.host -}} {{ data.host -}}
{% endif -%} {% endif -%}
{{ data.uri }} {{ data.uri }}
</span> </span>
</h3> </h3>
<ul class="options"> <ul class="options">
{% if data.description is defined %} {% if data.description is defined %}
<li>{{ data.description }}</li> <li>{{ data.description }}</li>
{% endif %} {% endif %}
</ul> </ul>
</div> </a>
<div class="content" style="display: {% if displayContent is defined and displayContent == true %}display{% else %}none{% endif %};"> <div class="content" style="display: {% if displayContent is defined and displayContent == true %}display{% else %}none{% endif %};">
<ul class="tabs"> <ul class="tabs">