added open/close functionality to settings toggle
This commit is contained in:
westtle
parent
f555782401
commit
276ac119a9
3 changed files with 102 additions and 72 deletions
|
|
@ -1,86 +1,104 @@
|
|||
let timerId;
|
||||
const settingsToggle = document.querySelector(".settings__button--toggle-settings");
|
||||
const settingsList = document.querySelector(".settings__buttons");
|
||||
const settingsItems = settingsList.querySelectorAll("a, button");
|
||||
|
||||
// HTML.
|
||||
const noteTitle = document.querySelector(".__title input");
|
||||
const noteBody = document.querySelector(".__body textarea");
|
||||
settingsToggle.addEventListener("click", () => {
|
||||
const isExpanded = (settingsToggle.getAttribute("aria-expanded") == "true");
|
||||
|
||||
const selectAllButton = document.querySelector("._select-all");
|
||||
const deleteAllButton = document.querySelector("._delete-all");
|
||||
const confirmDeleteButton = document.querySelector("._delete-confirm");
|
||||
const saveToLocalButton = document.querySelector("._save-to-local");
|
||||
if (isExpanded) {
|
||||
settingsToggle.setAttribute("aria-expanded", false);
|
||||
settingsList.setAttribute("aria-hidden", true);
|
||||
settingsItems.forEach(item => {item.tabIndex = -1;});
|
||||
} else {
|
||||
settingsToggle.setAttribute("aria-expanded", true);
|
||||
settingsList.setAttribute("aria-hidden", false);
|
||||
settingsItems.forEach(item => {item.tabIndex = 0;});
|
||||
};
|
||||
});
|
||||
|
||||
function selectAll() {
|
||||
noteBody.select();
|
||||
};
|
||||
// let timerId;
|
||||
|
||||
function showDeleteConfirm() {
|
||||
confirmDeleteButton.style.display = "inline";
|
||||
deleteAllButton.style.display = "none";
|
||||
// // HTML.
|
||||
// const noteTitle = document.querySelector(".__title input");
|
||||
// const noteBody = document.querySelector(".__body textarea");
|
||||
|
||||
timerId = setTimeout(() => {
|
||||
confirmDeleteButton.style.display = "none";
|
||||
deleteAllButton.style.display = "inline";
|
||||
}, 2500);
|
||||
};
|
||||
// const selectAllButton = document.querySelector("._select-all");
|
||||
// const deleteAllButton = document.querySelector("._delete-all");
|
||||
// const confirmDeleteButton = document.querySelector("._delete-confirm");
|
||||
// const saveToLocalButton = document.querySelector("._save-to-local");
|
||||
|
||||
function confirmDelete() {
|
||||
confirmDeleteButton.style.display = "none";
|
||||
deleteAllButton.style.display = "inline";
|
||||
// function selectAll() {
|
||||
// noteBody.select();
|
||||
// };
|
||||
|
||||
noteTitle.value = "";
|
||||
noteBody.value = "";
|
||||
// function showDeleteConfirm() {
|
||||
// confirmDeleteButton.style.display = "inline";
|
||||
// deleteAllButton.style.display = "none";
|
||||
|
||||
clearInterval(timerId);
|
||||
// timerId = setTimeout(() => {
|
||||
// confirmDeleteButton.style.display = "none";
|
||||
// deleteAllButton.style.display = "inline";
|
||||
// }, 2500);
|
||||
// };
|
||||
|
||||
saveTitle();
|
||||
saveText();
|
||||
};
|
||||
// function confirmDelete() {
|
||||
// confirmDeleteButton.style.display = "none";
|
||||
// deleteAllButton.style.display = "inline";
|
||||
|
||||
function downloadNote() {
|
||||
let title = noteTitle.value || "Simple Note";
|
||||
let text = noteBody.value;
|
||||
// noteTitle.value = "";
|
||||
// noteBody.value = "";
|
||||
|
||||
let element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', title);
|
||||
// clearInterval(timerId);
|
||||
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
// saveTitle();
|
||||
// saveText();
|
||||
// };
|
||||
|
||||
element.click(); // Not my code, I just changed it a bit haha.
|
||||
// function downloadNote() {
|
||||
// let title = noteTitle.value || "Simple Note";
|
||||
// let text = noteBody.value;
|
||||
|
||||
document.body.removeChild(element);
|
||||
};
|
||||
// let element = document.createElement('a');
|
||||
// element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
// element.setAttribute('download', title);
|
||||
|
||||
// element.style.display = 'none';
|
||||
// document.body.appendChild(element);
|
||||
|
||||
// element.click(); // Not my code, I just changed it a bit haha.
|
||||
|
||||
// document.body.removeChild(element);
|
||||
// };
|
||||
|
||||
|
||||
// Local Storage.
|
||||
const note_title = "Note_Title";
|
||||
const note_text = "Note_Text";
|
||||
// // Local Storage.
|
||||
// const note_title = "Note_Title";
|
||||
// const note_text = "Note_Text";
|
||||
|
||||
function saveTitle() {
|
||||
localStorage.setItem(note_title, noteTitle.value);
|
||||
};
|
||||
// function saveTitle() {
|
||||
// localStorage.setItem(note_title, noteTitle.value);
|
||||
// };
|
||||
|
||||
function saveText() {
|
||||
localStorage.setItem(note_text, noteBody.value);
|
||||
};
|
||||
// function saveText() {
|
||||
// localStorage.setItem(note_text, noteBody.value);
|
||||
// };
|
||||
|
||||
function loadData() {
|
||||
let titleFromStorage = localStorage.getItem(note_title) || "";
|
||||
noteTitle.value = titleFromStorage;
|
||||
// function loadData() {
|
||||
// let titleFromStorage = localStorage.getItem(note_title) || "";
|
||||
// noteTitle.value = titleFromStorage;
|
||||
|
||||
let textFromStorage = localStorage.getItem(note_text) || "";
|
||||
noteBody.value = textFromStorage;
|
||||
};
|
||||
// let textFromStorage = localStorage.getItem(note_text) || "";
|
||||
// noteBody.value = textFromStorage;
|
||||
// };
|
||||
|
||||
noteTitle.addEventListener("input", saveTitle);
|
||||
noteBody.addEventListener("input", saveText);
|
||||
// noteTitle.addEventListener("input", saveTitle);
|
||||
// noteBody.addEventListener("input", saveText);
|
||||
|
||||
selectAllButton.addEventListener("click", selectAll);
|
||||
deleteAllButton.addEventListener("click", showDeleteConfirm);
|
||||
confirmDeleteButton.addEventListener("click", confirmDelete);
|
||||
saveToLocalButton.addEventListener("click", downloadNote);
|
||||
// selectAllButton.addEventListener("click", selectAll);
|
||||
// deleteAllButton.addEventListener("click", showDeleteConfirm);
|
||||
// confirmDeleteButton.addEventListener("click", confirmDelete);
|
||||
// saveToLocalButton.addEventListener("click", downloadNote);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
loadData();
|
||||
});
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// loadData();
|
||||
// });
|
||||
|
|
@ -124,7 +124,19 @@ body {
|
|||
.settings__buttons > *,
|
||||
.settings__button--toggle-settings { margin-bottom: 1.125rem; }
|
||||
|
||||
.settings__buttons { width: 100%; }
|
||||
.settings__button--toggle-settings[aria-expanded="true"] { color: hsl(var(--color-1)); }
|
||||
|
||||
.settings__button--toggle-settings[aria-expanded="true"] + .settings__buttons {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.settings__buttons {
|
||||
width: 100%;
|
||||
transition: right cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.3s;
|
||||
|
||||
position: relative;
|
||||
right: 3.125rem;
|
||||
}
|
||||
|
||||
.settings__button {
|
||||
display: block;
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -13,17 +13,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<aside class="settings">
|
||||
<button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings">
|
||||
<button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings" aria-expanded="false" aria-controls="settings__buttons">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Settings</title>
|
||||
<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
||||
</svg>
|
||||
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings sr-only">Press to open settings.</span>
|
||||
</button>
|
||||
<ul class="settings__buttons">
|
||||
<ul id="settings__buttons" class="settings__buttons" aria-hidden="true">
|
||||
<span class="settings__separator" aria-hidden="true"></span>
|
||||
<li class="settings__button-item">
|
||||
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme">
|
||||
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme" tabindex="-1">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Theme</title>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</li>
|
||||
<span class="settings__separator" aria-hidden="true"></span>
|
||||
<li class="settings__button-item">
|
||||
<button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear">
|
||||
<button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear" tabindex="-1">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Clear Note</title>
|
||||
<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</button>
|
||||
</li>
|
||||
<li class="settings__button-item">
|
||||
<button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download">
|
||||
<button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download" tabindex="-1">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Download Note</title>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</li>
|
||||
<span class="settings__separator" aria-hidden="true"></span>
|
||||
<li class="settings__button-item">
|
||||
<a class="settings__button settings__button--github" aria-label="Github Repository (New Tab)" rel="noopener" href="#" target="_blank">
|
||||
<a class="settings__button settings__button--github" aria-label="Github Repository (New Tab)" rel="noopener" href="#" target="_blank" tabindex="-1">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Github Repository</title>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="settings__button-item">
|
||||
<a class="settings__button settings__button--westtle" aria-label="westtle's Homepage (New Tab)" rel="noopener" href="#" target="_blank">
|
||||
<a class="settings__button settings__button--westtle" aria-label="westtle's Homepage (New Tab)" rel="noopener" href="#" target="_blank" tabindex="-1">
|
||||
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
|
||||
<title>westtle's Homepage</title>
|
||||
<rect width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g>
|
||||
|
|
@ -83,6 +83,6 @@
|
|||
</section>
|
||||
</main>
|
||||
|
||||
<!-- <script type="text/javascript" src="assets/scripts/script.min.js"></script> -->
|
||||
<script type="text/javascript" src="./assets/scripts/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue