Develop Reference

How to make Drag and Drop work Horizontally?

I'm trying to get Drag and Drop to work correctly
But in the image gallery, it only changes the position of the photo when dragging it under the other image
As if it only works vertically
Demo
Javascript Vanilla
const enableDragSort = className => {
// Gets all child elements of the .gallery or .datasheet class
[...document.getElementsByClassName(className)].forEach(enableDragList);
}
const enableDragList = className => {
// For each child of the class, add the draggable attribute
[...className.children].forEach(enableDragItem);
}
const enableDragItem = item => {
item.setAttribute('draggable', true);
item.ondrag = handleDrag;
item.ondragend = handleDrop;
}
const handleDrag = event => {
const item = event.target.closest('[draggable]');
item.classList.add('drag-sort-active');
// .gallery or .datasheet
const className = item.parentElement;
const x = event.clientX;
const y = event.clientY;
let swap = document.elementFromPoint(x, y) ?? item;
if (className === swap.parentElement) {
swap = (swap !== item.nextSibling) ? swap : swap.nextSibling;
className.insertBefore(item, swap);
}
}
const handleDrop = ({ target }) => {
const item = target.closest('[draggable]');
item.classList.remove('drag-sort-active');
}
// Drag Drop
enableDragSort('gallery'); // It does not work properly
enableDragSort('datasheet'); // It works

How to use 'timeupdate' event listener to highlight text from audio?

I'm using the 'timeupdate' event listener to sync a subtitle file with audio.
It is working currently, but I'd like to adjust it to where it is just highlighting the corresponding sentence in a large paragraph instead of deleting the entire span and replacing it with just the current sentence. This is the sort of functionality I am trying to replicate: https://j.hn/lab/html5karaoke/dream.html (see how it only highlights the section that it is currently on).
This is made complicated due to timeupdate constantly checking multiple times a second.
Here is the code:
var audioSync = function (options) {
var audioPlayer = document.getElementById(options.audioPlayer);
var subtitles = document.getElementById(options.subtitlesContainer);
var syncData = [];
var init = (function () {
return fetch(new Request(options.subtitlesFile))
.then((response) => response.text())
.then(createSubtitle);
})();
function createSubtitle(text) {
var rawSubTitle = text;
convertVttToJson(text).then((result) => {
var x = 0;
for (var i = 0; i < result.length; i++) {
if (result[i].part && result[i].part.trim() != '') {
syncData[x] = result[i];
x++;
}
}
});
}
audioPlayer.addEventListener('timeupdate', function (e) {
syncData.forEach(function (element, index, array) {
if (
audioPlayer.currentTime * 1000 >= element.start &&
audioPlayer.currentTime * 1000 <= element.end
) {
while (subtitles.hasChildNodes()) {
subtitles.removeChild(subtitles.firstChild);
}
var el = document.createElement('span');
el.setAttribute('id', 'c_' + index);
el.innerText = syncData[index].part + '\n';
el.style.background = 'yellow';
subtitles.appendChild(el);
}
});
});
};
new audioSync({
audioPlayer: 'audiofile', // the id of the audio tag
subtitlesContainer: 'subtitles', // the id where subtitles should show
subtitlesFile: './sample.vtt', // the path to the vtt file
});

Add Bullets to Each New Line within a textarea

I have a textarea that I want users be able to input text in. Each new line within the textarea will eventually get split up and sent back to the database to be used elsewhere. To show this from a users perspective, I want to add a bullet to each new line that they enter within the textarea.
I've got this working to the point where it successfully adds a bullet when you press enter and are on the last line of the textarea content
<textarea onInput="handleInput(event)" rows="10"></textarea>
let previousLength = 0;
const handleInput = (event) => {
const bullet = "\u2022";
const newLength = event.target.value.length;
const characterCode = event.target.value.substr(-1).charCodeAt(0);
if (newLength > previousLength) {
if (characterCode === 10) {
event.target.value = `${event.target.value}${bullet} `;
} else if (newLength === 1) {
event.target.value = `${bullet} ${event.target.value}`;
}
}
previousLength = newLength;
}
https://codepen.io/andrewgarrison/pen/vqqmMv?editors=1010
However, I'd also like for it to add a bullet when you are in the middle of the textarea content and you press enter. Right now it just adds a new line with no bullet.

