From aa09c0a9560d841312b69455b77d1b04d4122711 Mon Sep 17 00:00:00 2001 From: Kyle Huckins Date: Thu, 17 Jan 2019 19:32:45 +0000 Subject: [PATCH] LP#1424815: 'Read more' accordion in record view - Introduce custom accordion.JS to handle expand/truncation of node information. - Expansion/Truncation of individual nodes based on configurable length. - Refactor content.tt2 to properly display multiple notes with both Read More and Highlighting features. - Create accordion() macro in summary.tt2 to handle accordion-izing a string when also supplied with a length, display field string, and an optional highlighting boolean. - Implementation of config.tt2 variables to handle enabling and length requirements for truncation. - Apply Read More to record Title as well as item details and graphics text on record and search results. - Teach Accordion functionality to understand blocks of HTML - Add release notes for Read More functionality. Signed-off-by: Kyle Huckins Signed-off-by: Ruth Fraser Signed-off-by: Michele Morgan Signed-off-by: Galen Charlton --- .../perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm | 74 ++++++++++++++++++++++ Open-ILS/src/templates/opac/css/style.css.tt2 | 4 ++ Open-ILS/src/templates/opac/i18n_strings.tt2 | 3 + Open-ILS/src/templates/opac/parts/config.tt2 | 9 +++ Open-ILS/src/templates/opac/parts/js.tt2 | 2 +- Open-ILS/src/templates/opac/parts/misc_util.tt2 | 18 ++++++ .../src/templates/opac/parts/record/authors.tt2 | 45 ++++++++----- .../src/templates/opac/parts/record/contents.tt2 | 43 +++++++++---- .../src/templates/opac/parts/record/summary.tt2 | 49 +++++++------- Open-ILS/src/templates/opac/parts/result/table.tt2 | 24 ++++--- Open-ILS/web/js/ui/default/opac/accordion.js | 47 ++++++++++++++ .../RELEASE_NOTES_NEXT/OPAC/read-more-feature.adoc | 31 +++++++++ 12 files changed, 287 insertions(+), 62 deletions(-) create mode 100644 Open-ILS/web/js/ui/default/opac/accordion.js create mode 100644 docs/RELEASE_NOTES_NEXT/OPAC/read-more-feature.adoc 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 7f35d18835..fdb0da5aca 100644 --- a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm +++ b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm @@ -4,6 +4,8 @@ use Apache2::Const -compile => qw(OK DECLINED FORBIDDEN HTTP_INTERNAL_SERVER_ERR use File::Spec; use Time::HiRes qw/time sleep/; use List::MoreUtils qw(uniq); +use HTML::TreeBuilder; +use HTML::Element; use OpenSRF::Utils::Cache; use OpenSRF::Utils::Logger qw/$logger/; use OpenILS::Utils::CStoreEditor qw/:funcs/; @@ -130,6 +132,78 @@ 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 $html = shift; + my $trunc_length = shift; + + return unless defined $html && defined $trunc_length; + + my $html_string = ""; + my $trunc_str = "..."); + } + + if (@html_strings > 1) { + $html_string = join '', @html_strings; + } else { + $html_string = $html_strings[0]; + } + + return ($html_string, $truncated); + }; + $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 51aa7a6e4a..18cb68808c 100644 --- a/Open-ILS/src/templates/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates/opac/css/style.css.tt2 @@ -49,6 +49,10 @@ a { width: 12em; } +.truncated { + display: none; +} + .searchbar { font-weight: bold; padding-top: 10px; diff --git a/Open-ILS/src/templates/opac/i18n_strings.tt2 b/Open-ILS/src/templates/opac/i18n_strings.tt2 index 7d3b831d64..2a60c99b21 100644 --- a/Open-ILS/src/templates/opac/i18n_strings.tt2 +++ b/Open-ILS/src/templates/opac/i18n_strings.tt2 @@ -21,4 +21,7 @@ to js source files, via js blob. eg_opac_i18n.EG_INVALID_DATE = "[% l('That is not a valid date in the future.') %]"; // For multiple holds placement confirmation dialog. {0} is replaced by number of copies requested. eg_opac_i18n.EG_MULTIHOLD_MESSAGE = "[% l('Do you really want to place {0} holds for this title?') %]"; + // For Read More functionality + eg_opac_i18n.EG_READ_MORE = "[% l('Read More') %]"; + eg_opac_i18n.EG_READ_LESS = "[% l('Read Less') %]"; diff --git a/Open-ILS/src/templates/opac/parts/config.tt2 b/Open-ILS/src/templates/opac/parts/config.tt2 index a1438b7171..eda51ad814 100644 --- a/Open-ILS/src/templates/opac/parts/config.tt2 +++ b/Open-ILS/src/templates/opac/parts/config.tt2 @@ -276,4 +276,13 @@ ctx.max_cart_size = 500; ############################################################################## ctx.show_reservations_tab = 'false'; +############################################################################## +# Truncate fields in catalog +############################################################################## +truncate_contents = 1; +contents_truncate_length = 50; + +# Edit parts/record/contents.tt2 to designate character length on a field-by- +# field basis for notes. + %] diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2 index 15ff471eec..aa4e9f54da 100644 --- a/Open-ILS/src/templates/opac/parts/js.tt2 +++ b/Open-ILS/src/templates/opac/parts/js.tt2 @@ -169,7 +169,7 @@ var aou_hash = { [%- IF ctx.max_cart_size; %] [%- END; %] - + diff --git a/Open-ILS/src/templates/opac/parts/misc_util.tt2 b/Open-ILS/src/templates/opac/parts/misc_util.tt2 index 38f2995a0f..ee600a1b36 100644 --- a/Open-ILS/src/templates/opac/parts/misc_util.tt2 +++ b/Open-ILS/src/templates/opac/parts/misc_util.tt2 @@ -803,6 +803,7 @@ -%] + [%- BLOCK carousels; config = { animated => 0, @@ -876,3 +877,20 @@ [% END -%] [% END -%] +[% MACRO accordion(str, trunc_length, element) BLOCK; + IF truncate_contents != 1; + str; + ELSE; + UNLESS trunc_length; + trunc_length = contents_truncate_length || 100; + END; + IF str.length > trunc_length; + accordion_res = ctx.split_for_accordion(str, trunc_length); + str = accordion_res.0; + IF accordion_res.1; + str = str _ " " _ l('Read More') _ ""; + END; + END; + str; + END; +END; %] diff --git a/Open-ILS/src/templates/opac/parts/record/authors.tt2 b/Open-ILS/src/templates/opac/parts/record/authors.tt2 index 25dac9a5cc..70620309cc 100644 --- a/Open-ILS/src/templates/opac/parts/record/authors.tt2 +++ b/Open-ILS/src/templates/opac/parts/record/authors.tt2 @@ -135,17 +135,26 @@ BLOCK build_author_links; END; iprop = iprop _ '"'; END; - + desc_str = '(' _ author_type _ ').'; link_term = link_term.replace('^\s+', ''); match_term = link_term _ ' ' _ birthdate _ ' ' _ deathdate; matching_author_hl = PROCESS find_hl_value needle=match_term f=attrs.hl_field; - - authtml = ' '; + authtml = ''; IF iprop; authtml = authtml _ ''; END; IF matching_author_hl; - authtml = authtml _ matching_author_hl; + IF type == 'cast'; + link_str = matching_author_hl _ ' ' _ desc_str _ ''; + authtml = authtml _ accordion(link_str, null, 'this.previousElementSibling'); + ELSE; + authtml = authtml _ matching_author_hl; + END; ELSE; - authtml = authtml _ link_term; + IF type == 'cast'; + link_str = link_term _ ' ' _ desc_str _ ''; + authtml = authtml _ accordion(link_str, null, 'this.previousElementSibling'); + ELSE; + authtml = authtml _ link_term; + END; END; IF iprop; authtml = authtml _ ''; END; IF birthdate AND !matching_author_hl; @@ -154,7 +163,7 @@ BLOCK build_author_links; IF deathdate AND !matching_author_hl; authtml = authtml _ '' _ deathdate _ ''; END; - authtml = authtml _ ''; # End search link + IF type != 'cast'; authtml = authtml _ ''; END; # End search link # Display supplemental terms (mostly about the author's work) IF supp_term; @@ -167,12 +176,12 @@ BLOCK build_author_links; IF link880.dir; diratt = ' dir="' _ link880.dir _ '"'; END; - authtml = authtml _ ' '; - link880.value | html; - authtml = authtml _ ''; + authlist_graphical.push('' _ link880.value _ ''); + END; + IF type != 'cast'; + authtml = authtml _ desc_str; + authtml = authtml _ ''; # End author span END; - authtml = authtml _ ' (' _ author_type _ '). '; - authtml = authtml _ ''; # End author span authlist.push(authtml); END; END; @@ -182,14 +191,20 @@ END; [%- FOREACH author IN authors; NEXT UNLESS author.xpath; authlist = []; + authlist_graphical = []; + authstr = ''; + graphical_string = ''; PROCESS build_author_links( xpath=author.xpath, label=author.label, type=author.type ); + IF authlist_graphical.size; + %]
[% + accordion(authlist_graphical.join()); + %]
[% END; IF authlist.size; - FOREACH authtml IN authlist; - authtml; - END; - END; + %]
[% + accordion(authlist.join()); + %]
[% END; END %] diff --git a/Open-ILS/src/templates/opac/parts/record/contents.tt2 b/Open-ILS/src/templates/opac/parts/record/contents.tt2 index db80b475c2..c63b34c166 100644 --- a/Open-ILS/src/templates/opac/parts/record/contents.tt2 +++ b/Open-ILS/src/templates/opac/parts/record/contents.tt2 @@ -1,8 +1,10 @@ -[%- +[% USE Dumper %][%- +# You can supply a trunc_length parameter to override the default contents_truncate_length value contents = [ { display_field => 'general_note', label => l('General Note: '), + trunc_length => 100, xpath => '//*[@tag="500"]' }, { label => l('With Note: '), @@ -177,10 +179,16 @@ BLOCK render_contents; all_content.push(subfield.textContent); END; total_contents = all_content.join(" ").replace('\s+$', ''); - %] [% "
"; total_contents | html ; "
"; + %] [% IF total_contents.size; + trunc_length = cont.trunc_length || contents_truncate_length || 100; + + "
"; accordion(total_contents, trunc_length); "
"; + ELSE; + "
"; accordion(total_contents); "
"; + END; FOREACH link880 IN graphics; '
'; - link880.value | html; + accordion(link880.value); '
'; END; END; @@ -188,21 +196,28 @@ END; BLOCK render_all_contents; FOREACH cont IN contents; + note_arr = []; content = ''; df = cont.display_field; - IF df AND attrs.hl.$df.size; - content = '' _ attrs.hl.$df.join('
'); - ELSE; + trunc_length = cont.trunc_length || contents_truncate_length || 100; + IF df AND attrs.hl.$df.size; -%] + + [% cont.label %] + + [%- FOREACH note IN attrs.hl.$df; + "
"; accordion(note, trunc_length); "
"; + END -%] + + [%- ELSE; content = PROCESS render_contents(xpath=cont.xpath); + IF content.match('\S'); -%] + + [% cont.label %] + [% accordion(content, trunc_length) %] + + [%- END; END; - IF content.match('\S'); --%] - - [% cont.label %] - [% content %] - - [%- END; %] - [%- END; %] + END; %] [%- END %] [%- content_html = PROCESS render_all_contents; diff --git a/Open-ILS/src/templates/opac/parts/record/summary.tt2 b/Open-ILS/src/templates/opac/parts/record/summary.tt2 index be248abe38..d3aed58394 100644 --- a/Open-ILS/src/templates/opac/parts/record/summary.tt2 +++ b/Open-ILS/src/templates/opac/parts/record/summary.tt2 @@ -3,6 +3,7 @@ ctx.page_title = attrs.title | html ctx.metalinks.push(''); %] + @@ -11,7 +12,7 @@ [%-# This holds the record summary information %]
-

[% IF attrs.hl.title; attrs.hl.title; ELSE; attrs.title_extended | html; END %]

+

[% IF attrs.hl.title; accordion(attrs.hl.title); ELSE; accordion(attrs.title_extended); END %]

[%- FOR link880 IN attrs.graphic_titles; FOR alt IN link880.graphic; @@ -19,7 +20,7 @@ IF alt.dir; ' dir="' _ alt.dir _ '"'; END; - '>'; alt.value | html; ''; + '>'; accordion(alt.value); ''; END; END; -%] @@ -359,22 +360,25 @@ END; [%- IF attrs.hl.physical_description.size %]
  • [% l("Physical Description:") %] - [% attrs.hl.physical_description.join('
    ') %]     + + [% FOREACH desc IN attrs.hl.physical_description %] + [% accordion(desc) %]
    + [% END %]
    • [%- ELSIF attrs.phys_desc %]
  • [% l("Physical Description:") %] - [% attrs.phys_desc | html %] + [% accordion(attrs.phys_desc) %]
    • [%- END %] [%- IF attrs.hl.edition %]
  • [% l("Edition:") %] - [% attrs.hl.edition %] + [% accordion(attrs.hl.edition) %] [%- ELSIF attrs.edition %]
  • [% l("Edition:") %] - [% attrs.edition | html %] + [% accordion(attrs.edition) %] [%- FOR entry IN attrs.graphic_editions; FOR alt IN entry.graphic; @@ -384,7 +388,7 @@ END; END; -%]
    - [% alt.value | html %] + [% accordion(alt.value); %]
    [%- END; @@ -395,19 +399,20 @@ END; [%- IF attrs.hl.publisher %]
  • [% l("Publisher:") %] - [% attrs.hl.publisher %] + [% accordion(attrs.hl.publisher) %]
    • [%- ELSIF attrs.publisher %]
  • [% l("Publisher:") %] + [% pubstr = '' %] [%- IF attrs.pubplace; %] - [% attrs.pubplace | html; %] + [% attrs.pubplace %] [%- END; %] - [% attrs.publisher | html; %] + [% attrs.publisher %] [%- IF attrs.pubdate; %] - [% attrs.pubdate | html; %] + [% attrs.pubdate %] [%- END; %] [%- IF attrs.graphic_pubinfos.size > 0; @@ -419,7 +424,7 @@ END; END; -%]
    - [% alt.value | html %] + [% accordion(alt.value) %]
    [%- END; @@ -433,11 +438,11 @@ END; [% l("Producer:") %] [%- IF attrs.prodplace; %] - [% attrs.prodplace | html; %] + [% accordion(attrs.prodplace) %] [%- END; %] - [% attrs.producer | html; %] + [% accordion(attrs.producer) %] [%- IF attrs.proddate; %] - [% attrs.proddate | html; %] + [% accordion(attrs.proddate) %] [%- END; %]
    • @@ -447,11 +452,11 @@ END; [% l("Distributor:") %] [%- IF attrs.distplace; %] - [% attrs.distplace | html; %] + [% accordion(attrs.distplace) %] [%- END; %] - [% attrs.distributor | html; %] + [% accordion(attrs.distributor) %] [%- IF attrs.distdate; %] - [% attrs.distdate | html; %] + [% accordion(attrs.distdate) %] [%- END; %] @@ -461,11 +466,11 @@ END; [% l("Manufacturer:") %] [%- IF attrs.manplace; %] - [% attrs.manplace | html; %] + [% accordion(attrs.manplace) %] [%- END; %] - [% attrs.manufacturer | html; %] + [% accordion(attrs.manufacturer) %] [%- IF attrs.mandate; %] - [% attrs.mandate | html; %] + [% accordion(attrs.mandate) %] [%- END; %] @@ -473,7 +478,7 @@ END; [%- IF attrs.copyright %]