사용자:BANIP/플러그인/슬라이드

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

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

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

이 플러그인에 대한 설명문서는 사용자:BANIP/플러그인/슬라이드/설명문서에서 만들 수 있습니다.

		 // 이부부분에 코드 입력 //
    //모든 키 순회
    function forEach(object, callback) {
        for (var key in object) {
            var variable = object[key];
            callback(variable, key);
        }
    }

function create(directionData) {
    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);
        $target.find(".top.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/8/85/Arrow_top_svg.svg') no-repeat center");
        $target.find(".bottom.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Arrow_bottom_svg.svg') no-repeat center");
        $target.find(".left.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/4/40/Arrowleft_svg.svg') no-repeat center");
        $target.find(".right.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/e/ec/Arrow2right.svg') no-repeat center");
    }

    var slideUtil = {
        moveObject: function($this, axis) {
            var x = axis[0], y = axis[1];

            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 = axis[0], y = axis[1];
            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) {
                event.preventDefault()
                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);
                if (hideDirection) util.hide(hideDirection, $(this));
            }
        })

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

        function getTouchEvent(e) {
            return e.originalEvent.touches[0]
        }

        $(".slideable").on("touchstart", function(e) {
            var touch = getTouchEvent(e);

            this.isMouseDown = true;
            this.startAxis = [touch.clientX, touch.clientY];
        })

        $(".slideable").on("touchmove", function(e) {
            event.preventDefault()
            if (this.isMouseDown) {
                event.preventDefault()
                var touch = getTouchEvent(e);
                var axis = [touch.clientX, touch.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);
                if (hideDirection) util.hide(hideDirection, $(this));
            }
        })

        $(".slideable").on("touchend", function(e) {
            this.isMouseDown = false;
        })

    }

    //슬라이드아이템의 방향키로 숫자 혹은 문자로 지정된 경우
    //함수로 변환
    function setExecutable(target, item){
        forEach(item,function(value,direction){
            new Promise(function(resolve, reject){
                 if(direction === "center"){
                    switch( typeof value ){
                    case "function":
                        resolve( value.bind(target)() );
                    break;
                  }
              } else {
                switch( typeof value ){
                    case "string": case "number":
                        resolve(function(){ execute(value); }.bind(target));
                    break;
                }
              }
            }).then(function(result){
                 item[direction] = result;
            })

        })
    }
    
    var $target = $(".slideable.cloneable").clone().removeClass("cloneable");
    $("body").prepend($target);
    setExecutable($target[0], directionData);
    initClassName($target, directionData);
    initDOM($target, directionData);
    setEvent($target, directionData);
}

// create는 다른 함수들에 의존하지 않음 //
var game;

function execute(number, argument) {
    dispose(game, number, argument);
}

function dispose(slideableArray, start, argument) {
    game = slideableArray;
    
    var slideableItem = slideableArray[start];
    switch (typeof slideableItem) {
        case "function":
            slideableItem(argument);
            break;
        case "object":
            create(slideableItem);
            break;
    }
}

//모바일 전체화면으로 수정
var setFullScreen = (function(){
    //window.scrollTo(0,1);
})();

return {
    create: create,
    execute: execute,
    dispose: dispose
}