Skip to content

Commit c260cb0

Browse files
ProcStackProcStack
committed
Shader Editor & Pages style, mid fader button
Added a § and ¤ toggle for the DOM content to hide to see the background easier. Shader Editor smoother style changes and fix to the screen better Pages disappear completely on mid fade.
1 parent 2da5aff commit c260cb0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1512
-579
lines changed

‎Build/pxlNav.min.js

Lines changed: 50 additions & 48 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Build/pxlNavStyle.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Build/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Public/index.htm

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@
4444
<a class="pageLinkStyle" pxlRoomName="SaltFlatsEnvironment" pxlCameraView="Default" pageName="ProjectsLinks" alt="Real world projects">Projects<span class="squashInLowRes">&nbsp;/ Links</span></a>
4545
<a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="Default" pageName="Blog" alt="My ramblings...">Blog</a>
4646
<a class="pageLinkStyle" pxlRoomName="CampfireEnvironment" pxlCameraView="aboutMe" pageName="AboutMe" alt="It's ah me! Marrr.... yeah"><span class="squashInLowRes">About&nbsp;</span>Me</a>
47+
<span id="gitPageToggleDOM" class="gitPageToggleDOMStyle">
48+
<a class="pageLinkStyle" pageEvent="ToggleDOM" pageValue=1 alt="Toggle the website contents">§</a>
49+
<a class="pageLinkStyle" pageEvent="ToggleDOM" pageValue=0 alt="Toggle the website contents">¤</a>
50+
</span>
4751
</div>
4852
</div>
4953
<div id="gitPageContentParent" class="gitPageContentParentStyle gpcpVisibleStyle heightFader">

‎Public/js/ProcPages.js

Lines changed: 93 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,18 @@ export class ProcPages {
3535

3636
this.navBarLinks = [];
3737
this.navBarObjs = {};
38+
this.toggleDomEvents = {};
3839
this.resObjsVis = true;
3940
this.resBasedObjs = [];
4041
this.triggerEmitFunc = null;
4142
// this.navBar.init();
4243

4344
this.pageStyleOverrides = {};
4445
this.runningTimeouts = {};
46+
47+
this.domEventStates = {
48+
'ToggleDOM' : false,
49+
};
4550
}
4651

4752
hashListener() {
@@ -56,6 +61,20 @@ export class ProcPages {
5661
}
5762
});
5863
}
64+
65+
setPxlNavVersion( version ){
66+
if( version[0] != "v" ){
67+
version = "v" + version;
68+
}
69+
let pnv = document.getElementById("pxlNavVersion");
70+
if( pnv ){
71+
pnv.innerText = version;
72+
}
73+
let pnpv = document.getElementById("pxlNavPageVersion");
74+
if( pnpv ){
75+
pnpv.innerText = version;
76+
}
77+
}
5978

