Task/fp 862 load branding from cms

taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

@@ -11,21 +11,27 @@
 /* Branding Selectors  */
 
 .branding-header {
-  margin: 0;
-  padding: 6.4px 0 6.4px; /* NO-R/EM: 0.4rem 0 0.4rem */
-  text-align: center;
+  --branding-logo-height: 24px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* This prevents header bar resize when branding is dynamically added */
+  /* CAVEAT: This is only for Portal and Docs which dynamically load content */
+  /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */
+  height: 49px;
+
+
   background-color: rgb(51, 51, 51);
   color: #fff;
   border-bottom: 1px solid #aaa;
 }
 
-.branding-header a {
-  display: inline-block;
-}
-
 .branding-seperator {
   width: 1px;
   height: 100%;
+  max-height: var(--branding-logo-height);
   border-left: solid 1px #fff;
   margin: 0 15px;
   vertical-align: middle;
@@ -45,13 +51,11 @@
 }
 
 .branding-tacc {
-  height: 24px;
-  margin: 3px 0 0 0;
+  height: var(--branding-logo-height);
 }
 
 .branding-utaustin {
-  height: 24px;
-  margin: 3px 0 0 0;
+  height: var(--branding-logo-height);
 }
 
 /* Logo Selectors  */

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -41,7 +41,7 @@ Styleguide Trumps.Scopes.Header
 
 /* Affiliation */
 
-/* (none) */
+/* SEE: taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css */
 
 
 
@@ -62,6 +62,14 @@ Styleguide Trumps.Scopes.Header
 
 /* Navigation */
 
