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

Feature: Add stretch mode for back and folder icon

Browse Source
This commit is contained in:
MatMoul 2017-11-11 01:11:08 +01:00
parent 07dfa858e8
commit 2aebed015f
4 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/html/settings.html
View File

@ -82,12 +82,28 @@
<tr>
<td>
<div>Back :</div>
<div>
<select id="GridBackMode">
<option value="0">Stretch</option>
<option value="1">Cover</option>
<option value="2">Contain</option>
<option value="3">Center</option>
</select>
</div>
<button id="GridBackImageReset">Reset</button>
<input id="GridBackImageFile" type="file" style="width:220px;">
<div id="GridBackPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
</td>
<td>
<div>Folder :</div>
<div>
<select id="GridFolderMode">
<option value="0">Stretch</option>
<option value="1">Cover</option>
<option value="2">Contain</option>
<option value="3">Center</option>
</select>
</div>
<button id="GridFolderImageReset">Reset</button>
<input id="GridFolderImageFile" type="file" style="width:220px;">
<div id="GridFolderPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>

4
src/js/background.js
View File

@ -113,7 +113,9 @@ app.Settings.init = function(callback){ // Load settings and nodes
columns: 5,
backNode: true,
backIcon: 'url(/img/back.png)',
backIconMode: 3,
folderIcon: 'url(/img/folder.png)',
folderIconMode: 2,
loadingIcon: 'url(/img/throbber.gif)',
cells: {
margin: 4,
@ -180,6 +182,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
});
}
if(!data.settings.backgroundMode) data.settings.backgroundMode = 0;
if(!data.settings.grid.backIconMode) data.settings.grid.backIconMode = 3;
if(!data.settings.grid.folderIconMode) data.settings.grid.folderIconMode = 2;
if(!data.settings.grid.cells.opacity) data.settings.grid.cells.opacity = 1;
if(!data.settings.grid.cells.opacityHover) data.settings.grid.cells.opacityHover = 1;
if(!data.settings.grid.cells.borderSize) data.settings.grid.cells.borderSize = 1;

48
src/js/dial.js
View File

@ -248,32 +248,36 @@ dial.initMenus = function(){
document.body.appendChild(dial.ItemMenu);
}
dial.initStyles = function(){
function applyImageMode(imageMode, target){
switch(imageMode){
case 0:
target.backgroundRepeat = 'no-repeat';
target.backgroundSize = '100% 100%';
break;
case 1:
target.backgroundRepeat = 'no-repeat';
target.backgroundSize = 'cover';
target.backgroundPosition = 'center';
break;
case 2:
target.backgroundRepeat = 'no-repeat';
target.backgroundSize = 'contain';
target.backgroundPosition = 'center';
break;
case 3:
target.backgroundRepeat = 'no-repeat';
target.backgroundPosition = 'center';
break;
}
}
var oldStyle = dial.Style;
dial.Style = document.createElement('style'), StyleSheet;
document.head.appendChild(dial.Style);
dial.styles = {};
dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style;
dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; }')].style;
switch(app.settings.backgroundMode){
case 0:
dial.styles.body.backgroundRepeat = 'no-repeat';
dial.styles.body.backgroundSize = '100% 100%';
break;
case 1:
dial.styles.body.backgroundRepeat = 'no-repeat';
dial.styles.body.backgroundSize = 'cover';
dial.styles.body.backgroundPosition = 'center';
break;
case 2:
dial.styles.body.backgroundRepeat = 'no-repeat';
dial.styles.body.backgroundSize = 'contain';
dial.styles.body.backgroundPosition = 'center';
break;
case 3:
dial.styles.body.backgroundRepeat = 'no-repeat';
dial.styles.body.backgroundPosition = 'center';
break;
}
applyImageMode(app.settings.backgroundMode, dial.styles.body);
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.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
@ -289,8 +293,10 @@ dial.initStyles = function(){
dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover;
dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style;
dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; background-repeat: no-repeat; background-position: center center; }')].style;
dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; }')].style;
applyImageMode(app.settings.grid.backIconMode, dial.styles.grid.linkBack);
dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
applyImageMode(app.settings.grid.folderIconMode, dial.styles.grid.linkFolder);
dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
if(oldStyle) document.head.removeChild(oldStyle);

4
src/js/settings.js
View File

@ -31,10 +31,12 @@ app.init = function(){
GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns;
GridBackNode.checked = app.settings.grid.backNode;
GridBackMode.value = app.settings.grid.backIconMode;
GridBackImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundRepeat = 'no-repeat';
GridBackPreview.style.backgroundPosition = '50% 50%';
GridFolderMode.value = app.settings.grid.folderIconMode;
GridFolderImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundRepeat = 'no-repeat';
@ -81,7 +83,9 @@ app.init = function(){
app.settings.grid.margin = +(GridMargins.value);
app.settings.grid.columns = +(GridColumns.value);
app.settings.grid.backNode = GridBackNode.checked;
app.settings.grid.backIconMode = +(GridBackMode.value);
app.settings.grid.backIcon = GridBackImage;
app.settings.grid.folderIconMode = +(GridFolderMode.value);
app.settings.grid.folderIcon = GridFolderImage;
app.settings.grid.cells.margin = +(GridCellsMargins.value);
app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);