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を叩くしかないかなあ。
まあそんな感じ。
うくく。
