Develop Reference

Reordering video tiles in Jitsi - working with DOM

I want to add a function to Jitsi that allows alphabetic ordering of video tiles via booklet function.
I used cketti's reorder.js as a basis since it works fine on my machine; however when I run my own script via console, the videos are not correctly shown (partly invisible) and audio breaks.
I am not very accostumed to JavaScript.
What am I doing wrong, what did I miss?
Alternatively: I do not really understand how to debug JS, how can I find out how I could reuse the reorder.js functions to correctly sort?
var container = $('#filmstripRemoteVideosContainer')[0];
var jChildren = $(container).children();
const numberOfVideos = jChildren.length;
var names = new Array();
//only applicable in tiles mode!
for(i=0; i<numberOfVideos; i++) {
names[i] = new Array (2);
names[i][0] = jChildren[i].getElementsByClassName("displayname")[0].innerHTML;
names[i][1] = jChildren[i];
}
//sort Array
names.sort((a, b) => a[0].localeCompare(b[0]))
//copy over to one-dimensional array
var newChildren = new Array();
for(i=0; i<numberOfVideos; i++) {
newChildren[i] = names[i][1];
}
//convert to NodeList
var toNodeList = function(arr){
var nodeList = document.createDocumentFragment();
arr.forEach(function(item){
nodeList.appendChild(item.cloneNode());
});
return nodeList.childNodes;
};
//Set new position
var remoteVideos = toNodeList(newChildren);
var videoTiles = $(remoteVideos).toArray()
// Set CSS 'order' properties to reflect current DOM order = display order
videoTiles.forEach(function(index) {
$(this).css('order', -numberOfVideos + index);
});
//remove all videoTiles
for(i=0; i<numberOfVideos;i++){
container.firstChild.remove()
}
// Add video tiles to DOM in sorted order (now the CSS 'order' property is used for the display order)
videoTiles.forEach(videoTile => container.appendChild(videoTile));
Edit: Here's the working code:
var container = $('#filmstripRemoteVideosContainer')[0];
var jChildren = $(container).children();
const numberOfVideos = jChildren.length;
var names = new Array();
//only applicable in tiles mode!
for(i = 0; i < numberOfVideos; i++){
names[i] = new Array (2);
names[i][0] = jChildren[i].getElementsByClassName("displayname")[0].innerHTML;
names[i][1] = jChildren[i];
}
//sort Array
names.sort((a, b) => a[0].localeCompare(b[0]))
//reorder the tiles
for(i=0;i<numberOfVideos; i++){
$(names[i][1]).css('order', i);
}

Looks like you're cloning the element nodes. Try reordering the existing ones by first removing them from the DOM, then adding them back in the desired order.

Optimize for-loop function in Google Apps Script (Arrays maybe)?

