Mercurial > libervia-web

annotate libervia/pages/_browser/slideshow.py @ 1309:9344ca3b21a6

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