1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict';
|
7 |
|
8 | var animationId;
|
9 | var lastTime = null;
|
10 |
|
11 | function linear(t) {
|
12 | return t;
|
13 | }
|
14 |
|
15 | function animate(duration, component) {
|
16 | lastTime = component.progress <= 1 ? performance.now() : lastTime;
|
17 | var animation = function (t) {
|
18 | var progress = (t - lastTime) / duration;
|
19 | if (progress >= 1) {
|
20 | window.cancelAnimationFrame(animationId);
|
21 | component.clickProgress = 1;
|
22 | component.progress = 1;
|
23 | return;
|
24 | }
|
25 | component.progress = component.easing(progress);
|
26 | animationId = window.requestAnimationFrame(animation);
|
27 | };
|
28 | animationId = window.requestAnimationFrame(animation);
|
29 | }
|
30 |
|
31 | function calculatePosition(
|
32 | pointDown,
|
33 | progress,
|
34 | lastClickProgress,
|
35 | height,
|
36 | viewBoxCenterY
|
37 | ) {
|
38 | var progressWithClick =
|
39 | lastClickProgress === 1 ? progress : progress + (1 - lastClickProgress);
|
40 |
|
41 | if (progressWithClick >= 1) {
|
42 | progressWithClick = 1;
|
43 | }
|
44 |
|
45 | var topY = viewBoxCenterY + height / 2 - progressWithClick * height;
|
46 | var bottomY = viewBoxCenterY - height / 2 + progressWithClick * height;
|
47 |
|
48 | return pointDown ? topY : bottomY;
|
49 | }
|
50 |
|
51 | var index = {
|
52 | name: "VueChevron",
|
53 | props: {
|
54 | pointDown: {
|
55 | type: Boolean,
|
56 | default: true
|
57 | },
|
58 | duration: {
|
59 | type: Number,
|
60 | default: 500
|
61 | },
|
62 | thickness: {
|
63 | type: Number,
|
64 | default: 4
|
65 | },
|
66 | angle: {
|
67 | type: Number,
|
68 | default: 40
|
69 | },
|
70 | roundEdges: {
|
71 | type: Boolean,
|
72 | default: true
|
73 | },
|
74 | easing: {
|
75 | type: Function,
|
76 | default: linear
|
77 | }
|
78 | },
|
79 | data: function data() {
|
80 | return {
|
81 | progress: 1,
|
82 | clickProgress: 1,
|
83 | reverse: false,
|
84 | lineLength: 30
|
85 | };
|
86 | },
|
87 | computed: {
|
88 | path: function path() {
|
89 | var progress = this.progress;
|
90 | var ref = this.triangleSideLengths;
|
91 | var width = ref.width;
|
92 | var height = ref.height;
|
93 | var ref$1 = this.viewBoxCenter;
|
94 | var x = ref$1.x;
|
95 | var y = ref$1.y;
|
96 | var clickProgress = this.clickProgress;
|
97 |
|
98 | var sidesY = calculatePosition(
|
99 | this.pointDown,
|
100 | progress,
|
101 | clickProgress,
|
102 | height,
|
103 | y
|
104 | );
|
105 | var centerY = calculatePosition(
|
106 | !this.pointDown,
|
107 | progress,
|
108 | clickProgress,
|
109 | height,
|
110 | y
|
111 | );
|
112 | return ("M" + (x - width) + "," + sidesY + ", " + x + "," + centerY + " " + (x + width) + "," + sidesY);
|
113 | },
|
114 | triangleSideLengths: function triangleSideLengths() {
|
115 | var height = this.lineLength * Math.sin(this.angle * (Math.PI / 180));
|
116 | var width = this.lineLength * Math.cos(this.angle * (Math.PI / 180));
|
117 | return {
|
118 | width: width,
|
119 | height: height
|
120 | };
|
121 | },
|
122 | viewBoxCenter: function viewBoxCenter() {
|
123 | var ref = this.viewBoxSize;
|
124 | var width = ref.width;
|
125 | var height = ref.height;
|
126 | return { x: width / 2, y: height / 2 };
|
127 | },
|
128 | viewBoxSize: function viewBoxSize() {
|
129 | var lineLength = this.lineLength;
|
130 | var thickness = this.thickness;
|
131 |
|
132 | var width = Math.ceil(lineLength * 2 + thickness * 2);
|
133 | var height = Math.ceil(
|
134 | lineLength * 2 * Math.sin(this.angle * (Math.PI / 180)) + thickness * 2
|
135 | );
|
136 | return { width: width, height: height };
|
137 | }
|
138 | },
|
139 | watch: {
|
140 | pointDown: function() {
|
141 | this.clickProgress = this.progress;
|
142 | this.progress = 0;
|
143 | window.cancelAnimationFrame(animationId);
|
144 | animate(this.duration, this);
|
145 | }
|
146 | },
|
147 | render: function render(h) {
|
148 | var lineCapAndJoin = this.roundEdges ? "round" : "square";
|
149 | var ref = this.viewBoxSize;
|
150 | var width = ref.width;
|
151 | var height = ref.height;
|
152 |
|
153 | return h(
|
154 | "svg",
|
155 | {
|
156 | attrs: {
|
157 | height: 32,
|
158 | width: 32,
|
159 | xmlns: "http://www.w3.org/2000/svg",
|
160 | viewBox: ("0 0 " + width + " " + height)
|
161 | }
|
162 | },
|
163 | [
|
164 | h("title", "vue-chevron"),
|
165 | h("path", {
|
166 | attrs: {
|
167 | d: this.path,
|
168 | fill: "none",
|
169 | "stroke-linecap": lineCapAndJoin,
|
170 | "stroke-width": this.thickness,
|
171 | "stroke-linejoin": lineCapAndJoin,
|
172 | stroke: "currentColor"
|
173 | }
|
174 | })
|
175 | ]
|
176 | );
|
177 | }
|
178 | };
|
179 |
|
180 | module.exports = index;
|