Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

LITBoxでiframeを使う

んー本来はあくまでダイアログチックな位置付けなのでアレなんだけど。
ダイアログ内で遷移したい人とかjava屋さんの感覚だとちっこい登録画面なんだけどvalidatorが必要なんだよねー、エラーメッセージもこんなか出したいよねーって場合が多々あると思う。
でだ
てきとー。

LITBox = Class.create();
LITBox.prototype = {
   initialize: function(mes){
   this.mes = mes;
   this.options = Object.extend({
      width: 600,
      height: 500,
      type: 'window',
      func: null,
      draggable: true,
      resizable: true,
      overlay: true,
      opacity: 1,
      left: false,
      top: false
   }, arguments[1] || {});
   this.setup();
   },
   setup: function(){
      this.rn = ( Math.floor ( Math.random ( ) * 100000000 + 1 ) );
      this.getWindow();
      switch(this.options.type){
         case 'window' : this.iframe.setAttribute('src', this.mes);
            break;
         case 'alert' : this.d4.innerHTML = this.mes;
            break;
         case 'confirm' : this.d4.innerHTML = '<p>' + this.mes + '</p>';
            this.button_y = document.createElement('input');
            this.button_y.type='button';
            this.button_y.value='Yes';
            this.d4.appendChild(this.button_y);
            this.button_y.d= this.d; this.button_y.d2 = this.d2;
            this.button_y.temp = this.options.func;
            this.button_y.onclick=this.remove;
            this.button_n = document.createElement('input');
            this.button_n.type='button';
            this.button_n.value='No';
            this.d4.appendChild(this.button_n);
            this.button_n.d= this.d; this.button_n.d2 = this.d2;
            this.button_n.onclick=this.remove;
      }
      this.display();
   },
   getWindow: function(){
      this.over = null;
      
      
      if(this.options.overlay == true){
      this.d = document.createElement('div');
      document.body.appendChild(this.d);
      this.d.className = 'LB_overlay';   
      this.d.style.display = 'block';
      this.d.onclick=this.remove;
      }
      this.d2 = document.createElement('div');
      document.body.appendChild(this.d2);
      this.d2.className = 'LB_window';
      this.d2.style.height = parseInt(this.options.height) + 'px';

      this.d3 = document.createElement('div');
      this.d2.appendChild(this.d3);
      this.d3.className='LB_closeAjaxWindow';
      this.d3.d2 = this.d2;
      this.d3.over = this.over;
      this.d3.options = this.options;
      this.d3.onmouseover=this.getDraggable;
      this.d3.onmouseout=this.dropDraggable;
      this.close = document.createElement('a');
      this.d3.appendChild(this.close);
      this.close.d = this.d;
      this.close.d2 = this.d2;
      this.close.onclick=this.remove;
      this.close.href='#';
      this.close.innerHTML='Close';

      this.iframe = document.createElement('iframe');
      this.iframe.style.height = parseInt(this.options.height) -30 + 'px';
      this.iframe.style.width = parseInt(this.options.width) -2 + 'px';

      this.iframe.marginWidth = '0px';
      this.iframe.marginTop = '0px';
      
      this.iframe.style.borderStyle = 'none';
      this.iframe.frameBorder = 0;
      this.iframe.setAttribute('frameBorder',0);
      this.iframe.setAttribute('scrolling','auto');

      this.d2.appendChild(this.iframe);      
      this.clear = document.createElement('div');      
      this.d2.appendChild(this.clear);
      this.clear.style.clear='both';
      if(this.options.resizable){
      this.d5 = document.createElement('div');
      this.d2.appendChild(this.d5);
      this.d5.className='LB_resize';
      this.d5.d2 = this.d2;
      this.d5.over = this.over;
      this.d5.options = this.options;
      this.d5.onmouseover=this.getResizer;
      this.d5.onmouseout=this.dropResizer;
      }
      if(this.options.overlay == true){
      this.d.d = this.d;
      this.d.d2 = this.d2;
      }
   },
   getDraggable: function(){
      if(this.options.draggable){
      if(this.resize)this.resize.destroy();
      if(!this.drag || (this.drag && !this.drag.dragging))
      this.drag = new Draggable(this.d2,{});
      }
   },
   getResizer: function(){
      if(this.options.resizable){
      if(this.drag)this.drag.destroy();
      if(!this.resize || (this.resize && !this.resize.dragging))
      this.resize = new Resizer(this.d2,{});
      }
   },
   dropDraggable: function(){
      if(this.options.draggable){
      if(!this.drag.dragging && this.drag){
      this.drag.destroy();
      }}
   },
   dropResizer: function(){
      if(this.options.resizable){
      if(!this.resize.dragging && this.resize){
      this.resize.destroy();
      }}
   },
   display: function(){
      Element.setOpacity(this.d2, 0);
      this.position();
      new Effect.Opacity(this.d2, {from:0,to:this.options.opacity,duration:.5});
   },
   position: function(){
      var de = document.documentElement;
   	var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
   	var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
   
   
     	if (window.innerHeight && window.scrollMaxY) {	
   		yScroll = window.innerHeight + window.scrollMaxY;
   	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
   		yScroll = document.body.scrollHeight;
   	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
   		yScroll = document.body.offsetHeight;
     	}
      this.d2.style.width = this.options.width + 'px';
      this.d2.style.display = 'block';
      if(!this.options.left || this.options.left < 0){
   	this.d2.style.left = ((w - this.options.width)/2)+"px";
      }else{
      this.d2.style.left=parseInt(this.options.left)+'px';
      }
   	
      var pagesize = this.getPageSize();
      var arrayPageScroll = this.getPageScrollTop();
   	if(this.d2.offsetHeight > h - 100){
         if(!this.options.top || this.options.top < 0){
   		this.d2.style.top = "45px";
         }else{
         this.d2.style.top=parseInt(this.options.top)+'px';
         }
   		this.d2.style.height=h-100 + 'px';
   		//this.d4.style.height=h-145 + 'px';
   		//this.d4.style.overflow ='auto';
   		this.iframe.style.overflow ='auto';
   	} else {   
         if(!this.options.top || this.options.top < 0){
   		this.d2.style.top = (arrayPageScroll[1] + ((pagesize[1]-this.d2.offsetHeight)/2))+"px";
         }else{
         this.d2.style.top=parseInt(this.options.top)+'px';
         }
   	}
   	if(this.d){this.d.style.height =   yScroll +"px";}
   },
   remove: function(){
      if(this.temp) this.temp();
   	new Effect.Opacity(this.d2, {from:1,to:0,duration:.5});
   	if(this.d){new Effect.Opacity(this.d, {from:.6,to:0,duration:.5});
   	Element.remove(this.d);}
      Element.remove(this.d2);
      return false;
   },
   parseQuery: function(query){
      var Params = new Object ();
      if ( ! query ) return Params; // return empty object
      var Pairs = query.split(/[;&]/);
      for ( var i = 0; i < Pairs.length; i++ ) {
         var KeyVal = Pairs[i].split('=');
         if ( ! KeyVal || KeyVal.length != 2 ) continue;
         var key = unescape( KeyVal[0] );
         var val = unescape( KeyVal[1] );
         val = val.replace(/\+/g, ' ');
         Params[key] = val;
      }
      return Params;
   },
   getPageScrollTop: function(){
      var yScrolltop;
      if (self.pageYOffset) {
         yScrolltop = self.pageYOffset;
      } else if (document.documentElement && document.documentElement.scrollTop){    // Explorer 6 Strict
         yScrolltop = document.documentElement.scrollTop;
      } else if (document.body) {// all other Explorers
         yScrolltop = document.body.scrollTop;
      }
      arrayPageScroll = new Array('',yScrolltop) 
      return arrayPageScroll;
   },
   getPageSize: function(){
      var de = document.documentElement;
      var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
      var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
      
      arrayPageSize = new Array(w,h) 
      return arrayPageSize;
   },
   getAjax: function(url){
      var xmlhttp=false;
      /*@cc_on @*/
      /*@if (@_jscript_version >= 5)
      // JScript gives us Conditional compilation, we can cope with old IE versions.
      // and security blocked creation of the objects.
        try {     
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
         try {       
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (E) {
          xmlhttp = false;
         }  
        }   
      @end @*/
      if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp = new XMLHttpRequest();
      if(xmlhttp.overrideMimeType) xmlhttp.overrideMimeType('text/xml');
      if(url != ""){
         xmlhttp.open("GET", url, false);
         xmlhttp.send(null);
         return xmlhttp.responseText;
      }
   }

}


