How to set closure to capsule global variable - javascript

I have following functions,in which I can set prompt when someone leave page while inputting some values.
My consern is how to encapsule checkFlag. in this case, checkFlag is treated as global variables.
So that it is somewhat inconvenient.
let checkFlag = false;
const onBeforeunloadHandler = function(e) {
var msg = '';
e.returnValue = msg;
};
const formAlert = function() {
if(!checkFlag) {
window.addEventListener('beforeunload', onBeforeunloadHandler);
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].removeEventListener('input', formAlert);
checkValue[i].removeEventListener('change', formAlert);
}
checkFlag = true;
}
};
(() => {
let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
let submitBtn = document.querySelector('button[type="button"]');
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].addEventListener('input', formAlert);
checkValue[i].addEventListener('change', formAlert);
}
submitBtn.addEventListener('click', function() {
window.removeEventListener('beforeunload', onBeforeunloadHandler);
});
})();
If someone has opinion, will you please let me know.
Thanks

There's no need for anything in the outer scope. You can put it all into the IIFE.
(() => {
let checkFlag = false;
const onBeforeunloadHandler = function(e) {
var msg = '';
e.returnValue = msg;
};
const formAlert = function() {
if(!checkFlag) {
window.addEventListener('beforeunload', onBeforeunloadHandler);
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].removeEventListener('input', formAlert);
checkValue[i].removeEventListener('change', formAlert);
}
checkFlag = true;
}
};
let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
let submitBtn = document.querySelector('button[type="button"]');
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].addEventListener('input', formAlert);
checkValue[i].addEventListener('change', formAlert);
}
submitBtn.addEventListener('click', function() {
window.removeEventListener('beforeunload', onBeforeunloadHandler);
});
})();

(() => {
let checkFlag = false;
const onBeforeunloadHandler = function(e) {
var msg = '';
e.returnValue = msg;
};
const formAlert = function() {
if(!checkFlag) {
window.addEventListener('beforeunload', onBeforeunloadHandler);
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].removeEventListener('input', formAlert);
checkValue[i].removeEventListener('change', formAlert);
}
checkFlag = true;
}
};
let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
let submitBtn = document.querySelector('button[type="button"]');
for(var i = 0; i < checkValue.length; i++) {
checkValue[i].addEventListener('input', formAlert);
checkValue[i].addEventListener('change', formAlert);
}
submitBtn.addEventListener('click', function() {
window.removeEventListener('beforeunload', onBeforeunloadHandler);
});
})();

Related

Simplify if else statements through a Javascript Array

