faq categories and faq list

bin/Category.js

+
+define('packages/quiqqer/faq/bin/Category', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function(QUI, QUIControl)
+{
+    "use strict";
+
+    return new Class({
+
+        Extends : QUIControl,
+        Type    : 'packages/quiqqer/faq/bin/Category',
+
+        Binds : [
+            '$onImport',
+            'scrollToTop',
+            '$scrollToClick'
+        ],
+
+        initialize : function(options)
+        {
+            this.parent( options );
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        /**
+         * event : on import
+         */
+        $onImport : function()
+        {
+            var links   = this.getElm().getElements( '.quiqqer-faq-list li a'),
+                topList = this.getElm().getElements( '[href="#top"]' );
+
+            for ( var i = 0, len = links.length; i < len; i++ ) {
+                links[ i ].addEvent( 'click', this.$scrollToClick );
+            }
+
+            topList.addEvent( 'click', this.scrollToTop );
+
+            // check location
+            if ( !window.location.hash || window.location.hash === '' ) {
+                return;
+            }
+
+            var Article = this.getElm().getElement( window.location.hash );
+
+            if ( Article ) {
+                new Fx.Scroll( window ).toElement( Article );
+            }
+        },
+
+        /**
+         * event : on click at a faq entry
+         *
+         * @param {DOMEvent} event - click event
+         */
+        $scrollToClick : function(event)
+        {
+            if ( typeOf( event ) === 'domevent' ) {
+                event.stop();
+            }
+
+            var Target = event.target,
+                href   = Target.get( 'href' );
+
+            href = href.split( '#' );
+
+            if ( typeof href[ 1 ] === 'undefined' ) {
+                return;
+            }
+
+            var Article = this.getElm().getElement( '#'+ href[ 1 ] );
+
+            if ( !Article ) {
+                return;
+            }
+
+            new Fx.Scroll(window, {
+                onComplete: function()
+                {
+                    window.location = '#'+ href[ 1 ];
+                }
+            }).toElement( Article );
+        },
+
+        /**
+         * Scroll the window to top and clear the anchor
+         *
+         * @param {DOMEvent} [event] - (optional) click dom event
+         */
+        scrollToTop : function(event)
+        {
+            if ( typeOf( event ) === 'domevent' ) {
+                event.stop();
+            }
+
+            new Fx.Scroll(window, {
+                onComplete: function() {
+                    window.location = '#';
+                }
+            }).toTop();
+        }
+    });
+});

bin/types/category.css

+.quiqqer-faq-list-linkToTop {
+    clear: both;
+    float: right;
+}
\ No newline at end of file

types/category.html

+
+<section>
+    {if $Template->getAttribute('content-header')}
+    <div class="content-header grid-100 mobile-grid-100">
+        <header>
+            <h1>{$Site->getAttribute('title')}</h1>
+        </header>
+
+        {if $Site->getAttribute('short')}
+        <div class="content-short">
+            {$Site->getAttribute('short')|nl2br}
+        </div>
+        {/if}
+    </div>
+    {/if}
+
+    {if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
+    <div class="content-body grid-100 mobile-grid-100">
+        {$Site->getAttribute('content')}
+    </div>
+    {/if}
+</section>
+
+<section itemscope itemtype="http://schema.org/ItemList"
+         class="content-template grid-100 mobile-grid-100"
+         data-qui="packages/quiqqer/faq/bin/Category"
+>
+    {if count($entries)}
+    <ul class="quiqqer-faq-list">
+        {foreach $entries as $Faq}
+        <li>
+            <a href="{url site=$Site}#faq{$Faq->getId()}">
+                {$Faq->getAttribute('title')}
+            </a>
+        </li>
+        {/foreach}
+    </ul>
+    {/if}
+
+    <hr />
+
+    {foreach $entries as $Faq}
+    <article id="faq{$Faq->getId()}">
+        <header>
+            <h2>{$Faq->getAttribute('title')}</h2>
+        </header>
+
+        {if $Faq->getAttribute('short')}
+        <div class="content-short">
+            {$Faq->getAttribute('short')|nl2br}
+        </div>
+        {/if}
+
+        <div class="content-body">
+            {$Faq->getAttribute('content')}
+        </div>
+
+        <a href="#top" class="button quiqqer-faq-list-linkToTop">
+           {locale group="quiqqer/faq" value="link.to.top"}
+        </a>
+
+    </article>
+
+    {if !($Faq@last)}
+    <hr />
+    {/if}
+
+    {/foreach}
+
+</section>

types/category.php

+<?php
+
+$entries = $Site->getChildren(array(
+    'type' => 'quiqqer/faq:types/entry'
+));
+
+$Engine->assign(array(
+    'entries' => $entries
+));

types/list.html

+
+<div>
+
+    {if $Template->getAttribute('content-header')}
+    <section class="content-header grid-100 mobile-grid-100">
+        <header>
+            <h1>{$Site->getAttribute('title')}</h1>
+        </header>
+
+        {if $Site->getAttribute('short')}
+        <div class="content-short">
+            {$Site->getAttribute('short')|nl2br}
+        </div>
+        {/if}
+    </section>
+    {/if}
+
+    {if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
+    <section class="content-body grid-100 mobile-grid-100">
+        {$Site->getAttribute('content')}
+    </section>
+    {/if}
+
+    <div class="content-template grid-100 mobile-grid-100">
+
+        {foreach from=$categories item=Category}
+        <section class="content-template-faq-list-category">
+            <h2>
+                <a href="{url site=$Category}">
+                    {$Category->getAttribute('title')}
+                </a>
+            </h2>
+
+            <div class="content-short">
+                {$Category->getAttribute('short')}
+            </div>
+
+            {assign var=faqList value=$Category->getChildren()}
+            {if count($faqList)}
+            <ul itemscope itemtype="http://schema.org/ItemList">
+                {foreach $faqList as $Faq}
+                <li>
+                    <a href="{url site=$Category}#faq{$Faq->getId()}">
+                        {$Faq->getAttribute('title')}
+                    </a>
+                </li>
+                {/foreach}
+            </ul>
+            {/if}
+
+        </section>
+        {/foreach}
+
+    </div>
+</div>
\ No newline at end of file

types/list.php

+<?php
+
+$categories = $Site->getChildren(array(
+    'type' => 'quiqqer/faq:types/category'
+));
+
+$Engine->assign(array(
+    'categories' => $categories
+));