Feature: Add first support to editing nodes

2025-11-21 06:52:06 +00:00 · 2017-10-14 22:41:28 +02:00
parent 20ca231945
commit feafd8449e
7 changed files with 261 additions and 30 deletions
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -20,12 +20,14 @@ core.Messages.Commands = {
 	getSettings: 0,
 	setSettings: 1,
 	getNode: 2,
-	setNodeIndex: 3,
-	createBookmark: 4,
-	createFolder: 5,
-	deleteNode: 6,
-	refreshNode: 7,
-	capturePage: 8,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
 	settingsChanged: 100,
 	gridNodesLoaded: 101
 };
@@ -42,6 +44,16 @@ core.Messages.init = function(){ // Init Messages Listeners
 				browser.runtime.sendMessage( { cmd: core.Messages.Commands.settingsChanged } );
 				browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
 				break;
+			case core.Messages.Commands.getNodeByID:
+				var nodes = core.GridNodes.getNodeWithParents(request.id);
+				if(nodes) sendResponse(nodes[nodes.length-1]);
+				else sendResponse(null);
+				break;
+			case core.Messages.Commands.updateNode:
+				core.GridNodes.updateNode(core.GridNodes.getNodeById(request.id), request.value, function(){
+					browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
+				});
+				break;
 			case core.Messages.Commands.getNode:
 				sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1)));
 				break;
@@ -404,7 +416,12 @@ core.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootG
 			return core.GridNodes.getNode(child, path.substr(child.title.length + 1));
 	return null;
 }
