Merge branch 'dev' of https://github.com/NatLibFi/NDL-VuFind2 into fi…

…nna-1246-1248

local/config/vufind/rss.ini.sample

@@ -1,7 +1,7 @@
 ;; Mandatory settings:
 
 ; active = [0|1]
-; type = "[list|carousel|carousel-vertical|grid]"
+; type = "[list|carousel|carousel-vertical|grid|slider]"
 
 ; url[language code|*] = "<url>" Feed URL, for example:
 ;    Absolute URL: http://blogs.helsinki.fi/scriptaselecta/feed/
@@ -94,7 +94,12 @@
 ; autoplay = [false|milliseconds] Autoplay slide change interval (autoplay is off by default).
 ; dots = [0|1] Display current slide indicator (default 1).
 
+;; Optional slider settings:
 
+; This type only displays one item per page, but otherwise uses carousel settings.
+; backgroundColor = "#f7f7f7" Background colour of the slider (default none).
+; stackedHeight = [pixels] The height of the slider when it uses the stacked (vertical) layout, e.g. on mobile device (sets regular height value by default).
+; imagePlacement = [left|right] The side of which the image is on the slider when it uses the horizontal layout (default left).
 
 ; Number of visible items in the carousel
 
@@ -117,7 +122,7 @@
 ; content[link] = 0
 ; content[image] = 0
 ; content[date] = 0
-
+; content[description] = 0
 
 [carousel]
 type = "carousel"
@@ -176,3 +181,13 @@ content[text] = 0
 content[image] = 0
 linkTarget  = "_blank"
 
+[slider]
+type = "slider"
+active = 1
+url[*] = "https://musasto.wordpress.com/feed/"
+title = "rss"
+height = 450
+stackedHeight = 600
+backgroundColor = "#f7f7f7"
+imagePlacement = "left"
+

module/Finna/src/Finna/AjaxHandler/AddToList.php

@@ -139,6 +139,7 @@ public function handleRequest(Params $params)
             );
         }
         $listId = $listParams['listId'];
+        $currentListId = $listParams['currentListId'];
         $ids = (array)$listParams['ids'];
 
         $list = $this->userList->getExisting($listId);
