fileviewer/js/ViewerPanel.js

Ext.namespace('Zarafa.plugins.fileviewer');

/**
 * @class Zarafa.plugins.fileviewer.ViewerPanel
 * @extends Ext.Panel
 * @xtype fileviewer.viewerpanel
 *
 * The main panel which contains the iframe to display a PDF or ODF document.
 */
Zarafa.plugins.fileviewer.ViewerPanel = Ext.extend(Ext.Panel, {
	/**
	 * @cfg {String} viewerjsPath Path to the ViewerJS installation.
	 * This is a relative path starting from the plugin root.
	 */
	viewerjsPath: 'external/ViewerJS/index.html#',

	/**
	 * @cfg {String} src The Iframe source. This will be applied if no record is set.
	 * If a records was passed to this panel, the return value of the "getInlineImageUrl" function
	 * will be used.
	 */
	src: '',

	/**
	 * @cfg {String} title The panel title. This will be applied if no record is set.
	 * If a records was passed to this panel, the "name" or "filename" property of the record
	 * will be used.
	 */
	title: '',

	/**
	 * @cfg {Boolean|Ext.Component} autoResize This flag specifies if the panel gets automatically resized if the window size has changed.
	 * If it is set to true the panel will listen on the Window update event. Otherwise it will listen to the component
	 * resize event.
	 * Defaults to false.
	 */
	autoResize: false,

	/**
	 * @cfg {Number} defaultScale The default scaling of the panel.
	 * Defaults to 0.8 meaning 80% of the browser width.
	 */
	defaultScale: 0.8,

	/**
	 * @constructor
	 * @param config
	 */
	constructor: function (config) {
		config = config || {};

		if (Ext.isDefined(config.record)) {
			this.src = this.getIframeURL(config.record.getInlineImageUrl());
			this.title = config.record.get('name') || config.record.get('filename');
		} else {
			this.src = config.src;
			this.title = config.title;
		}

		if (Ext.isDefined(config.autoResize)) {
			this.autoResize = config.autoResize;
		} else {
			this.autoResize = false;
		}

		if (Ext.isDefined(config.defaultScale)) {
			this.defaultScale = config.defaultScale;
		} else {
			this.defaultScale = 0.8;
		}

		Ext.applyIf(config, {
			xtype : 'fileviewer.viewerpanel',
			layout: 'anchor',
			anchor: '100%',
			items : [{
				xtype : 'component',
				autoEl: {
					tag            : 'iframe',
					src            : this.src,
					style          : {
						width : '100%',
						height: '100%'
					},
					frameborder    : 0,
					allowfullscreen: true
				}
			}],
			title : this.title,
			header: false,
			height: Ext.getBody().getViewSize().height * this.defaultScale,
			width : Ext.getBody().getViewSize().width * this.defaultScale
		});

		Zarafa.plugins.fileviewer.ViewerPanel.superclass.constructor.call(this, config);
	},

	/**
	 * Initializes the events. This function is called during rendering of the panel.
	 * @private
	 */
	initEvents: function () {
		if (this.autoResize === true) {
			Ext.EventManager.onWindowResize(this.resizePanel, this);
		} else if(this.autoResize !== false) {
			this.autoResize.on('resize', this.resizePanel, this);

			// save old autoscroll value and disable autoscrolling
			if(Ext.isDefined(this.autoResize.autoScroll)) {
				this.autoResize.initialAutoScrollValue = this.autoResize.autoScroll;
				this.autoResize.setAutoScroll(false);
			}
		}
	},

	/**
	 * Removes the resize event listener. This function is called when the panel gets destroyed.
	 * @private
	 */
	onDestroy: function () {
		if (this.autoResize === true) {
			Ext.EventManager.removeResizeListener(this.resizePanel, this);
		} else if(this.autoResize !== false) {
			this.autoResize.un('resize', this.resizePanel, this);

			// re-enable autoscrolling if it was enabled before
			if(Ext.isDefined(this.autoResize.autoScroll)) {
				this.autoResize.setAutoScroll(this.autoResize.initialAutoScrollValue);
			}
		}

		Zarafa.plugins.fileviewer.ViewerPanel.superclass.onDestroy.call(this, arguments);
	},

	/**
	 * This functions resizes the panel to the given width. It will be called on the resize event if autoResize is enabled.
	 *
	 * @param {Number} width The window width.
	 * @param {Number} height The window height.
	 * @private
	 */
	resizePanel: function (width, height) {
		// the element event will pass more arguments
		// than the window resize event
		if(arguments.length > 2) {
			var autoResizeElement = arguments[0];
			width = autoResizeElement.getInnerWidth();
			height = autoResizeElement.getInnerHeight();
		}
		this.setWidth(width * this.defaultScale);
		this.setHeight(height * this.defaultScale);

		// center the panel
		if (this.ownerCt instanceof Ext.Window) {
			this.ownerCt.center();
		}
	},

	/**
	 * Generate the complete Iframe URL including the ViewerJS path.
	 *
	 * @param {String} url The inline url of the attachment to view.
	 * @returns {string}
	 */
	getIframeURL: function (url) {
		var pluginRoot = container.getBasePath() + 'plugins/fileviewer/';

		return pluginRoot + this.viewerjsPath + url;
	}
});

Ext.reg('fileviewer.viewerpanel', Zarafa.plugins.fileviewer.ViewerPanel);