omeka · DBinaghi · May 7, 2021 · May 7, 2021 · May 7, 2021 · May 7, 2021
diff --git a/README.md b/README.md
@@ -0,0 +1,81 @@
+# Shortcode Carousel
+
+## Description
+Omeka Classic plugin that adds a shortcode to create a carousel of items using jCarousel.
+
+The basic shortcode is `[carousel]`. 
+The shortcode `[recent_carousel]` and `[featured_carousel]` are shortcuts to creating a carousel of recent and featured items, respectively.
+
+## Installation
+Uncompress files and rename plugin folder "ShortcodeCarousel".
+
+Then install it like any other Omeka plugin.
+
+## Plugin specific options
+- **speed**: sets the speed for the scrolling animation. May be "fast", "slow", or a time in milliseconds. Default is 400. For example: `[carousel speed=slow]` or `[carousel speed=500]`
+- **autoscroll**: setting autoscroll=true will make the items automatically scroll
+- **interval**: when autoscroll is on, interval sets the interval between scrolling in milliseconds. Default is 3000. For example: `[carousel autoscroll=true interval=700]`
+- **pauseonhover**: setting pauseonhover=true will temporarily pause the carousel's scrolling when mouse will be hovering over it. For example: `[carousel pauseonhover=true]`
+- **showtitles**: setting showtitles=true will display the item title in the carousel. For example: `[carousel showtitles=true]`
+- **showtitlesastooltips**: setting showtitlesastooltips=true will use the item title as text for image's tooltip in the carousel. For example: `[carousel  showtitles=true showtitlesastooltips=true]`
+- **hidenavigation**: setting hidenavigation=true will hide the carousel's navigation bar. For example: `[carousel hidenavigation=true]`
+
+## Item shortcode general options
+The carousel shortcode uses also the following options, defined for Items:
+- **is_featured**, with 1 or 0
+- **user**, with user id
+- **ids**, with a range of id
+- **sort_field**, with a sort field
+- **sort_dir**, with the sort dir "a" or "d"
+- **collection**, with the collection id
+- **num**, with the number of items to show
+
+## Usage outside of Simple Pages
+Theme developers may add support for usage anywhere on their Omeka site. For example, you could create a theme setting called Carousel (as an HTML text area where a user might place the shortcode) and add the following to your homepage or other theme template.
+```
+<?php
+    $t = get_theme_option('Carousel');
+    echo $this->shortcodes($t);
+?>
+```
+
+## Warning
+Use it at your own risk.
+
+It’s always recommended to backup your files and your databases and to check your archives regularly so you can roll back if needed.
+
+## Troubleshooting
+
+See online issues on the [plugin issues] page on GitHub.
+
+## License
+
+This plugin is published under [GNU/GPL].
+
+This program is free software; you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation; either version 3 of the License, or (at your option) any later
+version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+details.
+
+You should have received a copy of the GNU General Public License along with
+this program; if not, write to the Free Software Foundation, Inc.,
+51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+## Copyright
+
+* Copyright Omeka Team, 2014-2019
+* Copyright Daniel Berthereau, 2020 (see [Daniel-KM] on GitHub)
+* Copyright Daniele Binaghi, 2021 (see [DBinaghi] on GitHub)
+
+
+[Shortcode Carousel]: https://github.com/omeka/plugin-ShortcodeCarousel
+[Omeka]: https://omeka.org/classic
+[plugin issues]: http://omeka.org/forums/forum/plugins
+[GNU/GPL]: https://www.gnu.org/licenses/gpl-3.0.html
+[Daniel-KM]: https://github.com/Daniel-KM "Daniel Berthereau"
+[DBinaghi]: https://github.com/DBinaghi "Daniele Binaghi"
diff --git a/ShortcodeCarouselPlugin.php b/ShortcodeCarouselPlugin.php
@@ -15,8 +15,8 @@ public function setUp()
     public function hookPublicHead($args)
     {
         queue_css_file('jcarousel.responsive');
-        queue_js_file('jcarousel.responsive');
         queue_js_file('jquery.jcarousel.min');
+        queue_js_file('jcarousel.responsive');
     }
 
     /**
@@ -76,7 +76,7 @@ public static function carousel($args, $view)
         if (isset($args['order'])) {
             $params['sort_dir'] = $args['order'];
         }
-        
+
         if (isset($args['collection'])) {
             $params['collection'] = $args['collection'];
         }
@@ -89,26 +89,54 @@ public static function carousel($args, $view)
         $params['hasImage'] = 1;
         $items = get_records('Item', $params, $limit);
 
+        if (empty($args['sort']) && isset($args['ids'])) {
+            // use the order of the ids provided
+            $ids = explode(',', $args['ids']);
+            $idsToRecord = array();
+            foreach ($items as $it) {
+                $id = (int)($it->id);
+                $idsToRecord[$id] = $it;
+            }
+            $newItems = array();
+            foreach ($ids as $id) {
+                if (isset($idsToRecord[$id])) {
+                    $newItems[] = $idsToRecord[$id];
+                }
+            }
+            if ($newItems) {
+                $items = $newItems;
+            }
+        }
+
         //handle the configs for jCarousel
         $configs = array('carousel' => array());
 
         //carousel configs
-        if(isset($args['speed'])) {
-            if(is_numeric($args['speed'])) {
+        if (isset($args['speed'])) {
+            if (is_numeric($args['speed'])) {
                 $configs['carousel']['animation'] = (int) $args['speed'];
             } else {
                 $configs['carousel']['animation'] = $args['speed'];
             }
         }
-        if(isset($args['showtitles']) && $args['showtitles'] == 'true') {
+        if (isset($args['showtitles']) && $args['showtitles'] == 'true') {
             $configs['carousel']['showTitles'] = true;
         }
+        if (isset($args['showtitlesastooltips']) && $args['showtitlesastooltips'] == 'true') {
+            $configs['carousel']['showTitlesAsTooltips'] = true;
+        }
+        if (isset($args['hidepagination']) && $args['hidepagination'] == 'true') {
+            $configs['carousel']['hidePagination'] = true;
+        }
         //autoscroll configs
-        if(isset($args['autoscroll']) && $args['autoscroll'] == 'true') {
+        if (isset($args['autoscroll']) && $args['autoscroll'] == 'true') {
             $configs['autoscroll'] = array();
-            if(isset($args['interval'])) {
+            if (isset($args['interval'])) {
                 $configs['autoscroll']['interval'] = (int) $args['interval'];
             }
+            if (isset($args['pauseonhover'])) {
+                $configs['autoscroll']['pauseOnHover'] = (bool) $args['pauseonhover'];
+            }
         }
         $configs['carousel']['wrap'] = 'circular';
         $html = $view->partial('carousel.php', array('items' => $items, 'id_suffix' => $id_suffix, 'configs' => $configs));

diff --git a/views/public/carousel.php b/views/public/carousel.php
@@ -1,40 +1,55 @@
 <div class="jcarousel-wrapper">
     <div class="jcarousel" id="jcarousel-<?php echo $id_suffix; ?>">
         <ul>
-        <?php foreach($items as $item): ?>
+        <?php foreach ($items as $item): ?>
             <li>
-
-            <?php echo link_to_item(
-                    item_image('square_thumbnail', array(), 0, $item), 
-                    array('class' => 'shortcode-carousel-image'), 'show', $item
-                    );
+            <?php 
+				$options = array();
+				if (isset($configs['carousel']['showTitlesAsTooltips']) && $configs['carousel']['showTitlesAsTooltips']) { 
+					$options['title'] = trim(strip_tags(metadata($item, array('Dublin Core', 'Title'))));
+				}
+			?>
+            <?php
+            echo link_to_item(
+                item_image('square_thumbnail', $options, 0, $item),
+                array('class' => 'shortcode-carousel-image'), 'show', $item
+            );
             ?>
-            <?php if(isset($configs['carousel']['showTitles']) && $configs['carousel']['showTitles'] ): ?>
+            <?php if (isset($configs['carousel']['showTitles']) && $configs['carousel']['showTitles']): ?>
                 <p class="shortcode-carousel-title">
-                <a href="<?php echo record_url($item, 'show'); ?>">
-                <?php echo metadata($item, array('Dublin Core', 'Title')); ?>
-                </a>
+					<a href="<?php echo record_url($item, 'show'); ?>">
+					<?php echo metadata($item, array('Dublin Core', 'Title')); ?>
+					</a>
                 </p>
             <?php endif; ?>
-            </li>
+           </li>
         <?php endforeach; ?>
         </ul>
     </div>
 
-    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
-    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+    <a href="#" class="jcarousel-controls jcarousel-control-prev"><span class="fa-stack" style="width: 1em"><i class="fas fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span></a>
+    <a href="#" class="jcarousel-controls jcarousel-control-next"><span class="fa-stack" style="width: 1em"><i class="fas fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span></a>
 
-    <p class="jcarousel-pagination"></p>
+    <?php if (!isset($configs['carousel']['hidePagination']) || !$configs['carousel']['hidePagination']): ?>
+	<p class="jcarousel-pagination"></p>
+	<?php endif; ?>
 </div>
 
 <script type='text/javascript'>
-jQuery(function() {
-    var carouselConfig = <?php echo json_encode($configs['carousel']);?>;
-    var configs = <?php echo json_encode($configs);?>;
-    var carousel = jQuery('#jcarousel-<?php echo $id_suffix; ?>').jcarousel(carouselConfig);
-    <?php if(isset($configs['autoscroll'])): ?>
-    var autoscrollConfig = <?php echo json_encode($configs['autoscroll']);?>;
-    carousel.jcarouselAutoscroll(autoscrollConfig);
-    <?php endif; ?>
-});
+	jQuery(function() {
+		var carouselConfig = <?php echo json_encode($configs['carousel']); ?>;
+		var configs = <?php echo json_encode($configs); ?>;
+		var carousel = jQuery('#jcarousel-<?php echo $id_suffix; ?>').jcarousel(carouselConfig);
+		<?php if (isset($configs['autoscroll'])): ?>
+		var autoscrollConfig = <?php echo json_encode($configs['autoscroll']); ?>;
+		carousel.jcarouselAutoscroll(autoscrollConfig)
+		<?php if (isset($configs['autoscroll']['pauseOnHover']) && $configs['autoscroll']['pauseOnHover']): ?>
+		.hover(function() {
+			jQuery(this).jcarouselAutoscroll('stop');
+		}, function() {
+			jQuery(this).jcarouselAutoscroll('start');
+		});
+		<?php endif; ?>
+		<?php endif; ?>
+	});
 </script>
diff --git a/views/public/css/jcarousel.responsive.css b/views/public/css/jcarousel.responsive.css
@@ -1,13 +1,13 @@
 .jcarousel-wrapper {
-    margin: 20px 0 40px;
-    padding: 10px;
+    margin: 20px auto;
     position: relative;
-    -webkit-box-shadow: 0 0 2px #999;
-    -moz-box-shadow: 0 0 2px #999;
-    box-shadow: 0 0 2px #999;
+    border: 10px solid #fff;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
+    -webkit-box-shadow: 0 0 2px #999;
+    -moz-box-shadow: 0 0 2px #999;
+    box-shadow: 0 0 2px #999;
 }
 
 /** Carousel **/
