Auto-expand member detail sections, package desc title
authorLaury GvR <laury@gaslightmedia.com>
Mon, 5 Feb 2018 19:30:07 +0000 (14:30 -0500)
committerLaury GvR <laury@gaslightmedia.com>
Mon, 5 Feb 2018 19:30:07 +0000 (14:30 -0500)
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.

glm-member-db-packaging/views/front/packaging/listForMemberDetail.html [new file with mode: 0644]
glm-member-db/views/front/members/detail.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 (file)
index 0000000..5f2e343
--- /dev/null
@@ -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>
index 1e62cdb..b3b44d3 100644 (file)
                     
                     {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>
                     </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>
                             </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>
                     $("#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");
                 }
                 
             }