waygo-maps 1.0.0

package/dist/e88ae66eec18595e40fc4b4bc894e4f6.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9999 14.0001C17.4091 14.004 16.8265 14.1388 16.2939 14.3947C15.7614 14.6506 15.2921 15.0213 14.9199 15.4801L9.81991 13.1301C10.0597 12.3959 10.0597 11.6044 9.81991 10.8701L14.9199 8.52011C15.5215 9.24608 16.3602 9.73619 17.2881 9.90395C18.2159 10.0717 19.1731 9.90634 19.9909 9.43702C20.8086 8.96769 21.4343 8.22459 21.7575 7.33886C22.0806 6.45312 22.0805 5.4817 21.7572 4.59602C21.4339 3.71035 20.8081 2.96736 19.9902 2.49818C19.1724 2.02901 18.2151 1.86381 17.2873 2.03174C16.3596 2.19967 15.5209 2.68993 14.9194 3.41601C14.318 4.14208 13.9923 5.05729 13.9999 6.00011C14.0029 6.23835 14.0263 6.47588 14.0699 6.71011L8.78991 9.14011C8.22699 8.58969 7.51415 8.21763 6.74071 8.07054C5.96727 7.92345 5.16762 8.00788 4.44196 8.31325C3.71629 8.61861 3.09687 9.13133 2.66131 9.78718C2.22574 10.443 1.99341 11.2128 1.99341 12.0001C1.99341 12.7874 2.22574 13.5572 2.66131 14.2131C3.09687 14.8689 3.71629 15.3816 4.44196 15.687C5.16762 15.9923 5.96727 16.0768 6.74071 15.9297C7.51415 15.7826 8.22699 15.4105 8.78991 14.8601L14.0699 17.2901C14.0263 17.5243 14.0029 17.7619 13.9999 18.0001C13.9999 18.7912 14.2345 19.5646 14.674 20.2224C15.1136 20.8802 15.7383 21.3929 16.4692 21.6956C17.2001 21.9984 18.0043 22.0776 18.7803 21.9233C19.5562 21.7689 20.2689 21.388 20.8283 20.8285C21.3877 20.2691 21.7687 19.5564 21.923 18.7805C22.0774 18.0046 21.9982 17.2003 21.6954 16.4694C21.3927 15.7385 20.88 15.1138 20.2222 14.6742C19.5644 14.2347 18.791 14.0001 17.9999 14.0001ZM17.9999 4.00011C18.3955 4.00011 18.7822 4.11741 19.111 4.33718C19.4399 4.55694 19.6963 4.8693 19.8477 5.23475C19.999 5.6002 20.0386 6.00233 19.9615 6.3903C19.8843 6.77826 19.6938 7.13462 19.4141 7.41433C19.1344 7.69403 18.778 7.88451 18.3901 7.96169C18.0021 8.03886 17.6 7.99925 17.2345 7.84787C16.8691 7.6965 16.5567 7.44015 16.337 7.11125C16.1172 6.78236 15.9999 6.39568 15.9999 6.00011C15.9999 5.46968 16.2106 4.96097 16.5857 4.5859C16.9608 4.21083 17.4695 4.00011 17.9999 4.00011ZM5.99991 14.0001C5.60434 14.0001 5.21766 13.8828 4.88877 13.6631C4.55987 13.4433 4.30352 13.1309 4.15215 12.7655C4.00077 12.4 3.96116 11.9979 4.03834 11.6099C4.11551 11.222 4.30599 10.8656 4.58569 10.5859C4.8654 10.3062 5.22176 10.1157 5.60973 10.0385C5.99769 9.96137 6.39982 10.001 6.76527 10.1524C7.13073 10.3037 7.44308 10.5601 7.66285 10.889C7.88261 11.2179 7.99991 11.6046 7.99991 12.0001C7.99991 12.5305 7.78919 13.0393 7.41412 13.4143C7.03905 13.7894 6.53034 14.0001 5.99991 14.0001ZM17.9999 20.0001C17.6043 20.0001 17.2177 19.8828 16.8888 19.6631C16.5599 19.4433 16.3035 19.1309 16.1521 18.7655C16.0008 18.4 15.9612 17.9979 16.0383 17.6099C16.1155 17.222 16.306 16.8656 16.5857 16.5859C16.8654 16.3062 17.2218 16.1157 17.6097 16.0385C17.9977 15.9614 18.3998 16.001 18.7653 16.1524C19.1307 16.3037 19.4431 16.5601 19.6628 16.889C19.8826 17.2179 19.9999 17.6046 19.9999 18.0001C19.9999 18.5305 19.7892 19.0393 19.4141 19.4143C19.039 19.7894 18.5303 20.0001 17.9999 20.0001Z" fill="#171717"/>
+</svg>

