ldapsaisie/trunk/includes/js/LSsmoothbox.js

var LSsmoothbox = new Class({
    initialize: function(options) {
      this.labels = varLSdefault.LSjsConfig['LSsmoothbox_labels'];
      if (!$type(this.labels)) {
        this.labels = {
          close_confirm_text: 'Are you sure to want to close this window and lose all changes ?',
          validate:           'Validate'
        };
      }
      
      this.build();
      
      // Events
      $$('a.LSsmoothbox').each(function(el) {
        el.addEvent('click',this.clickA.bindWithEvent(this,el));
      },this);
      
      $$('img.LSsmoothbox').each(function(el) {
        el.addEvent('click',this.clickImg.bindWithEvent(this,el));
        el.setStyle('cursor','pointer');
      },this);
      
      // Fx
      this.fx = {
        over:      new Fx.Tween(this.over, {property: 'opacity', duration: 300, fps: 30}),
        winOpen:   new Fx.Morph(this.win, {duration: 500, fps: 30, transition: Fx.Transitions.Sine.easeOut, onStart: this.hideContent.bind(this), onComplete: this.displayContent.bind(this)}),
        winClose:  new Fx.Morph(this.win, {duration: 500, fps: 30, transition: Fx.Transitions.Sine.easeOut, onStart: this.hideContent.bind(this), onComplete: this.resetWin.bind(this)})
      };
      
      this.asNew(options);
      
      window.addEvent('resize', this.position.bind(this));
      window.addEvent('scroll', this.positionWhenScrolling.bind(this));
    },
    
    build: function() {
      this.over = new Element('div');
      this.over.setProperty('id','over-LSsmoothbox');
      this.over.setStyles({
        position: 'absolute',
        left: '0px',
        top: '0px',
        width: '100%',
        height: '100%',
        zIndex: 2,
        backgroundColor: '#000',
        opacity:          0
      });
      this.over.injectInside(document.body);
      
      this.win = new Element('div');
      this.win.setProperty('id','win-LSsmoothbox');
      this.win.injectInside(document.body);
      
      this.frame = new Element('div');
      this.frame.setProperty('id','frame-LSsmoothbox');
      
      this.frame.injectInside(this.win);
      
      this.closeBtn = new Element('span');
      this.closeBtn.setProperty('id','closeBtn-LSsmoothbox');
      this.closeBtn.injectInside(this.win);
      this.closeBtn.addEvent('click',this.closeConfirm.bind(this));
      
      this._displayValidBtn = false;
      this.validBtn = new Element('span');
      this.validBtn.setProperty('id','validBtn-LSsmoothbox');
      this.validBtn.set('html',this.labels.validate);
      this.validBtn.injectInside(this.win);
      this.validBtn.addEvent('click',this.valid.bindWithEvent(this,true));
    },
    
    asNew: function(options) {
      this._options = ($type(options))?option:{};
      
      if (this.img) {
        this.img.dispose();
        this.img.destroy();
        this.img=undefined;
      }
      
      // Listeners
      this.listeners = {
        close:    new Array(),
        valid:    new Array(),
        cancel:   new Array()
      };
            
      this._closeConfirm = true;
      this._closeConfirmOpened = 0;
      
      this._open=0;
      this._scrolling=0;
      
      this.openOptions = {};
      
      this.frame.empty();
    },
    
    position: function(){ 
      if (this._open==1) {
        this.overPosition();
        
        var endStyles = this.getEndStyles();
        this.fx.winOpen.start({
          width:    endStyles.width,
          height:   endStyles.height,
          top:      endStyles.top,
          left:     endStyles.left
        });
      }
    },
    
    positionWhenScrolling: function(oldValue) {
      if (this._scrolling==0||$type(oldValue)) {
        this._scrolling = 1;
        var current = window.getScrollTop().toInt();
        if (oldValue == current) {
          this.position();
          this._scrolling=0;
        }
        else {
          this.positionWhenScrolling.delay(200,this,current);
        }
      }
    },
    
    overPosition: function() {
      var h = window.getScrollHeight()+'px'; 
      var w = window.getScrollWidth()+'px'; 
      this.over.setStyles({
        top:    '0px',
        height: h,
        width:  w
      });
    },
    
    getStartStyles: function() {
      if (typeof(this.openOptions.startElement) != 'undefined') {
        var startStyles = {
          top:      this.openOptions.startElement.getCoordinates().top,
          left:     this.openOptions.startElement.getCoordinates().left,
          width:    this.openOptions.startElement.getStyle('width'),
          height:   this.openOptions.startElement.getStyle('height')
        };
      }
      else {
        var startStyles = {
          top:    '0px',
          left:   '0px',
          width:  '0px',
          height: '0px'
        };
      }
      return startStyles;
    },
    
    getEndStyles: function() {
      w = window.getWidth() * 0.9;
      if (this.openOptions.width && (this.openOptions.width<=w)) {
        w = this.openOptions.width;
      }
      
      h = window.getHeight() * 0.8;
      if (this.openOptions.height && (this.openOptions.height<=h)) {
        h = this.openOptions.height;
      }
      
      if (this.img) {
        var rH = h.toInt() / this.img.height;
        var rW = w.toInt() / this.img.width;
        if (rH > rW) {
          // W
          this.img.height = Math.floor(this.img.height*w.toInt()/this.img.width);
          h = this.img.height;
          this.img.width  = w.toInt();
        }
        else {
          // H
          this.img.width  = Math.floor(this.img.width * h.toInt()/this.img.height);
          w = this.img.width;
          this.img.height = h.toInt();
        }
      }
      
      var endStyles = {
        width:    w.toInt(),
        height:   h.toInt(),
        top:      ((window.getHeight()/2)-(h/2)-this.win.getStyle('border').toInt()+window.getScrollTop()).toInt(),
        left:     ((window.getWidth()/2)-(w/2)-this.win.getStyle('border').toInt()).toInt()
      };
      return endStyles;
    },
    
    
    open: function() {
      this._open=1;
      this.overPosition();
      this.fx.over.start(0.7);
      var startStyles = this.getStartStyles();
      var endStyles = this.getEndStyles();  
      
      this.win.setStyles(startStyles);

      this.fx.winOpen.setOptions({onComplete: this.displayContent.bind(this)});
      this.win.setStyle('display','block');
      this.fx.winOpen.start({
        width:    endStyles.width,
        height:   endStyles.height,
        top:      endStyles.top,
        left:     endStyles.left,
        opacity:  [0, 1]
      });
      [this.validBtn,this.closeBtn,this.frame].each(function(el){
        el.setStyle('display','block');
      },this);
    },
    
    hideContent: function() {
      this.validBtn.setStyle('visibility','hidden');
      this.frame.setStyle('visibility','hidden');
      this.closeBtn.setStyle('visibility','hidden');
    },
    
    displayContent: function() {
      if (this._displayValidBtn) {
        this.validBtn.setStyle('visibility','visible'); 
      }
      this.frame.setStyle('visibility','visible');
      this.closeBtn.setStyle('visibility','visible');
    },
    
    closeConfirm: function() {
      if (this._closeConfirm && this._displayValidBtn) {
        if (!this._closeConfirmOpened) {
          this._closeConfirmOpened = 1;
          this.confirmBox = new LSconfirmBox({
            text:           this.labels.close_confirm_text,
            startElement:   this.closeBtn,
            onConfirm:      this.cancel.bind(this),
            onClose:        (function(){this._closeConfirmOpened=0;}).bind(this)
          });
        }
      }
      else {
        this.cancel();
      }
    },
    
    valid: function() {
      this.close();
      this.fireEvent('valid');
    },
    
    cancel: function() {
      this.close();
      this.fireEvent('cancel');
    },
    
    close: function() {
      if (this._closeConfirm) {
        delete this.confirmBox;
      }
      
      var closeStyles = {
        width:    0,
        height:   0,
        top:      this.closeBtn.getTop(),
        left:     this.closeBtn.getLeft()
      };
      
      this.fx.over.cancel();
      this.fx.over.start(0);
      this.hideContent();
      this.fx.winClose.start({
        width:    closeStyles.width,
        height:   closeStyles.height,
        top:      closeStyles.top,
        left:     closeStyles.left,
        opacity:  [1, 0]
      });
      this._open=0;
      
      [this.validBtn,this.closeBtn,this.frame].each(function(el){
        el.setStyle('display','none');
      },this);
      
      this.fireEvent('close');
      
    },
    
    resetWin: function() {
      this.hideContent();
      this.win.setStyles(this.getStartStyles());
      
    },
    
    clickA: function(event,a) {
      new Event(event).stop();
      this.openURL(a.href,{startElement: a});
    },
    
    clickImg: function(event,img) {
      new Event(event).stop();
      this.openImg(img.src,{startElement: img});
    },
    
    resize: function() {
      var endStyles = this.getEndStyles();
      this.fx.winOpen.cancel();
      this.fx.winOpen.start({
        width:    endStyles.width,
        height:   endStyles.height,
        top:      endStyles.top,
        left:     endStyles.left,
        opacity:  [0, 1]
      });
    },
    
    load: function() {
      this.frame.empty();
      this.loadingImage = new Element('img');
      this.loadingImage.setProperty('src',varLSdefault.imagePath('loading.gif'));
      this.loadingImage.setProperty('id','loadingImage-LSsmoothbox');
      this.openOptions.width = 120;
      this.openOptions.height = 120;
      this.resize();
      this.openOptions.width = undefined;
      this.openOptions.height = undefined;
      this.loadingImage.injectInside(this.frame);
    },
    
    endLoad: function() {
      this.frame.empty();
    },
    
    openImg: function(src,openOptions) {
      this.hideValidBtn();
      this.openOptions=openOptions;
      this.open();
      this.load();
      this.img = new Asset.image(src, {onload: this.endLoadImg.bind(this)});
      this.img.addEvent('dblclick',this.closeConfirm.bind(this));
    },
    
    endLoadImg: function() {
      this.endLoad();
      this.resize();
      this.img.injectInside(this.frame);
    },

    displayValidBtn: function() {
      this._displayValidBtn = true;
    },

    hideValidBtn: function() {
      this._displayValidBtn = false;
    },

    openURL: function(href,openOptions) {
      this.load.bind(this)();
      var options = {
          method:       'post',
          update:       this.frame,
          url:          href,
          evalScripts:  true,
          onComplete:   (function(){varLSdefault.ajaxDisplayDebugAndError();this.resize()}).bind(this)
      };
      this.displayValidBtn();
      new Request.HTML(options).send();
      this.openOptions = openOptions;
      this.open();
    },
    
    openHTML: function(html,openOptions) {
      this.displayValidBtn();
      this.frame.set('html',html);
      this.openOptions = openOptions;
      this.open();
    },
    
    setOption: function(name,value) {
      this._options[name]=value;
    },
    
    addEvent: function(event,fnct) {
      if ($type(this.listeners[event])) {
        if ($type(fnct)=="function") {
          this.listeners[event].include(fnct);
        }
      }
    },
    
    fireEvent: function(event) {
      LSdebug('LSsmoothbox :: fireEvent('+event+')');
      if ($type(this.listeners[event])) {
        this.listeners[event].each(function(fnct) {
          try {
            fnct(this);
          }
          catch(e) {
            LSdebug('LSsmoothbox :: '+event+'() -> failed');
          }
        },this);
      }
    }
});
window.addEvent(window.ie ? 'load' : 'domready', function() {
  varLSsmoothbox = new LSsmoothbox();
});