inviton-powerduck 0.0.68 → 0.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
.long-content-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.long-content-container::after {
|
|
7
|
+
content: '';
|
|
8
|
+
display: block;
|
|
9
|
+
height: 1px;
|
|
10
|
+
background: transparent;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.long-content-container::after {
|
|
14
|
+
position: absolute;
|
|
15
|
+
bottom: 0;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 110px;
|
|
18
|
+
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 50%);
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.long-content-container-show-more-wrap {
|
|
23
|
+
display: none;
|
|
24
|
+
position: absolute;
|
|
25
|
+
bottom: 0;
|
|
26
|
+
z-index: 2;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.long-content-container.lcc-expansion-needed .long-content-container-show-more-wrap {
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
opacity: 1;
|
|
34
|
+
transition: all 0.3s ease-in-out;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.long-content-container.lcc-expansion-needed .long-content-container-show-more-wrap:hover {
|
|
38
|
+
opacity: 0.7;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.long-content-container-show-more-inner {
|
|
42
|
+
display: inline-block;
|
|
43
|
+
margin: auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.long-content-container-show-more-default {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
text-align: center;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
padding: 10px;
|
|
52
|
+
font-weight: 700;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.long-content-container.lcc-expanded {
|
|
56
|
+
max-height: none !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.long-content-container.lcc-expanded .icon-arrow-down {
|
|
60
|
+
transform: rotate(180deg);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.long-content-container.lcc-expanded .long-content-container-show-more-wrap,
|
|
64
|
+
.long-content-container:not(.lcc-expansion-needed) .long-content-container-show-more-wrap,
|
|
65
|
+
.long-content-container.lcc-expanded::after,
|
|
66
|
+
.long-content-container:not(.lcc-expansion-needed)::after {
|
|
67
|
+
display: none !important;
|
|
68
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { toNative, Prop } from "vue-facing-decorator";
|
|
2
|
+
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
3
|
+
import './css/index.css';
|
|
4
|
+
|
|
5
|
+
interface LongContentContainerArgs {
|
|
6
|
+
maxHeight?: string
|
|
7
|
+
cssClass?: string
|
|
8
|
+
showMoreText?: string
|
|
9
|
+
showLessText?: string
|
|
10
|
+
renderShowMore?: (h) => void
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@Component
|
|
14
|
+
class LongContentContainerComponent extends TsxComponent<LongContentContainerArgs> implements LongContentContainerArgs {
|
|
15
|
+
@Prop() maxHeight?: string
|
|
16
|
+
@Prop() cssClass?: string
|
|
17
|
+
@Prop() showMoreText?: string
|
|
18
|
+
@Prop() showLessText?: string
|
|
19
|
+
@Prop() renderShowMore?: (h) => void
|
|
20
|
+
expansionNeeded: boolean = null;
|
|
21
|
+
isExpanded: boolean = false;
|
|
22
|
+
|
|
23
|
+
mounted() {
|
|
24
|
+
this.reMeasure();
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
updated() {
|
|
28
|
+
this.reMeasure();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
getRootStyle() {
|
|
32
|
+
if (this.maxHeight?.length > 0) {
|
|
33
|
+
return `max-height:${this.maxHeight}`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
getToggleButtonText(): string {
|
|
40
|
+
if (this.isExpanded) {
|
|
41
|
+
return this.showLessText;
|
|
42
|
+
} else {
|
|
43
|
+
return this.showMoreText;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
toggleIsExpanded() {
|
|
48
|
+
this.isExpanded = !this.isExpanded;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
reMeasure() {
|
|
52
|
+
if (this.isExpanded) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const $el = this.$refs.innerContent as HTMLElement;
|
|
57
|
+
const $root = $el.parentElement;
|
|
58
|
+
const scrollHeight = $el.scrollHeight;
|
|
59
|
+
|
|
60
|
+
if (scrollHeight > $root.clientHeight) {
|
|
61
|
+
if (this.expansionNeeded != true) {
|
|
62
|
+
this.expansionNeeded = true;
|
|
63
|
+
}
|
|
64
|
+
$root.classList.add('lcc-expansion-needed');
|
|
65
|
+
} else {
|
|
66
|
+
if (this.expansionNeeded != false) {
|
|
67
|
+
this.expansionNeeded = false;
|
|
68
|
+
}
|
|
69
|
+
$root.classList.remove('lcc-expansion-needed')
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
render(h) {
|
|
77
|
+
return (
|
|
78
|
+
<div style={this.getRootStyle()} class={`long-content-container${this.expansionNeeded ? ' lcc-expansion-needed' : ''}${this.isExpanded ? ' lcc-expanded' : ''}${this.cssClass?.length > 0 ? ' ' + this.cssClass : ''}`}>
|
|
79
|
+
<div ref="innerContent" class="long-content-container-content">
|
|
80
|
+
{this.$slots.default?.()}
|
|
81
|
+
</div>
|
|
82
|
+
<div class="long-content-container-show-more-wrap">
|
|
83
|
+
<div class="long-content-container-show-more-inner" onClick={() => { this.toggleIsExpanded() }}>
|
|
84
|
+
{this.renderShowMore != null
|
|
85
|
+
? this.renderShowMore(h)
|
|
86
|
+
: <div class="long-content-container-show-more-default"><i class={"icon-arrow-down"}></i>{this.getToggleButtonText()}</div>
|
|
87
|
+
}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
const LongContentContainer = toNative(LongContentContainerComponent)
|
|
97
|
+
export default LongContentContainer
|