You can find the current position within the text area, and when enter is pressed, append a new line and a bullet:
const bullet = "\u2022";
const bulletWithSpace = `${bullet} `;
const enter = 13;
const handleInput = (event) => {
const { keyCode, target } = event;
const { selectionStart, value } = target;
if (keyCode === enter) {
console.log('a');
target.value = [...value]
.map((c, i) => i === selectionStart - 1
? `\n${bulletWithSpace}`
: c
)
.join('');
console.log(target.value);
target.selectionStart = selectionStart+bulletWithSpace.length;
target.selectionEnd = selectionStart+bulletWithSpace.length;
}
if (value[0] !== bullet) {
target.value = `${bulletWithSpace}${value}`;
}
}
<textarea onkeyup="handleInput(event)" rows="10"></textarea>

For anyone else who come accross this problem, here is how I did it:
.text-area {
display: list-item;
margin-left : 1em;
outline: none;
}
.text-area div {
display: list-item;
}
<div class="text-area" contenteditable="true">
</div>

JavaScript button that generates objects in order

i created a button in JS that generates GIFs randomly,
i would like to change that by making them appear in order and then repeat.
window.onload = () => {
const factsArr = [
{
image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif',
},
{
image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif',
},
{
image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',
}
];
document.getElementById('generate-btn').addEventListener('click', () => {
const idx = Math.floor(Math.random() * factsArr.length);
document.getElementById('image').setAttribute('src', factsArr[idx].image)
})
}
<button id="generate-btn">Amazing Fact Button</button>
<img id="image"></img>

In the snippet below, I used a global currImage variable which increases on each click and resets when reaching the image array size. The image is taken from the array's currImage index.
// Init the variable
var currImage = 0;
window.onload = () => {
const factsArr = [
{ image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'},
{ image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'},
{ image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'}
];
document.getElementById('generate-btn').addEventListener('click', () =>
{
document.getElementById('image').setAttribute('src', factsArr[currImage].image);
// increment the variable on each click
currImage++;
//reset the variable when it reaches the image array size
if (currImage == factsArr.length)
currImage = 0;
})
}
<button id="generate-btn">Amazing Fact Button</button>
<img id="image"></img>

Introduce a numeric variable to indicate the current index of the array to use.
const factsArr = [
{image:'https://media.giphy.com/media/P6lX0T2MzYpdC/giphy.gif'},
{image:'https://media.giphy.com/media/uWdVKl2xN1eVi/giphy.gif'},
{image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'}
];
const tot = factsArr.length;
let c = 0;
document.getElementById('generate-btn').addEventListener('click', () => {
document.getElementById('image').src = factsArr[c++ % tot].image;
});
<button id="generate-btn">Amazing Fact Button</button><br>
<img id="image">

Change appearance of elements based on sequence stored in array

I have two quarters of a circle in two span tags:
<div>
<span id="topleft"></span>
<span id="topright"></span>
</div>
<button id = 'clickme' style = 'margin-top: 100px;'>CLICK ME</button>
When I click the button I want the divs to 'light up' based on a sequence stored in an array using JavaScript:
let reset = (position) => {
document.getElementById(position).style.opacity = 1;
};
let blink = (position) => {
document.getElementById(position).style.opacity = 0.5;
};
let sequence = (positions) => {
let currentBlink = positions.pop();
blink(currentBlink);
setTimeout(reset.bind(null, currentBlink), 1000);
if (positions.length > 0) {
sequence(positions);
}
}
document.getElementById('clickme').onclick = () => {
sequence(positions);
}
let positions = ['topleft', 'topright'];
The problem is that both divs 'light up' at the same time where I actually want a pause between the two.
How can I achieve this effect?
Thanks any help appreciated.

Invoke the function after timeout in callback.
let reset = (position) => {
document.getElementById(position).style.opacity = 1;
};
let blink = (position) => {
document.getElementById(position).style.opacity = 0.5;
};
let sequence = (positions) => {
let currentBlink = positions.pop();
blink(currentBlink);
setTimeout(function() {
reset(currentBlink);
if (positions.length > 0) {
sequence(positions);
}
}, 1000);
}
document.getElementById('clickme').onclick = () => {
sequence(positions);
}
let positions = ['topleft', 'topright'];
<div>
<span id="topleft">aaa</span>
<span id="topright">aaa</span>
</div>
<button id='clickme' style='margin-top: 100px;'>CLICK ME</button>
Fiddle Demo