Skip to content

Commit

Permalink
WIP implementation.
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Aug 31, 2024
1 parent 3a8c196 commit 497b267
Show file tree
Hide file tree
Showing 11 changed files with 828 additions and 27 deletions.
3 changes: 3 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"tabWidth": 4
}
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ it will be styled to indicate that.
<ilw-section-nav>
<a href="#">Animal Sciences Major</a>
<ilw-section-nav>
<a href="#" aria-current="page">Companion Animal Equine Science</a>
<a href="#">Food Animal Production and Management</a>
<a href="#">Science, Pre-Veterinary, and Medical</a>
<a href="#" aria-current="page">Pre-Veterinary and Medical</a>
<a href="#">Food Animal</a>
<a href="#">Companion Animal Equine</a>
</ilw-section-nav>
<a href="#">Computer Science & Animal Science</a>
<a href="#">Computer & Animal Science</a>
<a href="#">Some Third Thing</a>
</ilw-section-nav>
</ilw-section-nav>
Expand Down
371 changes: 371 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"default": "./dist/ilw-section-nav.js"
}
},
"main":"./dist/ilw-section-nav.js",
"main": "./dist/ilw-section-nav.js",
"scripts": {
"dev": "vite",
"build": "vite build --config vite.build.config.js --emptyOutDir",
Expand All @@ -29,6 +29,8 @@
"lit": "3.1.3"
},
"devDependencies": {
"vite": "^5.2.0"
"vite": "^5.2.0",
"prettier": "^3.3.3",
"postcss-nested": "^6.2.0"
}
}
16 changes: 16 additions & 0 deletions parse-vars.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {readFileSync} from "fs";

const contents = readFileSync("src/ilw-section-nav.css", "utf-8");
const regex = /^\s*(--[\w-]+):[^;]+;\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;

let output = [];
let m;
while (m = regex.exec(contents)) {
output.push({
name: m[1],
depreciated: m[2] === "vardep",
description: m[3]
})
}

console.log(JSON.stringify(output, null, 4));
183 changes: 173 additions & 10 deletions samples/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,180 @@
<!doctype html>
<html lang="en">

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section Nav Component</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">
<link rel="stylesheet" href="https://cdn.brand.illinois.edu/components/il-header.css">
<link rel="stylesheet" href="https://cdn.brand.illinois.edu/components/il-footer.css">


<script src="https://cdn.brand.illinois.edu/components/il-header.mjs" type="module" async></script>
<script src="https://cdn.brand.illinois.edu/components/il-footer.mjs" type="module" async></script>
<script src="https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha2/ilw-page.js" type="module" async></script>
<script src="https://dev.toolkit.illinois.edu/ilw-breadcrumbs/1.0.0-alpha/ilw-breadcrumbs.js" type="module"
async></script>
<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-breadcrumbs/1.0.0-alpha/ilw-breadcrumbs.css">
<script src="https://dev.toolkit.illinois.edu/ilw-breadcrumbs/1.0.0-alpha/ilw-breadcrumbs.js" type="module"
async></script>

<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-content/1.0.0-alpha2/ilw-content.css">
<script src="https://dev.toolkit.illinois.edu/ilw-content/1.0.0-alpha2/ilw-content.js" type="module" async></script>

<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha1/ilw-columns.css">
<script src="https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha1/ilw-columns.js" type="module" async></script>

<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-page-title/1.0.0-alpha/ilw-page-title.css">
<script src="https://dev.toolkit.illinois.edu/ilw-page-title/1.0.0-alpha/ilw-page-title.js" type="module"
async></script>

<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-breadcrumbs/1.0.0-alpha/ilw-breadcrumbs.css">
<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-global/3.0.0-alpha/ilw-global.css">
<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha2/ilw-page.css">
<script type="module" src="/src/ilw-section-nav.js"></script>

<style>
body {
font-family: var(--il-font-sans);
}
</style>
<title>Section Nav Component</title>
</head>
<body style="margin: 0;">
<ilw-page class="ilw-font ilw-margin">
<il-header slot="header">
<a slot="primary-unit" href="/">Toolkit Builder 3</a>
<a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
<il-header-nav slot="navigation">
<ul>
<li><a href="/sample_page/index.html">About</a></li>
<li><a href="/sample_page/index.html">Academics</a></li>
<li><a href="/sample_page/index.html">Admissions</a></li>
<li><a href="/sample_page/index.html">Research</a></li>
<li><a href="/sample_page/index.html">Diversity</a></li>
</ul>
</il-header-nav>
</il-header>

