Início / user-11769133

Milos Stojanovic's questions

Martin Hope
Milos Stojanovic
Asked: 2025-03-08 06:06:30 +0800 CST
  • 5

Estou fazendo uma extensão do Chrome. Estou tentando fazer o pop-up ser arrastável e poder movê-lo pela tela. Consigo movê-lo, mas ele fica preso no lado direito da tela até chegar a max-width. O que estou fazendo errado?

Aqui está um código simplificado.

const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
});

document.addEventListener("mousemove", (e) => {
    if (isDragging) {
        popup.style.left = `${e.clientX - offsetX}px`;
        popup.style.top = `${e.clientY - offsetY}px`;
    }
});

document.addEventListener("mouseup", (e) => {
    isDragging = false;
});
#popup {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 350px;
    max-width: 500px;
    background: var(--dark-bg, #222);
    color: var(--dark-text, #fff);
    border: 1px solid #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    z-index: 10000;
}

#popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#popup-title {
    font-size: 14px;
    font-weight: bold;
}

button {
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    width: 26px;
    height: 26px;
    text-align: center;
    padding: 0;
}

#drag-btn {
    background: #326042;
    color: white;
    cursor: grab;
}

#theme-btn {
    background: #ef713b;
    color: white;
}

#close-btn {
    background: #ff5252;
    color: white;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Song Lyrics Finder</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div id="popup">
        <div id="popup-header">
            <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
            <div style="display: flex; align-items: center; gap: 5px;">
                <button id="drag-btn">✥</button>
                <button id="theme-btn">&#9681;</button>
                <button id="close-btn">&#11199;</button>
            </div>
        </div>
    </div>
</body>
</html>

javascript
Martin Hope
Milos Stojanovic
Asked: 2025-03-06 22:38:52 +0800 CST
  • 8

Estou tentando limpar o título do vídeo do YouTube de palavras desnecessárias como "Vídeo Oficial", "Áudio", "Vídeo Musical" etc. Preciso de ajuda para construir regex que eu possa usar. O que tentei até agora:

const regex = /\s*[-\(\[]?\s*(-|official|video|audio|lyrics|lyric|hd|full|4k|music\s+video|\d{4})\s*[\)\]]?$/gi;

Pelo que entendi, isso removeria apenas a última ocorrência de palavras-chave. O que eu fiz foi usá-lo em um loop como este:

function clearSearchTerm(title) {
    const regex = /\s*[-\(\[]?\s*(-|official|video|audio|lyrics|lyric|hd|full|4k|music\s+video|\d{4})\s*[\)\]]?$/gi;
    let newTitle;

    do {
        newTitle = title;
        title = title.replace(regex, "");
    } while (newTitle !== title);

    return title;
}

Agora funciona para mim, pois não encontrei nenhum exemplo em que não funcionasse. O que foi mencionado nos comentários é que eu tinha um problema que meu regex anterior removia palavras-chave se elas aparecessem no meio do título, o que eu acho que foi resolvido com isso. Se você tiver alguma ideia de como isso pode ser melhorado, estou todo ouvidos. Na próxima parte, escreverei exemplos do que preciso remover.

As palavras que estou tentando remover são do tipo:

Audio
Video
Lyrics
Official
Remaster
2020 (or years in general)
...

E todas essas palavras (e talvez mais) podem aparecer entre (and )ou between [and ]or depois de -. Essas palavras podem ser combinadas, por exemplo: Some title - Official Videowhich should be cleaned to be Some titleetc.

javascript