In a vuejs project I use the vue eventbus like this. Emitting this event:
icontag.addEventListener('click', testFunction, false)
function testFunction () {
console.log('click1')
Events.$emit('click2')
}
And receiving it in another module I get as output one click1, but multiple click2's. It looks very much like every time there is some code which requires webpack import/ export it triggers an additional result on the eventbus of the same event..., or something..., since in chrome devtools the related code close to the click2's has code like __WEBPACK_IMPORTED_MODULE_5__util nearby.
Any idea what is going on?
EDIT:
I think it might have been a 'corrupted hot-reload setup'. After rebuilding the dev hot-reload build, the issue seems gone now. Still interested in similar experiences as the issue was pretty ugly and persistent.
I think the comment from Bert is right. You can actually register many times the same eventhandlers on the same event.
Try removing the eventhandler before adding it again.
icontag.removeEventListener("click", testFunction);
icontag.addEventListener('click', testFunction, false)
function testFunction () {
console.log('click1')
Events.$emit('click2')
}
Related
Does the Electron application framework have built-in text search?
The quick-start application doesn't provide any apparent search functionality (e.g. using Ctrl-F or from the menu options). I would have expected this to be a BrowserWindow option (or an option of its WebContents), but I don't see anything helpful in the docs.
I know this is an old thread, but might still be relevant for people out there.
Had the same problem, and first fixed by using electron-in-page-search, but this component doesn't work properly with Electron 2 or greater.
Then finally found electron-find resolved my problem. Using with Electron 4.
You just add the component to your project:
npm install electron-find --save
Add a global shortcut in your Electron main process to send an event to the renderer in a ctrl+f:
globalShortcut.register('CommandOrControl+F', () => {
window.webContents.send('on-find');
});
And then you can add this to your page (the renderer process)
const remote = require('electron').remote;
const FindInPage = require('electron-find').FindInPage;
let findInPage = new FindInPage(remote.getCurrentWebContents());
ipcRenderer.on('on-find', (e, args) => {
findInPage.openFindWindow()
})
Hope that helps.
Try webContents.findInPage just added in the latest version.
There is an issue with the solution Robson Hermes offered. globalShortcut is, by definition, global, so the shortcut will be detected even when the app is not focused. This will result in the Ctrl+F shortcut being "stolen" from everywhere else.
I have found no ideal solution (see this issue on the electron repository), but a hacky one can be achieved by doing what Robson said and adding
win.on('focus', () => {
globalShortcut.register('CommandOrControl+F', () => windows.main.send('on-find'))
})
win.on('blur', () => {
globalShortcut.unregister('CommandOrControl+F')
}
Note that as seen here, this is not ideal and can lead to several issues:
Other applications can get a lock on the shortcut when you lose focus, i.e. the shortcut will magically stop working when you switch back to the app later.
Some apps can appear on screen without taking focus (spotlight I believe has this behavior) and during the app's appearance the shortcuts will still be captured by your application.
There's also gonna be those weird one in a thousand situations where somehow you switch focus and the shortcut is not removed.
Instead of using global shortcuts , use Accelerators ( normal Keyboard shortcut )
{
label : 'help',
click : function(){.
electron.shell.openExternal('http://....').
},
accelerator : 'CmdOrCtrl+ Shift + H'
}
The above shown is just an example of How to use accelerator
My src/mixins/chechauthMixin.js file is as follows:
export const checkauthMixin = {
methods: {
validateAuthentication: function(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
}
}
However, it seems that the word 'this' is undefined here. I am calling this mixin method from a component or my routes.js file. How can I access the vue instance?
If this is not possible then what is a good workaround for such a scenario?
I have a similar mixin file where I store my social authentication function and that too uses 'this' instance. When I debug and try to use the instance in the console, it states that the element is undefined. However, my authentication code is able to work properly otherwise when I am not debugging.
What is going on in the two scenarios exactly?
I think it's because you're using the old javascript call
validateAuthentication: function(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
Try using:
export const checkauthMixin = {
methods: {
validateAuthentication(path) {
if(this.$store.getters.isAuthenticated) {
this.$router.push('/dashboard')
}
}
}
}
I also use mixins and I have no problem using this.$router... but I write my mixins with the newer syntax. Hope this solves your problem
Ok so I think I figured out the issue. I'm actually using a mixin incorrectly. The mixin is supposed to be used for multiple components that share a similar functionaliy. I was trying to use a mixin as a standalone function.
What I actually wanted to use was a routeguard. So the vue-router has a function called beforeach and that's what I wanted to use but didn't know about it when I faced this issue.
If this isn't what you expect, try self:
validateAuthentication: function(path) {
var self = this;
if(self.$store.getters.isAuthenticated) {
self.$router.push('/dashboard')
}
}
Welcome to Stack Overflow. Next time, try to make your code and question as succinct as possible. "Walls of Text" (the sorta rambling paragraphs you have) make your question difficult to answer quickly, thus it will not be answered as quickly as it otherwise would have, or answered at all. Be conscientious that people on this site don't want to spend time understanding your question, so they will skip over it.
Also, be sure to add things you have tried, and what error you're getting. Good luck!
I'm tring to merge 2 projects i found:
https://github.com/danxfisher/MeetEasier
and
this page https://tympanus.net/Development/Interactive3DMallMap/
i've done the changes in the react project meeteasier and included the html parts from interactivemallmap(with my little react abd nodejs knowledge) . I have problems on calling the javascript from main.js(interactivemallmap).
Here is the problem:
The first time i load the page with the chromedev i see that in the main.js it gets the values but when i recall the functions that values are null:
original main.js start like this and dot work:
;(function(window) {
...
mall = document.querySelector('.mall'),
...
pins = [].slice.call(mallLevelsEl.querySelectorAll('.map__space')),
....
pins.forEach(function(pin) {
var contentItem = contentEl.querySelector('.content__item[data- space="' + pin.getAttribute('data-space') + '"]');
pin.addEventListener('mouseenter', function() {
//if( !isOpenContentArea ) {
classie.add(contentItem, 'content__item--hover');
//}
});
....
})(window);
i've tried with the $(document).ready(function(){ instead of ;(function(window) {
but it is not working or better: in the first page load the it gets its value, but after when i pass over with the mouse and the event mouseenter triggers all the values are undefined
I think this is not the right approach but how do i make it work?
I do not have enough code to fully understand what is going on, but seeing that you're trying to merge two big projects with different codebases, if I were you I should take it slow, and take some steps back.
Your problem:
The main problem is that, to use React, you should first have a fundemental understanding of what it is doing under the hood.
You're trying to implement jQuery (a DOM library) with React, however, this will not work this easily, because React works with something that's called a virtual DOM, and it does not have access to the regular DOM nodes unless specifically ordered to do so (using findDOMNode from the react-dom package handles this for example).
What you should do:
Please read the docs first:
https://reactjs.org/docs/hello-world.html
Then, after you understand React, try implementing the SVG maps in it, step by step.
Just a small insight:
Rendering SVG in your render method, or try rebuilding it with D3 (https://d3js.org/) for example, just a suggestion on how to handle complex SVG.
You should handle most logic that's from main.js in the componentDidMount lifecycle, assuming you're going to need to access the map nodes.
I've a third party script, which is not a npm module. So what I did, is I added it as a normal script to my index.html, because there is just no way around that.
<script src="https://myExternalScript.js"></script>
Once this myExternalScript.js loaded, it will download another js file, which then calls a function called onDiagramReady(). I've to implement onDiagramLoaded(). So to be able to catch this event, I've added my onDiagramLoaded() to my index.html. Which look like this:
function onDiagramReady() {
window.dispatchEvent(new CustomEvent('onDiagramReady', {detail: this.Diagram}));
}
In my component I've a #HostListener to be able to get the context into it. This looks like this:
#HostListener('window:onDiagramReady', ['$event'])
onReactomeDiagramReadyListener(event) {
//magic in my component 🎉
}
So this was working perfectly fine in Angular 2.0, but now I get an error in my console:
It is still working, but I don't know what to do about this error. Is there maybe a better way to make a function available to the global scope?
I'd like to compose a demo showing the order of loading of modules. Supposed there are two modules Uno and Duo and I'd like to print their names to the console as they're loaded. How can I do that? I'm talking about the following pseudo-code.
Uno.js
import Duo from "./duo.js";
default export {
loaded: () => { console.log("Uno loaded"); }
}
Duo.js
default export {
loaded: () => { console.log("Duo loaded"); }
}
I've tried a couple of wild shots like loaded, init, start etc. but didn't get any print outs. Then, I goolearched it for a while but didn't see any examples showing anything related except for e.g. Vue framework where the event seems to be build in. Adding the term construct produces a wave of comparisons between modules and prototypes.
Usually, when there's no tons of examples on how to, it implies that it's not possible to achieve. However, since I haven't found any statements contradicting that it's doable, I'm still a bit hopeful.
I've seen the approach chaining the requireand subsequent statements but in my case, I want specifically the module itself to be self-containedly verbose.
You are currently exporting a function that does what you want from the module. Which means someone would need to invoke that function, and no, there's no automatic hook that invokes an exported item with a certain name when a module is loaded.
Instead, simply call the function yourself right in the module body. When the module is being evaluated, you are free to perform any side effects that you want:
// uno.js
import "./duo.js";
console.log("Uno loaded");
// duo.js
console.log("Duo loaded");