Skip to content

Commit 7ef0a92

Browse files
dinusvdinusv
committed
live-web-view.content: Added Accordion.
live-web-view.content: Added rotate and swap icon. live-web-view.content: Added Collapsible support for rotate and swap icon.
1 parent 1cbb426 commit 7ef0a92

File tree

16 files changed

+473
-16
lines changed

16 files changed

+473
-16
lines changed

‎packages/live-web-view/content/Accordion.lv‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import live-web.dom
2+
import live-elements-web-server.style
3+
4+
component Accordion < Ul{
5+
6+
static any[] use = [
7+
AccordionSection,
8+
AccordionToggle,
9+
AccordionContent,
10+
IconRotate,
11+
IconSwap,
12+
ScopedStyle{ src: './style/accordion.css' process: 'live-web-view/style/CSSProcessor.lv' }
13+
]
14+
15+
props : { data: { accordion: ScopedStyle.className(Accordion), toggle: ScopedStyle.className(AccordionSection), content: ScopedStyle.className(AccordionContent) } }
16+
17+
string[] extraClasses: []
18+
classes: this.extraClasses.concat([ScopedStyle.className(Accordion)])
19+
}

‎packages/live-web-view/content/AccordionContent.lv‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import live-web.dom
2+
import live-elements-web-server.style
3+
4+
component AccordionContent < Div{
5+
string[] extraClasses: []
6+
classes: this.extraClasses.concat([ScopedStyle.className(AccordionContent)])
7+
}

‎packages/live-web-view/content/AccordionSection.lv‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import live-web.dom
2+
import live-elements-web-server.style
3+
4+
component AccordionSection < Div{
5+
string[] extraClasses: []
6+
classes: this.extraClasses.concat([ScopedStyle.className(AccordionSection)])
7+
}

‎packages/live-web-view/content/AccordionToggle.lv‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import live-web.dom
2+
import live-web.behavior
3+
import live-elements-web-server.style
4+
5+
component AccordionToggle < Div{
6+
string[] extraClasses: []
7+
classes: this.extraClasses.concat([ScopedStyle.className(AccordionToggle)])
8+
9+
Array<DOMElement> content: []
10+
11+
Object __behavior = DOMBehavior{
12+
domEvents: {
13+
click: (e) => {
14+
e.preventDefault()
15+
let collapsible = e.currentTarget
16+
const path = [collapsible]
17+
while ( collapsible ){
18+
if ( 'accordion' in collapsible.dataset && 'toggle' in collapsible.dataset && 'content' in collapsible.dataset ){
19+
const accordion = collapsible
20+
const toggleClass = collapsible.dataset.toggle
21+
const contentClass = collapsible.dataset.content
22+
const toggleElem = path.find(te => te.classList.contains(toggleClass))
23+
if ( toggleElem ){
24+
const toggleElemContent = toggleElem.querySelector(`.${contentClass}`)
25+
if ( toggleElem.classList.contains('show') ){
26+
toggleElem.classList.remove('show')
27+
toggleElemContent.style.maxHeight = '0'
28+
} else {
29+
const allToggleElem = accordion.querySelectorAll(`.${toggleClass}`)
30+
allToggleElem.forEach(te => {
31+
if ( te.classList.contains('show') ){
32+
const content = te.querySelector(`.${contentClass}`)
33+
content.style.maxHeight = content.scrollHeight + "px"
34+
window.requestAnimationFrame(() => { content.style.maxHeight = "0" })
35+
te.classList.remove('show')
36+
}
37+
})
38+
toggleElemContent.style.maxHeight = toggleElemContent.scrollHeight + "px"
39+
setTimeout(() => { toggleElemContent.style.maxHeight = 'none' }, 400)
40+
toggleElem.classList.add('show')
41+
}
42+
}
43+
break
44+
}
45+
collapsible = collapsible.parentNode
46+
path.push(collapsible)
47+
}
48+
}
49+
}
50+
}
51+
52+
children: this.content.concat(this.__behavior)
53+
}

