We Keep Coding

Could not change color using configuration panel in vis js

I created a network using Vis.js and I set the configuration panel to change colors however it did not work.
I get the following error
Here is how I set my options
var options = {
physics: {
enabled: false
},
configure: {
showButton: true,
},
};
Here is a fiddle to reproduce the error:
https://jsfiddle.net/marouenbg/tLd87oa9/

How to solve the problem of cannot read property addEventListener of null

I am rendering the paypal button in my application and when the page is loading it shows me the error in the console:
Error: Cannot read property 'addEventListener' of null
at er.error (https://www.paypal.com/sdk/js?client-id=AaAW2HxBuPPI3Awa__I7KGk8FYCLkia1jgm91t8SlBJAULAA4mHOc8oVBcOBp-MlVfyh24svB2EyPiNs&disable-funding=credit,card:3:60631)
at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AaAW2HxBuPPI3Awa__I7KGk8FYCLkia1jgm91t8SlBJAULAA4mHOc8oVBcOBp-MlVfyh24svB2EyPiNs&disable-funding=credit,card:2:68388)
at JSON.parse (<anonymous>)....
this is the code
var initPaypal = function(){
try
{
paypal.Buttons({
style: {
layout: 'horizontal',
color: 'gold',
shape: 'pill',
//size: 'responsive',
//label: 'pay',
//fundingicons : 'false',
//tagline: 'true'
},
//enableStandardCardFields: false,
onInit: function(data, actions) {
actions.disable();
document.querySelector('#invalidCheck')
.addEventListener('change', function(event) {
if (gsp.creditCardModel.get("agreePolicy")) {
actions.enable();
} else {
actions.disable();
}
});

Does your project work properly locally? Or does this error only appear when published on iis?
document.querySelector('#invalidCheck')
If it's local, the first thing you need to check is whether invalidCheck is null. If it still does not work, the reason for this error may be the script is executed before the page loads, you can try to place the script at the bottom of the page.

Lint imported object destructuring [duplicate]

The rule that I'm looking should show error in this case:
import {MY_CONSTANT1, MY_CONSTANT2, MY_CONSTANT3}
And considered as fine in this case:
import {
MY_CONSTANT1,
MY_CONSTANT2,
MY_CONSTANT3
}
Is there such eslint rule?

I was looking for such a rule for both import and export declaration.
As a result I've made a plugin with autofix.
So plugin transforms the code
import { k1, k2 } from 'something'
into
import {
k1,
k2
} from 'something'
and code
export { name1, name2, nameN }
into
export {
name1,
name2,
nameN
}

Edit:
Anton Antonov made a plugin that enforces this rule better than object-curly-newline can: https://stackoverflow.com/a/60477269/6179417
Old answer
Add the object-curly-newline rule to your .eslintrc.json, where at least ImportDeclaration is set to always (the other settings have no effect for enforcing newlines in import declarations).
Example:
"object-curly-newline": ["error", {
"ObjectExpression": "always",
"ObjectPattern": { "multiline": true },
"ImportDeclaration": "always",
"ExportDeclaration": { "multiline": true, "minProperties": 3 }
}]
This pattern will now result in an error:
While this is valid:
However, there is a catch - this rule only requires newlines after the opening brace and before the closing brace, so you can still double up on imports as long as they have newlines in between the braces:

Update on Anton Antonov answer for eslint 8
Because Anton Antonovs repository has been archived and gives meta.fixable error with eslint 8. I Recommend to use ruudandriessen fork of the project .
How to use fork:
Install fork
npm install eslint-plugin-modules-newlines --save-dev
Change all references inside eslint config file of modules-newline -> modules-newlines
Error:
ESLint: Fixable rules must set the `meta.fixable` property to "code" or "whitespace".
Occurred while linting ... Rule: "modules-newline/import-declaration-newline".
Please see the 'ESLint' output channel for details.

I was looking for the solution and unfortunately have only found your question. I have decided to learn a bit about how eslint works and how to write your own plugins and created mine. If you know the parsed the AST node structure it is really easy to work with. Here is the plugin's main file. Autofix is more tricky though so I do not include it as it biased towards my formatting standards.
module.exports = {
rules: {
'single-import-per-line': {
create (context) {
return {
ImportDeclaration(node) {
if (node.specifiers.length < 2) {
return;
}
let previousImport = node.specifiers[0];
for (let i = 1; i < node.specifiers.length; i++) {
const currentImport = node.specifiers[i];
// Omit the first condition if you want to put default imports on a new line as well
if (previousImport.type !== 'ImportDefaultSpecifier'
&& currentImport.loc.start.line === previousImport.loc.end.line
) {
context.report({ node, message: 'Your message' });
return;
}
previousImport = currentImport;
}
},
};
},
},
},
};

you can try this
"semicolon": [true, "always"]

Using Javascript Variables in scss

It's going to be awhile that I'm trying to find a solution to use javascript variables has scss value.
Let me explain my issue.
I use VueJs/Vuetify and I've got two entry point for my theme.
The first one is a json file like that :
module.exports = {
primary: { base: '#4d7cff', dark: '#2756d8', light: '#96b0fb' },
secondary: { base: '#00bda5', dark: '#209284', light: '#cef1ec' },
content: { base: '#37467a', dark: '#242c47', light: '#c3cbe6' },
danger: { base: '#e43858', dark: '#d22545', light: '#E36d83' },
success: { base: '#00c28d', dark: '#199c79', light: '#0bebae' },
accent: '#f5f8fa',
gradient: 'linear-gradient(45deg, #00bda5, #4d7cff)'
}
This file is required and use by vuetify two create custom color values and works perfectly.
The second one is a simple scss file :
// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb;
$color-secondary-base: #4d7cff;
$color-secondary-dark: #209284;
$color-secondary-light: #cef1ec;
$color-content-base: #37467a;
$color-content-dark: #242c47;
$color-content-light: #c3cbe6;
$color-danger-base: #e43858;
$color-danger-dark: #d22545;
$color-danger-light: #ff8097;
$color-success-base: #00c28d;
$color-success-dark: #199c79;
$color-success-light: #14e1a9;
$color-accent: #f5f8fa;
My goal would be to connect the json file with the scss variables to have one entry point for the entire app.
Why do this ?
Vuetify offers a scss variable overload system to modify the style of the components.
the idea would be to control this overload from the javascript file
In addition to that, due to vuetify limits, there are certains points where I must to control the color in a responsive context (for example a white header on desktop and blue on mobile) and therefore am obliged to use scss variables.
I've find this article on medium who at first sight seems to answers my problem.
But when I try to test it I've got the following error :
in ./src/assets/styles/vuetify.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'options'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\schema-utils\dist\validate.js:96:11)
at Object.loader (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\sass-loader\dist\index.js:36:28)
Vuetify.scss
#import './novalys/map.scss';
#import '~vuetify/src/styles/main.sass';
vue.config.js
const sass = require('node-sass')
const sassUtils = require('node-sass-utils')(sass)
const sassVars = require(__dirname + '/src/theme/index.js')
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "#/assets/styles/novalys/map.scss";`,
options: {
functions: {
'get($keys)': function(keys) {
keys = keys.getValue().split('.')
let result = sassVars
let i
for (i = 0; i < keys.length; i++) {
result = result[keys[i]]
}
result = sassUtils.castToSass(result)
return result
}
}
}
}
}
},
transpileDependencies: ['vuetify']
}
Can someone here would help me to find a possible solution ?
I've heard about an inverse solution by exporting a scss variable like that
:export {
some-variable: 'some-value';
}
But my idea is to have the entry point in json not a scss file.
Thank you in advance !

autoComplete.js - how to resolve autoComplete is not defined

I want to use autocomplete.js in my application.
I have installed the package using yarn add #tarekraafat/autocomplete.js. I am using webpack 4.28 to bundle the javascript files and have require("#tarekraafat/autocomplete.js/dist/js/autoComplete"); to import the package into the application and placed the bundled file at the bottom before the closing BODY tag.
In my custom.js file, I am creating a new instance of autoComplete as follows:
new autoComplete({
data: {
src: async () => {
document.querySelector("#autoComplete_results_list").style.display = "none";
document.querySelector("#autoComplete").setAttribute("placeholder", "Loading...");
const source = await fetch("/employee/search");
const data = await source.json();
return data;
},
key: "name"
},
selector: "#autoComplete",
placeHolder: "type employee name to search...",
threshold: 0,
searchEngine: "strict",
highlight: true,
dataAttribute: { tag: "value", value: "" },
maxResults: Infinity,
renderResults: {
destination: document.querySelector("#autoComplete"),
position: "afterend"
},
onSelection: feedback => {
document.querySelector(".selection").innerHTML = feedback.selection.food;
document
.querySelector("#autoComplete")
.setAttribute("placeholder", `${event.target.closest(".autoComplete_result").id}`);
console.log(feedback);
}
});
However, on running the application, I am getting an error Uncaught ReferenceError: autoComplete is not defined with a reference to the location where I am creating the new instance.
I have read the getting started documentation and looked at the demo code and I can't figure out what I am missing. How do I resolve the error?

Your problem is in your import, you are not import the autoComplete correctly, so when you using the new autoComplete you are having error.
Change the require("#tarekraafat/autocomplete.js/dist/js/autoComplete"); to import autoComplete from '#tarekraafat/autocomplete.js';, put this on top of your file, right after jquery or something

Write your code inside
$(document).ready(function(){
// Write your Code Here
});