Changeset 2636205

Timestamp:

11/27/2021 06:37:54 AM (4 years ago)

Author:

traveledmap

Message:

Refactoring to use SDK

Location:

traveledmap-trip-itinerary-embedded-map

Files:

• . (modified) (1 prop)
• trunk/.gitignore (modified) (1 diff)
• trunk/README.md (added)
• trunk/assets/no-preview.jpg (added)
• trunk/plugin.php (modified) (1 diff)
• trunk/readme.txt (modified) (2 diffs)
• trunk/src/blocks (added)
• trunk/src/blocks/.editorconfig (added)
• trunk/src/blocks/.eslintignore (added)
• trunk/src/blocks/.eslintrc.json (added)
• trunk/src/blocks/dist (added)
• trunk/src/blocks/dist/blocks.build.js (added)
• trunk/src/blocks/dist/blocks.editor.build.css (added)
• trunk/src/blocks/dist/blocks.style.build.css (added)
• trunk/src/blocks/package.json (added)
• trunk/src/blocks/src (added)
• trunk/src/blocks/src/blocks.js (added)
• trunk/src/blocks/src/common.scss (added)
• trunk/src/blocks/src/editor.scss (added)
• trunk/src/blocks/src/style.scss (added)
• trunk/src/blocks/src/trip (added)
• trunk/src/blocks/src/trip-step (added)
• trunk/src/blocks/src/trip-step/step-block.js (added)
• trunk/src/blocks/src/trip/trip-block.js (added)
• trunk/src/blocks/yarn.lock (added)
• trunk/src/init.php (modified) (8 diffs)
• trunk/src/metabox/metabox.php (modified) (4 diffs)
• trunk/src/shared (added)
• trunk/src/shared/constants (added)
• trunk/src/shared/constants/env.php (added)
• trunk/src/shared/front-renderer.php (added)
• trunk/src/shared/utils (added)
• trunk/src/shared/utils/utils.js (added)
• trunk/src/shared/utils/utils.php (added)
• trunk/src/widget (added)
• trunk/src/widget/shortcode.php (added)
• trunk/src/widget/widget.php (added)

traveledmap-trip-itinerary-embedded-map/trunk/.gitignore

@@ -1 @@
-node_modules
+src/blocks/node_modules
 
 ## Uncomment line below if you prefer to

traveledmap-trip-itinerary-embedded-map/trunk/plugin.php

@@ -6 +6 @@
  * Author: TraveledMap
  * Author URI: https://www.traveledmap.com
- * Version: 1.0.11
+ * Version: 1.1.0
  * License: GPL2+
  * License URI: https://www.gnu.org/licenses/gpl-2.0.txt

traveledmap-trip-itinerary-embedded-map/trunk/readme.txt

@@ -4 +4 @@
 Donate link: https://donorbox.org/help-traveledmap-to-stay-free
 Requires at least: 3.0.1
-Tested up to: 5.6.0
+Tested up to: 5.8.2
 Requires PHP: 5.6
-Stable tag: 1.0.11
+Stable tag: 1.1.0
 License: GPLv2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -187 +187 @@
 * Update to latest WordPress version
 
+= 1.0.10 =
+* Update to latest WordPress version
+
+= 1.0.11 =
+* Update to latest WordPress version
+
+= 1.1.0 =
+* Technical rework of the library to be compatible with the TripEmbedderJS SDK.
+* Improvements to handle more use cases and options
+* Made compatible with the latest WordPress version
+
 == Upgrade Notice ==
-No upgrade to do for the moment
+= 1.1.0 =
+When upgrading to 1.1.0, you will need to recover content from the trip-steps' blocks because the content
+changed. To do this, you just have to visit the editor page of the post where the trip is displayed, and click on the
+button to recover the content.
+

traveledmap-trip-itinerary-embedded-map/trunk/src/init.php

@@ -1 +1 @@
 <?php
-/**
- * Blocks Initializer
- *
- * Enqueue CSS/JS of all the blocks.
- *
- * @since   1.0.0
- * @package CGB
- */
 
 // Exit if accessed directly.
@@ -14 +6 @@
 }
 
