fabriciomurta/53451_loaderForPDF.aspx

## 53451_loaderForPDF.aspx
<script runat="server">
    private Window CreateWindow(string id)
    {
        Window win = new Window()
        {
            ID = id,
            Width = Unit.Pixel(1000),
            Height = Unit.Pixel(600),
            Modal = true,
            AutoRender = false,
            Collapsible = true,
            Maximizable = true,
            Hidden = true,
        };

        return win;
    }

    private Window CreateWindowUrl(string id, string url)
    {
        var win = CreateWindow(id);
        win.Title = "URL window: [" + HttpUtility.HtmlEncode(url) + "]";
        win.Loader = new ComponentLoader
        {
            LoadMask = { ShowMask = true },
            Listeners =
            {
                BeforeLoad = { Handler = "console.log('before load');" },
                Load = { Handler = "console.log('content loaded');" }
            },
            Url = url,
            Mode = LoadMode.Frame
        };

        return win;
    }

    private Window CreateWindowPDF(string id, string localPath)
    {
        var win = CreateWindow(id);
        win.Title = "PDF content";
        win.AutoScroll = true;
        win.Html = "<center><canvas id='pdfBody' style='border: solid 1px black' /></center>";
        win.AddListener("beforeShow", new JFunction { Fn = "loadPDF" });
        X.AddScript("win2PDFFileName = '../Content/testpaper.pdf';");
        return win;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        this.Form.Controls.Add(
            CreateWindowUrl("Window1", "http://www.ext.net"));
        this.Form.Controls.Add(
            CreateWindowPDF("Window2", "../Content/testpaper.pdf"));
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>IFrame's Loader "Load" listiner is not triggered when non-html content is loaded</title>
    <script src="js/pdf.js"></script>
    <script type="text/javascript">
        var loadPDF = function () {
            App.Window2.setLoading();
            PDFJS.getDocument(win2PDFFileName).then(function (pdf) {
                App.Window2.setLoading();
                console.log('loading pdf...');
                // Using promise to fetch the page
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);

                    // Prepare canvas using PDF page dimensions
                    var canvas = document.getElementById('pdfBody');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Fit window's width.
                    App.Window2.setWidth(canvas.width + 31); // reserve ScrollBar

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    // The promise to remove the loading mask once the file is loaded. :)
                    page.render(renderContext).promise.then(function () { App.Window2.setLoading(false); console.log('loaded pdf.'); } );
                });
            });
            App.Window2.setLoading(false);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />

        <ext:Button runat="server" Text="Html Content" Icon="Application">
            <Listeners>
                <Click Handler="#{Window1}.show(this);" />
            </Listeners>
        </ext:Button>

        <ext:Button runat="server" Text="Pdf Content" Icon="Application">
            <Listeners>
                <Click Handler="#{Window2}.show(this);" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
	<script runat="server">
	private Window CreateWindow(string id)
	{
	Window win = new Window()
	{
	ID = id,
	Width = Unit.Pixel(1000),
	Height = Unit.Pixel(600),
	Modal = true,
	AutoRender = false,
	Collapsible = true,
	Maximizable = true,
	Hidden = true,
	};

	return win;
	}

	private Window CreateWindowUrl(string id, string url)
	{
	var win = CreateWindow(id);
	win.Title = "URL window: [" + HttpUtility.HtmlEncode(url) + "]";
	win.Loader = new ComponentLoader
	{
	LoadMask = { ShowMask = true },
	Listeners =
	{
	BeforeLoad = { Handler = "console.log('before load');" },
	Load = { Handler = "console.log('content loaded');" }
	},
	Url = url,
	Mode = LoadMode.Frame
	};

	return win;
	}

	private Window CreateWindowPDF(string id, string localPath)
	{
	var win = CreateWindow(id);
	win.Title = "PDF content";
	win.AutoScroll = true;
	win.Html = "<center><canvas id='pdfBody' style='border: solid 1px black' /></center>";
	win.AddListener("beforeShow", new JFunction { Fn = "loadPDF" });
	X.AddScript("win2PDFFileName = '../Content/testpaper.pdf';");
	return win;
	}

	protected void Page_Load(object sender, EventArgs e)
	{
	this.Form.Controls.Add(
	CreateWindowUrl("Window1", "http://www.ext.net"));
	this.Form.Controls.Add(
	CreateWindowPDF("Window2", "../Content/testpaper.pdf"));
	}
	</script>

	<!DOCTYPE html>

	<html>
	<head runat="server">
	<title>IFrame's Loader "Load" listiner is not triggered when non-html content is loaded</title>
	<script src="js/pdf.js"></script>
	<script type="text/javascript">
	var loadPDF = function () {
	App.Window2.setLoading();
	PDFJS.getDocument(win2PDFFileName).then(function (pdf) {
	App.Window2.setLoading();
	console.log('loading pdf...');
	// Using promise to fetch the page
	pdf.getPage(1).then(function (page) {
	var scale = 1.5;
	var viewport = page.getViewport(scale);

	// Prepare canvas using PDF page dimensions
	var canvas = document.getElementById('pdfBody');
	var context = canvas.getContext('2d');
	canvas.height = viewport.height;
	canvas.width = viewport.width;

	// Fit window's width.
	App.Window2.setWidth(canvas.width + 31); // reserve ScrollBar

	var renderContext = {
	canvasContext: context,
	viewport: viewport
	};
	// The promise to remove the loading mask once the file is loaded. :)
	page.render(renderContext).promise.then(function () { App.Window2.setLoading(false); console.log('loaded pdf.'); } );
	});
	});
	App.Window2.setLoading(false);
	};
	</script>
	</head>
	<body>
	<form runat="server">
	<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />

	<ext:Button runat="server" Text="Html Content" Icon="Application">
	<Listeners>
	<Click Handler="#{Window1}.show(this);" />
	</Listeners>
	</ext:Button>

	<ext:Button runat="server" Text="Pdf Content" Icon="Application">
	<Listeners>
	<Click Handler="#{Window2}.show(this);" />
	</Listeners>
	</ext:Button>
	</form>
	</body>
	</html>