From d5553bfb17d26ba92f9d121b50d02807b14eceff Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Sun, 9 Jun 2019 21:00:19 -0400
Subject: [PATCH] LP#1832897: add public catalog display of carousels
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
.../src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm | 42 ++++++++++++++
Open-ILS/src/templates/opac/css/style.css.tt2 | 39 +++++++++++++
Open-ILS/src/templates/opac/parts/homesearch.tt2 | 1 +
Open-ILS/src/templates/opac/parts/js.tt2 | 4 ++
Open-ILS/src/templates/opac/parts/misc_util.tt2 | 64 ++++++++++++++++++++++
5 files changed, 150 insertions(+)
diff --git a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm
index 19a3b258a8..105c3bd1af 100644
--- a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm
+++ b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm
@@ -358,6 +358,48 @@ sub load_common {
$self->load_org_util_funcs;
$self->load_perm_funcs;
+ # FIXME - move carousel helpers to a separate file
+ $ctx->{get_visible_carousels} = sub {
+ my $org_unit = $self->ctx->{physical_loc} || $self->cgi->param('loc') || $self->ctx->{aou_tree}->()->id;
+ return $U->simplereq(
+ 'open-ils.actor',
+ 'open-ils.actor.carousel.retrieve_by_org',
+ $org_unit
+ );
+ };
+ $ctx->{get_carousel} = sub {
+ my $id = shift;
+
+ my $carousel = $e->retrieve_container_carousel($id);
+ my $ret = {
+ id => $id,
+ name => $carousel->name
+ };
+ my $q = {
+ select => { bre => ['id'], mfde => [{ column => 'value', alias => 'title' }] },
+ from => {
+ bre => {
+ cbrebi => {
+ join => {
+ cbreb => {
+ join => { cc => {} }
+ }
+ }
+ },
+ mfde => {}
+ }
+ },
+ where => {
+ '+cc' => { id => $id },
+ '+bre' => { deleted => 'f' },
+ '+mfde' => { name => 'title' }
+ }
+ };
+ my $r = $e->json_query($q);
+ $ret->{bibs} = $r;
+ return $ret;
+ };
+
$ctx->{fetch_display_fields} = sub {
my $id = shift;
diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index e5c1b0ba36..72c092fa4f 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -3394,3 +3394,42 @@ label[for*=expert_]
font-weight: bolder;
background-color: #42b0f4;
}
+
+/*
+ Carousels
+*/
+
+.carousel {
+ width: 40%;
+ margin: 0 auto;
+}
+.carousel-title {
+ font-size: 150%;
+ font-weight: bold;
+ text-align: center;
+}
+.carousel-entry {
+ max-width: 150px;
+}
+.carousel-entry-image {
+ width: 100%;
+ height: auto;
+}
+.carousel .glide__arrow {
+ color: [% css_colors.button_text %];
+ font-weight: bold !important;
+ text-decoration: none !important;
+ cursor: pointer;
+ border-radius: 5px;
+ border: 1px solid [% css_colors.primary %];
+ background-color: [% css_colors.primary_fade %];
+ margin: 0.5em;
+ padding: 0.3em;
+ display: inline-block;
+}
+.carousel .glide__arrow--right {
+ right: -5em;
+}
+.carousel .glide__arrow--left {
+ left: -5em;
+}
diff --git a/Open-ILS/src/templates/opac/parts/homesearch.tt2 b/Open-ILS/src/templates/opac/parts/homesearch.tt2
index 7fbc6205ee..f0be43135a 100644
--- a/Open-ILS/src/templates/opac/parts/homesearch.tt2
+++ b/Open-ILS/src/templates/opac/parts/homesearch.tt2
@@ -2,3 +2,4 @@
<img src="[% ctx.media_prefix %]/opac/images/main_logo.png[% ctx.cache_key %]"
[% img_alt(l('Evergreen Logo')) %]/>
</div>
+[% PROCESS carousels %]
diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index 19ad6ff2b4..74a9bd49cf 100644
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -153,3 +153,7 @@ var aou_hash = {
[%- IF ctx.max_cart_size; %]
<script type="text/javascript">var max_cart_size = [% ctx.max_cart_size %];</script>
[%- END; %]
+
+
+<link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/common/build/js/glide/css/glide.core.min.css[% ctx.cache_key %]">
+<link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/common/build/js/glide/css/glide.theme.min.css[% ctx.cache_key %]">
diff --git a/Open-ILS/src/templates/opac/parts/misc_util.tt2 b/Open-ILS/src/templates/opac/parts/misc_util.tt2
index 6f3d18bf8c..609f22d055 100644
--- a/Open-ILS/src/templates/opac/parts/misc_util.tt2
+++ b/Open-ILS/src/templates/opac/parts/misc_util.tt2
@@ -802,3 +802,67 @@
END;
-%]
+
+[%- BLOCK carousels;
+ config = {
+ animated => 0,
+ animation_interval => 5,
+ width => 4,
+ };
+ config.import(args);
+ carousels = [];
+ IF config.carousel_id;
+ carousels.push(ctx.get_carousel(config.carousel_id));
+ ELSE;
+ visible_carousels = ctx.get_visible_carousels();
+ FOREACH car IN visible_carousels;
+ carousel = ctx.get_carousel(car.carousel);
+ IF car.override_name.defined;
+ carousel.name = car.override_name;
+ END;
+ carousels.push(carousel);
+ END;
+ END;
+ IF carousels.size > 0;
+%]
+<script type="text/javascript" src="[% ctx.media_prefix %]/js/ui/default/common/build/js/glide/glide.min.js[% ctx.cache_key %]"></script>
+<div class="carousels">
+[% FOREACH carousel IN carousels;
+ IF carousel.bibs.size > 0;
+%]
+<div class="carousel">
+<div class="carousel-title">[% carousel.name %]</div>
+<div class="carousel-body glide" id="carousel-[% carousel.id %]">
+ <div class="glide__track" data-glide-el="track">
+ <ul class="glide__slides">
+[% FOREACH bib IN carousel.bibs; %]
+ <li class="glide__slide"><div class="carousel-entry">
+ <a href="[% mkurl(ctx.opac_root _ '/record/' _ bib.id) %]">
+ <img alt="[% l('Book cover') %]" class="carousel-entry-image" src="[% ctx.media_prefix %]/opac/extras/ac/jacket/medium/r/[% bib.id | uri %]"></img>
+ </a><br>
+ <span class="carousel-entry-title"><a href="[% mkurl(ctx.opac_root _ '/record/' _ bib.id) %]">[% bib.title | html %]</a></span>
+ </div></li>
+[% END; %]
+ </ul>
+ </div>
+ <div class="glide__arrows" data-glide-el="controls">
+ <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
+ <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
+ </div>
+</div>
+</div>
+<script>
+ var glide = new Glide('#carousel-[% carousel.id %]', {
+ type: 'carousel',
+ rewind: false,
+ perView: [% config.width %],
+ startAt: 0,
+ [% IF config.animated %] autoplay: [% config.animation_interval * 1000 %],[% END %]
+ });
+ glide.mount();
+</script>
+[% END; %]
+[% END; %]
+</div>
+[% END -%]
+[% END -%]
--
2.11.0