From 783f4f0cf77ab160f35cb42a0b568c31620e784a Mon Sep 17 00:00:00 2001 From: rdrew Date: Fri, 24 Oct 2025 15:51:30 -0300 Subject: [PATCH] added masonry.js --- css/components/islandora_mods.css | 26 ++++ js/masonry.pkgd.min.js | 9 ++ olivespostcards.libraries.yml | 9 ++ package.json | 3 +- templates/layout/page--postcards.html.twig | 138 +++++++++++++++++++++ yarn.lock | 39 ++++++ 6 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 js/masonry.pkgd.min.js create mode 100755 templates/layout/page--postcards.html.twig diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index e69de29..26083e5 100755 --- a/css/components/islandora_mods.css +++ b/css/components/islandora_mods.css @@ -0,0 +1,26 @@ +/*collection grid*/ +/*.grid-item {*/ + /*border: 1px solid #ccc;*/ + /*padding: 4px;*/ + /*border-radius: 4px;*/ + /*background: #ece8e3;*/ + /*.grid-item__image {*/ + /*margin: 0;*/ + /*height: 160px;*/ + /*overflow: hidden;*/ + /*img {*/ + /*width: 100%;*/ + /*}*/ + /*}*/ + /*.grid-item__title {*/ + /*display: block;*/ + /*text-align: center;*/ + /*line-height: 1.2;*/ + /*margin: 10px 0 6px 0;*/ + /*a {*/ + /*text-decoration: none;*/ + /*font-family: var(--font-serif);*/ + /*[>font-size: var(--font-size-l);<]*/ + /*}*/ + /*}*/ +/*}*/ diff --git a/js/masonry.pkgd.min.js b/js/masonry.pkgd.min.js new file mode 100644 index 0000000..53386ae --- /dev/null +++ b/js/masonry.pkgd.min.js @@ -0,0 +1,9 @@ +/*! + * Masonry PACKAGED v4.2.2 + * Cascading grid layout library + * https://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;oe;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}); \ No newline at end of file diff --git a/olivespostcards.libraries.yml b/olivespostcards.libraries.yml index 3da2e54..f2ca50f 100755 --- a/olivespostcards.libraries.yml +++ b/olivespostcards.libraries.yml @@ -305,3 +305,12 @@ tags: css: theme: css/components/tags.css: {} + +masonry: + version: VERSION # Optional: track version + js: + js/masonry.pkgd.min.js: { minified: true } + dependencies: + - core/jquery # Required for Masonry + css: {} # Optional: if you need custom CSS + diff --git a/package.json b/package.json index 73f66fa..ecea333 100755 --- a/package.json +++ b/package.json @@ -99,7 +99,8 @@ "dependencies": { "browser-sync": "^2.29.3", "browsersync": "^0.0.1-security", - "bs-rewrite-rules": "^2.1.2" + "bs-rewrite-rules": "^2.1.2", + "masonry-layout": "^4.2.2" }, "packageManager": "yarn@4.0.2" } diff --git a/templates/layout/page--postcards.html.twig b/templates/layout/page--postcards.html.twig new file mode 100755 index 0000000..49d2aef --- /dev/null +++ b/templates/layout/page--postcards.html.twig @@ -0,0 +1,138 @@ +{# +/** + * @file + * Olivespostcards's theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template normally located in the + * core/modules/system directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.highlighted: Items for the highlighted region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.content: The main content of the current page. + * - page.sidebar: Items for the first sidebar. + * - page.featured_bottom_first: Items for the first featured bottom region. + * - page.featured_bottom_second: Items for the second featured bottom region. + * - page.footer_first: Items for the first footer column. + * - page.footer_second: Items for the second footer column. + * - page.breadcrumb: Items for the breadcrumb region. + * - page.social: Items for the social region. + * + * @see template_preprocess_page() + * @see html.html.twig + */ +#} + +{{ attach_library('olivespostcards/masonry') }} + +
+
+ + {% if page.header or page.primary_menu or page.secondary_menu %} + + {% endif %} + +
+
+
+ + {{ page.hero }} +
+ {{ page.highlighted }} + {{ page.breadcrumb }} + + {% if page.sidebar %} +
+
+ {{ page.content_above }} + {{ page.content }} +
+ + {{ page.sidebar }} +
+ {% else %} +
+ {{ page.content_above }} + {{ page.content }} +
+ {% endif %} + {{ page.content_below }} +
+
+ +
+
+ +
+
+ {{ page.footer_top }} + {{ page.footer_bottom }} +
+
+ +
+ +
+
+ diff --git a/yarn.lock b/yarn.lock index c19a9f2..951bf75 100755 --- a/yarn.lock +++ b/yarn.lock @@ -2582,6 +2582,11 @@ dequal@^2.0.3: resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== +desandro-matches-selector@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1" + integrity sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg== + destroy@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" @@ -3129,6 +3134,11 @@ etag@1.8.1, etag@^1.8.1, etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== +ev-emitter@^1.0.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a" + integrity sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q== + eventemitter3@^4.0.0: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" @@ -3343,6 +3353,13 @@ find-up@^4.1.0: locate-path "^5.0.0" path-exists "^4.0.0" +fizzy-ui-utils@^2.0.0: + version "2.0.7" + resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505" + integrity sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg== + dependencies: + desandro-matches-selector "^2.0.0" + flat-cache@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0" @@ -3489,6 +3506,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@ has-symbols "^1.0.3" hasown "^2.0.0" +get-size@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef" + integrity sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q== + get-stdin@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b" @@ -4695,6 +4717,14 @@ markdown-table@^1.1.0: resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60" integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q== +masonry-layout@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/masonry-layout/-/masonry-layout-4.2.2.tgz#d57b44af13e601bfcdc423f1dd8348b5524de348" + integrity sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA== + dependencies: + get-size "^2.0.2" + outlayer "^2.1.0" + mathml-tag-names@^2.0.1, mathml-tag-names@^2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" @@ -5107,6 +5137,15 @@ optionator@^0.9.1: prelude-ls "^1.2.1" type-check "^0.4.0" +outlayer@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2" + integrity sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw== + dependencies: + ev-emitter "^1.0.0" + fizzy-ui-utils "^2.0.0" + get-size "^2.0.2" + p-limit@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"