First-time poster here. I would like some insight on some Google App Script code i think could be spruced up a bit.
Long story short.
I have a 2 Google Sheet tables
A “LOCALE” spreadsheet - listing unique names of locations
A “FEED” spreadsheet - listing photo descriptions, including the locations. The same location is listed multiple times in this spreadsheet.
Both of these tables have a “Location” column, which references each other with a Key column.
The problem I want to solve for:
When I edit a location name in the “LOCALE” spreadsheet, it should automatically update all the location names in the “FEED” spreadsheet.
The way I solved this problem:
I used a for loop within a for loop for this. To summarize:
for every row in "LOCALE"...
..go through every row in "FEED"...
...If a value in the Key column in the FEED Sheet matches a value in the Key column in the LOCALE Sheet...
...but the value in the Location column in the FEED Sheet doesn't match the value in the Location column in the LOCALE Sheet...
...update the Location column in the FEED Sheet with the value in the Location column in the LOCALE Sheet.
If you're not confused yet, here's the code i wrote for it:
// for each row in the "Locale" sheet...
for(var L = LocationsRefValues.length-1;L>=0;L--) {
// for each row in the "Feed" sheet...
for(var F = FeedRefValues.length-1;F>=0;F--) {
if (FeedRefValues[F][97] == LocationsRefValues[L][17] &&
FeedRefValues[F][10] != LocationsRefValues[L][1]) {
FeedDataSheet.getRange(F+2,10+1).setValue(LocationsRefValues[L][1]);
}
}
}
Now, this code works perfectly fine, I've had no issues. However, i feel like this a bit clunky, as it takes a while to finish its edits. I'm certain there's any easier way to write this and run this code. I've heard arrays may address this situation, but i don't know how to go about that. Hence, why I'm looking for help. Can anyone assist?
Keep in mind I'm a total Google App Script beginner who got this code working through sheer dumb luck, so the simpler the solution the better. Thanks for any consideration to my problem in advance. Looking forward to hearing from you all.
This is the full function (after i made edits suggested here.)
function ModeratorStatus() {
var Data = SpreadsheetApp.getActiveSpreadsheet(); // Local Spreadsheet
var ModeratorStatusDataSheet = Data.getSheetByName("The Status (Moderators)");
var ModeratorStatusRange = ModeratorStatusDataSheet.getRange("A2:C");
var ModeratorStatusRefValues = ModeratorStatusRange.getValues();
var ModeratorDataSheet = Data.getSheetByName("The Moderator_Numbers"); // DATA "Member" sheet
//var ModeratorRefValues = ModeratorDataSheet.getRange("A2:AD").getValues();
var ModeratorStatusObj = {};
for (var MOS = ModeratorStatusRefValues.length-1; MOS>=0; MOS--) {
ModeratorStatusObj[ModeratorStatusRefValues[MOS][2]] = ModeratorStatusRefValues[MOS][0];
}
var ModeratorValues = ModeratorDataSheet.getRange("A1:AD").getValues();
for (var MO = ModeratorValues.length-1; MO >=0; MO--) { // for each row in the "Moderator" sheet...
var ModeratorVal28 = ModeratorValues[MO][28];
if (ModeratorStatusObj[ModeratorVal28] != ModeratorValues[MO][1]) {
ModeratorValues[MO][1] = ModeratorStatusObj[ModeratorVal28];
}
}
var destinationRange = ModeratorDataSheet.getRange(1, 1, ModeratorValues.length, ModeratorValues[0].length);
destinationRange.setValues(ModeratorValues);
I used the code in a different function as a test. To make it easier
LOCALE = MODERATOR STATUS
FEED = MODERATOR

If there are no duplicate [17]s with different [1]s in the LocationsRefValues, you can reduce the computational complexity from O(n ^ 2) to O(n) by creating a mapping object for LocationsRefValues beforehand, whose keys are the LocationsRefValues[L][17]s and whose values are the LocationsRefValues[L][1]s:
var locationObj = {};
for (var L = 0; L < LocationsRefValues.length; L++) {
locationObj[LocationsRefValues[L][17]] = LocationsRefValues[L][1];
}
for (var F = FeedRefValues.length - 1; F >= 0; F--) { // for each row in the "Feed" sheet...
var feedVal97 = FeedRefValues[F][97];
if (locationObj[feedVal97] != FeedRefValues[F][10]) {
FeedDataSheet.getRange(F + 2, 10 + 1).setValue(locationObj[feedVal97]);
}
}
Thanks #TheMaster, you can speed this up by calling setValue only once, at the end, rather than calling it in a loop, probably something along the lines of:
var locationObj = {};
for (var L = 0; L < LocationsRefValues.length; L++) {
locationObj[LocationsRefValues[L][17]] = LocationsRefValues[L][1];
}
var feedValues = FeedDataSheet.getValues();
for (var F = FeedRefValues.length - 1; F >= 0; F--) { // for each row in the "Feed" sheet...
var feedVal97 = FeedRefValues[F][97];
if (locationObj[feedVal97] != FeedRefValues[F][10]) {
feedValues[F + 2][10 + 1] = locationObj[feedVal97];
}
}
var destinationRange = ss.getRange(1, 1, feedValues.length, feedValues[0].length);
destinationRange.setValues(feedValues);

you can use onEdit(e) trigger to get the reference to the edited cell. In that case you won't need to iterate over the entire Locale" sheet:
function onEdit(e) {
var range = e.range; // edited cell
var rowIndex = range.getRow()
var colIndex = range.getColumn()
if (rowIndex >= LocaleRange.startRow && rowIndex <= LocaleRange.EndRow &&
colIndex >= LocaleRange.startColumn && colIndex <= LocaleRange.EndColumn) {
var index = rowIndex - LocaleRange.startRow
var keyValue = LocationsRefValues[index][17]
var newLocValue = range.getValue()
var newFeedValues = FeedRefValues.map(function (row) {
return (row[97] == keyValue) newLocValue ? : row[10]
})
FeedDataRange.setValues(newFeedValues)
}
}
Here are docs on using onEdit trigger: https://developers.google.com/apps-script/guides/triggers

Method push is not adding a value to a vector that previously had the same value

The goal of the code I'm going to present is to create a aux vector that will contain petri nets transitions, arcs and places. I'm dividing a petri net into several groups, each group is a transition with respective input arcs and places.
The issue is the following: After I put the info in the first position of the aux vector, I'm unable to put a place with the same id of the place of the previous group. For example, if I have a transition with place_id=1 and place_id=2, and the next transition have place_id=2 and place_id=3, the code doesn't write the value place_i=2 in the vector for the second group.
function conflict() {
var id = [];
var source = [];
var target = [];
var aux = [];
var cont = [];
var places = pnml.getElementsByTagName("place");
var arcs = pnml.getElementsByTagName("arc");
var transitions = pnml.getElementsByTagName("transition");
for (var i = 0; i < transitions.length; i++) {
target.push(transitions[i].getAttribute("id"));
aux.push([]);
for (var j = 0; j < arcs.length; j++) {
if (arcs[j].getAttribute("target") == transitions[i].getAttribute("id")) {
id.push(arcs[j].getAttribute("id"));
source.push(arcs[j].getAttribute("source"));
//console.log(arcs[j].getAttribute( "source" ));
}
}
//console.log(id);
//console.log(arcs);
//console.log(places);
aux[i].push(id, source, target);
//id.length=0;
target = [];
source = [];
id = [];
}
}
Image of the platform with console open
Thanks in advance

Without knowing a whole lot for the issue, try to change this
aux.push([]);
to this
aux[i]=[];
So that you initialize and fill using an index instead of a push and an index later, for consistency.
Let me know if it helps
EDIT:
Also this
aux[i].push(id, source, target);
to this (maybe? )
aux[i].push({ id: id, source:source, target:target});
You probably want to keep objects in aux, so you need to push an object, not 3 parameters like that

Why is this JavaScript looping twice in Zapier?

Here is a video that shows what I'm struggling with.
Here is a high level description of the process, followed by the actual JavaScript code I've written.
PROCESS
I built 2 Zaps that each run like this:
STEP 1 - Trigger (Cognito Form, which has repeating sections)
STEP 2 - JavaScript Code (which creates an Array of the form fields for ONE of the repeating sections, and separates them into individual strings using .split)
STEP 3 - Action (creates a ZOHO CRM Task for each string)
The first Zap runs on one of the sections of the form (Visits with Sales), and the second zap runs on a different section of the form (Visits without Sales). Each of these Zaps works fine on their own so I know the code is good, but I want to combine the two Zaps into one by combining the code.
I tried to combine by making five steps:
Trigger - Code1 - Zoho1 - Code2 - Zoho2
but the Zoho2 Tasks were each repeated
I then tried to re-order the five steps:
Trigger - Code1 - Code2 - Zoho1 - Zoho2
but now Zoho1 Tasks AND Zoho2 tasks were duplicated.
Finally I tried to combine ALL the JavaScript code into one:
Tigger - CombinedCode1+2 - Zoho 1 - Zoho2
but only the strings from Arrays in "Code2" are available to me when I go to map them in Zoho1.
CODE:
if (inputData.stringVSAccount == null) {
var listVSAccountArray = [];
var listVSUnitsArray = [];
var listVSPriceArray = [];
var listVSNotesArray = [];
var listVSVisitCallArray = [];
} else {
var listVSAccountArray = inputData.stringVSAccount.split(",");
var listVSUnitsArray = inputData.stringVSUnits.split(",");
var listVSPriceArray = inputData.stringVSPrice.split(",");
var listVSNotesArray = inputData.stringVSNotes.split(",");
var listVSVisitCallArray = inputData.stringVSVisitCall.split(",");
}
var output = [];
var arrayNos = listVSAccountArray.length;
var i = 0;
do {
var thisItemVSAccount = new String(listVSAccountArray[i]);
var thisItemVSUnits = new String(listVSUnitsArray[i]);
var thisItemVSPrice = new String(listVSPriceArray[i]);
var thisItemVSNotes = new String(listVSNotesArray[i]);
var thisItemVSVisitCall = new String(listVSVisitCallArray[i]);
var thisItemObj = {};
thisItemObj.itemVSAccount = thisItemVSAccount;
thisItemObj.itemVSUnits = thisItemVSUnits;
thisItemObj.itemVSPrice = thisItemVSPrice;
thisItemObj.itemVSNotes = thisItemVSNotes;
thisItemObj.itemVSVisitCall = thisItemVSVisitCall;
output.push({ thisItemObj });
i++;
} while (i < arrayNos);
//This is where the second zaps code is pasted in the combined version
if (inputData.stringOVAccount == null) {
var listOVAccountArray = [];
var listOVNotesArray = [];
var listOVVisitCallArray = [];
} else {
var listOVAccountArray = inputData.stringOVAccount.split(",");
var listOVNotesArray = inputData.stringOVNotes.split(",");
var listOVVisitCallArray = inputData.stringOVVisitCall.split(",");
}
var output = [];
var arrayNos = listOVAccountArray.length;
var i = 0;
do {
var thisItemOVAccount = new String(listOVAccountArray[i]);
var thisItemOVNotes = new String(listOVNotesArray[i]);
var thisItemOVVisitCall = new String(listOVVisitCallArray[i]);
var thisItemObj = {};
thisItemObj.itemOVAccount = thisItemOVAccount;
thisItemObj.itemOVNotes = thisItemOVNotes;
thisItemObj.itemOVVisitCall = thisItemOVVisitCall;
output.push({ thisItemObj });
i++;
} while (i < arrayNos);
I just started learning JavaScript this week, and sense that I am missing something obvious, perhaps a set of brackets. Thanks for any assistance

David here, from the Zapier Platform team. You're running into a confusing and largely undocumented feature where items after a code step run for each item returned. This is usually desired behavior - when you return 3 submissions you want to create 3 records.
In your case, it's also running subsequent unrelated actions multiple times, which sounds like it's undesired. In that case, it might be easier to have 2 zaps. Or, if "Zoho2" only ever happens once, put it first and let the branch happen downstream.
Separately, I've got some unsolicited javascript advice (since you mentioned you're a beginner). Check out Array.forEach (docs), which will let you iterate through arrays without having to manage as many variables (your own i every time). Also, try to use let and const over var when possible - it keeps your variables scoped as small as possible so you don't accidentally leak values into other areas.
​Let me know if you've got any other questions!

