Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Added handle for before/after slider

Browse source 
refs https://github.com/TryGhost/Team/issues/1249

Using an input as the slider handle meant setting a width of 100% + px,
which could push width over the size of the screen - not good! This
takes the same approach as the CodePen linked below and uses a separate
element, which has the position of it updated by JS in realtime.

https://codepen.io/josephwong2004/pen/NWRGxdR
This commit is contained in:
Fabien egg O'Carroll 2021-12-15 15:16:29 +02:00
parent da586b3705
commit a21a436f98
4 changed files with 46 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
core/frontend/src/cards/css/before-after.css
View file

@ -16,12 +16,11 @@
}
.kg-before-after-card input {
top:0;
left: -25px;
position: absolute;
top: 0;
-webkit-appearance: none;
appearance: none;
width: calc(100% + 50px);
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
outline: none;
@ -31,17 +30,47 @@
.kg-before-after-card input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
width: 5px;
height: 100%;
background: white;
cursor: pointer;
border-radius: 25px;
}
.kg-before-after-card input::-moz-range-thumb {
width: 50px;
height: 50px;
width: 5px;
height: 100%;
background: white;
cursor: pointer;
border-radius: 25px;
}
.kg-before-after-card-slider-button {
pointer-events: none;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
left: calc(50% - 18px);
top: calc(50% - 18px);
display: flex;
justify-content: center;
align-items: center;
}
.kg-before-after-card-slider-button:after {
transform: rotate(-45deg);
content: '';
padding: 3px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
}
.kg-before-after-card-slider-button:before {
transform: rotate(135deg);
content: '';
padding: 3px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
}

9
core/frontend/src/cards/js/before-after.js
View file

@ -5,18 +5,15 @@
const isFullWidth = card.classList.contains('kg-width-full');
const input = card.querySelector('input');
const overlay = card.querySelector('.kg-before-after-card-image-before');
const orientation = card.querySelector('div').getAttribute('data-orientation');
const button = card.querySelector('.kg-before-after-card-slider-button');
const images = [...card.querySelectorAll('img')];
const smallestImageWidth = Math.min(
...images.map(img => parseInt(img.getAttribute('width')))
);
function updateSlider() {
if (orientation === 'vertical') {
overlay.setAttribute('style', `height: ${input.value}%`);
} else {
overlay.setAttribute('style', `width: ${input.value}%`);
}
overlay.setAttribute('style', `width: ${input.value}%`);
button.setAttribute('style', `left: calc(${input.value}% - 18px`);
}
function updateDimensions() {

2
package.json
View file

@ -73,7 +73,7 @@
"@tryghost/job-manager": "0.8.17",
"@tryghost/kg-card-factory": "3.1.0",
"@tryghost/kg-default-atoms": "3.1.0",
"@tryghost/kg-default-cards": "5.14.7",
"@tryghost/kg-default-cards": "5.14.8",
"@tryghost/kg-markdown-html-renderer": "5.1.0",
"@tryghost/kg-mobiledoc-html-renderer": "5.3.1",
"@tryghost/limit-service": "1.0.7",

8
yarn.lock
View file

@ -1503,10 +1503,10 @@
resolved "https://registry.npmjs.org/@tryghost/kg-default-atoms/-/kg-default-atoms-3.1.0.tgz"
integrity sha512-FfROzVgqJWqJ7cVdS9dcALz7rnzNfV8zcrymAJrDTHDsqzAdMfSLe1tNQRm8zas9pyZLsD8zBGmLxG9dr4WFSA==
"@tryghost/kg-default-cards@5.14.7":
version "5.14.7"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.14.7.tgz#2d237078dd35b5928a5a6af88bd486df2f02e3d9"
integrity sha512-agdeLcYTG/rulozNSMvmX1rT+adrPhalTmn9H6shBZO2PGW2LX2HMi+x3tnT5HIkyI//5LOmTG/HwkVfhbSQZQ==
"@tryghost/kg-default-cards@5.14.8":
version "5.14.8"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.14.8.tgz#cc930321545961ebc53bee07310bc119b4b54ef3"
integrity sha512-ZBfePGqSnhNkuwXsK2Agrz1OHEQg86rs67obkjpR+/9b/LYOnzR0WAzY/ayLqvpnbluTlHb+e/YsT6QxtDRajg==
dependencies:
"@tryghost/kg-markdown-html-renderer" "^5.1.0"
"@tryghost/url-utils" "^2.0.0"