fadePage.js

fadePage.js

;(function(window,config){

		function deleteVendor(vendor){
			var re       = /^webkit|^moz|^ms|^O/g,
				str      = vendor,
				noVendor = str.replace(re, "");

			return noVendor.toLowerCase();
		}

		function ieFixLoop(ieFix){

			var arr      = ieFix.arr,
				prop     = ieFix.prop,
				value    = ieFix.value,
				selector;

			for (var i = 0; i < arr.length; i++) {
				selector = arr[i];

				if(!document.querySelector(selector)){
					return;
				}

				var noVendor = deleteVendor(prop);
				document.querySelector(selector).style[prop] = value;
				document.querySelector(selector).style[noVendor] = value;

			}

		}

		function fadePage(config){


			var options = {
				'duration': 1000,
				'smp'     : false,
				'selector': []
			},

				vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
						(/firefox/i).test(navigator.userAgent) ? 'moz' :
						(/trident/i).test(navigator.userAgent) ? 'ms' :
						'opera' in window ? 'O' : '';

			for (var i in config) {

				if (!options.hasOwnProperty(i)) {
					continue;
				}

				options[i] = config[i];
			}

			if(!options.smp&&/iPhone|iPad|iPod|Android/.test(navigator.userAgent)){
				return;
			}


			document.body.style.visibility ='hidden';
			document.body.style.opacity =0;


			ieFixLoop({
				'arr'  : options.selector,
				'prop' : 'opacity',
				'value': 0
			});

			window.addEventListener('load', function(){

				setTimeout(function(){
					document.body.style[vendor+'Transition'] = 'all ' + options.duration*0.5*0.001 + 's ease-in';
					document.body.style['transition'] = 'all ' + options.duration*0.5*0.001 + 's ease-in';

					ieFixLoop({
						'arr'  : options.selector,
						'prop' : vendor+'Transition',
						'value': 'all ' + options.duration*0.5*0.001 + 's ease-in'
					});

					document.body.style.visibility ='';

				}, options.duration*0.5);

				setTimeout(function(){
					document.body.style.opacity =1;

					ieFixLoop({
						'arr'  : options.selector,
						'prop' : 'opacity',
						'value': 1
					});


				}, options.duration);
			}, false);
		}

		window.addEventListener('DOMContentLoaded', function(){

				fadePage(config);

		}, false);


		function clickFade(e,config){



			var targetURL    = e.target.href,
				targetAnchor = e.target,
				thisURL      = location.href,

				options = {
					'duration': 1000,
					'smp'     : false,
					'selector': [],
					'noClass' : [],
					'noData'  : []
				};


			for (var i in config) {

				if (!options.hasOwnProperty(i)) {
					continue;
				}

				options[i] = config[i];
			}


			function checkClass(className){

				var checked = false,
					targetClass = className.split(' ');

				for (var i = 0; i < targetClass.length; i++) {

					options.noClass.indexOf(targetClass[i]);

					if(options.noClass.indexOf(targetClass[i]) > -1){

						checked = true;
						return checked;
					}

				}

				return checked;

			}

			function checkData(anchor){

				var checked = false;

				for (var k = 0; k < options.noData.length; k++) {
					if(anchor.hasAttribute(options.noData[k])){

						checked = true;
						return checked;
					}

				}

				return checked;

			}

			if(!targetURL){
				//hrefがなかったらある親まで遡る
				var parent = e.target.parentNode;
				while(parent.localName!=='a'){
					parent = parent.parentNode;
				}
				targetURL    = parent.href;
				targetAnchor = parent;
			}


			if(targetAnchor.hasAttribute('target')){
				return;
			}

			e.preventDefault();

			if(checkClass(targetAnchor.className)||checkData(targetAnchor)){
				return;
			}


			if(thisURL.split('#')[0] === targetURL.split('#')[0] && e.target.hash){

				location.href=targetURL

			}else{

				document.body.style.opacity =0;

				ieFixLoop({
					'arr'  : options.selector,
					'prop' : 'opacity',
					'value': '0'
				});

				setTimeout(function(){
					location.href=targetURL;
				}, options.duration);

			}

		}

		var selector = document.querySelectorAll('a[href]');

		Array.prototype.forEach.call(selector,function(node){

			node.addEventListener('click', function(e){

				clickFade(e,config);

			}, false);

		});


	})(window,{

		'duration': 1000,
		'smp'     : false,
		'selector': ['.header','.js-pageNavFixed'],
		'noClass' : [],
		'noData'  : ['data-tabs','data-imagelightbox']

	});