LP#1424815: 'Read more' accordion in record view

First part to add an optional 'read more' clicky to long fields in the
record view.  CSS-based, no javascript involved.

Signed-off-by: Jake Litrell <jake@greanvine.com>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Conflicts:
	Open-ILS/src/templates/opac/css/style.css.tt2

Conflicts:
	Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm
	Open-ILS/src/templates/opac/css/style.css.tt2

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Remington Steed <rjs7@calvin.edu>
Conflicts:
	Open-ILS/src/templates/opac/parts/record/contents.tt2

diff --git a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm
index 3cb0799..b5f2e0f 100644 (file)
--- a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm
+++ b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm
@@ -202,6 +202,48 @@ sub init_ro_object_cache {
         return (grep {$_->shortname eq $sn} @$list)[0];
     };
 
+
+
+
+
+    # Turns one string into two for long text strings
+    $locale_subs->{split_for_accordion} = sub {
+        my $string = shift;
+        my $trunc_length = shift;
+
+        return unless defined $string && defined $trunc_length;
+        return if $trunc_length > length $string;
+
+        my $short;
+        my $rest;
+        # find non-whitespace from end
+        # 0-BASED!
+
+        if ((substr $string, $trunc_length, 1) =~ /\s/) {
+            # Next character is whitespace - we're good; split there
+
+            $short = substr $string, 0, $trunc_length;
+            $rest  = substr $string, $trunc_length;
+        }
+        else {
+            # find the space nearest the end of our (not-yet) truncated string
+            my $loc = rindex $string, ' ', $trunc_length;
+
+            # FIXME: if $loc = -1 (can't truncate - no spaces found)
+            $short = substr $string, 0, $loc;
+            $rest = substr $string, $loc;
+        }
+
+        return ($short, $rest);
+    };
+
+
+
+
+
+
+
+
     $locale_subs->{aouct_tree} = sub {
 
         # fetch the org unit tree

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index e176ed7..79a10a7 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -3332,6 +3332,94 @@ label[for*=expert_]
 }
 [id^="toggled-inline-"]:target{
     display: inline;
+ul {
+  list-style: none;
+  perspective: 900;
+  padding: 0;
+  margin: 0;
+}
+ul li {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  padding-bottom: 4px;
+  padding-top: 18px;
+  border-top: 1px dotted #dce7eb;
+}
+ul li:nth-of-type(1) {
+  animation-delay: 0.5s;
+}
+ul li:nth-of-type(2) {
+  animation-delay: 0.75s;
+}
+ul li:nth-of-type(3) {
+  animation-delay: 1s;
+}
+ul li:last-of-type {
+  padding-bottom: 0;
+}
+ul li i {
+  position: absolute;
+  transform: translate(-6px, 0);
+  margin-top: 16px;
+  right: 0;
+}
+ul li i:before, ul li i:after {
+  content: "";
+  position: absolute;
+  background-color: #ff6873;
+  width: 3px;
+  height: 9px;
+}
+ul li i:before {
+  transform: translate(-2px, 0) rotate(45deg);
+}
+ul li i:after {
+  transform: translate(2px, 0) rotate(-45deg);
+}
+ul li input[type=checkbox] {
+  position: absolute;
+  cursor: pointer;
+  width: 10%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+}
+ul li input[type=checkbox]:checked ~ p {
+  margin-top: 0;
+  max-height: 0;
+  opacity: 0;
+  transform: translate(0, 50%);
+}
+ul li input[type=checkbox]:checked ~ i:before {
+  transform: translate(2px, 0) rotate(45deg);
+}
+ul li input[type=checkbox]:checked ~ i:after {
+  transform: translate(-2px, 0) rotate(-45deg);
+}
+
+@keyframes flipdown {
+  0% {
+    opacity: 0;
+    transform-origin: top center;
+    transform: rotateX(-90deg);
+  }
+  5% {
+    opacity: 1;
+  }
+  80% {
+    transform: rotateX(8deg);
+  }
+  83% {
+    transform: rotateX(6deg);
+  }
+  92% {
+    transform: rotateX(-3deg);
+  }
+  100% {
+    transform-origin: top center;
+    transform: rotateX(0deg);
+  }
 }
 
 .oils_SH {

diff --git a/Open-ILS/src/templates/opac/parts/record/contents.tt2 b/Open-ILS/src/templates/opac/parts/record/contents.tt2
index db80b47..103394a 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/record/contents.tt2
+++ b/Open-ILS/src/templates/opac/parts/record/contents.tt2
@@ -3,6 +3,7 @@ contents =  [
     {
         display_field => 'general_note',
         label => l('General Note: '),
+        trunc_length => 20,
         xpath => '//*[@tag="500"]'
     }, {
         label => l('With Note: '),
@@ -14,6 +15,7 @@ contents =  [
     }, {
         display_field => 'bibliography',
         label => l('Bibliography, etc. Note: '),
+        trunc_length => 25,
         xpath => '//*[@tag="504"]'
     }, {
         display_field => 'toc',
@@ -178,6 +180,12 @@ BLOCK render_contents;
         END;
         total_contents = all_content.join(" ").replace('\s+$', '');
         %] [% "<div class='content_field'>"; total_contents | html ; "</div>";
+            IF total_contents.length > cont.trunc_length; # should be ok on undefined... I think.  Just skips it.
+              # need to chop!
+              blah = ctx.split_for_accordion(total_contents, cont.trunc_length);
+              cont.short = blah.0;
+              cont.long  = blah.1;
+            END;
         FOREACH link880 IN graphics;
             '<div class="graphic880"' _ link880.dir _ '>';
             link880.value | html;
@@ -199,7 +207,17 @@ BLOCK render_all_contents;
 -%]
 <tr>
     <td class='rdetail_content_type'>[% cont.label %]</td>
-    <td class='rdetail_content_value' property='keywords'>[% content %]</td>
+    <td class='rdetail_content_value' property='keywords'>
+[% IF cont.short.length %]
+<ul>
+<li>
+    [% cont.short %]... <input type="checkbox" checked>[% l('(click for more)') %] <p>[% cont.long%]</p>
+</li>
+</ul>
+[% ELSE %]
+    [% content %]
+[% END; %]
+</td>
 </tr>
         [%- END; %]
     [%- END; %]