Adds mosaic rows and columns settings to vue side of block. #329.

tainacan · Nov 11, 2019 · f3c673c · f3c673c
1 parent 3233106
commit f3c673c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js
@@ -15,6 +15,8 @@ document.addEventListener("DOMContentLoaded", () => {
             searchURL: '',
             maxItemsNumber: 12,
             mosaicHeight: 40,
+            mosaicGridRows: 3,
+            mosaicGridColumns: 3,
             order: 'asc',
             showSearchBar: false,
             showCollectionHeader: false,
@@ -34,6 +36,8 @@ document.addEventListener("DOMContentLoaded", () => {
                     layout: this.layout,
                     gridMargin: this.gridMargin,
                     mosaicHeight: this.mosaicHeight,
+                    mosaicGridRows: this.mosaicGridRows,
+                    mosaicGridColumns: this.mosaicGridColumns,
                     searchURL: this.searchURL,
                     maxItemsNumber: this.maxItemsNumber,
                     order: this.order,
@@ -57,6 +61,8 @@ document.addEventListener("DOMContentLoaded", () => {
             this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
             this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
             this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
+            this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
+            this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
             this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
             this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
             this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;

diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue
@@ -202,13 +202,13 @@
                 <div 
                         :style="{ 
                             width: 'calc((100% / ' + mosaicPartition(items, 5).length + ') - ' + gridMargin + 'px)',
-                            height: 'calc(((2 * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
-                            gridTemplateColumns: 'repeat(3, calc((100% / 3) - (' + (2*Number(gridMargin)) + 'px/3)))',
+                            height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
+                            gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
                             margin: gridMargin + 'px',
                             gridGap: gridMargin + 'px',
                         }"
                         class="mosaic-container"
-                        :class="'mosaic-container--' + mosaicGroup.length"
+                        :class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
                         :key="mosaicIndex"
                         v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items, 5)">
                     <li
@@ -271,6 +271,8 @@ export default {
         searchURL: String,
         maxItemsNumber: Number,
         mosaicHeight: Number,
+        mosaicGridRows: Number,
+        mosaicGridColumns: Number,
         order: String,
         showSearchBar: Boolean,
         showCollectionHeader: Boolean,

diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
@@ -197,7 +197,7 @@ registerBlockType('tainacan/dynamic-items-list', {
                         { 
                             width: 'calc((100% / ' + mosaicGroupsLength + ') - ' + gridMargin + 'px)',
                             height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
-                            gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridRows - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
+                            gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
                             margin: gridMargin + 'px',
                             gridGap: gridMargin + 'px',
                         }
@@ -863,7 +863,9 @@ registerBlockType('tainacan/dynamic-items-list', {
             showCollectionLabel,
             collectionBackgroundColor,
             collectionTextColor,
-            mosaicHeight
+            mosaicHeight,
+            mosaicGridRows,
+            mosaicGridColumns
         } = attributes;
 
         return <div 
@@ -877,6 +879,8 @@ registerBlockType('tainacan/dynamic-items-list', {
                     show-collection-label={ '' + showCollectionLabel }
                     layout={ layout }
                     mosaic-height={ mosaicHeight }
+                    mosaic-grid-rows={ mosaicGridRows } 
+                    mosaic-grid-columns={ mosaicGridColumns } 
                     collection-background-color={ collectionBackgroundColor }
                     collection-text-color={ collectionTextColor }
                     grid-margin={ gridMargin }