-require_once('metabox/metabox.php');
-require_once('iframe/render.php');
-require_once('iframe/iframe-widget.php');
-require_once('iframe/shortcode.php');
-require_once('categories/traveledmap.php');
+require_once('metabox/metabox.php'); // the metabox is the right column on the backoffice
+require_once('shared/utils/utils.php'); // utils
+require_once('shared/front-renderer.php'); // utils that helps rendering the map in an iframe
+require_once('shared/constants/env.php'); // constants for the environment
+require_once('widget/widget.php'); // All the functions that allows the widget to work (save data and so on)
+require_once('widget/shortcode.php'); // The shortcode to display the map without block
+require_once('categories/traveledmap.php'); // The category that contains all the blocks
 
 function traveledmap_trip_block_assets()
@@ -25 +19 @@
     wp_register_style(
         'traveledmap-trip-style-css', // Handle.
-        plugins_url('dist/blocks.style.build.css', dirname(__FILE__)),
+        plugins_url('src/blocks/dist/blocks.style.build.css', dirname(__FILE__)),
         array('wp-editor'),
         null
@@ -33 +27 @@
     wp_register_script(
         'traveledmap-trip-block-js', // Handle.
-        plugins_url('/dist/blocks.build.js', dirname(__FILE__)), // Block.build.js: We register the block here. Built with Webpack.
+        plugins_url('/src/blocks/dist/blocks.build.js', dirname(__FILE__)), // Block.build.js: We register the block here. Built with Webpack.
         array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor'), // Dependencies, defined above.
         null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
@@ -42 +36 @@
     wp_register_style(
         'traveledmap-trip-block-editor-css', // Handle.
-        plugins_url('dist/blocks.editor.build.css', dirname(__FILE__)), // Block editor CSS.
+        plugins_url('src/blocks/dist/blocks.editor.build.css', dirname(__FILE__)), // Block editor CSS.
         array('wp-edit-blocks'), // Dependency to include the CSS after it.
         null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
@@ -56 +50 @@
     );
 
+    // TODO: Introduced in 5.8.0: add_filter('block_categories_all', 'add_new_traveledmap_category', 10, 2);
+    // but wait to introduce it for older versions
     add_filter('block_categories', 'add_new_traveledmap_category', 10, 2);
 
@@ -69 +65 @@
             'render_callback' => 'traveledmap_render_callback',
             'attributes' => array(
-                'mapUrl' => array('type' => 'string'),
+                'tripId' => array('type' => 'string'),
                 'traveledmap_user_id' => array('type' => 'string'),
-                'traveledmap_trip_id' => array('type' => 'string'),
                 'traveledmap_trip_base_url' => array('type' => 'string'),
+                'baseUrl' => array('type' => 'string'),
                 'traveledmap_trip_steps' => array('type' => 'string'),
                 'traveledmap_disable_widget' => array('type' => 'boolean', 'default' => false),
@@ -90 +86 @@
         )
     );
-
-    // Custom scripts
-    wp_enqueue_script('traveledmap_map-sticky-js');
 }
 

traveledmap-trip-itinerary-embedded-map/trunk/src/metabox/metabox.php

@@ -22 +22 @@
 
     $html = '
+
         <div class="components-panel__row">
             <div>
@@ -67 +68 @@
 
         <div class="components-panel__row">
-            <button id="traveledmap-check-trip-button" onclick="handleData()" class="components-button is-button is-primary is-large">
+            <button id="traveledmap-check-trip-button" onclick="traveledMapMetaboxGetSteps()" class="components-button is-button is-primary is-large">
                 <span class="not-loading">Validate</span>
                 <span class="loading">Loading ...</span>
@@ -77 +78 @@
             const loadedTripId = "' . esc_js($tripId) . '";
 
