From d15eae0fa8660913553a95f55c7fba90f201e1cb Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Mon, 5 Feb 2018 14:30:07 -0500
Subject: [PATCH] Auto-expand member detail sections, package desc title

Member detail Photos section now automatically open, instead of
Description section.

'Description' section in the Packages section of member detail page
now called 'Package Description' to distinguish from member desc.
---
 .../front/packaging/listForMemberDetail.html  | 80 +++++++++++++++++++
 glm-member-db/views/front/members/detail.html | 56 ++++++-------
 2 files changed, 109 insertions(+), 27 deletions(-)
 create mode 100644 glm-member-db-packaging/views/front/packaging/listForMemberDetail.html

diff --git a/glm-member-db-packaging/views/front/packaging/listForMemberDetail.html b/glm-member-db-packaging/views/front/packaging/listForMemberDetail.html
new file mode 100644
index 0000000..5f2e343
--- /dev/null
+++ b/glm-member-db-packaging/views/front/packaging/listForMemberDetail.html
@@ -0,0 +1,80 @@
+{if $settings.detail_show_packages && $havePackages && $packages}
+<div id="glm-member-detail-packages-toggle" class="glm-member-detail-content-toggle">Packages & Deals</div>
+<div id="glm-member-detail-packages-container" class="glm-member-detail-content-data small-12">
+
+
+    {foreach $packages as $p}
+
+        <!-- Container for each package -->
+        <div class="glm-member-db-package">
+
+            {if $p.image}
+             <div class="glm-member-db-package-img-wrap">
+              <img src="{$glmPluginMediaUrl}/images/medium/{$p.image}">
+             </div>
+            {/if}
+            <!-- Container for package information -->
+            <div class="glm-member-db-package-info">
+
+                <h3 class="glm-member-db-package-title">
+                    {if $settings.package_list_show_package_detail_link}
+                    <a href="{$siteBaseUrl}{$settings.canonical_package_page}/{$p.package_slug}/">
+                        {$p.title}
+                    </a>
+                    {else}
+                    <span>
+                        {$p.title}
+                    </span>
+                    {/if}
+                </h3>
+                <div class="glm-member-db-package-desc">{$p.short_descr}</div>
+                <div class="details">
+                    {if $p.expire_date.date}<div><span class="title">Expires: </span><span class="data">{$p.expire_date.date}</span></div>{/if}
+                    {if $p.pricing}<div><span class="title">Pricing: </span><span class="data">{$p.pricing}</span></div>{/if}
+                </div>
+            </div>
+                                            {if $p.descr}
+                                            <div class="glm-member-packaging-data-container">
+                                                <div id="glm-member-db-package-list-description-toggle-{$p.id}" class="glm-member-db-package-list-content-toggle">Package Description</div>
+                                                <div id="glm-member-db-package-list-description-container-{$p.id}" class="glm-member-db-package-list-content-data">
+                                                    <div id="glm-member-db-package-list-description-{$p.id}">
+                                                         {$p.descr|wpautop}
+                                                    </div>
+                                                    <div class="glm-member-db-package-list-sub-data-links">
+                                                        <a class="glm-member-db-package-list-content-toggle">Collapse</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {/if}
+
+        </div>
+    {/foreach} <!-- /package -->
+
+    <div class="glm-member-detail-sub-data-links row">
+        <a class="left glm-member-detail-content-toggle">Collapse</a>
+        <a class="right link-to-top">Back to top</a>
+    </div>
+</div>
+{/if}
+<script type="text/javascript">
+        jQuery(document).ready(function($) {
+            // Open or close a section if its corresponding toggle is clicked
+            $(".glm-member-db-package-list-content-toggle").click(function() {
+
+                // If this is a child of sub-data-links (the 'Collapse' link)
+                if($(this).parents('.glm-member-db-package-list-sub-data-links').length) {
+                    // Retrieve the id from a higher level instead
+                    // based on: glm-member-db-package-list-description-container-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).parent().parent().attr("id").slice(49, 55);
+                } else {
+                    // based on: glm-member-db-package-list-description-toggle-{$p.id}
+                    // grabs the last 6 characters in case of a large ID
+                    var target = $(this).attr("id").slice(46, 52);
+                }
+                $("#glm-member-db-package-list-description-container-"+target).slideToggle("fast", "swing",  function() {});
+                $("#glm-member-db-package-list-description-toggle-"+target).toggleClass("selected");
+
+            });
+        }); // jquery
+    </script>
diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html
index 1e62cdb..b3b44d3 100644
--- a/glm-member-db/views/front/members/detail.html
+++ b/glm-member-db/views/front/members/detail.html
@@ -200,30 +200,6 @@
                     
                     {apply_filters('glm-member-db-front-members-detail-events', '', $member.id)}
                     
