ECEP-114: Members Page (#130)

* feat(ecep): let snippet accept more markup

* chore(ecep): better comments in snippet

* feat(ecep): add permalink to members page

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

* chore(ECEP-114): simpler hr/h3 space css

* fix(ECEP-114)!: rename page-css-members.html

* fix(ECEP-114): symlink page-css-members.html

prevents breaking change; temporary patch

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

* chore(ECEP-114): remove temporary symlink

prod has deploy of latest and does not use this now

ecep-cms/static/ecep-cms/css/src/_themes/ecep.json

@@ -3,6 +3,9 @@
   "see": "https://github.com/TACC/Core-Styles/blob/main/source/_themes/default.json",
 
   "environment-variables": {
+    "// CMS": "",
+    "--cms-toolbar-height": "46px",
+
     "// HEADER": "",
     "--header-text-color": "var(--global-color-primary--xx-light)",
     "--header-bkgd-color": "#4F008F",

ecep-cms/templates/snippets/page-members-css.html

@@ -0,0 +1,66 @@
+<!-- CAVEAT: If heading level changes then update each heading selector here -->
+<style id="page-css-members">
+/* Scroll to <HR> Above Heading */
+
+/* To replace space betwen <hr> and headings with space above their anchors */
+hr { margin-bottom: 0; }
+h3 { margin-top: 0; }
+h3 > a[id] {
+  padding-top: var(--global-space--hr-margin, 1em);
+  display: inline-block;
+}
+
+
+
+/* Permalink */
+
+/* Permalink: Structure */
+
+h3 > a[id] {
+  --buffer: 0.5ex;
+  margin-left: calc( -1em - var(--buffer) );
+}
+h3 > a[id]::before {
+  margin-right: var(--buffer);
+
+  font-family: 'Cortal-Icons' !important /* prevent browser ext. font change */;
+  content: "\e92c";
+  line-height: 1;
+
+  opacity: 0.5;
+  visibility: hidden;
+}
+h3 > a[id]:hover::before { opacity: 1 }
+h3:hover > a[id]::before { visibility: visible }
+
+/* Permalink: Style */
+
+h3 > a[id] {
+  color: inherit; /* only the icon should have color */
+  text-decoration: none !important;
+}
+:not(.o-section) h3 > a[id]:hover::before,
+.o-section--style-light h3 > a[id]:hover::before {
+  color: var(--global-color-link-on-light--normal);
+}
+.o-section--style-dark h3 a[id]:hover::before {
+  color: var(--global-color-link-on-dark--normal);
+}
+
+
+
+/* Show All Link (from JavaScript) */
+
+.js-members-list a.show-all {
+  margin-top: var(--global-space--hr-margin, 1em);
+
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+</style>
+
+
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in more markup #}
+{{ html }}

ecep-cms/templates/snippets/page-members-js.html

@@ -0,0 +1,32 @@
+<script id="page-js-members" type="module">
+  /* Wrap article content in markup (so user need not maintain wrappers) */
+  import wrapElements from '/static/site_cms/js/modules/wrapElements.js';
+
+  const within = document.getElementsByClassName('js-members-list')[0];
+  const startWith = 'h3';
+  const endBefore = 'hr';
+  const wrapWith = 'article';
+  const wrapStarter = true;
+
+  wrapElements( startWith, endBefore, wrapWith, { wrapStarter, within });
+
+
+
+  /* When user navigates to article on page, hide other articles */
+  import TargetSiblingHider from '/static/site_cms/js/modules/targetSiblingHider.js';
+
+  const targetSiblingHider = new TargetSiblingHider({
+    mustCreateShowAllLink: true,
+    mustScrollToTarget: true,
+    scopeElement: within,
+    ancestorSelector: wrapWith,
+    showAllLinkClassNames: ['show-all'],
+    ignoreElements: [ within.querySelector('h2') ]
+  });
+  targetSiblingHider.toggleOnHashChange();
+</script>
+
+
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in any JavaScript #}
+{{ html }}