Skip to content

Commit

Permalink
Webkit translate fix cleanup (#26)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chadsr
chadsr authored Nov 30, 2021
1 parent 46dcb1b commit 744d517
Show file tree
Hide file tree
Showing 9 changed files with 212 additions and 266 deletions.
56 changes: 5 additions & 51 deletions src/scripts/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const LEFT_ARROW = 'ArrowLeft';
const RIGHT_ARROW = 'ArrowRight';

const CUBE_ID = 'content-cube';
const CUBE_WRAPPER_ID = 'content-cube-wrapper';
const CONTACT_FORM_ID = 'contact-form';

// Freaky Escher stuff
Expand All @@ -30,9 +29,7 @@ const MAX_SIDE = 3;
// The currently facing side of the content-cube
let currentSide = MIN_SIDE;

let isWebkit = false; // We need to apply a hack to safari, to fix 3d transforms, so this is used based on the browser's useragent
let windowHeight = window.innerHeight;
let cubeSize: number;

declare global {
interface Window {
Expand All @@ -46,17 +43,15 @@ declare global {
document.addEventListener('DOMContentLoaded', function () {
// Remove the class controlling styles when javascript is disabled
document.body.classList.remove('nojs-styles');

if (
(<Window>window.webkit && <Window>window.webkit.messageHandlers) ||
(navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1)
) {
fixTranslateZ();
isWebkit = true;
// store the current cube size
document.getElementById(CUBE_ID).classList.add('webkit');
}

// store the current cube size
cubeSize = parseInt(document.getElementById(CUBE_ID).style.width);

const swipe = new Hammer(document.body, {
recognizers: [[Hammer.Swipe, { enable: true }]],
});
Expand Down Expand Up @@ -103,18 +98,6 @@ document.addEventListener('DOMContentLoaded', function () {
rotateTo(3);
});

// const ethAddress = <HTMLTextAreaElement>document.getElementById('eth-addr');
// ethAddress.addEventListener('click', function () {
// this.focus();
// this.select();
// });

// const btcAddress = <HTMLTextAreaElement>document.getElementById('btc-addr');
// btcAddress.addEventListener('click', function () {
// this.focus();
// this.select();
// });

renderBackground();
});

Expand All @@ -132,40 +115,12 @@ document.addEventListener('keydown', function (event) {
}
});

// The cube should be rendering at the exact same size and the style sheet states.
// This is a hack for Safari/IOS/Webkit, to correct the size of the cube, since Webkit seems to act differently than all other web engines.
function fixTranslateZ() {
// Get the computed CSS size (width since it's a cube) of the cube
const cube = <HTMLDivElement>document.getElementById(CUBE_ID);
const cubeStyles = getComputedStyle(cube);

// Apply this value to the translateZ function of the cube's wrapper container
const cubeWrapper = document.getElementById(CUBE_WRAPPER_ID);
cubeWrapper.style.transform = `translateZ(-${cubeStyles.width})`;
}

window.addEventListener('resize', function () {
// Background is dependent on window height, so re-render if window height changes
if (this.innerHeight !== windowHeight) {
windowHeight = this.innerHeight;
renderBackground();
}

// Fix z translation for Apple Webkit based browsers, if the cube changed size
if (isWebkit) {
const cubeStyle = getComputedStyle(document.getElementById(CUBE_ID));
const newCubeSize = parseInt(cubeStyle.width);

if (cubeSize !== newCubeSize) {
cubeSize = newCubeSize;

// Wait until the transition is finished to fix the translateZ
const waitTimeSec = parseFloat(cubeStyle.transitionDuration) + 1;
setTimeout(() => {
fixTranslateZ();
}, waitTimeSec * 1000);
}
}
});

function renderBackground() {
Expand Down Expand Up @@ -196,11 +151,10 @@ function rotateTo(side: number) {

// Add classes to menu and cube face to indicate focus
navListElements[side].classList.add('selected');
const faces = cube.children;
const focusFace = <HTMLDivElement>faces[side];
const focusFace = cube.querySelector(`.face-${side}`);
focusFace.classList.add('focus');

const currentClass = cube.className.match('rotate-').input;
const currentClass = cube.className.match(/(?:^|)rotate-([\d]+)/)[0];

// Replace the existing class with one matching the newly focused side (While preserving any other classes)
cube.className = cube.className.replace(currentClass, `rotate-${side}`);
Expand Down
92 changes: 53 additions & 39 deletions src/stylesheets/media.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,45 @@ $bp-larger-than-desktop: 'min-width: 1000px' !default;
$bp-larger-than-desktophd: 'min-width: 1200px' !default;

// Mixin function handling all styles related to the cube over different sizes of width/height in pixels
@mixin cubeTransform($size) {
@mixin content-cube($size) {
@include cube-transform($size);

#content-cube {
width: $size;
height: $size;
}
}

@mixin cube-transform($size) {
.perspective {
perspective: $size * 2;
perspective-origin: center;
}

#content-cube-wrapper {
perspective-origin: 50% math.div($size, 2);
transform-origin: 50% 50% (-(math.div($size, 2)));
transform: translateZ(-(math.div($size, 2)));
}
.content-cube {
transform-origin: center center (-(math.div($size, 2)));

#content-cube {
width: $size;
height: $size;
&.webkit {
// fixes https://bugs.webkit.org/show_bug.cgi?id=88587
// TODO: remove if that bug is ever fixed
translate: 0 0 (-(math.div($size, 2)));
}

> .face {
&.face-top {
transform: rotateX(90deg) translateZ(math.div($size, 2));
}
&.face-front {
transform: translateZ(math.div($size, 2));
transform: rotateX(90deg) translateZ(math.div($size, 2)) translateY(-(math.div($size, 2)));
}
&.face-bottom {
transform: rotateX(-90deg) translateZ(math.div($size, 2));
transform: rotateX(-90deg) translateZ(math.div($size, 2)) translateY((math.div($size, 2)));
}
&.face-left {
transform: rotateY(-90deg) translateZ(math.div($size, 2));
transform: rotateY(-90deg) translateZ(math.div($size, 2)) translateX(-(math.div($size, 2)));
}
&.face-right {
transform: rotateY(90deg) translateZ(math.div($size, 2));
transform: rotateY(90deg) translateZ(math.div($size, 2)) translateX(math.div($size, 2));
}
&.face-back {
transform: rotateY(180deg) translateZ(math.div($size, 2));
transform: rotateY(180deg) translateZ($size);
}
}

Expand Down Expand Up @@ -76,105 +82,113 @@ $bp-larger-than-desktophd: 'min-width: 1200px' !default;
}
}
}

.content-cube > .face > .content {
padding: 8px;
}
}

@media only screen and (max-width: 806px) {
@include elasticNav();
}

@media only screen and (min-width: 100px) and (min-height: 200px) {
@include content-cube(100px);
}

@media only screen and (min-width: 200px) and (min-height: 300px) {
@include cubeTransform(200px);
@include content-cube(200px);
}

@media only screen and (min-width: 250px) and (min-height: 350px) {
@include cubeTransform(250px);
@include content-cube(250px);
}

// Larger than mini mobile
@media only screen and (min-width: 300px) and (min-height: 400px) {
@include cubeTransform(300px);
@include content-cube(300px);
}

@media only screen and (min-width: 350px) and (min-height: 450px) {
@include cubeTransform(350px);
@include content-cube(350px);
}

// Larger than mobile
@media only screen and (min-width: 400px) and (min-height: 500px) {
@include cubeTransform(400px);
@include content-cube(400px);
}

@media only screen and (min-width: 450px) and (min-height: 550px) {
@include cubeTransform(450px);
@include content-cube(450px);
}

@media only screen and (min-width: 500px) and (min-height: 600px) {
@include cubeTransform(500px);
@include content-cube(500px);
}

// Larger than phablet (also point when grid becomes active)
@media only screen and (min-width: 550px) and (min-height: 650px) {
@include cubeTransform(550px);
@include content-cube(550px);
}

@media only screen and (min-width: 600px) and (min-height: 700px) {
@include cubeTransform(600px);
@include content-cube(600px);
}

@media only screen and (min-width: 650px) and (min-height: 750px) {
@include cubeTransform(650px);
@include content-cube(650px);
}

@media only screen and (min-width: 700px) and (min-height: 800px) {
@include cubeTransform(700px);
@include content-cube(700px);
}

// Larger than tablet
@media only screen and (min-width: 750px) and (min-height: 850px) {
@include cubeTransform(700px);
@include content-cube(700px);
}

@media only screen and (min-width: 800px) and (min-height: 900px) {
@include cubeTransform(750px);
@include content-cube(750px);
}

@media only screen and (min-width: 900px) and (min-height: 1000px) {
@include cubeTransform(850px);
@include content-cube(850px);
}

// Larger than desktop
@media only screen and (min-width: 1000px) and (min-height: 1100px) {
@include cubeTransform(900px);
@include content-cube(900px);
}

@media only screen and (min-width: 1100px) and (min-height: 1200px) {
@include cubeTransform(1000px);
@include content-cube(1000px);
}

// Larger than Desktop HD
@media only screen and (min-width: 1200px) and (min-height: 1300px) {
@include cubeTransform(1100px);
@include content-cube(1100px);
h1 {
font-size: 6em;
}
}

@media only screen and (min-width: 1300px) and (min-height: 1400px) {
@include cubeTransform(1200px);
@include content-cube(1200px);
}

@media only screen and (min-width: 1400px) and (min-height: 1500px) {
@include cubeTransform(1300px);
@include content-cube(1300px);
}

@media only screen and (min-width: 1500px) and (min-height: 1600px) {
@include cubeTransform(1400px);
@include content-cube(1400px);
}

@media only screen and (min-width: 1600px) and (min-height: 1700px) {
@include cubeTransform(1500px);
@include content-cube(1500px);
}

@media only screen and (min-width: 1700px) and (min-height: 1800px) {
@include cubeTransform(1600px);
@include content-cube(1600px);
}
8 changes: 5 additions & 3 deletions src/stylesheets/nojs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body.nojs-styles .repo-stars::after {
content: '\2605';
}

body.nojs-styles header, body.nojs-styles #contact-wrapper {
body.nojs-styles header, body.nojs-styles #contact-form {
display: none;
}

Expand Down Expand Up @@ -138,8 +138,10 @@ body.nojs-styles .face .content ul > li ul > li {

body.nojs-styles footer {
width: 100%;
margin: 0 15%;
background-color: rgba(29, 54, 75, 1);
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}

body.nojs-styles nav > ul,
Expand Down
Loading

0 comments on commit 744d517

Please sign in to comment.