package/dist/f106fedfc261aa203f641adaf87ec68f.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9999 4.4804C16.4086 2.8891 14.2504 1.99512 11.9999 1.99512C9.74949 1.99512 7.59123 2.8891 5.99993 4.4804C4.40863 6.0717 3.51465 8.22996 3.51465 10.4804C3.51465 12.7308 4.40863 14.8891 5.99993 16.4804L11.2699 21.7604C11.3629 21.8541 11.4735 21.9285 11.5954 21.9793C11.7172 22.0301 11.8479 22.0562 11.9799 22.0562C12.1119 22.0562 12.2426 22.0301 12.3645 21.9793C12.4864 21.9285 12.597 21.8541 12.6899 21.7604L17.9999 16.4304C19.5846 14.8457 20.4748 12.6965 20.4748 10.4554C20.4748 8.21434 19.5846 6.06508 17.9999 4.4804ZM16.5699 15.0004L11.9999 19.5904L7.42993 15.0004C6.52707 14.0967 5.91241 12.9456 5.66362 11.6927C5.41484 10.4397 5.54312 9.14115 6.03223 7.96108C6.52135 6.78101 7.34935 5.77245 8.41156 5.06288C9.47377 4.3533 10.7225 3.97458 11.9999 3.97458C13.2773 3.97458 14.5261 4.3533 15.5883 5.06288C16.6505 5.77245 17.4785 6.78101 17.9676 7.96108C18.4567 9.14115 18.585 10.4397 18.3362 11.6927C18.0875 12.9456 17.4728 14.0967 16.5699 15.0004ZM8.99993 7.4104C8.19264 8.22017 7.73932 9.31697 7.73932 10.4604C7.73932 11.6038 8.19264 12.7006 8.99993 13.5104C9.59969 14.1112 10.3635 14.5215 11.1956 14.6898C12.0276 14.8581 12.8909 14.777 13.677 14.4566C14.4631 14.1361 15.1371 13.5907 15.6144 12.8886C16.0917 12.1866 16.3511 11.3593 16.3599 10.5104C16.3644 9.9436 16.2553 9.38166 16.0388 8.85779C15.8224 8.33392 15.5032 7.85875 15.0999 7.4604C14.7036 7.05498 14.231 6.73194 13.7094 6.50986C13.1877 6.28779 12.6273 6.17107 12.0603 6.16643C11.4934 6.16178 10.9311 6.2693 10.4059 6.48279C9.88067 6.69628 9.40285 7.01153 8.99993 7.4104ZM13.6899 12.0904C13.311 12.4751 12.8101 12.7163 12.2731 12.7727C11.736 12.829 11.196 12.697 10.7454 12.3993C10.2949 12.1016 9.96173 11.6566 9.80294 11.1405C9.64415 10.6243 9.66958 10.069 9.87489 9.56955C10.0802 9.07007 10.4526 8.65741 10.9285 8.40213C11.4044 8.14686 11.9542 8.06481 12.4839 8.17002C13.0135 8.27522 13.4902 8.56116 13.8324 8.97893C14.1746 9.3967 14.3611 9.92037 14.3599 10.4604C14.3454 11.0777 14.0864 11.6639 13.6399 12.0904H13.6899Z" fill="#818181"/>
+</svg>

