GAUD-9165 - Implement the d2l-page skeleton #6904
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| # Page | ||
|
|
||
| The `d2l-page` and page layout components are in progress. | ||
|
|
||
| Please reach out before using them! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import '../../collapsible-panel/collapsible-panel.js'; | ||
| import '../page.js'; | ||
| import { css, html, LitElement, nothing } from 'lit'; | ||
| import { navStyles } from './temp-nav-styles.js'; | ||
| import { selectStyles } from '../../inputs/input-select-styles.js'; | ||
|
|
||
| /** | ||
| * Component for d2l-page demos and tests | ||
| */ | ||
| class PageDemo extends LitElement { | ||
|
|
||
| static properties = { | ||
| demoMode: { type: Boolean, attribute: 'demo-mode' }, | ||
| hasFooter: { type: Boolean, attribute: 'has-footer' }, | ||
| hasSideNavPanel: { type: Boolean, attribute: 'has-side-nav-panel' }, | ||
| hasSupportingPanel: { type: Boolean, attribute: 'has-supporting-panel' }, | ||
| navType: { type: String, attribute: 'nav-type' }, | ||
| widthType: { type: String, attribute: 'width-type' }, | ||
| _allowThreePanels: { state: true } | ||
| }; | ||
|
|
||
| static styles = [navStyles, selectStyles, css` | ||
| .demo-controls { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 0.75rem; | ||
| } | ||
| `]; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this._allowThreePanels = false; // Temp for dev/testing | ||
|
Contributor
Author
There was a problem hiding this comment. This is really handy for dev, but will go away if we aren't supporting it. Likewise, we need to decide what happens if people try to use both - throw an error? Simply hide the supporting panel? Something else?
Contributor
Author
There was a problem hiding this comment. Made a story to come back to this question: https://desire2learn.atlassian.net/browse/GAUD-9885 |
||
| this.demoMode = false; | ||
| this.hasFooter = false; | ||
| this.hasSideNavPanel = false; | ||
| this.hasSupportingPanel = false; | ||
| this.navType = 'full'; | ||
| /** @type {'normal'|'wide'|'fullscreen'} */ | ||
| this.widthType = 'normal'; | ||
| } | ||
|
|
||
| render() { | ||
| return html` | ||
| <d2l-page width-type="${this.widthType}"> | ||
| ${this.navType === 'full' ? this.#renderFullNav() : this.#renderImmersiveNav()} | ||
| ${this.#renderSideNavPanel()} | ||
| ${this.#renderMainPanel()} | ||
| ${this.#renderSupportingPanel()} | ||
| ${this.#renderFooter()} | ||
| </d2l-page> | ||
| `; | ||
| } | ||
|
|
||
| #handleAllowThreePanelsChange(e) { | ||
| this._allowThreePanels = e.target.on; | ||
| if (!this._allowThreePanels && this.hasSideNavPanel && this.hasSupportingPanel) { | ||
| this.hasSupportingPanel = false; | ||
| } | ||
| } | ||
|
|
||
| #handleNavTypeChange(e) { | ||
| this.navType = e.target.on ? 'immersive' : 'full'; | ||
| } | ||
|
|
||
| #handleVisibilityChange(e) { | ||
| const key = e.target.dataset.key; | ||
| this[key] = e.target.on; | ||
|
|
||
| if (this._allowThreePanels) return; | ||
| if (e.target.on && key === 'hasSideNavPanel' && this.hasSupportingPanel) { | ||
| this.hasSupportingPanel = false; | ||
| } else if (e.target.on && key === 'hasSupportingPanel' && this.hasSideNavPanel) { | ||
| this.hasSideNavPanel = false; | ||
| } | ||
| } | ||
|
|
||
| #handleWidthTypeChange(e) { | ||
| this.widthType = e.target.value; | ||
| } | ||
|
|
||
| #renderDemoMainControls() { | ||
| return this.demoMode ? html` | ||
| <d2l-collapsible-panel panel-title="Demo Controls" expanded> | ||
| <div class="demo-controls"> | ||
| <select class="d2l-input-select" name="width-type" aria-label="Width type" @change="${this.#handleWidthTypeChange}"> | ||
| <option value="normal" ?selected="${this.widthType === 'normal'}">Normal Width</option> | ||
| <option value="wide" ?selected="${this.widthType === 'wide'}">Wide Width</option> | ||
| <option value="fullscreen" ?selected="${this.widthType === 'fullscreen'}">Fullscreen</option> | ||
| </select> | ||
| <d2l-switch id="switch-nav-type" text="Immersive Nav" @change="${this.#handleNavTypeChange}"></d2l-switch> | ||
| <d2l-switch id="switch-side-nav-panel" text="Side Nav Panel" data-key="hasSideNavPanel" @change="${this.#handleVisibilityChange}" ?on="${this.hasSideNavPanel}"></d2l-switch> | ||
| <d2l-switch id="switch-supporting-panel" text="Supporting Panel" data-key="hasSupportingPanel" @change="${this.#handleVisibilityChange}" ?on="${this.hasSupportingPanel}"></d2l-switch> | ||
| <d2l-switch id="switch-footer" text="Footer" data-key="hasFooter" @change="${this.#handleVisibilityChange}"></d2l-switch> | ||
| <d2l-switch id="switch-allow-three-panels" text="Allow Three Panels" @change="${this.#handleAllowThreePanelsChange}"></d2l-switch> | ||
| </div> | ||
| </d2l-collapsible-panel> | ||
| ` : nothing; | ||
| } | ||
|
|
||
| #renderFooter() { | ||
| return this.hasFooter ? html` | ||
| <div slot="footer"> | ||
| I'm in the <b>footer</b> slot of the <b>d2l-page</b> component! | ||
| </div> | ||
| ` : nothing; | ||
| } | ||
|
|
||
| #renderFullNav() { | ||
| // Update with navigation components once available | ||
| return html` | ||
| <div slot="header" class="full-nav-wrapper"> | ||
| <div class="nav-band"></div> | ||
| <div class="full-nav-header"> | ||
| <div class="full-nav-header-left"> | ||
| <span class="full-nav-logo">Logo</span> | ||
| <div class="full-nav-separator"></div> | ||
| <button class="nav-icon-btn">📚 Courses</button> | ||
| </div> | ||
| <div class="full-nav-header-spacer"></div> | ||
| <div class="full-nav-header-right"> | ||
| <button class="nav-icon-btn" title="Alerts">🔔</button> | ||
| <button class="nav-icon-btn" title="Settings">⚙️</button> | ||
| <button class="nav-icon-btn" title="Profile">👤</button> | ||
|
Member
There was a problem hiding this comment. These are lovely! We should use them in the real nav. 😆 |
||
| </div> | ||
| </div> | ||
| <div class="full-nav-footer"> | ||
| <div class="full-nav-footer-inner"> | ||
| <a class="full-nav-footer-link" href="javascript:void(0)">Content</a> | ||
| <a class="full-nav-footer-link" href="javascript:void(0)">Assignments</a> | ||
| <a class="full-nav-footer-link" href="javascript:void(0)">Quizzes</a> | ||
| <a class="full-nav-footer-link" href="javascript:void(0)">Grades</a> | ||
| <a class="full-nav-footer-link" href="javascript:void(0)">Classlist</a> | ||
| </div> | ||
| </div> | ||
| <div class="nav-shadow"></div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| #renderImmersiveNav() { | ||
| // Update with navigation components once available | ||
| return html` | ||
| <div id="immersive-nav" slot="header" class="immersive-wrapper"> | ||
|
dlockhart marked this conversation as resolved.
|
||
| <div class="nav-band"></div> | ||
| <div class="immersive-container"> | ||
| <div class="immersive-left"> | ||
| <a class="immersive-back-link" href="javascript:void(0)"> | ||
| <span class="immersive-back-icon">‹</span> | ||
| Back to Course | ||
| </a> | ||
| </div> | ||
| <div class="immersive-middle"> | ||
| Assignment 1 - Introduction to Economics | ||
| </div> | ||
| <div class="immersive-right"> | ||
| <button class="nav-icon-btn">‹ Prev</button> | ||
| <button class="nav-icon-btn">Next ›</button> | ||
| </div> | ||
| </div> | ||
| <div class="nav-shadow"></div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| #renderMainPanel() { | ||
| return html` | ||
| <div> | ||
| <p>I'm in the <b>default</b> slot of the <b>d2l-page</b> component!</p> | ||
| ${this.#renderDemoMainControls()} | ||
| <div style="align-items: end; display: flex; height: 500px;">End of Content</div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| #renderSideNavPanel() { | ||
| return this.hasSideNavPanel ? html` | ||
| <div style="background-color: lavender; height: 1000px;" slot="side-nav"> | ||
|
Contributor
Author
There was a problem hiding this comment. Colours here are temporary until the layout components are added and the demo is more fleshed out. Just thought it looked nice. |
||
| I'm in the <b>side-nav</b> slot of the <b>d2l-page</b> component! | ||
| </div> | ||
| ` : nothing; | ||
| } | ||
|
|
||
| #renderSupportingPanel() { | ||
| return this.hasSupportingPanel ? html` | ||
| <div style="background-color: aliceblue; height: 1000px;" slot="supporting"> | ||
| I'm in the <b>supporting</b> slot of the <b>d2l-page</b> component! | ||
| </div> | ||
| ` : nothing; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('d2l-page-demo', PageDemo); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>d2l-page</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="../../demo/styles.css" type="text/css"> | ||
| <script type="module"> | ||
| import '../../demo/demo-page.js'; | ||
| import './page-component.js'; | ||
| </script> | ||
|
dlockhart marked this conversation as resolved.
|
||
| </head> | ||
| <body> | ||
| <d2l-page-demo demo-mode></d2l-page-demo> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Was thinking I could also use this component for
vdiff, so this is a bit heavy (being able to set controls with the switches and by a consumer, and hide the switches to look better in the vdiff. We can simplify this if that doesn't end up happening.