diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 184 |
1 files changed, 111 insertions, 73 deletions
diff --git a/startpage.html b/startpage.html index e55bec7..5ef9054 100644 --- a/startpage.html +++ b/startpage.html @@ -314,33 +314,30 @@ <p> you are now editing the page!<br /><br /> - this is the settings box - there are various tabs containing various + this is the settings box - use the tabs above to find various customization options for your startpage experience.<br /><br /> - this box is adjustable, just like every layer you add to the page. - you can drag it around the page, and dragging with right click will - adjust the size of the layer.<br /><br /> + this box is adjustable, and so will be every layer you add to the page. + click + drag to move, right-click + drag to resize.<br /><br /> on the "layers" tab, you can add two types of layers to the page: </p> <ol> <li> <b>bookmark layer:</b><br />a customizable box that can serve as a clock, - tell you the date, and hold bookmarks all at once. it can also just be - one of those things, or any combination.<br /><br />to group a bookmarks - together within a layer, enter the respective links with the same "section". - uncategorized (no section specified) bookmarks will stay at the top of their layer. + tell you the date, and/or hold bookmarks.<br /><br />to group a bookmarks + together within a layer, enter links with the same "section". + uncategorized (no "section" specified) bookmarks will stay at the top of their layer. </li><br /> <li> - <b>image layer:</b><br />paste any URL that points directly at an image or GIF - to add it to the page.<br /><br />use "free transform" in the "global - settings" tab to change the image resizing style. + <b>media layer:</b><br />paste any URL that either points directly to an image/GIF + or to a youtube video to add it to the page.<br /><br />use "free transform" in the + "global settings" tab to change the container's resizing style. </li> </ol> <p> <b>your changes will be saved to the page when you exit editing mode.</b><br /><br /> - to go back to the last saved state while still editing the page (or to revert/undo - live changes), refresh the page without disabling / exiting "editing" mode. + to undo current changes / revert to the last saved state, refresh the page without disabling / exiting "editing" mode. <br /><br /> that concludes the basics. there's some more advanced information below: @@ -360,17 +357,15 @@ <hr /> <p> <u>precise adjustments:</u> - if you click on a slider to focus it, and then keep your mouse hovered over it, - you can use the arrow keys to make minute adjustments. + click on a slider (e.g. border width) to focus it, keep your mouse hovered over it, + and use the arrow keys to make minute changes. </p> <hr /> <p> <u>floating text</u>:<br /> - for floating text anywhere on the page, remove the border and set the - background opacity of a layer to zero.<br /> then, add new sections to the - layer without any link information (sections can be added on their own). - customize the layer's "section" text to your liking and place the text - wherever you want. + create a bookmark layer, remove the border, and set the background opacity to zero. + <br /> then, add new sections to the layer without entering any label/link information. + customize the layer's section text to your liking and place wherever you want. </p> </div> @@ -384,8 +379,8 @@ <a href="https://fonts.google.com/" target="blank">google fonts</a>. <br /><br /> - beware, if you have multiple font families selected (it keeps track of - all of the fonts you press "get font" on), only the first one will be + NOTE: if you have multiple font families in your cart (it tracks all + of the fonts you press "get font" on), only the top one will be loaded. also, only regular versions of fonts are supported.<br /><br /> to load a font:<br /> @@ -410,12 +405,12 @@ </div> <div class="expandableMenu"> <p> - you can export your entire current page's setup to your clipboard in the - "import / export" tab. open a text file and paste the contents to store + you can export your current page's entire setup to your clipboard in the + "import / export" tab. save the contents somewhere on your computer to store your theme for later or for sharing with others.<br /><br /> - to load in a theme, simply paste the output of the export button into the - "import" input, and refresh the page. + to load in a theme, simply paste exported data into the "import" input, + and refresh the page (ignore the warning that saved data will be lost). </p> </div> @@ -431,12 +426,12 @@ type="text" /> <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)"> - create new layer + create layer </button> </div> <div style="display:flex;flex-direction:column;align-items:center;"> - <h2 class="menuHeader">add image to page</h2> + <h2 class="menuHeader">add media layer</h2> <input id="newImageContainerNameInput" placeholder="(optional) layer name" @@ -451,13 +446,13 @@ /> <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> - place image + create layer </button> <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">layer list</h2> <div style="display: flex; flex-direction: row; justify-content: space-around; margin-bottom: 1rem;"> <button onclick="collapseLayerListings()">collapse all listings</button> <button onclick="expandLayerListings()">expand all listings</button> @@ -481,13 +476,15 @@ </div> <div id="globalSettingsPage" class="tabContent"> - <p class="menuHeader">image manipulation</p> + <p class="menuHeader">media manipulation</p> <div class="containerOptionListing" style="margin-bottom: 2rem;"> - <label for="imageRatioToggle">image free transform mode</label> + <label for="imageRatioToggle">free transform mode</label> <input type="checkbox" id="imageRatioToggle" /> </div> - <p class="menuHeader">change page wallpaper</p> + <hr /> + + <p class="menuHeader">change wallpaper</p> <div class="containerOptionListing"> <label for="wallpaperUrl">set image as wallpaper: </label> <div style="display: flex; flex-direction: column; align-items: end;"> @@ -507,9 +504,10 @@ <input type="color" id="wallpaperColorPicker" /> </div> + <hr /> <p class="menuHeader">change cursors</p> - <p>for reference: <a target="_blank" href="https://www.totallyfreecursors.com/">cursors</a></p> + <p><a target="_blank" href="https://www.totallyfreecursors.com/">site with a bunch of cursors for reference</a> (copy desired cursor image URLs for below)</p> <div class="containerOptionListing"> <label for="pointerCursorInput">change normal cursor:</label> <div style="display: flex; flex-direction: column; align-items: end;"> @@ -532,34 +530,33 @@ </div> </div> + <hr /> + <p class="menuHeader">audio</p> - <div class="containerOptionListing"> - <label for=audioLinkInput">paste a direct URL to an audio file:</label> + <div class="containerOptionListing"> + <label for=audioLinkInput">paste a direct URL to an audio file:</label> - <div style="display: flex; flex-direction: column; align-items: end;"> - <input id="audioLinkInput" /> - <button onclick="setAudioLink()">set audio</button> + <div style="display: flex; flex-direction: column; align-items: end;"> + <input id="audioLinkInput" /> + <button onclick="setAudioLink()">set audio</button> + </div> </div> - </div> - <div class="containerOptionListing"> - <label for="autoplayAudioToggle">auto-play when page loads? </label> - <input id="autoplayAudioToggle" type="checkbox" checked /> - </div> + <div class="containerOptionListing"> + <label for="autoplayAudioToggle">auto-play when page loads? </label> + <input id="autoplayAudioToggle" type="checkbox" checked /> + </div> - <audio id="audio" controls style="width: 100%"> - <source id="audioSource" src="" type="audio/mp3" /> - </audio> + <audio id="audio" controls style="width: 100%"> + <source id="audioSource" src="" type="audio/mp3" /> + </audio> - <p> - (note: this will require either white-listing this site in your browser - or generally enabling "allow auto-play audio" in your browser's settings. - </p> + <p> + (note: this will require either white-listing this site in your browser + or generally enabling "allow auto-play audio" in your browser's settings. + </p> </div> </div> - todo: - <br />add check for youtube container in border functions - <br />rename stuff | better function names | imageUrl -> mediaUrl | etc. </body> <script> @@ -724,7 +721,6 @@ this.id = findLowestAvailableId(); this.mediaUrl = mediaUrl; - this.imageHyperlink = imageHyperlink.length == 0 ? undefined : imageHyperlink ; // deep copy default settings this.settings = JSON.parse(JSON.stringify(defaultImageContainerSettings)); @@ -787,7 +783,7 @@ document.body.insertAdjacentHTML( "beforeend", ` - ${loadingFromSave ? + ${loadingFromSave && this.imageHyperlink ? `<a id="` + this.id + `--hyperlink" href="` + this.imageHyperlink + `">` : ``} <img @@ -1142,7 +1138,7 @@ </p> </div> - <div style="display: flex; flex-direction: column; align-items: end;"> + <div style="display: flex; flex-direction: column; align-items: end; gap: .5rem;"> <input id=${this.id + "-settings-font-input"} /> <br /> <button id=${this.id + "-settings-set-font-button"}>set font</button> @@ -1382,16 +1378,32 @@ </div> `; - // TODO set up the rest of the container option listings (an add and remove hyperlink button should be added) and then embed in the listing if it's an image container - // then, we'll need to make event listeners and functions for adding it / removing it. - // lastly/ revist constructor, as now there will never be such thing as creating a new hyperlinked image from scratch. they'd only be from save let imageHyperlinkOptions = ` - <input - id="newImageContainerHyperlinkInput" - placeholder="(optional) hyperlink URL for image" - style="width: 100%;" - type="text" - /> + <p class="menuHeader">set image hyperlink</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-image-hyperlink-input"}>hyperlink image</label> + + <div style="display: flex; flex-direction: column; align-items: end; gap: .5rem"> + <input + id=${this.id + "-settings-image-hyperlink-input"} + placeholder="URL to apply to image" + style="width: 100%;" + type="text" + /> + <button id=${this.id + "-settings-image-hyperlink-set-button"} onclick="setImageHyperlink(this)"> + set hyperlink + </button>`; + + if (this.imageHyperlink) { + imageHyperlinkOptions += ` + <button id=${this.id + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)"> + remove hyperlink + </button>`; + } + + imageHyperlinkOptions += ` + </div> + </div> `; document.getElementById("containers").insertAdjacentHTML( @@ -1415,6 +1427,8 @@ <hr /> + ${this.youtubeId ? `` : imageHyperlinkOptions} + <p class="menuHeader">image shape</p> <div class="containerOptionListing"> <label for=${this.id + "-settings-border-radius"}>roundness: </label> @@ -2365,12 +2379,8 @@ let mediaUrl = document.getElementById( "newImageContainerUrlInput" ).value; - let imageHyperlink = document.getElementById( - "newImageContainerHyperlinkInput" - ).value; document.getElementById("newImageContainerNameInput").value = ""; document.getElementById("newImageContainerUrlInput").value = ""; - document.getElementById("newImageContainerHyperlinkInput").value = ""; let container = new Container( undefined, @@ -2383,7 +2393,7 @@ undefined, undefined, undefined, - imageHyperlink + undefined ); container.createMediaContainerMenuListing(); @@ -3328,7 +3338,35 @@ container.settings.autoplay = checkbox.checked; } - + + // IMAGE HYPERLINKS + function setImageHyperlink(button) { + let containerId = button.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + + let input = document.getElementById(containerId + "-settings-image-hyperlink-input").value; + if (input == "") { + return; + } + document.getElementById(containerId + "-settings-image-hyperlink-input").value = ""; + + if (container.imageHyperlink == undefined) { + document.getElementById(containerId + "-settings-image-hyperlink-set-button") + .insertAdjacentHTML("afterend", ` + <button id=${containerId + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)">remove hyperlink</button>`); + } + container.imageHyperlink = input; + document.getElementById(containerId).classList.add("hyperlinkedImage"); + } + + function removeImageHyperlink(button) { + let containerId = button.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + + container.imageHyperlink = undefined; + document.getElementById(containerId).classList.remove("hyperlinkedImage"); + document.getElementById(containerId + "-settings-image-hyperlink-remove-button").remove(); + } /************************************ * RESET / IMPORT & EXPORT HANDLERS * ************************************/ @@ -3363,7 +3401,7 @@ alert( "data import successful. " + "please refresh the page!" + - "\n(you can ignore unsaved changes warning, the imported data has already been saved)" + "\n(you can ignore unsaved changes warning, the imported data has already been loaded + stored)" ); justImported = true; } |