Mercurial > libervia-web
diff libervia/pages/_browser/slideshow.py @ 1307:0a6698714557
browser: `slideshow` module implementation:
this module show a gallery of slides (usually images/videos) with mobile friendly swipe
capabilities. Comments are handled using a side panel.
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 16 Jul 2020 09:08:50 +0200 |
parents | |
children | 9344ca3b21a6 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/libervia/pages/_browser/slideshow.py Thu Jul 16 09:08:50 2020 +0200 @@ -0,0 +1,135 @@ +from browser import document, window, DOMNode +from js_modules.swiper import Swiper +from template import Template + + +class SlideShow: + + def __init__(self): + self.swiper = None + slideshow_tpl = Template('photo/slideshow.html') + self.slideshow_elt = slideshow_tpl.get_elt() + self.comments_count_elt = self.slideshow_elt.select_one('.comments__count') + self.wrapper = self.slideshow_elt.select_one(".swiper-wrapper") + + @property + def current_slide(self): + if self.swiper is None: + return None + try: + return DOMNode(self.swiper.slides[self.swiper.realIndex]) + # getting missing item in JS arrays returns KeyError + except KeyError: + return None + + @property + def current_item(self): + """item attached to the current slide, if any""" + current = self.current_slide + if current is None: + return + try: + return current.js._item + except AttributeError: + return None + + @property + def index(self): + if self.swiper is None: + return None + return self.swiper.realIndex + + @index.setter + def index(self, idx): + if self.swiper is not None: + self.swiper.slideTo(idx, 0) + + def attach(self): + document.body <= self.slideshow_elt + self.swiper = Swiper.new( + ".swiper-container", + { + "pagination": { + "el": ".swiper-pagination", + }, + "navigation": { + "nextEl": ".swiper-button-next", + "prevEl": ".swiper-button-prev", + "hideOnClick": True, + }, + "scrollbar": { + "el": ".swiper-scrollbar", + }, + "grabCursor": True, + "keyboard": { + "enabled": True, + "onlyInViewport": False, + }, + "mousewheel": True, + } + ) + window.addEventListener("keydown", self.on_key_down, True) + self.slideshow_elt.select_one(".click_to_close").bind("click", self.on_close) + self.slideshow_elt.select_one(".click_to_comment").bind("click", self.on_comment) + self.swiper.on("slideChange", self.on_slide_change) + self.on_slide_change() + + def add_slide(self, slide_elt): + self.swiper.appendSlide([slide_elt]) + self.swiper.update() + + def quit(self): + self.slideshow_elt.remove() + self.slideshow_elt = None + self.swiper.destroy(True, True) + self.swiper = None + + def on_key_down(self, evt): + if evt.key == 'Escape': + self.quit() + else: + return + evt.preventDefault() + + def on_slide_change(self): + item = self.current_item + if item is None: + return + comments_count = item.get('comments_count') + self.comments_count_elt.text = comments_count or '' + + def on_close(self, evt): + evt.stopPropagation() + evt.preventDefault() + self.quit() + + def on_comment_close(self, evt): + side_panel = self.comments_panel_elt.select_one('.comments_side_panel') + side_panel.classList.remove('open') + side_panel.bind("transitionend", lambda evt: self.comments_panel_elt.remove()) + + def on_comments_panel_click(self, evt): + # we stop stop propagation to avoid the closing of the panel + evt.stopPropagation() + + def on_comment(self, evt): + item = self.current_item + if item is None: + return + comments_panel_tpl = Template('blog/comments_panel.html') + try: + comments = item['comments']['items'] + except KeyError: + comments = [] + self.comments_panel_elt = comments_panel_tpl.get_elt({ + "comments": comments, + "comments_service": item['comments_service'], + "comments_node": item['comments_node'], + + }) + document.body <= self.comments_panel_elt + side_panel = self.comments_panel_elt.select_one('.comments_side_panel') + window.setTimeout(lambda: side_panel.classList.add("open")) + for close_elt in self.comments_panel_elt.select('.click_to_close'): + close_elt.bind("click", self.on_comment_close) + side_panel.bind("click", self.on_comments_panel_click)