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 stretch mode to each tiles

Browse Source
This commit is contained in:
MatMoul 2017-11-11 02:59:25 +01:00
parent f3285e790d
commit dedd421b85
4 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/html/properties.html
View File

@ -44,6 +44,13 @@
<tr>
<td><span>Image :</span></td>
<td colspan="2">
<select id="ImageMode">
<option value="-1">Default</option>
<option value="0">Stretch</option>
<option value="1">Cover</option>
<option value="2">Contain</option>
<option value="3">Center</option>
</select>
<button id="ImageReset">Reset</button>
<button id="ImageDefault">Default</button>
<button class="hidden" id="ImageRefresh">Refresh</button>

18
src/js/background.js
View File

@ -502,18 +502,34 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
if(value.titleLocked!=null) gridNode.titleLocked = value.titleLocked;
if(value.image) gridNode.image = value.image;
else delete gridNode.image;
if(gridNode.type == app.GridNodes.GridNodeType.bookmark) gridNode.url = value.url;
if(value.imageMode || value.imageMode == 0) {
if(value.imageMode == -1) delete gridNode.imageMode;
else gridNode.imageMode = value.imageMode;
}
if(gridNode.type == app.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){
gridNode.url = value.url;
app.GridNodes.refreshNode(gridNode, function(){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
var data = { title: gridNode.title };
if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url;
browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
browser.bookmarks.update(gridNode.id, data).then(function(){
browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
});
app.GridNodes.saveNode(gridNode);
});
} else {
browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
var data = { title: gridNode.title };
if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
browser.bookmarks.update(gridNode.id, data).then(function(){
browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
});
app.GridNodes.saveNode(gridNode);
}
}
if(callback) callback(gridNode);
}
app.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID

33
src/js/dial.js
View File

@ -417,6 +417,35 @@ dial.updateGridLayout = function(){
else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px';
};
dial.populateGrid = function(){
function applyImageMode(imageMode, target){
switch(imageMode){
case -1:
target.backgroundRepeat = '';
target.backgroundSize = '';
target.backgroundPosition = '';
break;
case 0:
target.backgroundRepeat = 'no-repeat';
target.backgroundSize = '100% 100%';
target.backgroundPosition = '';
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.backgroundSize = 'auto auto';
target.backgroundPosition = 'center';
break;
}
}
populateEmpty = function(link){
link.Node = null;
link.className = 'Empty';
@ -437,6 +466,8 @@ dial.populateGrid = function(){
populateFolder = function(link, node){
link.Node = node;
link.className = 'Folder';
if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
else applyImageMode(-1, link.childNodes[0].style);
if(node.image){
if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
@ -449,6 +480,8 @@ dial.populateGrid = function(){
}
populateBookmark = function(link, node){
link.Node = node;
if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
else applyImageMode(-1, link.childNodes[0].style);
if(node.image){
link.className = 'Bookmark';
if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;

6
src/js/properties.js
View File

@ -19,6 +19,8 @@ app.init = function(){
app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){
app.node = node;
Title.value = node.title;
if(node.imageMode == 0) ImageMode.value = 0;
else if(node.imageMode) ImageMode.value = node.imageMode;
ImagePreview.style.backgroundRepeat = 'no-repeat';
ImagePreview.style.backgroundSize = '100% 100%';
switch(node.type){
@ -97,10 +99,10 @@ app.init = function(){
BtnApply.onclick = function(){
switch(app.node.type){
case app.GridNodes.GridNodeType.folder:
app.Messages.updateNode(app.node.id, { title: Title.value, image: Image })
app.Messages.updateNode(app.node.id, { title: Title.value, image: Image, imageMode: +(ImageMode.value) })
break;
case app.GridNodes.GridNodeType.bookmark:
app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image })
app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) })
break;
}
}