diff --git a/.gitignore b/.gitignore index 19ec355..4ce3579 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ *.exe node_modules *.code-workspace +*.db +中文/1/2/Stemmeta.db +中文/1/Stemmeta.db +中文/Stemmeta.db diff --git a/Stemconfig.json b/Stemconfig.json index 661bb5e..5651d8c 100644 --- a/Stemconfig.json +++ b/Stemconfig.json @@ -1,7 +1,9 @@ { "TemplateDir": "./template/", "StaticDir": "./static/", + "StemdbStorage":"./data", "StemdbDir":"./data/Stemdb", + "StemMGDir":"./data/MonitoredGroups", "StartDir": "./", "Debugmode": 1, "Width": 1280, diff --git a/Stemmeta.db b/Stemmeta.db deleted file mode 100644 index e600593..0000000 Binary files a/Stemmeta.db and /dev/null differ diff --git a/data/Stemdb.db b/data/Stemdb.db deleted file mode 100644 index a2f9834..0000000 Binary files a/data/Stemdb.db and /dev/null differ diff --git a/log.md b/log.md index 5e312b1..9c6fef6 100644 --- a/log.md +++ b/log.md @@ -1,7 +1,188 @@ # Stembase File tagging system - +--- + ## 2023.05.04 version 0.5.8.1 + -- Rewrite function + # Changed + 1. Rewrite the behavior of uxContextMenuRemove in custom event to fix prority bug + -- finished +--- + ## 2023.05.03 version 0.5.8 + -- Rewrite function + -- Function implementation + -- Clear wasted codes + # Added + 1. Add customized option hide function(contextmenu) globally + -- finished + 2. Add global context menu target select function with exception handler + -- finished + 3. Add contextmenu create rxception handler + -- finished + 4. Add contextmenu hide setting applier + -- finished + # Changed + 1. Rewrite contextmenu removal mechanism + -- finished + 2. Rewrite contextmenu function in delegation way and transfer into index-ux + -- finished + 3. Merge contextmenu related function + -- finished +--- + ## 2023.05.02 version 0.5.7.1 + -- Bug Fix + -- Remove some wasted codes + # Fixed + 1. Fix that remove function not refresh + -- finished + 2. Fix data can be duplicated in monitored group + -- finished + 3. Fix collapse height auto adjustment bug in some function + 3.1 mntremove + 3.2 drop + 3.3 mntmain + -- finished +--- + ## 2023.04.28 version 0.5.7 + -- Function implementation + -- Function rewiring + -- Style change + -- Clear wasted codes + # Added + 1. Updating monitored group database when dragging in + -- finished + 2. Auto load monitored data when app ready + -- finished + 3. Basic structure of contextmenu function + -- finished + 4. Add contextmenu selected function + -- finished + # Changed + 1. Merging highlight monitored group function into mntstyle + -- finished + 2. Build mntbuild to control the processing of mnt building + -- finished + 3. Add submenu hover effect + -- finished + 4. Rebuild mntcheck to handle all class type check + -- finished + 5. Rebuild mntselected to handle all selected related worked + -- finished +--- + ## 2023.04.28 version 0.5.6.2 + -- Bug fix + # Fixed + 1. Fix the incorrect check in mntfunc jump function + -- finished + 2. Fix the incorrect behavior of expanding function + -- finished +--- + ## 2023.04.27 version 0.5.6.1 + -- Bug fix + # Fixed + 1. Auto detect essential folders existence + -- finished + 2. Fix the error in mntmain when no data + -- finished + 3. Fix the unable to open database bug + -- finished +--- + ## 2023.04.26 version 0.5.6 + -- Bug fix + -- Clear wasted codes + # Fixed + 1. Submenu now can correctly positioning + -- finished + 2. Fix the bug that when contextmenu is too low, submenu sink into page bottom + -- finished + 3. Fix the submenu is existed after contextmenu is off. + -- finished +--- + ## 2023.04.25 version 0.5.5.3 + -- Bug fix + # Fixed + 1. Fix the false position value + -- finished + 2. Fix the contextmenu overflow out of page + -- finished + 3. Fix the submenu status is inherit to next contextmenu + -- finished + 4. Fix position is not worked at first click + -- finished +--- + ## 2023.04.25 version 0.5.5.2 + -- Submenu function + # Added + 1. Add multiple layers to contextMenu + -- finished + # Bugged + 1. Submenu position is incorrect + +--- + ## 2023.04.24 version 0.5.5.1 + -- Rewrite function + -- Improve contextMenu positioning accuracy + -- Style change + # Changed + 1. Rewrite function in delegation way + 1.1 mntmenu + -- finished + 2. Improve positioning accuracy of contextMenu in mnt + -- finished +--- + ## 2023.04.20 version 0.5.5 + -- Bug fix + -- Rewrite function + # Fixed + 1. Fix the bug that mntfunc run before mntmain over + -- finished + 2. Fix the bug that drop cannot trigger highlight remove + -- finished + # Changed + 1. Rewrite function in delegation way + 1.1 mntfunc data function + 1.2 mntfunc folder function + 1.3 mntstyle + 1.4 mntfold + -- finished +--- + ## 2023.04.19 version 0.5.4.1 + -- Funcction iplementation + -- Bug fix + -- Code rewrite + -- Remove wasted codes + # Fixed + 1. Fix smooth effect missing bug + -- finished + 2. Fix monitored data highlight effect last permanently + -- finished + # Added + 1. Add expand check in dragging function to prevent collapsing + -- finished + # Changed + 1. Rewrite some codes from flexible to fixed due to css poor behaviour + -- finished +--- + ## 2023.04.18 version 0.5.4 + -- Function re-import + # Added + 1. Fix the dragenter and dragleave bug and re-import resize function + -- finished + 2. Add smooth expansion and collapsing animation to monitored groups + -- finished + +--- + ## 2023.04.17 version 0.5.3.3 + -- Bug fix + -- Style change + # Fixed + 1. Fix the bug that monitored path is highlighted after dropping + -- finished + 2. Fix the bug that all objects in a monitored groups are merged + -- finished + # Changed + 1. When hovering, the header of monitored groups would be highlighted + -- finished --- ## 2023.04.14 version 0.5.3.2 -- Bug fix diff --git a/main.js b/main.js index 4c8cf02..d18fa4e 100644 --- a/main.js +++ b/main.js @@ -1,40 +1,60 @@ -const { app, BrowserWindow, ipcMain, nativeTheme, dialog, session } = require('electron') +const { app, BrowserWindow, ipcMain, dialog, session } = require('electron') const path = require('path') const fs = require('fs') const glob = require('glob') const env = require('./static/js/env.js') const Stemdb= env('StemdbDir') const sqlite3 = require('sqlite3').verbose() -const db = new sqlite3.Database(Stemdb + '.db') + process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' app.allowRendererProcessReuse = false + // Create a new db -db.get('PRAGMA foreign_keys = ON') -db.run(`create table "File" ( - "id" integer not null unique, - "name" text not null unique, - "file" text not null, - primary key("id" autoincrement) -)`,()=>{}) -db.run(`create table "Tag" ( - "id" integer not null unique, - "tag" text not null unique, - primary key("id" autoincrement) -)`,()=>{}) -db.run(`create table "Ref" ( - "id" integer not null unique, - "nameref" text, - "tagref" text, - primary key("id" autoincrement) - foreign key('nameref') references File(name) on delete cascade on update cascade, - foreign key('tagref') references Tag(tag) on delete cascade on update cascade, - unique(nameref,tagref) -)`,()=>{}) -db.run(`create table "Monitor" ( - "id" integer not null unique, - "name" text not null unique, - primary key("id" autoincrement) -)`,()=>{}) +const dbBuild = ()=>{ + const db = new sqlite3.Database(Stemdb + '.db') + db.get('PRAGMA foreign_keys = ON') + db.run(`create table "File" ( + "id" integer not null unique, + "name" text not null unique, + "file" text not null, + primary key("id" autoincrement) + )`,()=>{}) + db.run(`create table "Tag" ( + "id" integer not null unique, + "tag" text not null unique, + primary key("id" autoincrement) + )`,()=>{}) + db.run(`create table "Ref" ( + "id" integer not null unique, + "nameref" text, + "tagref" text, + primary key("id" autoincrement) + foreign key('nameref') references File(name) on delete cascade on update cascade, + foreign key('tagref') references Tag(tag) on delete cascade on update cascade, + unique(nameref,tagref) + )`,()=>{}) + db.run(`create table "Monitor" ( + "id" integer not null unique, + "name" text not null unique, + primary key("id" autoincrement) + )`,()=>{}) + +} +// Check essential folders +const firstBuild = ()=>{ + + const dbStorage = env('StemdbStorage') + const mdbStorage = env('StemMGDir') + + if (!fs.existsSync(dbStorage)){ + fs.mkdir(dbStorage,{recursive:true},()=>{ + if (!fs.existsSync(mdbStorage)){ + fs.mkdir(mdbStorage,{recursive:true},()=>{}) + } + }) + + } +} @@ -75,11 +95,13 @@ exec('NET SESSION', function(err,so,se) { }) */ const init = () =>{ + firstBuild() + dbBuild() const Taskmanager = () =>{ const funcScript = glob.sync(env('StaticDir') + '/js/*.js') funcScript.forEach((i) =>{require(i)}) } - Taskmanager() + Taskmanager() app.whenReady().then(() => { WindowMain() // Prevent from multiple windows create @@ -90,8 +112,11 @@ const init = () =>{ }) }) + } + init() + // Release all resources of the app app.on('window-all-closed', () => { if (process.platform !== 'darwin') { diff --git a/preload.js b/preload.js index a81b8d6..0d2b18d 100644 --- a/preload.js +++ b/preload.js @@ -40,7 +40,10 @@ contextBridge.exposeInMainWorld('tag', { // MonitorSystem contextBridge.exposeInMainWorld('mnt', { - main: () => ipcRenderer.invoke('mnt-main') + main: () => ipcRenderer.invoke('mnt-main'), + load: (i) => ipcRenderer.invoke('mnt-load',i), + remove: (i,j) => ipcRenderer.invoke('mnt-remove',i,j), + update: (i,j) => ipcRenderer.invoke('mnt-update',i,j) }) diff --git a/static/css/hint.css b/static/css/hint.css new file mode 100644 index 0000000..4189c19 --- /dev/null +++ b/static/css/hint.css @@ -0,0 +1,655 @@ +/*! Hint.css - v2.7.0 - 2021-10-01 +* https://kushagra.dev/lab/hint/ +* Copyright (c) 2021 Kushagra Gour */ + +/*-------------------------------------*\ + HINT.css - A CSS tooltip library +\*-------------------------------------*/ +/** + * HINT.css is a tooltip library made in pure CSS. + * + * Source: https://github.com/chinchang/hint.css + * Demo: http://kushagragour.in/lab/hint/ + * + */ +/** + * source: hint-core.scss + * + * Defines the basic styling for the tooltip. + * Each tooltip is made of 2 parts: + * 1) body (:after) + * 2) arrow (:before) + * + * Classes added: + * 1) hint + */ +[class*="hint--"] { + position: relative; + display: inline-block; + /** + * tooltip arrow + */ + /** + * tooltip body + */ } + [class*="hint--"]:before, [class*="hint--"]:after { + position: absolute; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + visibility: hidden; + opacity: 0; + z-index: 1000000; + pointer-events: none; + -webkit-transition: 0.3s ease; + -moz-transition: 0.3s ease; + transition: 0.3s ease; + -webkit-transition-delay: 0ms; + -moz-transition-delay: 0ms; + transition-delay: 0ms; } + [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { + visibility: visible; + opacity: 1; } + [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { + -webkit-transition-delay: 100ms; + -moz-transition-delay: 100ms; + transition-delay: 100ms; } + [class*="hint--"]:before { + content: ''; + position: absolute; + background: transparent; + border: 6px solid transparent; + z-index: 1000001; } + [class*="hint--"]:after { + background: #383838; + color: white; + padding: 8px 10px; + font-size: 12px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 12px; + white-space: pre-wrap; } + [class*="hint--"][aria-label]:after { + content: attr(aria-label); } + [class*="hint--"][data-hint]:after { + content: attr(data-hint); } + +[aria-label='']:before, [aria-label='']:after, +[data-hint='']:before, +[data-hint='']:after { + display: none !important; } + +/** + * source: hint-position.scss + * + * Defines the positoning logic for the tooltips. + * + * Classes added: + * 1) hint--top + * 2) hint--bottom + * 3) hint--left + * 4) hint--right + */ +/** + * set default color for tooltip arrows + */ +.hint--top-left:before { + border-top-color: #383838; } + +.hint--top-right:before { + border-top-color: #383838; } + +.hint--top:before { + border-top-color: #383838; } + +.hint--bottom-left:before { + border-bottom-color: #383838; } + +.hint--bottom-right:before { + border-bottom-color: #383838; } + +.hint--bottom:before { + border-bottom-color: #383838; } + +.hint--left:before { + border-left-color: #383838; } + +.hint--right:before { + border-right-color: #383838; } + +/** + * top tooltip + */ +.hint--top:before { + margin-bottom: -11px; } + +.hint--top:before, .hint--top:after { + bottom: 100%; + left: 50%; } + +.hint--top:before { + left: calc(50% - 6px); } + +.hint--top:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + +.hint--top:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--top:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + +/** + * bottom tooltip + */ +.hint--bottom:before { + margin-top: -11px; } + +.hint--bottom:before, .hint--bottom:after { + top: 100%; + left: 50%; } + +.hint--bottom:before { + left: calc(50% - 6px); } + +.hint--bottom:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + +.hint--bottom:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--bottom:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + +/** + * right tooltip + */ +.hint--right:before { + margin-left: -11px; + margin-bottom: -6px; } + +.hint--right:after { + margin-bottom: -14px; } + +.hint--right:before, .hint--right:after { + left: 100%; + bottom: 50%; } + +.hint--right:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +.hint--right:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +/** + * left tooltip + */ +.hint--left:before { + margin-right: -11px; + margin-bottom: -6px; } + +.hint--left:after { + margin-bottom: -14px; } + +.hint--left:before, .hint--left:after { + right: 100%; + bottom: 50%; } + +.hint--left:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + +.hint--left:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + +/** + * top-left tooltip + */ +.hint--top-left:before { + margin-bottom: -11px; } + +.hint--top-left:before, .hint--top-left:after { + bottom: 100%; + left: 50%; } + +.hint--top-left:before { + left: calc(50% - 6px); } + +.hint--top-left:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + +.hint--top-left:after { + margin-left: 12px; } + +.hint--top-left:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--top-left:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + +/** + * top-right tooltip + */ +.hint--top-right:before { + margin-bottom: -11px; } + +.hint--top-right:before, .hint--top-right:after { + bottom: 100%; + left: 50%; } + +.hint--top-right:before { + left: calc(50% - 6px); } + +.hint--top-right:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + +.hint--top-right:after { + margin-left: -12px; } + +.hint--top-right:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--top-right:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +/** + * bottom-left tooltip + */ +.hint--bottom-left:before { + margin-top: -11px; } + +.hint--bottom-left:before, .hint--bottom-left:after { + top: 100%; + left: 70%; } + +.hint--bottom-left:before { + left: calc(50% - 6px); } + +.hint--bottom-left:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + +.hint--bottom-left:after { + margin-left: 12px; } + +.hint--bottom-left:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--bottom-left:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + +/** + * bottom-right tooltip + */ +.hint--bottom-right:before { + margin-top: -11px; } + +.hint--bottom-right:before, .hint--bottom-right:after { + top: 100%; + left: 50%; } + +.hint--bottom-right:before { + left: calc(50% - 6px); } + +.hint--bottom-right:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + +.hint--bottom-right:after { + margin-left: -12px; } + +.hint--bottom-right:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--bottom-right:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +/** + * source: hint-sizes.scss + * + * Defines width restricted tooltips that can span + * across multiple lines. + * + * Classes added: + * 1) hint--small + * 2) hint--medium + * 3) hint--large + * + */ +.hint--small:after, +.hint--medium:after, +.hint--large:after { + white-space: normal; + line-height: 1.4em; + word-wrap: break-word; } + +.hint--small:after { + width: 80px; } + +.hint--medium:after { + width: 150px; } + +.hint--large:after { + width: 300px; } + +/** + * source: hint-theme.scss + * + * Defines basic theme for tooltips. + * + */ +[class*="hint--"] { + /** + * tooltip body + */ } + [class*="hint--"]:after { + text-shadow: 0 -1px 0px black; + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } + +/** + * source: hint-color-types.scss + * + * Contains tooltips of various types based on color differences. + * + * Classes added: + * 1) hint--error + * 2) hint--warning + * 3) hint--info + * 4) hint--success + * + */ +/** + * Error + */ +.hint--error:after { + background-color: #b34e4d; + text-shadow: 0 -1px 0px #592726; } + +.hint--error.hint--top-left:before { + border-top-color: #b34e4d; } + +.hint--error.hint--top-right:before { + border-top-color: #b34e4d; } + +.hint--error.hint--top:before { + border-top-color: #b34e4d; } + +.hint--error.hint--bottom-left:before { + border-bottom-color: #b34e4d; } + +.hint--error.hint--bottom-right:before { + border-bottom-color: #b34e4d; } + +.hint--error.hint--bottom:before { + border-bottom-color: #b34e4d; } + +.hint--error.hint--left:before { + border-left-color: #b34e4d; } + +.hint--error.hint--right:before { + border-right-color: #b34e4d; } + +/** + * Warning + */ +.hint--warning:after { + background-color: #c09854; + text-shadow: 0 -1px 0px #6c5328; } + +.hint--warning.hint--top-left:before { + border-top-color: #c09854; } + +.hint--warning.hint--top-right:before { + border-top-color: #c09854; } + +.hint--warning.hint--top:before { + border-top-color: #c09854; } + +.hint--warning.hint--bottom-left:before { + border-bottom-color: #c09854; } + +.hint--warning.hint--bottom-right:before { + border-bottom-color: #c09854; } + +.hint--warning.hint--bottom:before { + border-bottom-color: #c09854; } + +.hint--warning.hint--left:before { + border-left-color: #c09854; } + +.hint--warning.hint--right:before { + border-right-color: #c09854; } + +/** + * Info + */ +.hint--info:after { + background-color: #3986ac; + text-shadow: 0 -1px 0px #1a3c4d; } + +.hint--info.hint--top-left:before { + border-top-color: #3986ac; } + +.hint--info.hint--top-right:before { + border-top-color: #3986ac; } + +.hint--info.hint--top:before { + border-top-color: #3986ac; } + +.hint--info.hint--bottom-left:before { + border-bottom-color: #3986ac; } + +.hint--info.hint--bottom-right:before { + border-bottom-color: #3986ac; } + +.hint--info.hint--bottom:before { + border-bottom-color: #3986ac; } + +.hint--info.hint--left:before { + border-left-color: #3986ac; } + +.hint--info.hint--right:before { + border-right-color: #3986ac; } + +/** + * Success + */ +.hint--success:after { + background-color: #458746; + text-shadow: 0 -1px 0px #1a321a; } + +.hint--success.hint--top-left:before { + border-top-color: #458746; } + +.hint--success.hint--top-right:before { + border-top-color: #458746; } + +.hint--success.hint--top:before { + border-top-color: #458746; } + +.hint--success.hint--bottom-left:before { + border-bottom-color: #458746; } + +.hint--success.hint--bottom-right:before { + border-bottom-color: #458746; } + +.hint--success.hint--bottom:before { + border-bottom-color: #458746; } + +.hint--success.hint--left:before { + border-left-color: #458746; } + +.hint--success.hint--right:before { + border-right-color: #458746; } + +/** + * source: hint-always.scss + * + * Defines a persisted tooltip which shows always. + * + * Classes added: + * 1) hint--always + * + */ +.hint--always:after, .hint--always:before { + opacity: 1; + visibility: visible; } + +.hint--always.hint--top:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--always.hint--top:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + +.hint--always.hint--top-left:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--always.hint--top-left:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + +.hint--always.hint--top-right:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--always.hint--top-right:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + +.hint--always.hint--bottom:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--always.hint--bottom:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + +.hint--always.hint--bottom-left:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--always.hint--bottom-left:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + +.hint--always.hint--bottom-right:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--always.hint--bottom-right:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + +.hint--always.hint--left:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + +.hint--always.hint--left:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + +.hint--always.hint--right:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +.hint--always.hint--right:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + +/** + * source: hint-rounded.scss + * + * Defines rounded corner tooltips. + * + * Classes added: + * 1) hint--rounded + * + */ +.hint--rounded:after { + border-radius: 4px; } + +/** + * source: hint-effects.scss + * + * Defines various transition effects for the tooltips. + * + * Classes added: + * 1) hint--no-animate + * 2) hint--bounce + * + */ +.hint--no-animate:before, .hint--no-animate:after { + -webkit-transition-duration: 0ms; + -moz-transition-duration: 0ms; + transition-duration: 0ms; } + +.hint--bounce:before, .hint--bounce:after { + -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); + -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } + +.hint--no-shadow:before, .hint--no-shadow:after { + text-shadow: initial; + box-shadow: initial; } + +.hint--no-arrow:before { + display: none; } diff --git a/static/css/index.css b/static/css/index.css index b7c159f..ea842a3 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -4,7 +4,7 @@ display: flex; } #main-function{ - height: 70vh; + height: 90vh; width: 100%; display: flex; } @@ -17,44 +17,77 @@ position: fixed; z-index: 9999; width: 150px; - background: rgb(201,219,228); border-radius: 5px; - display: none; + background: rgb(228,237,241); + visibility: hidden; } #mnt-cm.visible{ - display: block; + visibility: visible; +} +.mnt-cm-option{ + padding: 8px 10px; + cursor: pointer; } -#mnt-cm-option{ +.mnt-cm-option:hover{ + background: rgb(180,205,217); +} +.mnt-cm-submenu{ + background: rgb(238,245,247); padding: 8px 10px; + cursor: pointer; +} +.mnt-cm-submenu:hover{ + background: rgb(180,205,217); +} +.mnt-cm-dropmenu{ + background: rgb(119,164,187); + color: rgb(248,250,252); + width: 150px; + display: none; + z-index: 9999; cursor: pointer; - border-radius: inherit; + position: absolute; } -#mnt-cm-option:hover{ - background: rgb(181,199,208); +.mnt-cm-dropmenu.visible{ + display: block; +} +.mnt-dropmenu-option{ + white-space: nowrap; + min-height: 31px; + width: 150px; + display: block; +} +.mnt-dropmenu-option:hover{ + background: rgb(146,182,200); +} +.mnt-dropmenu-option.hide{ + display: none; } .mnt-folder{ border-bottom: 5px solid rgb(255,238,214); + } .mnt-folder-header{ border-bottom: 5px solid rgb(255,238,214); + height: 26px; } .mnt-folder-content{ white-space: nowrap; overflow-x: auto; overflow-y: hidden; height: 0px; - width: auto; - max-height: 20vh; - transition: 0.5s; + max-height: 20vh; + transition: 0.5s ease; } .mnt-data{ width: 100%; + height: 21px; } .mnt-data:hover{ background: rgb(154,255,222); } #fs{ - width: 50%; + width: 60%; border-top: 5px solid rgb(255,238,214); } #fs-info{ @@ -71,7 +104,7 @@ height: 3vh; } #fs-main{ - height: 90%; + height: 96%; overflow-x: auto; overflow-y: hidden; display: flex; @@ -89,8 +122,11 @@ } .fs-data{ width: 50%; - text-align: left; - display: inline-block; + text-align: left; + text-overflow: ellipsis; + overflow-x: hidden; + /* overflow-y: visible; */ + white-space: nowrap; padding: 15px; } .fs-data:hover{ @@ -100,6 +136,7 @@ /* Columbia Blue */ .fs-data-label{ width: 532px; + overflow-y: visible; } .fs-data-label:hover{ background: rgb(211,229,238); @@ -126,6 +163,8 @@ #tag{ height: 100%; width: 30%; + /* resize: horizontal; */ + overflow: auto; text-align: center; vertical-align: top; } @@ -155,6 +194,7 @@ } #buttonbar{ border-top: 5px solid rgb(255,238,214); + display: flex; } #tag-match-div{ height: 0vh; @@ -165,9 +205,12 @@ #tag-match-result:hover{ background: rgb(231,238,238); } -#tag-search-output{ -} +/* TODO */ +/* #tag-search-output{ + +} */ + /* Alice Blue */ #tag-search-result:hover{ background: rgb(223,239,247); diff --git a/static/js/DarkMode.js b/static/js/DarkMode.js index 03f341b..c08286d 100644 --- a/static/js/DarkMode.js +++ b/static/js/DarkMode.js @@ -1,5 +1,8 @@ const { ipcMain, nativeTheme } = require('electron') - // Main: toggle + +nativeTheme.themeSource = 'light' + +// Main: toggle ipcMain.handle('dm-main', () =>{ if (nativeTheme.shouldUseDarkColors){ @@ -13,5 +16,5 @@ ipcMain.handle('dm-main', () =>{ }) // Side: Reset to system ipcMain.handle('dm-reset', () =>{ - nativeTheme.themeSource = 'light' + nativeTheme.themeSource = 'system' }) \ No newline at end of file diff --git a/static/js/DeleteDB.js b/static/js/DeleteDB.js index 436f882..010a599 100644 --- a/static/js/DeleteDB.js +++ b/static/js/DeleteDB.js @@ -23,5 +23,6 @@ ipcMain.handle('ts-delDB', () => { ipcMain.handle('fs-openfile', (evt, v) => { console.log(v) + exe('chcp 65001') exe(v) }) \ No newline at end of file diff --git a/static/js/MonitorSystem.js b/static/js/MonitorSystem.js index 237f0fd..018a9bc 100644 --- a/static/js/MonitorSystem.js +++ b/static/js/MonitorSystem.js @@ -4,14 +4,82 @@ const env = require('./env.js') const sqlite3 = require('sqlite3').verbose() const Stemdb = env('StemdbDir') const db = new sqlite3.Database(Stemdb + '.db') +const mdbStorage = env('StemMGDir') + +const mdbLoader = (folder) =>{ + return new sqlite3.Database(mdbStorage + '//' + folder + '.db') +} +// Load all data ipcMain.handle('mnt-main', (event) =>{ const output = new Promise((resolve)=>{ const cmd = `select name from Monitor` db.all(cmd,(err,res)=>{ - const data = res.map(i=>Object.values(i)[0]) - resolve(data) + if(err){ + resolve(0) + }else{ + const data = res.map(i=>Object.values(i)[0]) + resolve(data) + } + }) + }) + return output +}) +// Load monitored group data +ipcMain.handle('mnt-load',(event,folder)=>{ + const output = new Promise((resolve)=>{ + const mdb = mdbLoader(folder) + const cmd = `select name from Members` + mdb.all(cmd,(err,res)=>{ + if(err){ + resolve(false) + }else{ + const data = res.map(i=>Object.values(i)[0]) + resolve(data) + } }) }) return output -}) \ No newline at end of file +}) +// Remove monitored members +ipcMain.handle('mnt-remove',(event,folder,dataset)=>{ + console.log(folder) + + const output = new Promise((resolve)=>{ + const cmd = `delete from Members where name = ?` + const mdb = mdbLoader(folder) + for(let i=0;i{ + if(err){ + resolve(false) + }else{ + resolve(true) + } + }) + + } + }) + return output +}) +// Update monitored group members +ipcMain.handle('mnt-update',(event,folder,name)=>{ + const output = new Promise((resolve)=>{ + const mdb = mdbLoader(folder) + mdb.run(`create table 'Members'( + "id" integer not null unique, + "name" text not null, + primary key("id" autoincrement), + unique(name))`,()=>{ + const cmd = `insert into Members(name) values(?)` + mdb.all(cmd,[name],(err,res)=>{ + if(err){ + resolve(true) + }else{ + resolve(false) + } + }) + } + ) + }) + return output +}) diff --git a/template/index-mnt.js b/template/index-mnt.js index da4b7d1..9262eaf 100644 --- a/template/index-mnt.js +++ b/template/index-mnt.js @@ -1,116 +1,382 @@ - +// Side: Target class checker +const mntcheck = (event,classname,isCurrent=false)=>{ + if(isCurrent){ + return event.currentTarget.classList.contains(classname) + }else{ + return event.target.classList.contains(classname) + } +} +// Side: Selected monitored members +const mntselected = (event)=>{ + const selected = document.querySelectorAll('.mnt-selected') + for(let i=0;i{ - const mntheader = document.querySelectorAll('.mnt-folder-header') - const mntcontent = document.querySelectorAll('.mnt-folder-content') - for(let i=0;i{ - console.log(mntcontent[i].style.height) - if(mntcontent[i].style.height==''){ - mntcontent[i].style.height = 'auto' +const mntfold = (target)=>{ + for(let i=0;i{ + const header = event.currentTarget.querySelector('.mnt-folder-header') + const content = event.currentTarget.querySelector('.mnt-folder-content') + const isExpand = content.classList.contains('mnt-expanding') + const isHeader = event.target == header + if(isHeader){ + if(isExpand){ + content.style.height = '' + content.classList.remove('mnt-expanding') + }else{ + content.style.height = content.childElementCount*21 + 31 + 'px' + content.classList.add('mnt-expanding') + } + } + }) + } + +} +// Side: Monitored group span adjustment +const mntspan = (content) =>{ + const isExpand = content.classList.contains('mnt-expanding') + if(isExpand){ + content.style.height = content.childElementCount*21 + 31 + 'px' + }else{ + content.style.height = '' + } + +} +// Side: The Style of Monitored system +const mntstyle = (target)=>{ + for(let i=0;i{ + const header = event.currentTarget.querySelector('.mnt-folder-header') + const content = event.currentTarget.querySelector('.mnt-folder-content') + const isDropzone = mntcheck(event,'mnt-dropzone',true) + if(isDropzone){ + header.style.background = 'rgb(124,255,192)' + content.style.background = 'rgb(235,255,251)' }else{ - mntcontent[i].style.height = '' + header.style.background = 'rgb(255,174,189)' + content.style.background = 'rgb(255,245,247)' } }) + el.addEventListener('mouseleave',(event)=>{ + const header = event.currentTarget.querySelector('.mnt-folder-header') + const content = event.currentTarget.querySelector('.mnt-folder-content') + header.style.background = '' + content.style.background = '' + }) } } + // Side: Context menu of monitored data -const mntmenu = ()=>{ +/* +const mntmenu = (target)=>{ + // Positioner const contextMenu = document.getElementById('mnt-cm') - const mntfolder = document.querySelectorAll('.mnt-folder') - for(let i=0;i{ + const menuPositioner = (event,isSub = false)=>{ + + const winX = document.body.clientWidth + const winY = document.body.clientHeight + const menuX = contextMenu.offsetWidth + const menuY = contextMenu.offsetHeight + const secMargin = 5 + let posLeft = posTop = overflowLimX = overflowLimY = '' + // Submenu + if(isSub){ + const menuName = event.currentTarget.id + 'menu' + const dropMenu = document.getElementById(menuName) + const subX = 150 + const subY = dropMenu.childElementCount*31 + const upAdjustment = 30 + const downAdjustment = 10 + const cmPos = contextMenu.getBoundingClientRect() + const optPos = event.currentTarget.getBoundingClientRect() + const optionLeft = cmPos.left + const optionRight = cmPos.right + const optionTop = optPos.top + const optionBottom = optPos.bottom + overflowLimX = optionRight + subX + secMargin + overflowLimY = optionTop + subY + secMargin + if(overflowLimX >= winX && overflowLimY >= winY){ + posLeft = optionLeft - subX + 'px' + posTop = optionBottom - subY + downAdjustment + 'px' + + }else if(overflowLimX >= winX){ + posLeft = optionLeft - subX + 'px' + posTop = optionTop + upAdjustment + 'px' + + }else if(overflowLimY >= winY){ + posLeft = optionRight + 'px' + posTop = optionBottom - subY + downAdjustment + 'px' + + }else{ + posLeft = optionRight + 'px' + posTop = optionTop + upAdjustment + 'px' + + } + // Mainmenu + }else{ + const {clientX : mouseX, clientY: mouseY} = event + overflowLimX = mouseX + menuX + secMargin + overflowLimY = mouseY + menuY + secMargin + if(overflowLimX >= winX && overflowLimY >=winY){ + posLeft = mouseX - menuX - secMargin + 'px' + posTop = mouseY - menuY - secMargin + 'px' + }else if(overflowLimX >= winX){ + posLeft = mouseX - menuX - secMargin + 'px' + posTop = mouseY + secMargin + 'px' + }else if(overflowLimY >= winY){ + posLeft = mouseX + secMargin + 'px' + posTop = mouseY - menuY - secMargin + 'px' + }else{ + posLeft = mouseX + secMargin + 'px' + posTop = mouseY + secMargin + 'px' + + } + } + return [posLeft,posTop] + } + // Main menu + for(let i=0;i{ + // Select contextmenu target + mntselected(event) + + // Customized display + + if(event.currentTarget.id == 'mnt-main'){ + console.log('work') + const hideOpt = document.getElementById('mnt-removemenu-remove') + hideOpt.classList.add('hide') + } + // Main function event.preventDefault() - const {clientX: mouseX, clientY: mouseY} = event - contextMenu.style.top = `${mouseY}px` - contextMenu.style.left= `${mouseX}px` + const [posLeft,posTop] = menuPositioner(event) + contextMenu.style.left = posLeft + contextMenu.style.top = posTop contextMenu.classList.add('visible') }) } -} + // Side menu + const submenu = document.querySelectorAll('.mnt-cm-submenu') + const dropmenu= document.querySelectorAll('.mnt-cm-dropmenu') + for(let i=0;i{ + const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible') + if(prevMenu){ + prevMenu.classList.remove('visible') + } + const [posLeft,posTop] = menuPositioner(event,true) + subel.style.left = posLeft + subel.style.top = posTop + subel.classList.add('visible') + }) + } + // test: Should be removed after all context related function is completed + + const page = document.body + page.addEventListener('contextmenu',(event)=>{ + event.preventDefault() + const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible') + if(prevMenu){ + prevMenu.classList.remove('visible') + } + const [posLeft,posTop] = menuPositioner(event) + contextMenu.style.left = posLeft + contextMenu.style.top = posTop + contextMenu.classList.add('visible') + }) + +} */ +//Side: Monitored group loader +const mntgroupwrite = async(target,isLoaded=true) =>{ + if(isLoaded){ + isLoaded = target.querySelector('.mnt-data') + } + if(!isLoaded){ + const updateDiv = target.querySelector('.mnt-folder-content') + const header = target.querySelector('.mnt-folder-header') + const mntset = await window.mnt.load(header.innerHTML) + let mntdata = [] + for(var i=0;i` + mntset[i] + `

` + } + updateDiv.innerHTML = mntdata.join('') + mntspan(updateDiv) + } +} // Side: Function of monitored data -const mntfunc = ()=>{ +const mntfunc = (target)=>{ // Data function - const mntdata = document.querySelectorAll('.mnt-data') - for(let i=0;i{ - floorNum = 'fs-floor-0' - fsfunc(target.innerHTML) + const el = target[i] + el.addEventListener('dblclick',(event)=>{ + if(mntcheck(event,'mnt-data')){ + floorNum = 'fs-floor-0' + fsfunc(event.target.innerHTML) + } }) // Drag - target.addEventListener('dragstart',(event)=>{ + el.addEventListener('dragstart',(event)=>{ event.dataTransfer.setData('text/plain',event.target.id) }) - // Style - target.addEventListener('click',()=>{ - const apple = target.clientWidth - console.log(apple) - }) - target.addEventListener('mousedown',()=>{ - target.style.background = 'rgb(124,225,192)' + el.addEventListener('dragend',(event)=>{ + event.target.style.background = '' }) - target.addEventListener('mouseup',()=>{ - target.style.background = 'rgb(154,255,222)' + // Style + el.addEventListener('mousedown',(event)=>{ + mntselected(event) }) - } - - // Folder function - // Shortcut - const mntshortcut = document.getElementById('mnt-shortcut') - let mntheight = 0 - mntshortcut.addEventListener('dragenter',()=>{ - mntheight = mntshortcut.offsetHeight - }) - mntshortcut.addEventListener('dragover',()=>{ - mntshortcut.style.height = (mntheight + 50) + 'px' - console.log('in') + // Folder Function + // Drop Folder + let counter = isExpand = false + const mntcancel = (event)=>{ + event.preventDefault() + event.stopPropagation() + return false + } + if(el.classList.contains('mnt-dropzone')){ + el.addEventListener('drop',async(event)=>{ + mntcancel(event) + const dropid = event.dataTransfer.getData('text/plain') + const dropdata = document.getElementById(dropid) + const isClone = dropdata.parentNode.parentNode.classList.contains('mnt-dropzone') + + const content = event.currentTarget.querySelector('.mnt-folder-content') + + // Monitored group update + const dropzoneid = event.currentTarget.id + const header = document.querySelector('#' + dropzoneid + ' .mnt-folder-header') + const isExist = await window.mnt.update(header.innerHTML,dropdata.innerHTML) + if(!isClone && !isExist){ + const dropclone = dropdata.cloneNode(true) + dropdata.parentNode.insertBefore(dropclone,dropdata.nextSibling) + } + if(!isExist){ + content.appendChild(dropdata) + mntspan(content) + } + }) + el.addEventListener('dragenter',mntcancel) + el.addEventListener('dragover',mntcancel) + el.addEventListener('dragenter',(event)=>{ + const content = event.currentTarget.querySelector('.mnt-folder-content') + if(!counter){ + content.style.height = (content.clientHeight + 100) + 'px' + counter = 0 + } + counter++ + }) + + el.addEventListener('dragleave',(event)=>{ + counter-- + const content = event.currentTarget.querySelector('.mnt-folder-content') + if(counter==0){ + + mntspan(content) + counter = false + } + }) + el.addEventListener('drop',(event)=>{ + counter = 0 + const content = event.currentTarget.querySelector('.mnt-folder-content') + + }) + } + } +} +// Side: Contextmenu function +const mntmenufunc = async()=>{ + // Create new monitored group + document.getElementById('mnt-cm-new').addEventListener('click',()=>{ + console.log('create folders') }) - mntshortcut.addEventListener('dragleave',()=>{ - console.log('leave') - mntshortcut.style.height = 'auto' + // Add this member to Shortcut + document.getElementById('mnt-movemenu-shortcut').addEventListener('click',()=>{ + console.log('add this to shorcut') }) - mntshortcut.addEventListener('drop',()=>{ - console.log('drop') - mntshortcut.style.height = 'auto' + // Remove member from this monitored group + document.getElementById('mnt-removemenu-remove').addEventListener('click',async()=>{ + const dataset = document.querySelectorAll('.mnt-selected') + const data = [] + for(var i=0;i{ - event.preventDefault() - event.stopPropagation() - return false - } - for(let i=0;i{ - mntcancel(event) - const id = event.dataTransfer.getData('text/plain') - event.target.appendChild(document.getElementById(id)) - }) - target.addEventListener('dragenter',mntcancel) - target.addEventListener('dragover',mntcancel) - } - } + + // Main: Load all monitored data const mntmain = async()=>{ const mntdata = [] const updateDiv = document.getElementById('mnt-main-display') - const mntset = await window.mnt.main() + let mntset = await window.mnt.main() + if(mntset == undefined){ + mntset = 0 + } for(var i=0;i` + mntset[i] + `

` } updateDiv.innerHTML = mntdata.join('') - mntfunc() + mntspan(updateDiv) + /* + const mntexpand = document.querySelectorAll('.mnt-folder.visible') + for(var i=0;i{ + const mntdata = [] + const mntshortcut = document.getElementById('mnt-shortcut') + mntgroupwrite(mntshortcut) + return true +} +//Side: Initial page structure +const mntbuild = ()=>{ + const mainStatus = mntmain() + const shortcutStatus = mntshortcut() + if(mainStatus && shortcutStatus){ + return true + } } //Initailizer +const mntApplier = (target)=>{ + mntfunc(target) + mntfold(target) + mntstyle(target) + //mntmenu(target) +} const mntInit = ()=>{ - mntmain() - mntfold() - mntmenu() + const isReady = mntbuild() + if(isReady){ + const mntfolder = document.querySelectorAll('.mnt-folder') + mntApplier(mntfolder) + mntmenufunc() + } + } mntInit() \ No newline at end of file diff --git a/template/index-tag.js b/template/index-tag.js index 4c94d09..80ce9d5 100644 --- a/template/index-tag.js +++ b/template/index-tag.js @@ -5,12 +5,14 @@ let isMonitored = false // Main: Tag add const tagmain = (name) =>{ document.getElementById('tag-write').addEventListener('click', async()=>{ + console.log('aa') const taginput = document.getElementById('tag-input').value - const tagpath = fsgetPath() + const tagpath = fsgetPath() const name = document.getElementById('ux-selected').innerHTML if (taginput == ''){ const inputError = await window.tag.error('taginput') }else{ + // Link to Monitor System const isMonitored = await window.tag.main(name,taginput,tagpath) if(!isMonitored){ mntmain() @@ -87,7 +89,7 @@ const tagmatch = async()=>{ }) // Main match function tagsearchbar.addEventListener('input',async()=>{ - const evt = new Event('click') + //const evt = new Event('click') const input = tagsearchbar.value const matchBlock = [] const tagset = await tag.match(input) @@ -241,7 +243,7 @@ const tagsearch = ()=>{ } tagbtn.addEventListener('click', async()=>{ searchBlock = [] - const evt = new Event('click') + //const evt = new Event('click') const input = taginput.value tagset = await tag.query(input,'tagref','tagref') const fileset = await tag.query(input,'nameref','nameref',false) diff --git a/template/index-ux.js b/template/index-ux.js index 53b2f62..7eb3e77 100644 --- a/template/index-ux.js +++ b/template/index-ux.js @@ -4,25 +4,227 @@ const uxScroll = (e)=>{ const targetPos = (targetDiv.getBoundingClientRect().right + targetDiv.getBoundingClientRect().left)/2 const movePos = targetPos + window.pageXOffset - offset - console.log(targetPos) - console.log(movePos) document.getElementById('fs-main').scrollTo({ left: movePos, behavior: 'smooth' }) } +// Contextmenu Creator +const uxContextMenuCreate = ()=>{ + // Positioner + //const contextMenu = document.getElementById('mnt-cm') + const menuPositioner = (event,isSub = false)=>{ + const funcSection = event.target.closest('.function-section') + const contextMenu = funcSection.querySelector('.context-menu') + const winX = document.body.clientWidth + const winY = document.body.clientHeight + const menuX = contextMenu.offsetWidth + const menuY = contextMenu.offsetHeight + const secMargin = 5 + let posLeft = posTop = overflowLimX = overflowLimY = '' + // Submenu + if(isSub){ + const menuName = event.currentTarget.id + 'menu' + const dropMenu = document.getElementById(menuName) + const subX = 150 + const subY = dropMenu.childElementCount*31 + const upAdjustment = 30 + const downAdjustment = 10 + const cmPos = contextMenu.getBoundingClientRect() + const optPos = event.currentTarget.getBoundingClientRect() + const optionLeft = cmPos.left + const optionRight = cmPos.right + const optionTop = optPos.top + const optionBottom = optPos.bottom + overflowLimX = optionRight + subX + secMargin + overflowLimY = optionTop + subY + secMargin + if(overflowLimX >= winX && overflowLimY >= winY){ + posLeft = optionLeft - subX + 'px' + posTop = optionBottom - subY + downAdjustment + 'px' + + }else if(overflowLimX >= winX){ + posLeft = optionLeft - subX + 'px' + posTop = optionTop + upAdjustment + 'px' + + }else if(overflowLimY >= winY){ + posLeft = optionRight + 'px' + posTop = optionBottom - subY + downAdjustment + 'px' + + }else{ + posLeft = optionRight + 'px' + posTop = optionTop + upAdjustment + 'px' + + } + // Mainmenu + }else{ + const {clientX : mouseX, clientY: mouseY} = event + overflowLimX = mouseX + menuX + secMargin + overflowLimY = mouseY + menuY + secMargin + if(overflowLimX >= winX && overflowLimY >=winY){ + posLeft = mouseX - menuX - secMargin + 'px' + posTop = mouseY - menuY - secMargin + 'px' + }else if(overflowLimX >= winX){ + posLeft = mouseX - menuX - secMargin + 'px' + posTop = mouseY + secMargin + 'px' + }else if(overflowLimY >= winY){ + posLeft = mouseX + secMargin + 'px' + posTop = mouseY - menuY - secMargin + 'px' + }else{ + posLeft = mouseX + secMargin + 'px' + posTop = mouseY + secMargin + 'px' + + } + } + return [posLeft,posTop] + } + // Main menu + /* + for(let i=0;i{ + // Select contextmenu target + mntselected(event) + + // Customized display + + if(event.currentTarget.id == 'mnt-main'){ + const hideOpt = document.getElementById('mnt-removemenu-remove') + hideOpt.classList.add('hide') + } + // Main function + event.preventDefault() + const [posLeft,posTop] = menuPositioner(event) + contextMenu.style.left = posLeft + contextMenu.style.top = posTop + contextMenu.classList.add('visible') + }) + }*/ + // Side menu + /* + const submenu = document.querySelectorAll('.mnt-cm-submenu') + const dropmenu= document.querySelectorAll('.mnt-cm-dropmenu')*/ + const cmmenu = document.querySelectorAll('.context-menu') + for(var i=0;i{ + const [posLeft,posTop] = menuPositioner(event,true) + subel.style.left = posLeft + subel.style.top = posTop + subel.classList.add('visible') + }) + } + } + /* + const submenu = contextMenu.querySelectorAll(contextMenu.id + '-submenu') + const dropmenu= contextMenu.querySelectorAll(contextMenu.id + '-dropmenu') + for(let i=0;i{ + + const prevMenu = document.querySelector('.mnt-cm-dropmenu.visible') + if(prevMenu){ + prevMenu.classList.remove('visible') + } + const [posLeft,posTop] = menuPositioner(event,true) + subel.style.left = posLeft + subel.style.top = posTop + subel.classList.add('visible') + }) + }*/ + const page = document.body + page.addEventListener('passcheck',(event)=>{ + event.preventDefault() + console.log(event.target) + // Display contextmenu + const funcSection = event.target.closest('.function-section') + const contextMenu = funcSection.querySelector('.context-menu') + if(!contextMenu){ + return false + } + const [posLeft,posTop] = menuPositioner(event) + contextMenu.style.left = posLeft + contextMenu.style.top = posTop + contextMenu.classList.add('visible') + + // Contextmenu Select + const uxContextMenuSelect = ()=>{ + const selector = [] + selector['mnt'] = ()=>{mntselected(event)} + try{ + selector[funcSection.id]() + }catch(err){} + } + uxContextMenuSelect() + // Hiding controller + const uxContextMenuOptHide = ()=>{ + const hideRule = [] + hideRule['mnt'] = ()=>{ + const subRule = [] + subRule['mnt-main'] = ()=>{ + const hideOpt = document.getElementById('mnt-removemenu-remove') + hideOpt.classList.add('hide') + } + const group = event.target.closest('.mnt-folder') + + subRule[group.id]() + } + try{ + hideRule[funcSection.id]() + }catch(err){} + } + uxContextMenuOptHide() + + }) + +} +// Contextmenu Removal and hide const uxContextMenuRemove = ()=>{ - const contextMenu = document.getElementById('mnt-cm') - document.querySelector('body').addEventListener('click',(event)=>{ - if(event.target.offsetParent !=contextMenu){ - contextMenu.classList.remove('visible') + const mainfunc = (isSub=false)=>{ + const vsbMenu = document.querySelectorAll('.context-menu.visible') + const vsbSubMenu = document.querySelectorAll('.submenu.visible') + const hideOpt = document.querySelectorAll('.hide') + if(!event.target.offsetParent.classList.contains('context-menu')){ + if(!isSub){ + for(var i=0;i{ + event.preventDefault() + mainfunc(true) + const evt = new Event('passcheck',{'bubbles':true}) + event.target.dispatchEvent(evt) + + }) + body.addEventListener('mousedown',()=>{ + mainfunc() }) } // Initialize const uxInit = ()=>{ + uxContextMenuCreate() uxContextMenuRemove() } uxInit() diff --git a/template/index.html b/template/index.html index 898527c..e1cc2ae 100644 --- a/template/index.html +++ b/template/index.html @@ -7,6 +7,7 @@ + Hello from Electron renderer! @@ -15,21 +16,34 @@

