communities carousel: rewrite React to jinja & jquery

inveniosoftware · Jun 30, 2023 · 5d778eb · 5d778eb
1 parent 1295043
commit 5d778eb
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 1 deletion.
diff --git a/...nities/assets/semantic-ui/js/invenio_communities/community/communities-carousel-jquery.js b/...nities/assets/semantic-ui/js/invenio_communities/community/communities-carousel-jquery.js
@@ -0,0 +1,74 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2023 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import $ from "jquery";
+
+$(() => {
+  const communitiesCarouselContainer = document.getElementById("communities-carousel-jquery");
+  const intervalDelay = parseInt(communitiesCarouselContainer.dataset.intervalDelay);
+  const animationSpeed = parseInt(communitiesCarouselContainer.dataset.animationSpeed);
+
+  const carouselSlides = $("#carousel-slides").find(".carousel.transition");
+  const prevSlideBtn = $("#prev-slide-btn");
+  const nextSlideBtn = $("#next-slide-btn");
+
+  const minIndex = 0;
+  const maxIndex = carouselSlides.length - 1;
+  var activeIndex = 0;
+
+  /**
+   * Switches carousel slide
+   * @param {string} direction Direction to slide - left or right
+   */
+  const slide = (direction) => {
+    const prevIndex = activeIndex;
+
+    if (direction === "left") {
+      activeIndex++;
+      if (activeIndex > maxIndex) activeIndex = 0;
+    } else {
+      activeIndex--;
+      if (activeIndex < minIndex) activeIndex = maxIndex;
+    }
+
+    $(carouselSlides[activeIndex]).transition({
+      animation: `carousel-slide ${direction} in`,
+      duration: animationSpeed,
+    });
+
+    $(carouselSlides[prevIndex]).transition({
+      animation: `carousel-slide ${direction} out`,
+      duration: animationSpeed,
+    });
+  };
+
+  // Run carousel automatically on page load
+  const setCarouselTimer = () => setInterval(() => slide("left"), intervalDelay);
+  var carouselTimer = setCarouselTimer();
+
+  // Pause carousel on focus
+  $(communitiesCarouselContainer)
+    .on("focusin", () => {
+      clearInterval(carouselTimer);
+    })
+    .on("focusout", () => {
+      carouselTimer = setCarouselTimer();
+    });
+
+  // Navigation arrow event handlers
+  prevSlideBtn
+    .on("click", () => slide("right"))
+    .on("keydown", (event) => {
+      event.key === "Enter" && slide("right");
+    });
+  nextSlideBtn
+    .on("click", () => slide("left"))
+    .on("keydown", (event) => {
+      event.key === "Enter" && slide("left");
+    });
+});
diff --git a/invenio_communities/templates/semantic-ui/invenio_communities/macros/carousel_item.html b/invenio_communities/templates/semantic-ui/invenio_communities/macros/carousel_item.html
@@ -0,0 +1,43 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{% macro carousel_item(community=None) %}
+  <div class="item carousel align-items-center">
+    <img class="ui small image has-placeholder" src="{{ community.links.logo }}" />
+    <div class="content">
+      <div class="ui middle aligned grid rel-pb-1">
+        <div class="ten wide computer sixteen wide tablet column">
+          <a class="ui medium header" href="{{ community.links.self_html }}">
+            {{ community.metadata.title }}
+          </a>
+        </div>
+
+        <div class="six wide computer sixteen wide tablet column buttons">
+          <a
+            class="ui mini button"
+            href={community.links.self_html}
+          >
+            {{ _("Browse") }}
+          </a>
+          <a
+            class="ui mini icon positive left labeled button"
+            href="/uploads/new?community={{community.slug}}"
+          >
+            <i class="upload icon" aria-hidden="true"></i>
+            {{ _("New upload") }}
+          </a>
+        </div>
+      </div>
+
+      <p class="description">
+        {{ community.metadata.description | truncate(length=300, end='...') }}
+      </p>
+    </div>
+  </div>
+{% endmacro %}
diff --git a/...io_communities/templates/semantic-ui/invenio_communities/macros/communities_carousel.html b/...io_communities/templates/semantic-ui/invenio_communities/macros/communities_carousel.html
@@ -7,6 +7,9 @@
   under the terms of the MIT License; see LICENSE file for more details.
 #}
 
