-
-
Notifications
You must be signed in to change notification settings - Fork 477
/
swipe.py
147 lines (123 loc) · 4.54 KB
/
swipe.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
"""
The Swipe layout enables you to quickly compare two panels
"""
from __future__ import annotations
from typing import ClassVar, List
import param
from ..io.resources import CDN_DIST
from ..reactive import ReactiveHTML
from .base import ListLike
class Swipe(ListLike, ReactiveHTML):
"""
The Swipe layout enables you to quickly compare two panels laid
out on top of each other with a part of the *before* panel shown
on one side of a slider and a part of the *after* panel shown on
the other side.
"""
objects = param.List(default=[], bounds=(0, 2), doc="""
The list of child objects that make up the layout.""", precedence=-1)
slider_width = param.Integer(default=5, bounds=(0, 25), doc="""
The width of the slider in pixels""")
slider_color = param.Color(default="black", doc="""
The color of the slider""")
value = param.Integer(default=50, bounds=(0, 100), doc="""
The percentage of the *after* panel to show.""")
_before = param.Parameter()
_after = param.Parameter()
_direction: ClassVar[str | None] = 'vertical'
_template = """
<div id="container" class="swipe-container">
<div id="before" class="outer">
<div id="before-inner" class="inner">${_before}</div>
</div>
<div id="after" class="outer" style="overflow: hidden;">
<div id="after-inner" class="inner">${_after}</div>
</div>
<div id="slider" class="slider" onmousedown="${script('drag')}"
style="background: ${slider_color}; width: ${slider_width}px;">
</div>
</div>
"""
_scripts = {
'render': """
self.adjustSlider()
""",
'after_layout': """
self.value()
""",
'drag': """
function endDrag() {
document.removeEventListener('mouseup', endDrag);
document.removeEventListener('mousemove', handleDrag);
}
function handleDrag(e) {
e = e || window.event;
e.preventDefault();
current = e.clientX
start = view.el.getBoundingClientRect().left
value = parseInt(((current-start)/ container.clientWidth)*100)
data.value = Math.max(0, Math.min(value, 100))
}
let e = event || window.event;
e.preventDefault();
document.addEventListener('mouseup', endDrag);
document.addEventListener('mousemove', handleDrag);
""",
'value': """
before.style.clipPath = `polygon(0% 0%, calc(${data.value}% + 5px) 0%, calc(${data.value}% + 5px) 100%, 0% 100%)`
after.style.clipPath = `polygon(calc(${data.value}% + 5px) 0%, 100% 0%, 100% 100%, calc(${data.value}% + 5px) 100%)`
self.adjustSlider()
""",
'slider_width': "self.adjustSlider()",
'adjustSlider': """
halfWidth = parseInt(data.slider_width/2)
slider.style.marginLeft = `calc(${data.value}% + 5px - ${halfWidth}px)`
"""
}
_stylesheets: ClassVar[List[str]] = [
f'{CDN_DIST}css/swipe.css'
]
def __init__(self, *objects, **params):
if 'objects' in params and objects:
raise ValueError(
"Either supply objects as an positional argument or "
"as a keyword argument, not both."
)
from ..pane.base import panel
objects = params.pop('objects', objects)
if not objects:
objects = [None, None]
super().__init__(objects=[panel(obj) for obj in objects], **params)
@param.depends('objects', watch=True, on_init=True)
def _update_layout(self):
self._before = self.before
self._after = self.after
@property
def before(self):
return self[0] if len(self) else None
@before.setter
def before(self, before):
self[0] = before
@property
def after(self):
return self[1] if len(self) > 1 else None
@after.setter
def after(self, after):
self[1] = after
def select(self, selector=None):
"""
Iterates over the Viewable and any potential children in the
applying the Selector.
Arguments
---------
selector: type or callable or None
The selector allows selecting a subset of Viewables by
declaring a type or callable function to filter by.
Returns
-------
viewables: list(Viewable)
"""
objects = super().select(selector)
for obj in self:
objects += obj.select(selector)
return objects