crowdstf/res/app/components/stf/angular-packery/angular-packery-directive.js

var _ = require('lodash')

module.exports = function angularPackeryDirective(PackeryService,
  DraggabillyService, $timeout, $parse) {

  return {
    restrict: 'AE',
    link: function(scope, element, attrs) {
      var container = element[0]
      var parsedAttrs = $parse(attrs.angularPackery)()
      if (typeof parsedAttrs !== 'object') {
        parsedAttrs = {}
      }

      var options = angular.extend({
        isInitLayout: false,
        itemSelector: '.packery-item',
        columnWidth: '.packery-item',
        transitionDuration: '300ms'
      }, parsedAttrs)

      var pckry = new PackeryService(container, options)
      pckry.on('layoutComplete', onLayoutComplete)
      pckry.bindResize()
      bindDraggable()

      $timeout(function() {
        pckry.layout()
      }, 0)
      $timeout(function() {
        pckry.layout()
      }, 100)

      function bindDraggable() {
        if (options.draggable) {
          var draggableOptions = {}
          if (options.draggableHandle) {
            draggableOptions.handle = options.draggableHandle
          }
          var itemElems = pckry.getItemElements()
          for (var i = 0, len = itemElems.length; i < len; ++i) {
            var elem = itemElems[i]
            var draggie = new DraggabillyService(elem, draggableOptions)
            pckry.bindDraggabillyEvents(draggie)
          }
        }
      }

      function onLayoutComplete() {
        return true
      }

      function onPanelsResized() {
        pckry.layout()
      }

      scope.$on('panelsResized', _.throttle(onPanelsResized, 300))

      scope.$on('$destroy', function() {
        pckry.unbindResize()
        pckry.off('layoutComplete', onLayoutComplete)
        pckry.destroy()
      })
    }
  }
}