Using Wix Pro-Gallery eventsListener - javascript

So I'm trying to use wix pro-gallery's react component on an older version 3.1.38 with its built in eventListener which is created with this according to their docs
const eventsListener = (eventName, eventData) =>
console.log({eventName, eventData});
It would output the following information such as click, hover, and mouse over events. What I am attempmting to do is run a function as soon as the click function (which looks like {eventName: 'ITEM_CLICKED', eventData: {}} in the console log) is fired, that another function runs.
Among other attemps I tried to run this with the code to no success:
if(eventsListener(eventName) === "ITEM_CLICKED"){
lightbox.loadAndOpen(0)
}

Related

Kill specific function called by IpcMain Electron

I am new to Javascript and Electron.
Lets say I got 10 pair of buttons. Each pair of button consist of a 'Start' and a 'Cancel' button. Each 'Start' button can call a same function that import from another JS script when clicked.
So, if I had pressed the first and third 'Start' button, the same function will be called twice.
Now, I want to kill the function that called by the third 'Start' button only by clicking the third 'Cancel' button. Is there any way to resolve this?
Below is a simplified code that I had wrote:
const hi = require('helloworld.js')
ipcMain.on("runFunction", (event, data) => {
hi()
});
ipcMain.on("killFunction", (event, data) => {
// What I should write here
});
For the ipc.on to work you should actually send an event(specifically runFunction event according to your code) when button is clicked. so this triggers the event and ipcMain.on() will be working as the event is triggered.
Now you can actually pass data while sending an event.so using ipc.send() , here you can pass the index of start button and use this index accordingly to kill.
Example : ipcRenderer.send('asynchronous-message', 'ping')
Refer this for code examples
https://www.electronjs.org/docs/api/ipc-main

Toggle Modal on notification click

I'm trying to make my service worker file trigger a bootstrap modal on push notification click - but I'm struggling to get it to work. I understand that the service worker can't access the DOM, so how can I trigger such an event such as a modal?
I've tried calling a function from an external file, however it just says it's undefined. I've also tried using a listener within my main js file, but that just doesn't trigger.
this.notificationclick = function(event) {) //doesn't work.
I know my service worker triggers, because I can log the event to the console. I also know the file the function lives in is also loading as other code within that file runs.
This is my code for the function I'm trying to call:
const showModal = (array) => {
document.getElementById('notificationModalTitle').innerHTML = array[0];
document.getElementById('notificationModalBody').innerHTML = array[1];
const img = array[2];
const icon = array[3];
$('#notificationModal').modal()
}
This is the code within my sw.js file that I've tried using for toggling the modal.
this.addEventListener('notificationclick', function(e) {
//event triggers, but function is undefined.
showModal(["test", "testdesc", "test", "test"])
console.log(e);
});
Thanks in advance.

Unsubscribing from Firebase Realtime Database

I have a chat system within my Ionic app that is displayed within a modal window. Within the modal window I have the code below. It seems that after using the app for a while it becomes a bit sluggish.
I suspect that it's because I should be unsubscribing from Firebase when I close the modal window. In other words, it seems like a new subscription is being made each time I click the button to open the modal. Is this the case? If so, what should I do? I don't see an unsubscribe option in the docs?
ionViewDidLoad() {
firebase.database().ref('chatrooms/'+this.roomkey+'/chats').limitToLast(30).on('value', resp => {
this.chats = [];
this.chats = snapshotToArray(resp);
this.content.scrollTo(0, 999999, 200);
});
}
I have tried the following to call off but unsure if it is the correct approach? I have put this within ionViewDidLeave()
firebase.database().ref('chatrooms/'+this.roomkey+'/chats').limitToLast(30).off('value');
You should always remove any listeners on a database reference when that listener is no longer needed. Otherwise, that listener will continue to receive snapshots when data changes.
To remove a listener, use the off() method on the same reference that you used to call on(). Pass it the callback function that you passed on on(). Please also read the documentation for detatching listeners.

