Merge pull request #47 from helsingborg-stad/feat/gutenberg-fields-ha…

…ndling feat: gutenberg field handling
helsingborg-stad · Aug 5, 2024 · e02141c · e02141c
2 parents 06ed9b8 + 9933f09
commit e02141c
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 42 deletions.
diff --git a/source/js/gutenberg.js b/source/js/gutenberg.js
@@ -0,0 +1,92 @@
+import TaxonomySelectUpdater from "./taxonomySelectUpdater";
+import Storage from "./storage";
+import Main from "./main";
+
+class Gutenberg {
+    initializedOsmBlocks =  [];
+
+    constructor() {
+        this.editor = wp.data.select('core/block-editor');
+
+        wp.data.subscribe(() => {
+            const osmBlockIds = this.editor.getBlocksByName('acf/open-street-map');
+            if (osmBlockIds.length > 0) {
+                osmBlockIds.forEach((osmBlockId) => {
+                    if (!this.initializedOsmBlocks.includes(osmBlockId)) {
+                        this.tryInitializeBlock(osmBlockId);
+                    }
+                });
+            }
+        });
+    }
+
+    initializeBlock(block, osmBlockId) {
+        const filterSelectFieldKey = 'field_668d1cc80d853';
+        const postTypeSelectFieldKey = 'field_642a8818a908c';
+
+        const [taxonomies, selected] = this.getOsm(osmBlockId);
+        const storageInstance = new Storage(taxonomies, selected);
+        const taxonomySelectUpdaterInstance = new TaxonomySelectUpdater(filterSelectFieldKey, storageInstance);
+
+        const intervalId = setInterval(() => {
+            if (block.querySelector('[data-name="mod_osm_post_type"]')) {
+                new Main(
+                    block, 
+                    acf, 
+                    postTypeSelectFieldKey, 
+                    filterSelectFieldKey, 
+                    storageInstance, 
+                    taxonomySelectUpdaterInstance
+                );
+
+                clearInterval(intervalId);
+            }
+        }, 1000);
+    }
+
+    tryInitializeBlock(osmBlockId) {
+        const block = document.querySelector('#block-' + osmBlockId);
+        if (block) {
+            this.initializedOsmBlocks.push(osmBlockId);
+            this.initializeBlock(block, osmBlockId);
+        }
+    }
+
+    getOsm(osmBlockId) {
+        let parsedData = {};
+
+        try {
+            parsedData = JSON.parse(osm);
+        } catch (error) {
+            console.error('Error parsing OSM data', error);
+        }
+
+        return [
+            parsedData.hasOwnProperty('taxonomies') ? parsedData.taxonomies : {},
+            this.getSelected(osmBlockId)
+        ];
+    }
+
+    getSelected(osmBlockId) {
+        const blockData = this.editor.getBlockAttributes(osmBlockId);
+        if (!blockData?.data?.mod_osm_post_type) {
+            return {};
+        }
+
+        let selected = {};
+        selected[blockData.data.mod_osm_post_type] = [];
+
+        if (blockData?.data?.mod_osm_filters > 0) {
+            let i = 0;
+            for (i; i < blockData.data.mod_osm_filters; i++) {
+                if (blockData.data[`mod_osm_filters_${i}_mod_osm_filter_taxonomy`]) {
+                    selected[blockData.data.mod_osm_post_type].push(blockData.data[`mod_osm_filters_${i}_mod_osm_filter_taxonomy`]);
+                }
+            }
+        }
+
+        return selected;
+    }
+}
+
+export default Gutenberg;
diff --git a/source/js/main.ts b/source/js/main.ts
@@ -3,13 +3,14 @@ import TaxonomySelectUpdater from "./taxonomySelectUpdater";
 
 class Main {
     constructor(
+        private container: HTMLElement,
         private acf: any, 
         private postTypeSelectFieldKey: string, 
         private filterSelectFieldKey: string, 
         private storageInstance: StorageInterface, 
         private taxonomySelectUpdaterInstance: TaxonomySelectUpdater
     ) {
-        const postTypeSelect = document.querySelector(`[data-key="${this.postTypeSelectFieldKey}"] select`) as HTMLSelectElement|undefined;
+        const postTypeSelect = this.container.querySelector(`[data-key="${this.postTypeSelectFieldKey}"] select`) as HTMLSelectElement|undefined;
 
         if (postTypeSelect) {
             if (postTypeSelect.value) {

diff --git a/source/js/modularity-open-street-map.js b/source/js/modularity-open-street-map.js
@@ -1,31 +1,12 @@
-import TaxonomySelectUpdater from "./taxonomySelectUpdater";
-import Storage from "./storage";
-import Main from "./main";
+import Module from "./module";
+import Gutenberg from "./gutenberg";
 
 document.addEventListener('DOMContentLoaded', function() {
-    const filterSelectFieldKey = 'field_668d1cc80d853';
-    const postTypeSelectFieldKey = 'field_642a8818a908c';
-
-    if (typeof acf !== 'undefined') {
-        const [taxonomies, selected] = getOsm();
-        const storageInstance = new Storage(taxonomies, selected);
-        const taxonomySelectUpdaterInstance = new TaxonomySelectUpdater(filterSelectFieldKey, storageInstance);
-        new Main(acf, postTypeSelectFieldKey, filterSelectFieldKey, storageInstance, taxonomySelectUpdaterInstance);
-    }
-});
-
-function getOsm() {
-    let parsedData = {};
-    try {
-        parsedData = JSON.parse(osm);
-    } catch (error) {
-        console.error('Error parsing OSM data', error);
+    if (typeof wp !== 'undefined' && typeof acf !== 'undefined') {
+        if (document.body.classList.contains('block-editor-page')) {
+            new Gutenberg();
+        } else {
+            new Module();
+        }
     }
-
-    console.log(parsedData);
-
-    return [
-        parsedData.hasOwnProperty('taxonomies') ? parsedData.taxonomies : [], 
-        parsedData.hasOwnProperty('selected') ? parsedData.selected : []
-    ];
-}
+});
diff --git a/source/js/module.js b/source/js/module.js
@@ -0,0 +1,35 @@
+import TaxonomySelectUpdater from "./taxonomySelectUpdater";
+import Storage from "./storage";
+import Main from "./main";
+
+class Module {
+    constructor() {
+        const filterSelectFieldKey = 'field_668d1cc80d853';
+        const postTypeSelectFieldKey = 'field_642a8818a908c';
+        const container = document.querySelector('#acf-group_64219abb0caec');
+
+        if (container) {
+            const [taxonomies, selected] = this.getOsm();
+            const storageInstance = new Storage(taxonomies, selected);
+            const taxonomySelectUpdaterInstance = new TaxonomySelectUpdater(filterSelectFieldKey, storageInstance);
+            new Main(container, acf, postTypeSelectFieldKey, filterSelectFieldKey, storageInstance, taxonomySelectUpdaterInstance);
+        }
+    }
+
+    getOsm() {
+        let parsedData = {};
+
+        try {
+            parsedData = JSON.parse(osm);
+        } catch (error) {
+            console.error('Error parsing OSM data', error);
+        }
+
+        return [
+            parsedData.hasOwnProperty('taxonomies') ? parsedData.taxonomies : {}, 
+            parsedData.hasOwnProperty('selected') ? parsedData.selected : {}
+        ];
+    }
+}
+
+export default Module;
diff --git a/source/js/storage.ts b/source/js/storage.ts
@@ -1,11 +1,9 @@
 import { StorageInterface } from "./storageInterface";
 class Storage implements StorageInterface {
     constructor(private taxonomies: { [key: string]: string[] }, private selected: { [key: string]: string[] }) {
-        console.log(this.selected);
     }
 
     public getSelected(postType: string): string[] {
-        console.log(this.selected);
         if (this.selected.hasOwnProperty(postType)) {
             return this.selected[postType];
         }

diff --git a/source/php/Module/OpenStreetMap.php b/source/php/Module/OpenStreetMap.php
@@ -63,7 +63,8 @@ public function data(): array
 
         $data['mapStyle'] = $this->getMapStyle();
         $data['endpoint'] = $this->createEndpoint($fields);
-        $data['startPosition'] = $this->getStartPosition($fields['map_start_values'] ?? []);
+        $data['startPosition'] = !empty($fields['map_start_values']) && is_array($fields['map_start_values']) ? 
+        $fields['map_start_values'] : $this->getDefaultStartPosition();
         $data['lang'] = [
             'noPostsFound' => __('No posts were found.', 'modularity-open-street-map'),
             'filterBy' => __('Filter by', 'modularity-open-street-map'),
@@ -105,17 +106,13 @@ private function createEndpoint($fields): string
      * @param array $mapStartValues An array containing the latitude, longitude, and zoom level for the start position.
      * @return array The start position for the OpenStreetMap module.
      */
-    private function getStartPosition(array $mapStartValues) 
+    private function getDefaultStartPosition() 
     {
-        if (empty($mapStartValues)) {
-            return [
-                'lat' => '56.046029',
-                'lng' => '12.693904',
-                'zoom' => '14'
-            ];
-        }
-
-        return $mapStartValues;
+        return [
+            'lat' => '56.046029',
+            'lng' => '12.693904',
+            'zoom' => '14'
+        ];
     }
 
     private function getMapStyle()