cha0s · September 27, 2015 22:43 · Sep 27, 2015
diff --git a/reddichat-markdown-expando-image-resizer.litcoffee b/reddichat-markdown-expando-image-resizer.litcoffee
@@ -0,0 +1,94 @@
+# Reddichat - Markdown - Expando - Image - Resizer
+
+    path = require 'path'
+
+    exports.pkgmanRegister = (registrar) ->
+
+      registrar.registerHook 'shrubAngularDirective', -> [
+        '$compile', '$window'
+        ($compile, $window) ->
+
+          directive = {}
+
+          directive.link = (scope, elm) ->
+
+            scope.wasResized = false
+            scope.isResizing = false
+
+            $img = elm.find 'img'
+            $img.on 'load', ->
+              scope.origin = width: $img.width()
+              scope.ratio = $img.width() / $img.height()
+
+            recalculateOrigin = ({pageX, pageY}) ->
+              scope.origin.x = pageX
+              scope.origin.y = pageY
+              scope.origin.movingWidth = $img.width()
+
+Only register 'click' if the image wasn't resized.
+
+            scope.click = ($event) -> $event.preventDefault() if @wasResized
+
+            scope.mouseDown = ($event) ->
+              {pageX, pageY} = $event
+
+              @wasResized = false
+              @isResizing = true
+
+              recalculateOrigin $event
+
+              $event.preventDefault()
+
+Toggle global event handlers (since they need to apply even if the mouse moves
+off the image element) based on whether the image is expanded.
+
+            scope.$watch 'expanded', (expanded) ->
+
+              if expanded
+
+                angular.element($window).on 'mousemove', mouseMove = ($event) ->
+                  return unless scope.isResizing
+                  scope.wasResized = true
+
+                  {pageX, pageY} = $event
+
+Set the new width from the delta -- Y delta factors in image ratio.
+
+                  deltaX = pageX - scope.origin.x
+                  deltaY = scope.ratio * (pageY - scope.origin.y)
+                  width = Math.round(
+                    scope.origin.movingWidth + 2 * (deltaY + deltaX)
+                  )
+
+Clamp min/max and recalculate origin if clamping to prevent needing to pull
+back from overcompensation.
+
+                  if width < scope.origin.width
+                    $img.css 'width', 'auto'
+                    recalculateOrigin $event
+                    return
+
+                  recalculateOrigin $event if width > $img.width()
+                  $img.css 'width', width
+
+                angular.element($window).on 'mouseup', mouseUp = ->
+                  return unless scope.isResizing
+                  scope.isResizing = false
+
+              else
+
+                angular.element($window).off(mouseUp).off(mouseMove)
+
+          directive.scope = true
+
+          directive.template = '''
+    <img
+      data-ng-click="click($event)"
+      data-ng-mousedown="mouseDown($event)"
+      data-ng-src="{{src}}"
+    />
+    '''
+
+          return directive
+
+      ]
No results found