Second Chances

Some time ago I wrote this post detailing how to edit the preview page in WebDrawer, turns out I did not put enough time into testing my solution. In Chrome the PDF preview does not always resize correctly and in IE the Links/Actions menu displays under the PDF preview.  This new approach should work better.

Instructions

All modifications are made in WDRecordPreview.cshtml, ensure you have a backup before commencing.  The full page is available here and can simply be copied into your Views folder.

The details

Page settings

At the top of the page the following variables hide the left menu (to allow more screen real estate for the preview) and set a browser detection variable for later use. 

ViewBag.HideMenu = true;
bool isIE = Request.UserAgent.Contains("MSIE") || Request.UserAgent.Contains("Trident");

Body

The body of the page embeds an iframe to display the native PDF or the HTML preview, depending on document type.

<iframe 
  id="preview-frame"
  src="~/@("Record/" + @Model.Results[0].Uri + "/file/" + (record.Extension == "PDF" ? "document?inline" : "html"))"
  width='100%'
  height='100%'
  style="border:none; margin-left:10px; visibility:hidden;">
</iframe>

HTML head

The customhead section injects some CSS to tidy up the page layout.

@section customhead {
    <style>
        h2 {
            white-space: normal;
        }

        #contentcolumn {
            height: auto;
            padding-bottom: 0;
        }
    </style>
}

Scripts

In the scripts we:

• resize the preview IFRAME based on the window size, and
• hide the preview when the Links/Actions menu is displayed (in IE only) to prevent the menu displaying under the PDF.

@section scripts {
    <script>
        var resizePreview = function () {

            var previewFrame = $('#preview-frame');

            if (previewFrame) {

                previewFrame.show();
                previewFrame.css({ "visibility": "visible" });

                var previewOffSet = previewFrame.offset();
                if (previewOffSet) {
                    var height = $(window).height() - (previewOffSet.top + 5);
                    previewFrame.height(height);

                    var width = $(window).width() - 10;

                    if (width > 630) {
                        width = width - ($('#leftcolumn').width());
                    }
                    previewFrame.width(width);
                }
            }
        }
        $( document ).ready(function() {

            $(window).on("resize", function () {
                resizePreview();
            });
            
            @if (isIE && record.Extension == "PDF" ) {
            <text>$('.banner btn.dropdown-toggle').on("click", function () {
                $('#preview-frame').hide();
            });
            
            $(document).on("click", function () {
                $('#preview-frame').show();

            });</text>
            }
            resizePreview();        

        });
    </script>
}

Rationale for hiding the preview

The PDF is embedded via a plugin which does not follow the same rules as other HTML elements, in IE it seems to display always on top.  I chose the option to simply hide the preview as the simplest solution.  An alternate approach is to not display PDF as native but to display the HTML preview inside the IFRAME just as we do for other document types.  There may be other, better, ways to display the native PDF and also overlay the menu, feel free to let me know.