m/quickdial-webext
1
0
Fork 0
mirror of https://github.com/MatMoul/quickdial-webext.git synced 2024-12-23 15:36:12 +00:00
Code Releases Activity

Feature: Add first support to editing nodes

Browse Source
This commit is contained in:
MatMoul 2017-10-14 22:41:28 +02:00
parent 20ca231945
commit feafd8449e
7 changed files with 261 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/_locales/en/messages.json
View File

@ -34,6 +34,11 @@
"description": "Text of the add folder prompt." "description": "Text of the add folder prompt."
}, },
"menuProperties": {
"message": "Properties",
"description": "Text of properties menu item."
},
"menuRefreshItem": { "menuRefreshItem": {
"message": "Refresh", "message": "Refresh",
"description": "Text of refresh menu item." "description": "Text of refresh menu item."

5
src/_locales/fr/messages.json
View File

@ -34,6 +34,11 @@
"description": "Text of the add folder prompt." "description": "Text of the add folder prompt."
}, },
"menuProperties": {
"message": "Propriétés",
"description": "Text of properties menu item."
},
"menuRefreshItem": { "menuRefreshItem": {
"message": "Actualiser", "message": "Actualiser",
"description": "Text of refresh menu item." "description": "Text of refresh menu item."

71
src/html/properties.html Normal file
View 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>

45
src/js/background.js
View File

@ -20,12 +20,14 @@ core.Messages.Commands = {
getSettings: 0, getSettings: 0,
setSettings: 1, setSettings: 1,
getNode: 2, getNode: 2,
setNodeIndex: 3, getNodeByID: 3,
createBookmark: 4, updateNode: 4,
createFolder: 5, setNodeIndex: 5,
deleteNode: 6, createBookmark: 6,
refreshNode: 7, createFolder: 7,
capturePage: 8, deleteNode: 8,
refreshNode: 9,
capturePage: 10,
settingsChanged: 100, settingsChanged: 100,
gridNodesLoaded: 101 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.settingsChanged } );
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } ); browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
break; 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: case core.Messages.Commands.getNode:
sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1))); sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1)));
break; 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 core.GridNodes.getNode(child, path.substr(child.title.length + 1));
return null; 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 = []; var parents = [];
@ -429,6 +446,18 @@ core.GridNodes.getNodeWithParent = function(id){
if(parents.length>0) return parents; if(parents.length>0) return parents;
return null; 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 core.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID
for(var child of gridNode.children) if(child.id == id) return child; for(var child of gridNode.children) if(child.id == id) return child;
return null; return null;
@ -550,7 +579,7 @@ core.GridNodes.capturePage = function(gridNode, callback){
gridNode.__isLoading = true; gridNode.__isLoading = true;
switch(gridNode.type){ switch(gridNode.type){
case core.GridNodes.GridNodeType.folder: case core.GridNodes.GridNodeType.folder:
var nodes = core.GridNodes.getNodeWithParent(gridNode.id); var nodes = core.GridNodes.getNodeWithParents(gridNode.id);
if(nodes){ if(nodes){
var path = ''; var path = '';
for(var i=1; i<nodes.length; i++) path = path + '/' + nodes[i].title; for(var i=1; i<nodes.length; i++) path = path + '/' + nodes[i].title;

43
src/js/dial.js
View File

@ -55,12 +55,14 @@ app.Messages.Commands = {
getSettings: 0, getSettings: 0,
setSettings: 1, setSettings: 1,
getNode: 2, getNode: 2,
setNodeIndex: 3, getNodeByID: 3,
createBookmark: 4, updateNode: 4,
createFolder: 5, setNodeIndex: 5,
deleteNode: 6, createBookmark: 6,
refreshNode: 7, createFolder: 7,
capturePage: 8, deleteNode: 8,
refreshNode: 9,
capturePage: 10,
settingsChanged: 100, settingsChanged: 100,
gridNodesLoaded: 101 gridNodesLoaded: 101
}; };
@ -167,11 +169,13 @@ dial.initMenus = function(){
dial.ItemMenuCreateFolder = document.createElement('menuitem'); dial.ItemMenuCreateFolder = document.createElement('menuitem');
dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder"); dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
dial.ItemMenuCreateFolder.onclick = dial.createFolder; dial.ItemMenuCreateFolder.onclick = dial.createFolder;
/*
dial.ItemMenuEdit = document.createElement('menuitem'); dial.ItemMenuProperties = document.createElement('menuitem');
dial.ItemMenuEdit.label = 'Edit'; dial.ItemMenuProperties.label = browser.i18n.getMessage("menuProperties");
//dial.ItemMenuEdit.onclick = dial.test; dial.ItemMenuProperties.onclick = function(){
*/ dial.editProperties(dial._selectedItem);
};
dial.ItemMenuRefresh = document.createElement('menuitem'); dial.ItemMenuRefresh = document.createElement('menuitem');
dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem"); dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem");
dial.ItemMenuRefresh.onclick = function(){ dial.ItemMenuRefresh.onclick = function(){
@ -196,7 +200,7 @@ dial.initMenus = function(){
dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark); dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark);
dial.ItemMenuNew.appendChild(dial.ItemMenuCreateFolder); dial.ItemMenuNew.appendChild(dial.ItemMenuCreateFolder);
dial.ItemMenu.appendChild(document.createElement('hr')); 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.ItemMenuRefresh);
dial.ItemMenu.appendChild(dial.ItemMenuCapture); dial.ItemMenu.appendChild(dial.ItemMenuCapture);
dial.ItemMenu.appendChild(dial.ItemMenuDelete); dial.ItemMenu.appendChild(dial.ItemMenuDelete);
@ -466,3 +470,18 @@ dial.editSettings = function(){
iframe.popup = popup; iframe.popup = popup;
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
View 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
}

23
src/js/settings.js
View File

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