-
+
-

Option 1

-

Option 2

+
+

New

+

Move

+

Remove

+
+
+
+ +

Shortcut

-

All Files

+

All

-
+

@@ -43,7 +57,7 @@

-
+
-
+
diff --git a/template/index.js b/template/index.js index 741d05e..9c48f9b 100644 --- a/template/index.js +++ b/template/index.js @@ -168,10 +168,10 @@ const fsfunc = async (v=false,isDrive=false) => { const fsdataset = [] for(var i=0;i` + const fsbtn = `
` const fssize = `

`+ size[i] + `

` const fsmtime = `

`+ mtime[i] +`

` - const fsdata = fsbtn + fssize + fsmtime + `
` + const fsdata = fsbtn + fssize + fsmtime fsdataset[i] = fsdata } } diff --git "a/\344\270\255\346\226\207/1/2/Stemmeta.db" "b/\344\270\255\346\226\207/1/2/Stemmeta.db" index b3b9d5c..e422b52 100644 Binary files "a/\344\270\255\346\226\207/1/2/Stemmeta.db" and "b/\344\270\255\346\226\207/1/2/Stemmeta.db" differ diff --git "a/\344\270\255\346\226\207/1/Stemmeta.db" "b/\344\270\255\346\226\207/1/Stemmeta.db" index 5717380..ab507fd 100644 Binary files "a/\344\270\255\346\226\207/1/Stemmeta.db" and "b/\344\270\255\346\226\207/1/Stemmeta.db" differ diff --git "a/\344\270\255\346\226\207/Stemmeta.db" "b/\344\270\255\346\226\207/Stemmeta.db" index c03b4b1..f67f895 100644 Binary files "a/\344\270\255\346\226\207/Stemmeta.db" and "b/\344\270\255\346\226\207/Stemmeta.db" differ