summary: adding error checking to the dropdown map hover

detail: added try catch to make sure there are no undefined
messages when hovering over a map section with no page id or data

diff --git a/css/app.css b/css/app.css
index 2b786f1..e89e6f6 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6586,7 +6586,7 @@ body #interactive-map ul.map-dropdown {
         height: 100%;
         width: 100%; }
     body #interactive-map ul.map-dropdown #region-map-data a.map-title-link {
-      padding-left: 10px;
+      padding-left: 13px;
       display: inline-block;
       font-size: 1.4rem;
       font-weight: bold;
@@ -6610,7 +6610,7 @@ body #interactive-map ul.map-dropdown {
       text-align: left;
       color: white;
       font-family: "Roboto", sans-serif;
-      margin-left: 10px; }
+      margin-left: 12px; }
 
 main {
   padding-bottom: 376px; }

diff --git a/parts/interactive-map.php b/parts/interactive-map.php
index 7bb20ec..44308e7 100644 (file)
--- a/parts/interactive-map.php
+++ b/parts/interactive-map.php
@@ -1,6 +1,6 @@
 <ul id="interactive-map">
     <li class="drop-centered menu-item menu-item-object-page menu-item-has-children drop-left has-dropdown not-click">
-        <a href="<?php echo get_permalink(155); ?>">Day Trip</a>
+        <a href="<?php echo get_permalink(116); ?>">Day Trip</a>
         <ul class="dropdown map-dropdown">
             <div id="region-map">
 <!--                 <img class="svg" src="<?php echo get_template_directory_uri();?>/assets/Map-final.svg" alt="Map">-->
@@ -8,7 +8,7 @@
             </div>
             <div id="region-map-data">
               <!-- default page id = 116 -->
-            <?php $community_page_object  = get_page( 116 ); ?>
+            <?php $default_page           = get_page( 116 ); ?>
             <?php $default_image          = wp_get_attachment_image_src( get_post_thumbnail_id( 116 ), 'medium'); ?>
             <?php $community_page_url     = get_permalink( 116 ); ?>
             <?php $default_content        = get_the_excerpt(116); ?>
@@ -24,7 +24,7 @@
 <?php
     $nav_args = array(
     'post_type' => 'page',
-    'post__in' => array(812,814,816,818,823,821,825,827,829,831,835,833, 837),
+    'post__in' => array(812,814,816,818,823,821,825,827,829,831,835,833, 837,116),
     'posts_per_page' => -1,
     'numberposts' => -1
 
@@ -40,28 +40,33 @@ foreach ($nav_posts as $p){
     $image = wp_get_attachment_image_src( get_post_thumbnail_id($p->ID), 'map-image');
     $sites[$p->ID]['image'] = $image[0];
     $sites[$p->ID]['excerpt'] = get_the_excerpt( $p->ID );
-
-//    $filter_content = substr(strip_tags($page_object->post_content),0, 300);
-//    $filter_content = strip_shortcodes($filter_content);
-//    $sites[$p->ID]['content'] = $filter_content;
 }
 $js_sites = json_encode($sites);
 ?>
 <script>
     jQuery(function($){
-        
         var content = $('#interactive-map');
         var id, sites = [];
+
+        function set_default_data(){
+            content.find('.map-image-container img').attr('src', sites[116]['image']);
+            content.find('.map-title-link').html('<?php echo $default_page->post_title; ?>');
+            content.find('.map-page-content').html(sites[116]['excerpt']);
+        }
+
         sites = <?php echo $js_sites ?>;
         
-        
-
-       $('text:not(.cls-18, .canada)').hover(
+        $('text:not(.cls-18, .canada)').hover(
            function(){
                id = $(this).attr('id');
-               console.log(id);
-               content.find('.map-image-container img').attr('src', sites[id]['image']);
-               content.find('.map-title-link').html(sites[id]['title']);
+               try{
+                   content.find('.map-image-container img').attr('src', sites[id]['image']);
+                   content.find('.map-title-link').html(sites[id]['title']);
+                   content.find('.map-page-content').html(sites[id]['excerpt']);
+               } catch(e){
+                   console.log("This page doesn't exit or it has the wrong id in the pages array");
+               }
+                   
                if( $(this).find('tspan').attr('y') === '9.25'){
                    $(this).find('tspan').attr('y', '14.25');
                }
@@ -70,7 +75,13 @@ $js_sites = json_encode($sites);
            function(){
                 $(this).find('tspan').attr('y', '9.25');
            }
-       );
+        );
         
+        content.children('li').mouseenter(function(){
+           set_default_data(); 
+        });
+        content.find('.map-dropdown').mouseleave(function(){
+           set_default_data();
+        });
     });
 </script>
\ No newline at end of file

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 7e7bb46..887b8a0 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -241,7 +241,7 @@ body #interactive-map{
                 }
             }
             a.map-title-link{
-                padding-left: 10px;
+                padding-left: 13px;
                 display: inline-block;
                 font-size: 1.4rem;
                 font-weight: bold;
@@ -270,7 +270,7 @@ body #interactive-map{
                 text-align: left;
                 color: white;
                 font-family: "Roboto", sans-serif;
-                margin-left: 10px;
+                margin-left: 12px;
             }
         }
     }