2017-10-14 10:44:56 +00:00
|
|
|
var app = {};
|
|
|
|
|
2017-10-03 17:43:09 +00:00
|
|
|
var BackgroundImage = null;
|
2017-10-06 19:07:49 +00:00
|
|
|
var GridBackImage = null;
|
|
|
|
var GridFolderImage = null;
|
2017-10-03 17:43:09 +00:00
|
|
|
|
2017-10-14 20:41:28 +00:00
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
|
|
app.init();
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2017-10-14 10:44:56 +00:00
|
|
|
app.init = function(){
|
2017-10-21 15:10:51 +00:00
|
|
|
document.addEventListener('keyup', function(e){
|
|
|
|
switch(e.key){
|
|
|
|
case 'Escape':
|
|
|
|
window.frameElement.popup.close();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
2017-10-14 10:44:56 +00:00
|
|
|
app.Messages.getSettings(function(settings){
|
|
|
|
app.settings = settings;
|
2017-10-03 17:43:09 +00:00
|
|
|
BackgroundColor.value = app.settings.backgroundColor;
|
|
|
|
BackgroundImage = app.settings.backgroundImage;
|
2017-10-03 23:50:19 +00:00
|
|
|
BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
|
|
|
|
BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
|
|
|
|
BackgroundPreview.style.backgroundRepeat = 'no-repeat';
|
|
|
|
BackgroundPreview.style.backgroundSize = '100% 100%';
|
2017-10-21 14:53:39 +00:00
|
|
|
GridRoot.value = app.settings.grid.root;
|
2017-10-03 17:43:09 +00:00
|
|
|
GridRows.value = app.settings.grid.rows;
|
|
|
|
GridMargins.value = app.settings.grid.margin;
|
|
|
|
GridColumns.value = app.settings.grid.columns;
|
2017-10-06 20:46:15 +00:00
|
|
|
GridBackNode.checked = app.settings.grid.backNode;
|
2017-10-06 20:17:01 +00:00
|
|
|
GridBackImage = app.settings.grid.backIcon;
|
2017-10-06 19:15:20 +00:00
|
|
|
GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
|
2017-10-06 19:07:49 +00:00
|
|
|
GridBackPreview.style.backgroundRepeat = 'no-repeat';
|
|
|
|
GridBackPreview.style.backgroundPosition = '50% 50%';
|
2017-10-06 20:17:01 +00:00
|
|
|
GridFolderImage = app.settings.grid.folderIcon;
|
2017-10-06 19:15:20 +00:00
|
|
|
GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
|
2017-10-06 19:07:49 +00:00
|
|
|
GridFolderPreview.style.backgroundRepeat = 'no-repeat';
|
|
|
|
GridFolderPreview.style.backgroundSize = '100% 100%';
|
2017-10-03 17:43:09 +00:00
|
|
|
GridCellsMargins.value = app.settings.grid.cells.margin;
|
2017-10-03 23:50:19 +00:00
|
|
|
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
|
2017-11-10 19:45:52 +00:00
|
|
|
GridCellsOpacity.value = app.settings.grid.cells.opacity * 100;
|
|
|
|
GridCellsOpacityHover.value = app.settings.grid.cells.opacityHover * 100;
|
2017-11-10 19:34:19 +00:00
|
|
|
GridCellsBorderSize.value = app.settings.grid.cells.borderSize;
|
|
|
|
GridCellsBorderSizeHover.value = app.settings.grid.cells.borderSizeHover;
|
2017-10-06 20:17:01 +00:00
|
|
|
GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null);
|
|
|
|
GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor;
|
|
|
|
GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null);
|
|
|
|
GridCellsBackgroundColorHover.value = app.settings.grid.cells.backgroundColorHover;
|
2017-10-03 17:43:09 +00:00
|
|
|
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
|
2017-10-03 23:50:19 +00:00
|
|
|
GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover;
|
2017-10-03 17:43:09 +00:00
|
|
|
GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
|
|
|
|
GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover;
|
2017-10-03 23:50:19 +00:00
|
|
|
GridCellsTitle.checked = app.settings.grid.cells.title;
|
|
|
|
GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight;
|
|
|
|
GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
|
2017-11-10 19:34:19 +00:00
|
|
|
GridCellsTitleBorderSize.value = app.settings.grid.cells.titleBorderSize;
|
2017-10-03 17:43:09 +00:00
|
|
|
GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
|
|
|
|
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
|
2017-10-06 20:17:01 +00:00
|
|
|
GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null);
|
|
|
|
GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor;
|
|
|
|
GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
|
|
|
|
GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
|
2017-10-03 17:43:09 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
BtnOk.onclick = function(){
|
|
|
|
BtnApply.onclick();
|
|
|
|
window.frameElement.popup.close();
|
|
|
|
}
|
|
|
|
BtnApply.onclick = function(){
|
|
|
|
app.settings.backgroundColor = BackgroundColor.value;
|
|
|
|
app.settings.backgroundImage = BackgroundImage;
|
2017-10-03 19:26:51 +00:00
|
|
|
app.settings.grid.rows = +(GridRows.value);
|
|
|
|
app.settings.grid.margin = +(GridMargins.value);
|
|
|
|
app.settings.grid.columns = +(GridColumns.value);
|
2017-10-06 20:46:15 +00:00
|
|
|
app.settings.grid.backNode = GridBackNode.checked;
|
2017-10-06 19:15:20 +00:00
|
|
|
app.settings.grid.backIcon = GridBackImage;
|
|
|
|
app.settings.grid.folderIcon = GridFolderImage;
|
2017-10-03 19:26:51 +00:00
|
|
|
app.settings.grid.cells.margin = +(GridCellsMargins.value);
|
2017-10-03 23:50:19 +00:00
|
|
|
//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
|
|
|
|
app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
|
2017-11-10 19:45:52 +00:00
|
|
|
app.settings.grid.cells.opacity = +(GridCellsOpacity.value) / 100;
|
|
|
|
app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100;
|
2017-11-10 19:34:19 +00:00
|
|
|
app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);
|
|
|
|
//app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.value);
|
2017-10-06 20:17:01 +00:00
|
|
|
if(GridCellsBackgroundTransparent.checked == true) app.settings.grid.cells.backgroundColor = null;
|
|
|
|
else app.settings.grid.cells.backgroundColor = GridCellsBackgroundColor.value;
|
|
|
|
if(GridCellsBackgroundTransparentHover.checked == true) app.settings.grid.cells.backgroundColorHover = null;
|
|
|
|
else app.settings.grid.cells.backgroundColorHover = GridCellsBackgroundColorHover.value;
|
2017-10-03 19:26:51 +00:00
|
|
|
app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value);
|
2017-10-03 23:50:19 +00:00
|
|
|
app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value);
|
2017-10-03 17:43:09 +00:00
|
|
|
app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
|
|
|
|
app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
|
2017-10-03 23:50:19 +00:00
|
|
|
app.settings.grid.cells.title = GridCellsTitle.checked;
|
|
|
|
app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value;
|
|
|
|
app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
|
2017-11-10 19:34:19 +00:00
|
|
|
app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.value;
|
2017-10-03 17:43:09 +00:00
|
|
|
app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
|
|
|
|
app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
|
2017-10-06 20:17:01 +00:00
|
|
|
if(GridCellsTitleBackgroundTransparent.checked == true) app.settings.grid.cells.titleBackgroundColor = null;
|
|
|
|
else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value;
|
|
|
|
if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null;
|
|
|
|
else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value;
|
2017-10-21 14:53:39 +00:00
|
|
|
app.settings.grid.root = GridRoot.value;
|
2017-10-14 14:51:39 +00:00
|
|
|
browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
|
2017-10-03 17:43:09 +00:00
|
|
|
}
|
|
|
|
BtnCancel.onclick = function(){
|
|
|
|
window.frameElement.popup.close();
|
|
|
|
}
|
2017-10-03 23:50:19 +00:00
|
|
|
|
|
|
|
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';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
BackgroundColor.onchange = function(){
|
|
|
|
BackgroundPreview.style.backgroundColor = BackgroundColor.value;
|
|
|
|
}
|
|
|
|
BackgroundImageClear.onclick = function(){
|
|
|
|
BackgroundImage = null;
|
|
|
|
BackgroundPreview.style.backgroundImage = BackgroundImage;
|
|
|
|
}
|
|
|
|
BackgroundImageFile.onclick = function(){
|
|
|
|
this.value = null;
|
|
|
|
}
|
|
|
|
BackgroundImageFile.onchange = function(){
|
|
|
|
var fileReader = new FileReader();
|
|
|
|
fileReader.onload = function(e){
|
|
|
|
BackgroundImage = 'url(' + e.target.result + ')';
|
|
|
|
BackgroundImageFile.value = null;
|
|
|
|
BackgroundPreview.style.backgroundImage = BackgroundImage;
|
|
|
|
}
|
|
|
|
fileReader.readAsDataURL(BackgroundImageFile.files[0]);
|
|
|
|
}
|
|
|
|
|
2017-10-06 19:07:49 +00:00
|
|
|
GridBackImageReset.onclick = function(){
|
|
|
|
GridBackImage = 'url(/img/back.png)';
|
|
|
|
GridBackPreview.style.backgroundImage = GridBackImage;
|
|
|
|
}
|
|
|
|
GridBackImageFile.onclick = function(){
|
|
|
|
this.value = null;
|
|
|
|
}
|
|
|
|
GridBackImageFile.onchange = function(){
|
|
|
|
var fileReader = new FileReader();
|
|
|
|
fileReader.onload = function(e){
|
|
|
|
GridBackImage = 'url(' + e.target.result + ')';
|
|
|
|
GridBackImageFile.value = null;
|
|
|
|
GridBackPreview.style.backgroundImage = GridBackImage;
|
|
|
|
}
|
|
|
|
fileReader.readAsDataURL(GridBackImageFile.files[0]);
|
|
|
|
}
|
|
|
|
|
|
|
|
GridFolderImageReset.onclick = function(){
|
|
|
|
GridFolderImage = 'url(/img/folder.png)';
|
|
|
|
GridFolderPreview.style.backgroundImage = GridFolderImage;
|
|
|
|
}
|
|
|
|
GridFolderImageFile.onclick = function(){
|
|
|
|
this.value = null;
|
|
|
|
}
|
|
|
|
GridFolderImageFile.onchange = function(){
|
|
|
|
var fileReader = new FileReader();
|
|
|
|
fileReader.onload = function(e){
|
|
|
|
GridFolderImage = 'url(' + e.target.result + ')';
|
|
|
|
GridFolderImageFile.value = null;
|
|
|
|
GridFolderPreview.style.backgroundImage = GridFolderImage;
|
|
|
|
}
|
|
|
|
fileReader.readAsDataURL(GridFolderImageFile.files[0]);
|
|
|
|
}
|
2017-10-14 10:44:56 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
app.Messages = {};
|
2017-10-14 14:51:39 +00:00
|
|
|
app.Messages.Commands = {
|
|
|
|
getSettings: 0,
|
|
|
|
setSettings: 1,
|
|
|
|
getNode: 2,
|
2017-10-14 20:41:28 +00:00
|
|
|
getNodeByID: 3,
|
|
|
|
updateNode: 4,
|
|
|
|
setNodeIndex: 5,
|
|
|
|
createBookmark: 6,
|
|
|
|
createFolder: 7,
|
|
|
|
deleteNode: 8,
|
|
|
|
refreshNode: 9,
|
|
|
|
capturePage: 10,
|
2017-10-14 14:51:39 +00:00
|
|
|
settingsChanged: 100,
|
|
|
|
gridNodesLoaded: 101
|
|
|
|
};
|
2017-10-14 10:44:56 +00:00
|
|
|
app.Messages.getSettings = function(callback){
|
2017-10-14 14:51:39 +00:00
|
|
|
browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback);
|
2017-10-14 10:44:56 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|