Task/ecep 114 members page and supporting core changes (#481)

* ECEP-114: Floating Nav Pattern

* ECEP-114: Floating Nav Pattern: Boxed Modifier

* ECEP-114: Floating Nav → Nav (& Fully Working)

* ECEP-114: Nav Polish

* ECEP-114: Nav Fixes & Polish (Item Alignment)

* ECEP-114: Nav Fixes (Unpolished) (List Padding)

* ECEP-114: Polish List Pad Fixes from Last Commit

* ECEP-114: Noop: Nav Comment Polish

* ECEP-114: Noop: Comment on DJANGOCMS_STYLE_CHOICES

* ECEP-114: Simple Typography Changes

* ECEP-114: Heading Typography Changes

* ECEP-114: Updates to Support ECEP States/Members Page (#459)

* doc(ECEP-113): comment on bootstrap class in django.cms.css

* doc(ECEP-114): explain switch from hidden to clip

* fix(ECEP-114): consistent <hr> space

* style(ECEP-114): update submod to main

* feat(ecep): add permalink to members page

* feat(ecep): update core-styles to branch head

* fix(ecep): add lost theme var --cms-toolbar-height

* feat(javascript): targetSiblingHider, wrapElements

* feat(ecep): auto wrap articles, only show targeted

* chore(ecep): remove temporary symlink

* feat(core-styles): some ecep-114/3 css to share

* chore(taccsite_custom): merge main

* chore(ecep): taccsite_custom merge main

* chore(core-styles): update since merging main

* chore(core-styles): update since merging main

* chore(submod): update w/ latest merge of main

* chore(core-styles): load latest relevant commit

this fixes build error about missing c-nav stylesheet

* feat(ECEP-114): move show all link to under nav

- move "show all" link in ECEP
- support passing manually-created "show all" link

* chore(core-styles): load latest relevant commit

removes link depress UX, designer did not like it during ECEP-114 review

* fix(ECEP-114): fix bad symlink path

* fix(ECEP-114): larger nav link click area

* chore(ECEP-114): save submod changes off of branch

* fix(ECEP-114): misc nav pattern fixes

* chore(ECEP-114): pull merged submod & core-styles

Co-authored-by: W. Bomar <[email protected]>

taccsite_cms/static/site_cms/js/modules/targetSiblingHider.js

@@ -13,35 +13,42 @@ export default class TargetSiblingHider {
    * @param {boolean} [options.mustCreateShowAllLink=true] - Whether to create "show all" link
    * @param {boolean} [options.mustScrollToTarget=false] - Whether to scroll to target element
    * @param {array<string>} [options.showAllLinkClassNames=[]] - List of extra classnames for "show all" link (only works with `mustCreateShowAllLink: true`)
+   * @param {HTMLElement} [options.showAllLink] - A "show all" link to use
    * @param {HTMLElement} [options.scopeElement=document] - The element within which to control toggling
    * @param {string} [options.ancestorSelector] - Whether & How to select ancestor to toggle (instead of target)
    * @param {array<HTMLElement>} [options.ignoreElements] - A list of elements to not hide nor show
    */
   constructor( options ) {
     this.#opts = Object.assign({
-      mustCreateShowAllLink: true,
       scopeElement: document,
       showAllLinkClassNames: [],
       ignoreElements: []
     }, options );
 
     this.showAllLink;
 
-    if ( this.#opts.mustCreateShowAllLink ) {
+    if ( ! options.mustCreateShowAllLink && ! options.showAllLink ) {
+      console.error('A "Show All" link must be provided or auto-created. Pass either "mustCreateShowAllLink" or "showAllLink".');
+    }
+    if ( options.mustCreateShowAllLink && options.showAllLink ) {
+      console.error('A "Show All" link can not be both provided and auto-created. Pass either "mustCreateShowAllLink" or "showAllLink".');
+    }
+
+    if ( this.#opts.mustCreateShowAllLink === true ) {
       this.showAllLink = this.createShowAllLink({
         classNames: this.#opts.showAllLinkClassNames
       });
-    } else {
-      this.showAllLink = this.#opts.scopeElement.getElementsByClassName(
-        this.#CLASSNAME.showAll
-      );
+      this.#opts.scopeElement.prepend( this.showAllLink );
+    } else if ( this.#opts.showAllLink ) {
+      this.showAllLink = this.#opts.showAllLink;
+      this.showAllLink.classList.add( this.#CLASSNAME.showAll );
+      this.showAllLink.href = '#'; /* triggers hide on click */
     }
 
-    this.showAllLink.addEventListener('click', this.showAll(
-      this.#opts.scopeElement
-    ));
+    this.showAllLink.addEventListener('click',
+      this.showAll( this.#opts.scopeElement )
+    );
     this.hide( this.showAllLink );
-    this.#opts.scopeElement.prepend( this.showAllLink );
 
     if ( this.#opts.mustScrollToTarget ) {
       this.enableScrollFix();
@@ -57,7 +64,7 @@ export default class TargetSiblingHider {
 
       const target = document.getElementById( location.hash.substring(1) );
 
-      // Check because our "show all" link's empty hash results in no target
+      // Check because auto "show all" link's empty hash results in no target
       if ( target ) {
         const elementsToHide = this.getElementsToHide( target );
 

taccsite_cms/templates/snippets/manual-pattern-library/c-nav.content.html

@@ -1 +1 @@
-../../../static/site_cms/css/src/_imports/components/c-nav.html
+../../../../node_modules/@tacc/core-styles/source/_imports/components/c-nav.html