var Resizers = {
  drags: [],
  observers: [],
  
  register: function(draggable) {
    if(this.drags.length == 0) {
      this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
      this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
      this.eventKeypress  = this.keyPress.bindAsEventListener(this);
      
      Event.observe(document, "mouseup", this.eventMouseUp);
      Event.observe(document, "mousemove", this.eventMouseMove);
      Event.observe(document, "keypress", this.eventKeypress);
    this.drags.push(draggable);

    }
  },
  
  unregister: function(draggable) {
    this.drags = this.drags.reject(function(d) { return d==draggable });
    if(this.drags.length == 1){this.drags.pop();}
    if(this.drags.length == 0) {
      Event.stopObserving(document, "mouseup", this.eventMouseUp);
      Event.stopObserving(document, "mousemove", this.eventMouseMove);
      Event.stopObserving(document, "keypress", this.eventKeypress);
    }
  },
  
  activate: function(draggable) {
    window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
    this.activeDraggable = draggable;
  },
  
  deactivate: function() {
    this.activeDraggable = null;
  },
  
  updateDrag: function(event) {
    if(!this.activeDraggable) return;
    var pointer = [Event.pointerX(event), Event.pointerY(event)];
    // Mozilla-based browsers fire successive mousemove events with
    // the same coordinates, prevent needless redrawing (moz bug?)
    if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
    this._lastPointer = pointer;
    this.activeDraggable.updateDrag(event, pointer);
  },
  
  endDrag: function(event) {
    if(!this.activeDraggable) return;
    this._lastPointer = null;
    this.activeDraggable.endDrag(event);
    this.activeDraggable = null;
  },
  
  keyPress: function(event) {
    if(this.activeDraggable)
      this.activeDraggable.keyPress(event);
  },
  
  addObserver: function(observer) {
    this.observers.push(observer);
    this._cacheObserverCallbacks();
  },
  
  removeObserver: function(element) {  // element instead of observer fixes mem leaks
    this.observers = this.observers.reject( function(o) { return o.element==element });
    this._cacheObserverCallbacks();
  },
  
  notify: function(eventName, draggable, event) {  // 'onStart', 'onEnd', 'onDrag'
    if(this[eventName+'Count'] > 0)
      this.observers.each( function(o) {
        if(o[eventName]) o[eventName](eventName, draggable, event);
      });
  },
  
  _cacheObserverCallbacks: function() {
    ['onStart','onEnd','onDrag'].each( function(eventName) {
      Resizers[eventName+'Count'] = Resizers.observers.select(
        function(o) { return o[eventName]; }
      ).length;
    });
  }
}


