Skip to content

Commit fdd7977

Browse files
ProcStackProcStack
committed
Pages display as folders now
URLs of pages are now `pageName/sectionName.htm` _Pages understand requesting the sub section and displays on load
1 parent 241a851 commit fdd7977

23 files changed

+183
-33
lines changed

‎docs/404.html

-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
<script>
2323
(()=>{
2424
let basePath = window.location.pathname;
25-
basePath = basePath.split('/');
26-
basePath = basePath.pop();
2725
let getData = "";
2826
if(window.location.search) {
2927
getData = window.location.search;

‎docs/js/procPages/ProcPage.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class ProcPage {
9393
// -- -- --
9494

9595
this.defaultSectionData = {
96+
'htmlName' : '',
9697
'isLoaded' : false,
9798
'isActive' : false,
9899
'name' : '',
@@ -847,8 +848,20 @@ export class ProcPage {
847848

848849
if( Number.isInteger(sectionName) ){
849850
sectionName = this.sectionTitles[sectionName];
851+
}else if( typeof sectionName == 'string' && sectionName.includes(".htm") ){
852+
let foundSectionTitle = this.sectionTitles[0];
853+
for( let x=0; x<this.sectionTitles.length; ++x ){
854+
let htmlName = this.sectionData[ this.sectionTitles[x] ].htmlName;
855+
if( sectionName == htmlName ){
856+
foundSectionTitle = this.sectionTitles[x];
857+
break;
858+
}
859+
}
860+
sectionName = foundSectionTitle;
850861
}
851862

863+
// -- -- --
864+
852865
if( this.prevSection != null ){
853866
this.deactivateSection( this.prevSection );
854867
}
@@ -868,6 +881,7 @@ export class ProcPage {
868881
}
869882

870883

884+
871885
// Modify page's media display
872886
// Vertical center single media
873887
// Hide media area if no media exists for the current section
@@ -897,7 +911,13 @@ export class ProcPage {
897911
obj.scrollTop = 0;
898912
});
899913

900-
console.log( this.sectionData[ sectionName ] );
914+
let emitData = {
915+
'dir' : this.page,
916+
'page' : this.sectionData[ sectionName ].htmlName
917+
};
918+
919+
this.emit( emitData );
920+
901921
}
902922

903923

‎docs/js/procPages/ProcPageManager.js

+121-19
Original file line numberDiff line numberDiff line change
@@ -112,18 +112,27 @@ export class ProcPageManager {
112112

113113
// Check for forward-back history navigation
114114
window.addEventListener("popstate", (e) => {
115-
let newPage = this.getPageURL();
116-
if( newPage != this.curPageName ){
115+
let urlData = this.getPageURL();
116+
let newPage = urlData.page;
117+
118+
if( !this.pageListing.hasOwnProperty(newPage) ){
119+
console.warn("Page not found in pageListing: " + newPage);
120+
newPage = this.defaultPage;
121+
}
117122

123+
if( newPage != this.curPageName ){
118124
// Swap page content
119125
this.changePage(newPage);
120126

121127
// Run page theming and callback functions
122-
if( this.pageListing.hasOwnProperty(newPage) ){
123-
this.curPageName = newPage;
124-
this.curPage = this.pageListing[newPage]["obj"];
125-
this.postLoad();
126-
}
128+
this.curPageName = newPage;
129+
this.curPage = this.pageListing[newPage]["obj"];
130+
this.postLoad();
131+
}
132+
133+
if( urlData.section != null ){
134+
let pageData = this.pageListing[newPage]["pageData"];
135+
pageData.activateSection( urlData.section );
127136
}
128137
});
129138

@@ -177,7 +186,10 @@ export class ProcPageManager {
177186
});
178187

179188
// Rectify the URL state and set the current page
180-
let pageURL = this.getPageURL();
189+
let pageURLData = this.getPageURL();
190+
let pageURL = pageURLData.page;
191+
let pageSection = pageURLData.section;
192+
181193

182194
// Find the dom user clickable actions
183195
this.findDomUserEvents();
@@ -213,6 +225,7 @@ export class ProcPageManager {
213225
this.updateDocumentMetaData( pageURL );
214226
}
215227

228+
216229
this.curPageName = pageURL;
217230

218231

@@ -302,6 +315,14 @@ export class ProcPageManager {
302315
//this.runHidePages();
303316
this.activateNavButton( this.curPageName );
304317

318+
// Check the current page section
319+
if( pageSection != null && pageSection != "" ){
320+
let pageData = this.pageListing[pageURL]["pageData"];
321+
if( pageData ){
322+
pageData.activateSection( pageSection );
323+
}
324+
}
325+
305326
}
306327

307328
// -- -- --
@@ -371,7 +392,7 @@ export class ProcPageManager {
371392
// -- -- --
372393

373394
/**
374-
* @method getPageURL
395+
* @method triggerDomEvent
375396
* @returns {string} - The current page URL
376397
* @description Retrieves the current page URL from the browser's address bar
377398
*/
@@ -495,7 +516,10 @@ export class ProcPageManager {
495516

496517
let pageObj = pageData[pageKey].buildPage();
497518
this.pageListing[pageKey][ "obj" ] = pageObj;
498-
console.log( pageObj )
519+
520+
// Connect when sections change, to update the page manager
521+
// This is used for history state pushes to a `folder/page` URL
522+
pageData[pageKey].subscribe( this.sectionChangeCallback.bind(this) );
499523
});
500524

501525
}
@@ -640,7 +664,16 @@ export class ProcPageManager {
640664
}
641665

642666
// Update URL page display & history state
643-
this.shiftHistoryState( pageName );
667+
let pageData = this.pageListing[pageName]['pageData'];
668+
let prevSection = pageData['prevSection'];
669+
let sectionData = pageData['sectionData'][ prevSection ];
670+
if( sectionData && sectionData.hasOwnProperty("htmlName") ){
671+
let htmlName = sectionData["htmlName"];
672+
let formattedURL = this.formatURL( pageName, htmlName );
673+
this.shiftHistoryState( formattedURL );
674+
}else{
675+
this.shiftHistoryState( pageName );
676+
}
644677

645678
// Update Meta Data
646679
this.updateDocumentMetaData( pageName );
@@ -710,8 +743,9 @@ export class ProcPageManager {
710743
shiftHistoryState( pageName ){
711744
let urlDisplay = pageName;
712745

713-
if( urlDisplay.includes(".htm") ){
714-
urlDisplay = urlDisplay.split(".")[0];
746+
let urlCheck = urlDisplay.split("/")[0];
747+
if( urlCheck.includes(".htm") ){
748+
urlCheck = urlCheck.split(".")[0];
715749
}
716750

717751
// Check for specific capitalization of file url names
@@ -728,6 +762,7 @@ export class ProcPageManager {
728762
urlDisplay += ".htm";
729763
}
730764

765+
/*
731766
let urlFolderPath = window.location.pathname;
732767
if( urlFolderPath.includes(".htm") ){
733768
urlFolderPath = urlFolderPath.split("/");
@@ -737,12 +772,51 @@ export class ProcPageManager {
737772
urlFolderPath = urlFolderPath+"/";
738773
}
739774
let url = window.location.origin + urlFolderPath + urlDisplay;
775+
*/
776+
if( !urlDisplay.startsWith("/") ){
777+
urlDisplay = "/" + urlDisplay;
778+
}
779+
let url = window.location.origin + urlDisplay;
740780
window.history.pushState({path:url}, '', url);
741781

742782
}
743783

784+
/**
785+
* Recieve page section change callback from the page itself
786+
*
787+
* This is used to push state to the browser history when the page has a section change
788+
* @method sectionChangeCallback
789+
* @param {Object} sectionData - Data object containing section information
790+
*/
744791
sectionChangeCallback( sectionData ){
745-
console.log( sectionData );
792+
let pageName = null;
793+
let sectionName = null;
794+
if( !sectionData || !sectionData.hasOwnProperty("page") ){
795+
pageName = this.curPageName;
796+
}else{
797+
pageName = sectionData['dir'];
798+
if( sectionData.hasOwnProperty("page") ){
799+
sectionName = sectionData['page'];
800+
}
801+
}
802+
803+
let formattedURL = this.formatURL( pageName, sectionName );
804+
this.shiftHistoryState( formattedURL );
805+
}
806+
807+
/**
808+
* Format URL from page + section callback
809+
*/
810+
formatURL( pageName, sectionName ){
811+
let urlDisplay = pageName;
812+
813+
if( sectionName != null ){
814+
urlDisplay += "/" + sectionName;
815+
}
816+
if( !urlDisplay.includes(".htm") ){
817+
urlDisplay += ".htm";
818+
}
819+
return urlDisplay;
746820
}
747821

748822

@@ -772,8 +846,15 @@ export class ProcPageManager {
772846
this.checkForRedirect();
773847

774848
// Pull base name from the url
775-
let url = window.location.href;
849+
let url = window.location.pathname;
850+
851+
if( url == "/index.htm" || url == "/" ){
852+
this.shiftHistoryState( this.defaultPage );
853+
return {'page':this.defaultPage, 'section':null};
854+
}
855+
776856
let urlSplit = url.split("/");
857+
777858
let urlLast = urlSplit[urlSplit.length-1];
778859
if( urlLast != "" ){
779860
let urlSplitDot = urlLast.split(".");
@@ -782,11 +863,32 @@ export class ProcPageManager {
782863
ret = urlPage;
783864
}
784865
}
785-
if( ret.toLowerCase() == "index" ){
786-
ret = this.defaultPage;
787-
this.shiftHistoryState( ret );
866+
867+
urlSplit = urlSplit.filter( (path)=>{ return path != ""; });
868+
869+
870+
let urlFolderPath = null;
871+
let urlPagePath = urlSplit.pop();
872+
if( urlSplit.length > 0 ){
873+
urlFolderPath = urlSplit.join("/");
788874
}
789-
return ret;
875+
876+
let pageCheck = (urlFolderPath || urlPagePath).toLowerCase();
877+
if( pageCheck.includes(".htm") ){
878+
pageCheck = pageCheck.split(".")[0];
879+
}
880+
881+
if( (urlFolderPath == null || urlFolderPath == "") && urlPagePath != "" ){
882+
urlFolderPath = urlPagePath;
883+
urlPagePath = "";
884+
}
885+
urlFolderPath = urlFolderPath.replace(/\.htm/g, "");
886+
if( urlFolderPath == "" ){
887+
urlFolderPath = this.defaultPage;
888+
urlPagePath = "";
889+
}
890+
891+
return {'page':urlFolderPath, 'section':urlPagePath};
790892
}
791893

792894

‎docs/pages/aboutMe/aidev.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "AI_Dev.htm",
34
'name' : 'AI Dev',
45
'media' : [
56
{

‎docs/pages/aboutMe/filmWork.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "Film_Work.htm",
34
'name' : 'My Film Work',
45
'media' : [
56
{

‎docs/pages/aboutMe/plushies.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "Plushies.htm",
34
'name' : 'Plushies',
45
'media' : [
56
{

‎docs/pages/aboutMe/whatAmI.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "What_am_I.htm",
34
'name' : 'What am I?',
45
'media' : [
56
{

‎docs/pages/blog.js

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const pageContentObject = {
4343
},
4444
'sections' : [
4545
{
46+
'htmlName' : "Blog.htm",
4647
'name' : 'Blog',
4748
'content' : `
4849
<div id="blogEntryListing" class="blogEntryListStyle"></div>

‎docs/pages/makingOf.js

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const pageContentObject = {
4343
},
4444
'sections' : [
4545
{
46+
'htmlName' : "Making_Of.htm",
4647
'name' : 'Making of ProcStack.GitHub.io',
4748
'media' : [
4849
{

‎docs/pages/projects/Metal-Asylum.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "Metal-AsylumNet.htm",
34
'name' : 'Metal-Asylum.Net',
45
'navGroup' : 'Personal Projects',
56
'navStyle' : ['hideOnMobile'],

‎docs/pages/projects/NeurousNet.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "NeurousNet.htm",
34
'name' : 'Neurous Net',
45
'navGroup' : 'Personal Projects',
56
'media' : [

‎docs/pages/projects/dwitter.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "Dwitter.htm",
34
'name' : 'Dwitter',
45
'navGroup' : "The One'Offs",
56
'navStyle' : ['hideOnMobile'],

‎docs/pages/projects/procPromo.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "procPromo.htm",
34
'name' : 'procPromo<span class="hideOnMobile">&nbsp;Shader Pack</span>',
45
'navGroup' : 'Repos to Check Out',
56
'media' : [

‎docs/pages/projects/procstackgithubio.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "procstack.github.io.htm",
34
'name' : 'procstack.github.io',
45
'navGroup' : 'Repos to Check Out',
56
'navStyle' : ['hideOnMobile'],

‎docs/pages/projects/pxlCam.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "pxlCam.htm",
34
'name' : 'pxlCam',
45
'navGroup' : 'Personal Projects',
56
'media' : [

‎docs/pages/projects/pxlTextGenerator.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "pxlTextGenerator.htm",
34
'name' : 'pxlTextGenerator',
45
'navGroup' : 'Repos to Check Out',
56
'media' : [

‎docs/pages/projects/pxlVisualizer.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
export const pageListingData = {
3+
'htmlName' : "pxlVisualizer.htm",
34
'name' : 'pxlVisualizer',
45
'navGroup' : 'Repos to Check Out',
56
'media' : [

0 commit comments

Comments
 (0)