ohplay_official/public/static/js/homepageController.js

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-06-28 11:39:08
 * @version $Id$
 */

var HomepageController = function () {
	// private data
	var imgList = $('.banner-item');
	var lastImg = $('.banner-inner').find('.current');

	var indicatorWrap = $('.banner-indicator-wrap');
	var indicatorList = $('.banner-indicator');
	var lastIndicator = $('.banner-indicator-wrap').find('.current');

	var index = 0;

	var marginLeftBegin = 0;

	// private api
	var carouselCompoInit = function (itemWrap, indicatorWrap, itemForm, indicatorForm, callback) {
		var itemList = itemWrap.children('li');
		var indicatorList = indicatorWrap.children('li');
		
		var lastItem = itemWrap.find('.current');
		var lastIndicator = indicatorWrap.find('.current');

		var index = 0;

		var getIndex = function (target, list) {
			for (i = 0; i < list.length; i++) {
				if (target === list[i]) {
					index = i;
				};
			};

			return index;
		};

		index = getIndex(lastItem, itemList);

		indicatorWrap.on('click',function (evt) {
			var evt = evt || window.event;
			var target = evt.target || evt.srcElement;

			function getNode(node) {
		        if (node.nodeName.toLowerCase() === 'li') {
		            return node;
		        } else if ($(node.parentNode) === $(this)) {
		            return 0;
		        } else {
		        	return getNode(node.parentNode);
		        }
		    }

		    var node = getNode(target);

			if (node) {
				// 排除二级菜单
				if ($(node).parent().hasClass('preview-thumb-sub')) {
					console.log('subthumb');
					return;
				}
				lastIndicator.hasClass('current') && lastIndicator.removeClass('current');
				$(node).hasClass('current') || $(node).addClass('current');

				index = getIndex(node, indicatorList);

				lastIndicator = $(node);

				// item animation select
				var itemFormApply = function () {
					var imgWidth = itemWrap.width();

					if (itemForm === 'slide') {

					}

					if (itemForm === 'crossSlide') {
						if (itemWrap.find('.preview-item>img').css('animation-name') === 'item-rightcome') {
							itemWrap.find('.preview-item>img').css('animation-name', 'item-leftcome');
							itemWrap.find('.current>img').css('animation-name', 'item-rightgo');
						} else {
							itemWrap.find('.preview-item>img').css('animation-name', 'item-rightcome');
							itemWrap.find('.current>img').css('animation-name', 'item-leftgo');
						}
					}
				};

				// indicator animation select
				var indicatorFormApply = function () {
					var indicatorHeight = itemWrap.height() * 0.136;

					if (indicatorForm === 'slide') {
						indicatorWrap.animate({
							top: (3 - index) * indicatorHeight
						}, 600, function () {

						});
					} else if (indicatorForm === 'fade') {

					} else if (indicatorForm === 'horizonSlide') {
						var mbPreviewThumbWrapWidth = $('.mb-preview-thumb-fixed').width();
						console.log(mbPreviewThumbWrapWidth)

						console.log(index, ((index - 7) * 33.3) + '%');
						indicatorWrap.animate({
							marginLeft: -index * mbPreviewThumbWrapWidth/3 + 'px'
						}, 600, function () {

						});

						marginLeftBegin = parseInt($('.mb-preview-thumb-wrap').css('margin-left').match(/\d+/)[0]);
					};
				}

				itemFormApply();
				indicatorFormApply();
				callback && callback(node);

				lastItem.hasClass('current') && lastItem.removeClass('current');
				$(itemList[index]).hasClass('current') || $(itemList[index]).addClass('current');

				lastItem = $(itemList[index]);
			}
		});
	}

	var previewSubItemHandler = function (seriesIndex, index) {
	    // 清除上一个产品定位
	    $('.preview-inner').find('.current').removeClass('current');
	    $('.preview-inner').find('.sub-current').removeClass('sub-current');

	    // 定位当前产品
	    var currentItem = $('.preview-item:nth-child(' + (seriesIndex+1) + ')')
	    var subcurrentItem = currentItem.find('.preview-item-subitem:nth-child(' + (index+1) + ')');

	    // 置为展示
	    currentItem.addClass('current');
	    subcurrentItem.addClass('sub-current');

	    // 灯光效果
	    var lightEl = currentItem.find('.preview-light-layer');
	    lightEl.css('opacity', 0);
	    lightEl.hasClass('light-effect') && lightEl.removeClass('light-effect');

	    setTimeout(function() {
	        lightEl.hasClass('light-effect') || lightEl.addClass('light-effect');
	    }, 300);
	}

	var previewSubThumbHandler = function () {
	    // 初始化选择第一类第一个为当前展示
	    var firstItemEl = $('.preview-item:nth-child(1)');
	    var firstThumbEl = $('.preview-thumb:nth-child(1)');
	    firstItemEl.addClass('current');
	    firstItemEl.find('.preview-item-subitem:nth-child(1)').addClass('sub-current');
	    firstThumbEl.addClass('current');
	    firstThumbEl.find('.preview-thumb-subitem:nth-child(1)').addClass('sub-current');
	    $('.preview-thumb-sub').css('marginTop', '0');

	    // 切换二级产品
	    $('.preview-thumb-subitem').on('click', function () {
	        var thumbWrapEL = $('.preview-thumb-wrap');

	        // 清除上一个定位
	        thumbWrapEL.find('.current').removeClass('current');
	        thumbWrapEL.find('.sub-current').removeClass('sub-current');

	        // 当前定位
	        $(this).parent().parent().addClass('current');
	        $(this).addClass('sub-current');

	        // 获取当前定位索引
	        var seriesIndex = thumbWrapEL.find('.current').index();
	        var index = $(this).parent().find('.sub-current').index();
	        console.log(thumbWrapEL.find('.current'))
	        
	        console.log(seriesIndex, index);
	        var thumbHeight = $('.preview-thumb-sub-fixed').height() * 0.136;
	        
	        $(this).parent().animate({
	            marginTop: (0 - index) * thumbHeight
	        }, 300, function () {

	        })

	        previewSubItemHandler(seriesIndex, index);
	    })
	}

	var previewSubThumbHandler2 = function () {
	    // 初始化选择第一类第一个为当前展示
	    var firstItemEl = $('.preview-item:nth-child(1)');
	    var firstThumbEl = $('.preview-thumb:nth-child(1)');
	    firstItemEl.addClass('current');
	    // firstItemEl.find('.preview-item-subitem:nth-child(1)').addClass('sub-current');
	    firstThumbEl.addClass('current');
	    // firstThumbEl.find('.preview-thumb-subitem:nth-child(1)').addClass('sub-current');
	    // $('.preview-thumb-sub').css('marginTop', '0');

	    // 切换二级产品
	    $('.preview-thumb').on('click', function () {
	        var thumbWrapEL = $('.preview-thumb-wrap');

	        // 清除上一个定位
	        thumbWrapEL.find('.current').removeClass('current');
	        // thumbWrapEL.find('.sub-current').removeClass('sub-current');

	        // 当前定位
	        $(this).parent().parent().addClass('current');
	        // $(this).addClass('sub-current');

	        // 获取当前定位索引
	        var seriesIndex = thumbWrapEL.find('.current').index();
	        // var index = $(this).parent().find('.sub-current').index();
	        console.log(thumbWrapEL.find('.current'))
	        
	        console.log(seriesIndex);
	        var thumbHeight = $('.preview-thumb-sub-fixed').height() * 0.136;
	        
	        // $(this).parent().animate({
	        //     marginTop: (0 - index) * thumbHeight
	        // }, 300, function () {

	        // })

	        // previewSubItemHandler(seriesIndex, index);
	    })
	}

	// 移动端ro产品选择处理
	var mobilePreviewSubHandler = function () {
		// 应对ip6以下的位置错乱
		// var topDis = $('.banner-item').height();
		// $('.mb-preview-thumb-fixed').css('top',topDis);
		

		// 暂时隐藏banner
		// $('.banner-wrap').hide();
		// $.fn.fullpage.destroy('all');

		// 应对ip6以下的位置错乱
		// var topDis = $(window).height() || $('.banner-wrap').height() || 'calc(100% - 375px)'; 
		// $('.mb-preview-thumb-fixed').css('top',topDis);

		// init
		$('.mb-preview-thumb-wrap').find('.current').removeClass('current');
		$('.mb-preview-thumb-wrap').find('.mb-preview-thumb').eq(0).addClass('current');
		$('.preview-inner').find('.preview-item').eq(0).addClass('current');
		$('.preview-inner').find('.current').find('.preview-item-subitem').eq(0).addClass('sub-current');

		$('.mb-preview-thumb').on('click', function (evt) {
			// 指示器定位
			$(this).parent().find('.current').removeClass('current');
			$(this).addClass('current');

			var seriesIndex = $(this).parent().find('.current').index();

			var mbPreviewThumbWrapWidth = $('.mb-preview-thumb-fixed').width();

			$(this).parent().animate({
				marginLeft: (-seriesIndex * mbPreviewThumbWrapWidth/3) + 'px'
			}, 600, function () {

			});

			marginLeftBegin = parseInt($('.mb-preview-thumb-wrap').css('margin-left').match(/\d+/)[0]);

			// 产品定位
			var currentItem = $('.preview-item:nth-child(' + (seriesIndex+1) + ')');

			$('.preview-inner').find('.current').removeClass('current');
			$('.preview-inner').find('.sub-current').removeClass('sub-current');

			currentItem.addClass('current');
			currentItem.find('.preview-item-subitem').eq(0).addClass('sub-current');

			//左右进出切换
			// var itemWrap = $('.preview-inner');
			// if (itemWrap.find('.preview-item-subitem>img').eq(0).css('animation-name') === 'item-rightcome') {
			// 	itemWrap.find('.preview-item-subitem>img').css('animation-name', 'item-leftcome');
			// 	itemWrap.find('.sub-current>img').css('animation-name', 'item-rightgo');
			// } else {
			// 	itemWrap.find('.preview-item-subitem>img').css('animation-name', 'item-rightcome');
			// 	itemWrap.find('.sub-current>img').css('animation-name', 'item-leftgo');
			// }

			// 灯光效果
		    var lightEl = currentItem.find('.preview-light-layer');
		    lightEl.css('opacity', 0);
		    lightEl.hasClass('light-effect') && lightEl.removeClass('light-effect');

		    setTimeout(function() {
		        lightEl.hasClass('light-effect') || lightEl.addClass('light-effect');
		    }, 300);
		})

		// 移动端二级切换
		var subItemChangeHandler = function () {
			var subItemEl = $('.preview-item-subitem');

			var subItemChange = function (direction) {
				var currentEl = $('.preview-inner').find('.current').find('.sub-current');
				var currentIndex = currentEl.index();
				var subItemNumber = currentEl.parent().children().length;

				// 只有一个子元素不需要继续执行
				if (subItemNumber === 1) {
					return;
				}

				var nextIndex;
				if (direction === 'last') {
					nextIndex = currentIndex - 1;
				} else if (direction === 'next') {
					nextIndex = currentIndex + 1;
				} else {
					return;
				}

				if (nextIndex < 0) {
					nextIndex = subItemNumber - 1;
				} else if (nextIndex > subItemNumber - 1) {
					nextIndex = 0;
				}

				if (nextIndex === currentIndex) {
					return;
				} else {
					console.log(nextIndex)
					currentEl.removeClass('sub-current');
					currentEl.parent().find('.preview-item-subitem').eq(nextIndex).addClass('sub-current');

					// 切换动画方向
					// if (direction === 'last') {
					// 	$('.preview-item img').css('animationName', 'item-rightgo');
					// 	$('.preview-item-sub>sub-current>img').css('animationName', 'item-leftcome');

					// 	$('.preview-item img').css('webkitAnimationName', 'item-rightgo');
					// 	$('.preview-item-sub>sub-current img').css('webkitAnimationName', 'item-leftcome');
					// } else if (direction === 'next') {
					// 	$('.preview-item img').css('animationName', 'item-leftgo');
					// 	$('.preview-item-sub>sub-current>img').css('animationName', 'item-rightcome');

					// 	$('.preview-item img').css('webkitAnimationName', 'item-leftgo');
					// 	$('.preview-item-sub>sub-current img').css('webkitAnimationName', 'item-rightcome');
					// }
				}
			}

			subItemEl.on('touchstart', function (evt) {
				var evt = evt || window.evt;
				//evt.preventDefault();

				var startPointX = evt.touches[0].clientX;
				var startPointY = evt.touches[0].clientY;
				var moveX, moveY, endPointX, endPointY;
				var isMoving = false;

				var touchmoveEventHandler = function (evt) {
					var evt = evt || window.evt;
					evt.preventDefault();

					if (isMoving) {
						return;
					}

					cliX = evt.touches[0].clientX;
					cliY = evt.touches[0].clientY;

					var moveDistance = cliX - startPointX;

					// console.log(moveDistance);

					if (moveDistance > 100) {
						isMoving = true;
						subItemEl.off('touchmove', touchmoveEventHandler);
						subItemChange('last');
					} else if (moveDistance < -100) {
						isMoving = true;
						subItemEl.off('touchmove', touchmoveEventHandler);
						subItemChange('next');
					} else {
						return;
					}
				}

				subItemEl.on('touchmove', touchmoveEventHandler);

				subItemEl.on('touchend', function (evt) {
					var evt = evt || window.evt;
					//evt.preventDefault();

					subItemEl.on('touchmove', touchmoveEventHandler);
				})
			})
		}

		subItemChangeHandler();
	}

	// 视频层处理
	var videoLayerHandler = function () {
        var videoObj = document.getElementById('videoObj');

        $('.video-tv').on('click', function () {
        	var videoSrc = $(this).data('video');

        	if (!videoSrc) {
    			console.log('视频不存在');
                alert('视频不存在');
                return;
	        }
	        
        	videoObj.src = videoSrc;

        	setTimeout(function () {
        		if (videoObj.networkState !== 3) {
	                $('.video-layer').show();
	                videoObj.play();
	            } else {
	                console.log('视频不存在');
	                alert('视频不存在');
	            }
        	}, 0)
        })

        $('.video-layer').on('click', function (evt) {
            var evt = evt || window.event;
            var target = evt.target || evt.srcElement;

            if (target.nodeName.toLowerCase() === 'video') {
                if (videoObj.paused === true) {
                    videoObj.play();
                } else {
                    videoObj.pause();
                }
            } else {
                videoObj.pause();
                videoObj.currentTime = 0;
                $(this).hide();
            }
        })
    }

    // mobile touchmove handler
    var mobileTouchmoveHandler = function () {
    	var mbPreviewThumbWrapEl = $('.mb-preview-thumb-wrap');

    	var touchStartX = 0;
    	var touchStartY = 0;
    	var disX = 0;
    	// var marginLeftBegin = mbPreviewThumbWrapEl.css('margin-left');
    	var translateX = marginLeftBegin;

    	var number = mbPreviewThumbWrapEl.children().length;
    	var index = 0;
    	var mbPreviewThumbWrapWidth = mbPreviewThumbWrapEl.width();

    	// var maxMarginLeft = mbPreviewThumbWrapWidth*index/number;
    	// var minMarginLeft = -mbPreviewThumbWrapWidth*(number-index-1)/number;
    	var maxMarginLeft = 0;
    	var minMarginLeft = -mbPreviewThumbWrapWidth*(number-1)/number;

    	var mbPreviewThumbReset = function () {
	    	var mbPreviewThumbWrapEl = $('.mb-preview-thumb-wrap');

	    	// mbPreviewThumbWrapEl.css('margin-left', '0px');
	    	// mbPreviewThumbWrapEl.css('margin-left', marginLeftBegin);
			mbPreviewThumbWrapEl.css('transform', 'translateX(0px)');
			mbPreviewThumbWrapEl.css('-webkit-transform', 'translateX(0px)');

			disX = 0;
			translateX = marginLeftBegin;
	    }

	  //   var mbPreventDefault = function (evt) {
			// evt.preventDefault();
	  //   }

    	mbPreviewThumbWrapEl.on('touchstart', function (evt) {
    		touchStartX = evt.touches[0].clientX;
			touchStartY = evt.touches[0].clientY;

			// $(document).on('touchmove', mbPreventDefault);
    	});

    	mbPreviewThumbWrapEl.on('touchmove', function (evt) {
    		// evt.stopPropagation();
    		evt.preventDefault();

    		disX = Math.ceil(evt.touches[0].clientX - touchStartX);
			//console.log(disX);

			if (disX > maxMarginLeft - translateX) {
				console.log('max', maxMarginLeft - translateX)
    			disX = maxMarginLeft - translateX;
    		} else if (disX < minMarginLeft - translateX) {
    			console.log('min', minMarginLeft - translateX)
    			disX = minMarginLeft - translateX;
    		}

			if (disX < -30) {
				mbPreviewThumbWrapEl.css('transform', 'translateX(' + disX + 'px)');
				mbPreviewThumbWrapEl.css('-webkit-transform', 'translateX(' + disX + 'px)');
				return;
			}

			if (disX > 30) {
				mbPreviewThumbWrapEl.css('transform', 'translateX(' + disX + 'px)');
				mbPreviewThumbWrapEl.css('-webkit-transform', 'translateX(' + disX + 'px)');
				return;
			}

			disX = 0;
    	});

    	mbPreviewThumbWrapEl.on('touchend', function (evt) {
    		// translateX = evt.changedTouches[0].clientX - touchStartX + translateX;
    		if (disX === 0) return;
    		console.log(translateX,disX,marginLeftBegin);
    		translateX += disX;
    		disX = 0;
    		console.log(translateX,disX,marginLeftBegin);
    		// if (translateX > mbPreviewThumbWrapWidth*index/7) {
    		// 	translateX = mbPreviewThumbWrapWidth*index/7;
    		// } else if (translateX < -mbPreviewThumbWrapWidth*(6-index)/7) {
    		// 	translateX = -mbPreviewThumbWrapWidth*(6-index)/7;
    		// }

    		mbPreviewThumbWrapEl.css('margin-left', translateX + 'px');
    		mbPreviewThumbWrapEl.css('transform', 'translateX(0px)');
    		mbPreviewThumbWrapEl.css('-webkit-transform', 'translateX(0px)');
    	});

    	// $('.mb-preview-thumb').on('click', function () {
    	// 	mbPreviewThumbReset();

    	// 	index = $(this).index();
    	// 	console.log(index);

    	// 	maxMarginLeft = mbPreviewThumbWrapWidth*index/number;
    	// 	minMarginLeft = -mbPreviewThumbWrapWidth*(number-index-1)/number;
    	// })

    	// $(document).off('touchmove', mbPreventDefault);
    }

	// public api
	this.defaultInit = function () {
		var inv = null;
		var browserType = TD.util.browserType();
		console.log(browserType);

		if (browserType !== 'Chrome' && browserType !=='Safari') {
			console.log('not webkit');
			$('.effect-layer').hide();
		}

		if ($('.nav-lang-current').find('.nav-lang-item').text() === '繁体') {
			$('.preview-item-name').css('font-family', '"LiSong Pro", "MingLiU", "Microsoft YaHei"');
			$('.preview-item-name').css('font-weight', '800');
		};

		$('.m-homepage').fullpage({
			slidesNavigation: true,
			slidesPosition: 'bottom',
			easingcss3: 'cubic-bezier(.62,.01,0,1)',
			scrollOverflow: true,
			normalScrollElements: '.preview-thumb-wrap',
			afterRender: function () {
				inv = setInterval(function () {
					$('.fp-next').click();
				}, 3000);

				$('.video-wrap').length && videoLayerHandler();
			},
			afterSlideLoad: function () {
				clearInterval(inv);
				inv = setInterval(function () {
					$('.fp-next').click();
				}, 3000);
			}
		});
	}

	this.preload = function () {
		TD.imgPreload(function () {
			$('.m-header').css('opacity', 1);
			$('.m-homepage').css('opacity', 1);
			$('.m-loading').fadeOut(300);
		})
	}

	this.mkPageInit = function () {
		carouselCompoInit($('.preview-inner'), $('.preview-thumb-wrap'), 'crossSlide', 'fade', function (target){
	        $('.preview-light-layer').css('opacity', 0);
	        $('.preview-light-layer').hasClass('light-effect') && $('.preview-light-layer').removeClass('light-effect');

	        setTimeout(function() {
	            $('.preview-light-layer').hasClass('light-effect') || $('.preview-light-layer').addClass('light-effect');
	        }, 300);
	    });
	}

	this.mkPageMobileInit = function () {
		// init 

		// 暂时隐藏banner
		// $('.banner-wrap').hide();
		// $.fn.fullpage.destroy('all');
		// $('.banner-item:nth-child(2)').hide();
		// $('.fp-slidesNav').hide();
		// $.fn.fullpage.reBuild();
		
		$('.preview-inner').find('.current').removeClass('current');
		$('.mb-preview-thumb-wrap').find('.mb-preview-thumb').eq(0).addClass('current');
		$('.preview-inner').find('.preview-item').eq(0).addClass('current');

		carouselCompoInit($('.preview-inner'), $('.mb-preview-thumb-wrap'), 'crossSlide', 'horizonSlide'), function () {
		}

		mobileTouchmoveHandler();
	}

	this.roPageInit = function () {
		// $('.preview-thumb-wrap').hover(function () {
	 //        $('.preview-thumb-wrap').css('paddingLeft', '1.6rem');
	 //        $('.preview-thumb-sub-fixed').css('right', '1.8rem');
	 //    }, function () {
	 //        $('.preview-thumb-wrap').css('paddingLeft', '0');
	 //        $('.preview-thumb-sub-fixed').css('right', '-1.6rem');
	 //    })

		// previewSubThumbHandler2();

		$('.preview-inner').find('.preview-item').eq(0).addClass('current');
		$('.preview-thumb-wrap').find('.preview-thumb').eq(0).addClass('current');

		carouselCompoInit($('.preview-inner'), $('.preview-thumb-wrap'), 'crossSlide', 'fade', function (target){
	        $('.preview-light-layer').css('opacity', 0);
	        $('.preview-light-layer').hasClass('light-effect') && $('.preview-light-layer').removeClass('light-effect');

	        setTimeout(function() {
	            $('.preview-light-layer').hasClass('light-effect') || $('.preview-light-layer').addClass('light-effect');
	        }, 300);
	    });
	}

	this.roPageMobileInit = function () {
		mobilePreviewSubHandler();
		mobileTouchmoveHandler();
	}
}