Notify main page of variable changed by external js

I'm attempting to create a modular sign in script for some webpages I'm developing. In short, I load the script on the main page, fire the main signIn function from a button press, and an overlay div is created on the main page which is managed by the external signIn.js. The external js sets some sessionStorage variables that will be utilized in the main page.
The hope for modularity would be to have signIn.js handle the authentication from the database and have the main page do with the process of signing in as needed (in this specific instance, it gives users access to their projects). Ideally, the sign in will not force a refresh of the main page due to other project goals.
The problem I'm encountering, is how do I notify the main page that the user has signed in without destroying any sense of modularity?
On top of other efforts, the most hopeful was attempting to create a custom event on the main page's document using $(document).on('userSignedIn', function() {...}); but signIn.js apparently cannot trigger this event.
Any suggestions for how to accomplish this or am I just going about this entirely wrong?
EDIT:
So, this was definitely a scope related issue I was experiencing. To flesh out the process, if anyone finds it relevant, signIn.js adds an overlay div to mainPage.html. $("#signInContainerDiv").load("signIn.html") is used to load the sign in form into the page. It turns out, when I was trying to reference $(document), it was using signIn.html's document, and not mainPage.html's. Upon that realization, I just created a div (signInNotify) on the mainPage that I bind the event to ($("#signInNotify").on("userSignedIn", function() {...});) and trigger it in signIn.js.
My own inexperience has conquered me, yet again.
jQuery can help you out when it comes to this. Here's an example from the main page for trigger
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
jQuery Page Reference
Another solution is to use some library like amplify.js, it has publish/subscribe functionality which can be useful for implementing the "observer pattern". You could also implement your own library for that, the code could be something like this:
// the implementation
function Notify () {
this.listeners = {};
}
Notify.prototype.subscribe = function (event, callback, context) {
this.listeners[event] = this.listeners[event] || [];
this.listeners[event].push({ callback: callback, context: context || null});
};
Notify.prototype.publish = function (event/*, args...*/) {
var args = Array.prototype.slice.call(arguments, 1);
(this.listeners[event] || []).forEach(function (x) {
x.callback.apply(x.callback.context, args);
});
};
// usage:
// an instance, or can be implemented as a singleton
var global_events = new Notify();
// wherever you want to be notified of login events
global_events.subscribe('login_success', function () {
// do something with the arguments
}, myContext/*optional*/);
// after success login
global_events.publish('login_success', user_credentials, other_data);
// and all subscribers (listeners) will be called after this
I have used that code for similar purposes and also used amplifyjs a couple times, you can read more about Amplify Pub/Sub.

Can`t call console.log() from event listener

I'm performing an app for tizen, but it has a lot of pure JS code and I faced with strange problem. I have such listener of event:
messagesChangeListener: function () {
var self = this, config,
messageChangeCallback = {
messagesupdated: function (updateMessages) {
//console.log('Message updated');
},
messagesadded: function (addedMessage) {
//console.log('Message added: ');
self.outputlog(addedMessage);
},
messagesremoved: function (removedMessages) {
//console.log('Message removed');
}
}; this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
},
outputlog: function(messages) {
console.log("Messages changed");
},
As you see I have event handlers, where commented calls of console log, but I get in this case error 'Cannot call method 'log' of undefined', I have to add new method outputlog for tests purpose. It works, but once Tizen emulator reloaded - it also stops working.
So:
Why I cann't call console.log directly from event handlers? I suppose it is a problem of visibility and a problem of pure JS. Am I right?
May be somebody know why method outputlog stops working after reloading of emulator? Here I suppose some specific problem of Tizen app and emulator.
Looks like you put a semicolon and extra curly here:
messagesremoved: function (removedMessages) {
//console.log('Message removed');
}
}; this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
},
Do you look at the "console" tab in the Chrome console, or only the log in the SDK?
Check if both exhibit the same behaviour, possibly it's a communication issue in the SDK.

Categories

Resources