これを使います。
- Main_2.js
- iframe.js
Main_2.js
( function() {"use strict";
var host = document.location.host;
var protocol = document.location.protocol;
var baseuri = protocol + "//" + host + "/";
var targetDomain = ["vino-form.com", "vino-form.efolab.com"];
var pagePath = baseuri + "EFOLAB/_server/_pages";
var menuClassName = "menu";
var _outerContainer;
var _pageContaner;
var _subContainer;
var _footerContainer;
var _inquiryAssyContainer;
var _mainContainer;
var _contentsContainer;
var _menuAnchor;
var _iframe;
var _topContainer;
var SlideController;
var LoadingLayerController;
var AutoFontSpan;
var IframeController;
var ContainerController;
var LinkController;
var MenuAnchorEventHandler;
var FlickEventHandler;
var slideController;
var loadingLayerController;
var iframeController;
var containerController;
var subContainerLinkController;
var footerContainerLinkController;
var inquiryAssyContainerLinkController;
var iframeLinkController;
var menuAnchorEventHandler;
var flickEventHandler;
IframeController = function() {
};
IframeController.prototype = {
initialSetting : function() {
_iframe.style.visibility = "visible";
containerController.setContainerHeight();
loadingLayerController.off();
slideController.setOnOpenFunction(function() {
console.log("hoge");
iframeLinkController.setDisable();
console.log(iframeLinkController.enable);
});
slideController.setOnCloseFunction(function() {
iframeLinkController.setEnable();
});
window.scrollTo(0, 0);
try {
if (_iframe.contentDocument) {
iframeLinkController.set(_iframe.contentDocument.body);
}
} catch(e) {
console.log(e.stack);
}
},
handleEvent : function(event) {
console.log(event.type);
var json = JSON.parse(event.data);
if (json.height) {
_iframe.style.height = json.height + "px";
this.initialSetting();
} else if (json.flick) {
console.log(json.flick);
slideController.slideMenu(json.flick);
}
}
};
ContainerController = function() {
};
ContainerController.prototype = {
initialSetting : function() {
var elms = document.body.getElementsByTagName('span');
for (var i = 0; i < elms.length; i++) {
if (elms[i].getAttribute('size')) {
new AutoFontSpan(elms[i], elms[i].getAttribute('size'));
}
}
slideController.setOnOpenFunction(function() {
footerContainerLinkController.setDisable();
});
slideController.setOnCloseFunction(function() {
footerContainerLinkController.setEnable();
});
subContainerLinkController.set(_subContainer);
footerContainerLinkController.set(_footerContainer);
inquiryAssyContainerLinkController.set(_inquiryAssyContainer);
slideController.setFlickListener(_mainContainer);
},
setContainerHeight : function() {
_subContainer.style.height = 'auto';
_mainContainer.style.height = 'auto';
var subHeight = _subContainer.clientHeight;
var mainHeight = _mainContainer.clientHeight;
var currentHeight = (subHeight > mainHeight) ? subHeight : mainHeight;
_contentsContainer.style.height = currentHeight + 'px';
_subContainer.style.height = 'inherit';
_mainContainer.style.height = 'inherit';
},
handleEvent : function(event) {
console.log(event.type);
if (event.type === "load") {
this.initialSetting();
}
}
};
MenuAnchorEventHandler = function(sourceAnchor) {
this.sourceAnchor = sourceAnchor;
this.initialize();
};
MenuAnchorEventHandler.prototype = {
initialize : function() {
if ("ontouchstart" in window) {
this.sourceAnchor.addEventListener('touchstart', this, false);
this.sourceAnchor.addEventListener('touchend', this, false);
} else {
this.sourceAnchor.addEventListener('click', this, false);
}
},
handleEvent : function(event) {
switch(event.type) {
case "touchstart":
this.sourceAnchor.style.backgroundColor = "rgb(255,248,248)";
document.getElementById('menuTicker').style.display = "none";
break;
case "touchend":
this.sourceAnchor.style.backgroundColor = "white";
slideController.slideMenu();
break;
}
}
};
FlickEventHandler = function(sourceContainer) {
this.container = sourceContainer;
this.initialize();
};
FlickEventHandler.prototype = {
initialize : function() {
this.container.addEventListener('touchstart', this, false);
this.container.addEventListener('touchend', this, false);
},
handleEvent : function(event) {
console.log("FlickEventHandler");
console.log(event.type);
console.log(event.target);
switch(event.type) {
case "touchstart":
this.start = {
pageX : event.touches[0].pageX,
pageY : event.touches[0].pageY,
time : Number(new Date())
};
break;
case "touchend":
var deltaX = event.changedTouches[0].pageX - this.start.pageX;
var deltaY = event.changedTouches[0].pageY - this.start.pageY;
var deltaTime = Number(new Date()) - this.start.time;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if ( (deltaTime < 300) && (Math.abs(deltaX) > 30 )) {
console.log("Flick");
if (deltaX > 0) {
slideController.slideMenu("open");
} else {
slideController.slideMenu("close");
}
}
}
break;
}
}
};
AutoFontSpan = function(target, size) {
this.target = target;
this.size = size;
var self = this;
window.addEventListener('resize', function() {
self.setSize.call(self);
}, false);
this.setSize();
};
AutoFontSpan.prototype = {
BASE_RATIO : 1 / 360,
setSize : function() {
try {
this.target.style.fontSize = Math.round(document.documentElement.clientWidth * this.BASE_RATIO * this.size * 100) + '%';
} catch(e) {
alert(e);
}
}
};
var LinkController = function() {
this.container = undefined;
this.enable = true;
this.serial = Number(new Date());
};
LinkController.prototype = {
initialize : function() {
},
set : function(targetContainer) {
this.container = targetContainer;
var links = this.container.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var link = links[i];
if ("ontouchstart" in window) {
link.addEventListener('touchstart', this, false);
link.addEventListener('touchend', this, false);
} else {
link.addEventListener('click', this, false);
}
}
},
setEnable : function() {
this.enable = true;
},
setDisable : function() {
this.enable = false;
},
handleEvent : function(event) {
console.log("ページ遷移::event.type=" + event.type);
console.log(this);
var getAnchor = function(target) {
var anchor = undefined;
if (target.href) {
anchor = target;
} else {
anchor = getAnchor(target.parentNode);
};
return anchor;
};
if (event.type === "touchstart") {
this.start = {
pageX : event.touches[0].pageX,
pageY : event.touches[0].pageY,
time : Number(new Date())
};
}
if (event.type === "touchend") {
var deltaX = event.changedTouches[0].pageX - this.start.pageX;
var deltaY = event.changedTouches[0].pageY - this.start.pageY;
if (deltaY !== 0 || deltaX !== 0) {
console.log("scroll or flick");
return;
}
console.log("スクロールでもflickでもない");
console.log("this.enable=" + this.enable);
if (!this.enable) {
console.log('link disable');
console.log(event.target);
console.log(event.target.parentNode);
event.preventDefault();
return false;
}
slideController.closeSlide();
var isTel = function(anchor) {
console.log("---protocol振り分け:anchor.protocol === 'tel: ---'" + (anchor.protocol === "tel:"));
console.log("anchor.protocol=" + anchor.protocol);
return anchor.protocol === "tel:";
};
var isMenuLink = function(anchor) {
console.log("---menuからのリンク判定 : anchor.className===menuClassName ---" + (anchor.className === menuClassName));
console.log("className=" + anchor.className);
console.log("menuClassName=" + menuClassName);
return anchor.className === menuClassName;
};
var isDomain = function(anchor) {
console.log("--- 内部サイトかどうかの判別：anchor.host === host ---" + (anchor.host === host));
console.log("anchor.host =" + anchor.host);
console.log("host=" + host);
return anchor.host === host;
};
var isTargetDomain = function(anchor) {
var isTarget = false;
for (var i = 0; i < targetDomain.length; i++) {
console.log("--- 対象の他ドメインかどうかの判別：anchor.host === targetDomain[" + i + "] ---" + (anchor.host === targetDomain[i]));
console.log("anchor.host =" + anchor.host);
console.log("targetDomain[" + i + "]=" + targetDomain[i]);
if (anchor.host === targetDomain[i]) {
isTarget = true;
}
}
return isTarget;
};
var anchor = getAnchor(event.target);
anchor.style.color = "red";
console.log("----リンクの判別開始----");
if (isTel(anchor)) {
return;
}
event.preventDefault();
if (isDomain(anchor)) {
if (isMenuLink(anchor)) {
console.log("内部サイト：menuからのリンク：遷移先=" + pagePath + anchor.pathname);
_iframe.src = pagePath + anchor.pathname;
} else {
console.log("内部サイト：iframeからのリンク：遷移先=" + anchor.href);
_iframe.src = anchor.href;
}
_iframe.style.height = window.screen.height;
loadingLayerController.on();
} else {
if (isTargetDomain(anchor)) {
console.log("対象の他ドメイン");
loadingLayerController.on();
_iframe.style.height = window.screen.height;
var targetFile = anchor.getAttribute('href');
try {
_iframe.src = targetFile;
} catch(e) {
console.log(e.stack);
}
} else {
try {
console.log("対象外の他ドメイン:" + anchor.href);
location.href = anchor.href;
} catch(e) {
alert(e.stack);
}
}
}
if (anchor.onclick) {
console.log('onclickの属性を実行しました。');
anchor.onclick();
}
anchor.style.color = "gray";
}
},
};
var LoadingLayerController = function(wrapperContainer) {
this.wrapperContainer = wrapperContainer;
this.layer = undefined;
this.initialize();
};
LoadingLayerController.prototype = {
initialize : function() {
var screenHeight = window.screen.height;
var layer = document.createElement('div');
var innerDiv = document.createElement('div');
var img = document.createElement('img');
img.src = baseuri + "EFOLAB/_script/img/loading.gif";
var p = document.createElement('p');
p.textContent = "読み込み中...";
innerDiv.appendChild(img);
innerDiv.appendChild(p);
layer.appendChild(innerDiv);
innerDiv.style.textAlign = "center";
innerDiv.style.position = "fixed";
innerDiv.style.width = "100%";
innerDiv.style.top = (screenHeight) / 2;
layer.setAttribute("style", "position:absolute;z-index:30;width:100%;");
layer.style.backgroundColor = 'rgba(255,255,255,0.9)';
var wrapperContainerHeight = this.wrapperContainer.style.height;
layer.style.height = wrapperContainerHeight;
layer.style.display = "none";
this.wrapperContainer.appendChild(layer);
this.layer = layer;
},
on : function() {
var wrapperContainerHeight = this.wrapperContainer.style.height;
this.layer.style.height = wrapperContainerHeight;
this.layer.style.display = "block";
},
off : function() {
this.layer.style.display = "none";
}
};
var SlideController = function(slideContainer, wrapperContainer) {
this.slideContainer = slideContainer;
this.wrapperContainer = wrapperContainer;
this.wrapperContainer.width = undefined;
this.maxSlideRatio = 0.35;
this.maxSlideLeftPercent = this.maxSlideRatio * 100 + '%';
this.minSlideLeftPercent = '0%';
this.menuElement = undefined;
this.onCloseFunctions = [];
this.onOpenFunctions = [];
this.initialize();
};
SlideController.prototype = {
initialize : function() {
this.slideContainer.style.left = this.minSlideLeftPercent;
this.wrapperContainer.width = this.wrapperContainer.getBoundingClientRect().width;
},
setFlickListener : function(target) {
target.addEventListener('touchstart', this, false);
target.addEventListener('touchend', this, false);
},
setOnOpenFunction : function(func) {
this.onOpenFunctions.push(func);
},
setOnCloseFunction : function(func) {
this.onCloseFunctions.push(func);
},
toNumberFromPercent : function(percentText) {
try {
return parseFloat(percentText.split("%").join(""));
} catch(e) {
console.log(percentText + e);
}
},
slideMenu : function(order) {
switch (order) {
case "open":
this.openSlide();
break;
case "close":
this.closeSlide();
break;
default:
if (this.slideContainer.style.left === this.minSlideLeftPercent) {
this.openSlide();
} else if (this.slideContainer.style.left === this.maxSlideLeftPercent) {
this.closeSlide();
}
}
},
openSlide : function() {
this.slideContainer.style.left = this.maxSlideLeftPercent;
var funcs = this.onOpenFunctions;
for (var i = 0; i < funcs.length; i++) {
console.log("onOpenFunctions=" + funcs[i]);
funcs[i]();
}
},
closeSlide : function() {
this.slideContainer.style.left = this.minSlideLeftPercent;
var funcs = this.onCloseFunctions;
for (var i = 0; i < funcs.length; i++) {
console.log("onCloseFunctions=" + funcs[i]);
funcs[i]();
}
}
};
function boot() {
console.log('DOMContentLoaded');
_outerContainer = document.getElementById('outerContainer');
_pageContaner = document.getElementById('pageContainer');
_subContainer = document.getElementById('subContainer');
_footerContainer = document.getElementById('footerContainer');
_inquiryAssyContainer = document.getElementById('inquiryAssyContainer');
_mainContainer = document.getElementById('mainContainer');
_contentsContainer = document.getElementById('contentsContainer');
_menuAnchor = document.getElementById('menuAnchor');
_topContainer = document.getElementById('topContainer');
_iframe = document.getElementById('iframe');
containerController = new ContainerController();
iframeController = new IframeController();
slideController = new SlideController(_mainContainer, _contentsContainer);
subContainerLinkController = new LinkController();
footerContainerLinkController = new LinkController();
inquiryAssyContainerLinkController = new LinkController();
iframeLinkController = new LinkController();
loadingLayerController = new LoadingLayerController(_contentsContainer);
menuAnchorEventHandler = new MenuAnchorEventHandler(_menuAnchor);
flickEventHandler = new FlickEventHandler(_outerContainer);
window.addEventListener('load', containerController, false);
window.addEventListener('message', iframeController, false);
loadingLayerController.on();
}
try {
if (document.body) {
boot();
} else {
document.addEventListener('DOMContentLoaded', boot, false);
}
} catch(e) {
var retry = function() {
document.addEventListener('DOMContentLoaded', boot, false);
};
retry();
}
}());
iframe.js
( function() {"use strict";
var webMessaging = ( function() {
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
return {
send : function(message) {
var jsonMessage = JSON.stringify(message);
target.postMessage(jsonMessage, "*");
}
};
}());
var FlickEventHandler = function(sourceContainer) {
this.container = sourceContainer;
this.initialize();
};
FlickEventHandler.prototype = {
initialize : function() {
this.container.addEventListener('touchstart', this, false);
this.container.addEventListener('touchend', this, false);
},
handleEvent : function(event) {
console.log(event.type);
switch(event.type) {
case "touchstart":
this.start = {
pageX : event.touches[0].pageX,
pageY : event.touches[0].pageY,
time : Number(new Date())
};
break;
case "touchend":
var deltaX = event.changedTouches[0].pageX - this.start.pageX;
var deltaY = event.changedTouches[0].pageY - this.start.pageY;
var deltaTime = Number(new Date()) - this.start.time;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if ( (deltaTime < 300) && (Math.abs(deltaX) > 30 )) {
console.log("Flick from iframe");
var message = {};
if (deltaX > 0) {
message = {"flick":"open"};
} else {
message = {"flick":"close"};
}
webMessaging.send(message);
}
}
break;
}
}
};
var AutoFontSpan = function(target, size) {
this.target = target;
this.size = size;
var self = this;
window.addEventListener('resize', function() {
self.resize.call(self);
}, false);
this.setSize();
};
AutoFontSpan.prototype = {
BASE_RATIO : 1 / 360,
setSize : function() {
try {
this.target.style.fontSize = Math.round(document.documentElement.clientWidth * this.BASE_RATIO * this.size * 100) + '%';
} catch(e) {
alert(e);
}
},
resize : function(event) {
this.setSize();
}
};
function init() {
var elms = document.getElementsByTagName('span');
for (var i = 0; i < elms.length; i++) {
if (elms[i].getAttribute('size')) {
new AutoFontSpan(elms[i], elms[i].getAttribute('size'));
}
}
new FlickEventHandler(document.body);
var message = {
"height" : document.body.scrollHeight
};
webMessaging.send(message);
}
window.addEventListener('load', init, false);
window.addEventListener('message', function(event) {
}, false);
}());