package/dist/f8965838ad87362f7fd1507af2a45dfa.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="7" stroke="#171717" stroke-width="2"/>
+<path d="M20 20L17 17" stroke="#171717" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>waygomaps Test</title>
+  <link rel="stylesheet" href="src/styles.css">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* #map { position: absolute; z-index: 0; } */
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: 0;
+    }
+  </style>
+  <script src="dist/bundle.js"></script>
+</head>
+
+<body>
+  <div id="map"></div>
+  <script>
+
+    // waygomaps.setApiKey("USER'S-API-KEY");
+    // const map = new waygomaps.MapView({
+    //   container: 'map',
+    //   sourceId: 'e9df990cbd084934973a87fc2f3b0e74.move-america-2024.FTdsy9btTs6qumoZ6E8Z2Q',
+    // });
+
+    // // const searchBox = new waygomaps.SearchBox();
+    // // document.body.appendChild(searchBox.getElement());
+
+    // map.on('load', () => {
+    //   const searchBoxControl = new waygomaps.SearchBoxControl();
+    //   map.addControl(searchBoxControl);
+
+    //   const categoryBarControl = new waygomaps.CategoryBarControl();
+    //   map.addControl(categoryBarControl);
+
+    //   const searchResultsControl = new waygomaps.SearchResultsControl();
+    //   map.addControl(searchResultsControl);
+
+    //   const contentPlacementControl = new waygomaps.ContentPlacementControl();
+    //   map.addControl(contentPlacementControl);
+
+    //   const directionsControl = new waygomaps.DirectionsControl();
+    //   map.addControl(directionsControl);
+
+    //   const interactionControl = new waygomaps.InteractionControl();
+    //   map.addControl(interactionControl);
+    // })
+
+    // map.on('mousedown', (e) => {
+    //   console.log('Mouse down on map:', e);
+    // });
+
+    // map.on('click', (e) => {
+    //   console.log('Click on map:', e);
+    //   const {lng, lat} = map.getCenter();
+    //   console.log(lng, lat);
+    // });
+
+    // map.on('mouseover', (e) => {
+    //   console.log('Mouseover map:', e);
+    // });
+
+    // // map.on('mousemove', (e) => {
+    // //   console.log('mousemove map:', e);
+    // // });
+
+    // map.on('dblclick', (e) => {
+    //   console.log('dblclick map:', e);
+    // });
+
+    // map.on('mouseout', (e) => {
+    //   console.log('mouseout map:', e);
+    // });
+
+    // map.on('contextmenu', (e) => {
+    //   console.log('contextmenu map:', e);
+    // });
+
+    // map.on('wheel', (e) => {
+    //   console.log('wheel map:', e);
+    // });
+
+    // map.on('touchstart', (e) => {
+    //   console.log('touchstart map:', e);
+    // });
+
+    // map.on('touchstend', (e) => {
+    //   console.log('touchend map:', e);
+    // });
+
+    // map.on('touchmove', (e) => {
+    //   console.log('touchmove map:', e);
+    // });
+
+    // map.on('touchcancel', (e) => {
+    //   console.log('touchcancel map:', e);
+    // });
+
+    // map.on('move', () => {
+    //   console.log('The map is moving.');
+    // });
+
+    // map.on('zoom', () => {
+    //   console.log('The map is zooming.');
+    // });
+
+    map.on('zoomend', () => {
+      console.log(map.map.getZoom());
+    });
+
+    map.on('pitchend', () => {
+      console.log(map.map.getPitch());
+    });
+
+    map.on('rotateend', () => {
+      console.log(map.map.getBearing());
+    });
+
+    map.on('moveend', () => {
+      console.log(map.map.getCenter());
+    });
+
+  </script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "waygo-maps",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "axios": "^1.7.2",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.25.0",
+    "babel-loader": "^9.1.3",
+    "file-loader": "^6.2.0",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  }
+}

package/src/Controls/CategoryBarControl.js

