Creating a custom event once element gets class - javascript

Is there a way to create custom javascript-events, that trigger once elements get a class? I want to watch all elements inside a table and process some data once one specific class gets added to them.
Is that generally possible, and if yes, how?
edit
I have a table with 10 rows and 10 columns. Once a player clicks one of those table cell (<td>-tags) there are some calculations made and the cell gets a value (a number, representing the number of mines on the surrounding fields) or pops up to be a mine. (When it has a value its class becomes .opened and when it has a mine its class becomes .mine)
Now every time the player clicks on a cell, that has no surrounding mines, its value is 0. At this time every surrounding field should be checked to see if it is also a 0. If it is, it should be unveiled (class becomes .opened). Now every surrounding field of this newly opened should be checked again, and again, and again - As long as none of the surrounding fields is 0 anymore.
I thought it would be the easiest way to achieve that, by simply checking for the .opened-class on the cell, to trigger the "chain reaction".

It is possible using Mutation Events API or DOM Mutation Observers API. Read this article
document.addEventListener("DOMAttrModified", function(e) {
console.log(e.attrName, e.attrChange, e.prevValue, e.newValue, e.relatedNode)
}, false);

Related

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

How do you access the 'Select All' checkbox?

I've got it set up on my grid so that each individual checkbox selects the object present in that row, and that is working. However, when you click the 'Select All' checkbox that Kendo UI automatically provides when you add a columns.Select() to your grid, it only grabs the object present in the first row.
My initial thought was I could set up an event binding that tied back to the ID of that specific checkbox, but when I tried this, I realized the ID for that checkbox was being randomly generated every time, so this strategy wasn't going to work.
I can't use this.selectedKeyNames() as this doesn't refer to the right object in the current context.
Basically, I'm wondering if there's a better way of accessing that 'Select All' checkbox so I can throw some extra code in to grab every single object I have present in my grid.
You always have the possibility to select an element by it's tag and DOM tree, e.g.:
$('.k-grid input[type="checkbox"]').first()

AngularJS - Listen for onclick events for all table <td>

Is there a way to use angular.element(...).on('click', onTdClick); (for example) in a way that executes onTdClick (providing the element to it) on every that gets clicked?
Let's say I have 2 tables, both have cells and columns.
I want to be able to click on CELLS and send the element of what I clicked and send it to onTdClick($event).
$scope.onTdClick = function(ev){
window.getSelection().selectAllChildren(ev.target);
};
Essentially doing the same as: ng-click="onTdClick($event)" without having to put ng-click on hundreds of <td>'s
I dynamically add table rows and table cells with .insertRow and .insertCell
https://www.w3schools.com/jsref/met_table_insertrow.asp
So statically doing angular.element().find('td').on() wont work well here.
Whats my end result?
I'm attempting to make it so I can click <td>'s to essentially highlight cells by just clicking them.
The highlight code is already tested and works:
window.getSelection().selectAllChildren(ev.target);
(where ev is the td element)
You shouldn't use insertRow with AngularJS. Instead, you should use ng-repeat with an array that has an object for every row, and just push objects when you want to insert a row.
$scope.insertRow = function(){
$scope.tdList.push({});//push whatever you want
}
If you want the number of cells to be variable, you can store some param in this object to tell the view how many cells the row has, and put a nested ng-repeat inside to create the cells

Aurelia JS - multi level binding/update?

I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?
Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...

Prototype Selectors

I have been trying to use Prototype to do some DOM manipulation, but I am not able to find much help on a certain selector.
I have a table with many rows and each of these rows has 4 columns, with each having a different class name. Some of the cells might be empty, i.e., they do not have a class, in a particular row.
Now, when the user clicks on a cell in a particular row, I want the control to be transferred to the next cell of the same class, wherever that might be in the succeeding rows, if one exists.
Is it possible to do this using the Prototype library?
.next()
Lets you get the next sibling
To get the next row you'd do .up().next();

Categories

Resources