Merge branch 'dev'

bin/Category.js

@@ -21,6 +21,10 @@ define('package/quiqqer/faq/bin/Category', [
         Extends: QUIControl,
         Type   : 'package/quiqqer/faq/bin/Category',
 
+        options: {
+            offset: null // if nav sticks to top use nav height to no hide the content by scroll to element
+        },
+
         Binds: [
             '$onImport',
             'scrollToTop',
@@ -30,6 +34,9 @@ define('package/quiqqer/faq/bin/Category', [
         initialize: function (options) {
             this.parent(options);
 
+            this.FAQList = null;
+            this.offest  = 0;
+
             this.addEvents({
                 onImport: this.$onImport
             });
@@ -39,8 +46,12 @@ define('package/quiqqer/faq/bin/Category', [
          * event : on import
          */
         $onImport: function () {
-            var links   = this.getElm().getElements('.quiqqer-faq-list li a'),
-                topList = this.getElm().getElements('[href="#top"]');
+            var Elm     = this.getElm(),
+                links   = Elm.getElements('.quiqqer-faq-list li a'),
+                topList = Elm.getElements('.quiqqer-faq-list-linkToTop');
+
+            this.FAQList = Elm.getElement('.quiqqer-faq-list');
+            this.offset  = Elm.get('data-qui-options-offset');
 
             for (var i = 0, len = links.length; i < len; i++) {
                 links[i].addEvent('click', this.$scrollToClick);
@@ -53,10 +64,14 @@ define('package/quiqqer/faq/bin/Category', [
                 return;
             }
 
-            var Article = this.getElm().getElement(window.location.hash);
+            var Article = Elm.getElement(window.location.hash);
 
             if (Article) {
-                new Fx.Scroll(window).toElement(Article);
+                new Fx.Scroll(window, {
+                    offset: {
+                        y: -this.offset
+                    }
+                }).toElement(Article);
             }
         },
 
@@ -86,6 +101,9 @@ define('package/quiqqer/faq/bin/Category', [
             }
 
             new Fx.Scroll(window, {
+                offset    : {
+                    y: -this.offset
+                },
                 onComplete: function () {
                     window.location = '#' + href[1];
                 }
@@ -98,15 +116,19 @@ define('package/quiqqer/faq/bin/Category', [
          * @param {DOMEvent} [event] - (optional) click dom event
          */
         scrollToTop: function (event) {
+            var self = this;
             if (typeOf(event) === 'domevent') {
                 event.stop();
             }
 
             new Fx.Scroll(window, {
+                offset    : {
+                    y: -this.offset
+                },
                 onComplete: function () {
-                    window.location = '#';
+                    window.location = '#' + self.FAQList.getAttribute('name');
                 }
-            }).toTop();
+            }).toElement(this.FAQList);
         }
     });
 });

locale.xml

@@ -59,5 +59,18 @@
             <de><![CDATA[Nachdem Sie eine FAQ-Liste angelegt haben, erstellen Sie am besten alle benötigten Kategorien als Unterseiten der FAQ-Liste. Z.B "Wo finde ich was?", "Fragen zur Bestellung" etc.]]></de>
             <en><![CDATA[]]></en>
         </locale>
+
+        <locale name="quiqqer.faq.category.settings.title">
+            <de><![CDATA[FAQ-Kategorie Einstellungen]]></de>
+            <en><![CDATA[Offset]]></en>
+        </locale>
+        <locale name="quiqqer.faq.category.settings.offset">
+            <de><![CDATA[Versatz]]></de>
+            <en><![CDATA[Offset]]></en>
+        </locale>
+        <locale name="quiqqer.faq.category.settings.offset.desc">
+            <de><![CDATA[Der Versatz (in Pixel) sagt, um wie viele zusätzliche Pixel soll die Seite gescrollt werden, wenn man ein FAQ Titel anklickt. Das ist vor allem dann hilfreich, wenn das Menü den Inhalt verdecken würde.]]></de>
+            <en><![CDATA[The offset (in pixels) specifies how many additional pixels the page should scroll when you click on a FAQ title. By doing this the menu no longer hides the linked content.]]></en>
+        </locale>
     </groups>
 </locales>
\ No newline at end of file

site.xml

@@ -9,11 +9,34 @@
             </desc>
         </type>
 
-        <type type="types/category" icon="fa fa-question-circle">
+        <type type="types/category" icon="fa fa-question-circle">z
             <locale group="quiqqer/faq" var="admin.types.faq.category" />
             <desc>
                 <locale group="quiqqer/faq" var="admin.types.faq.category.desc" />
             </desc>
+
+            <attributes>
+                <attribute default="0">quiqqer.faq.settings.offset</attribute>
+            </attributes>
+
+            <settings>
+                <category name="faq-category-settings">
+                    <settings>
+                        <title>
+                            <locale group="quiqqer/faq" var="quiqqer.faq.category.settings.title"/>
+                        </title>
+
+                        <input conf="quiqqer.faq.settings.offset" type="number">
+                            <text>
+                                <locale group="quiqqer/faq" var="quiqqer.faq.category.settings.offset"/>
+                            </text>
+                            <description>
+                                <locale group="quiqqer/faq" var="quiqqer.faq.category.settings.offset.desc"/>
+                            </description>
+                        </input>
+                    </settings>
+                </category>
+            </settings>
         </type>
 
         <type type="types/entry" icon="fa fa-question">

types/category.html

@@ -4,12 +4,28 @@
 </section>
 {/if}
 
+{if $offset}
+<!--
+This CSS is used to scroll the page down a bit when accessed with a # in the url.
+By doing this the menu no longer hides the linked content.
+-->
+<style type="text/css">
+    :target::before {
+        content: '';
+        display: block;
+        height:      80px;
+        margin-top: -80px;
+    }
+</style>
+{/if}
+
 <section itemscope itemtype="http://schema.org/ItemList"
          class="content-template quiqqer-faq clear-fix"
          data-qui="package/quiqqer/faq/bin/Category"
+         data-qui-options-offset="{$offset}"
 >
     {if count($entries)}
-    <ul class="quiqqer-faq-list">
+    <ul class="quiqqer-faq-list" id="faqList" name="faqList">
         {foreach $entries as $Faq}
         <li>
             <a href="{url site=$Site}#faq{$Faq->getId()}">
@@ -38,7 +54,7 @@
             {$Faq->getAttribute('content')}
         </div>
 
-        <a href="#top" class=" quiqqer-faq-list-linkToTop">
+        <a href="#faqList" class="quiqqer-faq-list-linkToTop">
             {locale group="quiqqer/faq" value="link.to.top"} <span class="fa fa-fw fa-level-up"></span>
         </a>
 

types/category.php

@@ -4,6 +4,9 @@ $entries = $Site->getChildren(array(
     'type' => 'quiqqer/faq:types/entry'
 ));
 
+$offset = intval($Site->getAttribute('quiqqer.faq.settings.offset'));
+
 $Engine->assign(array(
-    'entries' => $entries
+    'entries' => $entries,
+    'offset'     => $offset
 ));