Just a note - you are declaring the same array variable output in both segments of your code block - the second declaration will be ignored.
Use the .forEach() method to iterate over your arrays, it will significantly cleanup you code. You also don't need to painstakingly construct the objects to be pushed into the output arrays.
This may not fix your issue but the code is far easier on the eye.
var listVSAccountArray = [],
listVSUnitsArray = [],
listVSPriceArray = [],
listVSNotesArray = [],
listVSVisitCallArray = [],
output = [];
if (typeof inputData.stringVSAccount === 'string') {
listVSAccountArray = inputData.stringVSAccount.split(',');
listVSUnitsArray = inputData.stringVSUnits.split(',');
listVSPriceArray = inputData.stringVSPrice.split(',');
listVSNotesArray = inputData.stringVSNotes.split(',');
listVSVisitCallArray = inputData.stringVSVisitCall.split(',');
}
// iterate over the array using forEach()
listVSAccountArray.forEach(function(elem, index){
// elem is listVSAccountArray[index]
output.push({
itemVSAccount: elem,
itemVSUnits: listVSUnitsArray[index],
itemVSPrice: listVSPriceArray[index],
itemVSNotes: listVSNotesArray[index],
itemVSVisitCall: listVSVisitCallArray[index]
})
})
//This is where the second zaps code is pasted in the combined version
var listOVAccountArray = [],
listOVNotesArray = [],
listOVVisitCallArray = [],
output_two = []; // changed the name of the second output array
if (typeof inputData.stringOVAccount === 'string') {
listOVAccountArray = inputData.stringOVAccount.split(',');
listOVNotesArray = inputData.stringOVNotes.split(',');
listOVVisitCallArray = inputData.stringOVVisitCall.split(',');
}
// iterate over the array using forEach()
listOVAccountArray.forEach(function(elem, index){
// elem is listOVAccountArray[index]
output_two.push({
itemOVAccount: elem,
itemOVNotes: listOVNotesArray[index],
itemOVVisitCall: listOVVisitCallArray[index]
});
});

