mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-29 05:51:26 +02:00
[feature] add link item background video
This commit is contained in:
parent
016a58df48
commit
c83f01f72e
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.73.0",
|
||||
"version": "5.74.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@ -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": {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -18,7 +18,7 @@
|
||||
|
||||
@@include("./bookmarks/accent.html")
|
||||
|
||||
@@include("./bookmarks/image.html")
|
||||
@@include("./bookmarks/background.html")
|
||||
|
||||
@@include("./bookmarks/border.html")
|
||||
|
||||
|
29
src/html/menu/content/bookmarks/background.html
Normal file
29
src/html/menu/content/bookmarks/background.html
Normal 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>
|
@ -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>
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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",
|
||||
|
1383
src/js/link.js
1383
src/js/link.js
File diff suppressed because it is too large
Load Diff
@ -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")) {
|
||||
|
@ -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: {
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.73.0";
|
||||
var current = "5.74.0";
|
||||
|
||||
var name = "Jaded Raven";
|
||||
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user