mirror of
https://github.com/MatMoul/quickdial-webext.git
synced 2024-12-23 07:26:11 +00:00
Feature: Add first support to editing nodes
This commit is contained in:
parent
20ca231945
commit
feafd8449e
@ -34,6 +34,11 @@
|
||||
"description": "Text of the add folder prompt."
|
||||
},
|
||||
|
||||
"menuProperties": {
|
||||
"message": "Properties",
|
||||
"description": "Text of properties menu item."
|
||||
},
|
||||
|
||||
"menuRefreshItem": {
|
||||
"message": "Refresh",
|
||||
"description": "Text of refresh menu item."
|
||||
|
||||
@ -34,6 +34,11 @@
|
||||
"description": "Text of the add folder prompt."
|
||||
},
|
||||
|
||||
"menuProperties": {
|
||||
"message": "Propriétés",
|
||||
"description": "Text of properties menu item."
|
||||
},
|
||||
|
||||
"menuRefreshItem": {
|
||||
"message": "Actualiser",
|
||||
"description": "Text of refresh menu item."
|
||||
|
||||
71
src/html/properties.html
Normal file
71
src/html/properties.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" type="image/png" href="img/24.png" />
|
||||
<title id="title">Quick Dial Node Propoerties</title>
|
||||
<script type="text/javascript" src="/js/properties.js"></script>
|
||||
<style>
|
||||
body { margin: 0px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
|
||||
h1 { font-size: 11pt; text-decoration: underline; }
|
||||
input[type=number] { width: 56px; }
|
||||
input[type=color] { width: 60px; }
|
||||
.hidden { display: none; }
|
||||
.Tab>table { width: 100%; border-collapse: collapse; }
|
||||
.Tab .TabSpace { width: 100%; border-bottom: solid 1px #505050; }
|
||||
.Tab .TabButton { border: solid 1px #505050; padding: 2px 6px 2px 6px; cursor: default; }
|
||||
.Tab .TabButtonActive { border: solid 1px #505050; border-bottom: none; padding: 2px 6px 2px 6px; cursor: default; }
|
||||
.Tab>div { padding: 8px; height: 330px; border-left: solid 1px #505050; border-bottom: solid 1px #505050; border-right: solid 1px #505050; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="Tabs" class="Tab">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="TabButtonActive">Main</td>
|
||||
<td class="TabButton" style="display:none">Temp</td>
|
||||
<td class="TabSpace"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
<div>
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td><span>Title :</span></td>
|
||||
<td><input id="Title" type="text" style="width:100%"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>Url :</span></td>
|
||||
<td><input id="Url" type="text" style="width:100%"></td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td><span>Image :</span></td>
|
||||
<td>
|
||||
<button class="hidden" id="ImageReset">Reset</button>
|
||||
<button class="hidden" id="ImageRefresh">Refresh</button>
|
||||
<button class="hidden" id="ImageCapture">Capture</button>
|
||||
<input class="hidden" id="ImageFile" type="file" style="width:180px;">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><div id="ImagePreview" style="width: 300px; height: 180px;"></div></td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: right; margin-top: 14px;">
|
||||
<button id="BtnOk">OK</button>
|
||||
<button id="BtnApply">Apply</button>
|
||||
<button id="BtnCancel">Cancel</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
99
src/js/properties.js
Normal file
99
src/js/properties.js
Normal file
@ -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
|
||||
}
|
||||
@ -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();
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user