��

mybb@mybb.ru (daddy issues) — Mon, 28 Aug 2023 16:42:49 +0300

[html]
<style>
h5 {
opacity: 0.66;
font-weight: normal;
font-size: 1.25rem;
}

.container {
position: relative;
width: 430px;
height: 350px;
margin: 50px auto;
background: #fafafa;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}

.time {
padding: 10px;
display: flex;
justify-content: space-around;
}

.time-item {
flex: 1 1 auto;
border-radius: 5px;
margin-right: 5px;
height: 10px;
background-color: rgba(0,0,0,0.10);
position: relative;
overflow: hidden;
}

.time-item:last-child {
margin-right: 0;
}

.time-item > div {
position: absolute;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}

.content {
position: absolute;
height: 350px;
width:430px;
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(0,0,0,0.15) 100%);

display: flex;
flex-direction: column;
justify-content: flex-end;
}
.texts {
padding: 7%;
}

#back, #next {
position: absolute;
top: 0;
}

#back {
left: 0;
height: 100%;
width: 50%;
}

#next {
left: 50%;
height: 100%;
width: 50%;
}

</style>
<script>

const stories = [
{
title: 'Story 1',
description: 'description 1',
image: 'https://i.pinimg.com/736x/2e/be/62/2ebe623d6d27d70ea13731a01b4210e9.jpg',
time: 3500
},
{
title: 'Story 2',
description: 'description 2',
image: 'https://i.pinimg.com/736x/7c/f8/18/7cf818809ed21f9d21263b8a8417d504.jpg',
time: 4000
},{
title: 'Story 3',
description: 'description 3',
image: 'https://i.pinimg.com/736x/b7/7b/e1/b77be1a020e21187490bb65859d2832c.jpg',
time: 2500
},
{
title: 'Story 4',
description: 'description 4',
image: 'https://i.pinimg.com/736x/8d/77/5e/8d775e040b58466a44518ad6b5c2a678.jpg',
time: 7500
}
]

const container = document.querySelector('.container')
const nextButton = document.querySelector('#next')
const backButton = document.querySelector('#back')

function Storyfier(storiesArray, rootEl) {
this.stories = storiesArray
this.root = rootEl
this.times = rootEl.querySelector('#times')
this.currentTime = 0
this.currentIndex = 0

// create breakpoints for when the slides should change
this.intervals = this.stories.map((story, index) => {
// TODO change so that it just uses the previous value + current time
let sum = 0
for (let i = 0; i < index; i++){
sum += this.stories[i].time
}
return sum
})

// necessary to make sure the last slide plays to completion
this.maxTime = this.intervals[this.intervals.length - 1] + this.stories[this.stories.length - 1].time

// render progress bars
this.progressBars = this.stories.map(() => {
const el = document.createElement('div')
el.classList.add('time-item')
el.innerHTML = '<div style="width: 0%"></div>'
return el
})

this.progressBars.forEach((el) => {
this.times.appendChild(el)
})

// methods
this.render = () => {
const story = this.stories[this.currentIndex]
this.root.style.background = `url('${story.image}')`
this.root.querySelector('#title').innerHTML = story.title
this.root.querySelector('#description').innerHTML = story.description
}

this.updateProgress = () => {
this.progressBars.map((bar, index) => {
// Fill already passed bars
if (this.currentIndex > index) {
bar.querySelector('div').style.width = '100%'
return
}

if (this.currentIndex < index) {
bar.querySelector('div').style.width = '0%'
return
}

// update progress of current bar
if (this.currentIndex == index) {
const timeStart = this.intervals[this.currentIndex]

let timeEnd;
if (this.currentIndex == this.stories.length - 1){
timeEnd = this.maxTime
} else {
timeEnd = this.intervals[this.currentIndex + 1]
}

const animatable = bar.querySelector('div')
animatable.style.width = `${((this.currentTime - timeStart)/(timeEnd - timeStart))*100}%`

}
})
}
}

Storyfier.prototype.start = function(){
// Render initial state
this.render()

// START INTERVAL
const test = setInterval(() => {
this.currentTime += 10
this.updateProgress()

if (this.currentIndex >= this.stories.length - 1 && (this.currentTime > this.maxTime)){
clearInterval(test)
return
}

const lastIndex = this.currentIndex
if (this.currentTime >= this.intervals[this.currentIndex + 1]){
this.currentIndex += 1
}

if (this.currentIndex != lastIndex) {
this.render()
}
}, 10)
}

Storyfier.prototype.next = function(){
const next = this.currentIndex + 1
if (next > this.stories.length - 1){
return
}

this.currentIndex = next
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

Storyfier.prototype.back = function(){
if ((this.currentTime > (this.intervals[this.currentIndex] + 350)) || this.currentIndex === 0){
this.currentTime = this.intervals[this.currentIndex]
return
}

this.currentIndex -= 1
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

const setup = async () => {
const loadImages = stories.map(({ image }) => {
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => {
resolve(image)
}
img.src = image
})
})

await Promise.all(loadImages)

const s = new Storyfier(stories, container);
s.start()

nextButton.addEventListener('click', () => {
s.next()
})

backButton.addEventListener('click', () => {
s.back()
})
}

setup()

</script>
<div class="container">
<div id="times" class="time">
</div>

<div id="back"></div>
<div id="next"></div>
</div>
[/html]

DADDY ISSUES

�������� ���������

��