Skip to content

Commit

Permalink
Add buttons to demonstrate different functionality [WEB-2976]
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikhiltri
nikhiltri committed Jan 8, 2025
1 parent ae821d8 commit 654c15e
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 90 deletions.
176 changes: 91 additions & 85 deletions frontend/js/behaviors/core/gridboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { forEach, triggerCustomEvent } from '@area17/a17-helpers';
import { mediaQuery } from '../../functions/core';
import { forEach, triggerCustomEvent, queryStringHandler, getUrlParameterByName } from '@area17/a17-helpers';

const gridboard = function(container) {
let colCounts = {};
let colCount = 0;
let colCurrent = 0;
let cols;
let active = false;
let maintainOrder = false;
let primeLayout = container.className;
let optionLayout = container.getAttribute('data-gridboard-option-layout');
let btnRandom = container.querySelector('.o-gridboard__btn-random');
let btnPages = Array.from(container.querySelectorAll('.o-gridboard__btn-page'));
const re = /([0-9])-col@(\w*)/gi;

function _getColCounts(classes) {
Expand All @@ -19,46 +16,43 @@ const gridboard = function(container) {
}
}

function _minOfArray(array) {
return Math.min.apply(Math, array);
}

function _maxOfArray(array) {
return Math.max.apply(Math, array);
}

function _getMarginTop(node) {
let style = window.getComputedStyle(node);
return parseInt(style.getPropertyValue('margin-top'));
}

function _unpositionBlocks() {
if (active) {
forEach(container.children, function(index, block) {
forEach(container.getElementsByClassName('o-gridboard')[0].children, function(index, block) {
block.style.left = '';
block.style.top = '';
block.style.height = '';
block.classList.remove('s-positioned');
});
container.style.height = '';
container.getElementsByClassName('o-gridboard')[0].style.height = '';
}
}

function _positionBlocks(resetPreviousPositions) {
let blocks = container.children;
let allBlocks = container.getElementsByClassName('o-gridboard')[0].children;

let blocks = Array.from(allBlocks).filter(child => {
return window.getComputedStyle(child).display !== 'none';
});

if (blocks.length === 0) {
return;
}

// Get the top margin of the first block
let firstChild = container.firstElementChild;
let firstChild = blocks[0];
firstChild.classList.add('s-repositioning');
let marginTop = _getMarginTop(firstChild);
marginTop = typeof marginTop === 'number' ? marginTop : 60; // Default margin top to 60px if calculation fails
firstChild.classList.remove('s-repositioning');

let colWidth = firstChild.offsetWidth;
let marginLeft = (container.offsetWidth - colWidth * colCount) / (colCount - 1);
marginTop = typeof marginTop === 'number' ? marginTop : 60; // Default margin top to 60px if calculation fails
let marginLeft = (container.getElementsByClassName('o-gridboard')[0].offsetWidth - colWidth * colCount) / (colCount - 1);

let rows = [];
let currentRow = [];
Expand All @@ -70,11 +64,7 @@ const gridboard = function(container) {
!block.classList.contains('s-positioned') ||
resetPreviousPositions
) {
block.style.height = 'auto';
block.style.top = "auto";
block.style.left = "auto";

let colIndex = index % colCount;
let colIndex = index % colCount;
let rowIndex = Math.floor(index / colCount);

if (rowIndex !== rows.length) {
Expand All @@ -86,9 +76,17 @@ const gridboard = function(container) {
currentRow.push(block);

// Calculate the top position based on the tallest element in the previous row
let topPosition = rowIndex === 0 ? 0 : rows[rowIndex - 1].reduce((maxHeight, el) => {
return Math.max(maxHeight, el.offsetTop + el.offsetHeight);
}, 0) + marginTop;
let prevTop = 0;
let prevHeight = 0

if (rowIndex !== 0) {
prevTop = rows[rowIndex - 1][0].offsetTop;
prevHeight = rows[rowIndex - 1].reduce((maxHeight, el) => {
return Math.max(maxHeight, el.offsetHeight);
}, 0);
}
let topPosition = prevHeight + prevTop + marginTop;


// Set the `top` and `left` positions for the block
let leftPosition = colIndex * (colWidth + marginLeft);
Expand All @@ -98,25 +96,13 @@ const gridboard = function(container) {

currentRowHeight = Math.max(currentRowHeight, block.offsetHeight);

// Determine and set the height of the block
let computedStyle = window.getComputedStyle(block);
let paddingTop = parseFloat(computedStyle.paddingTop) || 0;
let paddingBottom =
parseFloat(computedStyle.paddingBottom) || 0;

let newHeight =
block.offsetHeight + paddingTop + paddingBottom + 12;

block.style.height = Math.round(newHeight) + 'px';
container.getElementsByClassName('o-gridboard')[0].style.height = (topPosition + currentRowHeight) + 'px';

// Add the 's-positioned' class after a delay to mark it as positioned
setTimeout(function() {
block.classList.add('s-positioned');
}, 250);

// Update the overall container height to the height of the tallest column
container.style.height = (topPosition + newHeight) + 'px';

// Trigger a custom event to signal that the page has been updated
triggerCustomEvent(document, 'page:updated');
}
Expand Down Expand Up @@ -144,73 +130,93 @@ const gridboard = function(container) {

function _resized() {
setTimeout(function() {
_getColCounts(
document.documentElement.classList.contains(
's-collection-filters-active',
) && optionLayout
? optionLayout
: container.className,
);
_getColCounts(container.getElementsByClassName('o-gridboard')[0].className);
_setupBlocks();
}, 32);
}

function _showFilters() {
if (mediaQuery('medium+')) {
setTimeout(function() {
_getColCounts(optionLayout);
_setupBlocks();
}, 432);
function _executeRandom() {
let blocks = container.getElementsByClassName('o-gridboard')[0].children;
if (blocks.length === 0) {
return;
}

let shown = 0;

// Loop through each block and position them based on the column layout
forEach(blocks, function(index, block) {
var random_boolean = Math.random() < 0.5;
if (random_boolean && shown < 50) {
block.style.display = 'flex';
shown++;
}
else {
block.style.display = 'none';
}
});
setTimeout(function() {
_setupBlocks();
triggerCustomEvent(document, 'page:updated');
}, 32);
}

function _hideFilters() {
if (mediaQuery('medium+')) {
setTimeout(function() {
_getColCounts(container.className);
_setupBlocks();
}, 432);
function _executePage(page) {
let blocks = container.getElementsByClassName('o-gridboard')[0].children;
if (blocks.length === 0) {
return;
}

// Loop through each block and position them based on the column layout
forEach(blocks, function(index, block) {
if ((Math.floor(index / 50) + 1) == page) {
block.style.display = 'flex';
}
else {
block.style.display = 'none';
}
});
setTimeout(function() {
_setupBlocks();
triggerCustomEvent(document, 'page:updated', {'page': page});

window.history.pushState("", queryStringHandler.updateParameter(window.location.href, 'page', page));
}, 32);
}

function _init() {
maintainOrder =
container.getAttribute('data-gridboard-maintain-order') === 'true';
_getColCounts(
document.documentElement.classList.contains(
's-collection-filters-active',
) && optionLayout
? optionLayout
: container.className,
);
setTimeout(function() {
_setupBlocks();
}, 32); // Add a slight delay for the initial setup similar to how resize behaves
container.addEventListener(
_getColCounts(container.getElementsByClassName('o-gridboard')[0].className);

let page = getUrlParameterByName('page', window.location.search);

if (page) {
_executePage(page);
}
else {
setTimeout(function() {
_setupBlocks();
}, 32); // Add a slight delay for the initial setup similar to how resize behaves
}
container.getElementsByClassName('o-gridboard')[0].addEventListener(
'gridboard:contentAdded',
_contentAdded,
false,
);
document.addEventListener('resized', _resized, false);
document.addEventListener('ajaxPageLoad:complete', _resized, false);
document.addEventListener(
'collectionFilters:open',
_showFilters,
false,
);
document.addEventListener(
'collectionFilters:close',
_hideFilters,
false,
);
btnRandom.addEventListener('click', _executeRandom);
forEach(btnPages, function(index, btn) {
btn.addEventListener('click', _executePage.bind(this, btn.innerText), false);
});
}

this.destroy = function() {
container.removeEventListener('gridboard:contentAdded', _contentAdded);
document.removeEventListener('resized', _resized);
document.removeEventListener('ajaxPageLoad:complete', _resized);
document.removeEventListener('collectionFilters:open', _showFilters);
document.removeEventListener('collectionFilters:close', _hideFilters);
btnRandom.removeEventListener('click', _executeRandom);
forEach(btnPages, function(index, btn) {
btn.removeEventListener('click', _executePage.bind(this, btn.innerText), false);
});
A17.Helpers.purgeProperties(this);
};

Expand Down
13 changes: 11 additions & 2 deletions resources/views/components/organisms/_o-gridboard.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
<div data-behavior="gridboard">
@if (isset($title))
<h3 class="sr-only" id="h-{{ Str::slug($title) }}">{{ $title }}</h3>
@endif
<ul{!! (isset($id)) ? ' id="'.$id.'"' : '' !!} class="o-gridboard{!! (isset($variation)) ? ' '.$variation : '' !!}{!! (isset($cols_xsmall) and $cols_xsmall !== '') ? ' o-gridboard--'.$cols_xsmall.'-col@xsmall' : '' !!}{!! (isset($cols_small) and $cols_small !== '') ? ' o-gridboard--'.$cols_small.'-col@small' : '' !!}{!! (isset($cols_medium) and $cols_medium !== '') ? ' o-gridboard--'.$cols_medium.'-col@medium' : '' !!}{!! (isset($cols_large) and $cols_large !== '') ? ' o-gridboard--'.$cols_large.'-col@large' : '' !!}{!! (isset($cols_xlarge) and $cols_xlarge !== '') ? ' o-gridboard--'.$cols_xlarge.'-col@xlarge' : '' !!}" data-behavior="gridboard"{!! (isset($optionLayout)) ? ' data-gridboard-option-layout="'.$optionLayout.'"' : '' !!}{!! isset($title) ? ' aria-labelledby="h-'.Str::slug($title).'"' : ''!!}>

<button class="o-gridboard__btn-random btn btn--tertiary f-buttons">Show random 50</button>
<button class="o-gridboard__btn-page btn btn--tertiary f-buttons">1</button>
<button class="o-gridboard__btn-page btn btn--tertiary f-buttons">2</button>
<button class="o-gridboard__btn-page btn btn--tertiary f-buttons">3</button>
<button class="o-gridboard__btn-page btn btn--tertiary f-buttons">4</button>

<ul{!! (isset($id)) ? ' id="'.$id.'"' : '' !!} class="o-gridboard{!! (isset($variation)) ? ' '.$variation : '' !!}{!! (isset($cols_xsmall) and $cols_xsmall !== '') ? ' o-gridboard--'.$cols_xsmall.'-col@xsmall' : '' !!}{!! (isset($cols_small) and $cols_small !== '') ? ' o-gridboard--'.$cols_small.'-col@small' : '' !!}{!! (isset($cols_medium) and $cols_medium !== '') ? ' o-gridboard--'.$cols_medium.'-col@medium' : '' !!}{!! (isset($cols_large) and $cols_large !== '') ? ' o-gridboard--'.$cols_large.'-col@large' : '' !!}{!! (isset($cols_xlarge) and $cols_xlarge !== '') ? ' o-gridboard--'.$cols_xlarge.'-col@xlarge' : '' !!}" {!! isset($title) ? ' aria-labelledby="h-'.Str::slug($title).'"' : ''!!}>
{!! $slot !!}
</ul>
</ul>
</div>
4 changes: 2 additions & 2 deletions resources/views/site/artworkDetail.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
<div class="o-article__related{{ (empty($item->description) or $item->description === '') ? ' o-article__related--no-description' : '' }}">
@component('site.shared._loadRelatedSidebar')
@slot('item', $item)
@endcomponent
@endcomponent
</div>
@endif

Expand Down Expand Up @@ -148,7 +148,7 @@

@if ($exploreFurtherCollectionUrl)
@component('components.molecules._m-links-bar')
@slot('variation', 'm-links-bar--buttons')
@slot('variation', 'm-links-bar-- s')
@slot('linksPrimary', [
[
'label' => 'See more results',
Expand Down
1 change: 0 additions & 1 deletion resources/views/site/landingPage/_footer----publications.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
@slot('cols_medium','3')
@slot('cols_large','4')
@slot('cols_xlarge','4')
@slot('optionLayout','o-pinboard--2-col@xsmall o-pinboard--2-col@small o-pinboard--2-col@medium o-pinboard--3-col@large o-pinboard--3-col@xlarge')
@component('site.publications._items')
@slot('publications', $publications)
@endcomponent
Expand Down
1 change: 1 addition & 0 deletions resources/views/site/publications/_items.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@php
use App\Helpers\GtmHelpers;
@endphp

@foreach ($publications as $item)
@component('components.molecules._m-listing----publication')
{{-- @slot('variation', 'o-pinboard__item') --}}
Expand Down

0 comments on commit 654c15e

Please sign in to comment.