应用管理 - 快速添加、删除应用
<div class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<a class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" onclick="javascript:openPage('settings.html');">
<i class="mdui-icon material-icons">arrow_back</i>
</a>
<a class="mdui-typo-title">应用</a>
<div class="mdui-toolbar-spacer"></div>
<button class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '添加'}" mdui-dialog="{target: '#addApp'}">
<i class="mdui-icon material-icons mdui-text-color-white">add</i>
</button>
</div>
</div>
<ul class="mdui-list mdui-center" style="max-width: 640px;" id="appList"></ul>
<div style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -114514;" class="mdui-valign" id="noApp">
<div style="text-align: center;width: 100%;">没有已安装的应用。</div>
</div>
<div class="mdui-dialog" id="addApp">
<div class="mdui-dialog-title">添加应用</div>
<div class="mdui-dialog-content">
<form onsubmit="return false;">
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">图标 URL</label>
<input class="mdui-textfield-input" type="url" id="icon" />
<div class="mdui-textfield-error">URL 格式错误</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">名称</label>
<input class="mdui-textfield-input" type="text" id="name" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">URL</label>
<input class="mdui-textfield-input" type="url" id="url" />
<div class="mdui-textfield-error">URL 格式错误</div>
</div>
<div class="mdui-row-xs-2">
<div class="mdui-textfield mdui-textfield-floating-label mdui-col">
<label class="mdui-textfield-label">状态栏背景色</label>
<input class="mdui-textfield-input" type="text" id="color1" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label mdui-col">
<label class="mdui-textfield-label">导航栏背景色</label>
<input class="mdui-textfield-input" type="text" id="color2" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label mdui-col">
<label class="mdui-textfield-label">状态栏文本色</label>
<input class="mdui-textfield-input" type="text" id="textColor1" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label mdui-col">
<label class="mdui-textfield-label">导航栏文本色</label>
<input class="mdui-textfield-input" type="text" id="textColor2" />
</div>
</div>
</form>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
<button class="mdui-btn mdui-ripple" onclick="javascript:addTheApp();" id="addTheApp">确认</button>
</div>
</div>
<script>
//函数：页面跳转
function openPage(url) {
document.documentElement.style.transform = "translateX(-50%)";
document.documentElement.style.opacity = 0;
window.setTimeout(function() {
location.href = url;
}, 300);
}
//获取深色主题设置
if (localStorage.getItem('darkTheme') == 'true') {
document.body.classList.add('mdui-theme-layout-dark');
postScript(function() {
gebi('statusBar').style.background = '#212121';
});
} else {
postScript(function() {
gebi('statusBar').style.background = '#455A64';
});
}
//接入 API：发送 Toast
function postToast(message) {
var postData = {
'type': 'toast',
'message': message
};
window.parent.postMessage(JSON.stringify(postData), '/');
}
//接入 API：执行 JavaScript 脚本
function postScript(script) {
var scriptStr = script.toString();
var postData = {
'type': 'JavaScript',
'script': scriptStr
};
window.parent.postMessage(JSON.stringify(postData), '/');
}
//接入 API：添加应用
function addApp(icon, name, url, color1, color2, textColor1, textColor2) {
var postData = {
'type': 'addApp',
'icon': icon,
'name': name,
'url': url,
'color1': color1,
'color2': color2,
'textColor1': textColor1,
'textColor2': textColor2
};
window.parent.postMessage(JSON.stringify(postData), '/');
}
//接入 API：移除应用
function removeApp(index) {
var postData = {
'type': 'removeApp',
'index': index
};
window.parent.postMessage(JSON.stringify(postData), '/');
}
//事件：页面加载完成
window.onload = function() {
freshApps();
};
//函数：刷新应用列表
function freshApps() {
if (localStorage.getItem('apps') == '') {
var apps = [];
} else {
apps = JSON.parse(localStorage.getItem('apps'));
document.getElementById('noApp').style.opacity = 0;
}
document.getElementById('appList').innerHTML = '';
apps.forEach(function(item, index) {
document.getElementById('appList').innerHTML += `<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar" style="border-radius: 8px;">
<img src="${item[0]}" style="border-radius: 8px;"/>
</div>
<div class="mdui-list-item-content">${item[1]}</div>
<i class="mdui-list-item-icon mdui-icon material-icons" onclick="javascript:removeApp(${index});">delete</i>
</li>`;
});
}
//事件：对话框打开完成
document.getElementById('addApp').addEventListener('opened.mdui.dialog', function() {
document.getElementById('icon').value = 'https://';
document.getElementById('name').value = '';
document.getElementById('url').value = 'https://';
document.getElementById('color1').value = '#000';
document.getElementById('color2').value = '#000';
document.getElementById('textColor1').value = '#fff';
document.getElementById('textColor2').value = '#fff';
document.getElementById('url').focus();
document.getElementById('color1').focus();
document.getElementById('color2').focus();
document.getElementById('textColor1').focus();
document.getElementById('textColor2').focus();
document.getElementById('icon').focus();
});
//函数：添加应用
function addTheApp() {
if (document.getElementById('icon').value == '' || document.getElementById('name').value == '' || document.getElementById('url').value == '' || document.getElementById('color1').value == '' || document.getElementById('color2').value == '' || document.getElementById('textColor1').value == '' || document.getElementById('textColor2').value == '') {
postToast('请将表单填充完整');
} else {
addApp(document.getElementById('icon').value, document.getElementById('name').value, document.getElementById('url').value, document.getElementById('color1').value, document.getElementById('color2').value, document.getElementById('textColor1').value, document.getElementById('textColor2').value);
new mdui.Dialog('#addApp').close();
}
}
//事件：在最后一个文本框按下回车键
document.getElementById('textColor2').addEventListener('keyup', function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('addTheApp').click();
}
});
</script>
原文地址: https://www.cveoy.top/t/topic/qzoT 著作权归作者所有。请勿转载和采集!