59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { once } from '@ember/runloop';
|
|
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import $ from 'jquery'
|
|
|
|
export default Component.extend({
|
|
tagName: 'span',
|
|
classNames: ['inline'],
|
|
index: 0,
|
|
images: computed.alias('previews'),
|
|
'image-height': 22,
|
|
imageHeight: computed.alias('image-height'),
|
|
'image-style': 'border-radius: 8%; border: 1px solid #DCDCDC; max-width: 32px;',
|
|
imageStyle: computed.alias('image-style'),
|
|
didReceiveAttrs() {
|
|
let me = this;
|
|
let images = me.get('images');
|
|
if ($.type(images) === 'string') {
|
|
let sep = me.get('separator');
|
|
me.set('images', sep ? images.split(sep) : [images]);
|
|
}
|
|
},
|
|
didInsertElement() {
|
|
let me = this;
|
|
me._super(...arguments);
|
|
let rel = me.get('elementId') + '_preview';
|
|
let $overflow = '';
|
|
|
|
$('a[data-rel="' + rel + '"]', me.element).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();
|
|
}
|
|
});
|
|
|
|
once(() => {
|
|
// add a custom loading icon
|
|
$('#cboxLoadingGraphic').html('<i class="ace-icon fa fa-spinner orange fa-spin"></i>');
|
|
});
|
|
}
|
|
});
|