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

Formatter/AbstractFormatter.php

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

Resources/public/css/screen.css

@@ -188,14 +188,14 @@ li.resource:last-child {
 }
 
 /* heading */
-div.heading {
+a.heading {
   border: 1px solid transparent;
   float: none;
   clear: both;
   overflow: hidden;
   display: block;
 }
-div.heading h2 {
+a.heading h2 {
   color: #999999;
   padding-left: 0;
   display: block;
@@ -204,7 +204,7 @@ div.heading h2 {
   font-family: "Droid Sans", sans-serif;
   font-weight: bold;
 }
-div.heading ul.options {
+a.heading ul.options {
   overflow: hidden;
   padding: 0;
   display: block;
@@ -212,7 +212,7 @@ div.heading ul.options {
   float: right;
   margin: 6px 10px 0 0;
 }
-div.heading ul.options li {
+a.heading ul.options li {
   float: left;
   clear: none;
   margin: 0;
@@ -221,12 +221,12 @@ div.heading ul.options li {
   color: #666666;
   font-size: 0.9em;
 }
-div.heading ul.options li:first-child,
-div.heading ul.options li.first {
+a.heading ul.options li:first-child,
+a.heading ul.options li.first {
   padding-left: 0;
 }
-div.heading ul.options li:last-child,
-div.heading ul.options li.last {
+a.heading ul.options li:last-child,
+a.heading ul.options li.last {
   padding-right: 0;
   border-right: none;
 }
@@ -240,13 +240,13 @@ li.operation {
   margin: 0 0 10px;
   padding: 0 0 0 0;
 }
-li.operation div.heading {
+li.operation a.heading {
   margin: 0 0 0 0;
   padding: 0;
   background-color: #f0f0f0;
   border: 1px solid #ddd;
 }
-li.operation div.heading h3 {
+li.operation a.heading h3 {
   display: block;
   clear: none;
   float: left;
@@ -256,25 +256,25 @@ li.operation div.heading h3 {
   line-height: 1.1em;
   color: black;
 }
-li.operation div.heading h3 span {
+li.operation a.heading h3 span {
   margin: 0;
   padding: 0;
 }
-li.operation div.heading h3 span.icon {
+li.operation a.heading h3 span.icon {
     display: inline-block;
     height: 12px;
     width: 12px;
     margin-left: 3px;
     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");
 
 }
-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=");
 }
-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-decoration: none;
   color: white;
@@ -288,11 +288,11 @@ li.operation div.heading h3 span.http_method a, li.operation div.heading h3 span
   border-radius: 2px;
   background-color: #ccc;
 }
-li.operation div.heading h3 span.deprecated a {
+li.operation a.heading h3 span.deprecated i {
   width: 75px;
   background-color: #F00;
 }
-li.operation div.heading h3 span.path {
+li.operation a.heading h3 span.path {
   padding-left: 5px;
 }
 
@@ -321,14 +321,14 @@ li.operation div.content form input[type='text'].error {
 }
 
 /* GET operations */
-li.operation.get div.heading {
+li.operation.get a.heading {
   border-color: #c3d9ec;
   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;
 }
-li.operation.get div.heading ul.options li {
+li.operation.get a.heading ul.options li {
   border-right-color: #c3d9ec;
   color: #0f6ab4;
 }
@@ -342,14 +342,14 @@ li.operation.get div.content h4 {
 }
 
 /* POST operations */
-li.operation.post div.heading {
+li.operation.post a.heading {
   border-color: #a7e1a1;
   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;
 }
-li.operation.post div.heading ul.options li {
+li.operation.post a.heading ul.options li {
   border-right-color: #c3e8d1;
   color: #10a54a;
 }
@@ -363,14 +363,14 @@ li.operation.post div.content h4 {
 }
 
 /* ANY operations */
-li.operation.any div.heading {
+li.operation.any a.heading {
   background-color: lightgray;
   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;
 }
-li.operation.any div.heading ul.options li {
+li.operation.any a.heading ul.options li {
   color: #000;
   border-right-color: gray;
 }
@@ -384,14 +384,14 @@ li.operation.any div.content h4 {
 }
 
 /* PUT operations */
-li.operation.put div.heading {
+li.operation.put a.heading {
   background-color: #f9f2e9;
   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;
 }
-li.operation.put div.heading ul.options li {
+li.operation.put a.heading ul.options li {
   border-right-color: #f0e0ca;
   color: #c5862b;
 }
@@ -405,14 +405,14 @@ li.operation.put div.content h4 {
 }
 
 /* DELETE operations */
-li.operation.delete div.heading {
+li.operation.delete a.heading {
   background-color: #f5e8e8;
   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;
 }
-li.operation.delete div.heading ul.options li {
+li.operation.delete a.heading ul.options li {
   border-right-color: #e8c6c7;
   color: #a41e22;
 }
@@ -426,14 +426,14 @@ li.operation.delete div.content h4 {
 }
 
 /* PATCH operations */
-li.operation.patch div.heading {
+li.operation.patch a.heading {
   background-color: #f5e8e8;
   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;
 }
-li.operation.patch div.heading ul.options li {
+li.operation.patch a.heading ul.options li {
   border-right-color: #e8c6c7;
   color: #a41ee2;
 }
@@ -447,13 +447,13 @@ li.operation.patch div.content h4 {
 }
 
 /* LINK operations */
-li.operation.link div.heading {
+li.operation.link a.heading {
   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;
 }
-li.operation.link div.heading ul.options li {
+li.operation.link a.heading ul.options li {
   color: #C3D448;
 }
 
@@ -465,13 +465,13 @@ li.operation.link div.content h4 {
 }
 
 /* UNLINK operations */
-li.operation.unlink div.heading {
+li.operation.unlink a.heading {
   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;
 }
-li.operation.unlink div.heading ul.options li {
+li.operation.unlink a.heading ul.options li {
   color: #FF8438;
 }
 

Resources/views/layout.html.twig

@@ -48,6 +48,15 @@
             Documentation auto-generated on {{ date }}
         </p>
         <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() {
                 $(this).next().slideToggle('fast');
             });

Resources/views/method.html.twig

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