launching search programmatically on "documentLoaded" breaks document layout

[Vladimir Knobel]

Hi Matt,

Now that we are not using an iframe anymore one strange issue has emerged.

When passing a search term directly to the viewer and open the search toolbar after de document has been loaded the layout appears distorted.

Here the code where are using inside a config.js passed in the querystring to MobileReaderControl.html:

$(document)

        .on('viewerLoaded', function() {

            readerControl.pageDisplay = readerControl.pageDisplayModes.Single;

            readerControl.setPageMode();

            //=========================================================

            // Add a button to the toolbar

            //=========================================================

            var pageHeader = $('#pageHeader');

            //console.debug(pageHeader);

            var leftMenuContext = $('<div id="LeftMenuContext" data-role="controlgroup" data-type="horizontal">').addClass('menuContextLeft ui-controlgroup ui-controlgroup-horizontal ui-corner-all');

            var uiControlGroup = $('<div>').addClass('ui-controlgroup-controls');

            var buttonWrapper = $('<a id="backButton" data-transition="none">').addClass('mobile-button ui-link');

            pageHeader.append(leftMenuContext.append(uiControlGroup.append(buttonWrapper)));

            var button = $('<span>').attr({

                'id': 'optionsButton',

                'class': 'glyphicons circle_arrow_left'

            })

            .on('click', function() {

                //window.location='/#/tab/documents';

                window.history.back();

            });

            buttonWrapper.append(button);

        })

        .on('documentLoaded', function() {

            console.debug(readerControl);

            if (window.initialSearchString){

                readerControl.reshowMenu();

                $('#searchButton').click();

                $('#searchInput').val(window.initialSearchString);

                readerControl.searchText(window.initialSearchString);
                //hack to try to remediate the layout problems.

                readerControl.setZoomLevel(readerControl.minZooms[readerControl.currentPageIndex], false);

                readerControl.docViewer.UpdateVisiblePages();

            }

        });

I think it has to do with the fact I'm setting in MobileReaderCOntrol.js the margon to 30:

me.docViewer.SetMargin(30);

otherwise the viewer in full screen in an iPad gets overlapped by the iOS status bar.

Here's how it's looks like after rendering the doc and locating the first occurrence of the search string:

Please let me know if there's some workaround for this problem, thanks!

KR

Vlad

 

[Matt Parizeau]

Hi Vlad,

I tried using your config file, set the margin to 30, set an initial search string and it didn't work quite right, though it didn't look like your screenshot. However if I removed the bottom two lines in documentLoaded after your "hack" comment then everything seems to work fine for me.

It's possible that the issue could be related to a particular document and search term or maybe it's just a timing issue of when things are downloaded. Could you send a document and search term that you're always able to reproduce the issue with?

Matt Parizeau

Software Developer

PDFTron Systems Inc.