diff --git a/public/css/app.css b/public/css/app.css
index 060d5ff..7d38114 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -38,7 +38,6 @@
font-size: 30px;
cursor: move;
background: rgb(255,255,255,0.6);
- opacity: 0;
}
.canvas-container .btn-rotate, .canvas-container .btn-delete, .canvas-container .btn-select, .canvas-container .btn-download, .canvas-container .btn-restore {
@@ -46,10 +45,6 @@
font-size: 25px;
}
-.canvas-container:hover .btn-drag, .canvas-container:hover .btn-rotate, .canvas-container:hover .btn-delete, .canvas-container:hover .btn-select, .canvas-container:hover .btn-download, .canvas-container:hover .btn-restore {
- opacity: 1;
-}
-
.border-transparent {
border-color: transparent !important;
}
diff --git a/public/js/organization.js b/public/js/organization.js
index a853103..3c4e4cc 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -65,36 +65,29 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
let pageHTML = '
';
pageHTML += '
';
- pageHTML += '
';
- pageHTML += '
';
+ pageHTML += '
';
+ pageHTML += '
';
pageHTML += '
';
- pageHTML += '
';
- pageHTML += '
';
+ pageHTML += '
';
+ pageHTML += '
';
pageHTML += '
';
pageHTML += '
Page '+page.pageNumber+' - '+filename+'
';
pageHTML += '
';
pageHTML += '
';
pageHTML += '
';
+ pageHTML += '
';
pageHTML += '
';
document.getElementById('container-pages').insertAdjacentHTML('beforeend', pageHTML);
let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.addEventListener('mouseenter', function(e) {
- this.querySelector('.page-title').classList.remove('d-none');
- if(this.querySelector('input[type=checkbox].input-select').checked) {
- return;
- }
- this.classList.add('border-secondary', 'bg-secondary');
- this.classList.remove('border-transparent', 'bg-transparent');
+ this.querySelector('input[type=checkbox].input-hover').checked = true;
+ updatePageState(this);
});
canvasContainer.addEventListener('mouseleave', function(e) {
- this.querySelector('.page-title').classList.add('d-none');
- if(this.querySelector('input[type=checkbox].input-select').checked) {
- return;
- }
- this.classList.remove('border-secondary', 'bg-secondary');
- this.classList.add('border-transparent', 'bg-transparent');
+ this.querySelector('input[type=checkbox].input-hover').checked = false;
+ updatePageState(this);
});
canvasContainer.addEventListener('dragstart', function(e) {
this.querySelector('.container-resize').classList.add('d-none');
@@ -218,31 +211,48 @@ var isPageDeleted = function(page) {
return !page.querySelector('input[type=checkbox].checkbox-page').checked;
}
+var isPageHover = function(page) {
+
+ return page.querySelector('input[type=checkbox].input-hover').checked;
+}
+
var updatePageState = function(page) {
- page.classList.remove('border-primary', 'shadow-sm', 'bg-primary');
+ page.classList.remove('border-primary', 'shadow-sm', 'bg-primary', 'border-secondary', 'bg-secondary');
page.classList.add('border-transparent', 'bg-transparent');
page.querySelector('.canvas-pdf').style.opacity = '1'
- page.querySelector('.btn-rotate').classList.remove('d-none');
- page.querySelector('.btn-download').classList.remove('d-none');
- page.querySelector('.btn-delete').classList.remove('d-none');
- page.querySelector('.btn-select').classList.remove('d-none', 'text-primary', 'opacity-100');
- page.querySelector('.btn-drag').classList.remove('d-none');
+ page.querySelector('.btn-rotate').classList.add('d-none');
+ page.querySelector('.btn-download').classList.add('d-none');
+ page.querySelector('.btn-delete').classList.add('d-none');
+ page.querySelector('.btn-select').classList.add('d-none');
+ page.querySelector('.btn-select').classList.remove('text-primary');
+ page.querySelector('.btn-drag').classList.add('d-none');
page.querySelector('.btn-restore').classList.add('d-none');
+ page.querySelector('.page-title').classList.add('d-none');
if(isPageDeleted(page)) {
page.querySelector('.canvas-pdf').style.opacity = '0.15';
- page.querySelector('.btn-rotate').classList.add('d-none');
- page.querySelector('.btn-download').classList.add('d-none');
- page.querySelector('.btn-delete').classList.add('d-none');
- page.querySelector('.btn-select').classList.add('d-none');
- page.querySelector('.btn-drag').classList.add('d-none');
+ }
+
+ if(isPageHover(page) && !isPageDeleted(page)) {
+ page.querySelector('.page-title').classList.remove('d-none');
+ page.classList.add('border-secondary', 'bg-secondary');
+ page.classList.remove('border-transparent', 'bg-transparent');
+ page.querySelector('.btn-rotate').classList.remove('d-none');
+ page.querySelector('.btn-download').classList.remove('d-none');
+ page.querySelector('.btn-delete').classList.remove('d-none');
+ page.querySelector('.btn-select').classList.remove('d-none')
+ page.querySelector('.btn-drag').classList.remove('d-none');
+ }
+
+ if(isPageHover(page) && isPageDeleted(page)) {
page.querySelector('.btn-restore').classList.remove('d-none');
}
if(isPageSelected(page)) {
page.classList.add('border-primary', 'shadow-sm', 'bg-primary');
page.classList.remove('border-transparent', 'bg-transparent', 'border-secondary', 'bg-secondary');
- page.querySelector('.btn-select').classList.add('text-primary', 'opacity-100');
+ page.querySelector('.btn-select').classList.add('text-primary');
+ page.querySelector('.btn-select').classList.remove('d-none')
}
}