loading-overlay.js 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import Ember from 'ember';
  2. export default Ember.Component.extend({
  3. classNames: ['loading-overlay', 'fade'],
  4. classNameBindings: ['_visible:in'],
  5. visible: false,
  6. itemName: null,
  7. activeItem: null,
  8. _visible: function() {
  9. if (this.get('itemName')) {
  10. return this.get('itemName') === this.get('activeItem');
  11. } else {
  12. return this.get('visible');
  13. }
  14. }.property('visible', 'itemName', 'activeItem'),
  15. selector: 'img',
  16. positionOverlay: function() {
  17. var $target = this.$().parent().find(this.get('selector'));
  18. var self = this;
  19. var _positionOverlay = function($target) {
  20. if (self.isDestroyed) { return; }
  21. // see if image was loaded
  22. if ($target.width() === 0 || $target.height() === 0) {
  23. Ember.run.later(function () {
  24. _positionOverlay($target);
  25. }, 200);
  26. } else {
  27. self.$().find('.overlay-icon').width($target.width());
  28. self.$().find('.overlay-icon').height($target.height());
  29. }
  30. };
  31. _positionOverlay($target);
  32. }.on('didInsertElement')
  33. });