@@ -29,64 +29,62 @@
 .jcarousel li {
     width: 200px;
     float: left;
+    border: 1px solid #fff;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    list-style-type: none;
 }
 
 .jcarousel img {
     display: block;
     max-width: 100%;
-    border: 2px solid transparent;
     height: auto !important;
-    margin: auto;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-p.shortcode-carousel-title {
-    margin: 1em 0 0;
-    text-align: center;
 }
 
 /** Carousel Controls **/
-
-.jcarousel-control-prev,
-.jcarousel-control-next {
-    position: absolute;
+.jcarousel-controls {
+	opacity: 0;
+	position: absolute;
     top: 50%;
-    margin-top: -15px;
-    width: 30px;
-    height: 30px;
-    text-align: center;
-    background: #4E443C;
-    color: #fff;
+    margin-top: -1em;
+	font-size: 2em;
+    color: white;
     text-decoration: none;
-    text-shadow: 0 0 1px #000;
-    font: 24px/27px Arial, sans-serif;
-    -webkit-border-radius: 30px;
-    -moz-border-radius: 30px;
-    border-radius: 30px;
-    -webkit-box-shadow: 0 0 4px #F0EFE7;
-    -moz-box-shadow: 0 0 4px #F0EFE7;
-    box-shadow: 0 0 4px #F0EFE7;
+	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-ms-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;	
 }
 
 .jcarousel-control-prev {
-    left: 25px;
+    left: -50px;
 }
 
 .jcarousel-control-next {
-    right: 25px;
+    right: -50px;
+}
+
+.jcarousel-wrapper:hover .jcarousel-control-prev {
+	opacity: 0.7;
+	left: 1em;
+}
+
+.jcarousel-wrapper:hover .jcarousel-control-next {
+	opacity: 0.7;
+	right: 1em;
+}
+
+.jcarousel-wrapper:hover .jcarousel-controls:hover {
+	opacity: 1;
 }
 
 /** Carousel Pagination **/
 
 .jcarousel-pagination {
     position: absolute;
-    bottom: -30px;
+    bottom: -40px;
     left: 50%;
     -webkit-transform: translate(-50%, 0);
     -ms-transform: translate(-50%, 0);
@@ -110,7 +108,6 @@ p.shortcode-carousel-title {
 
     margin-right: 7px;
 
-
     -webkit-box-shadow: 0 0 2px #4E443C;
     -moz-box-shadow: 0 0 2px #4E443C;
     box-shadow: 0 0 2px #4E443C;

diff --git a/views/public/javascripts/jcarousel.responsive.js b/views/public/javascripts/jcarousel.responsive.js
@@ -6,10 +6,16 @@
             .on('jcarousel:create jcarousel:reload', function () {
                 var element = $(this),
                     width = element.innerWidth();
-
-                    if (width >= 600) {
-                        width = width / 3;
+                    // This shows 1 item at a time.
+                    // Divide `width` to the number of items you want to display,
+                    // eg. `width = width / 3` to display 3 items at a time.
+                    if (width >= 900) {
+                        width = width / 5;
+                    } else if (width >= 600) {
+                        width = width / 4;
                     } else if (width >= 350) {
+                        width = width / 3;
+                    } else {
                         width = width / 2;
                     }