백괴슬라이드/uncyslide

요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!

		 // 이부부분에 코드 입력 //
	function createSlideable(directionData){
          //모든 키 순회
          function forEach(object, callback){
              for(var key in object){
                  var variable = object[key];
                  callback(variable,key);
              }
          }
          
        function initClassName($target,data){
        	forEach(data,function(value,direction){
            	$target.find("." + direction).addClass("on");
            })
        }
        
    	function initDOM($target,data){
			$target[0].data = data;
            $target.find(".center").html( data.center );
        }
        
        var slideUtil = {
        	moveObject : function($this,axis){
                var [x,y] = axis;
                var data = $this[0].data;
                if(!data.right && x > 0) x = 0; 
                if(!data.left && x < 0) x = 0;
                if(!data.top && y < 0) y = 0;
                if(!data.bottom && y > 0) y = 0;
                $this.css("transform",`translate(${x}px,${y}px)`);
            },
            isHideable : function($this,axis,limit){
                var [x,y] = axis;
                var data = $this[0].data;
                if(data.right && x > limit) return "right";
                if(data.left && x < limit * -1) return "left";
                if(data.bottom && y > limit) return "bottom";
                if(data.top && y  < limit * -1) return "top";
            },
            hide : function(direction,$this){
            	function getCss(direction){
                	var css = {opacity:0.01};
                    var interval = 50;
                	switch(direction){
                    	case "left": css.left = -1 * interval+"vw"; break;
                    	case "right": css.left = interval+"vw"; break;
                    	case "bottom": css.top = interval+"vh"; break;
                    	case "top": css.top = -1 * interval+"vh"; break;
                    }
                    
                    return css;
                }
                
                var self = $this[0];
                var data = self.data;
                if(self.isHide === true){
                	return;
                }
                self.isHide = true;
                $this.animate(getCss(direction),{
                	duration: 300,
                    easing: "swing",
                    start: data[direction],
                    complete: function(){
                    	$this.remove();
                    }
                });
            }
        }
        
    	function setEvent($target,data){
        	var util = slideUtil;
            var moveLimit = 50;

            $(".slideable").mousedown(function(e){
                this.isMouseDown = true;
                this.startAxis = [e.clientX,e.clientY];
            })

            $(".slideable").mousemove(function(e){
                if(this.isMouseDown){
                  var axis = [e.clientX,e.clientY];
                  var startAxis = this.startAxis;
                  var moveInterval = [axis[0] - startAxis[0], axis[1] - startAxis[1]]
                  util.moveObject($(this), moveInterval);
                  var hideDirection = util.isHideable($(this),moveInterval,moveLimit);
                  console.log(hideDirection)
                  if(hideDirection) util.hide( hideDirection , $(this) );
                }
            })

            $(".slideable").mouseup(function(e){
                this.isMouseDown = false;
            })
        }
        

    	var $target = $(".slideable.cloneable").clone().removeClass("cloneable");
        $("body").append($target);

        initClassName($target,directionData);
        initDOM($target,directionData);
        setEvent($target,directionData);
    }
    
    createSlideable({
    	center:"hello",
        bottom:function(){
        	alert("down");
        },top:function(){
            alert("down");
        },left:2,right:3
    });