diff --git a/res/app/components/stf/angular-packery/angular-packery-directive.js b/res/app/components/stf/angular-packery/angular-packery-directive.js index 050c9a8b..59609640 100644 --- a/res/app/components/stf/angular-packery/angular-packery-directive.js +++ b/res/app/components/stf/angular-packery/angular-packery-directive.js @@ -5,25 +5,29 @@ module.exports = function angularPackeryDirective(PackeryService, DraggabillySer restrict: 'AE', link: function (scope, element, attrs) { var container = element[0] - var pckry 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 = new PackeryService(container, options) - pckry.on('layoutComplete', onLayoutComplete) pckry.layout() - pckry.bindResize() - bindDraggable() - }, 50) + }, 0) + $timeout(function () { + pckry.layout() + }, 100) function bindDraggable() { if (options.draggable) { @@ -51,10 +55,9 @@ module.exports = function angularPackeryDirective(PackeryService, DraggabillySer scope.$on('panelsResized', _.throttle(onPanelsResized, 300)) scope.$on('$destroy', function () { - if (pckry) { - pckry.unbindResize() - pckry.off('layoutComplete', onLayoutComplete) - } + pckry.unbindResize() + pckry.off('layoutComplete', onLayoutComplete) + pckry.destroy() }) } } diff --git a/res/app/components/stf/angular-packery/angular-packery.css b/res/app/components/stf/angular-packery/angular-packery.css index 7733a677..03c861c3 100644 --- a/res/app/components/stf/angular-packery/angular-packery.css +++ b/res/app/components/stf/angular-packery/angular-packery.css @@ -13,6 +13,12 @@ div[angular-packery] { overflow-x: hidden; } +div[angular-packery]:after { + content: ' '; + display: block; + clear: both; +} + .col-md-4-x.packery-item { width: 33.33333333333333%; } @@ -34,3 +40,10 @@ div[angular-packery] { width: 100%; } } + +.packery-item.is-dragging, +.packery-item.is-positioning-post-drag { + /*border-color: red;*/ + /*background: #09F;*/ + /*z-index: 2;*/ +}