‎packages/live-web-view/content/Collapsible.lv‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ component Collapsible < Div{
55

66
static any[] use = [
77
CollapsibleToggle,
8-
CollapsibleRotate,
8+
IconRotate,
9+
IconSwap,
910
CollapsibleContent,
1011
ScopedStyle{ src: './style/collapsible.css' process: 'live-web-view/style/CSSProcessor.lv' }
1112
]

‎packages/live-web-view/content/CollapsibleRotate.lv‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/live-web-view/content/IconRotate.lv‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import live-web.dom
2+
import live-elements-web-server.style
3+
4+
component IconRotate < Div{
5+
string[] extraClasses: []
6+
classes: this.extraClasses.concat([ScopedStyle.className(IconRotate)])
7+
}

‎packages/live-web-view/content/IconSwap.lv‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import live-web.dom
2+
import live-elements-web-server.style
3+
4+
component IconSwap < Div{
5+
string[] extraClasses: []
6+
classes: this.extraClasses.concat([ScopedStyle.className(IconSwap)])
7+
}

‎packages/live-web-view/content/style/accordion.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
&Accordion{
2+
@apply w-full cursor-default;
3+
}
4+
&AccordionContent{
5+
@apply relative max-h-0 px-4 overflow-hidden;
6+
transition: max-height 0.5s;
7+
}
8+
&AccordionSection&.show &AccordionContent{
9+
@apply bg-white dark:bg-[#111111];
10+
}
11+
&AccordionToggle{
12+
@apply flex flex-row items-center justify-between text-base px-4 py-2 text-[#111111] dark:text-[#f1f1f1] border-b border-[#c1c1c1] dark:border-[#414141] hover:border-[#b1b1b1] dark:hover:border-[#515151];
13+
}
14+
&Accordion &IconRotate > *:first-child{
15+
transition: transform 0.5s;
16+
}
17+
&AccordionSection&.show &IconRotate > *:first-child{
18+
transform: rotate(180deg);
19+
}
20+
&Accordion &IconSwap > *:first-child{
21+
@apply block;
22+
}
23+
&Accordion &IconSwap > *:last-child{
24+
@apply hidden;
25+
}
26+
&AccordionSection&.show &IconSwap > *:first-child{
27+
@apply hidden;
28+
}
29+
&AccordionSection&.show &IconSwap > *:last-child{
30+
@apply block;
31+
}

‎packages/live-web-view/content/style/collapsible.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,32 @@
22
@apply w-full cursor-default;
33
}
44
&CollapsibleContent{
5-
@apply hidden px-2;
5+
@apply hidden px-4;
66
}
77
&Collapsible&.show &CollapsibleContent{
88
@apply block bg-white dark:bg-[#111111];
99
}
1010
&CollapsibleToggle{
1111
@apply flex flex-row items-center justify-between text-base px-4 py-2 text-[#111111] dark:text-[#f1f1f1] border-b border-[#c1c1c1] dark:border-[#414141] hover:border-[#b1b1b1] dark:hover:border-[#515151];
1212
}
13-
&CollapsibleRotate > *:first-child{
13+
&Collapsible &IconRotate > *:first-child{
1414
transition: transform 0.5s;
1515
}
16-
&Collapsible&.show &CollapsibleRotate > *:first-child{
16+
&Collapsible&.show &IconRotate > *:first-child{
1717
transform: rotate(180deg);
1818
}
19+
&Collapsible &IconSwap{
20+
@apply select-none;
21+
}
22+
&Collapsible &IconSwap > *:first-child{
23+
@apply block;
24+
}
25+
&Collapsible &IconSwap > *:last-child{
26+
@apply hidden;
27+
}
28+
&Collapsible&.show &IconSwap > *:first-child{
29+
@apply hidden;
30+
}
31+
&Collapsible&.show &IconSwap > *:last-child{
32+
@apply block;
33+
}

0 commit comments

Comments
 (0)