AddEventListener option once reset - javascript

is there a possibility to reset option "once=true" after modal close to run this eventlistener again?
const sel = document.querySelectorAll(".select-wrapper");
function selectCount() {
sel.forEach(element => {
const selElement = element.querySelector(".select");
element.addEventListener("click", function () {
console.log("click ", selElement.value);
console.log("click dataset ", selElement.options[selElement.selectedIndex].dataset.orig);
}, {
once: true
})
})
}

Related

Call Alpine js from javascript

I have Alpinajs and Splidejs on page. I want to change aplinajs variable from splide event
document.addEventListener('alpine:init', () => {
Alpine.data('titles', () => ({
slidetitle_1: true,
toggle(n) {
this["slidetitle_" + n] = true
}
}))
})
then when in slider event
var splide = new Splide('.splide').mount();
splide.on( 'active', function (t) {
// not working
Alpine.data('titles', () => {
this["slidetitle_" + 1] = true;
});
// not working
Alpine.$data.titles.toggle(1);
});
but none of this working

Ghost image on drag and drop showing siblings

When I drag a div, the sibling at the bottom is showing inside the ghost image.
Illustration :
How to remove the next sibling, here the span "Hello" this one ?
I use Solidjs, and native js drag and drop.
Each component is draggable and droppable.
But a component cannot be drag inside itself or its children.
I listed the different properties and events I use for each component :
const onDrop: main.Attributes['onDrop'] = (event) => {
event.stopPropagation();
removeClass(parent, STRINGS.DROP_CLASS);
if (isDragging()) {
setView({ parent });
} else {
createView({ parent });
}
};
const onDragOver: main.Attributes['onDragOver'] = (event) => {
event.preventDefault();
event.stopPropagation();
// event.currentTarget.style.cursor = 'dragging';
};
const onDragEnter: main.Attributes['onDragEnter'] = (event) => {
event.preventDefault();
event.stopPropagation();
// event.currentTarget.style.cursor = 'dragging';
addClass(parent, STRINGS.DROP_CLASS);
};
const onDragLeave: main.Attributes['onDragLeave'] = (event) => {
event.preventDefault();
event.stopPropagation();
removeClass(parent, STRINGS.DROP_CLASS);
};
const draggable = true;
const setClass = partialCall(setAttribute, id, 'class');
const _backClass =
'!opacity-50 !scale-90 !origin-left !transition !duration-300 !ease-out';
const over = STRINGS.SHOW_BORDER;
// #region Events
const onDragStart: main.Attributes['onDragStart'] = (event) => {
setClass(`${classe} ${STRINGS.DRAG_CLASS}`);
event.stopPropagation();
(event.dataTransfer as DataTransfer).effectAllowed = 'uninitialized';
// event.currentTarget.style.cursor = 'dragging';
if (dragOnly) {
prepareForCreation({ classe, component, ..._props });
} else {
startDrag({ id });
}
setTimeout(() => {
if (dragOnly) {
setClass(`${cl} ${_backClass}`);
} else {
setClass(`${classe} ${_backClass}`);
}
}, 5);
};
const onMouseEnter: main.Attributes['onMouseEnter'] = (event) => {
event.stopPropagation();
!dragOnly && recursiveHoverClass(id);
};
const onMouseOver: main.Attributes['onMouseOver'] = (event) => {
event.stopPropagation();
!dragOnly && recursiveHoverClass(id);
};
const onMouseLeave: main.Attributes['onMouseLeave'] = () => {
removeClass(id, over);
};
const onDragEnd: main.Attributes['onDragEnd'] = () => {
setClass(dragOnly ? cl : classe);
stopDrag();
};
In its current condition your code is hard to reproduce because components are missing, you've posted event handlers only.
If it works for you, you can use solid-dnd, a lightweight and extensible drag and drop library for Solid JS: https://github.com/thisbeyond/solid-dnd

How to remove Event Listener using MutationObserver?