-core.GridNodes.getNodeWithParent = function(id){
+core.GridNodes.getNodeById = function(id){
+	var nodes = core.GridNodes.getNodeWithParents(id);
+	if(nodes) return nodes[nodes.length-1];
+	return null;
+}
+core.GridNodes.getNodeWithParents = function(id){
 	
 	var parents = [];

@@ -429,6 +446,18 @@ core.GridNodes.getNodeWithParent = function(id){
 	if(parents.length>0) return parents;
 	return null;
 }
+core.GridNodes.updateNode = function(gridNode, value, callback){
+	if(value){
+		if(value.title) gridNode.title = value.title;
+		if(gridNode.type == core.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){
+			gridNode.url = value.url;
+			delete gridNode.image;
+		}
+		//gridNode.image = infos.screenshot;
+		core.GridNodes.saveNode(gridNode);
+	}
+	if(callback) callback(gridNode);
+}
 core.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID
 	for(var child of gridNode.children) if(child.id == id) return child;
 	return null;
@@ -550,7 +579,7 @@ core.GridNodes.capturePage = function(gridNode, callback){
 	gridNode.__isLoading = true;
 	switch(gridNode.type){
 		case core.GridNodes.GridNodeType.folder:
-			var nodes = core.GridNodes.getNodeWithParent(gridNode.id);
+			var nodes = core.GridNodes.getNodeWithParents(gridNode.id);
 			if(nodes){
 				var path = '';
 				for(var i=1; i<nodes.length; i++) path = path + '/' + nodes[i].title;
--- a/src/js/dial.js
+++ b/src/js/dial.js
@@ -55,12 +55,14 @@ app.Messages.Commands = {
 	getSettings: 0,
 	setSettings: 1,
 	getNode: 2,
-	setNodeIndex: 3,
-	createBookmark: 4,
-	createFolder: 5,
-	deleteNode: 6,
-	refreshNode: 7,
-	capturePage: 8,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
 	settingsChanged: 100,
 	gridNodesLoaded: 101
 };
@@ -167,11 +169,13 @@ dial.initMenus = function(){
 	dial.ItemMenuCreateFolder = document.createElement('menuitem');
 	dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
 	dial.ItemMenuCreateFolder.onclick = dial.createFolder;
-	/*
-	dial.ItemMenuEdit = document.createElement('menuitem');
-	dial.ItemMenuEdit.label = 'Edit';
-	//dial.ItemMenuEdit.onclick = dial.test;
-	*/
+	
+	dial.ItemMenuProperties = document.createElement('menuitem');
+	dial.ItemMenuProperties.label = browser.i18n.getMessage("menuProperties");
+	dial.ItemMenuProperties.onclick = function(){
+		dial.editProperties(dial._selectedItem);
+	};
+	
 	dial.ItemMenuRefresh = document.createElement('menuitem');
 	dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem");
 	dial.ItemMenuRefresh.onclick = function(){
@@ -196,7 +200,7 @@ dial.initMenus = function(){
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark);
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateFolder);
 	dial.ItemMenu.appendChild(document.createElement('hr'));
-	//dial.ItemMenu.appendChild(dial.ItemMenuEdit);
+	dial.ItemMenu.appendChild(dial.ItemMenuProperties);
 	dial.ItemMenu.appendChild(dial.ItemMenuRefresh);
 	dial.ItemMenu.appendChild(dial.ItemMenuCapture);
 	dial.ItemMenu.appendChild(dial.ItemMenuDelete);
@@ -466,3 +470,18 @@ dial.editSettings = function(){
 	iframe.popup = popup;
 	popup.popup();
 }
+
+dial.editProperties = function(selectedItem){
+	var popup = new dial.PopupPanel(500, 420, true);
+	var iframe = document.createElement('iframe');
+	iframe.style.width = '100%';
+	iframe.style.height = '100%';
+	iframe.style.backgroundColor = 'transparent';
+	iframe.style.border = '0px none transparent';
+	iframe.style.padding = '0px';
+	iframe.style.overflow = 'hidden';
+	popup.frame.appendChild(iframe);
+	iframe.src = '/html/properties.html?id=' + selectedItem.Node.id;
+	iframe.popup = popup;
+	popup.popup();
+}
--- a/src/js/properties.js
+++ b/src/js/properties.js
@@ -0,0 +1,99 @@
+var app = {};
+
+document.addEventListener("DOMContentLoaded", function(event) {
+	app.init();
+});
+
+app.init = function(){
+	app.Messages.getSettings(function(settings){
+		app.settings = settings;
+		app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){
+			app.node = node;
+			Title.value = node.title;
+			ImagePreview.style.backgroundRepeat = 'no-repeat';
+			ImagePreview.style.backgroundSize = '100% 100%';
+			switch(node.type){
+				case app.GridNodes.GridNodeType.folder:
+					Url.parentNode.parentNode.style.display = 'none';
+					if(node.image) ImagePreview.style.backgroundImage = 'url(' + node.image + ')';
+					else ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
+					break;
+				case app.GridNodes.GridNodeType.bookmark:
+					ImageReset.style.display = 'none';
+					Url.value = node.url;
+					ImagePreview.style.backgroundImage = 'url(' + node.image + ')';
+					break;
+			}
+		});
+	});
+
+
+	BtnOk.onclick = function(){
+		BtnApply.onclick();
+		window.frameElement.popup.close();
+	}
+	BtnApply.onclick = function(){
+		switch(app.node.type){
+			case app.GridNodes.GridNodeType.folder:
+				app.Messages.updateNode(app.node.id, { title: Title.value })
+				break;
+			case app.GridNodes.GridNodeType.bookmark:
+				app.Messages.updateNode(app.node.id, { title: Title.value, url: Url.value })
+				break;
+		}
+	}
+	BtnCancel.onclick = function(){
+		window.frameElement.popup.close();
+	}
+
+	var tabButtons = Tabs.children[0].children[0].children[0];
+	for(var i=0; i<tabButtons.children.length-1; i++){
+		tabButtons.children[i].index = i;
+		tabButtons.children[i].onclick = function(){
+			for(var j=0; j<tabButtons.children.length-1; j++){
+				if(j==this.index){
+					tabButtons.children[j].className = 'TabButtonActive';
+					Tabs.children[1].children[j].className = '';
+				} else {
+					tabButtons.children[j].className = 'TabButton';
+					Tabs.children[1].children[j].className = 'hidden';
+				}
+			}
+		}
+	}
+
+};
+
+app.Messages = {};
+app.Messages.Commands = {
+	getSettings: 0,
+	setSettings: 1,
+	getNode: 2,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
+	settingsChanged: 100,
+	gridNodesLoaded: 101
+};
+app.Messages.getSettings = function(callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback);
+};
+app.Messages.getNodeByID = function(id, callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNodeByID, id: id }).then(callback);
+};
+app.Messages.updateNode = function(id, value, callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.updateNode, id: id, value: value }).then(callback);
+};
+
+app.GridNodes = {};
+app.GridNodes.GridNodeType = { // GridNodeType
+	back: -1,
+	empty: 0,
+	folder: 1,
+	bookmark: 2
+}
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -4,6 +4,11 @@ var BackgroundImage = null;
 var GridBackImage = null;
 var GridFolderImage = null;

+document.addEventListener("DOMContentLoaded", function(event) {
+	app.init();
+});
+
+
 app.init = function(){
 	app.Messages.getSettings(function(settings){
 		app.settings = settings;
@@ -161,12 +166,14 @@ app.Messages.Commands = {
 	getSettings: 0,
 	setSettings: 1,
 	getNode: 2,
-	setNodeIndex: 3,
-	createBookmark: 4,
-	createFolder: 5,
-	deleteNode: 6,
-	refreshNode: 7,
-	capturePage: 8,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
 	settingsChanged: 100,
 	gridNodesLoaded: 101
 };
@@ -177,7 +184,3 @@ app.Messages.getSettings = function(callback){



-window.onload = function(){
-	app.init();
-};
-