@@ -0,0 +1,94 @@
+import SliderBar from "../components/SliderBar";
+import Control from "../core/Control";
+
+class CategoryBarControl extends Control {
+    constructor(options = {}) {
+        super(options);
+        const categories = [
+            { title: 'Energy & charging' },
+            { title: 'Mobility' },
+            { title: 'Automotive' },
+            { title: 'Indoor mapping' },
+            { title: 'Supply chain' },
+            { title: 'Tech data' },
+            { title: 'Insurance' },
+            { title: 'Rideshare' },
+            { title: 'Manufacturing' },
+            { title: 'Autonomous vehicles' },
+            { title: 'Human resources' },
+            { title: 'Battery tech' },
+            { title: 'Renewable energy' }
+        ];
+        this.categoryBar = new SliderBar(categories, {
+            container: 'category-bar'
+        });
+        this.map = null;
+    }
+
+    onAdd(map) {
+        this.map = map;
+
+        this.container = document.createElement('div');
+        this.container.className = 'category-bar-control-container';
+
+        const element = this.categoryBar.getElement();
+        this.container.appendChild(element);
+
+        this.initializeEventListeners();
+        this.show();
+        return this.container;
+    }
+
+    onRemove() {
+        super.onRemove();
+    }
+
+    initializeEventListeners() {
+        this.categoryBar.on('selectNew', this._handleNewCategoryButtonSelect.bind(this));
+        this.categoryBar.on('deselect', this._handleCategoryButtonDeselect.bind(this));
+        this.map.on('state:default', this._handleDefaultState.bind(this));
+        this.map.on('state:search', this._handleSearchState.bind(this));
+        this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));
+        this.map.on('state:directions', this._handleDirectionsState.bind(this));
+    }
+
+    _handleDefaultState() {
+        this.show();
+        this.categoryBar.deselectAll();
+    }
+
+    _handleSelectedContentState(_) {
+        this.hide()
+    }
+
+    _handleDirectionsState(_) {
+        // console.log("handling directions state in category bar control");
+        this.hide();
+    }
+
+
+    _handleNewCategoryButtonSelect(data) {
+        const { query } = data;
+        this.map.setToSearchState(query);
+    }
+
+    _handleCategoryButtonDeselect() {
+        this.map.setToDefaultState();
+    }
+
+    _handleSearchState(data) {
+        const { query, results } = data;
+        this.show();
+        this.categoryBar.deselectAllNotMatchingQuery(query);
+    }
+
+    show() {
+        this.container.classList.add('visible');
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+    }
+}
+
+export default CategoryBarControl;

package/src/Controls/ContentPlacementControl.js

