Skip to content

Commit

Permalink
grid cols
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastihilger
bastihilger committed Nov 5, 2021
1 parent f8ef276 commit 21213d9
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 32 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

80 changes: 53 additions & 27 deletions resources/js/components/content-blocks/GalleryContentBlock.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<ContentBlockWrapper label="Gallery" :nodeKey="node.attrs.key">
<div
@click="showMenu"
@click="showModal"
class="cursor-pointer grid grid-cols-2"
>
<div
Expand All @@ -21,7 +21,7 @@
w-full h-full overflow-scroll py-8
z-50 flex items-center justify-center
"
v-show="menuIsActive"
v-show="modalIsActive"
>
<div class="m-auto rounded-lg shadow-lg overflow-hidden z-20 w-action-fields max-w-full">
<div class="px-8 py-8 bg-white">
Expand Down Expand Up @@ -149,7 +149,7 @@

<div class="grid grid-cols-2 gap-8">
<div>
<label class="text-sm mb-1 ml-1 capitalize" v-text="__('caption')" />
<label class="block text-sm mb-1 ml-1 capitalize" v-text="__('caption')" />

<input
type="text"
Expand All @@ -165,7 +165,7 @@
</div>

<div>
<label class="text-sm mb-1 ml-1 capitalize" v-text="__('credits')" />
<label class="block text-sm mb-1 ml-1 capitalize" v-text="__('credits')" />

<input
type="text"
Expand Down Expand Up @@ -194,27 +194,50 @@
</div>
</div>

<div class="mt-8">
<label class="block text-sm mb-2 capitalize" v-text="__('mode')"></label>
<div
v-for="(modeName, modeOption) in modeOptions"
:key="modeOption"
class="inline-flex mr-4 items-center"
>
<input
type="radio"
<div class="mt-8 grid grid-cols-2 gap-8">
<div>
<label class="block text-sm mb-2 capitalize" v-text="__('mode')"></label>
<div
v-for="(modeName, modeOption) in modeOptions"
:key="modeOption"
class="inline-flex mr-4 items-center"
>
<input
type="radio"
class="
radio h-5 w-5
"
:value="modeOption"
v-model="mode"
:id="modeOption"
/>
<label
:for="modeOption"
v-text="modeName"
class="ml-2"
/>
</div>
</div>

<div>
<label class="block text-sm mb-1 ml-1 capitalize" v-text="__('max columns')"></label>
<select
class="
radio h-5 w-5
form-input
form-input-bordered
px-2 py-1 w-full
text-sm text-90
leading-none
"
:value="modeOption"
v-model="mode"
:id="modeOption"
/>
<label
:for="modeOption"
v-text="modeName"
class="ml-2"
/>
v-model="maxColumns"
>
<option
v-for="num in 12"
:key="num"
:value="num"
v-text="num"
/>
</select>
</div>
</div>
</div>
Expand Down Expand Up @@ -274,10 +297,11 @@ export default {
data() {
return {
menuIsActive: false,
modalIsActive: false,
slides: [],
uploadingIndexes: [],
mode: '',
maxColumns: 1,
modeOptions: {
slideshow: 'Slideshow',
grid: 'Grid',
Expand Down Expand Up @@ -397,24 +421,26 @@ export default {
}.bind(this));
},
showMenu() {
showModal() {
this.slides = _.size(this.node.attrs.slides) ? JSON.parse(this.node.attrs.slides) : [];
this.mode = this.node.attrs.mode;
this.menuIsActive = true;
this.maxColumns = this.node.attrs.maxColumns ? this.node.attrs.maxColumns : 3;
this.modalIsActive = true;
},
update() {
this.updateAttributes({
slides: this.slides ? JSON.stringify(this.slides) : '',
mode: this.mode,
maxColumns: this.maxColumns,
slideCount: this.slides ? _.size(this.slides) : 0,
});
this.hideMenu();
},
hideMenu() {
this.menuIsActive = false;
this.modalIsActive = false;
},
deleteBlock() {
Expand Down
3 changes: 3 additions & 0 deletions resources/js/components/content-blocks/GalleryContentBlockExtension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default Node.create({
slideCount: {
default: 0,
},
maxColumns: {
default: 3,
},
mode: {
default: 'slideshow',
},
Expand Down
8 changes: 4 additions & 4 deletions src/TiptapContentBlocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ function ($matches) {
);

$content = preg_replace_callback(
'/<gallery-content-block slides="(.*?)" slidecount="(.*?)" mode="(.*?)" key="(.*?)" imagedisk="(.*?)" imagepath="(.*?)"><\/gallery-content-block>/is',
'/<gallery-content-block slides="(.*?)" slidecount="(.*?)" maxcolumns="(.*?)" mode="(.*?)" key="(.*?)" imagedisk="(.*?)" imagepath="(.*?)"><\/gallery-content-block>/is',
function ($matches) {
$slides = json_decode(html_entity_decode($matches[1]));
$slideCount = intval($matches[2]);
$mode = $matches[3];
$mode = $matches[4];
$maxcolumns = $matches[3];

$html = '<div class="ttcp-'.$mode.'-wrapper"><div class="ttcp-'.$mode.'-inner"><div class="ttcp-'.$mode.'-stage">';
$html = '<div class="ttcp-'.$mode.'-wrapper"><div class="ttcp-'.$mode.'-inner"><div class="ttcp-'.$mode.'-stage ttcp-'.$mode.'-cols-'.$maxcolumns.'">';

foreach ($slides as $slide) {
$html .= '<div class="ttcp-'.$mode.'-slide">';
Expand Down

0 comments on commit 21213d9

Please sign in to comment.