Pony.fm/resources/scripts/app/directives/image-upload.coffee

# Pony.fm - A community for pony fan music.
# Copyright (C) 2015 Feld0
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.

module.exports = angular.module('ponyfm').directive 'pfmImageUpload', () ->
    $image = null
    $uploader = null

    restrict: 'E'
    templateUrl: '/templates/directives/image-upload.html'
    scope:
        setImage: '=setImage'
        image: '=image'
        # ID of the user to upload images on behalf of
        userId: '=userId'

    compile: (element) ->
        $image = element.find 'img'
        $uploader = element.find 'input'

    controller: [
        'images', '$scope', 'lightbox'
        (images, $scope, lightbox) ->

            $scope.imageObject = null
            $scope.imageFile = null
            $scope.imageUrl = null
            $scope.isImageLoaded = false
            $scope.error = null

            $scope.$watch 'image', (val) ->
                $scope.imageObject = $scope.imageFile = $scope.imageUrl = null
                $scope.isImageLoaded = false
                return unless val?

                $scope.imageUrl = val
                $image.attr 'src', val
                $scope.isImageLoaded = true

            $image.load () -> $scope.$apply ->
                $scope.isImageLoaded = true
                window.setTimeout (() -> window.alignVertically($image)), 0

            $scope.$watch 'userId', (val)->
                return unless val?
                images.refresh(true, $scope.userId).done (images) -> $scope.images = images

            $scope.previewImage = () ->
                return if !$scope.isImageLoaded

                if $scope.imageObject
                    lightbox.openImageUrl $scope.imageObject.urls.normal
                else if $scope.imageFile
                    lightbox.openDataUrl $image.attr 'src'
                else if $scope.imageUrl
                    lightbox.openImageUrl $scope.imageUrl

                # An explicit return value is needed here to avoid this issue:
                #   https://docs.angularjs.org/error/$parse/isecdom
                return null

            $scope.uploadImage = () ->
                $uploader.trigger 'click'
                return

            $scope.clearImage = () ->
                $scope.imageObject = $scope.imageFile = $scope.imageUrl = null
                $scope.isImageLoaded = false
                $scope.setImage null

            $scope.selectGalleryImage = (image) ->
                $scope.imageObject = image
                $scope.imageFile = null
                $scope.imageUrl = image.urls.small
                $image.attr 'src', image.urls.small
                $scope.isImageLoaded = true
                $scope.setImage image, 'gallery'

            $scope.setImageFile = (input) ->
                $scope.$apply ->
                    file = input.files[0]
                    $scope.imageObject = null
                    $scope.imageFile = file

                    if file.type not in ['image/png', 'image/jpeg']
                        $scope.error = 'Image must be a PNG or JPEG!'
                        $scope.isImageLoaded = false
                        $scope.imageObject = $scope.imageFile = $scope.imageUrl = null
                        return

                    $scope.error = null
                    $scope.setImage file, 'file'

                    reader = new FileReader()
                    reader.onload = (e) -> $scope.$apply ->
                        $image[0].src = e.target.result
                        $scope.isImageLoaded = true

                    reader.readAsDataURL file
        ]