From 50cf57d5eb34d47e18417ac7c6b8f5563a453431 Mon Sep 17 00:00:00 2001 From: Jake Litrell Date: Tue, 26 Jul 2016 23:57:10 -0400 Subject: [PATCH] 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 Signed-off-by: Kathy Lussier 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 Signed-off-by: Remington Steed Conflicts: Open-ILS/src/templates/opac/parts/record/contents.tt2 --- .../perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm | 42 +++++++++++ Open-ILS/src/templates/opac/css/style.css.tt2 | 88 ++++++++++++++++++++++ .../src/templates/opac/parts/record/contents.tt2 | 20 ++++- 3 files changed, 149 insertions(+), 1 deletion(-) 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 3cb07997db..b5f2e0fbae 100644 --- 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 e176ed712a..79a10a7ebf 100644 --- 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 db80b475c2..103394a8f3 100644 --- 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+$', ''); %] [% "
"; total_contents | html ; "
"; + 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; '
'; link880.value | html; @@ -199,7 +207,17 @@ BLOCK render_all_contents; -%] [% cont.label %] - [% content %] + +[% IF cont.short.length %] +
    +
  • + [% cont.short %]... [% l('(click for more)') %]

    [% cont.long%]

    +
    • +
+[% ELSE %] + [% content %] +[% END; %] + [%- END; %] [%- END; %] -- 2.11.0