-                    {apply_filters('glm-member-db-front-members-detail-imageGalleryBefore', '', $member.id)}
-                    {if $settings.detail_show_imagegallery && $haveImageGallery}
-                    <div id="glm-member-detail-images-toggle" class="glm-member-detail-content-toggle">Photos</div>
-                    <div id="glm-member-detail-images-container" class="glm-member-detail-content-data small-12">
-                        {apply_filters('glm-member-db-front-members-detail-galleryTop', '', $member.id)}
-<!--                        <h2>Photo Gallery</h2>-->
-
-                            <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
-                        {foreach $imageGallery as $i}
-                                <li>
-                                    <a class="glm-member-detail-images-thumb fancybox" data-fancybox="images" rel="gallery1" href="{$glmPluginMediaUrl}/images/large/{$i.file_name}" style="background-image: url('{$glmPluginMediaUrl}/images/small/{$i.file_name}')">
-                                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif" alt="{$i.caption}">
-                                    </a>
-                                </li>
-                        {/foreach}
-                            </ul>
-                        {apply_filters('glm-member-db-front-members-detail-galleryBottom', '', $member.id)}
-                        <div class="glm-member-detail-sub-data-links row">
-                            <a class="glm-member-detail-content-toggle">Collapse</a>
-                            <a class="glm-member-detail-link-to-top">Back to top</a>
-                        </div>
-                    </div>
-                    {/if}
-                    {apply_filters('glm-member-db-front-members-detail-imageGalleryAfter', '', $member.id)}
                     {apply_filters('glm-member-db-front-members-detail-couponsBefore', '', $member.id)}
                     {if $settings.detail_show_coupons && $coupons}
                     <div id="glm-member-detail-coupons-toggle" class="glm-member-detail-content-toggle">Coupons</div>
@@ -236,6 +212,7 @@
                     </div>
                     {/if}
                     {apply_filters('glm-member-db-front-members-detail-couponsAfter', '', $member.id)}
+                    
                     {apply_filters('glm-member-db-front-members-detail-amenitiesBefore', '', $member.id)}
                     {if $member.amenities && $settings.detail_show_amenities}
                     <div id="glm-member-detail-amenities-toggle" class="glm-member-detail-content-toggle">Amenities & Services</div>
@@ -372,6 +349,31 @@
                             </div>
                         </div>
                     {/if}
+                    
+                    {apply_filters('glm-member-db-front-members-detail-imageGalleryBefore', '', $member.id)}
+                    {if $settings.detail_show_imagegallery && $haveImageGallery}
+                    <div id="glm-member-detail-images-toggle" class="glm-member-detail-content-toggle">Photos</div>
+                    <div id="glm-member-detail-images-container" class="glm-member-detail-content-data small-12">
+                        {apply_filters('glm-member-db-front-members-detail-galleryTop', '', $member.id)}
+<!--                        <h2>Photo Gallery</h2>-->
+
+                            <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
+                        {foreach $imageGallery as $i}
+                                <li>
+                                    <a class="glm-member-detail-images-thumb fancybox" data-fancybox="images" rel="gallery1" href="{$glmPluginMediaUrl}/images/large/{$i.file_name}" style="background-image: url('{$glmPluginMediaUrl}/images/small/{$i.file_name}')">
+                                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif" alt="{$i.caption}">
+                                    </a>
+                                </li>
+                        {/foreach}
+                            </ul>
+                        {apply_filters('glm-member-db-front-members-detail-galleryBottom', '', $member.id)}
+                        <div class="glm-member-detail-sub-data-links row">
+                            <a class="glm-member-detail-content-toggle">Collapse</a>
+                            <a class="glm-member-detail-link-to-top">Back to top</a>
+                        </div>
+                    </div>
+                    {/if}
+                    {apply_filters('glm-member-db-front-members-detail-imageGalleryAfter', '', $member.id)}
                    
                     {apply_filters('glm-member-db-front-members-detail-dataBottom','',$member.id)}
                 </div>
@@ -492,9 +494,9 @@
                     $("#glm-member-detail-packages-toggle").toggleClass("selected");
                 }
                 
-                if( $("#glm-member-detail-description-container").length > 0 && $("#glm-member-detail-description-toggle").length > 0){
-                    $("#glm-member-detail-description-container").slideToggle("fast", "swing",  function() {});
-                    $("#glm-member-detail-description-toggle").toggleClass("selected");
+                if( $("#glm-member-detail-images-container").length > 0 && $("#glm-member-detail-description-toggle").length > 0){
+                    $("#glm-member-detail-images-container").slideToggle("fast", "swing",  function() {});
+                    $("#glm-member-detail-images-toggle").toggleClass("selected");
                 }
                 
             }
-- 
2.17.1