hoho.coffee

module = require('wrap/wrapBaseModule')

class Controller
	### @ngInject ###
	constructor: ($attrs, $element, @_$rootScope, $scope, @ONCE) ->
		@_component = $scope.component
		@_imageElement = $element.find('img')[0]
		@_card = @_component.getCard()

		@componentUrl = @_component.getUrl()
		@_applyBehaviours()

		if !@ONCE
			# We need to do this because deferredSrc only loads the image once
			$attrs.$observe('deferredSrc', (imageSource) =>
				@_imageElement.src = imageSource
			)

			$scope.$watch(->
				return $scope.component.getBehaviors()
			, =>
				@isImagePreviewEnabled = @_component.getBehaviors().imagePreview
			)

		@_card.getBeginLoadingPromise().then(=> @_loadImage())

	_applyBehaviours: ->
		@isImagePreviewEnabled = @_component.getBehaviors().imagePreview

	_loadImage: ->
		@_imageElement.onload = @_card.imageLoaded
		# If there is an error loading the image (e.g. incorrect or no src),
		# don't block showing the card but do throw an exception.
		@_imageElement.onerror = =>
			@_card.imageLoaded()
			throw new Error("Error loading image inside image directive {url: #{@componentUrl}, layout: #{@_card.getLayout().id}}")

		@_imageElement.src = @componentUrl

	zoomImage: ->
		@_$rootScope.$broadcast('image:preview', @_imageElement)

module.directive('wrapImage', (ONCE) -> {
	scope: true
	restrict: 'C'
	controller: Controller
	controllerAs: 'vm'
	bindToController: true
	template: """
		<img draggable="false" deferred-src="{{ #{ONCE}vm.componentUrl | stripHttp }}" />
		<div ng-if="#{ONCE} vm.isImagePreviewEnabled" ng-click="vm.zoomImage()" class="zoomicon-backdrop">
			<span class="zoomicon glyphicon glyphicon-zoom-in"></span>
		</div>
	"""
})