6079
init(){
6180
this.mainDiv = document.getElementById("procStackGitBlock");
@@ -74,6 +93,7 @@ export class ProcPages {
7493
let pageDivs = [...pageDivsStyles];
7594
let pageHash = this.getHash();
7695

96+
this.findDomUserEvents();
7797

7898
pageDivs.forEach( (pageDiv)=>{
7999
this.prepFader(pageDiv);
@@ -153,6 +173,64 @@ export class ProcPages {
153173

154174
}
155175

176+
findDomUserEvents(){
177+
let toggleDomObjs = [...document.getElementById("gitPageToggleDOM").children];
178+
toggleDomObjs.forEach( (toggleLink)=>{
179+
let domEventType = toggleLink.getAttribute("pageEvent");
180+
if( !this.toggleDomEvents.hasOwnProperty(domEventType) ){
181+
this.toggleDomEvents[domEventType] = {};
182+
}
183+
184+
// Toggle event obj value to display when value is 1:true / 0:false
185+
let domEventValue = parseInt( toggleLink.getAttribute("pageValue") );
186+
// Flip it from 1 to true, 0 to false
187+
domEventValue = !!domEventValue;
188+
189+
if( domEventValue ){
190+
this.toggleDomEvents[domEventType]["on"] = toggleLink;
191+
}else{
192+
this.toggleDomEvents[domEventType]["off"] = toggleLink;
193+
}
194+
if( domEventValue == this.domEventStates[domEventType] ){
195+
toggleLink.style.display = "none";
196+
}else{
197+
toggleLink.style.display = "block";
198+
}
199+
});
200+
201+
let toggleDomKeys = Object.keys(this.toggleDomEvents);
202+
toggleDomKeys.forEach( (key)=>{
203+
let curObj = this.toggleDomEvents[key];
204+
if( curObj.hasOwnProperty("on") && curObj.hasOwnProperty("off") ){
205+
curObj["on"].addEventListener("click", (e)=>{
206+
this.toggleDomEvents[key]["on"].style.display = "none";
207+
this.toggleDomEvents[key]["off"].style.display = "block";
208+
this.toggleMidFader( this.mainDiv, true );
209+
});
210+
curObj["off"].addEventListener("click", (e)=>{
211+
this.toggleDomEvents[key]["off"].style.display = "none";
212+
this.toggleDomEvents[key]["on"].style.display = "block";
213+
this.toggleMidFader( this.mainDiv, false );
214+
});
215+
}
216+
});
217+
}
218+
219+
triggerDomEvent( eventType, value ){
220+
if( this.toggleDomEvents.hasOwnProperty(eventType) ){
221+
let curObj = this.toggleDomEvents[eventType];
222+
if( curObj.hasOwnProperty("on") && curObj.hasOwnProperty("off") ){
223+
if( value ){
224+
curObj["on"].style.display = "none";
225+
curObj["off"].style.display = "block";
226+
}else{
227+
curObj["off"].style.display = "none";
228+
curObj["on"].style.display = "block";
229+
}
230+
}
231+
}
232+
}
233+
156234
// -- -- --
157235

158236
eventHandler( e ){
@@ -242,6 +320,11 @@ export class ProcPages {
242320
}
243321
}
244322

323+
if( this.domEventStates.ToggleDOM ){
324+
this.toggleMidFader( this.mainDiv, false );
325+
this.triggerDomEvent("ToggleDOM", false);
326+
}
327+
245328
// Set current page value
246329
this.curPageName = pageName;
247330
this.curPage = this.pageListing[pageName]["obj"];
@@ -299,6 +382,7 @@ export class ProcPages {
299382
let btnWidth = navLink.offsetWidth;
300383
buttonWidthAgr += btnWidth;
301384
});
385+
buttonWidthAgr += this.toggleDomEvents["ToggleDOM"]["on"].offsetWidth;
302386

303387
let navBarWidth = this.navBar.offsetWidth * 0.9;
304388
let navBarThreshold = this.navBar.offsetWidth * 0.6;
@@ -375,40 +459,36 @@ export class ProcPages {
375459

376460
let pageDivsStyles = document.getElementsByName("gitPage");
377461
if( vis ){
462+
this.domEventStates.ToggleDOM = true;
378463
obj.style.display = "block";
379464
obj.classList.add("pagesVisMid");
380465
obj.classList.remove("pagesVisOn");
381466

382467
pageDivsStyles.forEach( (pageDiv)=>{
383468
pageDiv.style.maxHeight="0px";
384469
pageDiv.style.minHeight="0px";
470+
pageDiv.style.padding="0px";
385471
pageDiv.classList.add("gpcpHiddenStyle");
386472
pageDiv.classList.remove("gpcpVisibleStyle");
473+
474+
pageDiv.style.border = "0px";
387475
});
388476
} else {
477+
this.domEventStates.ToggleDOM = false;
389478
obj.classList.add("pagesVisOn");
390479
obj.classList.remove("pagesVisMid");
391480
pageDivsStyles.forEach( (pageDiv)=>{
392481
pageDiv.style.maxHeight = "";
393482
pageDiv.style.minHeight = "";
483+
pageDiv.style.padding = "";
394484
pageDiv.classList.add("gpcpVisibleStyle");
395485
pageDiv.classList.remove("gpcpHiddenStyle");
486+
487+
488+
pageDiv.style.border = "";
396489
});
397490
}
398491
}
399-
setPxlNavVersion( version ){
400-
if( version[0] != "v" ){
401-
version = "v" + version;
402-
}
403-
let pnv = document.getElementById("pxlNavVersion");
404-
if( pnv ){
405-
pnv.innerText = version;
406-
}
407-
let pnpv = document.getElementById("pxlNavPageVersion");
408-
if( pnpv ){
409-
pnpv.innerText = version;
410-
}
411-
}
412492

413493
hidePage( pageName ){
414494
if( this.navBarObjs.hasOwnProperty(pageName) ){

‎Public/style/gitPage_initStyle.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
max-width: calc( 100vw - max(5vh,5vw) );
1111
z-index: 1;
1212
border-radius: 5px;
13+
overflow: hidden;
1314
}
1415

1516
/* -- -- -- */

‎Public/style/gitPage_mainStyle.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ BODY {
8080
z-index: 310;
8181
}
8282

83+
/* -- -- -- -- -- -- -- -- -- -- -- -- */
84+
85+
8386

8487

8588
/* -- -- -- -- -- -- -- -- -- -- -- -- */
@@ -172,7 +175,14 @@ text-shadow: 1px 1.5px 4px #252525;
172175
min-height: 16vh;
173176
font-size: 1.2em;
174177
text-wrap-style: balance;
178+
position: relative;
179+
transition: padding .8s, max-height .8s, min-height .8s;
175180
}
181+
182+
183+
/* -- -- -- */
184+
185+
176186
.gitPageContentStyle a{
177187
color: #ccddff;
178188
text-decoration: none;

‎Public/style/styleTemplates/gitPage_bileStyle.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
3+
.pxlPagesBileStyle{
4+
background-color: rgba(43, 37, 11, 0.58);
5+
text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
6+
border: 1px solid rgba(67, 60, 21, 0.445);
7+
pointer-events: auto;
8+
max-height: 65vh;
9+
max-width: calc(100vw - max(5vh,5vw));
10+
position: fixed;
11+
bottom: max(4vh,4vw);
12+
justify-self: center;
13+
z-index: 2;
14+
}
15+
16+
.pxlPagesBileStyle::-webkit-scrollbar {
17+
width: 10px;
18+
}
19+
20+
.pxlPagesBileStyle::-webkit-scrollbar-track {
21+
background: rgba(66, 54, 14, 0.31);
22+
}
23+
24+
.pxlPagesBileStyle::-webkit-scrollbar-thumb {
25+
cursor: grab;
26+
background-color: rgb(78 66 9);
27+
border: 2px solid rgba(90, 73, 6, 0.6);
28+
}
29+
.pxlPagesBileStyle::-webkit-scrollbar-thumb:hover {
30+
background-color: rgb(143, 113, 16);
31+
border: 2px solid rgba(131, 107, 11, 0.636);
32+
}
33+
34+
35+
/* -- -- -- */
36+
/* -- -- -- */
37+
38+
39+
40+
.gitPageNav_pxlNavStyle {
41+
background: linear-gradient(90deg, rgba(30, 33, 11, 0), rgba(63, 57, 38, 0.24), rgba(80, 79, 23, 0.34), rgba(64, 54, 13, 0.24), rgba(45, 44, 12, 0));
42+
border-bottom: 1px solid rgba(83, 93, 22, 0.34);
43+
}
44+
.gitPageNav_pxlNavStyle a {
45+
border: 1px solid rgba(89, 75, 19, 0.94);
46+
color: #b28823;
47+
background-color: rgba(70, 66, 56, 0.37);
48+
}
49+
.gitPageNav_pxlNavStyle a:hover {
50+
color: #d3b322;
51+
text-shadow: 1px 1.5px 4px #55503e;
52+
background-color: rgba(131, 111, 15, 0.773);
53+
border: 1px solid rgba(119, 118, 28, 0.941);
54+
}
55+
.gitPageNav_pxlNavStyle a:active {
56+
color: #8c7820;
57+
text-shadow: 1px 1.5px 4px #5a5049;
58+
background-color: rgba(105, 88, 28, 0.37);
59+
border: 1px solid rgb(83, 73, 17);
60+
}
61+
62+
63+
/* -- -- -- */
64+
65+
66+
.pxlNavPage_footerBar{
67+
background: linear-gradient(90deg, rgba(174, 163, 13, 0.15), rgba(66, 77, 15, 0.1), rgba(66, 77, 15, 0.0), rgba(66, 77, 15, 0.0), rgba(66, 77, 15, 0.1), rgba(174, 163, 13, 0.15));
68+
color: #aa8735;
69+
}
70+
.pxlNavPage_footerBar a {
71+
color: #aa8735;
72+
}
73+
.pxlNavPage_footerBar a:hover {
74+
color: #cb9e35;
75+
font-weight: 600;
76+
text-shadow: 1px 1.5px 4px rgba(50,50,50,.5);
77+
}
78+
.pxlNavPage_footerBar a:active {
79+
color: #72591d;
80+
text-shadow: 1px 1.5px 4px rgba(50,50,50,.75);
81+
}
82+
83+
/* -- -- -- */

‎Public/style/styleTemplates/gitPage_greyStyle.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
3+
4+
/* -- -- -- */
5+
6+
7+
8+
.gitAboutMePageStyle{
9+
background-color: rgba(100, 100, 100, 0.35);
10+
text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
11+
border: 1px solid rgba(60, 60, 60, 0.6);
12+
pointer-events: auto;
13+
position: fixed;
14+
top: max(7vh,7vw);
15+
left: calc(min(max(max(2vh,2vw),(100vw - 700px) / 10), max(50vw - 300px, max(2vh,2vw))));
16+
max-width: calc(100vw - max(6vh,6vw));
17+
width: calc(max(1000px, 45vw));
18+
max-height: calc(100vh - max(7vh, 7vw) - 50px);
19+
z-index: 6;
20+
}
21+
22+
23+
/* -- -- -- */
24+
25+
.gitPageNav_aboutMeStyle {
26+
background: linear-gradient(90deg, rgba(20, 20, 20, 0.0), rgba(80, 80, 80, 0.45), rgba(85, 85, 85, 0.55), rgba(80, 80, 80, 0.45), rgba(20, 20, 20, 0.0) );
27+
border-bottom: 1px solid rgba(120, 120, 120, 0.45);
28+
}
29+
.gitPageNav_aboutMeStyle a {
30+
border: 1px solid #ffffff;
31+
color: #ffffff;
32+
background-color: rgba(110, 110, 110, .35);
33+
}
34+
.gitPageNav_aboutMeStyle a:hover {
35+
text-shadow: 1px 1.5px 4px #cccccc;
36+
background-color: rgba(180, 180, 180, .85);
37+
}
38+
.gitPageNav_aboutMeStyle a:active {
39+
color: #cccccc;
40+
text-shadow: 1px 1.5px 4px #656565;
41+
background-color: rgba(100, 100, 100, .85);
42+
}
43+
44+
/* -- -- -- */
45+
46+
.aboutMePage_footerBar{
47+
background: linear-gradient(90deg, rgba(80, 80, 80, 0.15), rgba(70, 70, 70, 0.1), rgba(20, 20, 20, 0.0), rgba(20, 20, 20, 0.0), rgba(70, 70, 70, 0.1), rgba(80, 80, 80, 0.15));
48+
color: #999999;
49+
}
50+
51+
.aboutMePage_footerBar a {
52+
color: #999999;
53+
}
54+
.aboutMePage_footerBar a:hover {
55+
color: #e5e5e5;
56+
font-weight: 600;
57+
text-shadow: 1px 1.5px 4px rgba(50,50,50,.5);
58+
}
59+
.aboutMePage_footerBar a:active {
60+
color: #cccccc;
61+
text-shadow: 1px 1.5px 4px rgba(50,50,50,.75);
62+
}
63+
64+
/* -- -- -- */
65+
66+

0 commit comments

Comments
 (0)