Merge pull request #491 from jaugustin/feat-section-hide-show

[DX] Sections enhancement #489

DependencyInjection/Configuration.php

@@ -27,6 +27,7 @@ class Configuration implements ConfigurationInterface
                     ->prototype('scalar')
                     ->end()
                 ->end()
+                ->booleanNode('default_sections_opened')->defaultValue(true)->end()
                 ->arrayNode('motd')
                     ->addDefaultsIfNotSet()
                     ->children()

DependencyInjection/NelmioApiDocExtension.php

@@ -31,6 +31,7 @@ class NelmioApiDocExtension extends Extension
 
         $container->setParameter('nelmio_api_doc.motd.template', $config['motd']['template']);
         $container->setParameter('nelmio_api_doc.exclude_sections', $config['exclude_sections']);
+        $container->setParameter('nelmio_api_doc.default_sections_opened', $config['default_sections_opened']);
         $container->setParameter('nelmio_api_doc.api_name', $config['name']);
         $container->setParameter('nelmio_api_doc.sandbox.enabled',  $config['sandbox']['enabled']);
         $container->setParameter('nelmio_api_doc.sandbox.endpoint', $config['sandbox']['endpoint']);

Formatter/HtmlFormatter.php

@@ -75,6 +75,11 @@ class HtmlFormatter extends AbstractFormatter
      */
     private $motdTemplate;
 
+    /**
+     * @var boolean
+     */
+    private $defaultSectionsOpened;
+
     /**
      * @param array $authentication
      */
@@ -179,6 +184,14 @@ class HtmlFormatter extends AbstractFormatter
         return $this->motdTemplate;
     }
 
+    /**
+     * @param boolean $defaultSectionsOpened
+     */
+    public function setDefaultSectionsOpened($defaultSectionsOpened)
+    {
+        $this->defaultSectionsOpened = $defaultSectionsOpened;
+    }
+
     /**
      * {@inheritdoc}
      */
@@ -225,7 +238,8 @@ class HtmlFormatter extends AbstractFormatter
             'date'                  => date(DATE_RFC822),
             'css'                   => file_get_contents(__DIR__ . '/../Resources/public/css/screen.css'),
             'js'                    => file_get_contents(__DIR__ . '/../Resources/public/js/all.js'),
-            'motdTemplate'         => $this->motdTemplate
+            'motdTemplate'          => $this->motdTemplate,
+            'defaultSectionsOpened' => $this->defaultSectionsOpened,
         );
     }
 }

Resources/config/formatters.xml

@@ -56,6 +56,9 @@
             <call method="setAuthentication">
                 <argument>%nelmio_api_doc.sandbox.authentication%</argument>
             </call>
+            <call method="setDefaultSectionsOpened">
+                <argument>%nelmio_api_doc.default_sections_opened%</argument>
+            </call>
         </service>
         <service id="nelmio_api_doc.formatter.swagger_formatter" class="%nelmio_api_doc.formatter.swagger_formatter.class%"
             parent="nelmio_api_doc.formatter.abstract_formatter" />

Resources/doc/index.md

@@ -439,6 +439,7 @@ Look at the built-in [Handlers](https://github.com/nelmio/NelmioApiDocBundle/tre
 nelmio_api_doc:
     name:                 'API documentation'
     exclude_sections:     []
+    default_sections_opened:  true
     motd:
         template:             'NelmioApiDocBundle::Components/motd.html.twig'
     request_listener:

Resources/public/css/screen.css

@@ -172,10 +172,37 @@ table tbody tr td {
 }
 
 .section {
+    padding: 5px 20px;
+    border-bottom: 1px solid #ddd;
+}
+
+.section h1 {
+    padding: 0;
+}
+
+.section.active {
     border: 1px solid #ddd;
     background: #f8f8f8;
-  padding: 5px 20px;
-  margin-bottom: 15px;
+    margin: 15px 0;
+}
+
+.section.active h1 {
+    padding: 10px 0;
+}
+
+.section .actions {
+    text-align: right;
+    float: right;
+    margin-top: 10px;
+}
+
+.section .actions a {
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.section .actions a:hover {
+    text-decoration: underline;
 }
 
 li.resource {

Resources/views/layout.html.twig

@@ -91,6 +91,11 @@
                         $('body,html').scrollTop(elem.position().top);
                     });
                     elem.find('.toggler').click();
+                    var section = elem.parents('.section').first();
+                    if (section) {
+                        section.addClass('active');
+                        section.find('.section-list').slideDown('fast');
+                    }
                 }
             });
 
@@ -107,6 +112,36 @@
                 return false;
             });
 
+            $('.action-show-hide, .section > h1').on('click', function(){
+                var section = $(this).parents('.section').first();
+                if (section.hasClass('active')) {
+                    section.removeClass('active');
+                    section.find('.section-list').slideUp('fast');
+                } else {
+                    section.addClass('active');
+                    section.find('.section-list').slideDown('fast');
+                }
+
+            });
+
+            $('.action-list').on('click', function(){
+                var section = $(this).parents('.section').first();
+                if (!section.hasClass('active')) {
+                    section.addClass('active');
+                }
+                section.find('.section-list').slideDown('fast');
+                section.find('.content').slideUp('fast');
+            });
+
+            $('.action-expand').on('click', function(){
+                var section = $(this).parents('.section').first();
+                if (!section.hasClass('active')) {
+                    section.addClass('active');
+                }
+                $(section).find('ul').slideDown('fast');
+                $(section).find('.content').slideDown('fast');
+            });
+
             {% if enableSandbox %}
             var setParameterType = function ($context,setType) {
                 // no 2nd argument, use default from parameters

Resources/views/resources.html.twig

@@ -3,9 +3,14 @@
 {% block content %}
     {% for section, sections in resources  %}
         {% if section != '_others' %}
-            <li class="section">
+            <li class="section{{ defaultSectionsOpened? ' active':'' }}">
+                <div class="actions">
+                    <a class="action-show-hide">Show/hide</a>
+                    <a class="action-list">List Operations</a>
+                    <a class="action-expand">Expand Operations</a>
+                </div>
                 <h1>{{ section }}</h1>
-                <ul>
+                <ul class="section-list" {% if not defaultSectionsOpened %}style="display: none"{% endif %}>
         {% endif %}
         {% for resource, methods in sections %}
             <li class="resource">