include/showwin.js

   1 /*
   2         $Id$
   3
   4         This is a part of mkgallery.pl suite
   5         http://www.average.org/mkgallery/
   6
   7         Uses mootools (1.2) http://www.mootools.net/
   8         Uses slideshow http://www.phatfusion.net/slideshow/
   9 */
  10
  11 /*
  12         Hideable "fullscreen" Window for Slideshow
  13 */
  14
  15 var showWindow = new Class({
  16
  17         getOptions: function(){
  18                 return {
  19                         zIndex: 2,
  20                         container: document.body,
  21                         tohide: '',
  22                         onClick: $empty,
  23                         onKeypress: $empty,
  24                 }
  25         },
  26
  27         initialize: function(name,options){
  28                 this.setOptions(this.getOptions(), options);
  29
  30                 this.options.container = $(this.options.container);
  31                 this.options.tohide = $(this.options.tohide);
  32
  33                 this.container = new Element('div').addClass(name).
  34                 setProperties({
  35                         id: name,
  36                         name: name,
  37                 }).setStyles({
  38                         position: 'absolute',
  39                         left: '0px',
  40                         top: '0px',
  41                         width: '100%',
  42                         zIndex: this.options.zIndex,
  43                         overflow: 'hidden',
  44                         display: 'none'
  45                 }).addEvent('click', function(){
  46                         this.options.onClick()
  47                 }.bind(this)).addEvent('keypress', function(){
  48                         this.options.onKeypress()
  49                 }.bind(this)).injectInside(this.options.container);
  50
  51                 window.addEvent('resize', this.position.bind(this));
  52                 window.addEvent('scroll', this.position.bind(this));
  53         },
  54
  55         position: function(){
  56                 if(this.options.container == document.body){
  57                         this.w = window.getWidth();
  58                         this.h = window.getHeight();
  59                         this.s = window.getScrollTop();
  60                 }else{
  61                         var myCoords = this.options.container.getCoordinates();
  62                         this.w = myCoords.width;
  63                         this.h = myCoords.height;
  64                         this.s = myCoords.top;
  65                 }
  66                 this.container.setStyles({
  67                         top: this.s+'px',
  68                         height: this.h+'px'
  69                 })
  70         },
  71
  72         getCoordinates: function(){
  73                 return {
  74                         width: this.w,
  75                         height: this.h,
  76                         top: this.s,
  77                 };
  78         },
  79
  80         show: function(){
  81                 if (this.options.tohide) {
  82                         this.hiddenstyles = this.options.tohide.getStyles(
  83                                 'display'
  84                         );
  85                         this.options.tohide.setStyles({
  86                                 display: 'none',
  87                         });
  88                 }
  89                 this.bodystyles = document.body.getStyles(
  90                         'overflow', 'overflow-x', 'overflow-y'
  91                 );
  92                 document.body.setStyles({
  93                         overflow: 'hidden',
  94                         'overflow-x': 'hidden',
  95                         'overflow-y': 'hidden',
  96                 });
  97                 this.position();
  98                 this.container.setStyle('display', 'block');
  99         },
 100
 101         hide: function(){
 102                 if (this.options.tohide) {
 103                         this.options.tohide.setStyles(this.hiddenstyles);
 104                 }
 105                 document.body.setStyles(this.bodystyles);
 106                 this.container.setStyle('display', 'none');
 107         }
 108 })
 109 showWindow.implement(new Options);
 110