const arrayLabels = ['India', 'Indonesia', 'Russia', 'China', 'Bangladesh', 'Nepal', 'Bhutan', 'Myanmar', 'Laos', 'Cambodia', 'Vietnam', 'Malaysia'];
const arrayData = [2467, 560, 540, 20, 114, 121, 103, 85, 17, 150, 20, 295];
const arrayBackgroundColor = ['#55E6C1', '#3B3B98', '#F97F51', '#25CCF7', '#EAB543', '#CAD3C8', '#FEA47F', '#1B9CFC', '#F8EFBA', '#58B19F', '#2C3A47', '#B33771'];
const arrayOneMore = ['zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz'];
// etc.
function chartDataSort(arrayLabels, arrayData, ...args) {
console.log(`number of argents: ${args.length}`);
const arrayOfObj = [];
arrayLabels.map((label, i) => {
const el = { labels: label, data: arrayData[i] || 0 };
let argsObj = {};
args.map((arg, a) => {
argsObj[a] = arg[i] || 0;
});
el.args = argsObj;
arrayOfObj.push(el);
});
arrayOfObj.sort((a, b) => parseInt(b.data) > parseInt(a.data));
/* ... */
handlerClick() {
console.log('Link clicked', this);
this.hide();
this.show();
console.log(this.counter++);
}
start() {
this.counter = 1;
this.mylink.addEventListener('click', this.handlerClick.bind(this, this.counter));
}
...
handlerClick() {
console.log('Link clicked', this);
self.hide();
self.show();
}
start() {
window.self = this;
this.mylink.addEventListener('click', this.handlerClick);
}
...
<a id="mylink" href="#">Click</a>
<script type="text/javascript">
class someClass {
constructor(params) {
this.mylink = document.querySelector(params.mylink);
}
hide() {
console.log('Hiding...');
}
show() {
console.log('Showing...');
}
// handler
handlerClick() {
console.log('Link clicked');
this.hide();
this.show();
}
start() {
this.mylink.addEventListener('click', this.handlerClick);
}
checkParams() {
console.log(`mylink: ${this.mylink}`);
}
}
new someClass({
mylink: '#mylink'
}).start();
</script>
Uncaught TypeError: this.hide is not a function
"devDependencies": {
"gulp": "^4.0.2",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.46.0",
"webpack-stream": "^6.1.1"
}
// IMPORTANT!
// To reduce javascript output file size we import like that:
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript'; // import JS highlighting
hljs.registerLanguage('javascript', javascript); // import XML highlighting
import xml from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('xml', xml);
hljs.highlightAll();
function build () {
return Promise.resolve(
gulp.series(
clean_build,
gulp.parallel(
html_build,
js_build,
css_build,
php_build,
fonts_build,
image_build
)
)
);
}
exports.build = build;