simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hyperlinked images work / working on youtube embed borders

Browse Source
This commit is contained in:
Simon
2025-08-11 23:26:18 -04:00
parent bf660799fe
commit 3cb4c20e1f
1 changed files with 157 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+140 -67
View File
@@ -66,8 +66,8 @@
.youtubeEmbed {
width: 100%;
height: 100%;
position:absolute;
border: none;
position: absolute;
display: inline;
}
.youtubeEmbedCover {
width: 100%;
@@ -76,6 +76,7 @@
position: absolute;
}
.section {
margin-top: 0rem;
}
@@ -433,19 +434,19 @@
<h2 class="menuHeader">add image to page</h2>
<input
id="newImageContainerNameInput"
placeholder="(optional) image name"
placeholder="(optional) layer name"
style="width: 100%;"
type="text"
/>
<input
id="newImageContainerUrlInput"
placeholder="direct URL to image"
placeholder="image / youtube URL"
style="width: 100%;"
type="text"
/>
<input
id="newImageContainerHyperlinkInput"
placeholder="(optional) URL to hyperlink image"
placeholder="(optional) hyperlink URL for image"
style="width: 100%;"
type="text"
/>
@@ -736,7 +737,7 @@
this.initializeYoutubeContainer();
}
else {
this.initializeImageContainer();
this.initializeImageContainer(loadingFromSave);
}
}
else {
@@ -772,7 +773,7 @@
}
this.applySettings();
this.addContainerEventListeners()
this.addContainerEventListeners();
// and save
containerDataMap.set(this.id, this);
@@ -782,21 +783,21 @@
/**
* creates image element, applySettings() will do the rest
*/
initializeImageContainer() {
initializeImageContainer(loadingFromSave) {
document.body.insertAdjacentHTML(
"beforeend",
`
${this.imageHyperlink ?
`<a class="imageHyperlink hidden" href="` + this.imageHyperlink + `">`
${loadingFromSave ?
`<a id="` + this.id + `--hyperlink" href="` + this.imageHyperlink + `">`
: ``}
<img
class="movable youtubeEmbed"
class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}"
id="${this.id}"
style="z-index: ${numberOfImageContainers + numberOfTextContainers};"
src="${this.imageUrl}"
draggable=false
/>
${this.imageHyperlink ? `</a>` : ``}
></img>
${loadingFromSave ? `</a>` : ``}
`
);
}
@@ -1654,7 +1655,25 @@
"px " +
settings.shadowRgba;
/** if this is a media container, settings diverge here */
/** BORDER */
if (this.imageUrl?.includes("youtube.com") || this.imageUrl?.includes("youtu.be")) {
// apply border to iframe and cover element rather than containing div
document.getElementById(this.id).children[0].style.borderColor =
settings.bordeColor;
document.getElementById(this.id).children[1].style.borderColor =
settings.bordeColor;
document.getElementById(this.id).children[0].style.borderWidth =
settings.borderWidth + "px";
document.getElementById(this.id).children[1].style.borderWidth =
settings.borderWidth + "px";
document.getElementById(this.id).children[0].style.borderRadius =
settings.borderRadius + "px";
document.getElementById(this.id).children[1].style.borderRadius =
settings.borderRadius + "px";
}
else {
document.getElementById(this.id).style.borderRadius =
settings.borderRadius + "px";
document.getElementById(this.id).style.borderStyle = "solid";
@@ -1662,9 +1681,9 @@
settings.borderWidth + "px";
document.getElementById(this.id).style.borderColor =
settings.borderColor;
}
/** if this is a media container, settings diverge */
/** MEDIA MIRRORING */
if (this.imageUrl != undefined) {
let invertX = settings.invertX;
let invertY = settings.invertY;
@@ -1678,11 +1697,11 @@
else if (invertY) {
document.getElementById(this.id).classList.toggle("invertedY");
}
return;
}
/** apply text-container-only customizations */
/** FONT */
if (settings.fontCode != "") {
document.head.insertAdjacentHTML(
@@ -1747,6 +1766,8 @@
addContainerEventListeners() {
let container = document.getElementById(this.id);
console.log("adding event listeners for " + this.id);
// make element movable + resizable
container.addEventListener(
"mousedown",
@@ -1991,7 +2012,8 @@
containerMapValues[i].imageUrl,
containerMapValues[i].settings,
containerMapValues[i].sections,
containerMapValues[i].youtubeId
containerMapValues[i].youtubeId,
containerMapValues[i].imageHyperlink
));
}
@@ -2136,6 +2158,77 @@
}
}
/** handles the revealing/concealing of elements part of toggling edit mode */
function toggleEditingElements(show) {
const editButton = document.getElementById("editToggle");
const settingsContainer = document.getElementById("settingsContainer");
/** when editing-mode is enabled, */
if (show) {
editButton.innerHTML = "save + stop editing";
// reveal settings container
settingsContainer.classList.remove("hidden");
// change cursor on movable elements to indicate grabbable
let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) {
// mmovableElements[i].classList.add("grabbable");
movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
}
// take hyperlinked images out of anchor tags to enable moving/resizing
let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
let parent, clone;
for (let i = 0; i < hyperlinkedImages.length; i++) {
parent = hyperlinkedImages[i].parentElement;
clone = hyperlinkedImages[i].cloneNode();
hyperlinkedImages[i].remove();
parent.parentNode.insertBefore(clone, parent);
parent.remove();
containerDataMap.get(clone.id).addContainerEventListeners();
}
// cover any youtube iframes to enable moving/resizing
let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
for (let i = 0; i < embeddedVideos.length; i++) {
embeddedVideos[i].style.display = "block";
}
} else {
// remove grabbable cursor
let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) {
movableElements[i].style.cursor = "";
}
// activate links on hyperlinked images
let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
let link, clone;
for (let i = 0; i < hyperlinkedImages.length; i++) {
containerId = hyperlinkedImages[i].id;
link = containerDataMap.get(containerId).imageHyperlink;
clone = hyperlinkedImages[i].cloneNode();
hyperlinkedImages[i].insertAdjacentHTML("afterend",
`<a id="` + containerId + `--hyperlink" href="` + link + `"></a>`
);
hyperlinkedImages[i].remove();
document.getElementById(containerId + "--hyperlink").appendChild(clone);
}
// remove any youtube iframe covers
let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
for (let i = 0; i < embeddedVideos.length; i++) {
embeddedVideos[i].style.display = "none";
}
// hide the settings container
settingsContainer.classList.add("hidden");
}
}
function toggleExpandableMenu(toggleButton) {
toggleButton.classList.toggle("active");
let menuContent = toggleButton.nextElementSibling;
@@ -2175,55 +2268,6 @@
keepImageRatio = !document.getElementById("imageRatioToggle").checked;
}
/** handles the revealing/concealing of elements part of toggling edit mode */
function toggleEditingElements(show) {
const editButton = document.getElementById("editToggle");
const settingsContainer = document.getElementById("settingsContainer");
/** when editing-mode is enabled, */
if (show) {
editButton.innerHTML = "save + stop editing";
// reveal settings container
settingsContainer.classList.remove("hidden");
// change cursor on movable elements to indicate grabbable
let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) {
// mmovableElements[i].classList.add("grabbable");
movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
}
// disable any hyperlinks on images to enable movement
let hyperlinkedImages = document.getElementsByClassName("imageHyperlink");
// TODO todo : finish this / re-enable hyperlinks
// cover any youtube iframes to enable moving/resizing
let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
for (let i = 0; i < embeddedVideos.length; i++) {
embeddedVideos[i].style.display = "block";
}
} else {
// remove grabbable cursor
let movableElements = document.getElementsByClassName("movable");
for (let i = 0; i < movableElements.length; i++) {
movableElements[i].style.cursor = "";
}
// cover any youtube iframes to enable moving/resizing
let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
for (let i = 0; i < embeddedVideos.length; i++) {
embeddedVideos[i].style.display = "none";
}
// hide the settings container
settingsContainer.classList.add("hidden");
}
}
function toggleWallpaperRepeat(checkbox) {
repeatWallpaper = this.checked;
if (repeatWallpaper) {
@@ -2280,6 +2324,7 @@
undefined,
undefined,
undefined,
undefined,
undefined
);
@@ -2500,7 +2545,8 @@
container.imageUrl,
newSettings,
container.sections,
container.youtubeId
container.youtubeId,
container.imageHyperlink
);
zIndexMap.set(numberTotalContainers + 1, clone.id);
@@ -3011,25 +3057,52 @@
let container = containerDataMap.get(containerId);
container.settings.borderWidth = borderChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderWidth =
container.settings.borderWidth + "px";
document.getElementById(containerId).children[0].style.borderWidth =
container.settings.borderWidth + "px";
}
else {
document.getElementById(containerId).style.borderWidth =
container.settings.borderWidth + "px";
}
}
function changeContainerBorderRadius(radiusChange) {
let containerId = radiusChange.target.id.split("-settings")[0];
let container = containerDataMap.get(containerId);
container.settings.borderRadius = radiusChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderRadius =
container.settings.borderRadius + "px";
document.getElementById(containerId).children[1].style.borderRadius =
container.settings.borderRadius + "px";
}
else {
document.getElementById(containerId).style.borderRadius =
container.settings.borderRadius + "px";
}
}
function changeContainerBorderColor(colorChange) {
let containerId = colorChange.target.id.split("-settings")[0];
let container = containerDataMap.get(containerId);
container.settings.borderColor = colorChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderColor =
container.settings.borderColor;
document.getElementById(containerId).children[1].style.borderColor =
container.settings.borderColor;
}
else {
document.getElementById(containerId).style.borderColor =
container.settings.borderColor;
}
}
// CLOCK
function toggleDate(checkboxChanged) {
let containerId = checkboxChanged.target.id.split("-settings")[0];