AngularJS on-flick

フリック入力を簡単に書けるように、ディレクティブにしてみました。

利用サンプルは後で書きます。

angular-on-flick.coffee

###*
 * angular on-flick directive
 * 
 * @author atomita
 * @license MIT
 * @version 0.2.2
###
angular.module("on-flick", []).directive("onFlick", ["$window", ($window)->
    if "ontouchstart" of $window
        _get_position = (event)->
            {
                x: event.changedTouches[0].pageX
                y: event.changedTouches[0].pageY
            }
    else
        _get_position = (event)->
            {
                x: event.pageX
                y: event.pageY
            }

    _apply = (scope, str_apply, start, current, element)->
        moved =
            x: current.x - start.x
            y: current.y - start.y

        angule_base = if 0 <= moved.x then (if 0 < moved.y then 360 else 0) else 180

        flick = scope.flick || {}
        flick.start = start
        flick.current = current
        flick.moved = moved
        flick.range = Math.sqrt(Math.pow(Math.abs(moved.x), 2) + Math.pow(Math.abs(moved.y), 2))
        flick.angule = Math.atan((-1 * moved.y) / moved.x) * (180 / Math.PI) + angule_base
        scope.flick = flick

        scope.$apply(str_apply)
        return


    {
        restrict: "CA"
        scope:
            option: "=flickOption" # optional
        link: (scope, element, attrs)->
            start = current = null

            scope.angular = angular
            scope.element = element
            scope.attrs = attrs

            element.bind("touchstart mousedown", (event)->
                event.preventDefault()

                start = current = _get_position(event)

                scope.event = event
                return
            )
            element.bind("touchmove mousemove", (event)->
                if not current?
                    return

                event.preventDefault()

                current = _get_position(event)

                scope.event = event

                if scope.option?.moveing?
                    _apply(scope, scope.option.moveing, start, current, element)
                return
            )
            element.bind("touchend mouseup touchcancel mouseleave", (event)->
                if not current?
                    return

                moved =
                    x: current.x - start.x
                    y: current.y - start.y
                tmp_current = current
                tmp_start = start
                start = current = null

                scope.event = event

                attrs.onFlick and _apply(scope, attrs.onFlick, tmp_start, tmp_current, element)
                return
            )
            return
    }
])

flick_scope = scope.$new()
flick_scope = angular.extend(flick_scope, scope)
ってしたら無限ループに陥ってしまった…