NIHVIVO-3153 Initial attempt at more/less for properties on individual page. It currently kicks in when there are more than 3 instances of a property across the board (not aware of the display limit annotation so it's not per-property configurable).

productMods/js/individual/individualUtils.js

@@ -5,6 +5,84 @@ $(document).ready(function(){
     // "more"/"less" HTML truncator for showing more or less content in data property core:overview
     $('.overview-value').truncate({max_length: 500});
     
+    // "more"/"less" HTML truncator for all properties
+    // $('.subclass-property-list li:gt(4)').hide();
+    // $('ul li:gt(4)').hide();
+    // $('.show_button').click(function() {
+    //   $('ul li:gt(4)').show();
+    // });
+    
+    // var propList = '.property-list:not(:has(>li>ul)) li:gt(4)';
+    
+    $.fn.exists = function () {
+        return this.length !== 0;
+    }
+    
+    $.fn.moreLess = function () {
+        $(this).each
+    }
+    
+    var togglePropDisplay = {
+        showMore: function($toggleLink, $itemContainer) {
+            $toggleLink.click(function() {
+                $itemContainer.show();
+                $(this).attr('href', '#show less content');
+                $(this).text('less');
+                togglePropDisplay.showLess($toggleLink, $itemContainer);
+                return false;
+            });
+        },
+        
+        showLess: function($toggleLink, $itemContainer) {
+            $toggleLink.click(function() {
+                $itemContainer.hide();
+                $(this).attr('href', '#show more content');
+                $(this).text('more');
+                togglePropDisplay.showMore($toggleLink, $itemContainer);
+                return false;
+            });
+        }
+    };
+    
+    var $propList = $('.property-list:not(:has(>li>ul))');
+    $propList.each(function() {
+        var $additionalItems = $(this).find('li:gt(2)');
+        if ( $additionalItems.exists() ) {
+            // create toggle link
+            var $toggleLink = $('<a class="more-less" href="#show more content">more</a>').appendTo(this);
+            
+            // create container for additional elements
+            var $itemContainer = $('<div class="additionalItems" />').appendTo(this);
+            
+            $additionalItems.appendTo($itemContainer);
+            
+            $itemContainer.hide();
+            
+            togglePropDisplay.showMore($toggleLink, $itemContainer);
+            
+            // $wrappedItems.hide();
+            
+            // var moreLess = $(this).find(':visible:last-child').after(' <a class="more-less" href="#show more content">more</a>');
+            // $(additionalItems).first().before(' <a class="more-less" href="#show more content">more</a>');
+            // $wrappedItems.before(' <a class="more-less" href="#show more content">more</a>');
+            // togglePropDisplay.showMore($wrappedItems);
+            // $('.more-less').click(function() {
+            //                 $(additionalItems).show();
+            //                 $('.more-less').attr('href', '#show less content').text('less');
+            //                 
+            //             });
+        }
+    });
+    
+    var subPropList = '.subclass-property-list';
+    $(subPropList).each(function() {
+        var additionalItems = $(this).find('li:gt(4)');
+        if ( additionalItems.exists() ) {
+            $(additionalItems).hide();
+            $(this).append(' <a class="more-less" href="#show more content">more</a>');
+        }
+    });
+    
     // Change background color button when verbose mode is off
     $('a#verbosePropertySwitch:contains("Turn off")').addClass('verbose-off');
 

themes/wilma/css/wilma.css

@@ -1406,7 +1406,7 @@ article.property ul.property-list {
     color: #5e6363;
 }
 article.property ul.property-list li a {
-    color: #2485ae;
+    /*color: #2485ae;*/   /* cappadona: seems unnecessarily specific and is overriding .more-less from individual.css so I'm commenting out for now */
     line-height: 1.6em;
 }
 /* MISCELLANEOUS ------>  */