-            const handleData = () => {
-              const buttonEl = document.getElementById("traveledmap-check-trip-button");
-              buttonEl.classList.add("is-loading");
-              const userId = document.getElementById("traveledmap-user-id").value;
-              const tripId = document.getElementById("traveledmap-trip-id").value;
-              const link = `https://www.traveledmap.com/trip/${userId}/${tripId}?isWPMetaboxTest=true`;
-              const iframeEl = document.getElementById("traveledmap-steps-wrapper").appendChild(document.createElement("iframe"));
-              iframeEl.setAttribute("src", link);
-              iframeEl.classList.add("traveledmap-validation-iframe");
-              buttonEl.disabled = true;
-              buttonEl.classList.add("is-disabled");
-
-              window.addEventListener("message", (event) => {
-                if(!event || !event.data || !event.data.type) {
-                  buttonEl.classList.remove("is-loading");
-                  return;
+            const traveledMapMetaboxStopLoading = () => {
+                const buttonEl = document.getElementById("traveledmap-check-trip-button");
+                buttonEl.classList.remove("is-loading");
+                buttonEl.disabled = false;
+                buttonEl.classList.remove("is-disabled");
+            }
+
+            traveledMapMetaboxGetSteps = () => {
+                const buttonEl = document.getElementById("traveledmap-check-trip-button");
+                buttonEl.classList.add("is-loading");
+                buttonEl.disabled = true;
+                buttonEl.classList.add("is-disabled");
+
+                const userId = document.getElementById("traveledmap-user-id").value;
+                const tripId = document.getElementById("traveledmap-trip-id").value;
+
+                const endpoint = `' . API_URL . '/httpTripGetSteps`;
+                fetch(endpoint, {
+                    method: "POST",
+                    body: JSON.stringify({ data: { userNickname: userId, tripNickname: tripId }}),
+                    headers: { "Content-Type": "application/json" },
+                })
+                    .then((res) => res.json())
+                    .then((stepsRes) => traveledMapMetaboxHandleSteps(stepsRes.result, tripId, userId  ))
+                    .catch(err => {
+                        console.error("Couldnt fetch steps", err);
+                        traveledMapMetaboxStopLoading()
+                    })
+            }
+
+            const traveledMapMetaboxHandleSteps = (steps, tripId, userId) => {
+                if (!steps) {
+                    traveledMapMetaboxStopLoading();
+                    stateEl.classList.add("error");
+                    console.error("No steps loaded", steps);
                 }
-
-                buttonEl.disabled = false;
-                buttonEl.classList.remove("is-disabled");
+                const stepsHashWithName = steps.reduce((acc, step) => ({
+                    ...acc,
+                    [step.hash]: step.name,
+                }), {});
+
                 const stateEl = document.getElementById("traveledmap-metabox-state");
-                switch (event.data.type) {
-                  case "sendTripStepsHash":
-                    const tripSteps = event.data.detail.steps;
-                    stateEl.classList.remove("success");
-                    stateEl.classList.remove("warning");
-                    stateEl.classList.remove("error");
-                    if(loadedTripId === tripId && loadedUserId === userId) {
-                      stateEl.classList.add("success");
-                    } else {
-                      stateEl.classList.add("warning");
-                    }
-                    document.getElementById("traveledmap-trip-steps").value = JSON.stringify(tripSteps).replace(/\'/g, "");
-                    break;
-                  case "tripDoesNotExist":
-                    stateEl.classList.remove("success");
-                    stateEl.classList.remove("warning");
-                    stateEl.classList.add("error");
-                    break;
-                }
-                buttonEl.classList.remove("is-loading");
-              });
-            };
+                stateEl.classList.remove("success");
+                stateEl.classList.remove("warning");
+                stateEl.classList.remove("error");
+                if(loadedTripId === tripId && loadedUserId === userId) {
+                  stateEl.classList.add("success");
+                } else {
+                  stateEl.classList.add("warning");
+                }
+                console.log({ stepsHashWithName })
+                document.getElementById("traveledmap-trip-steps").value = JSON.stringify(stepsHashWithName).replace(/\'/g, "");
+                traveledMapMetaboxStopLoading();
+            }
         </script>
     ';
@@ -133 +145 @@
 function traveledmap_save_meta_box($post_id)
 {
-    $baseUrl = "https://www.traveledmap.com/trip";
+    $baseUrl = ENV_URL . "/trip";
     if (isset($_POST['traveledmap-user-id'])) {
         $userInput = $_POST['traveledmap-user-id'];