-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmain.js
122 lines (121 loc) · 3.54 KB
/
main.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
let SuperSecretNamespace = {};
//SRC: https://stackoverflow.com/a/8618519
function whenAvailable(name, callback) {
let interval = 10; // ms
window.setTimeout(function() {
if (window[name]) return callback(window[name]);
window.setTimeout(arguments.callee, interval);
}, interval);
}
SuperSecretNamespace.vm = new Vue({
el: '#root',
data() {
return {
search: '',
results: [],
fuse: null,
librariesFetchPromise: null,
loadedLibraries: [],
};
},
async mounted() {
let libraries = await this.getLibraries();
await this.hide('Fuse');
await this.hide('Vue');
let { Fuse } = SuperSecretNamespace;
this.fuse = new Fuse(libraries, {
shouldSort: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: ["name"]
});
},
methods: {
async hide(identifier) {
let loadPromise = new Promise((resolve, reject)=> {
whenAvailable(identifier, ()=> {
SuperSecretNamespace[identifier] = window[identifier];
delete window[identifier];
resolve();
});
});
return loadPromise;
},
async fetchLibraries() {
let response = await window.fetch('https://api.cdnjs.com/libraries?fields=version,description');
let { results } = await response.json();
return results;
},
async getLibraries() {
if(!this.librariesFetchPromise) this.librariesFetchPromise = this.fetchLibraries();
return await this.librariesFetchPromise;
},
async loadLibraryByURL(url) {
let newElement;
if(url.match(/js$/)) {
newElement = document.createElement('script');
newElement.src = url;
} else if (url.match(/css$/)) {
newElement = document.createElement('link');
newElement.rel = "stylesheet";
newElement.href = url;
}
document.head.appendChild(newElement);
},
async loadLibraryByName(name) {
let libraries = await this.getLibraries();
let library = libraries.find(lib => lib.name === name);
await this.loadLibraryByURL(library.latest);
this.loadedLibraries.push(library);
console.log(`%cLoaded ${name}`, "font-style: italic");
},
async loadLibrary(library) {
await this.loadLibraryByName(library.name);
this.search = '';
},
async launchBlankPage(libraries) {
let page = this.pageWithLibraries(libraries);
this.launchWebpage(page);
},
pageWithLibraries(libraries) {
let scripts = libraries.map(lib=>`<script src="${lib.latest}"></script>`).join('\n');
let names = libraries.map(lib=>`<div>${lib.name}</div>`).join('\n');
return `
<html>
<head>
${scripts}
</head>
<body>
The following scripts are loaded, and accessible from the console:
${names}
</body>
</html>
`;
},
async launchWebpage(html) {
let blob = new window.Blob([html], {type: 'text/html'});
let url = window.URL.createObjectURL(blob);
window.open(url);
},
open(type) {
if(type=='github') window.open('https://github.com/lunaroyster/console');
if(type=='twitter') window.open('https://twitter.com/itsarnavb/');
},
refresh() {
document.location.reload();
},
},
computed: {
resultsMode() {
return (this.results.length > 0) || (this.loadedLibraries.length > 0);
},
},
watch: {
search(newTerm, oldTerm) {
this.results = this.fuse.search(newTerm).slice(0, 20);
},
},
});