From b4ce1643f7a0a1dae5fde754774acbfd9bb8d7be Mon Sep 17 00:00:00 2001 From: Patrick McKinney Date: Mon, 25 Feb 2019 09:02:43 -0500 Subject: [PATCH 1/2] add logical support for toggling information window --- assets/info-window.css | 15 +++++++++++++++ assets/toggle-window.js | 36 ++++++++++++++++++++++++++++++++++++ img/close-arrow.png | Bin 0 -> 5103 bytes img/open-arrow.png | Bin 0 -> 5384 bytes index.html | 9 ++++++++- info.html | 7 ++++--- 6 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 assets/info-window.css create mode 100644 assets/toggle-window.js create mode 100644 img/close-arrow.png create mode 100644 img/open-arrow.png diff --git a/assets/info-window.css b/assets/info-window.css new file mode 100644 index 0000000..a18164c --- /dev/null +++ b/assets/info-window.css @@ -0,0 +1,15 @@ +.toggle-info-window-container { + position: fixed; + z-index: 500; + top: 50%; + left: 240px; + padding: 10px; + background: #fff; +} +#toggle-icon { + height: 25px; + width: 25px; +} +#info-window .closed { + +} \ No newline at end of file diff --git a/assets/toggle-window.js b/assets/toggle-window.js new file mode 100644 index 0000000..65b8901 --- /dev/null +++ b/assets/toggle-window.js @@ -0,0 +1,36 @@ +'use strict'; + +// information window +var infoWindow = document.getElementById('info-window'); +// button to toggle information window +var toggleInfoWindowButton = document.getElementById('toggle-info-window'); +// toggle image +var toggleIcon = document.getElementById('toggle-icon'); +// add click event listener +toggleInfoWindowButton.addEventListener('click', toggleInfoWindow); + +function toggleInfoWindow() { + // get listing of classes for info window + var classList = infoWindow.classList; + + if (classList.contains('open')) { + console.log('info window is open'); + // remove open class + classList.remove('open'); + // add closed class + classList.add('closed'); + // move info window off of screen to the left - css + // keep button on edge of screen + // change icon to open button + toggleIcon.src = '../img/open-arrow.png' + } else { + console.log('info window is closed'); + // remove closed class + classList.remove('closed'); + // add open class + classList.add('open'); + // move info window to original location - css + // change icon to close button + toggleIcon.src = '../img/close-arrow.png' + } +} \ No newline at end of file diff --git a/img/close-arrow.png b/img/close-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ab70ce1a9fe6f189dd460510d3320f128cac31 GIT binary patch literal 5103 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 literal 0 HcmV?d00001 diff --git a/img/open-arrow.png b/img/open-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..8d173af1bcac8dafbea2eac60c55e44b0286aa32 GIT binary patch literal 5384 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 3f8a0ba..9f33399 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,14 @@ + -
+
beta
@@ -27,6 +28,11 @@
+
+ +
@@ -223,5 +229,6 @@

Fill

+ diff --git a/info.html b/info.html index ac4a18d..e6a8dd2 100644 --- a/info.html +++ b/info.html @@ -28,8 +28,9 @@

About

Vector is a free GIS viewer and editing tool. It is intended for GIS users who create and manage their data in Esri's ArcServer and/or ArcGIS Online. If you use public or private Feature Services, Map Services, or Hosted Feature Services this tool is for you.

-

Vector exists not to replace fully-featured desktop GIS software. Instead, it is intended to be an alternative experience for viewing and editing your data over the web. It provides a simple interface to create and edit both geometry and attribute data. Vector does not have the complete editing tools of desktop software, but it is a great option for most editing situations.

+

Vector exists not to replace fully-featured desktop GIS software. Instead, it is intended to be an alternative experience for viewing and editing your data over the web. It provides a simple interface to create and edit both geometry and attribute data. Vector does not have the complete editing tools of desktop software, but it is a great option for most editing situations.

Vector was built using the open source libraries of Leaflet, Esri Leaflet, and Leaflet PM. These are all awesome projects. A big thank you goes out to the creators and maintainers of them. Steve Cline created Vector and maintains this site.

+

Arrow icons for toggling the information window created by Smashicons, and can be downloaded from FlatIcon. Icons are licensed by CC 3.0 BY FlatIcon.

Help

Connecting to your Services

@@ -66,8 +67,8 @@

Legal

This site does not store any of your data, URLs, metadata, user names, or passwords. It simply offers a way for you to interact with Esri services. This site does not use cookies. To restore sessions, this site uses your browser's Local Storage to store service URLs, layer styles, and desired fields for non-protected services. Tokens and passwords are not stored, so protected services will not be restored after the browser window is closed.

Vector GIS Data Editor -
+ - + \ No newline at end of file From 6aa64b3aa7baf47376d29d74ad97228d7e5a9b2c Mon Sep 17 00:00:00 2001 From: Patrick McKinney Date: Tue, 26 Feb 2019 14:27:31 -0500 Subject: [PATCH 2/2] add logic to hide and open info window --- assets/info-window.css | 7 +++++-- assets/toggle-window.js | 43 +++++++++++++++++++++++++++-------------- index.html | 2 +- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/assets/info-window.css b/assets/info-window.css index a18164c..0221da7 100644 --- a/assets/info-window.css +++ b/assets/info-window.css @@ -10,6 +10,9 @@ height: 25px; width: 25px; } -#info-window .closed { - +div.w3-sidebar.closed { + left: -240px; +} +div.toggle-info-window-container.closed { + left: 0px; } \ No newline at end of file diff --git a/assets/toggle-window.js b/assets/toggle-window.js index 65b8901..d95d99c 100644 --- a/assets/toggle-window.js +++ b/assets/toggle-window.js @@ -1,7 +1,11 @@ 'use strict'; +// map container +var mapContainer = document.getElementById('map'); // information window var infoWindow = document.getElementById('info-window'); +// container for toggle button +var toggleContainer = document.getElementById('toggle-div'); // button to toggle information window var toggleInfoWindowButton = document.getElementById('toggle-info-window'); // toggle image @@ -10,27 +14,38 @@ var toggleIcon = document.getElementById('toggle-icon'); toggleInfoWindowButton.addEventListener('click', toggleInfoWindow); function toggleInfoWindow() { - // get listing of classes for info window - var classList = infoWindow.classList; - - if (classList.contains('open')) { - console.log('info window is open'); + // get listing of CSS classes + var infoWindowClassList = infoWindow.classList; + var toggleContainerClassList = toggleContainer.classList; + + // run logic based upon info window being open or closed + if (infoWindowClassList.contains('open')) { // remove open class - classList.remove('open'); + infoWindowClassList.remove('open'); + toggleContainerClassList.remove('open'); // add closed class - classList.add('closed'); + infoWindowClassList.add('closed'); + toggleContainerClassList.add('closed'); // move info window off of screen to the left - css - // keep button on edge of screen - // change icon to open button + mapContainer.style.left = '0px'; + // refresh map to prevent blank space + map.invalidateSize(); + // change toggle icon to open button toggleIcon.src = '../img/open-arrow.png' + toggleIcon.title = 'Click to open information window'; } else { - console.log('info window is closed'); // remove closed class - classList.remove('closed'); + infoWindowClassList.remove('closed'); + toggleContainerClassList.remove('closed'); // add open class - classList.add('open'); - // move info window to original location - css - // change icon to close button + infoWindowClassList.add('open'); + toggleContainerClassList.add('open'); + // move info window to original location + mapContainer.style.left = '240px'; + // refresh map to prevent blank space + map.invalidateSize(); + // change toggle icon to close button toggleIcon.src = '../img/close-arrow.png' + toggleIcon.title = 'Click to hide information window'; } } \ No newline at end of file diff --git a/index.html b/index.html index 9f33399..0e14dc2 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
-
+