[feature] add link item background video

This commit is contained in:
zombieFox 2020-07-29 23:21:01 +01:00
parent 016a58df48
commit c83f01f72e
18 changed files with 1029 additions and 662 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.73.0",
"version": "5.74.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.73.0",
"version": "5.74.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js",
"scripts": {

BIN
src.zip Normal file

Binary file not shown.

View File

@ -225,12 +225,12 @@
transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
}
.link-image {
background-image: var(--link-item-image-url);
.link-background-image {
background-image: var(--link-item-background-image-url);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var(--link-item-image-opacity);
opacity: var(--link-item-background-opacity);
position: absolute;
top: 0;
left: 0;
@ -240,6 +240,28 @@
pointer-events: none;
}
.link-background-video {
opacity: var(--link-item-background-opacity);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.link-background-video video {
opacity: var(--link-item-background-opacity);
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.is-link-style-block .link-panel-front {
padding: calc(1em * var(--link-item-padding));
}
@ -1143,7 +1165,7 @@
/* link form */
.link-form {
margin-bottom: 2em;
margin-bottom: calc(var(--form-wrap-space) * 4);
}
.link-form-area {
@ -1153,7 +1175,7 @@
@media (min-width: 900px) {
.link-form-area {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 5fr 2fr;
grid-gap: calc(var(--form-wrap-space) * 2);
align-items: stretch;
}

View File

@ -3,7 +3,7 @@
top: 50%;
left: 50%;
font-size: 1em;
width: 50em;
width: var(--modal-size);
max-width: calc(100% - 2em);
min-width: 10em;
transform: translate(-50%, -50%);
@ -13,15 +13,6 @@
z-index: var(--z-index-modal);
}
.modal-large {
width: 70em;
max-width: calc(100% - 2em);
}
.modal-small {
width: 30em;
}
.modal-wrapper {
background-color: rgb(var(--theme-color-01));
border-radius: var(--theme-radius);
@ -50,7 +41,7 @@
}
.modal-body-spacer {
margin: 2em;
margin: calc(var(--form-wrap-space) * 2) calc(var(--form-wrap-space) * 2.5);
}
.modal-heading:focus {

View File

@ -116,7 +116,7 @@
--link-item-visual-element-color-focus-hover: var(--theme-style-text);
--link-item-name-color: var(--theme-color-14);
--link-item-name-color-focus-hover: var(--theme-style-text);
--link-item-image-opacity: 1;
--link-item-background-opacity: 1;
--link-item-size: 1em;
--link-item-display-space: 0.25em;
--link-item-border: 0;
@ -274,6 +274,11 @@
--edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
/* modal */
--modal-small: 30em;
--modal-medium: 50em;
--modal-large: 70em;
--modal-size: var(--modal-medium);
/* z index */
--z-index-background: 1000;
--z-index-link: 2000;

View File

@ -18,7 +18,7 @@
@@include("./bookmarks/accent.html")
@@include("./bookmarks/image.html")
@@include("./bookmarks/background.html")
@@include("./bookmarks/border.html")

View File

@ -0,0 +1,29 @@
<div id="menu-content-bookmarks-background" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Background</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<div class="form-inline">
<button class="control-link-item-background-show button button-line" tabindex="-1">Show all</button>
<button class="control-link-item-background-hide button button-line" tabindex="-1">Hide all</button>
</div>
</div>
<div class="form-wrap">
<p class="control-link-item-background-helper form-helper-item">Show or hide all Bookmark Background images or videos.</p>
<p class="control-link-item-background-helper form-helper-item">This can also be changed by editing individual Bookmarks.</p>
</div>
<hr>
<div class="form-wrap">
<label for="control-link-item-background-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-link-item-background-opacity-range" class="control-link-item-background-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-background-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-background-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<button class="control-link-item-background-opacity-apply button button-line" tabindex="-1">Apply to all</button>
</div>
</div>
</div>

View File

@ -1,18 +0,0 @@
<div id="menu-content-bookmarks-image" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Background image</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label for="control-link-item-image-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-link-item-image-opacity-range" class="control-link-item-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-link-item-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-link-item-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<button class="control-link-item-image-opacity-apply button button-line" tabindex="-1">Apply to all</button>
</div>
</div>
</div>

View File

@ -41,7 +41,7 @@
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
<a href="#menu-content-bookmarks-image" class="menu-nav-sub button button-small" tabindex="-1">Background image</a>
<a href="#menu-content-bookmarks-background" class="menu-nav-sub button button-small" tabindex="-1">Background</a>
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>

View File

@ -76,9 +76,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -150,9 +157,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -224,9 +238,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -298,9 +319,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -372,9 +400,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -446,9 +481,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -529,9 +571,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,
@ -603,9 +652,16 @@ var bookmarks = (function() {
},
opacity: 1
},
image: {
url: "",
opacity: 1
background: {
show: false,
type: "image",
opacity: 1,
image: {
url: ""
},
video: {
url: ""
}
},
wide: false,
tall: false,

View File

@ -6182,9 +6182,23 @@ var control = (function() {
link.groupAndItems();
}
}],
image: [{
element: ".control-link-item-image-opacity-range",
path: "link.item.image.opacity",
background: [{
element: ".control-link-item-background-show",
type: "button",
func: function() {
link.mod.item.background.show();
link.groupAndItems();
}
}, {
element: ".control-link-item-background-hide",
type: "button",
func: function() {
link.mod.item.background.hide();
link.groupAndItems();
}
}, {
element: ".control-link-item-background-opacity-range",
path: "link.item.background.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
@ -6192,14 +6206,14 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-link-item-image-opacity-number",
path: "link.item.image.opacity",
element: ".control-link-item-background-opacity-number",
path: "link.item.background.opacity",
type: "number",
valueConvert: ["float"]
}]
}, {
element: ".control-link-item-image-opacity-number",
path: "link.item.image.opacity",
element: ".control-link-item-background-opacity-number",
path: "link.item.background.opacity",
type: "number",
valueConvert: ["float"],
valueModify: {
@ -6207,23 +6221,23 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-link-item-image-opacity-range",
path: "link.item.image.opacity",
element: ".control-link-item-background-opacity-range",
path: "link.item.background.opacity",
type: "number",
valueConvert: ["float"]
}]
}, {
element: ".control-link-item-image-opacity-default",
element: ".control-link-item-background-opacity-default",
type: "button",
func: function() {
mod.default("link.item.image.opacity");
mod.default("link.item.background.opacity");
render.update.control.menu();
}
}, {
element: ".control-link-item-image-opacity-apply",
element: ".control-link-item-background-opacity-apply",
type: "button",
func: function() {
link.mod.item.image.opacity();
link.mod.item.background.opacity();
link.groupAndItems();
}
}],
@ -11448,6 +11462,14 @@ var control = (function() {
".control-link-item-accent-by-custom",
".control-link-item-accent-apply",
".control-link-item-accent-rainbow",
".control-link-item-background-show",
".control-link-item-background-hide",
".control-link-item-background-helper",
"[for=control-link-item-background-opacity-range]",
".control-link-item-background-opacity-range",
".control-link-item-background-opacity-number",
".control-link-item-background-opacity-default",
".control-link-item-background-opacity-apply",
"[for=control-link-item-border-range]",
".control-link-item-border-range",
".control-link-item-border-number",

File diff suppressed because it is too large Load Diff

View File

@ -77,21 +77,24 @@ var modal = (function() {
cancelAction: null,
actionText: "OK",
cancelText: "Cancel",
size: "medium"
size: "medium",
width: null
};
if (override) {
options = helper.applyOptions(options, override);
};
var _makeModal = function() {
var body = helper.e("body");
var modal = helper.node("div");
var modal = helper.node("div|class:modal");
var modalWrapper = helper.node("div|class:modal-wrapper");
if (options.size == "large") {
modal.setAttribute("class", "modal modal-large");
if (options.width && typeof options.width == "number") {
modal.setAttribute("style", "--modal-size: " + options.width + "em;");
} else if (options.size == "small") {
modal.setAttribute("class", "modal modal-small");
} else {
modal.setAttribute("class", "modal");
modal.setAttribute("style", "--modal-size: var(--modal-small);");
} else if (options.size == "medium") {
modal.setAttribute("style", "--modal-size: var(--modal-medium);");
} else if (options.size == "large") {
modal.setAttribute("style", "--modal-size: var(--modal-large);");
};
modal.close = function() {
if (modal.classList.contains("is-opaque")) {

View File

@ -205,7 +205,7 @@ var state = (function() {
b: 0
}
},
image: {
background: {
opacity: 1
},
display: {
@ -455,7 +455,7 @@ var state = (function() {
color: {
opacity: 1
},
image: {
background: {
opacity: 1
},
display: {

View File

@ -1326,6 +1326,30 @@ var update = (function() {
data.state.link.item.accent.by = "theme";
delete data.state.link.item.display.visual.show;
return data;
},
"5.74.0": function(data) {
data.bookmarks.forEach(function(group, index) {
group.items.forEach(function(item, index) {
item.background = {
show: false,
type: "image",
opacity: item.image.opacity,
image: {
url: item.image.url
},
video: {
url: ""
}
};
if (item.image.url != "") {
item.background.show = true;
};
delete item.image;
});
});
data.state.link.item.background = data.state.link.item.image;
delete data.state.link.item.image;
return data;
}
};

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.73.0";
var current = "5.74.0";
var name = "Jaded Raven";

View File

@ -2,7 +2,7 @@
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.73.0",
"version": "5.74.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"