I have written some javascript code for a multilanguage site. The code works great but I feel like I have a lot of duplicate code. I was wondering if someone can explain how I can make this simpler or minimized. I have tried to use a forEach(function (item, index) but it does not seem to be working.
This is the original code that works....
(function () {
var lang1 = "/en/"; //default language
var lang2 = "/fr/"; //second language
var lang3 = "/es/"; //third language
var languageSwitcher = document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
var languages = document.querySelectorAll(".languages");
var language1 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang1+"']");
var language2 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang2+"']")
var language3 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang3+"']")
var windowURL = window.location.href;
var pageURL = windowURL.split("/")[4];
if (pageURL == undefined) {
for (var i = 0; i < language1.length; i++) {
language1[i].onclick = function () {
var path = lang1 + "home";
this.href = path;
};
}
for (var i = 0; i < language2.length; i++) {
language2[i].onclick = function () {
var path = lang2 + "home";
this.href = path;
};
}
for (var i = 0; i < language3.length; i++) {
language3[i].onclick = function () {
var path = lang3 + "home";
this.href = path;
};
}
} else {
for (var i = 0; i < language1.length; i++) {
language1[i].onclick = function () {
var path = lang1 + pageURL;
this.href = path;
};
}
for (var i = 0; i < language2.length; i++) {
language2[i].onclick = function () {
var path = lang2 + pageURL;
this.href = path;
};
}
for (var i = 0; i < language3.length; i++) {
language3[i].onclick = function () {
var path = lang3 + pageURL;
this.href = path;
};
}
}
document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));
var languageLinks = document.querySelectorAll(".language");
for (var i = 0; i < languageLinks.length; i++) {
var navURL = languageLinks[i].href;
if (windowURL.indexOf(lang1) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
if (navURL.indexOf(lang1) != -1) {
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else if (windowURL.indexOf(lang2) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[1].classList.add("active");
if (navURL.indexOf(lang2) != -1) {
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else if (windowURL.indexOf(lang3) != -1) {
if (navURL.indexOf(lang3) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[2].classList.add("active");
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
} else {
if (navURL.indexOf(lang1) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
languageLinks[i].closest("div").style.display = "block";
} else {
languageLinks[i].closest("div").style.display = "none";
}
}
}
var active = document.querySelector(".language-switcher .active");
active.closest(".language-switcher").prepend(active);
document.querySelectorAll(".header a").forEach((el) => (el.style.visibility = "visible"));
languageSwitcher.style.display = "flex";
})();
I have attempted to use a forEach function and an array but it is not working.
(function () {
var lang = ["/en/", "/fr/", "/es/"];
document.querySelectorAll("a[href='/languages']").forEach((el) => el.parentNode.classList.add("language-switcher"));
document.querySelector("[data-folder='/languages']").classList.add("language-switcher");
document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
var languages = document.querySelectorAll(".languages");
var windowURL = window.location.href;
var pageURL = windowURL.split("/")[4];
lang.forEach(function (index, value) {
var language = document.querySelectorAll(".language-switcher .languages a[href*='" + value + "']");
if (pageURL == undefined) {
for (var i = 0; i < language.length; i++) {
language[i].onclick = function () {
var path = value + "home";
this.href = path;
};
}
} else {
for (var i = 0; i < language.length; i++) {
language[i].onclick = function () {
var path = value + pageURL;
this.href = path;
};
}
}
document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));
var languageLinks = document.querySelectorAll(".language");
for (var j = 0; j < languageLinks.length; j++) {
var navURL = languageLinks[j].href;
if (windowURL.indexOf(value) != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[index].classList.add("active");
if (navURL.indexOf(value) != -1) {
languageLinks[j].closest("div").style.display = "block";
} else {
languageLinks[j].closest("div").style.display = "none";
}
} else {
if (navURL.indexOf('/en/') != -1) {
languages.forEach((el) => el.classList.remove("active"));
languages[0].classList.add("active");
languageLinks[j].closest("div").style.display = "block";
} else {
languageLinks[j].closest("div").style.display = "none";
}
}
}
document.querySelector(".header").style.visibility = "visible";
var active = document.querySelector(".language-switcher .active");
active.closest(".language-switcher").prepend(active);
});
})();

Show all tabs content vanilla js

How can I change this javascript code, that when I click on "Green" I want the content from all tabs to be displayed? https://codepen.io/wangel13/pen/OXBrRp
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();
Take a look at this:
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
function makeAllActive() {
var tabs = document.querySelectorAll('.b-tab');
Array.from(tabs).map(item => {
item.classList.add('active');
});
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
if(id === "green") {
makeAllActive();
return;
}
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();

Convert Select-Option to UL-LI in angular

I am migrating from js to angular and have come across a weird situation, I had designed my DOM to convert all the HTML Select tag to UL using this JS script:
var coaching = function() {}
coaching.prototype.customSelect = function(wrapper) {
wrapper.querySelectorAll('.form-ctrl').forEach(function(elm) {
if (elm.tagName == 'SELECT') {
var allOptions = elm.getElementsByTagName('option');
var allreadyCustomDropDown =
elm.parentNode.querySelector('.customDropdown');
if (allreadyCustomDropDown != null) {
allreadyCustomDropDown.remove();
}
if (allOptions.length > 0) {
var listWrapper = document.createElement('ul');
listWrapper.classList.add('customDropdown');
for (var i = 0; i < allOptions.length; i++) {
var list = document.createElement('li');
list.innerHTML = allOptions[i].innerHTML;
listWrapper.appendChild(list);
}
elm.parentNode.appendChild(listWrapper);
elm.parentNode.classList.add('customSelectWrapper');
listWrapper.querySelectorAll('li').forEach(function(liList) {
liList.addEventListener('click', function() {
liList.parentNode.parentNode.querySelector('.form-
ctrl').value = liList.innerHTML;
liList.parentNode.parentNode.classList.add('has-value');
liList.parentNode.classList.remove('visibleDropdown');
liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1;
})
})
}
// listWrapper.addEventListener
}
});
wrapper.querySelectorAll('select.form-ctrl').forEach(function(elm) {
elm.addEventListener('click', function() {
document.querySelectorAll('.customDropdown').forEach(function(elm1) {
elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown');
});
elm.style.opacity = 0;
elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown');
});
});
document.addEventListener('click', (e) => {
if (!e.target.parentNode.classList.contains('customDropdown') && !e.target.parentNode.classList.contains('customSelectWrapper')) {
document.querySelectorAll('.customDropdown').forEach(function(elm) {
elm.classList.remove('visibleDropdown');
elm.parentNode.querySelector('.form-ctrl').style.opacity = 1;
});
}
});
}
var coachingInstance = new coaching();
coachingInstance.customSelect(document);
Now on HTML side I use a wrapper on the select tag
<div class="field-wrapper">
<select id="enquiryPriority" class="form-ctrl" [(ngModel)]="advancedFilterForm.priority" name="priority" formInput>
<option></option>
<option *ngFor="let priority of enqPriority" [value]="priority.data_key">
{{priority.data_value}}
</option>
</select>
<label for="enquiryPriority">Enquiry Priority</label>
</div>
My question is how can I perform this conversion on Document load in angular since typescript throws an error when I use querySelectorAll('.form-ctrl').forEach() and many other common functions that I was able to use in plain javascript.
Update ==> Tried to perform the action using a function on ngOnInit
convertSelectToUl() {
var myNodeListOne = document.querySelectorAll('.form-ctrl');
[].forEach.call(myNodeListOne, function (elm) {
if (elm.tagName == 'SELECT') {
var allOptions = elm.getElementsByTagName('option');
var allreadyCustomDropDown =
elm.parentNode.querySelector('.customDropdown');
if (allreadyCustomDropDown != null) {
allreadyCustomDropDown.remove();
}
if (allOptions.length > 0) {
var listWrapper = document.createElement('ul');
listWrapper.classList.add('customDropdown');
for (var i = 0; i < allOptions.length; i++) {
var list = document.createElement('li');
list.innerHTML = allOptions[i].innerHTML;
listWrapper.appendChild(list);
}
elm.parentNode.appendChild(listWrapper);
elm.parentNode.classList.add('customSelectWrapper');
var listNode = listWrapper.querySelectorAll('li');
[].forEach.call(listNode, function (liList) {
liList.addEventListener('click', function () {
liList.parentNode.parentNode.querySelector('.form-ctrl').value = liList.innerHTML;
liList.parentNode.parentNode.classList.add('has-value');
liList.parentNode.classList.remove('visibleDropdown');
liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1;
})
})
}
}
});
var myNodeListTwo = document.querySelectorAll('select.form-ctrl');
[].forEach.call(myNodeListTwo, function (elm) {
elm.addEventListener('click', function () {
var listDropdown = document.querySelectorAll('.customDropdown');
[].forEach.call(listDropdown, function (elm1) {
elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown');
});
elm.style.opacity = 0;
elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown');
});
});
document.addEventListener('click', (e) => {
let parent = (<HTMLElement>(<HTMLElement>e.target).parentNode);
if (!parent.classList.contains('customDropdown')
&& !parent.classList.contains('customSelectWrapper')) {
var nodeDropdown = document.querySelectorAll('.customDropdown');
[].forEach.call(nodeDropdown, function (elm) {
elm.classList.remove('visibleDropdown');
elm.parentNode.querySelector('.form-ctrl').style.opacity = 1;
});
}
});
}
Just converted your JS code into TS, please try to run the same.
declare let document: any;
export class Coching {
customSelect(wrapper) {
wrapper.querySelectorAll('.form-ctrl').forEach((elm) => {
if (elm.tagName === 'SELECT') {
const allOptions = elm.getElementsByTagName('option');
const allreadyCustomDropDown =
elm.parentNode.querySelector('.customDropdown');
if (allreadyCustomDropDown != null) {
allreadyCustomDropDown.remove();
}
if (allOptions.length > 0) {
const listWrapper = document.createElement('ul');
listWrapper.classList.add('customDropdown');
for (let i = 0; i < allOptions.length; i++) {
const list = document.createElement('li');
list.innerHTML = allOptions[i].innerHTML;
listWrapper.appendChild(list);
}
elm.parentNode.appendChild(listWrapper);
elm.parentNode.classList.add('customSelectWrapper');
listWrapper.querySelectorAll('li').forEach((liList) => {
liList.addEventListener('click', () => {
liList.parentNode.parentNode.querySelector('.form-ctrl').value = liList.innerHTML;
liList.parentNode.parentNode.classList.add('has-value');
liList.parentNode.classList.remove('visibleDropdown');
liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1;
})
})
}
// listWrapper.addEventListener
}
});
wrapper.querySelectorAll('select.form-ctrl').forEach((elm) => {
elm.addEventListener('click', function () {
document.querySelectorAll('.customDropdown').forEach((elm1) => {
elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown');
});
elm.style.opacity = 0;
elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown');
});
});
document.addEventListener('click', (e) => {
if (!e.target.parentNode.classList.contains('customDropdown') && !e.target.parentNode.classList.contains('customSelectWrapper')) {
document.querySelectorAll('.customDropdown').forEach((elm) => {
elm.classList.remove('visibleDropdown');
elm.parentNode.querySelector('.form-ctrl').style.opacity = 1;
});
}
});
}
}

Anonymous function warning

I have a problem on my code and I don't know how to fix it.
Where I write "IMPORTANT HERE" the console tell me the function(e) is anonymous. How can I resolve my problem?
(function() {
var theForm = document.getElementById('theForm'),
inputs = document.querySelectorAll('input[type=text]'),
inputsLength = inputs.length;
for (var i = 0; i < inputsLength; i++) {
inputs[i].addEventListener('keyup', function(e) {
check[e.target.id](e.target.id);
});
}
theForm.addEventListener('submit', function(e) { //IMPORTANT HERE
var result = true;
for (var i in check) {
result = check[i](i) && result;
}
if (result) {
alert('Le formulaire est bien rempli.');
}
e.preventDefault();
});
theForm.addEventListener('reset', function() {
for (var i = 0; i < inputsLength; i++) {
inputs[i].className = '';
}
deactivateTooltips();
});
})();

JavaScript continue label scope

Map.prototype.updateMap = function (vehicles) {
nextVehicle:
for (var i = 0; i < vehicles.length; i++) {
for (var j = 0; j < this.oldVehicles.length; j++) {
var vehicle = vehicles[i];
var oldVehicle = this.oldVehicles[j];
if (vehicle.registration == oldVehicle.registration) {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
}
continue nextVehicle;
});
}
}
}
};
The code above does not work. I have a feeling this is to do with scope, I can't reach the nextVehicle label from inside the oldVehicle.getPosition method. How can I get around this?
Separate the matching logic from the update logic.
Map.prototype.updateMap = function (vehicles) {
// Only need to look up array lengths once
var vehiclesLength = vehicles.length,
oldVehiclesLength = this.oldVehicles.length;
for (var i = 0; i < vehiclesLength; i++) {
var vehicle = vehicles[i];
var oldVehicle = null;
// Find oldVehicle
for (var j = 0; j < oldVehiclesLength; j++) {
if (vehicle.registration == oldVehicle[j].registration) {
oldVehicle = oldVehicles[j];
break;
}
}
// Check for update if found
if (oldVehicle){
// Create closure for async callbacks
(function(oldV, lat,lng){
oldV.getPosition(function(latLng) {
if (lat != oldV.lat) {
var newPos = new plugin.google.maps.LatLng(lat,lng);
oldV.setPosition(newPos);
}
});
})(oldVehicle, vehicle.latitude, vehicle.longitude);
}
}
};
Just move the continue nextVehicle; line from inside the callback to immediately following the call to oldVehicle.getPosition(...):
Map.prototype.updateMap = function (vehicles) {
nextVehicle:
for (var i = 0; i < vehicles.length; i++) {
for (var j = 0; j < this.oldVehicles.length; j++) {
var vehicle = vehicles[i];
var oldVehicle = this.oldVehicles[j];
if (vehicle.registration == oldVehicle.registration) {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
}
});
continue nextVehicle;
}
}
}
};
This assumes the call to getPosition is a synchronous operation.
Edit:
Now if getPosition is asynchronous, you will need to use an asynchronous loop:
Something along this line might do the trick:
Map.prototype.updateMap = function (vehicles) {
var i = 0, j = -1, self = this;
var updatePosition = function() {
j++;
if (j == self.oldVehicles.length) {
j = 0;
i++;
}
if (i === vehicles.length) {
return; // We're done
}
var vehicle = vehicles[i];
var oldVehicle = self.oldVehicles[j];
if (vehicle.registration !== oldVehicle.registration) {
updatePosition();
}
else {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
updatePosition();
}
});
}
};
updatePosition();
};

Categories