Slide_wev8.js 4.05 KB
define(['mUtil', "Component"],function(mUtil, Component) {
	var Slide = function(options) {
        
		Component.super(this, options);
		
		this.type = "Slide";
		this.tpl = this.type + "_html";
		this.css = this.type + "_css";
		
		var vm = this.viewModel = {
			autoplay : 0,
			items : [],
			height : 200,
            defaultLoad: '0'
		};
		
		this.beforeMount = function(){
			if (vm.height == ""){
				vm.height = 200;
			}
			if(mUtil.isString(vm.items)){
				if(vm.items != ""){
					mUtil.ajax(vm.items, function(responseText){
						var resultArr = JSON.parse(responseText);
						vm.items = resultArr.map(function (resultItem) {
							var item = {};
							item.path = resultItem.pic_path;
							item.desc = resultItem.pic_desc;
							var urlResult = mUtil.parseUrl(resultItem.action);
							item.url = urlResult[0];
							item.dataAjax = urlResult[1];
							item.queryString = urlResult[2];
							return item;
						});
					}, {async: false});
				}else{
					vm.items = [];
				}
			}
		};
		
		this.mounted = function(){
			var $comp = this.$el.children(".wev-comp-" + this.type),
				$swipeWrapper = this.$el.find(".wev-swipe-container");
			
			var sildeCount = vm.items.length;
			
            if(sildeCount > 1){
				var autoplay = (vm.autoplay || 0) * 1000;
				var hasClone = sildeCount < 3; // Swipe在个数<3时  会Clone所有的swipe
	            var params = {
					disableScroll: true,
	                stopPropagation: false,
					width: $(window).width(),
	                callback: function(index, element) {
						var $img = $("img.pic[lazy-src]", element);
						var isClone = hasClone && sildeCount < index + 1;

						hasClone && (index = index % 2);

						$(".wev-slide-point b", $comp).removeClass("current").eq(index).addClass("current");
						loadImg($img, isClone);
	                }
	            };
	            if(autoplay > 0){
	                params.auto = autoplay;
	            }
                var swipe = null;
	            require(["swipe"], function(){
					swipe = new Swipe($swipeWrapper[0], params);
					
					if(!hasClone) return;
					
					$swipeWrapper.find(".wev-swipe-overlay").each(function (index) {
						var isclone = sildeCount < index + 1; // 是否为Swipe clone的幻灯片

						isclone && $(this).remove();
					});
	            });

	            var pageid = this.pageid;
                var pageEvent = require("pageEvent");
                var showListener = function(){
                    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                    var page = document.querySelector('#'+pageid);
                    var observer = new MutationObserver(function(mutations) {
                        mutations.forEach(function(mutation) {
                            if (mutation.type == "attributes") {
								if(mutation.target.style.display !== 'none'){
									swipe && swipe.restart();
								}
                            }
                        });
                    });

                    observer.observe(page, {
                        attributes: true,  //configure it to listen to attribute changes,
                        attributeFilter: ['style']
                    });
                }
                pageEvent.destory("change", showListener).register("change", showListener);
            }
            
            loadImg($("img.pic[lazy-src]", $comp).eq(0));
            
            if(vm.callback && mUtil.isFunction(vm.callback.click)){
				$(".wev-swipe-wrap", $comp).on("click", "a", function(){
					var index = $(this).attr("data-index");
					
                	vm.callback.click.call(this, vm.items[index]);
                });
            }
		};
		
		function loadImg($img, isClone){
			if(!$img.length) return;

			var lazysrc = $img.attr("lazy-src");

			$img.attr("src", lazysrc).removeAttr("lazy-src");

			if(isClone) return;

			var _hideLoading = function () {
				$(this).siblings(".wev-swipe-overlay").hide();
			};

			$img.one({
				load: _hideLoading,
				error: _hideLoading
			});
		}
    };

    return Component.init(Slide);
});