Skip to content
Snippets Groups Projects
Commit cb042dff authored by Kevin Paxman's avatar Kevin Paxman
Browse files

Merge branch 'feature/ISTWCMS-4837-ebremner-layouts' into '8.x-3.x'

Feature/istwcms 4837 ebremner layouts

See merge request !57
parents fdb539cd 2b9ad506
No related branches found
No related tags found
1 merge request!57Feature/istwcms 4837 ebremner layouts
Showing
with 6245 additions and 6425 deletions
This diff is collapsed.
This diff is collapsed.
......@@ -106,6 +106,31 @@ const compileStyles = () => {
.pipe(dest(cssSrc));
};
const layoutsSrc = [
path.join(__dirname, '/source/uw-dashboards.scss')
];
const compileLayoutStyles = () => {
return src(layoutsSrc)
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(
sass({
includePaths: ['./node_modules/breakpoint-sass/stylesheets'],
precision: 10,
})
)
.pipe(
postcss([
require('postcss-assets')(),
require('autoprefixer')({
remove: false,
}),
])
)
.pipe(dest(cssSrc));
};
const buildPatternLab = () => {
return patternLab.build({ cleanPublic: true, watch: false });
};
......@@ -168,7 +193,7 @@ const watchFiles = () => {
const buildComponentScripts = (exports.buildScripts = series(compileComponentScripts));
const buildStyles = (exports.buildStyles = series(lintStyles, compileStyles));
const buildStyles = (exports.buildStyles = series(lintStyles, compileStyles, compileLayoutStyles));
const build = (isProduction = true ) => {
const scriptTask = isProduction ? bundleScripts : bundleScriptsDev;
......
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.expandcollapse = {
attach: function (context, settings) {
......@@ -64,6 +68,10 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
......@@ -112,6 +120,10 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.imagegallery = {
attach: function (context, settings) {
......@@ -155,6 +167,10 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.multitypelist = {
attach: function (context, settings) {
......@@ -167,28 +183,29 @@
return;
}
// Add a click event handler to each tab
// Add a click event handler to each tab.
tabs.forEach(tab => {
tab.addEventListener("click", changeTabs);
});
// Enable arrow navigation between tabs in the tab list
// Enable arrow navigation between tabs in the tab list.
let tabFocus = 0;
tabList.addEventListener("keydown", e => {
// Move right
// Move right.
if (e.keyCode === 39 || e.keyCode === 37) {
tabs[tabFocus].setAttribute("tabindex", -1);
if (e.keyCode === 39) {
tabFocus++;
// If we're at the end, go to the start
// If we're at the end, go to the start.
if (tabFocus >= tabs.length) {
tabFocus = 0;
}
// Move left
} else if (e.keyCode === 37) {
// Move left.
}
else if (e.keyCode === 37) {
tabFocus--;
// If we're at the start, move to the end
// If we're at the start, move to the end.
if (tabFocus < 0) {
tabFocus = tabs.length - 1;
}
......@@ -205,20 +222,20 @@
const parent = target.parentNode;
const grandparent = parent.parentNode;
// Remove all current selected tabs
// Remove all current selected tabs.
parent
.querySelectorAll('[aria-selected="true"]')
.forEach(t => t.setAttribute("aria-selected", false));
// Set this tab as selected
// Set this tab as selected.
target.setAttribute("aria-selected", true);
// Hide all tab panels
// Hide all tab panels.
grandparent
.querySelectorAll('[role="tabpanel"]')
.forEach(p => p.setAttribute("hidden", true));
// Show the selected panel
// Show the selected panel.
grandparent.parentNode
.querySelector(`#${target.getAttribute("aria-controls")}`)
.removeAttribute("hidden");
......@@ -228,6 +245,10 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($) {
Drupal.behaviors.responsive_menu_combined = {
attach: function (context, settings) {
......@@ -248,7 +269,8 @@
$list.hide();
$('span:first-child',this).html('&#9656;');
$(this).attr('aria-expanded', 'false');
} else {
}
else {
$list.show();
$('span:first-child',this).html('&#9662;');
$(this).attr('aria-expanded', 'true');
......@@ -259,8 +281,10 @@
})(jQuery);
/**
* Ckeditor Modal
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
......@@ -273,15 +297,19 @@
}
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.menuhorizontal = {
attach: function (context, settings) {
// uw-horizontal-nav
// uw-horizontal-nav.
$(document).ready(function () {
// Have to add the run this code only once, so that multiple
// loads of the menu are not shown when logged in.
$(document, context).once('menuhorizontal').each( function () {
$(document, context).once('menuhorizontal').each(function () {
const toggle = document.querySelector(".uw-navigation-button");
const navHeader = document.querySelector(".uw-header__navigation");
......@@ -297,7 +325,8 @@
navHeader.classList.remove('open');
navHeader.classList.add('close');
$('html').removeClass('no-scroll');
} else {
}
else {
this.classList.add('active');
this.setAttribute('aria-expanded', 'true');
navHeader.classList.remove('close');
......@@ -324,31 +353,33 @@
this.setAttribute('aria-expanded', 'false');
}
// If hamburger
// If hamburger.
if (screenWidth <= 767) {
// Look at parents and reset the menus
// Look at parents and reset the menus.
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
$('.uw-horizontal-nav--main').css('display', 'block');
}
}
} else if ($('.submenu-active')) {
}
else if ($('.submenu-active')) {
// Get elements with .submnenu-active than close them,
// Get elements with .submnenu-active than close them,.
$('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
// and open this one.
// And open this one.
this.classList.add("submenu-active");
this.setAttribute('aria-expanded', 'true');
// If hamburger
// If hamburger.
if (screenWidth <= 767) {
// Look at parents and hide other menus if not secondary and open
// Look at parents and hide other menus if not secondary and open.
if (parent.classList.contains('uw-horizontal-nav--secondary')) {
$('.uw-horizontal-nav--main').css('display', 'none');
$('.uw-horizontal-nav--secondary').css('display', 'block');
}
}
} else {
}
else {
this.classList.add('submenu-active');
this.setAttribute('aria-expanded', 'true');
}
......@@ -382,7 +413,7 @@
}
// Space bar keypress to open close menu
// keyCode to be deprecated find way to use key
// keyCode to be deprecated find way to use key.
});
item.addEventListener('keypress', function (e) {
if (e.keyCode == 32) {
......@@ -395,11 +426,11 @@
document.addEventListener("click", closeSubmenu, false);
// If Toggle on page Add event listeners on the menu toggle button.
if (toggle){
if (toggle) {
toggle.addEventListener("click", toggleMenu, false);
}
// apply timeout to the to event firing
// Apply timeout to the to event firing
// so it fires at end of event.
function debouncer(func) {
var timeoutID,
......@@ -417,17 +448,19 @@
// Check the width of the screen and
// force the button click if wider that 767px.
function menuCheckWidth() {
// Set screenWidth var
// Set screenWidth var.
var screenWidth = $(window).width();
navHeader.classList.add('close');
if (screenWidth > 767) {
if ($('html').hasClass('no-scroll')) {
toggle.click();
$('.uw-horizontal-nav').css('display', 'block');
} else {
}
else {
$('.uw-header__navigation').addClass('open');
}
} else {
}
else {
if ($('.uw-header__navigation').hasClass('open')) {
$('.uw-header__navigation').removeClass('open');
$('.uw-header__navigation').addClass('close');
......@@ -451,6 +484,10 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, document, Drupal) {
Drupal.behaviors.wcmsheadersearchbar = {
attach: function (context, settings) {
......@@ -459,6 +496,10 @@
}
})(jQuery, document, Drupal);
/**
* @file
*/
(function ($, document, Drupal) {
Drupal.behaviors.wcmsheadersearch = {
attach: function (context, settings) {
......@@ -480,9 +521,9 @@
}, timeout);
};
}
// Check the width of the screen and
// Check the width of the screen and.
function checkWidth() {
// Set screenWidth var
// Set screenWidth var.
var screenWidth = $(window).width();
if ($('.uw-header__masthead').hasClass('open')) {
......
......@@ -18,9 +18,7 @@
}
&.uw-full-width {
@include uw-full-width;
}
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
......@@ -48,3 +46,14 @@
}
}
.path-dashboard .layout__region {
margin-bottom: 1rem;
margin-right: 1rem;
}
.path-dashboard .layout__region--wrapper {
border: 1px solid #bfbfba;
box-shadow: none;
padding: 1rem;
}
{% set section_names = {
1: 'first',
2: 'second',
3: 'third',
4: 'fourth',
5: 'fifth',
} %}
{% set section_classes = '' %}
<section
{% if pattern_lab %}
class="{{ classes }}"
{% else %}
{{ attributes.addClass(classes) }}
{% endif %}
>
{% for i in 1..num_of_blocks %}
{% set section_name = section_names[loop.index] %}
{% if inverted_l_left or inverted_l_right %}
{% if loop.index == 1 %}
<div class="uw-inverted-l--left-side">
{% endif %}
{% if inverted_l_left and loop.index == 2 %}
<div class="uw-inverted-l--right-side">
{% endif %}
{% if inverted_l_right and loop.index == 4 %}
<div class="uw-inverted-l--right-side">
{% endif %}
{% endif %}
<div
{% if pattern_lab %}
{% set region_classes = 'layout__region ' ~ 'layout__region--' ~ section_name %}
class="{{ region_classes }}"
{% else %}
{{ region_attributes[section_name].addClass('layout__region', 'layout__region--' ~ section_name) }}
{% endif %}
>
{% if pattern_lab %}
{{ section_name }} column
{% else %}
{{ content[section_name] }}
{% endif %}
</div>
{% if inverted_l_left or inverted_l_right %}
{% if inverted_l_left %}
{% if loop.index == 1 or loop.index == 4 %}
</div>
{% endif %}
{% endif %}
{% if inverted_l_right %}
{% if loop.index == 3 or loop.index == 4 %}
</div>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</section>
\ No newline at end of file
.layout--uw-1-col {
display: grid;
grid-template-columns: 100%;
}
.layout--uw-1-col .layout__region--first {
grid-column: 1 / 2;
}
{% set num_of_blocks = 1 %}
{% if pattern_lab %}
{% for column_class in column_classes %}
<h2 class="pl-layout-h2">{{ column_class.name }}</h2>
{% include '@layouts/layout/_layout.twig' with {
classes: column_class.classes,
num_of_blocks: num_of_blocks,
} %}
{% endfor %}
{% else %}
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
} %}
{% endif %}
\ No newline at end of file
column_classes:
-
name: 'Full (100%)'
classes: 'layout layout--uw-1-col'
.layout--uw-2-col {
display: grid;
grid-template-columns:100%;
&.larger-left {
@include medium{
grid-template-columns: 67% 33%;
}
}
&.larger-right {
@include medium{
grid-template-columns: 33% 67%;
}
}
&.even-split {
grid-template-columns:100%;
@include medium{
grid-template-columns: 50% 50%;
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2/ 3;
@include medium{
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
}
}
{% set num_of_blocks = 2 %}
{% if pattern_lab %}
{% for column_class in column_classes %}
<h2 class="pl-layout-h2">{{ column_class.name }}</h2>
{% include '@layouts/layout/_layout.twig' with {
classes: column_class.classes,
num_of_blocks: num_of_blocks,
} %}
{% endfor %}
{% else %}
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
} %}
{% endif %}
\ No newline at end of file
column_classes:
-
name: 'Even Split (50%, 50%)'
classes: 'layout layout--uw-2-col even-split'
-
name: 'Larger Right (33%, 67%)'
classes: 'layout layout--uw-2-col larger-right'
-
name: 'Larger Left (67%, 33%)'
classes: 'layout layout--uw-2-col larger-left'
.layout--uw-3-col {
display: grid;
&.even-split {
grid-template-columns:100%;
@include medium{
grid-template-columns: 33% 34% 33%;
}
}
&.larger-left {
grid-template-columns:100%;
@include medium{
grid-template-columns: 50% 25% 25%;
}
}
&.larger-middle {
grid-template-columns:100%;
@include medium{
grid-template-columns: 25% 50% 25%;
}
}
&.larger-right {
grid-template-columns:100%;
@include medium{
grid-template-columns: 25% 25% 50%;
}
}
&.legacy-38-38-24 {
grid-template-columns:100%;
@include medium{
grid-template-columns: 38% 38% 24%;
}
}
&.legacy-24-38-38 {
grid-template-columns:100%;
@include medium{
grid-template-columns: 24% 38% 38%;
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row:1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row:2 / 3;
@include medium{
grid-column: 2 / 3;
grid-row:1 / 2;
}
}
&--third {
grid-column: 1 / 2;
grid-row:3 / 4;
@include medium{
grid-column: 3 / 4;
grid-row:1 / 2;
}
}
}
}
{% set num_of_blocks = 3 %}
{% if pattern_lab %}
{% for column_class in column_classes %}
<h2 class="pl-layout-h2">{{ column_class.name }}</h2>
{% include '@layouts/layout/_layout.twig' with {
classes: column_class.classes,
num_of_blocks: num_of_blocks,
} %}
{% endfor %}
{% else %}
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
} %}
{% endif %}
\ No newline at end of file
column_classes:
-
name: 'Even Split (33%, 34%, 33%)'
classes: 'layout layout--uw-3-col even-split'
-
name: 'Larger Left (50%, 25%, 25%)'
classes: 'layout layout--uw-3-col larger-left'
-
name: 'Larger Middle (25%, 50%, 25%)'
classes: 'layout layout--uw-3-col larger-middle'
-
name: 'Larger Right (25%, 25%, 50%)'
classes: 'layout layout--uw-3-col larger-right'
-
name: 'Legacy (38%, 38%, 24%)'
classes: 'layout layout--uw-3-col legacy-38-38-24'
-
name: 'Legacy (24%, 38%, 38%)'
classes: 'layout layout--uw-3-col legacy-24-38-38'
.layout--uw-4-col {
display: grid;
grid-template-columns:100%;
&.even-split {
@include medium {
grid-template-columns: 25% 25% 25% 25%;
}
}
&.larger-left {
@include medium {
grid-template-columns: 50% 16.67% 16.67% 16.66%;
}
}
&.larger-second {
@include medium {
grid-template-columns: 16.67% 50% 16.67% 16.66%;
}
}
&.larger-third {
@include medium {
grid-template-columns: 16.67% 16.67% 50% 16.66%;
}
}
&.larger-right {
@include medium {
grid-template-columns: 16.67% 16.67% 16.66% 50%;
}
}
&.legacy-23-27-27-23 {
@include medium {
grid-template-columns: 23% 27% 27% 23%;
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
@include medium{
grid-column: 2 / 3;
grid-row:1 / 2;
}
}
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
@include medium{
grid-column: 3 / 4;
grid-row:1 / 2;
}
}
&--fourth {
grid-column: 1 / 2;
grid-row: 4 / 5;
@include medium{
grid-column: 4 / 5;
grid-row: 1 / 2;
}
}
}
}
{% set num_of_blocks = 4 %}
{% if pattern_lab %}
{% for column_class in column_classes %}
<h2 class="pl-layout-h2">{{ column_class.name }}</h2>
{% include '@layouts/layout/_layout.twig' with {
classes: column_class.classes,
num_of_blocks: num_of_blocks,
} %}
{% endfor %}
{% else %}
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
} %}
{% endif %}
\ No newline at end of file
column_classes:
-
name: 'Even Split (25% 25% 25% 25%)'
classes: 'layout layout--uw-4-col even-split'
-
name: 'Larger Left (50%, 16.67%, 16.67%, 16.67%)'
classes: 'layout layout--uw-4-col larger-left'
-
name: 'Larger Second (16.67%, 50%, 16.67%, 16.67%)'
classes: 'layout layout--uw-4-col larger-second'
-
name: 'Larger Third (16.67%, 16.67%, 50%, 16.67%)'
classes: 'layout layout--uw-4-col larger-third'
-
name: 'Larger Right (16.67%, 16.67%, 16.67%, 50%)'
classes: 'layout layout--uw-4-col larger-right'
-
name: 'Legacy (23%, 27%, 27%, 23%)'
classes: 'layout layout--uw-4-col legacy-23-27-27-23'
.layout--uw-5-col {
display: grid;
grid-template-columns:100%;
&.even-split {
@include medium{
grid-template-columns: 20% 20% 20% 20% 20%;
}
}
&.larger-left {
@include medium{
grid-template-columns: 40% 15% 15% 15% 15%;
}
}
&.larger-second {
@include medium{
grid-template-columns: 15% 40% 15% 15% 15%;
}
}
&.larger-third {
@include medium{
grid-template-columns: 15% 15% 40% 15% 15%;
}
}
&.larger-fourth {
@include medium{
grid-template-columns: 15% 15% 15% 40% 15%;
}
}
&.larger-right {
@include medium{
grid-template-columns: 15% 15% 15% 15% 40%;
}
}
&.legacy-23-19-19-19-20 {
@include medium{
grid-template-columns: 23% 19% 19% 19% 20%;
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row:1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
@include medium{
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
@include medium{
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
&--fourth {
grid-column: 1 / 2;
grid-row: 4 / 5;
@include medium{
grid-column: 4 / 5;
grid-row: 1 / 2;
}
}
&--fifth {
grid-column: 1 / 2;
grid-row: 5 / 6;
@include medium{
grid-column: 5 / 6;
grid-row: 1 / 2;
}
}
}
}
{% set num_of_blocks = 5 %}
{% if pattern_lab %}
{% for column_class in column_classes %}
<h2 class="pl-layout-h2">{{ column_class.name }}</h2>
{% include '@layouts/layout/_layout.twig' with {
classes: column_class.classes,
num_of_blocks: num_of_blocks,
} %}
{% endfor %}
{% else %}
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
} %}
{% endif %}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment