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

Large Change

Browse Source
This commit is contained in:
matmoul 2017-10-04 01:50:19 +02:00
parent 45ad442c19
commit b6a1e15974
7 changed files with 194 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,13 @@
"description": "Text of add bookmark menu item." "description": "Text of add bookmark menu item."
}, },
"menuAddBookmark": { "menuNew": {
"message": "Add Bookmark", "message": "New",
"description": "Text of new menu item."
},
"menuNewBookmark": {
"message": "Bookmark",
"description": "Text of add bookmark menu item." "description": "Text of add bookmark menu item."
}, },
@ -19,8 +24,8 @@
"description": "Text of the add bookmark prompt." "description": "Text of the add bookmark prompt."
}, },
"menuAddFolder": { "menuNewFolder": {
"message": "Add Folder", "message": "Folder",
"description": "Text of add folder menu item." "description": "Text of add folder menu item."
}, },

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

@ -9,8 +9,13 @@
"description": "Text of add bookmark menu item." "description": "Text of add bookmark menu item."
}, },
"menuAddBookmark": { "menuNew": {
"message": "Ajouter un marque-page", "message": "Nouveau",
"description": "Text of new menu item."
},
"menuNewBookmark": {
"message": "Marque-page",
"description": "Text of add bookmark menu item." "description": "Text of add bookmark menu item."
}, },
@ -19,8 +24,8 @@
"description": "Text of the add bookmark prompt." "description": "Text of the add bookmark prompt."
}, },
"menuAddFolder": { "menuNewFolder": {
"message": "Ajouter un dossier", "message": "Dossier",
"description": "Text of add folder menu item." "description": "Text of add folder menu item."
}, },

164
src/html/settings.html
View File

