confirmDelete: extract, refactor, use in manage
This commit is contained in:
tophf
parent
8bcd7f60c5
commit
b51c264c8b
17
manage.html
17
manage.html
|
|
@ -3,8 +3,9 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title i18n-text="manageTitle"></title>
|
||||
<link href="manage.css" rel="stylesheet">
|
||||
<link href="msgbox/msgbox.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="manage.css">
|
||||
<link rel="stylesheet" href="msgbox/msgbox.css">
|
||||
<link rel="stylesheet" href="msgbox/confirm.css">
|
||||
|
||||
<template data-id="style">
|
||||
<div class="entry">
|
||||
|
|
@ -115,6 +116,17 @@
|
|||
</div>
|
||||
<div id="installed"></div>
|
||||
|
||||
<div id="confirm">
|
||||
<div>
|
||||
<b>Style's Name</b>
|
||||
<span i18n-text="deleteStyleConfirm"></span>
|
||||
<div>
|
||||
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
||||
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
||||
<symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8">
|
||||
<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
|
||||
|
|
@ -124,6 +136,7 @@
|
|||
<script src="manage.js"></script>
|
||||
<script src="backup/fileSaveLoad.js"></script>
|
||||
<script src="msgbox/msgbox.js"></script>
|
||||
<script src="msgbox/confirm.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ function createStyleElement(style) {
|
|||
$('.disable', entry).onclick = EntryOnClick.toggle;
|
||||
$('.check-update', entry).onclick = EntryOnClick.check;
|
||||
$('.update', entry).onclick = EntryOnClick.update;
|
||||
$('.delete', entry).onclick = EntryOnClick.delete;
|
||||
$('.delete', entry).onclick = event => confirmDelete(event, {float: true});
|
||||
return entry;
|
||||
}
|
||||
|
||||
|
|
@ -224,13 +224,6 @@ class EntryOnClick {
|
|||
}));
|
||||
}
|
||||
|
||||
static delete(event) {
|
||||
if (confirm(t('deleteStyleConfirm'))) {
|
||||
deleteStyle(getClickedStyleId(event))
|
||||
.then(handleDelete);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
80
msgbox/confirm.css
Normal file
80
msgbox/confirm.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
#confirm,
|
||||
#confirm > div > span {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#confirm {
|
||||
z-index: 2147483647;
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
#confirm.lights-on {
|
||||
animation: lights-on .25s ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
#confirm.lights-on > div{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#confirm[data-display=true] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#confirm > div {
|
||||
width: 80vw;
|
||||
max-width: 16em;
|
||||
min-height: 8em;
|
||||
max-height: 80vh;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: solid 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#confirm > div > span {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#confirm > div > b {
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#confirm > div > div {
|
||||
padding: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@keyframes lights-off {
|
||||
from {
|
||||
background-color: transparent;
|
||||
}
|
||||
to {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lights-on {
|
||||
from {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
53
msgbox/confirm.js
Normal file
53
msgbox/confirm.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
function confirmDelete(event, {float = false} = {}) {
|
||||
const id = getClickedStyleId(event);
|
||||
const box = $('#confirm');
|
||||
box.dataset.id = id;
|
||||
box.dataset.display = true;
|
||||
box.style.cssText = '';
|
||||
$('b', box).textContent = ((cachedStyles.byId.get(id) || {}).style || {}).name;
|
||||
if (float) {
|
||||
const GAP = 50;
|
||||
const {width:W, height:H} = box.firstElementChild.getBoundingClientRect();
|
||||
const {left:L, top:T, right:R, bottom:B} = event.target.getBoundingClientRect();
|
||||
Object.assign(box.style, {
|
||||
paddingTop: (Math.min(T - H/2, innerHeight - H) - GAP) + 'px',
|
||||
paddingLeft: (Math.min(L - W/2, innerWidth - W) - GAP) + 'px',
|
||||
paddingRight: (innerWidth - Math.max(R + W/2, W) - GAP) + 'px',
|
||||
paddingBottom: (innerHeight - Math.max(B + H/2, H) - GAP) + 'px',
|
||||
});
|
||||
}
|
||||
let resolveMe;
|
||||
$('[data-cmd="ok"]', box).onclick = event => doDelete(true);
|
||||
$('[data-cmd="cancel"]', box).onclick = event => doDelete(false);
|
||||
window.addEventListener('keydown', onKey);
|
||||
|
||||
const stopScroll = {x: scrollX, y: scrollY};
|
||||
window.addEventListener('scroll', preventScroll);
|
||||
|
||||
return new Promise(resolve => resolveMe = resolve);
|
||||
|
||||
function doDelete(confirmed) {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
window.removeEventListener('scroll', preventScroll);
|
||||
box.classList.add('lights-on');
|
||||
box.addEventListener('animationend', function _() {
|
||||
box.removeEventListener('animationend', _);
|
||||
box.dataset.display = false;
|
||||
box.classList.remove('lights-on');
|
||||
});
|
||||
Promise.resolve(confirmed && deleteStyle(id))
|
||||
.then(resolveMe);
|
||||
}
|
||||
|
||||
function onKey(event) {
|
||||
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
||||
&& (event.keyCode == 13 || event.keyCode == 27)) {
|
||||
event.preventDefault();
|
||||
doDelete(event.keyCode == 13);
|
||||
}
|
||||
}
|
||||
|
||||
function preventScroll() {
|
||||
window.scrollTo(stopScroll.x, stopScroll.y);
|
||||
}
|
||||
}
|
||||
45
popup.css
45
popup.css
|
|
@ -211,49 +211,4 @@ body>div:not(#installed) {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 5px;
|
||||
}
|
||||
/* confirm */
|
||||
#confirm,
|
||||
#confirm>div>span {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#confirm {
|
||||
z-index: 2147483647;
|
||||
display: none; /* flex */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0!important;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
#confirm[data-display=true] {
|
||||
display: flex;
|
||||
}
|
||||
#confirm>div {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
max-height: 80%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: solid 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#confirm>div>span {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#confirm>div>b {
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#confirm>div>div {
|
||||
padding: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
|
|
|||
16
popup.html
16
popup.html
|
|
@ -3,9 +3,10 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<link rel="stylesheet" href="msgbox/confirm.css">
|
||||
|
||||
<template data-id="style">
|
||||
<div>
|
||||
<div class="entry">
|
||||
<div class="left-gutter">
|
||||
<input class="checker" type="checkbox">
|
||||
</div>
|
||||
|
|
@ -33,11 +34,17 @@
|
|||
<a class="write-style-link"></a>
|
||||
</template>
|
||||
|
||||
<template data-id="noStyles">
|
||||
<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
|
||||
</template>
|
||||
|
||||
<script src="localization.js"></script>
|
||||
<script src="health.js"></script>
|
||||
<script src="storage.js"></script>
|
||||
<script src="messaging.js"></script>
|
||||
<script src="apply.js"></script>
|
||||
<script src="msgbox/confirm.js"></script>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -48,14 +55,15 @@
|
|||
<b>Style's Name</b>
|
||||
<span i18n-text="deleteStyleConfirm"></span>
|
||||
<div>
|
||||
<input type="button" i18n-value="confirmCancel" data-cmd="cancel">
|
||||
<input type="button" i18n-value="confirmDelete" data-cmd="ok">
|
||||
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
||||
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unavailable">
|
||||
<div class="main-controls"><span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
|
||||
<div class="main-controls">
|
||||
<span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="installed"></div>
|
||||
|
|
|
|||
42
popup.js
42
popup.js
|
|
@ -37,23 +37,6 @@ function initPopup(url) {
|
|||
document.body.style.width =
|
||||
Math.max(200, Math.min(800, Number(localStorage.popupWidth) || 246)) + 'px';
|
||||
|
||||
// confirm dialog
|
||||
$('#confirm').onclick = e => {
|
||||
const cmd = e.target.dataset.cmd;
|
||||
if (cmd === 'ok') {
|
||||
deleteStyle($('#confirm').dataset.id).then(() => {
|
||||
// update view with 'No styles installed for this site' message
|
||||
if ($('#installed').children.length === 0) {
|
||||
showStyles([]);
|
||||
}
|
||||
});
|
||||
}
|
||||
//
|
||||
if (cmd) {
|
||||
$('#confirm').dataset.display = false;
|
||||
}
|
||||
};
|
||||
|
||||
// action buttons
|
||||
$('#disableAll').onchange = () =>
|
||||
installed.classList.toggle('disabled', prefs.get('disableAll'));
|
||||
|
|
@ -132,8 +115,7 @@ function initPopup(url) {
|
|||
|
||||
function showStyles(styles) {
|
||||
if (!styles.length) {
|
||||
installed.innerHTML =
|
||||
`<div class="entry" id="no-styles">${t('noStylesForSite')}</div>`;
|
||||
installed.innerHTML = template.noStyles.outerHTML;
|
||||
} else {
|
||||
const enabledFirst = prefs.get('popup.enabledFirst');
|
||||
styles.sort((a, b) =>
|
||||
|
|
@ -168,14 +150,19 @@ function createStyleElement(style) {
|
|||
.then(handleUpdate);
|
||||
},
|
||||
deleteClick(event) {
|
||||
doDelete(event);
|
||||
confirmDelete(event).then(() => {
|
||||
// update view with 'No styles installed for this site' message
|
||||
if (!installed.children.length) {
|
||||
showStyles([]);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const entry = template.style.cloneNode(true);
|
||||
entry.setAttribute('style-id', style.id);
|
||||
Object.assign(entry, {
|
||||
styleId: style.id,
|
||||
className: ['entry', style.enabled ? 'enabled' : 'disabled'].join(' '),
|
||||
className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
|
||||
onmousedown: openEditorOnMiddleclick,
|
||||
onauxclick: openEditorOnMiddleclick,
|
||||
});
|
||||
|
|
@ -209,18 +196,13 @@ function createStyleElement(style) {
|
|||
}
|
||||
|
||||
|
||||
function doDelete(event) {
|
||||
$('#confirm').dataset.display = true;
|
||||
const id = getClickedStyleId(event);
|
||||
$('#confirm b').textContent =
|
||||
$(`[style-id="${id}"] label`).textContent;
|
||||
$('#confirm').dataset.id = id;
|
||||
function getClickedStyleId(event) {
|
||||
return (getClickedStyleElement(event) || {}).styleId;
|
||||
}
|
||||
|
||||
|
||||
function getClickedStyleId(event) {
|
||||
const entry = event.target.closest('.entry');
|
||||
return entry ? entry.styleId : null;
|
||||
function getClickedStyleElement(event) {
|
||||
return event.target.closest('.entry');
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user