Skip to content

Commit

Permalink
Rename Comparison to DesignReference
Browse files Browse the repository at this point in the history
  • Loading branch information
@avisek
avisek committed Nov 14, 2023
1 parent c649544 commit d0bdf4e
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 60 deletions.
126 changes: 68 additions & 58 deletions homepage/Comparison.ts → homepage/DesignReference.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
class Comparison extends HTMLElement {
class DesignReference extends HTMLElement {

static ACTIVATE_KEY = 'Backquote'
static CHANGE_MODE_KEY = 'Tab'
Expand All @@ -13,15 +13,25 @@ class Comparison extends HTMLElement {

constructor() {
super()
const shadowRoot = this.attachShadow({ mode: 'open' })
const shadowRoot = this.attachShadow({ mode: 'closed' })

shadowRoot.innerHTML = /*html*/`
<style>
.Comparison {
--Comparison-opacity: 0.5;
--Comparison-wipeX: 0px;
--Comparison-wipeY: 0px;
--Comparison-wipeAngle: 0deg;
:host {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.DesignReference {
--DesignReference-opacity: 0.5;
--DesignReference-wipeX: 0px;
--DesignReference-wipeY: 0px;
--DesignReference-wipeAngle: 0deg;
position: absolute;
top: 0;
right: 0;
Expand All @@ -31,14 +41,14 @@ class Comparison extends HTMLElement {
pointer-events: none;
z-index: 999;
}
.Comparison-activateKeyHeld {
.DesignReference-activateKeyHeld {
pointer-events: auto;
}
.Comparison-active {}
.Comparison-mode-fade {}
.Comparison-mode-wipe {}
.DesignReference-active {}
.DesignReference-mode-fade {}
.DesignReference-mode-wipe {}
.Comparison_ImgWrapper {
.DesignReference_ImgWrapper {
position: absolute;
top: 0;
right: 0;
Expand All @@ -48,23 +58,23 @@ class Comparison extends HTMLElement {
overflow: hidden;
pointer-events: none;
}
.Comparison-active.Comparison-mode-fade > .Comparison_ImgWrapper {
opacity: var(--Comparison-opacity);
.DesignReference-active.DesignReference-mode-fade > .DesignReference_ImgWrapper {
opacity: var(--DesignReference-opacity);
}
.Comparison-active.Comparison-mode-wipe > .Comparison_ImgWrapper {
.DesignReference-active.DesignReference-mode-wipe > .DesignReference_ImgWrapper {
opacity: 1;
clip-path: url(#ClipPath);
}
.Comparison_Img {
.DesignReference_Img {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Comparison_Svg {
.DesignReference_Svg {
position: absolute;
top: 0;
right: 0;
Expand All @@ -76,39 +86,39 @@ class Comparison extends HTMLElement {
pointer-events: none;
}
.Comparison_ClipPath {
transform: rotate(var(--Comparison-wipeAngle));
.DesignReference_ClipPath {
transform: rotate(var(--DesignReference-wipeAngle));
transform-origin: left;
transform-box: fill-box;
transition: transform 0.5s;
}
.Comparison_ClipPath > rect {
x: calc(50% + var(--Comparison-wipeX));
y: calc(-150vmax + var(--Comparison-wipeY));
.DesignReference_ClipPath > rect {
x: calc(50% + var(--DesignReference-wipeX));
y: calc(-150vmax + var(--DesignReference-wipeY));
width: calc(150vmax + 1vmin);
height: calc(300vmax + 100%);
}
</style>
<div class="Comparison">
<div class="Comparison_ImgWrapper">
<img class="Comparison_Img" src="./design/desktop-design.jpg" alt="Design Reference"/>
<div class="DesignReference">
<div class="DesignReference_ImgWrapper">
<img class="DesignReference_Img" src="./design/desktop-design.jpg" alt="Design Reference"/>
</div>
<svg class="Comparison_Svg">
<svg class="DesignReference_Svg">
<defs>
<clipPath class="Comparison_ClipPath" id="ClipPath">
<clipPath class="DesignReference_ClipPath" id="ClipPath">
<rect/>
</clipPath>
</defs>
</svg>
</div>
`

this.Container = shadowRoot.querySelector('.Comparison')!
this.ImgWrapper = shadowRoot.querySelector('.Comparison_ImgWrapper')!
this.Img = shadowRoot.querySelector('.Comparison_Img')!
this.ClipPath = shadowRoot.querySelector('.Comparison_ClipPath')!
this.Container = shadowRoot.querySelector('.DesignReference')!
this.ImgWrapper = shadowRoot.querySelector('.DesignReference_ImgWrapper')!
this.Img = shadowRoot.querySelector('.DesignReference_Img')!
this.ClipPath = shadowRoot.querySelector('.DesignReference_ClipPath')!
}

static modes = {
Expand All @@ -119,7 +129,7 @@ class Comparison extends HTMLElement {
activateKeyHeld = false
active = false
sticky = false
mode = Comparison.modes.FADE
mode = DesignReference.modes.FADE
opacity = 0.5
initialOpacity = this.opacity
wipeX = 0
Expand All @@ -134,35 +144,35 @@ class Comparison extends HTMLElement {
screenHeight = 0

updateMode() {
this.Container.classList.toggle('Comparison-mode-fade', this.mode === Comparison.modes.FADE)
this.Container.classList.toggle('Comparison-mode-wipe', this.mode === Comparison.modes.WIPE)
this.Container.classList.toggle('DesignReference-mode-fade', this.mode === DesignReference.modes.FADE)
this.Container.classList.toggle('DesignReference-mode-wipe', this.mode === DesignReference.modes.WIPE)

this.updateImageView()
}

updateImageView() {
switch (this.mode) {
case Comparison.modes.FADE:
case DesignReference.modes.FADE:
this.Container.style.setProperty(
'--Comparison-opacity',
'--DesignReference-opacity',
`${this.active ? this.opacity : 0}`
)
break
case Comparison.modes.WIPE:
case DesignReference.modes.WIPE:
this.Container.style.setProperty(
'--Comparison-opacity',
'--DesignReference-opacity',
`${this.active ? 1 : 0}`
)
this.Container.style.setProperty(
'--Comparison-wipeX',
'--DesignReference-wipeX',
`${this.wipeX}px`
)
this.Container.style.setProperty(
'--Comparison-wipeY',
'--DesignReference-wipeY',
`${this.wipeY}px`
)
this.Container.style.setProperty(
'--Comparison-wipeAngle',
'--DesignReference-wipeAngle',
`${this.wipeAngle}deg`
)
break
Expand All @@ -171,22 +181,22 @@ class Comparison extends HTMLElement {

show() {
this.active = true
this.Container.classList.add('Comparison-active')
this.Container.classList.add('DesignReference-active')
this.updateImageView()
this.dragStart()
this.updateCursor()
}

hide() {
this.Container.classList.remove('Comparison-active')
this.Container.classList.remove('DesignReference-active')
this.active = false
this.updateImageView()
this.dragEnd()
this.updateCursor()
}

changeMode() {
const modes = Object.values(Comparison.modes)
const modes = Object.values(DesignReference.modes)
const currentModeIndex = modes.indexOf(this.mode)
const nextModeIndex = (currentModeIndex + 1) % modes.length
this.mode = modes[nextModeIndex]
Expand All @@ -196,11 +206,11 @@ class Comparison extends HTMLElement {

changeSubMode() {
switch (this.mode) {
case Comparison.modes.FADE:
case DesignReference.modes.FADE:

return

case Comparison.modes.WIPE:
case DesignReference.modes.WIPE:
this.wipeAngle += 90
this.updateCursor(100)
this.updateImageView()
Expand All @@ -210,21 +220,21 @@ class Comparison extends HTMLElement {

onKeyDown = (e: KeyboardEvent) => {
switch (e.code) {
case Comparison.ACTIVATE_KEY:
case DesignReference.ACTIVATE_KEY:
e.preventDefault()
if (e.repeat) return
this.sticky = false
this.activateKeyHeld = true
this.Container.classList.add('Comparison-activateKeyHeld')
this.Container.classList.add('DesignReference-activateKeyHeld')
this.show()
return
case Comparison.CHANGE_MODE_KEY:
case DesignReference.CHANGE_MODE_KEY:
if (!this.activateKeyHeld) return
e.preventDefault()
if (e.repeat) return
this.changeMode()
return
case Comparison.CHANGE_SUB_MODE_KEY:
case DesignReference.CHANGE_SUB_MODE_KEY:
if (!this.activateKeyHeld) return
e.preventDefault()
this.changeSubMode()
Expand All @@ -234,8 +244,8 @@ class Comparison extends HTMLElement {

onKeyUp = (e: KeyboardEvent) => {
switch (e.code) {
case Comparison.ACTIVATE_KEY:
this.Container.classList.remove('Comparison-activateKeyHeld')
case DesignReference.ACTIVATE_KEY:
this.Container.classList.remove('DesignReference-activateKeyHeld')
this.activateKeyHeld = false
if (!this.sticky) {
this.hide()
Expand All @@ -247,7 +257,7 @@ class Comparison extends HTMLElement {
onMouseDown = (e: MouseEvent) => {
if (this.activateKeyHeld) {
e.preventDefault()
if (e.buttons === Comparison.ACTIVATE_STICKY_MOUSE_BTN) {
if (e.buttons === DesignReference.ACTIVATE_STICKY_MOUSE_BTN) {
this.sticky = true
}
}
Expand Down Expand Up @@ -295,7 +305,7 @@ class Comparison extends HTMLElement {

dragMove() {
const dX = this.currentX - this.initialX
this.opacity = Math.min(Math.max(this.initialOpacity + dX / Comparison.SLIDER_WIDTH, 0), 1)
this.opacity = Math.min(Math.max(this.initialOpacity + dX / DesignReference.SLIDER_WIDTH, 0), 1)

this.wipeX = this.currentX - this.screenWidth / 2
this.wipeY = this.currentY - this.screenHeight / 2
Expand All @@ -313,11 +323,11 @@ class Comparison extends HTMLElement {
}

switch (this.mode) {
case Comparison.modes.FADE:
case DesignReference.modes.FADE:
this.setCursor('ew-resize', throttle)
return

case Comparison.modes.WIPE:
case DesignReference.modes.WIPE:
this.setCursor(this.wipeAngle % 180 >= 90 ? 'row-resize' : 'col-resize', throttle)
return
}
Expand Down Expand Up @@ -399,6 +409,6 @@ class Comparison extends HTMLElement {
}
}

window.customElements.define('design-ref', Comparison)
window.customElements.define('design-reference', DesignReference)

document.body.appendChild(new Comparison())
document.body.appendChild(new DesignReference())
2 changes: 1 addition & 1 deletion solutions/qr-code-component/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<link rel="stylesheet" href="./main.scss"/>
<script type="module" src="./main.ts"></script>
<script type="module" src="/Comparison.ts"></script>
<script type="module" src="/DesignReference.ts"></script>
</head>
<body>

Expand Down
2 changes: 1 addition & 1 deletion vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export default defineConfig({
},
resolve: {
alias: {
'/Comparison.ts': path.resolve(__dirname, './homepage/Comparison.ts'),
'/DesignReference.ts': path.resolve(__dirname, './homepage/DesignReference.ts'),
},
},
plugins: [
Expand Down

0 comments on commit d0bdf4e

Please sign in to comment.