Click Page to return from MidFader

When hitting the `§` button, clicking the "current page" again wouldn't show the page, added a check+function to reveal the page if hidden & current page clicked

Author: ProcStack

docs/index.htm

@@ -95,8 +95,8 @@
                   <a href="Blog.htm" class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="default" page-name="Blog" alt="My ramblings...">Blog</a>
                   <a href="AboutMe.htm" class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="aboutMe" page-name="AboutMe" alt="It's ah me! Marrr.... yeah"><span class="procPagesHideWhenThin">About&nbsp;</span>Me</a>
                   <span id="procPagesToggleDOM" class="procPagesToggleDOMStyle">
-                    <a class="pageLinkStyle" pageEvent="ToggleDOM" pageValue=1 alt="Toggle the website contents">§</a>
-                    <a class="pageLinkStyle" pageEvent="ToggleDOM" pageValue=0 alt="Toggle the website contents">¤</a>
+                    <a class="pageLinkStyle pageLinkEventStyle" pageEvent="ToggleDOM" pageValue=1 alt="Toggle the website contents">§</a>
+                    <a class="pageLinkStyle pageLinkEventStyle" pageEvent="ToggleDOM" pageValue=0 alt="Toggle the website contents">¤</a>
                   </span>
                 </div>
             </div>

docs/js/procPages/ProcPage.js

@@ -135,6 +135,8 @@ export class ProcPage {
         }
       });
     }
+
+    this.callbacks = [];
   }
 
   // -- -- --
@@ -894,6 +896,8 @@ export class ProcPage {
       obj.classList.remove('pagesVisOff');
       obj.scrollTop = 0;
     });
+
+    console.log( this.sectionData[ sectionName ] );
   }
 
 
@@ -1090,4 +1094,18 @@ export class ProcPage {
     return this.pageStyles.hasOwnProperty( styleType );
   }
 
+
+  subscribe( callback ){
+    if( typeof callback == 'function' ){
+      this.callbacks.push( callback );
+    }
+  }
+  emit( ...args ){
+    this.callbacks.forEach( (callbackFn)=>{
+      if( typeof callbackFn == 'function' ){
+        callbackFn( ...args );
+      }
+    });
+  }
+
 }

docs/js/procPages/ProcPageManager.js

@@ -277,6 +277,7 @@ export class ProcPageManager {
         e.preventDefault();
         let curPageId = this.curPageName;
         if( linkText == curPageId ){
+          this.checkDisplayState( false );
           return;
         }
         this.changePage( linkText, pxlRoomName, pxlCameraView );
@@ -494,6 +495,7 @@ export class ProcPageManager {
 
       let pageObj = pageData[pageKey].buildPage();
       this.pageListing[pageKey][ "obj" ] = pageObj;
+      console.log( pageObj )
     });
 
   }
@@ -625,10 +627,7 @@ export class ProcPageManager {
         }
       }
 
-      if( this.domEventStates.ToggleDOM ){
-        this.toggleMidFader( this.mainDiv, false );
-        this.triggerDomEvent("ToggleDOM", false);
-      }
+      this.checkDisplayState( false );
 
       // Set current page value
       let pageListing = this.pageListing[pageName];
@@ -742,6 +741,11 @@ export class ProcPageManager {
 
   }
 
+  sectionChangeCallback( sectionData ){
+    console.log( sectionData );
+  }
+
+
 /**
  * @method checkForRedirect
  * @description Checks the URL for a 'redirect' query parameter and updates the page state accordingly
@@ -786,6 +790,7 @@ export class ProcPageManager {
   }
 
 
+
   onResize(){}
 
 /**
@@ -890,6 +895,17 @@ export class ProcPageManager {
     }
   }
 
+  checkDisplayState( toggleState=null){
+    if( toggleState == null ){
+      toggleState = this.domEventStates.ToggleDOM
+    }
+    
+    //if( this.domEventStates.ToggleDOM ){
+      this.toggleMidFader( this.mainDiv, toggleState );
+      this.triggerDomEvent("ToggleDOM", toggleState);
+    //}
+  }
+
   /*runHidePages(){
     let pageListingKeys = Object.keys(this.pageListing);
     pageListingKeys.forEach( (pageKey)=>{

docs/pages/aboutMe/whatAmI.js

@@ -16,9 +16,9 @@ export const pageListingData = {
       <span class="textBold">Technical Artist</span>; 2D+3D asset optimization, shaders, & pipeline tools
     </div>
     <div class='procPagesAboutMe-skillListStyle'>
-      <span class="ppamSkillListing">Houdini / VEX</span>
-      <span class="ppamSkillListing">Maya / MEL</span>
-      <span class="ppamSkillListing">Unity / C#</span>
+      <span class="ppamSkillListing">Houdini <span class="textDrinkMeAlice">&nbsp;/&nbsp;</span> VEX</span>
+      <span class="ppamSkillListing">Maya <span class="textDrinkMeAlice">&nbsp;/&nbsp;</span> MEL</span>
+      <span class="ppamSkillListing">Unity <span class="textDrinkMeAlice">&nbsp;/&nbsp;</span> C#</span>
       <span class="ppamSkillListing">Photoshop</span>
 
       <span class="ppamSkillListing">Python</span>

docs/style/procPages/procPages_aboutMeStyle.css

@@ -186,6 +186,8 @@
   width: 100%;
   height: 100%;
   display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
   align-items: center;
   justify-items: center;
   border: solid 1px rgba(97, 97, 97, 0.71);

docs/style/procPages/procPages_mainStyle.css

@@ -393,6 +393,10 @@ text-shadow: 1px 1.5px 4px #252525;
   transition: color .15s, border .15s, background-color .15s, text-shadow .15s;
 }
 
+.pageLinkEventStyle{
+  width: 1ch;
+}
+
 
 .imageDesc{
   display: grid;