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

added tab kb-shortcuts, changed bookmark buttons, and added

Browse Source 
collapse/expand all menu listing buttons
This commit is contained in:
Simon
2025-07-25 18:05:09 -04:00
parent db8ddb23a5
commit 0de3d69358
1 changed files with 66 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+66 -31
View File
@@ -104,8 +104,8 @@
.tabContent { .tabContent {
display: none; display: none;
flex-direction: column; flex-direction: column;
padding-left: 1rem; padding-left: 1.5rem;
padding-right: 1rem; padding-right: 1.5rem;
} }
a.visited { a.visited {
@@ -187,12 +187,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: .5rem;
} }
.linkListingContainer { .linkListingContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: .5rem;
} }
.containerOptionListing { .containerOptionListing {
@@ -266,13 +268,13 @@
<a class="tab" id="globalSettingsTab" style="margin: 0 2rem 0 0;">global settings</a> <a class="tab" id="globalSettingsTab" style="margin: 0 2rem 0 0;">global settings</a>
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<a class="tab" id="instructionsTab" style="margin: 0;">help</a> <a class="tab" id="helpTab" style="margin: 0;">help</a>
<a class="tab" id="ioTab" style="margin: 0 0 0 2rem;">import / export</a> <a class="tab" id="ioTab" style="margin: 0 0 0 2rem;">import / export</a>
</div> </div>
</div> </div>
<div> <div>
<div id="instructionsPage" class="tabContent"> <div id="helpPage" class="tabContent">
<p> <p>
you are now editing the page!<br /><br /> you are now editing the page!<br /><br />
@@ -294,7 +296,7 @@
will stay at the top. will stay at the top.
</li><br /> </li><br />
<li> <li>
<b>image layer:</b><br />paste any URL that points directly at an image <b>image layer:</b><br />paste any URL that points directly at an image or GIF
(right click on a picture on any website and click "copy link to image") (right click on a picture on any website and click "copy link to image")
to add it to the page.<br /><br />use "free transform" in the "global to add it to the page.<br /><br />use "free transform" in the "global
settings" tab to change the image resizing mode when customizing the page. settings" tab to change the image resizing mode when customizing the page.
@@ -379,7 +381,7 @@
</div> </div>
<div id="containerPage" class="tabContent"> <div id="containerPage" class="tabContent">
<div> <div style="display:flex;flex-direction:column;align-items:center;">
<h2 class="menuHeader">add bookmark layer</h2> <h2 class="menuHeader">add bookmark layer</h2>
<input <input
id="newTextContainerNameInput" id="newTextContainerNameInput"
@@ -392,7 +394,7 @@
</button> </button>
</div> </div>
<div> <div style="display:flex;flex-direction:column;align-items:center;">
<h2 class="menuHeader">add image to page</h2> <h2 class="menuHeader">add image to page</h2>
<input <input
id="newImageContainerNameInput" id="newImageContainerNameInput"
@@ -409,7 +411,10 @@
<button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)">
place image place image
</button> </button>
<a href="https://imgur.com/upload" target="_blank" style="color: black">imgur upload for convenience</a> <a href="https://imgur.com/upload" target="_blank" style="color: black; font-size: .75rem;">imgur upload for convenience</a>
</div>
<div>
<h2 class="menuHeader">layers</h2> <h2 class="menuHeader">layers</h2>
<div style="display: flex; flex-direction: row; justify-content: space-around; margin-bottom: 1rem;"> <div style="display: flex; flex-direction: row; justify-content: space-around; margin-bottom: 1rem;">
<button onclick="collapseLayerListings()">collapse all listings</button> <button onclick="collapseLayerListings()">collapse all listings</button>
@@ -511,9 +516,6 @@
</p> </p>
</div> </div>
</div> </div>
todo: make tab shortcuts.
also change section buttons to actual buttons, and collapse / expand all logic
</body> </body>
<script> <script>
@@ -809,23 +811,22 @@
${i == 0 ? "" : `<br />`} ${i == 0 ? "" : `<br />`}
<div id="${this.id}-section-listing--${i}" class="sectionListingContainer"> <div id="${this.id}-section-listing--${i}" class="sectionListingContainer">
<span class=${this.id + "-section"}> <span class=${this.id + "-section"}>
${sectionData[i].label == "" ? "uncategorized links: " : "<u>section</u>: " + sectionData[i].label} ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label}
</span> </span>
<div class="bookmarkListingButtons"> <div class="bookmarkListingButtons">
${(i > 1) ? ` ${(i > 1) ? `
<span onClick="reorderSection(this, 'up')" class="bookmarkButton"> <button onClick="reorderSection(this, 'up')" class="bookmarkButton">
[up] up
</span> </button>
` : `` ` : `` }
}
${(i > 0) && (i < sectionData.length - 1) ? ` ${(i > 0) && (i < sectionData.length - 1) ? `
<span onClick="reorderSection(this, 'down')" class="bookmarkButton"> <button onClick="reorderSection(this, 'down')" class="bookmarkButton">
[down] down
</span> </button>
` : `` ` : `` }
} <button onClick="deleteSection(this)" class="deleteButton">delete section</button>
<span onClick="deleteSection(this)" class="bookmarkDeleteButton">[delete section]</span>
</div> </div>
</div> </div>
` `
@@ -850,18 +851,18 @@
<div class="bookmarkListingButtons"> <div class="bookmarkListingButtons">
${l > 0 ? ` ${l > 0 ? `
<span onClick="reorderLink(this, 'up')" class="bookmarkButton"> <button onClick="reorderLink(this, 'up')" class="bookmarkButton">
[up] up
</span> </button>
` : `` ` : ``
} }
${l < sectionData[s].links.length - 1 ? ` ${l < sectionData[s].links.length - 1 ? `
<span onClick="reorderLink(this, 'down')" class="bookmarkButton"> <button onClick="reorderLink(this, 'down')" class="bookmarkButton">
[down] down
</span> </button>
` : `` ` : ``
} }
<span onClick="deleteLink(this)" class="bookmarkDeleteButton">[delete link]</span> <button onClick="deleteLink(this)" class="deleteButton">delete link</button>
</div> </div>
</div> </div>
` `
@@ -1696,6 +1697,18 @@
if (e.key == "Escape" && editing) { if (e.key == "Escape" && editing) {
toggleEditMode(); toggleEditMode();
} }
if (e.key == "1" && editing) {
changeActiveTab({target: { id: "containerTab" }});
}
if (e.key == "2" && editing) {
changeActiveTab({target: { id: "globalSettingsTab" }});
}
if (e.key == "3" && editing) {
changeActiveTab({target: { id: "helpTab" }});
}
if (e.key == "4" && editing) {
changeActiveTab({target: { id: "ioTab" }});
}
}); });
/** set up cursors */ /** set up cursors */
@@ -1808,7 +1821,7 @@
setupSettingsContainer(); setupSettingsContainer();
// load last active settings tab user was on // load last active settings tab user was on
activeTabId = activeTabId =
JSON.parse(localStorage.getItem("activeTabId")) || "instructionsTab"; JSON.parse(localStorage.getItem("activeTabId")) || "helpTab";
document.getElementById( document.getElementById(
activeTabId.replace("Tab", "Page") activeTabId.replace("Tab", "Page")
).style.display = "flex"; ).style.display = "flex";
@@ -1974,6 +1987,28 @@
} }
} }
function collapseLayerListings() {
let listings = document.getElementsByClassName("containerListing");
for (let i = 0; i < listings.length; i++) {
// first child of a container listing is always the menu toggle
if (listings[i].children[0].classList.contains("active")) {
toggleExpandableMenu(listings[i].children[0]);
}
}
}
function expandLayerListings() {
let listings = document.getElementsByClassName("containerListing");
for (let i = 0; i < listings.length; i++) {
// first child of a container listing is always the menu toggle
if (!listings[i].children[0].classList.contains("active")) {
toggleExpandableMenu(listings[i].children[0]);
}
}
}
function toggleImageRatio() { function toggleImageRatio() {
keepImageRatio = !document.getElementById("imageRatioToggle").checked; keepImageRatio = !document.getElementById("imageRatioToggle").checked;
} }