I have a problem, I can't remove the event listener in the condition inside the callback function.
I have the impression that the syntax is correct. But the event is still active.
Does anyone know how to remove the event touchstart?
mutation.target.removeEventListener("touchstart",(e) => { handleClickButton(e) }, true);
const headerSearchBox = document.querySelector(".search-box");
function handleClickButton(event) {
event.preventDefault();
alert("You Clicked on the button")
}
const mutationCallback = function (mutationList) {
mutationList.forEach((mutation) => {
let isSearchOpen = mutation.target.classList.contains("search-container");
// If Search Bar is Open : Do This...
if (mutation.type === "attributes" && isSearchOpen && mutation.oldValue.includes("open")) {
console.log("Search Bar is Open");
mutation.target.addEventListener("touchstart",(e) => { handleClickButton(e) }, true);
} else {
console.log("Search Bar is Close");
mutation.target.removeEventListener("touchstart",(e) => { handleClickButton(e) }, true);
}
});
};
const observer = new MutationObserver(mutationCallback);
observer.observe(headerSearchBox, {
attributes: true,
attributeOldValue: true,
attributeFilter: ["class"],
});
Thanks for your support

how to click on an element in a different tab using js

So in a chrome extension.
when the user clicks a button
send a message to background
open a new popup window
in the new window, click on the specific element
I can get most of the way but fail to be able to focus in on the necessary document for the js to get the element ID on.
content.js
user_clicked_btn.addEventListener('click', () => {
chrome.storage.sync.get(['xyz'], (result) => {
if (result.xyz['u'].includes('123') && result.xyz['da'] !== 'cool') {
chrome.runtime.sendMessage(
{
s: 'quick',
}
);
}
});
background.js
chrome.runtime.onMessage.addListener((request) => {
if (request.s === 'quick') {
chrome.windows.create({
url: './options.html', type: "popup", focused: true
},
() => {
let queryOptions = { active: true, currentWindow: true };
chrome.tabs.query(queryOptions, function (tabs) {
tabs[0].document.getElementById("element_of_interest").click()
});
}
);
}
});
the issue could be summarized as, how do I get the "document" of a different tab? (assuming I own the 'different tab')
The solution for my problem was to add message passing the whole way to the element of interest and have it click itself.
The result looks like this and behaves as desired.
content.js
user_clicked_btn.addEventListener('click', () => {
chrome.storage.sync.get(['xyz'], (result) => {
if (result.xyz['u'].includes('123') && result.xyz['da'] !== 'cool') {
chrome.runtime.sendMessage(
{
s: 'quick',
}
);
}
});
background.js
chrome.runtime.onMessage.addListener((request) => {
if (request.s === 'quick') {
chrome.windows.create({
url: './options.html', type: "popup", focused: true
}, () => {
setTimeout(() => {
console.log("send message to options page")
chrome.runtime.sendMessage(
{
s: 'quick_click',
}
);
}, 1000);
});
}
});
in the options.html file, the desired element is a react element, so I was able to add a listener in the componentDidMount function
options/index.js
componentDidMount() {
chrome.runtime.onMessage.addListener((request) => {
if (request.s === 'quick_click') {
this.handleClick()
}
});
}

Mousedown event changes the color of child elements even in the bubbling phase

I would like to perform a bubbling event for five nested div elements: when I click a div element, the clicked element and its parents should change color.
What I have done in the below code is basically setting "mousedown" element for each and every div element, which will wait for some time for its backgroundColor to change after a mousedown event:
const one = document.querySelector("#\\31");
const two = document.querySelector("#\\32");
const three = document.querySelector("#\\33");
const four = document.querySelector("#\\34");
const five = document.querySelector("#\\35");
five.addEventListener(
"mousedown",
function () {
setTimeout(() => {
changeBg(this);
}, 1500);
},
false
);
four.addEventListener(
"mousedown",
function () {
setTimeout(() => {
changeBg(this);
}, 1750);
},
false
);
three.addEventListener(
"mousedown",
function (event) {
setTimeout(() => {
changeBg(this);
}, 2000);
},
false
);
two.addEventListener(
"mousedown",
function () {
setTimeout(() => {
changeBg(this);
}, 2250);
},
false
);
one.addEventListener(
"mousedown",
function () {
setTimeout(() => {
changeBg(this);
}, 2500);
},
false
);
function changeBg(t) {
const element = document.querySelector("#\\3" + t.id);
element.style.backgroundColor = "lightblue";
}
The issue I've encountered and don't understand is, before changing the color of the clicked div and parent divs, it suddenly changes the color of the child divs(all of them at the same time). Did I miss something in the code, or did I misimplement it as a whole? I'd be so glad if someone can explain it in detail.
Code sandbox link: https://codesandbox.io/s/busy-goldstine-ope9w?file=/src/index.js
Thanks in advance.

Categories