@ -6,75 +6,111 @@
<title id="title">Quick Dial Settings</title> <title id="title">Quick Dial Settings</title>
<script type="text/javascript" src="/js/settings.js"></script> <script type="text/javascript" src="/js/settings.js"></script>
<style> <style>
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } body { margin: 0px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
h1 { font-size: 11pt; text-decoration: underline; } h1 { font-size: 11pt; text-decoration: underline; }
input[type=number] { width: 60px; } 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> </style>
</head> </head>
<body id="body"> <body id="body">
<h1>Page :</h1> <div id="Tabs" class="Tab">
<table> <table>
<tr> <tr>
<td><span>Background Color :</span></td> <td class="TabButtonActive">Page</td>
<td><input id="BackgroundColor" type="color"></td> <td class="TabButton">Grid</td>
</tr> <td class="TabButton">Cells</td>
<tr> <td class="TabSpace"></td>
<td><span>Background Image :</span></td> </tr>
<td> </table>
<button id="BackgroundImageClear">Clear</button> <div>
<input id="BackgroundImageFile" type="file"> <div>
</td> <table>
</tr> <tr>
</table> <td><span>Background Color :</span></td>
<h1>Grid :</h1> <td><input id="BackgroundColor" type="color"></td>
<table> </tr>
<tr> <tr>
<td><span>Rows x Columns :</span></td> <td><span>Background Image :</span></td>
<td> <td>
<input id="GridRows" type="number"> <button id="BackgroundImageClear">Clear</button>
<input id="GridColumns" type="number"> <input id="BackgroundImageFile" type="file" style="width:265px;">
</td> </td>
</tr> </tr>
<tr> <tr>
<td><span>Margins :</span></td> <td>Preview :</td>
<td><input id="GridMargins" type="number"></td> <td><div id="BackgroundPreview" style="width: 300px; height: 180px;"></div></td>
</tr> </tr>
</table> </table>
<h1>Grid Cells:</h1> </div>
<table> <div class="hidden">
<tr> <table>
<td></td> <tr>
<td>Default :</td> <td><span>Rows x Columns :</span></td>
<td>Hover :</td> <td>
</tr> <input id="GridRows" type="number">
<tr> <input id="GridColumns" type="number">
<td><span>Margins :</span></td> </td>
<td><input id="GridCellsMargins" type="number"></td> </tr>
<td></td> <tr>
</tr> <td><span>Margins :</span></td>
<tr> <td><input id="GridMargins" type="number"></td>
<td><span>Border Radius:</span></td> </tr>
<td><input id="GridCellsBorderRadius" type="number"></td> </table>
<td></td> </div>
</tr> <div class="hidden">
<table>
<tr>
<td></td>
<td>Default :</td>
<td>Hover :</td>
</tr>
<tr>
<td><span>Margins :</span></td>
<td><input id="GridCellsMargins" type="number"></td>
<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
</tr>
<tr>
<td><span>Border Radius:</span></td>
<td><input id="GridCellsBorderRadius" type="number"></td>
<td><input id="GridCellsBorderRadiusHover" type="number"></td>
</tr>
<tr>
<td><span>Border Color:</span></td>
<td><input id="GridCellsBorderColor" type="color"></td>
<td><input id="GridCellsBorderColorHover" type="color"></td>
</tr>
<tr>
<td><span>Title :</span></td>
<td><input id="GridCellsTitle" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><span>Title Height :</span></td>
<td><input id="GridCellsTitleHeight" type="number"></td>
<td></td>
</tr>
<tr>
<td><span>Title Font Size :</span></td>
<td><input id="GridCellsTitleFontSize" type="number"></td>
<td></td>
</tr>
<tr>
<td><span>Title Color:</span></td>
<td><input id="GridCellsTitleColor" type="color"></td>
<td><input id="GridCellsTitleColorHover" type="color"></td>
</tr>
</table>
</div>
</div>
</div>
<tr> <div style="text-align: right; margin-top: 14px;">
<td><span>Border Color:</span></td>
<td><input id="GridCellsBorderColor" type="color"></td>
<td><input id="GridCellsBorderColorHover" type="color"></td>
</tr>
<tr>
<td><span>Title Color:</span></td>
<td><input id="GridCellsTitleColor" type="color"></td>
<td><input id="GridCellsTitleColorHover" type="color"></td>
</tr>
</table>
<div style="text-align: right;">
<button id="BtnOk">OK</button> <button id="BtnOk">OK</button>
<button id="BtnApply">Apply</button> <button id="BtnApply">Apply</button>
<button id="BtnCancel">Cancel</button> <button id="BtnCancel">Cancel</button>

2
src/js/background.js
View File

@ -21,11 +21,13 @@ core.Settings.load = function(callback){ // Load settings
columns: 5, columns: 5,
cells: { cells: {
margin: 4, margin: 4,
marginHover: 4,
ratioX: 4, ratioX: 4,
ratioY: 3, ratioY: 3,
borderColor: '#333333', borderColor: '#333333',
borderColorHover: '#a9a9a9', borderColorHover: '#a9a9a9',
borderRadius: 4, borderRadius: 4,
borderRadiusHover: 4,
title: true, title: true,
titleHeight: 16, titleHeight: 16,
titleFontSize: 10, titleFontSize: 10,

36
src/js/dial.js
View File

@ -15,10 +15,6 @@ window.onload = function(){
switch(request.command){ switch(request.command){
case 'SettingsChanged': case 'SettingsChanged':
if(app.settings){ if(app.settings){
/*
dial.styles.body.backgroundColor = app.settings.backgroundColor;
dial.styles.body.backgroundImage = app.settings.backgroundImage;
*/
dial.Head.removeChild(dial.Style); dial.Head.removeChild(dial.Style);
dial.Body.removeChild(dial.Grid); dial.Body.removeChild(dial.Grid);
dial.initStyles(); dial.initStyles();
@ -98,8 +94,9 @@ dial.initStyles = function(){
dial.styles.grid = {}; dial.styles.grid = {};
dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style; dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style;
dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style; dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style; dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style;
dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; }')].style; //dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; margin: ' + app.settings.grid.cells.marginHover + 'px; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style; dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style;
dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style; dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style; dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
@ -114,18 +111,21 @@ dial.initMenus = function(){
dial.PageMenu = document.createElement('menu'); dial.PageMenu = document.createElement('menu');
dial.PageMenu.type = 'context'; dial.PageMenu.type = 'context';
dial.PageMenu.id = 'page' dial.PageMenu.id = 'page'
dial.PageMenuNew = document.createElement('menu');
dial.PageMenuNew.label = browser.i18n.getMessage("menuNew");
dial.PageMenuCreateBookmark = document.createElement('menuitem'); dial.PageMenuCreateBookmark = document.createElement('menuitem');
dial.PageMenuCreateBookmark.label = 'Add bookmark'; dial.PageMenuCreateBookmark.label = browser.i18n.getMessage("menuNewBookmark");
dial.PageMenuCreateBookmark.onclick = dial.createBookmark; dial.PageMenuCreateBookmark.onclick = dial.createBookmark;
dial.PageMenuCreateFolder = document.createElement('menuitem'); dial.PageMenuCreateFolder = document.createElement('menuitem');
dial.PageMenuCreateFolder.label = 'Add folder'; dial.PageMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
dial.PageMenuCreateFolder.onclick = dial.createFolder; dial.PageMenuCreateFolder.onclick = dial.createFolder;
dial.PageMenuSettings = document.createElement('menuitem'); dial.PageMenuSettings = document.createElement('menuitem');
dial.PageMenuSettings.label = browser.i18n.getMessage("menuSettings"); dial.PageMenuSettings.label = browser.i18n.getMessage("menuSettings");
dial.PageMenuSettings.onclick = dial.editSettings; dial.PageMenuSettings.onclick = dial.editSettings;
dial.PageMenu.appendChild(dial.PageMenuCreateBookmark); dial.PageMenu.appendChild(dial.PageMenuNew);
dial.PageMenu.appendChild(dial.PageMenuCreateFolder); dial.PageMenuNew.appendChild(dial.PageMenuCreateBookmark);
dial.PageMenuNew.appendChild(dial.PageMenuCreateFolder);
dial.PageMenu.appendChild(document.createElement('hr')); dial.PageMenu.appendChild(document.createElement('hr'));
dial.PageMenu.appendChild(dial.PageMenuSettings); dial.PageMenu.appendChild(dial.PageMenuSettings);
dial.Body.appendChild(dial.PageMenu); dial.Body.appendChild(dial.PageMenu);
@ -133,11 +133,15 @@ dial.initMenus = function(){
dial.ItemMenu = document.createElement('menu'); dial.ItemMenu = document.createElement('menu');
dial.ItemMenu.type = 'context'; dial.ItemMenu.type = 'context';
dial.ItemMenu.id = 'item' dial.ItemMenu.id = 'item'
dial.ItemMenuNew = document.createElement('menu');
dial.ItemMenuNew.label = browser.i18n.getMessage("menuNew");
dial.ItemMenuCreateBookmark = document.createElement('menuitem'); dial.ItemMenuCreateBookmark = document.createElement('menuitem');
dial.ItemMenuCreateBookmark.label = browser.i18n.getMessage("menuAddBookmark"); dial.ItemMenuCreateBookmark.label = browser.i18n.getMessage("menuNewBookmark");
dial.ItemMenuCreateBookmark.onclick = dial.createBookmark; dial.ItemMenuCreateBookmark.onclick = dial.createBookmark;
dial.ItemMenuCreateFolder = document.createElement('menuitem'); dial.ItemMenuCreateFolder = document.createElement('menuitem');
dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuAddFolder"); dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
dial.ItemMenuCreateFolder.onclick = dial.createFolder; dial.ItemMenuCreateFolder.onclick = dial.createFolder;
/* /*
dial.ItemMenuEdit = document.createElement('menuitem'); dial.ItemMenuEdit = document.createElement('menuitem');
@ -160,8 +164,9 @@ dial.initMenus = function(){
dial.ItemMenuSettings.label = browser.i18n.getMessage("menuSettings"); dial.ItemMenuSettings.label = browser.i18n.getMessage("menuSettings");
dial.ItemMenuSettings.onclick = dial.editSettings; dial.ItemMenuSettings.onclick = dial.editSettings;
dial.ItemMenu.appendChild(dial.ItemMenuCreateBookmark); dial.ItemMenu.appendChild(dial.ItemMenuNew);
dial.ItemMenu.appendChild(dial.ItemMenuCreateFolder); dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark);
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.ItemMenuEdit);
dial.ItemMenu.appendChild(dial.ItemMenuRefresh); dial.ItemMenu.appendChild(dial.ItemMenuRefresh);
@ -232,10 +237,13 @@ dial.updateGridLayout = function(grid, settings, styles){
var linkHeight = fullHeight / settings.rows; var linkHeight = fullHeight / settings.rows;
if(linkWidth <= linkHeight * settings.cells.ratioX / settings.cells.ratioY) linkHeight = linkWidth / settings.cells.ratioX * settings.cells.ratioY; if(linkWidth <= linkHeight * settings.cells.ratioX / settings.cells.ratioY) linkHeight = linkWidth / settings.cells.ratioX * settings.cells.ratioY;
else linkWidth = linkHeight / settings.cells.ratioY * settings.cells.ratioX; else linkWidth = linkHeight / settings.cells.ratioY * settings.cells.ratioX;
styles.cell.width = linkWidth.toString() + 'px'; styles.cell.width = linkWidth.toString() + 'px';
styles.cell.height = linkHeight.toString() + 'px'; styles.cell.height = linkHeight.toString() + 'px';
linkWidth = linkWidth - 2 * (settings.cells.margin + 1); linkWidth = linkWidth - 2 * (settings.cells.margin + 1);
linkHeight = linkHeight - 2 * (settings.cells.margin + 1); linkHeight = linkHeight - 2 * (settings.cells.margin + 1);
styles.link.width = linkWidth.toString() + 'px'; styles.link.width = linkWidth.toString() + 'px';
styles.link.height = linkHeight.toString() + 'px'; styles.link.height = linkHeight.toString() + 'px';
if(settings.cells.title) styles.linkPanel.height = (linkHeight - settings.cells.titleHeight - 1).toString() + 'px'; if(settings.cells.title) styles.linkPanel.height = (linkHeight - settings.cells.titleHeight - 1).toString() + 'px';

66
src/js/settings.js
View File

@ -5,31 +5,26 @@ window.onload = function(){
app = page.app; app = page.app;
BackgroundColor.value = app.settings.backgroundColor; BackgroundColor.value = app.settings.backgroundColor;
BackgroundImage = app.settings.backgroundImage; BackgroundImage = app.settings.backgroundImage;
BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
BackgroundPreview.style.backgroundRepeat = 'no-repeat';
BackgroundPreview.style.backgroundSize = '100% 100%';
GridRows.value = app.settings.grid.rows; GridRows.value = app.settings.grid.rows;
GridMargins.value = app.settings.grid.margin; GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns; GridColumns.value = app.settings.grid.columns;
GridCellsMargins.value = app.settings.grid.cells.margin; GridCellsMargins.value = app.settings.grid.cells.margin;
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius; GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover;
GridCellsBorderColor.value = app.settings.grid.cells.borderColor; GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover; GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover;
GridCellsTitle.checked = app.settings.grid.cells.title;
GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight;
GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
GridCellsTitleColor.value = app.settings.grid.cells.titleColor; GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover; GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
}); });
BackgroundImageClear.onclick = function(){
BackgroundImage = null;
}
BackgroundImageFile.onclick = function(){
this.value = null;
}
BackgroundImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
BackgroundImage = 'url(' + e.target.result + ')';
}
fileReader.readAsDataURL(BackgroundImageFile.files[0]);
}
BtnOk.onclick = function(){ BtnOk.onclick = function(){
BtnApply.onclick(); BtnApply.onclick();
window.frameElement.popup.close(); window.frameElement.popup.close();
@ -41,9 +36,15 @@ window.onload = function(){
app.settings.grid.margin = +(GridMargins.value); app.settings.grid.margin = +(GridMargins.value);
app.settings.grid.columns = +(GridColumns.value); app.settings.grid.columns = +(GridColumns.value);
app.settings.grid.cells.margin = +(GridCellsMargins.value); app.settings.grid.cells.margin = +(GridCellsMargins.value);
//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value); app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value);
app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value);
app.settings.grid.cells.borderColor = GridCellsBorderColor.value; app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value; app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
app.settings.grid.cells.title = GridCellsTitle.checked;
app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value;
app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
app.settings.grid.cells.titleColor = GridCellsTitleColor.value; app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value; app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
app.saveSettings(); app.saveSettings();
@ -51,4 +52,41 @@ window.onload = function(){
BtnCancel.onclick = function(){ BtnCancel.onclick = function(){
window.frameElement.popup.close(); 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';
}
}
}
}
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]);
}
} }

BIN
src/src.zip Normal file
View File

Binary file not shown.