I want to disable tippy when on mobile. For this I have the following script. I use it like explained in the documentation of tippy:
const mytippies = tippy('[data-tippy-content]', {
plugins: [hideOnEsc],
});
mytippies.disable();
Doing this I get error Uncaught TypeError: (0 , o.default)(...).disable is not a function what am I doing wrong?
The problem here is that the instance mytippies is an array of instances. The disable method only works on a single instance. So using a for loop I can disable Tippy for all my instances:
for (let i = 0; i < mytippies.length; i++) {
mytippies[i].disable();
}
Related
I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.
To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:
computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}
HTML code for graph:
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>
I don't know why, but in browser mode, this.$refs.villesChart is a component:
[1]: https://i.stack.imgur.com/xJ8pV.png
but now it is a proxy object, and lost its chartObject attribute:
[2]: https://i.stack.imgur.com/JyXrL.png
I'm really confused. Do you have an idea why?
And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.
Thanks a lot for your help!!
After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.
I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.
Here is my event code where this.dataprox is my data table for the chart:
eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},
My Gchart html code:
<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>
I hope it can help!
I have created a new SharePoint web part (version 1.7.1). I'm using the react template. The web part is very basic, yet doesn't run on IE 11.
The error returned is
Object doesn't support property or method 'find'
I don't use find in any of my .ts files, so I found the .find method is being called by the .js files that were transpiled from my .ts files.
Can anybody confirm this to be a bug in SPFX v1.7.1?
If so, is there a solution.
I know this could be fixed by introducing a shim, but I don't know how to configure this for SPFX and can't find any documentation that explains how to do this.
Any help is welcome.
If I recall correctly, this is because IE 11 doesn't support Element.closest, which is used by the React engine.
I have personally used element-closest to polyfill it, although I'm sure other options exist.
// beginning of WebPart code file
import 'element-closest/browser';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// rest of the code, etc.
With refer to this article, we can see that the Array.prototype.find() method not support IE browser. But, This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill Array.prototype.find with the following snippet:
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
},
configurable: true,
writable: true
});
}
Besides, as far as I know, when we use React, by default, the generated react project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. You could check it and import related packages.
You can adjust your tsconfig.json file: set "target" to "es5" under "compilerOptions".
Typescript will create polyfills for you.
I had the same issue. Use this import in your webpart.ts file.
import 'core-js/modules/es6.array.find';
If you go here: http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/
Inspect the demo and click the last item on the list:
Then in the console type: $0.scrollIntoView()
Infinite Scroll is never triggered.
Is there a way to programmatically trigger infinite-scroll in protractor context?
The implementation of the scroll in your example rely on the speed/velocity of the scroll which I guess falls far from the expected range when scrollIntoView is called.
One workaround is to simulates a smooth scroll by emitting multiple scroll events over a reasonable time. The idea is to reproduce as close as possible the behavior of a real user.
Some browsers already provides the option via scrollIntoView (supported by Chrome 62) :
$0.scrollIntoView({behavior: "smooth", block: "end"});
Using the accepted answer, in my case, I used ion-infinite-scroll as the argument.
Complete test to check if more content is loaded in Ionic:
describe('Scroll', () => {
it('should load more when reached end', async () => {
let list = getList();
let currentCount = await list.count();
const refresher = element(by.tagName('ion-infinite-scroll')).getWebElement();
let count = 0;
while(true){
browser.executeScript(`arguments[0].scrollIntoView({behavior: "smooth", block: "end"});`, refresher);
browser.sleep(1000); // wait for data to be loaded from api
list = getList();
let newCount = await list.count();
expect(newCount).toBeGreaterThanOrEqual(currentCount)
expect(newCount).toBeLessThanOrEqual(currentCount * 2)
if(newCount === currentCount){
break;
}
currentCount = newCount;
count++;
}
expect(count).toBeGreaterThan(0);
})
});
function getList() {
return element(by.className(pageId + ' list')).all(by.tagName('ion-item'));
}
I am having trouble removing all items from a dstore. I am trying this, which seems like it should work, but it fails at the end:
var TrackableMemory = declare([ Memory, Trackable ]);
var userMem = new TrackableMemory({
data: {the data...},
idProperty: '_id'
});
userMem.forEach(function (userObj) {
userMem.remove(userObj._id);
});
I put up a working (or not working, rather) example in this fiddle. See the console for the "cannot read property '_id' of undefined" error when it can't find the last record.
I have other things connecting to this store instance, so I can't really just reset everything by redefining userMem.
What am I doing wrong? How can I remove all items from a dstore?
Turned out to be a simple JS array problem of modifying the array over which I was iterating. Looping backwards over the array with a simple for works:
userMem.fetch().then(function (users){
for (var i = users.length - 1; i >= 0; i--) {
userMem.remove(users[i]._id);
}
});
This worked for me
// Forget all data
myGrid.store.data = [];
// Refresh the grid
myGrid.refresh();
When a script is injected in a safari extension it runs on page load, so that means when an extension is installed the injected javascript will only apply to newly-opened pages or pages which are reloaded afterwards. Does anyone know how to ensure the javascript is run without having to reload?
Alternatively, forcing users to load... this seems a bit dangerous though.
I've also tried to find a way to "execute" or "attach" a script on install. This is possible in Chrome and Firefox, without having to reload the page. Unfortunately in Safari I haven't found a way to do this without having to reload the page and let the normal addContentScript handlers take care of injecting the script.
To reload all Safari tabs directly after extension has been installed:
/* In glabal.js */
// Reloads all tabs
function reloadTabs() {
var browserWindows = safari.application.browserWindows;
for (var i = 0; i < browserWindows.length; i++) {
var tabs = browserWindows[i].tabs;
for (var j = 0; j < tabs.length; j++) {
tabs[j].url = tabs[j].url;
}
}
}
// Called on first run
function onInstall() {
reloadTabs();
}
var firstRun = localStorage['extensionHasPreviouslyRun'] === undefined ||
!JSON.parse(localStorage['extensionHasPreviouslyRun']);
if (firstRun) {
onInstall();
localStorage['extensionHasPreviouslyRun'] = JSON.stringify(true);
}