Mercurial > libervia-web

comparison libervia/pages/_browser/slideshow.py @ 1307:0a6698714557

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
1306:c07112ef01cd 1307:0a6698714557
1 from browser import document, window, DOMNode
2 from js_modules.swiper import Swiper
3 from template import Template
4
5
6 class SlideShow:
7
8 def __init__(self):
9 self.swiper = None
10 slideshow_tpl = Template('photo/slideshow.html')
11 self.slideshow_elt = slideshow_tpl.get_elt()
12 self.comments_count_elt = self.slideshow_elt.select_one('.comments__count')
13 self.wrapper = self.slideshow_elt.select_one(".swiper-wrapper")
14
15 @property
16 def current_slide(self):
17 if self.swiper is None:
18 return None
19 try:
20 return DOMNode(self.swiper.slides[self.swiper.realIndex])
21 # getting missing item in JS arrays returns KeyError
22 except KeyError:
23 return None
24
25 @property
26 def current_item(self):
27 """item attached to the current slide, if any"""
28 current = self.current_slide
29 if current is None:
30 return
31 try:
32 return current.js._item
33 except AttributeError:
34 return None
35
36 @property
37 def index(self):
38 if self.swiper is None:
39 return None
40 return self.swiper.realIndex
41
42 @index.setter
43 def index(self, idx):
44 if self.swiper is not None:
45 self.swiper.slideTo(idx, 0)
46
47 def attach(self):
48 document.body <= self.slideshow_elt
49 self.swiper = Swiper.new(
50 ".swiper-container",
51 {
52 "pagination": {
53 "el": ".swiper-pagination",
54 },
55 "navigation": {
56 "nextEl": ".swiper-button-next",
57 "prevEl": ".swiper-button-prev",
58 "hideOnClick": True,
59 },
60 "scrollbar": {
61 "el": ".swiper-scrollbar",
62 },
63 "grabCursor": True,
64 "keyboard": {
65 "enabled": True,
66 "onlyInViewport": False,
67 },
68 "mousewheel": True,
69 }
70 )
71 window.addEventListener("keydown", self.on_key_down, True)
72 self.slideshow_elt.select_one(".click_to_close").bind("click", self.on_close)
73 self.slideshow_elt.select_one(".click_to_comment").bind("click", self.on_comment)
74 self.swiper.on("slideChange", self.on_slide_change)
75 self.on_slide_change()
76
77 def add_slide(self, slide_elt):
78 self.swiper.appendSlide([slide_elt])
79 self.swiper.update()
80
81 def quit(self):
82 self.slideshow_elt.remove()
83 self.slideshow_elt = None
84 self.swiper.destroy(True, True)
85 self.swiper = None
86
87 def on_key_down(self, evt):
88 if evt.key == 'Escape':
89 self.quit()
90 else:
91 return
92 evt.preventDefault()
93
94 def on_slide_change(self):
95 item = self.current_item
96 if item is None:
97 return
98 comments_count = item.get('comments_count')
99 self.comments_count_elt.text = comments_count or ''
100
101 def on_close(self, evt):
102 evt.stopPropagation()
103 evt.preventDefault()
104 self.quit()
105
106 def on_comment_close(self, evt):
107 side_panel = self.comments_panel_elt.select_one('.comments_side_panel')
108 side_panel.classList.remove('open')
109 side_panel.bind("transitionend", lambda evt: self.comments_panel_elt.remove())
110
111 def on_comments_panel_click(self, evt):
112 # we stop stop propagation to avoid the closing of the panel
113 evt.stopPropagation()
114
115 def on_comment(self, evt):
116 item = self.current_item
117 if item is None:
118 return
119 comments_panel_tpl = Template('blog/comments_panel.html')
120 try:
121 comments = item['comments']['items']
122 except KeyError:
123 comments = []
124 self.comments_panel_elt = comments_panel_tpl.get_elt({
125 "comments": comments,
126 "comments_service": item['comments_service'],
127 "comments_node": item['comments_node'],
128
129 })
130 document.body <= self.comments_panel_elt
131 side_panel = self.comments_panel_elt.select_one('.comments_side_panel')
132 window.setTimeout(lambda: side_panel.classList.add("open"))
133 for close_elt in self.comments_panel_elt.select('.click_to_close'):
134 close_elt.bind("click", self.on_comment_close)
135 side_panel.bind("click", self.on_comments_panel_click)