kiwix/kiwix-desktop
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-desktop.git synced 2025-09-22 03:26:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

erase book in a right-click context menu

Browse Source 
Foreach "summary" element that represents a book, Vue.js binds its id with
the book's id.

When a "contextmenu" event (right-click) is emitted, it saves the mouse's
coordinates to set the contextmenu's position and display it if the cursor
is on a book.

The "displayMenu(book)" function displays the contextmenu if the "book"
parameter isn't null. It handles which options to show too (for now there is
the "delete" option only).

The delete option calls "eraseBook(book)" that uses
"getBookFromMousePosition()" to know which book has to be deleted.

"getBookFromMousePosition(info)" gets all elements at the mouse's
position, selects a "summary" element which has the "book-summary" class if
there is one, to get the book requested thanks to the id bind by Vue.js and
return it.
This commit is contained in:
luddens 2019-04-26 15:15:53 +02:00
parent 2848fc1e43
commit a5c4beb612
2 changed files with 85 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
resources/texts/_contentManager.html
View File

@ -81,6 +81,24 @@ function init() {
var a = books.slice(0, nb);
return a;
},
getBookFromMousePosition : function() {
var elements = document.elementsFromPoint(mouseX, mouseY);
var bookId = null;
for(var i = 0; i < elements.length; i++) {
if (elements[i].localName == "summary" && elements[i].classList.contains("book-summary")) {
bookId = elements[i].id;
break;
}
}
var book = null;
for(var i = 0; i < app.books.length; i++) {
if (app.books[i]["id"] == bookId) {
book = app.books[i];
break;
}
}
return book;
},
niceBytes : niceBytes
}
});
@ -100,6 +118,39 @@ function scrolled(e) {
app.displayedBooksNb = Math.min(app.displayedBooksNb+20, app.books.length);
}
}
window.addEventListener("click", e => {
if (menuVisible)
displayMenu(null);
});
var mouseX, mouseY = 0;
window.addEventListener("contextmenu", e => {
e.preventDefault();
mouseX = e.pageX;
mouseY = e.pageY;
setContextMenuPosition();
var book = app.getBookFromMousePosition();
displayMenu(book);
});
var menuVisible = false;
function displayMenu(book) {
var menu = document.getElementById("menu");
menu.style.display = (book) ? "block" : "none";
menuVisible = (book) ? true : false;
if (!book)
return;
var localElement = document.getElementsByClassName("local-option")[0];
localElement.style.display = (book.path) ? "block" : "none";
};
function setContextMenuPosition() {
var menu = document.getElementById("menu");
menu.style.left = `${mouseX}px`;
menu.style.top = `${mouseY}px`;
};
</script>
<style>
html, body {
@ -207,6 +258,33 @@ details:hover {
background-color: #d9e9ff;
cursor: pointer;
}
.menu {
/* width: 120px; */
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: fixed;
display: none;
z-index: 99999999999999;
background-color: white;
}
.menu-options {
list-style: none;
padding: 0 0 0 0;
margin: 2px 0px 2px;
}
.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
}
.menu-option:hover {
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body onload="init()">
@ -218,7 +296,6 @@ details:hover {
</div>
<div id="bookTable">
<div class="header">
<span class="tablecell cell0">icone poubelle</span>
<span class="tablecell cell0"></span>
<span class="tablecell cell1">File name</span>
<span class="tablecell cell2">Size</span>
@ -227,11 +304,13 @@ details:hover {
<span class="tablecell cell5"></span>
</div>
<div id="bookList" onscroll=scrolled(this)>
<div id="menu" class="menu">
<ul class="menu-options local-option">
<li v-on:click="eraseBook(getBookFromMousePosition())" class="menu-option">Delete</li>
</ul>
</div>
<details v-for="book in displayedBooks(books, displayedBooksNb)" class="book">
<summary class="tablerow">
<span class="tablecell cell0">
<button v-if="book.path" v-on:click="eraseBook(book)">Delete</button>
</span>
<summary v-bind:id="book.id" class="tablerow book-summary">
<span class="tablecell cell0">
<img v-if="book.faviconUrl" v-bind:src="'http://' + book.faviconUrl" />
<img v-else-if="book.faviconMimeType" v-bind:src="'zim://' + book.id + '.favicon.meta'" />

1
src/contentmanagerview.cpp
View File

@ -10,6 +10,7 @@ ContentManagerView::ContentManagerView(QWidget *parent)
auto profile = page()->profile();
auto app = KiwixApp::instance();
profile->installUrlSchemeHandler("zim", app->getSchemeHandler());
setContextMenuPolicy( Qt::NoContextMenu );
}