@thinkpixellab-public/px-vue 3.0.53 → 3.0.55
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/PxGsapScrubber.vue +145 -0
- package/components/PxMeasureContainer.vue +84 -0
- package/components/PxPivot.vue +13 -0
- package/components/PxScrubber.vue +143 -0
- package/package.json +1 -1
- package/utils/utils.js +6 -0
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
|
|
5
|
+
<template>
|
|
6
|
+
<div :class="bem()">
|
|
7
|
+
<px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
|
|
8
|
+
<px-scrubber
|
|
9
|
+
:class="bem('scrubber')"
|
|
10
|
+
v-model="progress"
|
|
11
|
+
@seek="seek"
|
|
12
|
+
@dragstart="dragStart"
|
|
13
|
+
@dragend="dragEnd"
|
|
14
|
+
/>
|
|
15
|
+
<span :class="bem('time')">{{ time }}</span>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
// import { mapState } from 'vuex';
|
|
21
|
+
// import Component from '~/components/Component.vue';
|
|
22
|
+
// import Mixin from '~/components/Mixin.vue';
|
|
23
|
+
import PxIconButton from './PxIconButton.vue';
|
|
24
|
+
import PxScrubber from './PxScrubber.vue';
|
|
25
|
+
|
|
26
|
+
export default {
|
|
27
|
+
name: 'px-gsap-scrubber',
|
|
28
|
+
components: { PxIconButton, PxScrubber },
|
|
29
|
+
// mixins: [ Mixin ],
|
|
30
|
+
// props: { a: { type: Boolean, default: false } },
|
|
31
|
+
data() {
|
|
32
|
+
return { timeline: null, progress: 0, isPlaying: false };
|
|
33
|
+
},
|
|
34
|
+
computed: {
|
|
35
|
+
currentButtonIcon() {
|
|
36
|
+
return this.isPlaying
|
|
37
|
+
? require('../assets/feather/pause-circle.svg')
|
|
38
|
+
: require('../assets/feather/play-circle.svg');
|
|
39
|
+
},
|
|
40
|
+
time() {
|
|
41
|
+
if (this.timeline) {
|
|
42
|
+
let t = this.timeline;
|
|
43
|
+
let seconds = t.duration() * this.progress;
|
|
44
|
+
let mins = Math.floor(seconds / 60);
|
|
45
|
+
|
|
46
|
+
seconds -= mins * 60;
|
|
47
|
+
seconds = Math.round(seconds * 100);
|
|
48
|
+
seconds = seconds.toString().padStart(4, '0');
|
|
49
|
+
seconds = seconds.slice(0, 2) + '.' + seconds.slice(2, 4);
|
|
50
|
+
|
|
51
|
+
mins = Math.round(mins || 0)
|
|
52
|
+
.toString()
|
|
53
|
+
.padStart(2, '0');
|
|
54
|
+
|
|
55
|
+
return `${mins}:${seconds}`;
|
|
56
|
+
}
|
|
57
|
+
return null;
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
// watch: {},
|
|
61
|
+
// mounted() {},
|
|
62
|
+
beforeUnmount() {
|
|
63
|
+
if (this.timeline) {
|
|
64
|
+
this.timeline.eventCallback('onUpdate', null);
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
buttonClick() {
|
|
69
|
+
if (this.isPlaying) {
|
|
70
|
+
this.pause();
|
|
71
|
+
} else {
|
|
72
|
+
this.play();
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
setTimeline(t) {
|
|
76
|
+
// TODO: a timeline can only have one handler for onUpdate so if we're using this already
|
|
77
|
+
// we would need to somehow and capture and proxy the event from within our handler
|
|
78
|
+
|
|
79
|
+
if (this.timeline) {
|
|
80
|
+
this.timeline.eventCallback('onUpdate', null);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
this.timeline = t;
|
|
84
|
+
this.progress = this.timeline.progress();
|
|
85
|
+
this.isPlaying = !this.timeline.paused();
|
|
86
|
+
|
|
87
|
+
this.timeline.eventCallback('onUpdate', () => {
|
|
88
|
+
this.progress = this.timeline.progress();
|
|
89
|
+
this.isPlaying = !this.timeline.paused();
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
pause() {
|
|
93
|
+
if (this.timeline) {
|
|
94
|
+
this.isPlaying = false;
|
|
95
|
+
this.timeline.pause();
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
play() {
|
|
99
|
+
if (this.timeline) {
|
|
100
|
+
this.isPlaying = true;
|
|
101
|
+
this.timeline.play();
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
dragStart() {
|
|
105
|
+
this.wasPlaying = this.isPlaying;
|
|
106
|
+
this.pause();
|
|
107
|
+
},
|
|
108
|
+
dragEnd() {
|
|
109
|
+
if (this.wasPlaying) {
|
|
110
|
+
this.play();
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
seek(e) {
|
|
114
|
+
this.timeline.progress(e.progress);
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style lang="scss">
|
|
121
|
+
@use '../styles/px.scss' as *;
|
|
122
|
+
|
|
123
|
+
.px-gsap-scrubber {
|
|
124
|
+
width: 100%;
|
|
125
|
+
padding: 0.25em 1em;
|
|
126
|
+
display: flex;
|
|
127
|
+
gap: 0.5em;
|
|
128
|
+
align-items: center;
|
|
129
|
+
|
|
130
|
+
&__button {
|
|
131
|
+
flex: none;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&__scrubber {
|
|
135
|
+
flex: 1;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&__time {
|
|
139
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
140
|
+
font-weight: bold;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
}
|
|
143
|
+
// add styles here
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
<template>
|
|
5
|
+
<div :class="bem()">
|
|
6
|
+
<div v-if="measuring" ref="container" :class="[bem('container'), containerClass]">
|
|
7
|
+
<div ref="content" :class="bem('content')">
|
|
8
|
+
<slot />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
import BaseDebug from '@thinkpixellab/px-edge-shared/components/common/BaseDebug.vue';
|
|
16
|
+
import PxBaseResize from './PxBaseResize.vue';
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
name: 'px-measure-container',
|
|
20
|
+
// components: { Component },
|
|
21
|
+
mixins: [BaseDebug, PxBaseResize],
|
|
22
|
+
props: {
|
|
23
|
+
containerClass: { type: String, default: null },
|
|
24
|
+
autoUpdate: { type: Boolean, default: true },
|
|
25
|
+
|
|
26
|
+
// a delay inserted after the content has been hydrated and before measuring the size, if another update
|
|
27
|
+
// occurs during the delay, the previous update will be cancelled
|
|
28
|
+
delay: { type: Number, default: 50 },
|
|
29
|
+
},
|
|
30
|
+
data() {
|
|
31
|
+
return { measuring: false, size: { width: 0, height: 0 } };
|
|
32
|
+
},
|
|
33
|
+
methods: {
|
|
34
|
+
resize() {
|
|
35
|
+
if (this.autoUpdate) {
|
|
36
|
+
this.update();
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
update(onComplete) {
|
|
40
|
+
if (this.timeout) {
|
|
41
|
+
clearTimeout(this.timeout);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
this.measuring = true;
|
|
45
|
+
|
|
46
|
+
this.timeout = setTimeout(() => {
|
|
47
|
+
this.$emit('measure', this.$refs.content);
|
|
48
|
+
|
|
49
|
+
const size = {
|
|
50
|
+
width: this.$refs.content.offsetWidth,
|
|
51
|
+
height: this.$refs.content.offsetHeight,
|
|
52
|
+
};
|
|
53
|
+
this.size = size;
|
|
54
|
+
|
|
55
|
+
if (onComplete) {
|
|
56
|
+
onComplete(size);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
this.$emit('update', size);
|
|
60
|
+
|
|
61
|
+
this.measuring = false;
|
|
62
|
+
}, this.delay);
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style lang="scss">
|
|
69
|
+
@import '@/styles/include.scss';
|
|
70
|
+
.px-measure-container {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
position: absolute;
|
|
74
|
+
|
|
75
|
+
&__container {
|
|
76
|
+
position: absolute;
|
|
77
|
+
width: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&__content {
|
|
81
|
+
position: relative;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
</style>
|
package/components/PxPivot.vue
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
:key="getItemKey(item)"
|
|
18
18
|
:disabled="getItemDisabled(item)"
|
|
19
19
|
@click="itemClick(item)"
|
|
20
|
+
v-bind="getTabAttrs(item)"
|
|
20
21
|
>
|
|
21
22
|
<span :ref="getTabContentRefName(item)">
|
|
22
23
|
<slot :item="item" :selected="isItemSelected(item)">
|
|
@@ -49,9 +50,14 @@ export default {
|
|
|
49
50
|
components: {},
|
|
50
51
|
mixins: [PxBaseResize, PxBaseItemsSelect],
|
|
51
52
|
props: {
|
|
53
|
+
// classes that get set on the tabs and selector line
|
|
52
54
|
tabClass: { type: String, default: 'px-pivot__tab' },
|
|
53
55
|
selectorClass: { type: String, default: 'px-pivot__selector' },
|
|
54
56
|
|
|
57
|
+
// a function that will return attributes that should be set on the tab buttons (takes the
|
|
58
|
+
// button item as an arg)
|
|
59
|
+
tabAttrsFn: { type: Function, default: null },
|
|
60
|
+
|
|
55
61
|
// if true scrolls horizontally when no more room
|
|
56
62
|
scrolls: { type: Boolean, default: true },
|
|
57
63
|
|
|
@@ -139,6 +145,13 @@ export default {
|
|
|
139
145
|
this.animated = false;
|
|
140
146
|
}, 100);
|
|
141
147
|
},
|
|
148
|
+
|
|
149
|
+
getTabAttrs(item) {
|
|
150
|
+
if (this.tabAttrsFn) {
|
|
151
|
+
return this.tabAttrsFn(item);
|
|
152
|
+
}
|
|
153
|
+
return null;
|
|
154
|
+
},
|
|
142
155
|
},
|
|
143
156
|
};
|
|
144
157
|
</script>
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
<template>
|
|
5
|
+
<div
|
|
6
|
+
:class="bem()"
|
|
7
|
+
@mouseenter="mouseEnter"
|
|
8
|
+
@mousemove="mouseMove"
|
|
9
|
+
@mouseleave="mouseLeave"
|
|
10
|
+
@mousedown="mouseDown"
|
|
11
|
+
@mouseup="mouseUp"
|
|
12
|
+
>
|
|
13
|
+
<div :class="bem('scrubber')">
|
|
14
|
+
<div :class="bem('progress')" :style="{ width: cssPcnt(progressValue) }"></div>
|
|
15
|
+
<div
|
|
16
|
+
v-if="!dragging"
|
|
17
|
+
:class="bem('preview')"
|
|
18
|
+
:style="{ width: cssPcnt(previewProgress) }"
|
|
19
|
+
></div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
// import { mapState } from 'vuex';
|
|
26
|
+
// import Component from '~/components/Component.vue';
|
|
27
|
+
// import Mixin from '~/components/Mixin.vue';
|
|
28
|
+
export default {
|
|
29
|
+
name: 'px-scrubber',
|
|
30
|
+
model: {
|
|
31
|
+
prop: 'progress',
|
|
32
|
+
event: 'update:progress',
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
props: {
|
|
36
|
+
progress: { type: Number, default: 0.5 },
|
|
37
|
+
dragEnabled: { type: Boolean, default: true },
|
|
38
|
+
},
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
dragging: false,
|
|
42
|
+
previewing: false,
|
|
43
|
+
previewProgress: 0,
|
|
44
|
+
progressValue: this.progress,
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
watch: {
|
|
48
|
+
progress(nv) {
|
|
49
|
+
// update progressValue when progress changes
|
|
50
|
+
this.progressValue = nv;
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
progressValue(nv) {
|
|
54
|
+
// emit update when progressValue changes (enables .sync on parent)
|
|
55
|
+
this.$emit('update:progress', nv);
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
mouseEnter() {
|
|
60
|
+
this.previewing = true;
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
mouseLeave() {
|
|
64
|
+
clearTimeout(this.previewingTimeout);
|
|
65
|
+
this.previewingTimeout = setTimeout(() => {
|
|
66
|
+
this.previewing = false;
|
|
67
|
+
}, 20);
|
|
68
|
+
//this.previewing = false;
|
|
69
|
+
|
|
70
|
+
this.previewProgress = 0;
|
|
71
|
+
},
|
|
72
|
+
mouseDown(e) {
|
|
73
|
+
const progress = e.offsetX / this.$el.offsetWidth;
|
|
74
|
+
this.$emit('seek', { progress });
|
|
75
|
+
|
|
76
|
+
if (this.dragEnabled) {
|
|
77
|
+
this.dragging = true;
|
|
78
|
+
this.$emit('dragstart');
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
mouseUp(e) {
|
|
83
|
+
if (this.dragging) {
|
|
84
|
+
this.dragging = false;
|
|
85
|
+
this.$emit('dragend');
|
|
86
|
+
}
|
|
87
|
+
e.stopPropagation();
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
},
|
|
90
|
+
|
|
91
|
+
mouseMove(e) {
|
|
92
|
+
const progress = e.offsetX / this.$el.offsetWidth;
|
|
93
|
+
if (this.dragging) {
|
|
94
|
+
this.$emit('seek', { progress });
|
|
95
|
+
} else if (this.previewing) {
|
|
96
|
+
this.previewProgress = progress;
|
|
97
|
+
}
|
|
98
|
+
e.stopPropagation();
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
</script>
|
|
104
|
+
|
|
105
|
+
<style lang="scss">
|
|
106
|
+
@use '../styles/px.scss' as *;
|
|
107
|
+
|
|
108
|
+
.px-scrubber {
|
|
109
|
+
@at-root :root {
|
|
110
|
+
--px-scrubber-height: 4px;
|
|
111
|
+
--px-scrubber-bg: #{clr(accent, 0, 0.1)};
|
|
112
|
+
--px-scrubber-padding: 1em 0;
|
|
113
|
+
--px-scrubber-progress-bg: #{clr(accent, 0, 1)};
|
|
114
|
+
--px-scrubber-preview-bg: #{clr(accent, 0, 0.5)};
|
|
115
|
+
}
|
|
116
|
+
width: 100%;
|
|
117
|
+
padding: var(--px-scrubber-padding);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
|
|
120
|
+
&__scrubber {
|
|
121
|
+
position: relative;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: var(--px-scrubber-height);
|
|
124
|
+
background: var(--px-scrubber-bg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&__progress,
|
|
128
|
+
&__preview {
|
|
129
|
+
position: absolute;
|
|
130
|
+
left: 0;
|
|
131
|
+
top: 0;
|
|
132
|
+
height: 100%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&__preview {
|
|
136
|
+
background: var(--px-scrubber-preview-bg);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&__progress {
|
|
140
|
+
background: var(--px-scrubber-progress-bg);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|
package/package.json
CHANGED