Mercurial > libervia-web

comparison libervia/pages/_browser/slideshow.py @ 1310:9e356f8eb62c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser (slideshow): (un)hide controls on single click: a time is used to avoid future conflicts with double-click
author Goffi <goffi@goffi.org>
date Sat, 01 Aug 2020 16:47:24 +0200
parents 9344ca3b21a6
children 9948598e7ec0
comparison
equal deleted inserted replaced
1309:9344ca3b21a6 1310:9e356f8eb62c
1 from browser import document, window, DOMNode 1 from browser import document, window, html, timer, DOMNode
2 from js_modules.swiper import Swiper 2 from js_modules.swiper import Swiper
3 from template import Template 3 from template import Template
4 4
5 5
6 class SlideShow: 6 class SlideShow:
10 slideshow_tpl = Template('photo/slideshow.html') 10 slideshow_tpl = Template('photo/slideshow.html')
11 self.slideshow_elt = slideshow_tpl.get_elt() 11 self.slideshow_elt = slideshow_tpl.get_elt()
12 self.comments_count_elt = self.slideshow_elt.select_one('.comments__count') 12 self.comments_count_elt = self.slideshow_elt.select_one('.comments__count')
13 self.wrapper = self.slideshow_elt.select_one(".swiper-wrapper") 13 self.wrapper = self.slideshow_elt.select_one(".swiper-wrapper")
14 self.hidden_elts = {} 14 self.hidden_elts = {}
15 self.control_hidden = False
16 self.click_timer = None
15 17
16 @property 18 @property
17 def current_slide(self): 19 def current_slide(self):
18 if self.swiper is None: 20 if self.swiper is None:
19 return None 21 return None
58 "el": ".swiper-pagination", 60 "el": ".swiper-pagination",
59 }, 61 },
60 "navigation": { 62 "navigation": {
61 "nextEl": ".swiper-button-next", 63 "nextEl": ".swiper-button-next",
62 "prevEl": ".swiper-button-prev", 64 "prevEl": ".swiper-button-prev",
63 "hideOnClick": True,
64 }, 65 },
65 "scrollbar": { 66 "scrollbar": {
66 "el": ".swiper-scrollbar", 67 "el": ".swiper-scrollbar",
67 }, 68 },
68 "grabCursor": True, 69 "grabCursor": True,
75 ) 76 )
76 window.addEventListener("keydown", self.on_key_down, True) 77 window.addEventListener("keydown", self.on_key_down, True)
77 self.slideshow_elt.select_one(".click_to_close").bind("click", self.on_close) 78 self.slideshow_elt.select_one(".click_to_close").bind("click", self.on_close)
78 self.slideshow_elt.select_one(".click_to_comment").bind("click", self.on_comment) 79 self.slideshow_elt.select_one(".click_to_comment").bind("click", self.on_comment)
79 self.swiper.on("slideChange", self.on_slide_change) 80 self.swiper.on("slideChange", self.on_slide_change)
81 self.swiper.on("click", self.on_click)
80 self.on_slide_change() 82 self.on_slide_change()
81 83
82 def add_slide(self, slide_elt): 84 def add_slide(self, slide_elt):
83 self.swiper.appendSlide([slide_elt]) 85 self.swiper.appendSlide([slide_elt])
84 self.swiper.update() 86 self.swiper.update()
104 item = self.current_item 106 item = self.current_item
105 if item is None: 107 if item is None:
106 return 108 return
107 comments_count = item.get('comments_count') 109 comments_count = item.get('comments_count')
108 self.comments_count_elt.text = comments_count or '' 110 self.comments_count_elt.text = comments_count or ''
111
112 def toggle_hide_controls(self, evt):
113 self.click_timer = None
114 if 'click_to_hide' in evt.target.classList:
115 # we don't want to hide controls when a control is clicked
116 return
117 for elt in self.slideshow_elt.select('.click_to_hide'):
118 elt.style.display = '' if self.control_hidden else 'none'
119 self.control_hidden = not self.control_hidden
120
121 def on_click(self, evt):
122 # we use a timer so double tap can cancel the click
123 # this avoid double tap side effect
124 if self.click_timer is None:
125 self.click_timer = timer.set_timeout(
126 lambda: self.toggle_hide_controls(evt), 300)
109 127
110 def on_close(self, evt): 128 def on_close(self, evt):
111 evt.stopPropagation() 129 evt.stopPropagation()
112 evt.preventDefault() 130 evt.preventDefault()
113 self.quit() 131 self.quit()
136 "comments_node": item['comments_node'], 154 "comments_node": item['comments_node'],
137 155
138 }) 156 })
139 self.slideshow_elt <= self.comments_panel_elt 157 self.slideshow_elt <= self.comments_panel_elt
140 side_panel = self.comments_panel_elt.select_one('.comments_side_panel') 158 side_panel = self.comments_panel_elt.select_one('.comments_side_panel')
141 window.setTimeout(lambda: side_panel.classList.add("open")) 159 timer.set_timeout(lambda: side_panel.classList.add("open"), 0)
142 for close_elt in self.comments_panel_elt.select('.click_to_close'): 160 for close_elt in self.comments_panel_elt.select('.click_to_close'):
143 close_elt.bind("click", self.on_comment_close) 161 close_elt.bind("click", self.on_comment_close)
144 side_panel.bind("click", self.on_comments_panel_click) 162 side_panel.bind("click", self.on_comments_panel_click)