open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

confirmDelete: extract, refactor, use in manage

Browse Source
This commit is contained in:
tophf 2017-03-25 06:04:24 +03:00
parent 8bcd7f60c5
commit b51c264c8b
7 changed files with 173 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
manage.html
View File

@ -3,8 +3,9 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title i18n-text="manageTitle"></title> <title i18n-text="manageTitle"></title>
<link href="manage.css" rel="stylesheet"> <link rel="stylesheet" href="manage.css">
<link href="msgbox/msgbox.css" rel="stylesheet"> <link rel="stylesheet" href="msgbox/msgbox.css">
<link rel="stylesheet" href="msgbox/confirm.css">
<template data-id="style"> <template data-id="style">
<div class="entry"> <div class="entry">
@ -115,6 +116,17 @@
</div> </div>
<div id="installed"></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"> <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"> <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> <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="manage.js"></script>
<script src="backup/fileSaveLoad.js"></script> <script src="backup/fileSaveLoad.js"></script>
<script src="msgbox/msgbox.js"></script> <script src="msgbox/msgbox.js"></script>
<script src="msgbox/confirm.js"></script>
</body> </body>
</html> </html>

9
manage.js
View File

@ -172,7 +172,7 @@ function createStyleElement(style) {
$('.disable', entry).onclick = EntryOnClick.toggle; $('.disable', entry).onclick = EntryOnClick.toggle;
$('.check-update', entry).onclick = EntryOnClick.check; $('.check-update', entry).onclick = EntryOnClick.check;
$('.update', entry).onclick = EntryOnClick.update; $('.update', entry).onclick = EntryOnClick.update;
$('.delete', entry).onclick = EntryOnClick.delete; $('.delete', entry).onclick = event => confirmDelete(event, {float: true});
return entry; 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
View 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
View 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
View File

@ -211,49 +211,4 @@ body>div:not(#installed) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding-right: 5px; 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
View File

@ -3,9 +3,10 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="popup.css"> <link rel="stylesheet" href="popup.css">
<link rel="stylesheet" href="msgbox/confirm.css">
<template data-id="style"> <template data-id="style">
<div> <div class="entry">
<div class="left-gutter"> <div class="left-gutter">
<input class="checker" type="checkbox"> <input class="checker" type="checkbox">
</div> </div>
@ -33,11 +34,17 @@
<a class="write-style-link"></a> <a class="write-style-link"></a>
</template> </template>
<template data-id="noStyles">
<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
</template>
<script src="localization.js"></script> <script src="localization.js"></script>
<script src="health.js"></script> <script src="health.js"></script>
<script src="storage.js"></script> <script src="storage.js"></script>
<script src="messaging.js"></script> <script src="messaging.js"></script>
<script src="apply.js"></script> <script src="apply.js"></script>
<script src="msgbox/confirm.js"></script>
<script src="popup.js"></script> <script src="popup.js"></script>
</head> </head>
@ -48,14 +55,15 @@
<b>Style's Name</b> <b>Style's Name</b>
<span i18n-text="deleteStyleConfirm"></span> <span i18n-text="deleteStyleConfirm"></span>
<div> <div>
<input type="button" i18n-value="confirmCancel" data-cmd="cancel"> <button i18n-text="confirmCancel" data-cmd="cancel"></button>
<input type="button" i18n-value="confirmDelete" data-cmd="ok"> <button i18n-text="confirmDelete" data-cmd="ok"></button>
</div> </div>
</div> </div>
</div> </div>
<div id="unavailable"> <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> </div>
<div id="installed"></div> <div id="installed"></div>

42
popup.js
View File

@ -37,23 +37,6 @@ function initPopup(url) {
document.body.style.width = document.body.style.width =
Math.max(200, Math.min(800, Number(localStorage.popupWidth) || 246)) + 'px'; 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 // action buttons
$('#disableAll').onchange = () => $('#disableAll').onchange = () =>
installed.classList.toggle('disabled', prefs.get('disableAll')); installed.classList.toggle('disabled', prefs.get('disableAll'));
@ -132,8 +115,7 @@ function initPopup(url) {
function showStyles(styles) { function showStyles(styles) {
if (!styles.length) { if (!styles.length) {
installed.innerHTML = installed.innerHTML = template.noStyles.outerHTML;
`<div class="entry" id="no-styles">${t('noStylesForSite')}</div>`;
} else { } else {
const enabledFirst = prefs.get('popup.enabledFirst'); const enabledFirst = prefs.get('popup.enabledFirst');
styles.sort((a, b) => styles.sort((a, b) =>
@ -168,14 +150,19 @@ function createStyleElement(style) {
.then(handleUpdate); .then(handleUpdate);
}, },
deleteClick(event) { 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); const entry = template.style.cloneNode(true);
entry.setAttribute('style-id', style.id); entry.setAttribute('style-id', style.id);
Object.assign(entry, { Object.assign(entry, {
styleId: style.id, styleId: style.id,
className: ['entry', style.enabled ? 'enabled' : 'disabled'].join(' '), className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
onmousedown: openEditorOnMiddleclick, onmousedown: openEditorOnMiddleclick,
onauxclick: openEditorOnMiddleclick, onauxclick: openEditorOnMiddleclick,
}); });
@ -209,18 +196,13 @@ function createStyleElement(style) {
} }
function doDelete(event) { function getClickedStyleId(event) {
$('#confirm').dataset.display = true; return (getClickedStyleElement(event) || {}).styleId;
const id = getClickedStyleId(event);
$('#confirm b').textContent =
$(`[style-id="${id}"] label`).textContent;
$('#confirm').dataset.id = id;
} }
function getClickedStyleId(event) { function getClickedStyleElement(event) {
const entry = event.target.closest('.entry'); return event.target.closest('.entry');
return entry ? entry.styleId : null;
} }