Skip to content

Commit

Permalink
remove js and css from profile view
Browse files Browse the repository at this point in the history
  • Loading branch information
creme332 committed May 22, 2024
1 parent f1be763 commit c072ac2
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 74 deletions.
30 changes: 30 additions & 0 deletions public/js_original/profile-view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
function openTab(evt, tabName) {
console.log("New tab = " + tabName);

// hide all tab contents
const tabcontents = [...document.getElementsByClassName("tabcontent")];
for (let i = 0; i < tabcontents.length; i++) {
tabcontents[i].style.display = "none";
}

// remove active class from the currently active tab link
const tablinks = document.getElementsByClassName("tablink");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// display content for clicked tab
document.getElementById(tabName).style.display = "block";

// set active class only to the clicked tab link
evt.currentTarget.className += " active";
}

const tabs = ["Account", "Orders", "Settings"];

window.addEventListener("DOMContentLoaded", () => {
[...document.getElementsByClassName("tablink")].forEach((tablink, i) => {
console.log(i, tablink);
tablink.addEventListener("click", (e) => openTab(e, tabs[i]));
});
});
27 changes: 24 additions & 3 deletions public/styles/views/Profile.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,32 @@ button[name="account_delete_submit"] {
background-color: red;
}

table button{
padding:5px;
table button {
padding: 5px;
}

table tr button:first-of-type{
table tr button:first-of-type {
border: 0;
background-color: red;
}

/* Style tab links */
.tablink {
float: left;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
background-color: var(--secondary);
}

.active {
background-color: var(--contrast);
color: var(--contrast-inverse);
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 20px 0;
}
88 changes: 17 additions & 71 deletions src/views/Profile.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,22 @@

?>

<style>
/* Style tab links */
.tablink {
float: left;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
background-color: var(--secondary);
}

.active {
background-color: var(--contrast);
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 20px 0;
}
</style>
<?php
if ($show_account_deletion_confirmation) : ?>
<dialog open>
<article>
<h3>Deleting your account! </h3>
<p>Are you sure you want to delete your account? This action is irreversible.</p>
<footer>
<form method="post" class="grid">
<button class="secondary" type="submit" name="cancel_delete">Cancel</button>
<button type="submit" name="confirm_delete">Confirm</button>
</form>
</footer>
</article>
</dialog>
<?php
endif; ?>

<main class="container">
<h1>My profile</h1>
Expand Down Expand Up @@ -173,53 +168,4 @@
</div>
</main>

<script>
function openTab(evt, tabName) {
console.log("New tab = " + tabName);

// hide all tab contents
const tabcontents = [...document.getElementsByClassName("tabcontent")];
for (let i = 0; i < tabcontents.length; i++) {
tabcontents[i].style.display = "none";
}

// remove active class from the currently active tab link
const tablinks = document.getElementsByClassName("tablink");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// display content for clicked tab
document.getElementById(tabName).style.display = "block";

// set active class only to the clicked tab link
evt.currentTarget.className += " active";
}

const tabs = ["Account", "Orders", "Settings"];

window.addEventListener("DOMContentLoaded", () => {
[...document.getElementsByClassName("tablink")].forEach((tablink, i) => {
console.log(i, tablink);
tablink.addEventListener("click", (e) => openTab(e, tabs[i]));
},
);
});
</script>

<?php
if ($show_account_deletion_confirmation) : ?>
<dialog open>
<article>
<h3>Deleting your account! </h3>
<p>Are you sure you want to delete your account? This action is irreversible.</p>
<footer>
<form method="post" class="grid">
<button class="secondary" type="submit" name="cancel_delete">Cancel</button>
<button type="submit" name="confirm_delete">Confirm</button>
</form>
</footer>
</article>
</dialog>
<?php
endif; ?>
<script src="/js/profile_view.bundle.js"></script>
1 change: 1 addition & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
global_view: entryPath + "global-view.js",
home_view: entryPath + "home-view.js",
product_view: entryPath + "product-view.js",
profile_view: entryPath + "profile-view.js",
cart_view: entryPath + "cart-view.js",
theme_switcher: entryPath + "theme-switcher.js",
},
Expand Down

0 comments on commit c072ac2

Please sign in to comment.