git.roojs.org Git - Pman.Core/blob - Pman.Preview.js

   1 //<script type="text/javascript">
   2
   3 /**
   4  *
   5  * singleton preview frame / object..
   6  *
   7  * -- has two objects
   8  * -- frame and obj
   9  * frame = handles doc's that can appear in frames
  10  * pdf = is for firefox - displaying PDF's and others????
  11  *
  12  */
  13
  14 Pman.Preview = {
  15
  16     frame  : false,
  17     pdf : false,
  18     imgDiv : false,
  19     active: false, // frame of pdf
  20     init : function()
  21     {
  22
  23         if (this.frame) { // already exists.
  24             return;
  25         }
  26
  27
  28         //var frm = this.layout.getEl().createChild({
  29         //        tag:'iframe',
  30         //        src: 'about:blank'});
  31         if (Roo.isGecko) {
  32             this.pdf = Ext.DomHelper.append(
  33                 document.body,
  34                 {
  35                     id : 'pdf-view',
  36                     tag: 'object',
  37                     type : 'application/pdf',
  38                     data : 'about:blank',
  39                     width : 200,
  40                     height :200,
  41                     style : 'position:absolute;top:-1000;left:-1000; z-index:-100',
  42                     cn : [
  43                         {
  44                             tag: 'param',
  45                             name : 'src',
  46                             value : 'about:blank'
  47                         }
  48                     ]
  49                 },
  50                 false
  51             );
  52
  53         }
  54         this.imgDiv =  Ext.DomHelper.append(
  55                 document.body,
  56                 {
  57                     tag:'div',
  58                     style : 'position:absolute;top:-1000;left:-1000; z-index:-100;' +
  59                         'overflow-x:hidden;overflow-y:scroll;width:200px; height: 200px;'
  60                 }
  61         );
  62
  63         this.frame =  Ext.DomHelper.append(
  64                 document.body,
  65                 {
  66                     tag:'iframe',
  67                     src: 'about:blank',
  68                     style : 'position:absolute;top:-1000;left:-1000; z-index:-100;' +
  69                         'width:1px; height: 1px;'
  70                 }
  71         );
  72
  73     },
  74     config : false,
  75
  76
  77     onResize : function()
  78     {
  79         if (this.active ) {
  80             this.active.style.zIndex = this.activeCfg ? this.activeCfg.zIndex : -100;
  81         }
  82
  83         //var pz = this.config.previewRegion.panelSize;
  84         //if (!pz) {
  85         //    return;
  86         //   }
  87         //if (pz.width < 10) {
  88         //    return;
  89         //}
  90         if (!this.config.previewRegion) {
  91             return;
  92         }
  93
  94
  95
  96         var pos = this.config.previewRegion.el.getBox();
  97         if (pos.width < 10) {
  98             return;
  99         }
 100
 101
 102         //var top = pos.y + (pos.height - pz.height);
 103         if (!this.active) {
 104             return;
 105         }
 106
 107         this.active.setAttribute( 'width',pos.width);
 108         this.active.setAttribute( 'height',pos.height);
 109         //if (!Ext.isIE) {
 110             this.active.style.width = pos.width + 'px';
 111             this.active.style.height = pos.height + 'px';
 112         //}
 113
 114         this.active.style.top = pos.y + 'px';
 115         this.active.style.left = pos.x + 'px';
 116
 117         /*
 118         this.active.setAttribute( 'width',pz.width);
 119         this.active.setAttribute( 'height',pz.height);
 120         //if (!Ext.isIE) {
 121             this.active.style.width = pz.width + 'px';
 122             this.active.style.height = pz.height + 'px';
 123         //}
 124
 125         this.active.style.top = top + 'px';
 126         this.active.style.left = pos.x + 'px';
 127         */
 128     },
 129
 130
 131
 132     unlink: function ()
 133     {
 134         // remove the listeners on that object...
 135         if (!this.config) {
 136             return;
 137         }
 138         if (this.config.dialog ) {
 139             this.config.dialog.un('hide', this.onHide, this);
 140         }
 141          if (this.config.tab) {
 142             this.config.tab.un('deactivate', this.onHide, this);
 143         }
 144         this.config.previewRegion.un('resized', this.onResize, this);
 145        // this.config.previewRegion.getSplitBar().un('beforeresize', this.disable, this);
 146         this.config = false;
 147     },
 148
 149     link: function(config)
 150     {
 151         // add the listener to the ownerDiv..
 152
 153         this.init();
 154         if (this.config) {
 155             this.unlink();
 156         }
 157         this.config = config;
 158         if (this.config.dialog) {
 159             this.config.dialog.on('hide', this.onHide, this);
 160         }
 161         if (this.config.tab) {
 162             this.config.tab.on('deactivate', this.onHide, this);
 163         }
 164
 165         this.config.previewRegion.on('resized', this.onResize, this);
 166         //this.config.previewRegion.getSplitBar().on('beforeresize', this.disable, this);
 167     },
 168
 169
 170     removeActive: function()
 171     {
 172         if (!this.active) {
 173             return;
 174         }
 175         this.active.style.left='-1000px';
 176         this.active.style.top='-1000px';
 177         this.active.style.width='200px';
 178         this.active.style.top='200px';
 179         this.active.style.zIndex= -100;
 180         this.active = false;
 181     },
 182
 183     onHide: function () {
 184         if (!this.active) {
 185             return;
 186         }
 187         this.removeActive();
 188         this.unlink();
 189     },
 190
 191     showPdf : function()
 192     {
 193         this.removeActive();
 194         this.activeCfg.url = this.activeCfg.pdfurl;
 195         this.activeCfg.mimetype = 'application/pdf';
 196         this.load(this.activeCfg);
 197     },
 198
 199     /**
 200      *
 201      * config args
 202      * url: load url
 203      * mimetype : load mimetype (needs more explaination)
 204      * pdfurl :
 205      * width : (for image)
 206      * height:  (for image)
 207      *
 208      */
 209     load : function(cfg)
 210     {
 211
 212         this.activeCfg = false;
 213         if (typeof(cfg) != 'object') {
 214             alert('Preview Load only accepts object with url/mimetype/zIndex as loader');
 215             return;
 216         }
 217         this.activeCfg = Roo.apply({},cfg);
 218         var    url = this.activeCfg.url;
 219         var    mimetype = this.activeCfg.mimetype;
 220
 221         this.removeActive();
 222         //this.enable();
 223
 224         switch (mimetype) {
 225
 226             case 'image/jpeg': // preview!!!!
 227                 // we need to show this in a floating div...
 228                 //var ps  = 100; //this.config.previewRegion.panelSize;
 229                 var ps = this.config.previewRegion.el.getBox();
 230
 231                 this.imgDiv.innerHTML = '<img src="' + url +'"' +
 232                     ' width="'+ (ps.width-15) + '"' +
 233                     ' qtip="'+ "Click to view PDF" + '"' +
 234                     ' ext:width="100"' +
 235                       ' onclick="Pman.Preview.showPdf();"/>';
 236                 this.active = this.imgDiv;
 237                 this.enable(this.activeCfg.zIndex);
 238                 return;
 239                 break;
 240
 241
 242             case 'application/pdf':
 243             case 'application/msword':
 244             case 'application/vnd.oasis.opendocument.text':
 245
 246             case 'application/vnd.ms-excel':
 247             case 'application/vnd.oasis.opendocument.spreadsheet':
 248             case 'application/vnd.dwg':
 249             case 'application/acad':
 250             case 'application/x-acad':
 251             case 'application/autocad_dwg':
 252             case 'image/x-dwg':
 253             case 'application/dwg':
 254             case 'application/x-dwg':
 255             case 'application/x-autocad':
 256             case 'image/vnd.dwg':
 257             case 'drawing/dwg':
 258
 259                 if (!url.match(/\.pdf$/)) {
 260                     url += '.pdf';
 261                 }
 262
 263                 if (!Roo.isGecko) {
 264
 265                     this.frame.src = url;
 266                     this.active = this.frame;
 267                     this.enable(this.activeCfg.zIndex);
 268                     return;
 269                 }
 270                 this.pdf.setAttribute( 'data',  url);
 271                // this.pdf.childNodes[0].setAttribute( 'src',  url);
 272                 this.active = this.pdf;
 273                 this.enable(this.activeCfg.zIndex);
 274                 return;
 275
 276             default:
 277                 this.frame.src =   url; ///'about:blank';
 278                 this.active = this.frame;
 279                 this.enable(this.activeCfg.zIndex);
 280                 return;
 281
 282
 283         }
 284
 285
 286     },
 287     disable: function()
 288     {
 289
 290         if (!this.active) {
 291             return;
 292         }
 293         this.disabled = true;
 294         this.active.style.zIndex = -100;
 295          if (!Roo.isGecko) {
 296             this.frame.src= 'about:blank';
 297          }
 298     },
 299     enable: function(zIndex)
 300     {
 301         if (!this.active) {
 302             return;
 303         }
 304         this.disabled = false;
 305
 306         this.active.style.zIndex = zIndex ? zIndex : 10000;
 307          if (!Roo.isGecko && this.activeCfg) {
 308             this.frame.src= this.activeCfg.url;
 309          }
 310
 311         this.onResize();
 312     },
 313     tmpStatus : false,
 314     tmpDisable : function()
 315     {
 316         if (this.disabled) {
 317             this.tmpStatus = false;
 318             return;
 319         }
 320         this.tmpStatus = true;
 321         this.disable();
 322     },
 323     tmpEnable: function()
 324     {
 325         if (!this.tmpStatus) {
 326             return;
 327         }
 328         this.tmpStatus = false;
 329         this.enable();
 330     }
 331
 332
 333 }