forked from Shugabuga/OpenSkinJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopenskin.js
203 lines (184 loc) · 16.9 KB
/
openskin.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
// OpenSkinJS v2.1.8 (Eclipse Edition) (c) HeyItsShuga. Licensed under MIT.
console.log("%c[OpenSkin] %c Loading application \"" + openskin + "\"", "color:#358311", "color: gray");
function sanLite(str) {
str = String(str).replace(/undefined|nil|null|\<|\>|\{|\}/g,"");
return str;
}
function sanCustom(str) {
str = String(str).replace(/undefined|nil|null/g,"");
return str;
}
var OpenSkin_jsonContents;
var OpenSkin_jsonAppName = openskin;
function OpenSkin() {
this.application = openskin
// default: remote JSON file
this.get = function(url, loadAfter) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send();
request.onload = function() {
request.onerror = function() {
throw "Invalid URL."
}
if (request.status >= 200 && request.status < 400) {
OpenSkin_jsonContents = JSON.parse(request.responseText);
} else {
throw "Can't access data."
}
if(loadAfter == true) {
OpenSkin.load()
}
return OpenSkin_jsonContents;
}
}
// import via remote JSON file
// duplicate of this.get so removing!
this.getJSON = function(url, loadAfter) {
this.get(url, loadAfter);
return OpenSkin_jsonContents;
}
this.getStr = function(str, loadAfter) {
OpenSkin_jsonContents = JSON.parse(str);
if(loadAfter == true) {
this.load()
}
return OpenSkin_jsonContents;
}
// import via object
this.getObj = function(str, loadAfter) {
OpenSkin_jsonContents = str;
if(loadAfter == true) {
this.load()
}
return OpenSkin_jsonContents;
}
this.load = function() {
var element = "";
element += ".subnavbar, .navbar, .navbar-inner, .searchbar, .ios .navbar .title, .statusbar {" + sanLite(OpenSkin_jsonContents.styles[0].header) + ";" + "}";
element += ".md .navbar-inner, .md .statusbar, .md {" + sanLite(OpenSkin_jsonContents.styles[0].mdHeader) + ";" + "}";
element += ".md .tabBar{" + sanLite(OpenSkin_jsonContents.styles[0].navbar) + ";" + "}";
element += ".ios .icon:not(.fab-ico):not(.ico-colored-bkg), .ico-white-bkg {" + sanLite(OpenSkin_jsonContents.styles[0].iOSicon) + ";" + "}";
element += ".md .icon:not(.fab-ico):not(.ico-white-bkg):not(.color-black):not(.actions-button-media>i), .ico-colored-bkg {" + sanLite(OpenSkin_jsonContents.styles[0].MDicon) + ";" + "}";
element += ".md .tab-link:not(.tab-link-active) :not(.fab-ico), .md .tab-link:not(.tab-link-active) :not(.fab-ico) > i {" + sanLite(OpenSkin_jsonContents.styles[0].MDoutOfFocus) + ";" + "}";
element += ".ios .tab-link:not(.tab-link-active) :not(.fab-ico), .ios .tab-link:not(.tab-link-active) :not(.fab-ico) > i {" + sanLite(OpenSkin_jsonContents.styles[0].iOSoutOfFocus) + ";" + "}";
element += ".md .tab-link-active > span {" + sanLite(OpenSkin_jsonContents.styles[0].MDinFocus) + ";" + "}";
element += ".ios .tab-link-active > span {" + sanLite(OpenSkin_jsonContents.styles[0].iOSinFocus) + ";" + "}";
element += ".md .color-theme-red .toggle input[type=checkbox]:checked+.toggle-icon:after {" + sanLite(OpenSkin_jsonContents.styles[0].MDtoggleHead) + ";" + "}";
element += ".md .color-theme-red .toggle input[type=checkbox]:checked+.toggle-icon {" + sanLite(OpenSkin_jsonContents.styles[0].MDtoggleBody) + ";" + "}";
element += ".ios .toggle-icon:after {" + sanLite(OpenSkin_jsonContents.styles[0].iOStoggleHead) + ";" + "}";
element += ".ios .toggle input[type=checkbox]:checked+.toggle-icon {" + sanLite(OpenSkin_jsonContents.styles[0].iOStoggleBody) + ";" + "}";
element += ".fabCircle {" + sanLite(OpenSkin_jsonContents.styles[0].fab) + ";" + "}";
element += ".tint, .ios .color-theme-red a, .ios a, .back > span, .back > div, .ios .searchbar-disable-button, .ios .color-theme-red .searchbar-disable-button {" + sanLite(OpenSkin_jsonContents.styles[0].tint) + ";" + "}";
try { // Back arrow: create svg to go with given color value. Potentially unstable.
color = sanLite(OpenSkin_jsonContents.styles[0].tint).replace("!important","").replace(" ","");
color = /color:?(.*)(;|$)?/g.exec(color)[1].replace(";","");
svgCode = "<svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.18261596 9.4221638c.0352203-.05148305.07573462-.10050698.1215468-.14631917L9.1425872.4374202c.5830904-.58309038 1.52656832-.5849888 2.11643872.00488163.5857864.58578644.591222 1.53009836.0048816 2.11643873L3.82594417 9.9967039l7.43188553 7.4318855c.5830904.5830904.5849888 1.5265683-.0048817 2.1164387-.5857864.5857865-1.5300983.591222-2.11643868.0048816L.2980849 10.7114853c-.3526746-.3526746-.3939974-.89699-.11546894-1.2893215z\" fill=\"" + color + "\" fill-rule=\"evenodd\"/></svg>";
element += ".ios i.icon.icon-back {background-image: url('data:image/svg+xml;utf8," + svgCode + "')!important}";
} catch(err) {}
element += "body, h1, h2, h3, h4, h5, h6, text.card-footer-inner-text, div.card-footer-inner-text {" + sanLite(OpenSkin_jsonContents.styles[0].label) + "}";
element += ".button.color-red, .active {" + sanLite(OpenSkin_jsonContents.styles[0].button) + "}";
element += ".modal {" + sanLite(OpenSkin_jsonContents.styles[0].alert) + "}";
element += ".page-content, .card, #games-list>.row {" + sanLite(OpenSkin_jsonContents.styles[0].containerBackground) + "}";
element += ".item-content, .inset>ul>div>div>a>.card, .swiper-slide, .list, .inset, .block-strong, .inset>ul, .list.inset>ul>div.row, .div.block.inset {" + sanLite(OpenSkin_jsonContents.styles[0].cell) + "}";
element += ".item-after {" + sanLite(OpenSkin_jsonContents.styles[0].cellChevron) + "}";
element += ".toolbar {" + sanLite(OpenSkin_jsonContents.styles[0].toolbar) + "}";
element += ".block-title {" + sanLite(OpenSkin_jsonContents.styles[0].cellGroupTitle) + "}";
// iGBA methods are officially in the OpenSkin spec.
element += "#emulatorPopup, .popup-emu, .emulator-view {" + sanLite(OpenSkin_jsonContents.styles[0].emulatorBackground) + ";" + "}";
element += "#emulatorTarget {" + sanLite(OpenSkin_jsonContents.styles[0].emulatorScreen) + ";" + "}";
element += "#triggerL, .button-l {" + sanLite(OpenSkin_jsonContents.styles[0].triggerL) + "}";
element += "#triggerR, .button-r {" + sanLite(OpenSkin_jsonContents.styles[0].triggerR) + "}";
element += "#center, .arrow-button-centerr {" + sanLite(OpenSkin_jsonContents.styles[0].center) + "}";
element += "#right, .arrow-button-right {" + sanLite(OpenSkin_jsonContents.styles[0].right) + "}";
element += "#left, .arrow-button-left {" + sanLite(OpenSkin_jsonContents.styles[0].left) + "}";
element += "#up, .arrow-button-up {" + sanLite(OpenSkin_jsonContents.styles[0].up) + "}";
element += "#down, .arrow-button-down {" + sanLite(OpenSkin_jsonContents.styles[0].down) + "}";
element += "#aBtn, .button-a {" + sanLite(OpenSkin_jsonContents.styles[0].aBtn) + "}";
element += "#bBtn, .button-b {" + sanLite(OpenSkin_jsonContents.styles[0].bBtn) + "}";
element += "#startbtn, .menu-button-start {" + sanLite(OpenSkin_jsonContents.styles[0].startBtn) + "}";
element += "#select, .menu-button-select {" + sanLite(OpenSkin_jsonContents.styles[0].select) + "}";
element += ".searchbar-input-wrap>input {" + sanLite(OpenSkin_jsonContents.styles[0].searchbar) + "}";
element += ".ios .list .item-divider:after,.ios .list .item-inner:after,.ios .list .list-button:after,.ios .list .list-group-title:after,.ios .list ul:after,.ios .list ul:before,.ios .list:after,.ios .list:before,.ios .navbar:after,.ios .searchbar:after,.ios .subnavbar:after,.ios .toolbar:before {" + sanLite(OpenSkin_jsonContents.styles[0].hairlines) + "}";
element += ".list .item-footer {" + sanLite(OpenSkin_jsonContents.styles[0].caption) + "}";
element += ".item-media .icon {" + sanLite(OpenSkin_jsonContents.styles[0].icon) + "}";
// Out-of-spec: gradients
element += ".gradient, .inset.eclipse-header, .eclipse-header {" + sanLite(OpenSkin_jsonContents.styles[0].gradient) + "}";
if(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName]) {
element += ".subnavbar, .navbar, .navbar-inner, .searchbar, .ios .navbar .title, .statusbar {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].header) + ";" + "}";
element += ".md .navbar-inner, .md .statusbar, .md {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].mdHeader) + ";" + "}";
element += ".md .tabBar {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].navbar) + ";" + "}";
element += ".ios .icon:not(.fab-ico):not(.ico-colored-bkg), .ico-white-bkg {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].iOSicon) + ";" + "}";
element += ".md .icon:not(.fab-ico):not(.ico-white-bkg):not(.color-black):not(.actions-button-media>i), .ico-colored-bkg {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].MDicon) + ";" + "}";
element += ".md .tab-link:not(.tab-link-active) :not(.fab-ico), .md .tab-link:not(.tab-link-active) :not(.fab-ico) > i {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].MDoutOfFocus) + ";" + "}";
element += ".ios .tab-link:not(.tab-link-active) :not(.fab-ico), .ios .tab-link:not(.tab-link-active) :not(.fab-ico) > i {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].iOSoutOfFocus) + ";" + "}";
element += ".md .tab-link-active > span {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].MDinFocus) + ";" + "}";
element += ".ios .tab-link-active > span {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].iOSinFocus) + ";" + "}";
element += ".md .color-theme-red .toggle input[type=checkbox]:checked+.toggle-icon:after {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].MDtoggleHead) + ";" + "}";
element += ".md .color-theme-red .toggle input[type=checkbox]:checked+.toggle-icon {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].MDtoggleBody) + ";" + "}";
element += ".ios .toggle-icon:after {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].iOStoggleHead) + ";" + "}";
element += ".ios .toggle input[type=checkbox]:checked+.toggle-icon {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].iOStoggleBody) + ";" + "}";
element += ".fabCircle {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].fab) + ";" + "}";
element += ".tint, .ios .color-theme-red a, .ios a, .back > span, .back > div, .ios .searchbar-disable-button, .ios .color-theme-red .searchbar-disable-button {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].tint) + ";" + "}";
try { // Back arrow: create svg to go with given color value. Potentially unstable.
color = sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].tint).replace("!important","").replace(" ","");
color = /color:?(.*)(;|$)?/g.exec(color)[1].replace(";","");
svgCode = "<svg width=\"12\" height=\"20\" viewBox=\"0 0 12 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.18261596 9.4221638c.0352203-.05148305.07573462-.10050698.1215468-.14631917L9.1425872.4374202c.5830904-.58309038 1.52656832-.5849888 2.11643872.00488163.5857864.58578644.591222 1.53009836.0048816 2.11643873L3.82594417 9.9967039l7.43188553 7.4318855c.5830904.5830904.5849888 1.5265683-.0048817 2.1164387-.5857864.5857865-1.5300983.591222-2.11643868.0048816L.2980849 10.7114853c-.3526746-.3526746-.3939974-.89699-.11546894-1.2893215z\" fill=\"" + color + "\" fill-rule=\"evenodd\"/></svg>";
element += ".ios i.icon.icon-back {background-image: url('data:image/svg+xml;utf8," + svgCode + "')!important}";
} catch(err) {}
element += "body, h1, h2, h3, h4, h5, h6, text.card-footer-inner-text, div.card-footer-inner-text {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].label) + "}";
element += ".button.color-red, .active {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].button) + "}";
element += ".modal {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].alert) + "}";
element += ".page-content, .card, #games-list>.row {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].containerBackground) + "}";
element += ".item-content, .inset>ul>div>div>a>.card, .swiper-slide, .list, .inset, .block-strong, .inset>ul, .list.inset>ul>div.row, .div.block.inset {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].cell) + "}";
element += ".item-after {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].cellChevron) + "}";
element += ".toolbar {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].toolbar) + "}";
element += ".block-title {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].cellGroupTitle) + "}";
// iGBA methods are officially in the OpenSkin spec.
element += "#emulatorPopup, .popup {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].emulatorBackground) + ";" + "}";
element += "#emulator_target {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].emulatorScreen) + ";" + "}";
element += "#triggerL, .button-l {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].triggerL) + "}";
element += "#triggerR, .button-r {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].triggerR) + "}";
element += "#center, .arrow-button-centerr {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].center) + "}";
element += "#right, .arrow-button-right {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].right) + "}";
element += "#left, .arrow-button-left {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].left) + "}";
element += "#up, .arrow-button-up {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].up) + "}";
element += "#down, .arrow-button-down {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].down) + "}";
element += "#aBtn, .button-a {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].aBtn) + "}";
element += "#bBtn, .button-b {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].bBtn) + "}";
element += "#startbtn, .menu-button-start {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].startBtn) + "}";
element += "#select, .menu-button-select {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].select) + "}";
element += ".searchbar-input-wrap>input {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].searchbar) + "}";
element += ".ios .list .item-divider:after,.ios .list .item-inner:after,.ios .list .list-button:after,.ios .list .list-group-title:after,.ios .list ul:after,.ios .list ul:before,.ios .list:after,.ios .list:before,.ios .navbar:after,.ios .searchbar:after,.ios .subnavbar:after,.ios .toolbar:before {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].hairlines) + "}";
element += ".list .item-footer {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].caption) + "}";
element += ".item-media .icon {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].icon) + "}";
// Out-of-spec: gradients
element += ".gradient, .inset.eclipse-header, .eclipse-header {" + sanLite(OpenSkin_jsonContents.styles[0][OpenSkin_jsonAppName][0].gradient) + "}";
}
if (localStorage.getItem('desktopMode') == 'true') {
// If desktopMode is enabled, hide game controls.
element += " @media screen and (orientation:portrait) { #desktopModeEnabledNotice {display:block!important;color:white;opacity:0.5;position:fixed;width:100%;text-align:center;top:420px;font-size:24px} #desktopModeEnabledNoticeL2 {display:block!important;color:white;opacity:0.5;position:fixed;width:100%;text-align:center;top:450px;font-size:18px} } #triggerL, .button-l , #triggerR, .button-r , #center, .arrow-button-centerr , #right, .arrow-button-right , #left, .arrow-button-left , #up, .arrow-button-up , #down, .arrow-button-down , #aBtn, .button-a , #bBtn, .button-b , #startbtn, .menu-button-start , #select, .menu-button-select {display:none!important;opacity:0!important;visibility:hidden!important}";
}
// Skin viewer update
try {
eclipse.methods.skins.updateSkinLabel();
} catch(err) {}
// Custom CSS
try {
element += sanCustom(OpenSkin_jsonContents.styles[0].custom[0][OpenSkin_jsonAppName])
} catch(n) {}
if(document.getElementById("openskin_stylesheet")) {
document.getElementById("openskin_stylesheet").innerHTML = element;
} else {
var style = document.createElement("style");
style.id = "openskin_stylesheet";
style.innerHTML = element;
document.head.appendChild(style);
}
return true
}
this.skin = function(url) {
return OpenSkin_jsonContents;
}
}
var OpenSkin = new OpenSkin();