The following Javascript code uses Generator functions
and destructuring spread operator ... to create an array between min
and count, much similar to Enumerable.Range in Linq and C#.
The following screen shot shows how it can be used. You can iterate this with for.. let.. of
function* Range(min,ct) {
for (let x=min;x<=min+ct;x++) {
yield x;
}
}
let gen = [...Range(2,10)]
console.log(gen);
for (let y of gen) {
console.log(y);
}
BuildQueryString<T>(input: T): string {
let q = "?";
Object.keys(input).forEach(key => q += key + "=" + input[key] + "&");
if (q.length > 0) {
q = q.substr(0,q.length-1);
}
return q;
}
Sample usage in Angular 8 solution of mine for example:
async saveSurvey(): Promise<SurveyItem> {
//debugger
let s: SurveyItem = {
Id: 0, LastUpdate: new Date(),
EquipmentNumber: this.equpimentIdentifier, RoomNumber: this.roomIdentifier,
PrimaryUsage: this.primaryUsage,
IsInspected: this.GetBoolean(this.isInspected), IsNotFound: this.GetBoolean(this.isNotFound)
};
let q = this.fetcher.GetAPIUrl('savesurvey');
q += this.fetcher.BuildQueryString(s);
const response = await this.http.get<SurveyItem>(q, { headers: this.corsHeaders }).toPromise();
//this.openSnackBar('Lagret utstyr ' + this.equpimentIdentifier);
this.openSnackBar('Lagret utstyr ' + this.equpimentIdentifier + ' Laster inn liste for utstyr i samme rom også..');
//After saving survye - update also the properties with updated Id and LastUpdate
this.SetCurrentSurveyItemPropretiesFromSurveyItem(response);
this.onRoomSelected(this.roomIdentifier);
return response;
}
git clone https://github.com/toreaurstadboss/eslint-standalone.gitThis animated gif shows how the tools shows linting capabilities. The loaded .eslintrc.js file errors if there are ES6 syntax, which does not work well in Internet Explorer. This is done by specifying env->es6 set to true and parserOptions->ecmaVersion set to '5'. Why would you even consider supporting Internet Explorer as a browser for your products ? Well, in the real world, some customers still use Internet Explorer due to company restrictions and compability reasons. So this standalone tool together with .eslintrc.js file below should help you check files conforming to ES5 Syntax and thereby supporting Internet Explorer.
module.exports = {
"plugins": ["ie11"],
"env": {
"browser": true,
"node": true,
"es6": false
},
"parserOptions": {
"ecmaVersion": 5,
},
"rules": {
"ie11/no-collection-args": ["error"],
"ie11/no-for-in-const": ["error"],
//"ie11/no-loop-func": ["warn"],
"ie11/no-weak-collections": ["error"]
}
};
To check that your Javascript code works using this tool, add the .eslinrc.js file above in the folder of your project (or any parent folder on that media disk volume).
Then run the command eslint-standalone.exe after adding the .eslintrc.js file.
You should then have outputted to the command line the errors (or warnings found) of ES6 Syntax, which IE does not support.
Note that I have not added functionality for '--fix' with this ESLint tool yet. You must inspect the warnings and errors reported and manually adjust/fix the Javascript source code.
Also note that this tool only supports looking at .js and .htm and .html files. I tried adding .cshtml files in the list of file globs supported, but the tool could not understand Razor syntax.
Feel free to give me some tips here if you know how to add this as a support.
Also note that it is additional documentation to be found for this tool on the Npmjs.org site and also in the GitHub repository.
eslint-standalone.exeThe sample screen shot shows how to run the tool from the command line (simple command). I deliberately added an arrow method in a Javascript file and the tool quickly spots this issue. For a medium sized project the tool takes only 5-10 seconds to execute.
/**
* Summary: Sorts alphabetaically word-wise to be used in e.g. a Select2Js control. Specify the n-word to start sorting with.
*
* Alphabetically sorts by each word
* @param {Number} startWordIndex The 'n-word' to begin sorting with *
* @param {boolean} isAscending The direction of sorting - true means ascending, false means descending
* @return {type} Return sort comparison value. If 0, the sorting is tie, if < 0 the element a preceeds b
*/
(function () {
var sortFunction = function sortFunctionTemplate(isAscending, startWordIndex, valueSelector, a, b) {
var aValue = valueSelector(a);
var bValue = valueSelector(b);
var astripped = aValue.split(' ');
var bstripped = bValue.split(' ');
var wordLength = Math.min(astripped.length, bstripped.length);
var compareValue = 0;
for (var i = startWordIndex; i < wordLength; i++) {
compareValue = astripped[i].localeCompare(bstripped[i]);
if (compareValue !== 0) {
break;
}
}
if (compareValue === 0) {
if (astripped.length > bstripped.length) {
compareValue = 1;
} else if (astripped.length < bstripped.length) {
compareValue = 1;
}
}
return compareValue * (isAscending ? 1 : -1);
};
if (typeof (Array.prototype.sortWordwise) === 'undefined') {
// ReSharper disable once NativeTypePrototypeExtending
Array.prototype.sortWordwise = function sortWordwise(startWordIndex, isAscending, valueSelector) {
if (valueSelector === null) {
valueSelector = function (item) {
return item;
};
}
//console.log('sorterer word-wise... ');
return this.sort(sortFunction.bind(this, isAscending, startWordIndex, valueSelector));
};
}
})();
Example how to use this method:
Here we use the Select2.js jQuery plugin to do our custom sorting to sort word-wise. I only consider the text after the ':' in my specific use case and I supply the starting index - sorting by the nth-word 1 (i.e. second word and so on) and supply a value selector function also. Select2.Js also retrieves a matcher function to specify the matching to be done case-insensitive (the find item in list function of the select 2 js control in this specific case).
$('.stentGraftfabrikatpicker').select2({
width: "element",
sortResults: function(data) {
var velgVerdi = data[0];
var ret = [velgVerdi];
var dataToBeSorted = data.splice(1);
return ret.concat(
dataToBeSorted.sortWordwise(1, true, function(item) {
var value = item.text;
return value.indexOf(':') >= 0 ? value.substring(value.indexOf(':') + 1) : value;
})
);
},
matcher: function(term, text) {
return text.toUpperCase().indexOf(term.toUpperCase()) >= 0;
},
allowClear: true
});
(function() {
angular.module('app')
.directive('modal', trapFocus)
function trapFocus() {
return {
restrict: 'C',
priority: 1,
link: function (scope, element, attr) {
if (typeof (scope.registerFocusTrap) === 'undefined') {
scope.registerFocusTrap = registerFocusTrap;
} else {
for (var i = 0; i < element.length; i++) {
registerFocusTrap(element.get(i));
}
}
}
};
}
function registerFocusTrap(element) {
var focusableEls = element.querySelectorAll(
'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
// ReSharper disable once InconsistentNaming
var KEYCODE_TAB = 9;
$(element).on('keydown',
function (e) {
console.log('inside registerFocusTrap keydown');
var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);
if (!isTabPressed) {
return;
}
if (e.shiftKey) /* shift + tab */ {
if (document.activeElement === firstFocusableEl) {
lastFocusableEl.focus();
e.preventDefault();
}
} else /* tab */ {
if (document.activeElement === lastFocusableEl) {
firstFocusableEl.focus();
e.preventDefault();
}
}
}
);
}
});
Note that the name of registered modules in AngularJs is not supported in AngularJs by itself. This polyfill should tough fix up this.
(function(orig) {
angular.modules = [];
angular.module = function() {
if (arguments.length > 1) {
angular.modules.push(arguments[0]);
}
return orig.apply(null, arguments);
}
})(angular.module);
var someCountries = [
{ country: "Norway", population: 5.2, code: "NO" },
{ country: "Finland", population: 5.5, code: "SU" },
{ country: "Iceland", population: 0.4, code: "IC" },
{ country: "Sweden", population: 10.2, code: "SW" }
];
We want to project this array using a new method select on the array of which we use the Array.prototype to achieve. Note that this will immediately add methods to all array objects immediately in the global scope.
Now consider a projection of just the 'country' and the 'population' fields of the Json structure.
Given a method call of just these two properties, we want to create a select projection method.
First consider this lightweight linqmodule implementation, using an IFE (Immediately invoked function expression) and using the revealing module pattern.
We expose the method dump to this module.
var linqmodule = (function() {
projection = function(members) {
var membersArray = members.replace(/s/g, "").split(",");
var projectedObj = {};
for (var i = 0; i < this.length; i++) {
for (var j = 0; j < membersArray.length; j++) {
var key = membersArray[j];
if (j === 0) {
projectedObj[i] = {};
}
projectedObj[i][key] = this[i][key];
}
}
return projectedObj;
};
Array.prototype.select = projection;
dumpmethod = function(arrayobj) {
var result = "";
result += "[";
for (var i = 0; i < Object.keys(arrayobj).length; i++) {
var membersArray = Object.keys(arrayobj[i]);
for (var j = 0; j < membersArray.length; j++) {
if (j === 0) {
result += "{";
}
var key = membersArray[j];
result +=
"key: " +
key +
" , value: " +
arrayobj[i][key] +
(j < membersArray.length - 1 ? " , " : "");
if (j === membersArray.length - 1) {
result +=
"}" + (i < Object.keys(arrayobj).length - 1 ? "," : "") + "\n";
}
}
}
result += "]";
return result;
};
return {
dump: dumpmethod
};
})();
Now it is easy to dump the contents of our projected array (which is copied into a new object) using the dump method:
result = someNums.select("country,population");
document.getElementById("result").innerText = linqmodule.dump(result);
console.log(result);
Note that our new object contains only the country and population fields in the Json structure, not the code. We have created a simple projection mechanism in Javascript in a self contained module!
