My site breaks and fails running because of the Object doesn't support property or method 'endsWith' error. I've tried polyfilling it with import 'core-js/features/string/ends-with' or
if (!String.prototype.endsWith) {
String.prototype.endsWith = function (search, this_len) {
if (this_len === undefined || this_len > this.length) {
this_len = this.length
}
return this.substring(this_len - search.length, this_len) === search
}
}
I've done that in my custom _app file but it still fails in edge and ie11. What am I missing?
Edit: Judging by the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith#Browser_compatibility endsWith should be supported in Edge
Try to add this to your code.
String.prototype.endsWith = function(pattern) {
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
};
Related
I get a syntax error when using this line of code in IE11.
let themes = _.filter(data, (el) => {
if (OrganizationId == 21) {
return el.Code == 'skin-3';
} else {
return el.Code != 'skin-3';
}
});
You're using arrow function which is not supported by IE and let statement which is partial supported by IE.
I suggest that you transpile the code to ES5 syntax using Babel. You can convert the code to below to make it work in IE 11:
var themes = _.filter(data, function (el) {
if (OrganizationId == 21) {
return el.Code == 'skin-3';
} else {
return el.Code != 'skin-3';
}
});
Hello I have this code:
<script>
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
</script>
How can i add prefers-color-scheme media query to autoenable the created dark mode when user has dark mode enabled in browser ?
Can you please help me
Sorry for the late response. A quick code to integrate (p.s. not tested):
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
if(window.matchMedia)
{
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event =>
{
if (event.matches && !$("body").hasClass("et-dark-mode"))
{
$(".et-dark-mode-capable,body").addClass("et-dark-mode");
if ( storageAvailable )
{
sessionStorage.setItem('etDarkModeEnabled','1'):
}
}
else
{
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
if ( storageAvailable )
{
sessionStorage.removeItem('etDarkModeEnabled');
}
}
}
);
}
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
In short it checks if the browser supports window.matchMedia and then it reads it and sets the theme based on that preference. In the end it is the same as your code to allow the user to toggle the dark and light mode (maybe a button, or a checkbox).
For more info you can search some dev blogs on the subject and after a quick search I would say that this one might closely match your needs (p.s. not my blog :) )
We are making a V2 Docusaurus website: https://www.10studio.tech.
We have just realized that it does not work well in IE, for instance, IE11. The error message is: Object doesn't support property or method 'assign'.
There are some packages to provide with IE compatibility such as core-js, but we don't know how to properly add it to Docusaurus v2.
Does anyone know how to amend this?
The error message is telling you that object doesn't have an assign function. assign is a function which apparently is not supported in the browser you are speaking about, so you need to polyfill it. A good example is:
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
which can be found here: https://gist.github.com/spiralx/68cf40d7010d829340cb
However, even though this will fix the problem you were complaining about, it is highly probable that other problems will occur as well. You might need to polyfill some other stuff as well, you might want to take a look into BabelJS in order to achieve this.
I've been trying to put a custom experiment made with jsPsych, a library for running behavioral experiments, with custom plugins into a React container but i've run into some issues.
The first thing i tried to do was use makebrainwave's jspsych-react package, but when i try to run the example, after having to change the routes of the files in the import section and replacing the use of 'fs', i'm still running into this error:
Trial level node is missing the "type" parameter. The parameters for the node are: {} experiment.js:924
TypeError: jsPsych.plugins[trial.type] is undefined[Learn More] experiment.js:1051
Could anyone help me with it? It looks like it's trying to initialize something and failing, but otherwise I'm kinda lost in the error.
The first error occurs in the constructor function:
// constructor
var _construct = function() {
// store a link to the parent of this node
parent_node = parent;
// create the ID for this node
if (typeof parent == 'undefined') {
relative_id = 0;
} else {
relative_id = relativeID;
}
// check if there is a timeline parameter
// if there is, then this node has its own timeline
if ((typeof parameters.timeline !== 'undefined') || (typeof jsPsych.plugins[trial_type] == 'function')) {
// create timeline properties
timeline_parameters = {
timeline: [],
loop_function: parameters.loop_function,
conditional_function: parameters.conditional_function,
sample: parameters.sample,
randomize_order: typeof parameters.randomize_order == 'undefined' ? false : parameters.randomize_order,
repetitions: typeof parameters.repetitions == 'undefined' ? 1 : parameters.repetitions,
timeline_variables: typeof parameters.timeline_variables == 'undefined' ? [{}] : parameters.timeline_variables
};
self.setTimelineVariablesOrder();
// extract all of the node level data and parameters
var node_data = Object.assign({}, parameters);
delete node_data.timeline;
delete node_data.conditional_function;
delete node_data.loop_function;
delete node_data.randomize_order;
delete node_data.repetitions;
delete node_data.timeline_variables;
delete node_data.sample;
node_trial_data = node_data; // store for later...
// create a TimelineNode for each element in the timeline
for (var i = 0; i < parameters.timeline.length; i++) {
timeline_parameters.timeline.push(new TimelineNode(Object.assign({}, node_data, parameters.timeline[i]), self, i));
}
}
// if there is no timeline parameter, then this node is a trial node
else {
// check to see if a valid trial type is defined
var trial_type = parameters.type;
if (typeof trial_type == 'undefined') {
console.error('Trial level node is missing the "type" parameter. The parameters for the node are: ' + JSON.stringify(parameters));
} else if ((typeof jsPsych.plugins[trial_type] == 'undefined') && (trial_type.toString().replace(/\s/g,'') != "function(){returntimeline.timelineVariable(varname);}")) {
console.error('No plugin loaded for trials of type "' + trial_type + '"');
}
// create a deep copy of the parameters for the trial
trial_parameters = Object.assign({}, parameters);
}
}();
And the second one in the first line of the folowing function
function setDefaultValues(trial){
var trial_parameters = Object.keys(jsPsych.plugins[trial.type].info.parameters);
for(var i=0; i<trial_parameters.length; i++){
if(typeof trial[trial_parameters[i]] == 'undefined' || trial[trial_parameters[i]] === null){
if(typeof jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default == 'undefined'){
console.error('You must specify a value for the '+trial_parameters[i]+' parameter in the '+trial.type+' plugin.');
} else {
trial[trial_parameters[i]] = jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default;
}
}
}
}
I installed jspsych-react with yarn into the project and the test container is the following:
import React, { Component } from 'react'
import { Experiment } from "jspsych-react";
import { visualOddball } from "./examples/timelines/visualOddball";
import { callbackHTMLDisplay } from "./examples/plugins/callbackHTMLDisplay";
import { callbackImageDisplay } from "./examples/plugins/callbackImageDisplay";
export default class ExperimentComponent extends Component {
render() {
return (
<div>
<Experiment
settings={{ timeline: visualOddball }}
plugins={{
"callback-html-display": callbackHTMLDisplay,
"callback-image-display": callbackImageDisplay
}}
/>
</div>
);
}
}
Has anyone integrated something similar without using the jspsych-react package? which approach did you take?
Thanks in advance!
In order to filter an array on possibly 2 parameters I have written the following code:
filterStudies(searchString?: string) {
if (searchString && !this.selectedModalityType) {
this.studies = this.fullStudyList.filter(function (study) {
return (study.Code.toUpperCase().includes(searchString.toUpperCase())) ||
(study.Description.toUpperCase().includes(searchString.toUpperCase()));
})
} else if (!searchString && this.selectedModalityType) {
console.log(this.selectedModalityType)
this.studies = this.fullStudyList.filter(function (study) {
return (study.ModalityType.Code.toUpperCase() === this.selectedModalityType.toUpperCase())
})
} else if (searchString && this.selectedModalityType) {
this.studies = this.fullStudyList.filter(function (study) {
return (study.Code.toUpperCase().includes(searchString.toUpperCase())) ||
(study.Description.toUpperCase().includes(searchString.toUpperCase())) &&
(study.ModalityType.Code.toUpperCase() === this.selectedModalityType.toUpperCase())
})
}
}
filterStudies(searchString?: string) is called when typing in a textbox that.
The other way of filtering could be by selecting a value from a dropdown box. Achieved by this code:
handleSelection(value:any){
this.selectedModalityType = value;
console.log(value)
this.filterStudies()
}
All works fine until this code is hit:
this.studies = this.fullStudyList.filter(function (study) {
return (study.ModalityType.Code.toUpperCase() === this.selectedModalityType.toUpperCase())
})
Error message : ERROR TypeError: Cannot read property 'selectedModalityType' of undefined, I see it is actually logged in the line before.
What am I missing??
Thanks,
In your funtcion, this is not the same this as the line before.
This will work:
let self = this;
this.studies = this.fullStudyList.filter(function (study) {
return (study.ModalityType.Code.toUpperCase() === self.selectedModalityType.toUpperCase())
})
You can read this to learn more: https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript
The this keyword in JavaScript (and thus TypeScript) behaves differently than it does in many other languages. This can be very surprising, especially for users of other languages that have certain intuitions about how this should work.
(...)
Typical symptoms of a lost this context include:
A class field (this.foo) is undefined when some other value was expected