detect click event on webviewer 'layoutModeChanged zoomChanged pageChanged toolModeChanged'

83 views
Skip to first unread message

Danny Mendel

unread,
Jun 6, 2016, 3:27:37 PM6/6/16
to PDFTron WebViewer
Hi guys!

i'm using viewer on('layoutModeChanged zoomChanged pageChanged toolModeChanged'
in order to sync with other users,

however i would like to detect if the "invoker" of the above events was a GUI "click" by a user
or invoker was trigger internally by non external gui such as internal calls etc.

the reason why it is important to me is that i'm syncing between different users.
while it is important to me to differentiate if a new "Catched" event needed to be send to other users
or it is internal operation which needed to be avoided/bypassed.

can you please advise how would i do that
is there any object in "event" or "data" which i can test ?
$viewerElement.on('layoutModeChanged zoomChanged pageChanged toolModeChanged', function (event, data) {
});

many thanks
Danny
 

Matt Parizeau

unread,
Jun 9, 2016, 2:08:36 PM6/9/16
to PDFTron WebViewer
Hi Danny,

Just to confirm, what you're wanting to achieve is that you don't want events triggered by syncing the UI for another user doesn't then go and trigger a sync back to the first user?

So I assume you have some code where a user receives an event from the other user and makes a call to update the UI. Just before calling the WebViewer function you could set a flag (e.g. isSyncEvent = true) and then in the viewerElement event handler if your flag was true you wouldn't send it to the other user and you would unset your flag.

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Danny Mendel

unread,
Jun 15, 2016, 9:07:04 PM6/15/16
to PDFTron WebViewer
yes i use same concept of "remoteSyncCommand ", in my terminology reseting done via  setting "false", so i can actually send "local" event to "remote host"

i wish it was easier task,  however it took some time to debug as those viewer events (such as layoutModeChanged zoomChanged pageChanged toolModeChanged)  are triggered as group of sequence events for instance for
loadDocuemnt

event flows
a. layoutModeChanged
b. toolModeChanged
c. zoomChanged
d. sidePanelVisibilityChanged

so i had to create a "Tracking" logic in order to understand which event is the last of this "Batch".
i also add custom trigger in order to catch $(document).on('sidePanelVisibilityChanged notesPanelVisibilityChanged', function (event, data) {
i added in readercontrol 
parent.$('body').trigger('sidePanelVisibilityChanged', value);
to catch those.

i think it will be nice idea to add those to the list of exported events, as i believe others like me will find them also interesting for manipulation.

here is the code i came with...


$viewerElement.on('layoutModeChanged zoomChanged pageChanged toolModeChanged', function (event, data) {
                                //alert('event.type: ' + event.type + ' data: ' + data + ' remoteSyncCommand: ' + app.remoteSyncCommand)
                                // bypass external event caused by loadDocument                                                                                                                              
                                if (app.sync.synctype === 1) {
                                    if (app.remoteSyncCommand && event.type != "zoomChanged")
                                        return;
                                    else if (app.remoteSyncCommand && event.type == "zoomChanged") {
                                        app.remoteSyncCommand = false;
                                        return;
                                    }
                                }
                                else if (app.sync.synctype === 7 || app.sync.synctype === 8) {
                                    // if toggle panel/notes don't reset remoteSyncCommand event yet, wait for sidePanelVisibilityChanged notesPanelVisibilityChanged handler
                                }
                                else {
                                    if (app.remoteSyncCommand) {
                                        app.remoteSyncCommand = false;
                                        return;
                                    }
                                }
                                app.last_sync = app.sync;
                                app.sync.invoker = app.username;
                                app.sync.ts = new Date();
                                if (app.sync.syncmap.length > 2)
                                    app.sync.syncmap.splice(2, app.sync.syncmap.length - 2);
                                switch (event.type) {
                                    case "displayModeChanged":
                                    case "layoutModeChanged":
                                        layoutMode = myWebViewer.getLayoutMode();
                                        app.sync.synctype = 3;
                                        app.sync.syncmap[2] = { Key: "layoutModeChanged", Value: layoutMode }
                                        app.sendData("viewer", app.sync, "viewer")
                                        break;
                                    case "zoomChanged":
                                        zoomLevel = myWebViewer.getZoomLevel();
                                        break;
                                    case "pageChanged":
                                        pageNumber = myWebViewer.getCurrentPageNumber();
                                        app.sync.synctype = 6;
                                        app.sync.syncmap[2] = { Key: "pageChanged", Value: pageNumber }
                                        app.sendData("viewer", app.sync, "viewer");
                                        break;
                                    case "toolModeChanged":
                                        toolMode = myWebViewer.getToolMode();
                                        break;
                                }
                            });
                            $(document).on('sidePanelVisibilityChanged notesPanelVisibilityChanged', function (event, data) {
                                //alert('event.type: ' + event.type + ' data: ' + data + ' remoteSyncCommand: ' + app.remoteSyncCommand)
                                if (app.remoteSyncCommand) {
                                    app.remoteSyncCommand = false;
                                    return;
                                }
                                app.last_sync = app.sync;
                                app.sync.invoker = app.username;
                                app.sync.ts = new Date();
                                if (app.sync.syncmap.length > 2)
                                    app.sync.syncmap.splice(2, app.sync.syncmap.length - 2);
                                switch (event.type) {
                                    case "sidePanelVisibilityChanged":
                                        app.sync.synctype = 7;
                                        app.sync.syncmap[2] = { Key: "sidePanelVisibilityChanged", Value: data }
                                        app.sendData("viewer", app.sync, "viewer");
                                        break;
                                    case "notesPanelVisibilityChanged":
                                        app.sync.synctype = 8;
                                        app.sync.syncmap[2] = { Key: "notesPanelVisibilityChanged", Value: data }
                                        app.sendData("viewer", app.sync, "viewer");
                                        break;
                                }
                            });

Many thanks
Danny
Reply all
Reply to author
Forward
0 new messages