Skip to content

Commit

Permalink
communities carousel: rewrite React to jinja & jquery
Browse files Browse the repository at this point in the history
  • Loading branch information
@jennur
jennur committed Jun 2, 2023
1 parent b9568cd commit 003c065
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 58 deletions.
86 changes: 64 additions & 22 deletions ...munities/assets/semantic-ui/js/invenio_communities/community/communitiesCarousel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,73 @@
* 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 React from "react";
import ReactDOM from "react-dom";
import CommunitiesCarousel from "./CommunitiesCarousel";
import { OverridableContext, overrideStore } from "react-overridable";
import $ from "jquery";

const communitiesCarouselContainer = document.getElementById("communities-carousel");
const title = communitiesCarouselContainer.dataset.title;
const fetchUrl = communitiesCarouselContainer.dataset.fetchUrl;
const intervalDelay = parseInt(communitiesCarouselContainer.dataset.intervalDelay);
const animationSpeed = parseInt(communitiesCarouselContainer.dataset.animationSpeed);
const defaultLogo = communitiesCarouselContainer.dataset.defaultLogo;
const itemsPerPage = communitiesCarouselContainer.dataset.itemsPerPage;

const overriddenComponents = overrideStore.getAll();

ReactDOM.render(
<OverridableContext.Provider value={overriddenComponents}>
<CommunitiesCarousel
title={title}
fetchUrl={fetchUrl}
intervalDelay={intervalDelay}
animationSpeed={animationSpeed}
defaultLogo={defaultLogo}
itemsPerPage={itemsPerPage}
/>
</OverridableContext.Provider>,
communitiesCarouselContainer
);
const carouselSlides = $(".carousel.item");
const prevSlideBtn = $("#prev-slide-btn");
const nextSlideBtn = $("#next-slide-btn");

var activeIndex = 0;
const minIndex = 0;
const maxIndex = carouselSlides.length - 1;

// Show only active carousel slide
carouselSlides.each((index, slide) => {
if(index === activeIndex) {
slide.classList.remove("hidden");
slide.classList.add("visible");
};
});


/**
* 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 mouse hover
$(communitiesCarouselContainer)
.on("mouseenter", () => {
clearInterval(carouselTimer);
})
.on("mouseleave", () => {
carouselTimer = setCarouselTimer();
});


// Navigation arrow event handlers
prevSlideBtn.on("click", () => slide("right"));
nextSlideBtn.on("click", () => slide("left"));
102 changes: 66 additions & 36 deletions ...io_communities/templates/semantic-ui/invenio_communities/macros/communities_carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
#}

{% macro communities_carousel(
communities,
title=_("Featured communities"),
fetch_url="/api/communities/featured",
interval_delay="10000",
Expand All @@ -23,52 +24,81 @@
data-interval-delay="{{ interval_delay }}"
data-animation-speed="{{ animation_speed }}"
data-default-logo="{{ default_logo }}"
data-items-per-page="{{ items_per_page }}"
>
<div class="ui fluid container rel-pt-2 rel-pb-2 ml-0-mobile mr-0-mobile">
<div class="ui container">
<h2 class="ui header rel-mb-1">{{ title }}</h2>
<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 grid container">
<div class="two wide column"></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">
<div class="ui items">
<div class="item">
<div class="image">
<div class="ui placeholder">
<div class="square image"></div>
</div>
</div>
<div id="carousel-slides" class="ui items flex align-items-center justify-center">
{% for community in communities %}
{{ communities_carousel_slide(community.metadata, community.links, community.slug)}}
{% endfor %}
</div>
</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 class="content">
<div class="header mt-5 rel-mb-2">
<div class="ui placeholder">
<div class="header">
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
{{ webpack['invenio-communities-carousel.js'] }}
{% endmacro %}

<div class="description">
<div class="ui placeholder">
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</div>

{% macro communities_carousel_slide(metadata, links, slug) %}
<div class="item carousel transition hidden flex align-items-center">
<!-- Todo: Add placeholder logo for non-existing logos -->
<img class="ui small image" src="{{ links.logo }}" />
<div class="content">
<div class="ui stackable grid header rel-pb-1">
<div class="ten wide computer sixteen wide tablet column pl-0 pb-0">
<a class="ui medium header" href="{{ links.self_html }}">
{{ metadata.title }}
</a>
</div>

<div class="two wide column"></div>
<div class="six wide computer sixteen wide tablet column buttons pl-0 pb-0">
<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={{slug}}"
>
<i class="upload icon" aria-hidden="true"></i>
{{ _("New upload") }}
</a>
</div>
</div>

<p class="description">
{{ metadata.description | truncate(length=300, end='...') }}
</p>
</div>
</div>

{{ webpack['invenio-communities-carousel.js'] }}
{% endmacro %}

0 comments on commit 003c065

Please sign in to comment.