Find Index of Column(s) after it has been Moved

We are using DHTMLX Grid. Need some help, please.
I have a table and each columns (has filter/dropdown) are allocated an id eg. fac, date, sel, loc, tag ... etc
We have hard coded the index of columns to set and get the cookie elsewhere.
function doInitGrid(){
mygrid.setColumnIds("fac,date,sel,loc,tag"); //set ids
mygrid.attachEvent("onFilterStart",function(ind,data)
{
setCookie("Tray_fac_filter",mygrid.getFilterElement(0).value,365); //column index 0
setCookie("Tray_loc_filter",mygrid.getFilterElement(3).value,365);//column index 3
setCookie("Tray_tag_filter",mygrid.getFilterElement(4).value,365); //column index 4
mygrid.getFilterElement(0).value = getCookie("Tray_fac_filter")
mygrid.getFilterElement(3).value = getCookie("Tray_dep_filter")
mygrid.getFilterElement(4).value = getCookie("Tray_prg_filter")
});
}
But when the columns are moved, the problem arises as the index of the column changes yet it is set in setCookie /getCoookie
DHTMLX allows to get the index of the id using --
var colInd = grid.getColIndexById(id);
eg: var colInd = grid.getColIndexById(date); // outputs 1.
After moving the date column to the end -- fac, sel, loc, tag, date // it will output 4.
However, we have about 14 columns that can be moved/rearranged and I could use the
var colInd = grid.getColIndexById(id); 15 times
var facInd = grid.getColIndexById("fac");
var dateInd = grid.getColIndexById("date");
var selInd = grid.getColIndexById("sel");
var locInd = grid.getColIndexById("loc";
var tagInd = grid.getColIndexById("tag");
and put those variables in the set/get cookie. I was thinking if there was a better way.
To understand the code better, I have put the minimised version of the code in fiddle.
http://jsfiddle.net/19eggs/s5myW/2/

You've got the best answer I think. Do it in a loop and it's easier:
var cookie_prefix = "Fray_filter_";
var cookie_dur = 365;
var num_cols = dhx_grid.getColumnCount();
// filter vals to cookies
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var filter = mygrid.getFilterElement(col_idx)
if (filter) { // not all columns may have a filter
var col_id = dhx_grid.getColumnId(col_idx);
var cookie_name = cookie_prefix+col_id;
setCookie(cookie_name, filter.value, cookie_dur);
}
}
// cookies to filter vals
for (var col_idx=0; col_idx<num_cols; col_idx++) {
var col_id = dhx_grid.getColumnId(col_idx);
var filter_val = getCookie(cookie_prefix+col_id);
var filter = mygrid.getFilterElement(col_idx)
filter.value = filter_val;
}

You can use dhtmlxgrid native event to assign the correct id everytime a column is moved.
The event is called onAfterCMove, you can check the documentation here. onAfterCMove Event
You would do something like:
mygrid.attachEvent('onAfterCMove',function(cInd,posInd){
//Your processing here to change the cookies; where cInd is the index of the column moved
//and posInd, is the position where it Was moved
}):