<body style="margin: 0; padding: 0;">
<ilw-section-nav></ilw-section-nav>
<ilw-columns mode="1x3" gap="40px">
<aside>
<ilw-section-nav>
<a href="#" aria-current="page">Programs of Study</a>
<a href="#">Undergraduate Degrees</a>
<ilw-section-nav>
<a href="#">Animal Sciences Major</a>
<ilw-section-nav>
<a href="#" aria-current="page">Pre-Veterinary and Medical</a>
<a href="#">Food Animal</a>
<ilw-section-nav>
<a href="#">Deeper</a>
<ilw-section-nav>
<a href="#">And Deeper</a>
</ilw-section-nav>
</ilw-section-nav>
<a href="#">Companion Animal Equine</a>
</ilw-section-nav>
<a href="#">Computer & Animal Science</a>
</ilw-section-nav>
<a href="#">Undergraduate Degrees</a>
<ilw-section-nav>
<a href="#">Some Third Thing</a>
</ilw-section-nav>
<a href="#">Undergraduate Degrees</a>
</ilw-section-nav>
<ilw-section-nav collapse no-root>
<a href="#">Programs of Study</a>
<a href="#">Undergraduate Degrees</a>
<ilw-section-nav>
<a href="#">Animal Sciences Major</a>
<ilw-section-nav>
<a href="#" aria-current="page">Pre-Veterinary and Medical</a>
<a href="#">Food Animal</a>
<a href="#">Companion Animal Equine</a>
</ilw-section-nav>
<a href="#">Computer & Animal Science</a>
<a href="#">Some Third Thing</a>
</ilw-section-nav>
</ilw-section-nav>
</aside>
<main>
<p>
<ilw-breadcrumbs><a href="#">Home</a> <a href="#">Academics</a> <span>Graduate programs</span>
</ilw-breadcrumbs>
</p>
<ilw-page-title theme="white">
<img src="https://cdn.brand.illinois.edu/patterns/finial/orange.svg" alt="" role="presentation"
slot="background">
<h1>Graduate Programs</h1>
</ilw-page-title>
<ilw-content>
<p>Graduate Programs include:</p>
<ul>
<li>Environmental Philosophy and Ethics</li>
<li>Forest Ecology and Conservation</li>
<li>Creative Writing with a focus on Nature Literature</li>
<li>Sustainable Architecture and Design</li>
<li>Mythology and Folklore Studies</li>
<li>Psychology of Mindfulness and Well-being</li>
<li>Renewable Energy Systems and Policy</li>
<li>Herbal Medicine and Botanical Studies</li>
<li>Wildlife Management and Conservation Biology</li>
<li>Cultural Anthropology with a focus on Indigenous Practices</li>
</ul>
</ilw-content>
<ilw-content mode="lede" align="center" padding="20px 0 40px 0">
<p>Each program at Whispering Pines is designed to integrate academic excellence with an appreciation
for the natural world, fostering a unique learning environment for students.</p>
</ilw-content>
<ilw-content>
<h2>Frequently Asked Questions</h2>
</ilw-content>
</main>
</ilw-columns>
<il-footer slot='footer'>
<a slot="primary-unit" href="/">Toolkit Builder 3</a>
<a slot="site-name" href="/sample_page/index.html">Whispering Pines College</a>
<address slot="address">
<div>1313 Pine Avenue</div>
<div>Normal, ZZ 99999</div>
<div>Phone: 555-874-3000</div>
<div>Email: [email protected]</div>
</address>
<div slot="actions">
<a href="#">Give</a>
<a href="#">Apply</a>
</div>
<nav slot="social" aria-label="Social media">
<ul>
<li><a data-service="facebook" href="#">Facebook</a></li>
<li><a data-service="instagram" href="#">Instagram</a></li>
<li><a data-service="linkedin" href="#">LinkedIn</a></li>
</ul>
</nav>
<ilw-columns>
<ilw-content theme="gray">
<p class="ilw-heading">Explore</p>
<ul>
<li><a href="#">Calendars</a></li>
<li><a href="#">Directory</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Maps</a></li>
<li><a href="#">Strategic Plan</a></li>
<li><a href="#">Diversity and Equity</a></li>
<li><a href="#">Plan a Visit</a></li>
</ul>
</ilw-content>
<ilw-content theme="gray">
<p class="ilw-heading">Connect</p>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Graduate Programs</a></li>
<li><a href="#">Online Programs</a></li>
<li><a href="#">Research Partners</a></li>
<li><a href="#">Office of the Dean</a></li>
</ul>
</ilw-content>
</ilw-columns>
</il-footer>
</ilw-page>
</body>

