From 9b210322816d822e50b1a637bfa71664f9c1f325 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 25 Jan 2021 17:03:30 -0600 Subject: [PATCH 01/10] FP-862: Extract branding & logo to 2 new templates --- taccsite_cms/templates/branding.html | 33 ++------------------- taccsite_cms/templates/header_branding.html | 23 ++++++++++++++ taccsite_cms/templates/header_logo.html | 11 +++++++ 3 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 taccsite_cms/templates/header_branding.html create mode 100644 taccsite_cms/templates/header_logo.html diff --git a/taccsite_cms/templates/branding.html b/taccsite_cms/templates/branding.html index f9e643cf1..109b8c5a3 100644 --- a/taccsite_cms/templates/branding.html +++ b/taccsite_cms/templates/branding.html @@ -3,41 +3,13 @@ {# WARNING: Some markup is duplicated in other repositories #} {# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #} -{% with settings.BRANDING as branding %} -
- {# DEBUG: #}{# {{ branding|first }} #} - {% for brand in branding %} - {% 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 == branding|first %} - - - - {% elif brand != branding|first %} - {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} - - - - - {% endif %} - {% endif %} - {% endwith %} - {% endfor %} -
-{% endwith %} +{% include "header_branding.html" with brands=settings.BRANDING %} -{% with settings.LOGO as logo %} -{% endwith %} diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html new file mode 100644 index 000000000..270f5a5dd --- /dev/null +++ b/taccsite_cms/templates/header_branding.html @@ -0,0 +1,23 @@ +{# @var brands #} +{% load staticfiles custom_portal_settings %} + +
+ {# DEBUG: #}{# {{ brands|first }} #} + {% 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 %} + + + + {% elif brand != brands|first %} + {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} + + + + + {% endif %} + {% endif %} + {% endwith %} + {% endfor %} +
diff --git a/taccsite_cms/templates/header_logo.html b/taccsite_cms/templates/header_logo.html new file mode 100644 index 000000000..6300b6017 --- /dev/null +++ b/taccsite_cms/templates/header_logo.html @@ -0,0 +1,11 @@ +{# @var logo #} +{% load staticfiles custom_portal_settings %} + + +{% 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" %} + + + + {% endif %} +{% endwith %} From f0b367455ae50868d08babc1eba68fcdaaa18352 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 25 Jan 2021 17:48:07 -0600 Subject: [PATCH 02/10] FP-862: Add branding & logo {{className}} and [id] --- taccsite_cms/templates/header_branding.html | 4 ++-- taccsite_cms/templates/header_logo.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html index 270f5a5dd..107f3a011 100644 --- a/taccsite_cms/templates/header_branding.html +++ b/taccsite_cms/templates/header_branding.html @@ -1,7 +1,7 @@ -{# @var brands #} +{# @var brands, className #} {% load staticfiles custom_portal_settings %} -
+
{# DEBUG: #}{# {{ brands|first }} #} {% 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 %} diff --git a/taccsite_cms/templates/header_logo.html b/taccsite_cms/templates/header_logo.html index 6300b6017..7568412b6 100644 --- a/taccsite_cms/templates/header_logo.html +++ b/taccsite_cms/templates/header_logo.html @@ -1,10 +1,10 @@ -{# @var logo #} +{# @var logo, className #} {% load staticfiles custom_portal_settings %} {% 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" %} - + {% endif %} From 4369812913fd1d1e78d88eb603294115d83eb594 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 25 Jan 2021 17:48:46 -0600 Subject: [PATCH 03/10] FP-862: Support remote access to branding & logo --- .../static/site_cms/js/modules/importHTML.js | 47 ++++++++++++++++++- taccsite_cms/urls.py | 2 + 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/taccsite_cms/static/site_cms/js/modules/importHTML.js b/taccsite_cms/static/site_cms/js/modules/importHTML.js index 3984f6755..9d9627190 100644 --- a/taccsite_cms/static/site_cms/js/modules/importHTML.js +++ b/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} 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} Promise that returns the new element + */ +export function replaceFromURL(markupURL, placeholder) { + if (markupURL) { + return getFromURL(markupURL).then(markup => { + newElement = htmlToElement(markup); + placeholder.replaceWith(newElement); + return container; + }); + } else { + return Promise.reject(new Error('No `markupURL` provided')); } } diff --git a/taccsite_cms/urls.py b/taccsite_cms/urls.py index 054d0c541..c406a3aac 100755 --- a/taccsite_cms/urls.py +++ b/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']: From fcbabea32a4f28cf31b95d489fc42032de74663d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 26 Jan 2021 18:01:38 -0600 Subject: [PATCH 04/10] FP-862: Fix typo in importHtml.js --- taccsite_cms/static/site_cms/js/modules/importHTML.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/taccsite_cms/static/site_cms/js/modules/importHTML.js b/taccsite_cms/static/site_cms/js/modules/importHTML.js index 9d9627190..ca1aae4bc 100644 --- a/taccsite_cms/static/site_cms/js/modules/importHTML.js +++ b/taccsite_cms/static/site_cms/js/modules/importHTML.js @@ -67,9 +67,9 @@ export function insertFromURL(markupURL, container) { export function replaceFromURL(markupURL, placeholder) { if (markupURL) { return getFromURL(markupURL).then(markup => { - newElement = htmlToElement(markup); + const newElement = htmlToElement(markup); placeholder.replaceWith(newElement); - return container; + return placeholder; }); } else { return Promise.reject(new Error('No `markupURL` provided')); From 96217418765ed658a60524cc0fc3c1fd8c156067 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 26 Jan 2021 20:58:22 -0600 Subject: [PATCH 05/10] FP-862: Fix settings passing for branding & logos --- taccsite_cms/templates/branding.html | 4 ++-- taccsite_cms/templates/header_branding.html | 2 ++ taccsite_cms/templates/header_logo.html | 15 ++++++++------- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/taccsite_cms/templates/branding.html b/taccsite_cms/templates/branding.html index 109b8c5a3..f24afebd0 100644 --- a/taccsite_cms/templates/branding.html +++ b/taccsite_cms/templates/branding.html @@ -4,12 +4,12 @@ {# SEE: https://confluence.tacc.utexas.edu/x/LoCnCQ #} -{% include "header_branding.html" with brands=settings.BRANDING %} +{% include "header_branding.html" %}