+/* On wide viewport, prevent header resize from dynamic content */
+/* CAVEAT: This is only for Portal and Docs which dynamically load content */
+@media only screen and (min-width: 1201px) {
+  .s-header.navbar {
+    height: 50px;
+  }
+}
+
 .s-header.navbar {
   /* Make horizontal padding match the horizontal content buffer in Portal */
   /* FAQ: The `calc()` keeps track of disparate source of space values */

taccsite_cms/static/site_cms/js/modules/importHTML.js

@@ -1,3 +1,28 @@
+/**
+ * Create element from HTML string
+ * @param {String} - HTML representing a single element
+ * @return {Element}
+ * @see https://stackoverflow.com/a/35385518
+ */
+export function htmlToElement(html) {
+  var template = document.createElement('template');
+  html = html.trim(); // Never return a text node of whitespace as the result
+  template.innerHTML = html;
+  return template.content.firstChild;
+}
+
+/**
+ * Create elements from HTML string
+ * @param {String} - HTML representing any number of sibling elements
+ * @return {NodeList}
+ * @see https://stackoverflow.com/a/35385518
+ */
+export function htmlToElements(html) {
+  var template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.childNodes;
+}
+
 /**
  * Return markup from an endpoint
  * @param {string} markupURL - The URL from which to get the markup
@@ -17,7 +42,7 @@ export function getFromURL(markupURL) {
 }
 
 /**
- * Insert markup from an endpoint into a specific element
+ * Insert markup into a specific element from an endpoint
  * @param {string} markupURL - The URL from which to get the markup
  * @param {HTMLElement} container - The element into which to place the markup
  * @returns {Promise<HTMLElement>} Promise that returns the container
@@ -29,6 +54,24 @@ export function insertFromURL(markupURL, container) {
       return container;
     });
   } else {
-    return Promise.reject(new Error('Invalid `container` provided'));
+    return Promise.reject(new Error('No `markupURL` provided'));
+  }
+}
+
+/**
+ * Replace a specific element with markup from an endpoint
+ * @param {string} markupURL - The URL from which to get the markup
+ * @param {HTMLElement} placeholder - The element to replace with the markup
+ * @returns {Promise<HTMLElement>} Promise that returns the new element
+ */
+export function replaceFromURL(markupURL, placeholder) {
+  if (markupURL) {
+    return getFromURL(markupURL).then(markup => {
+      const newElement = htmlToElement(markup);
+      placeholder.replaceWith(newElement);
+      return placeholder;
+    });
+  } else {
+    return Promise.reject(new Error('No `markupURL` provided'));
   }
 }

taccsite_cms/templates/base.html

@@ -58,7 +58,7 @@
 
   <!-- Custom Navigation Block per Site to Customize the Site Header Branding. -->
   <div class="o-site__head">
-    {% include "branding.html" %}
+    {% include "header.html" %}
   </div>
 
   <!-- Page content. -->

taccsite_cms/templates/header.html

@@ -0,0 +1,33 @@
+{# WARNING: Some markup is duplicated in other repositories #}
+{# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #}
+{# FAQ: Extra lines exist to ease CMS/Portal/Guide template comparison #}
+
+<!-- Sponsor Logos -->
+{% include "header_branding.html" %}
+
+<!-- Navigation Bar -->
+<nav id="s-header" class="s-header  navbar {% if settings.PORTAL %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} navbar-dark">
+  <!-- Portal Logo -->
+  {% include "header_logo.html" %}
+
+  <!-- Navbar Accordian Toggle on Small Screens  -->
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExpandTarget" aria-controls="navbarsExpandTarget" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <!-- Navbar Links -->
+  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+    {# GL-6: Remove need for different `className` values #}
+    {% if settings.PORTAL %}
+      {# FAQ: If template were included with `only`, then it would NOT render `show_menu` #}
+      {% include "nav_cms.html" with className="navbar-nav" %}
+
+      {# NOTE: As of 2020-12, search is only available with a Portal #}
+      {% include "nav_search.html" with className="form-inline  ml-auto" only %}
+      {% include "nav_portal.html" with className="navbar-nav" settings=settings only %}
+    {% else %}
+      {# FAQ: If template were included with `only`, then it would NOT render `show_menu` #}
+      {% include "nav_cms.html" with className="navbar-nav  ml-auto" %}
+    {% endif %}
+  </div>
+</nav>

taccsite_cms/templates/header_branding.html

@@ -0,0 +1,25 @@
+{# @var brands, className #}
+{% load staticfiles custom_portal_settings %}
+
+{% with settings.BRANDING as brands %}
+<div id="header-branding" class="branding-header {{className}}">
+  {# DEBUG: #}{# <code>{{ brands|first }}</code> #}
+  {% for brand in brands %}
+    {% with filename=brand|index:1 selectors=brand|index:2 targeturl=brand|index:3 targetType=brand|index:4 accessibility=brand|index:5 corstype=brand|index:6 visibility=brand|index:7 %}
+      {% if visibility == "True" %}
+        {% if brand == brands|first %}
+        <a href="{{ targeturl }}" target="{{ targettype }}">
+          <img class="branding-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
+        </a>
+        {% elif brand != brands|first %}
+        {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #}
+        <span class="branding-seperator"></span>
+        <a href="{{ targeturl }}" target="{{ targettype }}">
+          <img class="branding-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
+        </a>
+        {% endif %}
+      {% endif %}
+    {% endwith %}
+  {% endfor %}
+</div>
+{% endwith %}

taccsite_cms/templates/header_logo.html

@@ -0,0 +1,12 @@
+{# @var logo, className #}
+{% load staticfiles custom_portal_settings %}
+
+{% with settings.LOGO as logo %}
+  {% with filename=logo|index:1 selectors=logo|index:2 targeturl=logo|index:3 targetType=logo|index:4 accessibility=logo|index:5 corstype=logo|index:6 visibility=logo|index:7 %}
+    {% if visibility == "True" %}
+    <a id="header-logo" class="navbar-brand {{className}}" href="{{ targeturl }}" target="{{ targettype }}">
+      <img class="portal-logo {{ selectors }}" src="{% static filename %}" crossorigin="{{ corstype }}" alt="{{ accessibility }}" >
+    </a>
+    {% endif %}
+  {% endwith %}
+{% endwith %}

taccsite_cms/urls.py

@@ -25,6 +25,8 @@
         # FAQ: Allow direct access to markup for Portal and User Guide to render
         url(r'^cms/nav/search/markup/$', TemplateView.as_view(template_name='nav_search.raw.html'), name='search_bar_markup'),
         url(r'^cms/nav/pages/markup/$', TemplateView.as_view(template_name='nav_cms.raw.html'), name='menu_pages_markup'),
+        url(r'^cms/header/branding/markup/$', TemplateView.as_view(template_name='header_branding.html'), name='header_branding_markup'),
+        url(r'^cms/header/logo/markup/$', TemplateView.as_view(template_name='header_logo.html'), name='header_logo_markup'),
     ]
 
 if settings.FEATURES['blog']: