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);