</html>
</html>
72 changes: 72 additions & 0 deletions src/ManualSlotController.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* A simple Lit reactive controller to apply manual slotting to a component.
*
* Using manual slotting gives us the ability to surround the child nodes with additional
* elements without resorting to manipulating the page's DOM. This is important for
* elements with strict parent-child relationships, like `ul` and `li`, since otherwise
* they would require the component's user to add those elements.
*
* When using this:
* - Make sure your component has `slotAssignment: "manual"` in its shadowRootOptions.
* - Add the `_observer = new ManualSlotController(this)` property to your component's class.
* - In your component's render, map over children to create the slots. Something like:
*
* ```
* ${map(Array.from(this.children), () => html`<li><slot></slot></li>`)}
* ```
*/
export class ManualSlotController {
/**
* @type import("lit").LitElement
* @private
*/
_host;

/**
* @type MutationObserver
* @private
*/
_observer;

/**
* @param {import("lit").LitElement} host
*/
constructor(host) {
this._host = host;
this._observer = new MutationObserver((list) => {
this._host.requestUpdate();
});
// This binds the controller to the element's lifecycle
host.addController(this);
}

/**
* Find the child nodes and slots, and assign the children to each slot.
*
* The render of the host component is expected to create the slots, but this
* function will take care of assigning the elements to them.
* @private
*/
_refreshInternal() {
let items = Array.from(this._host.children);
let slots = Array.from(this._host.shadowRoot.querySelectorAll('slot'));
for (let slot of slots) {
if (items.length > 0) {
slot.assign(items.shift());
}
}
}

hostUpdated() {
// Called by Lit after the host component's render.
this._refreshInternal();
}

hostConnected() {
this._observer.observe(this._host, {childList: true});
}

disconnect() {
this._observer.disconnect();
}
}
44 changes: 44 additions & 0 deletions src/ilw-section-nav.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@layer base {
:root {
--ilw-section-nav--margin: 1.5em 0 0 0;

--ilw-section-nav--color: var(--il-blue);
--ilw-section-nav--color--focus: var(--il-blue);
--ilw-section-nav--color--hover: var(--il-altgeld);
--ilw-section-nav--color--active: var(--il-altgeld);
--ilw-section-nav--line-height: 2.75rem; /*var: Height of a nav element*/
--ilw-section-nav--level-padding: 0.9375rem; /*var: Left indentation for levels*/
--ilw-section-nav--level2-padding: 1.5625rem; /*var: Specific indentation for level 2 children*/
--ilw-section-nav--level0-font-size: 1.125rem; /*var: First level children font size*/
--ilw-section-nav--level1-font-size: 1rem; /*var: Font size for all deeper children*/
--ilw-section-nav--font-weight: 600; /*var: Font weight for menu items*/

--ilw-section-nav--item-padding: 0 10px 0 20px;

--ilw-section-nav--level1-border: 1px solid var(--il-storm-lighter-3);

--ilw-section-nav--root-font-size: 1.25rem;
--ilw-section-nav--root-background: var(--il-storm-lighter-4);
--ilw-section-nav--root-font-weight: 700;
}
}

ilw-section-nav {
a {
color: var(--ilw-section-nav--color);
text-decoration: var(--ilw-link--focused-background-color);
display: block;
padding: var(--ilw-section-nav--item-padding);

&[aria-current="page"] {
color: var(--ilw-section-nav--color--active);
}
&:hover {
text-decoration: underline;
color: var(--ilw-section-nav--color--hover);
}
&:focus {
color: var(--ilw-section-nav--color--focus);
}
}
}
Loading

0 comments on commit 497b267

Please sign in to comment.