Mercurial > libervia-web
view libervia/pages/_browser/slideshow.py @ 1309:9344ca3b21a6
browser (slideshow): fixed scrolling issue with comment panel:
all elements present in body before slideshow is added are hidden, and comments panel is
now added to slideshow itself.
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 01 Aug 2020 16:47:21 +0200 |
parents | 0a6698714557 |
children | 9e356f8eb62c |
line wrap: on
line source
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") self.hidden_elts = {} @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): # we hide other elts to avoid scrolling issues for elt in document.body.children: self.hidden_elts[elt] = elt.style.display elt.style.display = "none" 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): # we unhide for elt, display in self.hidden_elts.items(): elt.style.display = display self.hidden_elts.clear() 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'], }) self.slideshow_elt <= 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)