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