@@ -0,0 +1,326 @@
+import ContentDetails from "../components/ContentPlacementView/ContentDetails";
+import Control from "../core/Control";
+
+class ContentPlacementControl extends Control {
+    constructor(options = {}) {
+        super(options);
+        this.map = null;
+        this.contentPlacementIds = [];
+        this.currentContentPlacement = null;
+    }
+
+    onAdd(map) {
+        this.map = map;
+
+        this.container = document.createElement('div');
+        this.container.className = 'content-details-control-container';
+
+        this.initializeEventListeners();
+        this.hide();
+        return this.container;
+    }
+
+    onRemove() {
+        super.onRemove();
+    }
+
+    initializeEventListeners() {
+        this.map.on('state:default', this._handleDefaultState.bind(this));
+        this.map.on('state:search', this._handleSearchState.bind(this));
+        this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));
+        this.map.on('state:directions', this._handleDirectionsState.bind(this));
+        this.map.on('initiate:back', this._handleMapInitiateBack.bind(this));
+    }
+
+    _handleMapInitiateBack() {
+        const currentState = this.map._stateCoordinator.state;
+
+        if (currentState === 'selectedContent') {
+            if (this.contentPlacementIds.length === 0) return;
+            else if (this.contentPlacementIds.length === 1) {
+                const stateHistory = this.map._stateCoordinator.stateHistory;
+                const previousMapState = stateHistory[stateHistory.length - 2];
+                stateHistory.pop();
+                stateHistory.pop();
+                if (previousMapState === 'search') {
+                    this.map.initiateSetToSearchState();
+                } else {
+                    this.map.setToDefaultState();
+                }
+            } else {
+                this.contentPlacementIds.pop();
+                this.map.setToSelectedContentState(this.contentPlacementIds);
+            }
+        } else if (currentState === 'directions') {
+            console.log("THIS IS BACK IN DIRECTIONS STATE:", this.contentPlacementIds.length);
+            this.map.setToSelectedContentState(this.contentPlacementIds);
+        }
+    }
+
+    _handleSelectChildContentPlacement(data) {
+        const { placementId } = data;
+        this.contentPlacementIds.push(placementId);
+        this.map.setToSelectedContentState(this.contentPlacementIds);
+    }
+
+    _handleDefaultState() {
+        this.hide();
+        this.contentPlacementIds = [];
+        this.currentContentPlacement = null;
+        this._clearViews();
+    }
+
+    _handleSearchState(_) {
+        // const { query, results } = data;
+        this.hide();
+        this.contentPlacementIds = [];
+        this.currentContentPlacement = null;
+        this._clearViews();
+    }
+
+    _handleSelectedContentState(data) {
+        const { contentPlacementIds, selectedContentPlacement } = data;
+
+        this.contentPlacementIds = contentPlacementIds;
+        this.currentContentPlacement = selectedContentPlacement;
+
+        console.log("SELECTED", selectedContentPlacement);
+
+        this._updateContentViews();
+        this.show();
+    }
+
+    _handleDirectionsState(_) {
+        // console.log("handling directions state in content placement control");
+        this.hide();
+        // this.contentPlacementIds = [];
+        // this.currentContentPlacement = null;
+        // this._clearViews();
+    }
+
+    async _handleSelectDirectionsButton(data) {
+        const { placementId } = data;
+        await this.map.setToDirectionsState(null, placementId);
+    }
+
+    _updateContentViews() {
+        this._clearViews();
+        this._render();
+    }
+
+    _render() {
+        if (this.contentPlacementIds.length === 0 || this.currentContentPlacement === null) return;
+
+        const contentPlacementView = new ContentDetails();
+        contentPlacementView.updateView(this.currentContentPlacement);
+        contentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+        contentPlacementView.on('selectDirectionsButton', this._handleSelectDirectionsButton.bind(this));
+
+        this.container.appendChild(contentPlacementView.getElement());
+    }
+
+    _clearViews() {
+        while (this.container.firstChild) {
+            this.container.removeChild(this.container.firstChild);
+        }
+    }
+
+    show() {
+        this.container.classList.add('visible');
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+    }
+}
+
+export default ContentPlacementControl;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// class ContentPlacementControl extends Control {
+//     constructor(options = {}) {
+//         super(options);
+//         this.map = null;
+//         this.contentPlacementStack = [];
+//         this.searchApi = waygoMaps.getSearchApi();
+
+//         this.currentView = null;
+//     }
+
+//     onAdd(map) {
+//         this.map = map;
+
+//         this.container = document.createElement('div');
+//         this.container.className = 'content-details-control-container';
+
+//         this.initializeEventListeners();
+//         this._attachResizeListener();
+//         this.hide();
+//         this._initialize();
+//         return this.container;
+//     }
+
+//     onRemove() {
+//         super.onRemove();
+//     }
+
+//     _initialize() {
+//         const containerWidth = this.map.mapContainer.offsetWidth;
+//         this._configureView(containerWidth);
+//     }
+
+//     _configureView(width) {
+//         if (width > 767) {
+//             this._setViewForDesktop();
+//         } else {
+//             this._setViewForMobile();
+//         }
+//     } 
+
+//     _setViewForDesktop() {
+//         console.log("SET VIEW FOR DESKTOP");
+//         this.currentView = 'desktop';
+//         this._updateContentViews();
+//     }
+
+//     _setViewForMobile() {
+//         console.log("SET VIEW FOR MOBILE");
+//         this.currentView = 'mobile';
+//         this._updateContentViews();
+//     }
+
+//     _attachResizeListener() {
+//         window.addEventListener('resize', () => {
+//             const newWidth = this.map.mapContainer.offsetWidth;
+//             // console.log("WIDTH", newWidth);
+//             this._configureView(newWidth);  // Reconfigure based on new width
+//         });
+//     }
+
+//     initializeEventListeners() {
+//         this.map.on('setToSearchState', this._handleSearchState.bind(this));
+//         this.map.on('setToDefaultState', this._handleDefaultState.bind(this));
+//         this.map.on('setToSelectedContentState', this._handleSelectedContentState.bind(this));
+//     }
+
+//     async _handleSelectChildContentPlacement(data) {
+//         const { placementId } = data;
+//         const contentPlacement = await this.map.getContentPlacementDetails(placementId);
+//         this.contentPlacementStack.push(contentPlacement);
+//         console.log(this.contentPlacementStack);
+//         this._updateContentViews();
+//     }
+
+//     // STATE METHODS
+//     _handleDefaultState() {
+//         this.hide();
+//         // Should clear them too!
+//     }
+
+//     _handleSearchState(data) {
+//         const { query, results } = data;
+//         this.hide();
+//     }
+
+//     _handleSelectedContentState(data) {
+//         const { contentPlacement } = data;
+//         this.contentPlacementStack = [contentPlacement];
+//         this._updateContentViews();
+//         this.show();
+
+//         // if (this.contentPlacementView && this.container.lastChild) {
+//         //     this.container.removeChild(this.container.lastChild);
+//         // }
+
+//         // this.contentPlacementView = new ContentDetails();
+//         // this.contentPlacementView.updateView(contentPlacement);
+//         // this.contentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+//         // this.container.appendChild(this.contentPlacementView.getElement());
+
+//         // NEED TO USE this.contentPlacementStack and CURRENT WIDTH TO APPRORIATELY SET VIEWS
+//     }
+
+//     _updateContentViews() {
+//         this._clearViews();
+
+//         if (this.currentView === 'desktop') {
+//             this._renderDesktopView();
+//         } else {
+//             this._renderMobileView();
+//         }
+//     }
+
+//     _renderDesktopView() {
+//         if (this.contentPlacementStack.length === 0) return;
+
+//         const firstPlacement = this.contentPlacementStack[0];
+//         const lastPlacement = this.contentPlacementStack[this.contentPlacementStack.length - 1];
+
+//         const leftContentPlacementView = new ContentDetails();
+//         leftContentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+//         leftContentPlacementView.updateView(firstPlacement);
+//         this.container.appendChild(leftContentPlacementView.getElement());
+
+//         if (this.contentPlacementStack.length > 1) {
+//             const rightContentPlacementView = new ContentDetails();
+//             rightContentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+//             rightContentPlacementView.updateView(lastPlacement);
+//             this.container.appendChild(rightContentPlacementView.getElement());
+//         }
+//     }
+
+//     _renderMobileView() {
+//         if (this.contentPlacementStack.length === 0) return;
+
+//         const lastPlacement = this.contentPlacementStack[this.contentPlacementStack.length - 1];
+
+//         const mobileContentPlacementView = new ContentDetails();
+//         mobileContentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+//         mobileContentPlacementView.updateView(lastPlacement);
+//         this.container.appendChild(mobileContentPlacementView.getElement());
+//     }
+
+//     _clearViews() {
+//         while (this.container.firstChild) {
+//             this.container.removeChild(this.container.firstChild);
+//         }
+//     }
+
+//     // HIDE/SHOW METHODS
+//     show() {
+//         this.container.classList.add('visible');
+//     }
+
+//     hide() {
+//         this.container.classList.remove('visible');
+//     }
+// }
+
+// export default ContentPlacementControl;