+
+{# Note: this macro is using React and might have some impact on your frontpage loading time. #}
+
 {% macro communities_carousel(
     title=_("Featured communities"),
     fetch_url="/api/communities/featured",
@@ -71,4 +74,3 @@ <h2 class="ui header rel-mb-1">{{ title }}</h2>
 
   {{ webpack['invenio-communities-carousel.js'] }}
 {% endmacro %}
-
diff --git a/...unities/templates/semantic-ui/invenio_communities/macros/communities_carousel_jquery.html b/...unities/templates/semantic-ui/invenio_communities/macros/communities_carousel_jquery.html
@@ -0,0 +1,64 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{% from "invenio_communities/macros/communities_carousel_slides.html" import communities_carousel_slides %}
+
+{% macro communities_carousel_jquery(
+    communities,
+    title=_("Featured communities"),
+    interval_delay="10000",
+    animation_speed="300",
+    items_per_page=1,
+    default_logo="/static/images/square-placeholder.png"
+  )
+%}
+  <div
+    id="communities-carousel-jquery"
+    data-title="{{ title }}"
+    data-fetch-url="{{ fetch_url }}"
+    data-interval-delay="{{ interval_delay }}"
+    data-animation-speed="{{ animation_speed }}"
+    data-default-logo="{{ default_logo }}"
+  >
+    <div class="ui fluid container carousel rel-pt-2 rel-pb-2 ml-0-mobile mr-0-mobile">
+      <div class="ui container rel-mb-1">
+        <h2 class="ui header">{{ title }}</h2>
+      </div>
+
+      <div class="ui container grid">
+        <div class="left aligned middle aligned two wide column pr-0">
+          <i
+            id="prev-slide-btn"
+            role="button"
+            tabindex="0"
+            aria-label="{{ _('Previous slide') }}"
+            class="angle left huge inverted icon carousel-arrow"
+          >
+          </i>
+        </div>
+        <div class="twelve wide column">
+          {{ communities_carousel_slides(communities, items_per_page) }}
+        </div>
+        <div class="right aligned middle aligned two wide column pl-0">
+          <i
+            id="next-slide-btn"
+            role="button"
+            tabindex="0"
+            aria-label="{{ _('Next slide') }}"
+            class="angle right huge inverted icon carousel-arrow"
+            >
+          </i>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  {{ webpack['invenio-communities-carousel-jquery.js'] }}
+{% endmacro %}
+
diff --git a/...unities/templates/semantic-ui/invenio_communities/macros/communities_carousel_slides.html b/...unities/templates/semantic-ui/invenio_communities/macros/communities_carousel_slides.html
@@ -0,0 +1,34 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{% from "invenio_communities/macros/carousel_item.html" import carousel_item %}
+
+{% macro communities_carousel_slides(communities, items_per_page) %}
+  {% set pageListLength = (communities|length / items_per_page) | round(0, 'ceil') | int %}
+  {% set communitiesList = communities|list %}
+  {% set index = 0 %}
+
+  <div id="carousel-slides">
+    {% for page in range(pageListLength) %}
+      {% set visibility_class = "visible" if (loop.index == 1) else "hidden" %}
+      <div class="ui items carousel page transition {{ visibility_class }} flex align-items-center">
+        {% for item in range(items_per_page) %}
+          {% set communityIndex = page*items_per_page + item %}
+          {% set community = communitiesList[communityIndex] %}
+
+          {% if community is defined %}
+            {{ carousel_item(community=community) }}
+          {% endif %}
+
+          {% set index = index + 1 %}
+        {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+{% endmacro %}
diff --git a/invenio_communities/webpack.py b/invenio_communities/webpack.py
@@ -39,6 +39,7 @@
                 "invenio-communities-members-public": "./js/invenio_communities/members/members/public_view/index.js",
                 "invenio-communities-invitations": "./js/invenio_communities/members/invitations/index.js",
                 "invenio-communities-carousel": "./js/invenio_communities/community/communitiesCarousel/index.js",
+                "invenio-communities-carousel-jquery": "./js/invenio_communities/community/communities-carousel-jquery.js",
                 "invenio-communities-admin-search": "./js/invenio_communities/administration/search.js",
                 "invenio-communities-featured": "./js/invenio_communities/community/featuredCommunities/index.js",
                 "invenio-communities-admin-featured": "./js/invenio_communities/administration/details.js",