inviton-powerduck 0.0.67 → 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.
- package/components/long-content-container/css/index.css +68 -0
- package/components/long-content-container/index.tsx +97 -0
- package/components/mobile-optimized-hero-filter/css/mobile-optimized-hero-filter.css +132 -0
- package/components/mobile-optimized-hero-filter/index.tsx +126 -0
- package/package.json +1 -1
|
@@ -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
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.mohf-search-wrap {
|
|
2
|
+
position: sticky;
|
|
3
|
+
top: -1px;
|
|
4
|
+
z-index: 9999;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mohf-input-outer .mohf-input-inner {
|
|
8
|
+
min-height: 54px;
|
|
9
|
+
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.15);
|
|
10
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
11
|
+
border-radius: 15px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
background: white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.mohf-input-searchicon-wrap {
|
|
17
|
+
text-align: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mohf-input-flexwrap {
|
|
21
|
+
height: 100%;
|
|
22
|
+
min-height: 52px;
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.mohf-input-searchicon,
|
|
27
|
+
.mohf-input-filtercon-wrap {
|
|
28
|
+
font-size: 20px;
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.mohf-serach-preview-spacer {
|
|
33
|
+
height: 60px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.mohf-input-main-inner {
|
|
37
|
+
text-align: left;
|
|
38
|
+
max-width: 800px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.mohf-input-inner {
|
|
42
|
+
max-width: 800px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mohf-input-first-line-text,
|
|
46
|
+
.mohf-input-second-line-text {
|
|
47
|
+
line-height: 17px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.mohf-input-second-line-text {
|
|
51
|
+
font-size: 13px;
|
|
52
|
+
font-size: 12.4px;
|
|
53
|
+
letter-spacing: 0.1px;
|
|
54
|
+
color: #777373;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mohf-mobile-root {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.mohf-desktop-root {
|
|
62
|
+
display: block;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
@media (max-width: 991.98px) {
|
|
67
|
+
.mohf-mobile-root {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mohf-desktop-root {
|
|
72
|
+
display: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.mohf-search-wrap[data-stuck] {
|
|
76
|
+
background: #393562;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mohf-search-wrap[data-stuck] .mohf-input {
|
|
80
|
+
margin-top: -10px;
|
|
81
|
+
padding-bottom: 5px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width:768px) {
|
|
86
|
+
.mohf-input {
|
|
87
|
+
padding-bottom: 40px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mohf-search-wrap[data-stuck] {
|
|
91
|
+
margin-left: -12px;
|
|
92
|
+
padding-left: 12px;
|
|
93
|
+
margin-right: -12px;
|
|
94
|
+
padding-right: 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.mohf-input-first-line-text {
|
|
98
|
+
display: inline-block;
|
|
99
|
+
padding-right: 30px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.mohf-input-second-line-text {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media(min-width:992px) {
|
|
108
|
+
.mohf-input {
|
|
109
|
+
padding-left: 0;
|
|
110
|
+
padding-right: 0;
|
|
111
|
+
padding-bottom: 40px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.mohf-search-wrap {
|
|
115
|
+
position: static;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.mohf-search-wrap.mohf-search-desktop-hidden {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.hotel-infotainment-mobsearch-desktop-hidden .mohf-serach-preview-spacer {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@media(max-width:440px) {
|
|
128
|
+
.mohf-input {
|
|
129
|
+
padding-left: 12px;
|
|
130
|
+
padding-right: 12px;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { toNative, Prop } from "vue-facing-decorator";
|
|
2
|
+
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
3
|
+
import FlexContainer from "../form/flex-container";
|
|
4
|
+
import FlexFormItem from "../form/form-item-flex";
|
|
5
|
+
import PowerduckState from "../../app/powerduck-state";
|
|
6
|
+
import Modal, { ModalSize } from "../modal/modal";
|
|
7
|
+
import ModalBody from "../modal/modal-body";
|
|
8
|
+
import ModalFooter from "../modal/modal-footer";
|
|
9
|
+
import Button from "../button/button";
|
|
10
|
+
import { ButtonLayout } from "../button/button-layout";
|
|
11
|
+
import './css/mobile-optimized-hero-filter.css';
|
|
12
|
+
|
|
13
|
+
interface MobileOptimizedHeroFilterArgs {
|
|
14
|
+
caption: string
|
|
15
|
+
isLoading?: boolean
|
|
16
|
+
cssClass?: string
|
|
17
|
+
clearFilterText?: string
|
|
18
|
+
submitText?: string
|
|
19
|
+
clickedClear?: () => void
|
|
20
|
+
clickedSubmit?: () => void
|
|
21
|
+
mobileModalCssClass?: string
|
|
22
|
+
mobileShowClearFilters?: boolean
|
|
23
|
+
mobileModalSize?: ModalSize
|
|
24
|
+
mobileFirstLineText: string
|
|
25
|
+
mobileSecondLineText: string
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@Component
|
|
30
|
+
class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHeroFilterArgs> implements MobileOptimizedHeroFilterArgs {
|
|
31
|
+
@Prop() caption: string
|
|
32
|
+
@Prop() isLoading: boolean
|
|
33
|
+
@Prop() cssClass?: string
|
|
34
|
+
@Prop() clearFilterText?: string
|
|
35
|
+
@Prop() clickedClear?: () => void
|
|
36
|
+
@Prop() clickedSubmit?: () => void
|
|
37
|
+
@Prop() mobileModalCssClass?: string
|
|
38
|
+
@Prop() mobileShowClearFilters?: boolean
|
|
39
|
+
@Prop() mobileFirstLineText: string
|
|
40
|
+
@Prop() mobileSecondLineText: string
|
|
41
|
+
@Prop() mobileModalSize?: ModalSize
|
|
42
|
+
|
|
43
|
+
showFilterModal() {
|
|
44
|
+
this.getModal().show();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
hideFilterModal() {
|
|
48
|
+
this.getModal().hide();
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
private getModal(): typeof Modal.prototype {
|
|
52
|
+
return this.$refs.mobileModal as typeof Modal.prototype;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
render(h) {
|
|
56
|
+
return (
|
|
57
|
+
<div class="mohf-root">
|
|
58
|
+
<div class="mohf-mobile-root">
|
|
59
|
+
<div class="mohf-upper-spacer"></div>
|
|
60
|
+
<div class="mohf-input">
|
|
61
|
+
<div class="mohf-input-outer" onClick={() => { this.showFilterModal() }}>
|
|
62
|
+
<div class="mohf-input-inner">
|
|
63
|
+
<FlexContainer cssClass="mohf-input-flexwrap" fullWidthOnMobile={false}>
|
|
64
|
+
<FlexFormItem cssClass="mohf-input-searchicon-wrap" width={50} flexFill={false}>
|
|
65
|
+
<i class="icon icon-magnifier mohf-input-searchicon"></i>
|
|
66
|
+
</FlexFormItem>
|
|
67
|
+
|
|
68
|
+
<FlexFormItem cssClass="mohf-input-main-wrap" flexFill={true}>
|
|
69
|
+
<div class="mohf-input-main-inner">
|
|
70
|
+
<div class="mohf-input-first-line-text">{this.mobileFirstLineText || (PowerduckState.getResourceValue('search') + '...')}</div>
|
|
71
|
+
|
|
72
|
+
{this.mobileSecondLineText?.length > 0 &&
|
|
73
|
+
<div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
</div>
|
|
77
|
+
</FlexFormItem>
|
|
78
|
+
|
|
79
|
+
<FlexFormItem cssClass="mohf-input-filtercon-wrap" width={50} flexFill={false}>
|
|
80
|
+
<i class="icon icon-options mohf-input-filtericon"></i>
|
|
81
|
+
</FlexFormItem>
|
|
82
|
+
</FlexContainer>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="mohf-desktop-root">
|
|
88
|
+
{this.$slots.default?.()}
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<Modal title={this.caption} ref="mobileModal" size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
|
|
92
|
+
<ModalBody>
|
|
93
|
+
<div class="mohf-modal-body-wrap">
|
|
94
|
+
{this.$slots.default?.()}
|
|
95
|
+
</div>
|
|
96
|
+
</ModalBody>
|
|
97
|
+
<ModalFooter>
|
|
98
|
+
{this.mobileShowClearFilters &&
|
|
99
|
+
<Button
|
|
100
|
+
layout={ButtonLayout.Secondary}
|
|
101
|
+
text={this.clearFilterText}
|
|
102
|
+
fullWidth={true}
|
|
103
|
+
clicked={() => {
|
|
104
|
+
this.clickedClear();
|
|
105
|
+
}}
|
|
106
|
+
/>
|
|
107
|
+
}
|
|
108
|
+
<Button
|
|
109
|
+
layout={ButtonLayout.Primary}
|
|
110
|
+
text={PowerduckState.getResourceValue('search')}
|
|
111
|
+
fullWidth={true}
|
|
112
|
+
cssClass="submit text-center"
|
|
113
|
+
clicked={() => {
|
|
114
|
+
this.clickedSubmit();
|
|
115
|
+
this.hideFilterModal();
|
|
116
|
+
}}
|
|
117
|
+
/>
|
|
118
|
+
</ModalFooter>
|
|
119
|
+
</Modal>
|
|
120
|
+
</div>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const MobileOptimizedHeroFilter = toNative(MobileOptimizedHeroFilterComponent)
|
|
126
|
+
export default MobileOptimizedHeroFilter
|