Merge pull request #10 from pixelant/arr

[TASK] add possibility to scroll overflow text by arrows
pixelant · Feb 23, 2018 · b869d35 · b869d35
2 parents 24f131e + 25323e0
commit b869d35
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/Resources/Private/Partials/Item/ListItem.html b/Resources/Private/Partials/Item/ListItem.html
@@ -14,21 +14,32 @@ <h4>{item.name}</h4>
                          style="background-image:url({f:render(partial: 'Item/ListItemLargeImageUrl', arguments: '{item: item}')})"></div>
                     <div class="filtering-list__item-description">
                         <div class="close-preview js__close-preview"></div>
-                        <div class="item-description__scroll-helper">
-                            <div class="underline-heading">
-                                <h2 class="item-description__header">{item.name}</h2>
+                        <div class="scroll-control arrow-up">
+                            <i class="icons icon-chevron-up"></i>
+                        </div>
+                        <div class="scroll-control arrow-down">
+                            <i class="icons icon-chevron-down"></i>
+                        </div>
+                        <div class="item-description__scroll-helper swiper-container js__item-description__scroll-helper">
+                            <div class="swiper-wrapper">
+
+                                <div class="swiper-slide">
+                                    <div class="underline-heading">
+                                        <h2 class="item-description__header">{item.name}</h2>
+                                    </div>
+                                    <f:for each="{categories: 'categoriesTitleList', customer: 'customer', product_choice: 'productChoice', architect: 'architect', consultant: 'consultant', installer: 'installer', description: 'description'}"
+                                           key="translateKey"
+                                           as="propertyName">
+                                        <p>
+                                            <strong>
+                                                <f:translate key="tx_pxaitemlist_domain_model_item.{translateKey}"/>
+                                                :
+                                            </strong>
+                                            &nbsp;{item.{propertyName}}
+                                        </p>
+                                    </f:for>
+                                </div>
                             </div>
-                            <f:for each="{categories: 'categoriesTitleList', customer: 'customer', product_choice: 'productChoice', architect: 'architect', consultant: 'consultant', installer: 'installer', description: 'description'}"
-                                    key="translateKey"
-                                    as="propertyName">
-                                <p>
-                                    <strong>
-                                        <f:translate key="tx_pxaitemlist_domain_model_item.{translateKey}"/>
-                                        :
-                                    </strong>
-                                    &nbsp;{item.{propertyName}}
-                                </p>
-                            </f:for>
                         </div>
                     </div>
                 </div>
@@ -44,13 +55,13 @@ <h2 class="item-description__header">{item.name}</h2>
                 <f:image image="{image}"
                          alt="{image.originalResource.title}"
                          width="{settings.list.item.image.width}"
-                         height="{settings.list.item.image.height}" />
+                         height="{settings.list.item.image.height}"/>
             </f:then>
             <f:else>
                 <f:image src="{settings.list.item.image.no-image}"
                          alt="{item.image.originalResource.title}"
                          width="{settings.list.item.image.width}"
-                         height="{settings.list.item.image.height}" />
+                         height="{settings.list.item.image.height}"/>
             </f:else>
         </f:if>
     </f:alias>

diff --git a/Resources/Public/Js/itemsList.js b/Resources/Public/Js/itemsList.js
@@ -94,7 +94,27 @@ $(window).on('load', function () {
   */
 
   $target.on('click', function () {
-    $(this).parent().toggleClass('_item-open').siblings().removeClass('_item-open');
+    var $self = $(this);
+    $self.parent().toggleClass('_item-open').siblings().removeClass('_item-open');
+
+    /**
+    *  Sroll to the clicked element
+    */
+
+    $('html, body').animate({
+      scrollTop: $self.offset().top - 100 + 'px'
+    }, 600);
+
+    /**
+    *  Initilize swiper after item opened
+    */
+    var $sl = new Swiper($(this).parent().find('.js__item-description__scroll-helper'), {
+      direction: 'vertical',
+      slidesPerView: 'auto',
+      freeMode: true,
+      nextButton: $(this).parent().find('.arrow-down'),
+      prevButton: $(this).parent().find('.arrow-up')
+    })
   })
 
   /**