@@ -154,7 +155,9 @@ public function handleRequest(Params $params)
             $recId = $id[1];
             try {
                 $driver = $this->recordLoader->load($recId, $source, true);
-                $this->favorites->save(['list' => $listId], $this->user, $driver);
+                $notes = $driver->getListNotes($currentListId ?: null, $this->user->id);
+                $notes = implode(PHP_EOL, $notes);
+                $this->favorites->save(['list' => $listId, 'notes' => $notes], $this->user, $driver);
             } catch (\Exception $e) {
                 return $this->formatResponse(
                     $this->translate('Failed'),

module/Finna/src/Finna/AjaxHandler/FeedTrait.php

@@ -122,7 +122,8 @@ protected function formatFeed(
             $feed['visualItems'] = $config->visualItems;
         }
 
-        $template = str_contains($type, 'carousel') ? 'carousel' : $type;
+        $isCarouselStyle = str_contains($type, 'carousel') || $type === 'slider';
+        $template = $isCarouselStyle ? 'carousel' : $type;
         $html = $viewRenderer->partial("ajax/feed-$template.phtml", $feed);
 
         $settings = [
@@ -132,8 +133,17 @@ protected function formatFeed(
         if (isset($config->height)) {
             $settings['height'] = $config->height;
         }
+        if (isset($config->stackedHeight)) {
+            $settings['stackedHeight'] = $config->stackedHeight;
+        }
+        if (isset($config->backgroundColor)) {
+            $settings['backgroundColor'] = $config->backgroundColor;
+        }
+        if (isset($config->imagePlacement)) {
+            $settings['imagePlacement'] = $config->imagePlacement;
+        }
 
-        if ('carousel' === $type || 'carousel-vertical' === $type) {
+        if ($isCarouselStyle) {
             $settings['images'] = $images;
             $settings['autoplay']
                 = $config->autoplay ?? false;
@@ -144,16 +154,19 @@ protected function formatFeed(
             $breakPoints = [
                 'desktop' => 4, 'desktop-small' => 3, 'tablet' => 2, 'mobile' => 1,
             ];
-
-            foreach ($breakPoints as $breakPoint => $default) {
-                $settings['slidesToShow'][$breakPoint]
-                    = isset($config->itemsPerPage[$breakPoint])
-                    ? (int)$config->itemsPerPage[$breakPoint] : $default;
-
-                $settings['scrolledItems'][$breakPoint]
-                    = isset($config->scrolledItems[$breakPoint])
-                    ? (int)$config->scrolledItems[$breakPoint]
-                    : $settings['slidesToShow'][$breakPoint];
+            if ('slider' === $type) {
+                $settings['slidesToShow']['desktop'] = $settings['scrolledItems']['desktop'] = 1;
+            } else {
+                foreach ($breakPoints as $breakPoint => $default) {
+                    $settings['slidesToShow'][$breakPoint]
+                        = isset($config->itemsPerPage[$breakPoint])
+                        ? (int)$config->itemsPerPage[$breakPoint] : $default;
+
+                    $settings['scrolledItems'][$breakPoint]
+                        = isset($config->scrolledItems[$breakPoint])
+                        ? (int)$config->scrolledItems[$breakPoint]
+                        : $settings['slidesToShow'][$breakPoint];
+                }
             }
 
             if ('carousel' === $type) {

module/Finna/src/Finna/Feed/Feed.php

@@ -464,6 +464,7 @@ public function parseFeed($channel, $config, $id = null)
             'id' => 'getId',
             'title' => 'getTitle',
             'text' => 'getContent',
+            'description' => 'getDescription',
             'image' => 'getEnclosure',
             'link' => 'getLink',
             'date' => 'getDateCreated',

themes/finna2/js/finna-carousel-manager.js

@@ -38,6 +38,9 @@ finna.carouselManager = (() => {
       return {autoplay: false};
     },
     height: (value) => { return {height: parseInt(value)}; },
+    stackedHeight: (value) => { return {stackedHeight: parseInt(value)}; },
+    backgroundColor: (value) => { return {backgroundColor: value}; },
+    imagePlacement: (value) => { return {imagePlacement: value}; },
     width: (value) => { return {fixedWidth: parseInt(value)}; },
     omitEnd: 'omitEnd',
     pagination: 'pagination',
@@ -86,6 +89,7 @@ finna.carouselManager = (() => {
         direction = 'ttb';
         break;
       case 'carousel':
+      case 'slider':
         direction = 'ltr';
         classes.prev += 'left';
         classes.next += 'right';

themes/finna2/js/finna-feed-element.js

@@ -136,7 +136,7 @@ class FinnaFeedElement extends HTMLElement {
       var settings = Object.assign({}, jsonResponse.data.settings);
       settings.height = settings.height || 300;
       const type = settings.type;
-      const carousel = ['carousel', 'carousel-vertical'].includes(type);
+      const carousel = ['carousel', 'carousel-vertical', 'slider'].includes(type);
       if (carousel) {
         const hasContent = holder.querySelector('.carousel-feed > li, .carousel-feed > div');
         if (!hasContent) {
@@ -151,11 +151,13 @@ class FinnaFeedElement extends HTMLElement {
         }
 
         const vertical = 'carousel-vertical' === settings.type;
+        const slider = 'slider' === settings.type;
         this.adjustArrowButtons(vertical);
         settings.vertical = vertical;
         this.splide = finna.carouselManager.createCarousel(this, settings);
         var titleBottom = typeof settings.titlePosition !== 'undefined' && settings.titlePosition === 'bottom';
-        if (!vertical) {
+        if (!vertical && !slider) {
+          holder.classList.add('carousel');
           if (titleBottom) {
             holder.setTitleBottom(settings);
             holder.querySelectorAll('.carousel-hover-title').forEach(el => {
@@ -177,9 +179,31 @@ class FinnaFeedElement extends HTMLElement {
             });
           }
         }
+        if (slider) {
+          holder.classList.add('carousel-slider');
+          if (settings.backgroundColor) {
+            holder.classList.add('slider-with-background');
+            holder.style.setProperty('--background-color', settings.backgroundColor);
+          }
+          if (settings.imagePlacement && settings.imagePlacement === 'right') {
+            holder.classList.add('image-right');
+          }
+          if (settings.stackedHeight) {
+            holder.style.setProperty('--height', `${settings.stackedHeight}px`);
+          } else {
+            holder.style.setProperty('--height', `${settings.height}px`);
+          }
+          holder.querySelectorAll('.slider-text-container').forEach(el => {
+            if (el.clientHeight < el.scrollHeight) {
+              el.classList.add('scrollable');
+            } else {
+              el.parentElement.style.alignItems = 'center';
+            }
+          });
+        }
 
         // Text hover for touch devices
-        if (finna.layout.isTouchDevice() && typeof settings.linkText === 'undefined') {
+        if (!slider && finna.layout.isTouchDevice() && typeof settings.linkText === 'undefined') {
           holder.querySelectorAll('.carousel-slide-more.carousel-show').forEach(el => {
             if (holder.querySelector('.carousel-text:not(.no-text)') !== null) {
               el.classList.remove('hidden');

themes/finna2/js/finna-mylist.js

@@ -123,7 +123,7 @@ finna.myList = (function finnaMyList() {
       });
   }
 
-  function addResourcesToList(listId) {
+  function addResourcesToList(listId, currentListId = '') {
     toggleErrorMessage(false);
 
     var ids = [];
@@ -145,7 +145,7 @@ finna.myList = (function finnaMyList() {
       type: 'POST',
       dataType: 'json',
       url: VuFind.path + '/AJAX/JSON?method=addToList',
-      data: {params: {'listId': listId, 'source': 'Solr', 'ids': ids}}
+      data: {params: {'listId': listId, 'currentListId': currentListId, 'source': 'Solr', 'ids': ids}}
     })
       .done(function onAddToListDone(/*data*/) {
         // Don't reload to avoid trouble with POST requests
@@ -362,7 +362,7 @@ finna.myList = (function finnaMyList() {
     $('.mylist-functions #add-to-list').off('change').on("change", function onChangeAddToList(/*e*/) {
       var val = $(this).val();
       if (val !== '') {
-        addResourcesToList(val);
+        addResourcesToList(val, getActiveListId());
       }
     });
 

themes/finna2/less/finna/feed.less

@@ -710,7 +710,7 @@ finna-feed {
         }
     }
 }
-finna-feed.splide--ltr {
+finna-feed.carousel.splide--ltr {
     .splide__arrows {
         width: 100%;
         left: 0;
@@ -846,6 +846,131 @@ finna-feed.splide--ltr {
     }
 }
 
+finna-feed.carousel-slider.splide--ltr {
+    container-type: inline-size;
+    .splide__arrows {
+        width: 100%;
+        left: 0;
+        right: 0;
+        button {
+            &.left {
+                left: -24px;
+                transform: rotate(180deg);
+            }
+            &.right {
+                right: -24px;
+            }
+        }
+    }
+    --background-color: transparent;
+    &.slider-with-background {
+        &::before {
+            content: '';
+            background-color: var(--background-color);
+            position: absolute;
+            height: 100%;
+            width: 100%;
+        }
+        .carousel-pagination-wrapper {
+            position: relative;
+        }
+    }
+    .carousel-header {
+        display: none;
+    }
+    .slider-image, .slider-text-part {
+        height: 100%;
+        padding: 10px 15px;
+    }
+    .slider-image {
+        display: flex;
+        justify-content: center;
+        width: 50%;
+        img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            flex: left;
+        }
+    }
+    .slider-text-part {
+        display: flex;
+        color: @text-color;
+        max-width: 50%;
+        height: 100%;
+        .slider-text-container {
+            overflow-y: auto;
+            overscroll-behavior-y: contain;
+            &.scrollable {
+                padding-right: 10px;
+            }
+        }
+        .slider-title {
+            color: @carousel-header-color;
+        }
+        .carousel-text {
+            width: 100%;
+        }
+        .text {
+            overflow-wrap: anywhere;
+        }
+        .slider-header {
+            display: block;
+            font-size: @font-size-h4;
+            font-weight: 500;
+        }
+    }
+}
+@container (min-width: @slider-stacked-breakpoint) {
+    finna-feed.carousel-slider.splide--ltr {
+        .slider-text-part {
+            .slider-title {
+                font-size: @font-size-h2;                
+            }
+        }
+        &.image-right .feed-link {
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    }
+}
+@container (max-width: @slider-stacked-breakpoint) {
+    finna-feed.carousel-slider.splide--ltr {
+        .feed-item-holder[style] {
+            height: var(--height) !important;
+        }
+        .feed-link {
+            flex-direction: column;
+        }
+        .slider-image, .slider-text-part {
+            width: auto;
+            max-width: 100%;
+            height: 50%;
+            .slider-header {
+                font-size: @font-size-base;
+                margin-top: 0;
+                margin-bottom: 5px;
+            }
+            .slider-title {
+                padding: 0;
+                word-break: break-all;
+            }
+            .text {
+                font-size: @font-size-small;
+            }
+        }
+        .slider-image {
+            padding: 5px;
+            img {
+                height: 100%;
+            }
+        }
+        .carousel-pagination-wrapper {
+            height: 40px;
+        }
+    }
+}
+
 finna-feed.splide--ttb {
     .splide__arrows {
         height: auto;

themes/finna2/less/global/variables.less

@@ -152,6 +152,9 @@
 @similar-carousel-format-text-color: @text-color;
 @similar-carousel-format-background: #f2f2f2;
 
+//== Breakpoint for slider layout
+@slider-stacked-breakpoint: @screen-sm;
+
 //== List feed styles
 @list-feed-background: @body-bg;
 @list-feed-padding: 10px;