-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathacss.js
88 lines (73 loc) · 2.91 KB
/
acss.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
HTMLElement.prototype.get_css_var = function(Var){
return getComputedStyle(this).getPropertyValue(Var)
}
HTMLElement.prototype.set_css_var = function(Var,value){
return this.style.setProperty(Var,value)
}
function installAcss(){
let selectors = setup_json
let external_selector = external_hook;
// only two events
// both events are have corresponding opposite events
let builtin_event = {
"mousedown":"mouseup",
"keydown":"keyup"
}
for(let i = 0;i<selectors.length;i++){
let state = selectors[i]
let query = state.selector
let elts = document.querySelectorAll(query)
for(let j = 0;j<elts.length;j++){
if(builtin_event[state._event]){
elts[j].addEventListener(state._event,onmainevent(state._if,state._else,state.key))
window.addEventListener(state._event,()=>{})
elts[j].addEventListener(builtin_event[state._event],onsecondaryevent(state._if,state._else,state.key))
window.addEventListener(builtin_event[state._event],onsecondaryevent(state._if,state._else,state.key,elts[j]))
}else{
for(let k = 0;k <external_selector.length;k++){
if(external_selector[k].event_as == state._event){
console.log(external_selector[k])
let elt_new = document.querySelectorAll(external_selector[k].selector)
elt_new.forEach(elt=>{
elt.addEventListener(external_selector[k].event,onmainevent(state._if,state._else,state.key,elts[j]))
window.addEventListener(external_selector[k].event,()=>{})
window.addEventListener(builtin_event[external_selector[k].event],onsecondaryevent(state._if,state._else,state.key,elts[j]),true)
elt.addEventListener(builtin_event[external_selector[k].event],onsecondaryevent(state._if,state._else,state.key,elts[j]))
})
}
}
}
}
function onmainevent(_if,_else,key,elts){
function handler(e){
let elt
if(!elts){
elt = e.target
}else{
elt = elts
}
elt.set_css_var(`--else_${key}`, "unset")
elt.set_css_var(`--if_${key}`, _if)
}
return handler
}
function onsecondaryevent(_if,_else,key,elts){
function handler(e){
let elt
if(!elts){
elt = e.target
}else{
elt = elts
}
elt.set_css_var(`--if_${key}`, "unset")
elt.set_css_var(`--else_${key}`, _else)
}
return handler
}
}
}
let bullitin_event={
"mousedown":"mouseup",
"keydown":"keyup",
"mouseover":"mouseout"
}