70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
import Ember from 'ember';
|
|
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import { typeOf } from '@ember/utils';
|
|
import $ from 'jquery';
|
|
|
|
export default Component.extend({
|
|
tagName: 'span',
|
|
classNames: ['no-padding', 'inline'],
|
|
didReceiveAttrs() {
|
|
let me = this;
|
|
let previews = me.get('images');
|
|
if (typeOf(previews) === 'string') {
|
|
let sep = me.get('separator');
|
|
me.set('previews', sep ? previews.split(sep) : [previews]);
|
|
}
|
|
else if (typeOf(previews) === 'array') {
|
|
let prop = me.get('prop');
|
|
if (prop) {
|
|
me.set('previews', previews.map(img => img[prop]));
|
|
}
|
|
else {
|
|
me.set('previews', previews);
|
|
}
|
|
}
|
|
},
|
|
'image-height': 16,
|
|
'max-width': '32px',
|
|
'image-style': computed('max-width', function() {
|
|
let maxWidth = this.get('max-width');
|
|
return 'border-radius: 8%; border: 1px solid #DCDCDC;' +
|
|
(maxWidth ? 'max-width: ' + maxWidth : '');
|
|
}),
|
|
didInsertElement() {
|
|
let me = this;
|
|
me._super(...arguments);
|
|
let rel = me.get('elementId') + '_preview';
|
|
let $overflow = '';
|
|
|
|
$(me.element).children('a[data-rel="' + rel + '"]').colorbox({
|
|
rel: rel,
|
|
reposition: true,
|
|
// scalePhotos: true,
|
|
scrolling: false,
|
|
photo: true,
|
|
previous: '<i class="ace-icon fa fa-arrow-left"></i>',
|
|
next: '<i class="ace-icon fa fa-arrow-right"></i>',
|
|
close: '×',
|
|
current: '{current} of {total}',
|
|
maxWidth: '100%',
|
|
maxHeight: '100%',
|
|
onOpen: function() {
|
|
$overflow = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
},
|
|
onClosed: function() {
|
|
document.body.style.overflow = $overflow;
|
|
},
|
|
onComplete: function() {
|
|
$.colorbox.resize();
|
|
}
|
|
});
|
|
|
|
Ember.run.once(() => {
|
|
// add a custom loading icon
|
|
$('#cboxLoadingGraphic').html('<i class="ace-icon fa fa-spinner orange fa-spin"></i>');
|
|
});
|
|
}
|
|
});
|