/
circles-interactive-visible.js
105 lines (97 loc) · 3.38 KB
/
circles-interactive-visible.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
'use strict';
//raycasters still click on interactive elements with "visible:false" entities so we will control that here manually
//see here: https://github.com/aframevr/aframe/issues/3551
AFRAME.registerComponent('circles-interactive-visible', {
// dependencies: ['circles-interactive-object'],
schema: {type:'boolean', default:true},
multiple: false, //do not allow multiple instances of this component on this entity
init: function() {
const CONTEXT_AF = this;
CONTEXT_AF.prepElemsForInteraction();
//need to catch all elements ...
CONTEXT_AF.el.addEventListener('object3dset', function(e) {
CONTEXT_AF.prepElemsForInteraction();
});
},
update: function (oldData) {
const CONTEXT_AF = this;
const data = this.data;
//text changes
if ((oldData !== data) && (data !== '')) {
CONTEXT_AF.makeVisible(data);
}
},
makeVisible: function(isVisible) {
const CONTEXT_AF = this;
CONTEXT_AF.el.object3D.visible = isVisible;
if (isVisible === true) {
if (CONTEXT_AF.el.classList.contains("interactive_toggle")) {
CONTEXT_AF.el.classList.add('interactive');
}
}
else {
if (CONTEXT_AF.el.classList.contains("interactive")) {
CONTEXT_AF.el.classList.remove("interactive");
}
}
const descendentNodes = CONTEXT_AF.el.querySelectorAll('*');
descendentNodes.forEach(childNode => {
//update raycaster objects ...
if (isVisible === true) {
if (childNode.classList.contains("interactive_toggle")) {
childNode.classList.add('interactive');
}
}
else {
if (childNode.classList.contains("interactive")) {
childNode.classList.remove("interactive");
}
}
});
const raycasters = this.el.sceneEl.querySelectorAll('[raycaster]');
raycasters.forEach(rc => {
if (rc.components.raycaster.data) {
rc.components.raycaster.refreshObjects();
}
});
},
prepElemsForInteraction() {
const CONTEXT_AF = this;
//need to attach "interactive_toggle" class name so we can identify later ... self
if (CONTEXT_AF.data === true) {
if (CONTEXT_AF.el.classList.contains("interactive")) {
if (!CONTEXT_AF.el.classList.contains("interactive_toggle")) {
CONTEXT_AF.el.classList.add('interactive_toggle');
}
}
}
else {
if (CONTEXT_AF.el.classList.contains("interactive")) {
CONTEXT_AF.el.classList.remove("interactive");
if (!CONTEXT_AF.el.classList.contains("interactive_toggle")) {
CONTEXT_AF.el.classList.add('interactive_toggle');
}
}
}
//need to attach "interactive_toggle" class name so we can identify later ... childNodes
const descendentNodes = CONTEXT_AF.el.querySelectorAll('*');
descendentNodes.forEach(childNode => {
//update objects ...
if (CONTEXT_AF.data === true) {
if (childNode.classList.contains("interactive")) {
if (!childNode.classList.contains("interactive_toggle")) {
childNode.classList.add('interactive_toggle');
}
}
}
else {
if (childNode.classList.contains("interactive")) {
childNode.classList.remove("interactive");
if (!childNode.classList.contains("interactive_toggle")) {
childNode.classList.add('interactive_toggle');
}
}
}
});
}
});