prevent webviewer ui control or form filling & annotations

[Danny Mendel]

hi Matt,

as i'm syncing different participant working on shared document

a. i would like to prevent certain user to have control on basic viewer user interface

in short to make him a watcher, no ability to scroll, click, or do any action which manipulate the actual viewed content.

b. for other types of users, i would like to have normal control , BESIDE the ability to add annotation and/or filling values into form fields.

do you have any idea how to implement this ?

it will very beneficial to get a direction.

many many thanks

Danny

[Matt Parizeau]

Hi Danny,

You could try removing the event handlers for the elements on the toolbar and disabling the inputs. For example in a config file:

$('#control').find('span, div, input').off();
$('#control').find('input').prop('disabled', true);

For disabling scrolling this link might help: http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

If you want to disable the ability to add annotations you could set the enableReadOnlyMode option to true in the PDFTron.WebViewer constructor.

To disable editing of form fields try this code:

$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;
  docViewer.on('pageComplete', function() {
    $('[id^=pageWidgetContainer] div').each(function() {
      var $this = $(this);
      $this.find('input,textarea').prop('readonly', true);
      $this.find('input[type=checkbox]').prop('disabled', true);
    });
  });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Danny Mendel]

hi Matt,

thanks for your answer,

it seems like a great starting point

however just to clarify my needs -

(a)

i would like to "toggle" between "watch - view only" to normal control, as my users may do this many many times

after viewer has been loaded, while watching the content, not just once viewer has been loaded

so if this suppose to be "watch" mode for viewer

$('#control').find('span, div, input').off();
$('#control').find('input').prop('disabled', true);

how would you suggest to return to "on()" again ? is there a way to "remember" the original on() events so i can toggle to rollback to normal control state ?

(b)

regarding "read-only" annotation and disable form values, if i understand your suggestion is about

fixating the condition once the viewer loaded and page(s) rendering is completed,

so the same question as above, how can i toggle those modes many times responsively to sync request 

go from "read-only" and blocked form value, into full normal editable form and vice versa (like above)

i hope to avoid loadDocument each time i would like to toggle both (a) + (b) operations and have an elegant solution off course.

many many thanks

Danny

[Matt Parizeau]

Hi Danny,

If you wanted to toggle you could add a click handler for everything that would stop the other click events that are handled later from happening. Note that this code should be put in a config file so that it happens before ReaderControl is able to bind the click events otherwise it won't be able to stop the other event handlers. For example:

$('#control').find('span, div, input').on('click.readonly', function(e) {
  e.stopImmediatePropagation();
});

Then later when you wanted to go back to normal mode you would just have:

$('#control').find('span, div, input').off('click.readonly');

Having click.readonly instead of just click is so that we can just remove the specific click handlers we attached initially. It's using jQuery's event namespaces http://api.jquery.com/on/#event-names.

For widgets it should be simpler, just perform the opposite of the first call:

$('[id^=pageWidgetContainer] div').each(function() {
  var $this = $(this);

  $this.find('input,textarea').prop('readonly', false);
  $this.find('input[type=checkbox]').prop('disabled', false);
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Danny Mendel]

hi Matt,

thanks for your response

(a) regarding usage of config.js, for trigger 'click.readonly' it is a problematic solution,

better to find mechanism to use the main javascript or plug/inject custom into ReaderControl.js itself rather than embed config.file just for calling this particularly and solely.

can't you provide another alternative, where the readcontrol.js expose a new 'click.readonly' 

handler where i can trigger it into parent.body ?

i'm using similar technique today to capture events into parent/main javascript such as 'rotate' or 'notesPanelVisibilityChanged'

$("#rotateGroup").on('click', '[data-rotate]', function() {

            var action = $(this).data('rotate');

            if (action === "cc") {

                me.rotateClockwise();

            } else if (action === "ccw") {

                me.rotateCounterClockwise();

            }

            parent.$('body').trigger('rotate', action);

        });

or

setTimeout(function(){

                me.docViewer.scrollViewUpdated();

                me.fireEvent('notesPanelVisibilityChanged', value);

                parent.$('body').trigger('notesPanelVisibilityChanged', value);

            }, 250);

so question is can you help me to expose this click.readonly so i can listen to it on root app and set stopImmediatePropagation when/where i want ?

thanks

Danny

(b) annotaton "read-only"-> you had provide an example for both span, div, input a toggle to catch before actual clicks happens,and also an example to catch widget of type input/textarea and dynamically set readonly

but i'm not sure your answer covers the "annotations" of type signature,free draw, notes, arrows etc ? or this it ?

thanks 

Danny

[Danny Mendel]

hi Matt,

how are you? i hope i find you well.

your help is important for me for both [a] + [b]

i believe i didn't get your response yet ?

many thanks

[Danny Mendel]

just to clarify (a)

my requirement is to block/unblock many times as possible by user gui request.

so i need some mechanizm which is more solid and manipulated via the docViewer itslef rather than using your solution for singleton operation of calling this particularly and solely.

many thanks

Danny

[Matt Parizeau]

Hi Danny,

Sorry it looks like we missed replying to this one. Adding a specific event like that is something we might consider for the future but using a config file is a common way of customizing WebViewer that we recommend for many customers. See here for information about config files https://www.pdftron.com/webviewer/demo/tutorials/getting-started-config-files.html.

For disabling and re-enabling annotation editing you could use code like the following which sets readonly mode and hides the annotation tools.

function setReadOnly(isReadOnly) {
    myWebViewer.getInstance().setReadOnly(isReadOnly);
    if (isReadOnly) {
      myWebViewer.getInstance().setToolMode(window.PDFTron.WebViewer.ToolMode.Pan);
    }
    var innerWindow = $('iframe')[0].contentWindow;
    isReadOnly ? innerWindow.$('#toolList > .annotTool, #overflowTools').hide() : innerWindow.$('#toolList > .annotTool, #overflowTools').show();
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Danny Mendel]

hi Matt,

i need a solution to "toggle" many times between

read-only/blocked UI control to normal/full UI control and vice versa

many many times as long as meeting occurs.

so i don't understand how your solution based on setting a specific "block" event on the config file "before" the actual document controls are rendered, actually help me to toggle those control grants, any time i would want (grammatically) to instruct app to prevent/unlock viewer control.

many thanks

Danny 

On Monday, June 20, 2016 at 8:07:48 PM UTC+3, Danny Mendel wrote:

[Matt Parizeau]

Hi Danny,

You're right, a better way to do it would be like this so you only attach the event once:

var isEnabled = true;

$('#control').find('span, div, input').on('click', function(e) {
    if (!isEnabled) {
        e.stopImmediatePropagation();
    }
});

function toggleBlocking() {
    isEnabled = !isEnabled;
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.