valaxy-theme-hairy 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/components/HairyFooterFish.vue +7 -5
- package/components/fish.js +42 -22
- package/package.json +1 -1
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
-
import { ref } from 'vue'
|
|
2
|
+
import { onMounted, ref } from 'vue'
|
|
3
3
|
import { useScriptTag } from '@vueuse/core'
|
|
4
4
|
import { RENDERER } from './fish'
|
|
5
5
|
|
|
6
6
|
const fishContainer = ref()
|
|
7
7
|
|
|
8
8
|
const tag = useScriptTag('https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js')
|
|
9
|
-
|
|
10
|
-
.
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
onMounted(() => {
|
|
10
|
+
tag.load()
|
|
11
|
+
.then(() => {
|
|
12
|
+
new RENDERER().init()
|
|
13
|
+
})
|
|
14
|
+
})
|
|
13
15
|
</script>
|
|
14
16
|
|
|
15
17
|
<template>
|
package/components/fish.js
CHANGED
|
@@ -3,19 +3,25 @@
|
|
|
3
3
|
/* eslint-disable vars-on-top */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
5
5
|
/* eslint-disable no-undef */
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
|
|
7
|
+
class RENDERER {
|
|
8
|
+
ENABLE = false
|
|
9
|
+
POINT_INTERVAL = 5
|
|
10
|
+
FISH_COUNT = 3
|
|
11
|
+
MAX_INTERVAL_COUNT = 50
|
|
12
|
+
INIT_HEIGHT_RATE = 0.5
|
|
13
|
+
THRESHOLD = 50
|
|
12
14
|
init() {
|
|
15
|
+
if (this.ENABLE)
|
|
16
|
+
return
|
|
13
17
|
this.setParameters()
|
|
14
18
|
this.reconstructMethods()
|
|
15
19
|
this.setup()
|
|
16
20
|
this.bindEvent()
|
|
17
21
|
this.render()
|
|
18
|
-
|
|
22
|
+
this.ENABLE = true
|
|
23
|
+
}
|
|
24
|
+
|
|
19
25
|
setParameters() {
|
|
20
26
|
this.$window = $(window)
|
|
21
27
|
this.$container = $('#jsi-flying-fish-container')
|
|
@@ -24,7 +30,8 @@ const RENDERER = {
|
|
|
24
30
|
this.points = []
|
|
25
31
|
this.fishes = []
|
|
26
32
|
this.watchIds = []
|
|
27
|
-
}
|
|
33
|
+
}
|
|
34
|
+
|
|
28
35
|
createSurfacePoints() {
|
|
29
36
|
const count = Math.round(this.width / this.POINT_INTERVAL)
|
|
30
37
|
this.pointInterval = this.width / (count - 1)
|
|
@@ -36,7 +43,8 @@ const RENDERER = {
|
|
|
36
43
|
previous.setNextPoint(point)
|
|
37
44
|
this.points.push(point)
|
|
38
45
|
}
|
|
39
|
-
}
|
|
46
|
+
}
|
|
47
|
+
|
|
40
48
|
reconstructMethods() {
|
|
41
49
|
this.watchWindowSize = this.watchWindowSize.bind(this)
|
|
42
50
|
this.jdugeToStopResize = this.jdugeToStopResize.bind(this)
|
|
@@ -44,7 +52,8 @@ const RENDERER = {
|
|
|
44
52
|
this.moveEpicenter = this.moveEpicenter.bind(this)
|
|
45
53
|
this.reverseVertical = this.reverseVertical.bind(this)
|
|
46
54
|
this.render = this.render.bind(this)
|
|
47
|
-
}
|
|
55
|
+
}
|
|
56
|
+
|
|
48
57
|
setup() {
|
|
49
58
|
this.points.length = 0
|
|
50
59
|
this.fishes.length = 0
|
|
@@ -57,17 +66,20 @@ const RENDERER = {
|
|
|
57
66
|
this.reverse = false
|
|
58
67
|
this.fishes.push(new FISH(this))
|
|
59
68
|
this.createSurfacePoints()
|
|
60
|
-
}
|
|
69
|
+
}
|
|
70
|
+
|
|
61
71
|
watchWindowSize() {
|
|
62
72
|
this.clearTimer()
|
|
63
73
|
this.tmpWidth = this.$window.width()
|
|
64
74
|
this.tmpHeight = this.$window.height()
|
|
65
75
|
this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL))
|
|
66
|
-
}
|
|
76
|
+
}
|
|
77
|
+
|
|
67
78
|
clearTimer() {
|
|
68
79
|
while (this.watchIds.length > 0)
|
|
69
80
|
clearTimeout(this.watchIds.pop())
|
|
70
|
-
}
|
|
81
|
+
}
|
|
82
|
+
|
|
71
83
|
jdugeToStopResize() {
|
|
72
84
|
const width = this.$window.width()
|
|
73
85
|
const height = this.$window.height()
|
|
@@ -76,19 +88,23 @@ const RENDERER = {
|
|
|
76
88
|
this.tmpHeight = height
|
|
77
89
|
if (stopped)
|
|
78
90
|
this.setup()
|
|
79
|
-
}
|
|
91
|
+
}
|
|
92
|
+
|
|
80
93
|
bindEvent() {
|
|
81
94
|
this.$window.on('resize', this.watchWindowSize)
|
|
82
95
|
this.$container.on('mouseenter', this.startEpicenter)
|
|
83
96
|
this.$container.on('mousemove', this.moveEpicenter)
|
|
84
|
-
}
|
|
97
|
+
}
|
|
98
|
+
|
|
85
99
|
getAxis(event) {
|
|
86
100
|
const offset = this.$container.offset()
|
|
87
101
|
return { x: event.clientX - offset.left + this.$window.scrollLeft(), y: event.clientY - offset.top + this.$window.scrollTop() }
|
|
88
|
-
}
|
|
102
|
+
}
|
|
103
|
+
|
|
89
104
|
startEpicenter(event) {
|
|
90
105
|
this.axis = this.getAxis(event)
|
|
91
|
-
}
|
|
106
|
+
}
|
|
107
|
+
|
|
92
108
|
moveEpicenter(event) {
|
|
93
109
|
const axis = this.getAxis(event)
|
|
94
110
|
if (!this.axis)
|
|
@@ -96,7 +112,8 @@ const RENDERER = {
|
|
|
96
112
|
|
|
97
113
|
this.generateEpicenter(axis.x, axis.y, axis.y - this.axis.y)
|
|
98
114
|
this.axis = axis
|
|
99
|
-
}
|
|
115
|
+
}
|
|
116
|
+
|
|
100
117
|
generateEpicenter(x, y, velocity) {
|
|
101
118
|
if (y < this.height / 2 - this.THRESHOLD || y > this.height / 2 + this.THRESHOLD)
|
|
102
119
|
return
|
|
@@ -106,12 +123,14 @@ const RENDERER = {
|
|
|
106
123
|
return
|
|
107
124
|
|
|
108
125
|
this.points[index].interfere(y, velocity)
|
|
109
|
-
}
|
|
126
|
+
}
|
|
127
|
+
|
|
110
128
|
reverseVertical() {
|
|
111
129
|
this.reverse = !this.reverse
|
|
112
130
|
for (let i = 0, count = this.fishes.length; i < count; i++)
|
|
113
131
|
this.fishes[i].reverseVertical()
|
|
114
|
-
}
|
|
132
|
+
}
|
|
133
|
+
|
|
115
134
|
controlStatus() {
|
|
116
135
|
for (let i = 0, count = this.points.length; i < count; i++)
|
|
117
136
|
this.points[i].updateSelf()
|
|
@@ -123,7 +142,8 @@ const RENDERER = {
|
|
|
123
142
|
this.intervalCount = this.MAX_INTERVAL_COUNT
|
|
124
143
|
this.fishes.push(new FISH(this))
|
|
125
144
|
}
|
|
126
|
-
}
|
|
145
|
+
}
|
|
146
|
+
|
|
127
147
|
render() {
|
|
128
148
|
requestAnimationFrame(this.render)
|
|
129
149
|
this.controlStatus()
|
|
@@ -143,7 +163,7 @@ const RENDERER = {
|
|
|
143
163
|
this.context.closePath()
|
|
144
164
|
this.context.fill()
|
|
145
165
|
this.context.restore()
|
|
146
|
-
}
|
|
166
|
+
}
|
|
147
167
|
}
|
|
148
168
|
|
|
149
169
|
var SURFACE_POINT = function (renderer, x) {
|