From a5c4beb61264b7bc3e96f42f4bd1fa09196dc432 Mon Sep 17 00:00:00 2001 From: luddens Date: Fri, 26 Apr 2019 15:15:53 +0200 Subject: [PATCH] erase book in a right-click context menu 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. --- resources/texts/_contentManager.html | 89 ++++++++++++++++++++++++++-- src/contentmanagerview.cpp | 1 + 2 files changed, 85 insertions(+), 5 deletions(-) diff --git a/resources/texts/_contentManager.html b/resources/texts/_contentManager.html index 32df1bc..819e04d 100644 --- a/resources/texts/_contentManager.html +++ b/resources/texts/_contentManager.html @@ -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`; +}; + @@ -218,7 +296,6 @@ details:hover {
- icone poubelle File name Size @@ -227,11 +304,13 @@ details:hover {
+
- - - - + diff --git a/src/contentmanagerview.cpp b/src/contentmanagerview.cpp index 5b40249..fbe9119 100644 --- a/src/contentmanagerview.cpp +++ b/src/contentmanagerview.cpp @@ -10,6 +10,7 @@ ContentManagerView::ContentManagerView(QWidget *parent) auto profile = page()->profile(); auto app = KiwixApp::instance(); profile->installUrlSchemeHandler("zim", app->getSchemeHandler()); + setContextMenuPolicy( Qt::NoContextMenu ); }