mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 16:11:20 -08:00
修改动态加载lib
This commit is contained in:
Harvey Zack committed
1 parent
4ffc46a2c4
commit
24e9c67718
5 files changed
+157
-82
No files matched your search
+139
-71
@@ -1,83 +1,151 @@
|
||||
(function(win) {
|
||||
var $code = document.querySelector('.code');
|
||||
var $run = document.querySelector('.run');
|
||||
var fileCode = '';
|
||||
var $code = document.querySelector('.code');
|
||||
var $run = document.querySelector('.run');
|
||||
var $lib = document.querySelector('.lib');
|
||||
var defaultLib = './js/artplayer-plugin-subtitle.js';
|
||||
var loaddLib = [];
|
||||
|
||||
consola.creat({
|
||||
target: '.console',
|
||||
size: '100%',
|
||||
zIndex: 99
|
||||
});
|
||||
|
||||
var mirror = CodeMirror($code, {
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
matchBrackets: true,
|
||||
value: ''
|
||||
});
|
||||
|
||||
function initApp(app) {
|
||||
consola.clean();
|
||||
Artplayer.config.video.events.forEach(item => {
|
||||
app.on('video:' + item, event => {
|
||||
console.log('video: ' + event.type);
|
||||
});
|
||||
consola.creat({
|
||||
target: '.console',
|
||||
size: '100%',
|
||||
zIndex: 99,
|
||||
});
|
||||
}
|
||||
|
||||
function getURLParameters(url) {
|
||||
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
|
||||
(a, v) => (
|
||||
(a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
|
||||
),
|
||||
{}
|
||||
);
|
||||
}
|
||||
var mirror = CodeMirror($code, {
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
matchBrackets: true,
|
||||
value: '',
|
||||
});
|
||||
|
||||
function loadCode(url) {
|
||||
const { code } = getURLParameters(window.location.href);
|
||||
if (code) {
|
||||
mirror.setValue(decodeURIComponent(code).trim());
|
||||
runCode();
|
||||
} else {
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
var code = text.trim();
|
||||
mirror.setValue(code);
|
||||
runCode();
|
||||
fileCode = code;
|
||||
return text;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err.message);
|
||||
function initArt(art) {
|
||||
Artplayer.config.video.events.forEach(item => {
|
||||
art.on('video:' + item, event => {
|
||||
console.log('video: ' + event.type);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function runCode() {
|
||||
Artplayer.instances.forEach(ins => {
|
||||
ins.destroy(true);
|
||||
});
|
||||
var code = mirror.getValue();
|
||||
eval(code);
|
||||
initApp(Artplayer.instances[0]);
|
||||
}
|
||||
|
||||
$run.addEventListener('click', function(e) {
|
||||
runCode();
|
||||
if (fileCode !== mirror.getValue()) {
|
||||
const code = encodeURIComponent(mirror.getValue());
|
||||
const url = window.location.origin + window.location.pathname + '?code=' + code;
|
||||
history.pushState(null, null, url);
|
||||
function getURLParameters(url) {
|
||||
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
|
||||
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
|
||||
{},
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
win.addEventListener('error', err => {
|
||||
console.error(err.message);
|
||||
});
|
||||
function getExt(url) {
|
||||
if (url.includes('?')) {
|
||||
return getExt(url.split('?')[0]);
|
||||
}
|
||||
|
||||
win.loadCode = loadCode;
|
||||
if (url.includes('#')) {
|
||||
return getExt(url.split('#')[0]);
|
||||
}
|
||||
|
||||
return url
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.split('.')
|
||||
.pop();
|
||||
}
|
||||
|
||||
function loadScript(url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
script.onload = function() {
|
||||
resolve(url);
|
||||
};
|
||||
document.querySelector('head').appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
function loadStyle(url) {
|
||||
return new Promise(function(resolve) {
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.src = url;
|
||||
document.querySelector('head').appendChild(style);
|
||||
resolve(url);
|
||||
});
|
||||
}
|
||||
|
||||
function loadLib(libs = defaultLib) {
|
||||
var libPromise = [];
|
||||
libs.split(',')
|
||||
.filter(function(url) {
|
||||
return !loaddLib.includes(url);
|
||||
})
|
||||
.forEach(function(url) {
|
||||
var ext = getExt(url);
|
||||
if (ext === 'js') {
|
||||
libPromise.push(loadScript(url));
|
||||
} else if (ext === 'css') {
|
||||
libPromise.push(loadStyle(url));
|
||||
}
|
||||
});
|
||||
$lib.value = decodeURIComponent(libs);
|
||||
return Promise.all(libPromise);
|
||||
}
|
||||
|
||||
function loadCode(code) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (code) {
|
||||
mirror.setValue(decodeURIComponent(code).trim());
|
||||
runCode();
|
||||
resolve(code);
|
||||
} else {
|
||||
fetch('./js/example.js')
|
||||
.then(response => {
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
mirror.setValue(text);
|
||||
runCode();
|
||||
resolve(text);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initApp() {
|
||||
const { code, libs } = getURLParameters(window.location.href);
|
||||
loadLib(libs)
|
||||
.then(function(result) {
|
||||
loaddLib = loaddLib.concat(result);
|
||||
loadCode(code).then(() => {
|
||||
console.info('App initialization completed');
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err.message);
|
||||
});
|
||||
}
|
||||
|
||||
function runCode() {
|
||||
Artplayer.instances.forEach(art => {
|
||||
art.destroy(true);
|
||||
});
|
||||
var code = mirror.getValue();
|
||||
eval(code);
|
||||
initArt(Artplayer.instances[0]);
|
||||
}
|
||||
|
||||
$run.addEventListener('click', function(e) {
|
||||
runCode();
|
||||
const libs = encodeURIComponent($lib.value);
|
||||
const code = encodeURIComponent(mirror.getValue());
|
||||
const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
|
||||
history.pushState(null, null, url);
|
||||
});
|
||||
|
||||
win.addEventListener('error', err => {
|
||||
console.error(err.message);
|
||||
});
|
||||
|
||||
initApp();
|
||||
})(window);
|
||||
Reference in new issue
Block a user