initial commit

Author: rasteiner

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,47 @@
+# Kirby Conditional Blocks plugin
+
+## Installation
+
+### Download
+
+Download and copy this repository to `/site/plugins/conditional-blocks`.
+
+### Git submodule
+
+```
+git submodule add https://github.com/rasteiner/conditionalblocks site/plugins/conditional-blocks
+```
+
+### Composer
+
+```
+composer require rasteiner/conditionalblocks
+```
+
+## Blueprint Example
+fields:
+  layout:
+    type: layout
+    layouts:
+      - "1/1"
+      - "1/2, 1/4, 1/4"
+      - "1/6, 5/6"
+
+    requires:
+      min:
+        1/3:
+          - image
+          - video
+          - code
+      max:
+        1/2: text
+
+    fieldsets:
+      - text
+      - image
+      - video
+      - code
+
+## License
+
+MIT

composer.json

@@ -0,0 +1,18 @@
+{
+  "name": "rasteiner/conditionalblocks",
+  "description": "Disables blocks in layout fields when the column width does not match the block requirements",
+  "type": "kirby-plugin",
+  "license": "MIT",
+  "homepage": "https://getkirby.com/plugins/your-id/plugin-name",
+  "version": "0.0.0",
+  "authors": [
+    {
+      "name": "Roman Steiner",
+      "email": "[email protected]",
+      "homepage": "https://getkirby.com/plugins/rasteiner"
+    }
+  ],
+  "require": {
+    "getkirby/composer-installer": "^1.2"
+  }
+}

index.js

@@ -0,0 +1,13 @@
+<?php 
+
+use Kirby\Cms\App;
+
+load([
+    'rasteiner\\conditionalBlocks\\LayoutField' => 'LayoutField.php',
+], __DIR__ . '/lib');
+
+App::plugin('rasteiner/conditionalblocks', [
+    'fields' => [
+        'layout' => 'rasteiner\\conditionalBlocks\\LayoutField',
+    ]
+]);

index.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace rasteiner\conditionalBlocks;
+
+use Kirby\Form\Field\LayoutField as OriginalLayoutField;
+
+class LayoutField extends OriginalLayoutField {
+    protected $requires = null;
+
+    public function __construct(array $params)
+    {
+        $this->requires = $params['requires'] ?? null;
+        parent::__construct($params);
+    }
+
+    public function getRequires(): array {
+        $min = $this->requires['min'] ?? [];
+        $max = $this->requires['max'] ?? [];
+
+        $constraints = [];
+
+        foreach (['min', 'max'] as $varname) {
+            $constraint = $$varname;
+
+            if(!is_array($constraint)) {
+                $$varname = [];
+                continue;
+            }
+
+            foreach ($constraint as $columnWidth => $fields) {
+                //check if columnWidth is a number smaller than 1 or matches the pattern "^\d/\d$"
+                if(is_numeric($columnWidth)) {
+                    $columnWidth = floatval($columnWidth);
+                } else if(preg_match('|^(\d)/(\d)$|', $columnWidth, $matches)) {
+                    $columnWidth = intval($matches[1]) / intval($matches[2]);
+                } else {
+                    continue;
+                }
+
+                if(is_string($fields)) {
+                    $fields = [$fields];
+                }
+
+                foreach ($fields as $field) {
+                    if(!is_string($field)) {
+                        continue;
+                    }
+
+                    $constraints[$field][$varname] = $columnWidth;
+                }
+            }
+        }
+
+        return $constraints;
+    }
+
+    public function props(): array
+    {
+        return array_merge(parent::props(), [
+            'requires' => $this->getRequires(),
+        ]);
+    }
+}

lib/LayoutField.php

@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "dev": "npx -y kirbyup src/index.js --watch",
+    "build": "npx -y kirbyup src/index.js"
+  }
+}

package.json

@@ -0,0 +1,56 @@
+panel.plugin("rasteiner/conditionalblocks", {
+  use: [
+    function (Vue) {
+      const LayoutField = Vue.component("k-layout-field").options;
+      const BlockLayouts = LayoutField.components["k-block-layouts"];
+      const Layout = BlockLayouts.components["k-layout"];
+      const LayoutColumn = Layout.components["k-layout-column"];
+      const BlockSelector = Vue.component("k-block-selector").options;
+
+      Vue.component("k-layout-field", {
+        extends: LayoutField,
+
+        provide() {
+          return {
+            constraints: this.requires,
+          };
+        },
+        props: {
+          requires: {
+            type: Object,
+            required: false,
+          },
+        },
+      });
+
+      LayoutColumn.provide = function () {
+        return {
+          width: this.width,
+        };
+      };
+
+      BlockSelector.inject = ["constraints", "width"];
+
+      const open = BlockSelector.methods.open;
+      BlockSelector.methods.open = function () {
+        open.call(this, ...arguments);
+
+        if (!this.constraints || !this.width) return;
+
+        const [num, denum] = this.width.split("/");
+        const width = parseInt(num) / parseInt(denum);
+
+        const myDisabled = Object.entries(this.constraints)
+          .filter(([_, value]) => {
+            return (
+              (value.min && width < value.min) ||
+              (value.max && width > value.max)
+            );
+          })
+          .map(([key, _]) => key);
+
+        this.disabled = [...this.disabled, ...myDisabled];
+      };
+    },
+  ],
+});