var Resizer = Class.create();
Resizer.prototype = {
  initialize: function(element) {
  	this.offset = Array();
    var options = Object.extend({
      handle: false,
      
      reverteffect: function(element, top_offset, left_offset) {
        var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
        element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
      },
      
      zindex: 1000,
      revert: false,
      scroll: false,
      scrollSensitivity: 20,
      scrollSpeed: 15,
      snap: false   // false, or xy or [x,y] or function(x,y){ return [x,y] }
    }, arguments[1] || {});
    this.element = $(element);
    
    if(options.handle && (typeof options.handle == 'string')) {
      var h = Element.childrenWithClassName(this.element, options.handle, true);
      if(h.length>0) this.handle = h[0];
    }
    if(!this.handle) this.handle = $(options.handle);
    if(!this.handle) this.handle = this.element;
    
    if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML)
      options.scroll = $(options.scroll);

    Element.makePositioned(this.element); // fix IE    

    this.delta    = this.currentDelta();
    this.options  = options;
    this.dragging = false;   

    this.oHeight = parseInt(this.element.style.height);
    this.oWidth = parseInt(this.element.style.width);

    this.eventMouseDown = this.initDrag.bindAsEventListener(this);
    Event.observe(this.handle, "mousedown", this.eventMouseDown);
    
    Resizers.register(this);
  },
  
  destroy: function() {
    Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
    Resizers.unregister(this);
  },
  
  currentDelta: function() {
    return([
      parseInt(Element.getStyle(this.element,'width') || '0'),
      parseInt(Element.getStyle(this.element,'height') || '0')]);
  },
  
  initDrag: function(event) {
    if(Event.isLeftClick(event)) {    
      // abort on form elements, fixes a Firefox issue
      var src = Event.element(event);
      if(src.tagName && (
        src.tagName=='INPUT' ||
        src.tagName=='SELECT' ||
        src.tagName=='OPTION' ||
        src.tagName=='BUTTON' ||
        src.tagName=='TEXTAREA')) return;
        
      if(this.element._revert) {
        this.element._revert.cancel();
        this.element._revert = null;
      }
      
      var pointer = [Event.pointerX(event), Event.pointerY(event)];
      var pos     = Position.cumulativeOffset(this.element);

      this.offset[0] = pointer[0];
      this.offset[1] = pointer[1];
      Resizers.activate(this);
      Event.stop(event);
    }
  },
  
  startDrag: function(event) {
    this.dragging = true;
    
    if(this.options.zindex) {
      this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
      this.element.style.zIndex = this.options.zindex;
    }
    
    if(this.options.ghosting) {
      this._clone = this.element.cloneNode(true);
      Position.absolutize(this.element);
      this.element.parentNode.insertBefore(this._clone, this.element);
    }
    
    
    Resizers.notify('onStart', this, event);
    if(this.options.starteffect) this.options.starteffect(this.element);
  },
  
  updateDrag: function(event, pointer) {
    if(!this.dragging) this.startDrag(event);
    Position.prepare();
    Resizers.notify('onDrag', this, event);
    this.draw(pointer);
    if(this.options.change) this.options.change(this);
    
    if(this.options.scroll) {
      this.stopScrolling();
      
      var p;
      if (this.options.scroll == window) {
        with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
      } else {
        p = Position.page(this.options.scroll);
        p[0] += this.options.scroll.scrollLeft;
        p[1] += this.options.scroll.scrollTop;
        p.push(p[0]+this.options.scroll.offsetWidth);
        p.push(p[1]+this.options.scroll.offsetHeight);
      }
      var speed = [0,0];
      if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
      if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
      if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
      if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
      this.startScrolling(speed);
    }
    
    // fix AppleWebKit rendering
    if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
    Event.stop(event);
  },
  
  finishDrag: function(event, success) {
    this.dragging = false;

    if(this.options.ghosting) {
      Position.relativize(this.element);
      Element.remove(this._clone);
      this._clone = null;
    }

    Resizers.notify('onEnd', this, event);

    var revert = this.options.revert;
    if(revert && typeof revert == 'function') revert = revert(this.element);
    
    var d = this.currentDelta();
    if(revert && this.options.reverteffect) {
      this.options.reverteffect(this.element, 
        d[1]-this.delta[1], d[0]-this.delta[0]);
    } else {
      this.delta = d;
    }

    //if(this.options.zindex)
      this.element.style.zIndex = this.originalZ;

    if(this.options.endeffect) 
      this.options.endeffect(this.element);

    Resizers.deactivate(this);
    //Resizers.reset();
  },
  
  keyPress: function(event) {
    if(event.keyCode!=Event.KEY_ESC) return;
    this.finishDrag(event, false);
    Event.stop(event);
  },
  
  endDrag: function(event) {
    if(!this.dragging) return;
    this.stopScrolling();
    this.finishDrag(event, true);
    Event.stop(event);
    this.oWidth = parseInt(this.element.style.width);
    this.oHeight = parseInt(this.element.style.height);
  },
  
  draw: function(point) {
    var pos = Position.cumulativeOffset(this.element);
    var d = this.currentDelta();
    pos[0] -= d[0]; pos[1] -= d[1];
    var p = new Array();
  
    p[0] = this.oWidth + point[0] - this.offset[0];
    p[1] = this.oHeight + point[1] - this.offset[1];
    
    var style = this.element.style;
    if((!this.options.constraint) || (this.options.constraint=='horizontal')){
//      style.width = p[0] + "px"; this.element.d4.style.width = p[0] + 'px';}
//      style.width = p[0] + "px"; this.element.iframe.style.width = p[0] + 'px';
    }
    if((!this.options.constraint) || (this.options.constraint=='vertical')){
//      style.height  = p[1] + "px"; this.element.d4.style.height = p[1]-30 + 'px';}
//      style.height  = p[1] + "px"; this.element.iframe.style.height = p[1]-30 + 'px';
    }
    if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering

  },
  
  stopScrolling: function() {
    if(this.scrollInterval) {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
      Resizers._lastScrollPointer = null;
    }
  },
  
  startScrolling: function(speed) {
    this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
    this.lastScrolled = new Date();
    this.scrollInterval = setInterval(this.scroll.bind(this), 10);
  },
  
  scroll: function() {
    var current = new Date();
    var delta = current - this.lastScrolled;
    this.lastScrolled = current;
    if(this.options.scroll == window) {
      with (this._getWindowScroll(this.options.scroll)) {
        if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
          var d = delta / 1000;
          this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
        }
      }
    } else {
      this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
      this.options.scroll.scrollTop  += this.scrollSpeed[1] * delta / 1000;
    }
    
    Position.prepare();
    Resizers.notify('onDrag', this);
    Resizers._lastScrollPointer = Resizers._lastScrollPointer || $A(Resizers._lastPointer);
    Resizers._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
    Resizers._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
    if (Resizers._lastScrollPointer[0] < 0)
      Resizers._lastScrollPointer[0] = 0;
    if (Resizers._lastScrollPointer[1] < 0)
      Resizers._lastScrollPointer[1] = 0;
    this.draw(Resizers._lastScrollPointer);
    
    if(this.options.change) this.options.change(this);
  },
  
  _getWindowScroll: function(w) {
    var T, L, W, H;
    with (w.document) {
      if (w.document.documentElement && documentElement.scrollTop) {
        T = documentElement.scrollTop;
        L = documentElement.scrollLeft;
      } else if (w.document.body) {
        T = body.scrollTop;
        L = body.scrollLeft;
      }
      if (w.innerWidth) {
        W = w.innerWidth;
        H = w.innerHeight;
      } else if (w.document.documentElement && documentElement.clientWidth) {
        W = documentElement.clientWidth;
        H = documentElement.clientHeight;
      } else {
        W = body.offsetWidth;
        H = body.offsetHeight
      }
    }
    return { top: T, left: L, width: W, height: H };
  }
}

ダイアログ内から自分自身を閉じるには

function closeSelf(){
	if(window.parent){
		window.parent['win'].remove();
	}
}

で終わり。
処理終了後、自動で閉じたいとかって場合は遷移後の画面でcloseを叩くしかないかなあ。
まあそんな感じ。
うくく。