var images = ['http://www.viralboo.com/wp-content/uploads/2014/04/Awesome-INDONESIA-Nature-17.jpg',
'http://images4.fanpop.com/image/photos/23900000/Landscape-mother-nature-23969159-900-600.jpg',
'http://www.chriswtanner.com/images/900px/india_IMG_0913.jpg',
'http://www.viralboo.com/wp-content/uploads/2014/04/Awesome-INDONESIA-Nature-25.jpg',
'http://desktopbackgrounds4u.com/wp-content/gallery/www.pictures-of-nature/pretty-naturebackgrounds-of-pretty-nature-2014-oieidpqp.jpg',
'http://www.viralboo.com/wp-content/uploads/2014/04/Awesome-INDONESIA-Nature-26.jpg',
'http://www.visituzbekistan.travel/blog/wp-content/uploads/2012/02/uzbekistan-nature-mountains.jpg',
'http://4.bp.blogspot.com/-jjrHKpJhxOM/T8rQW0hCkrI/AAAAAAAAGK0/1ridyr6Wi2Y/s1600/nature_2.png',
'http://cdn.zmescience.com/wp-content/uploads/2012/10/nature3.jpg'
];
var ImageSlider = Ractive.extend({
template: '#tmpl',
oninit: function() {
var self = this;
self.set('_index', 10000 * self.get('images').length);
self.set('activeImageUrl', self.activeImageUrl);
self.set('showControls', self.showControls);
self.set('isDotActive', function(idx) {
if (idx == self.get('index')) {
return 'active'
} else
return '';
});
self.removeIcons();
self.set('_indexToLoad', self.get('_index'))
self.observe('_indexToLoad', function(newValue, oldValue, keypath) {
var imageIndex = Math.abs(newValue) % self.get('images').length;
var imageUrl = self.get('images.' + imageIndex);
self.set('imageVisibilityClass', 'disp_none');
self.getAsync(imageUrl)
.then(function() {
self.set('_index', newValue);
setTimeout(function() {
self.position();
self.set('imageVisibilityClass', 'disp_block');
}, 0)
}).catch(function(e) {
logger.error('_indexToLoad.observer : error', e)
});
});
self.observe('images', function(newValue, oldValue, keypath) {
setTimeout(function() {
self.position();
}, 1)
})
self.on({
onClick: self.clickOnImage,
onDotClick: self.clickOnDot,
onMouseEnter: self.mouseLeaveOnEnter,
onMouseLeave: self.mouseLeaveOnImage,
onMouseMove: self.mouseMoveOnImage
});
},
onrender: function() {
this.position();
},
onconstruct: function(options) {
this.options = options;
},
computed: {
index: function() {
var self = this;
return Math.abs(self.get('_index')) % self.get('images').length;
}
},
onconfig: function() {
var self = this;
self.set('activeImageUrl', function() {
return ""
});
self.set('showControls', function() {
return false
});
self.set('isDotActive', function(idx) {
return "";
})
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_none');
self.set('profileVisibilityClass', 'disp_none');
},
clickOnDot: function(e, idx) {
var self = this;
if (idx != null) {
var diff = self.get('index') - idx;
self.set('_indexToLoad', self.get('_index') - diff);
}
},
clickOnImage: function(e) {
var self = this;
if (e.original.target.className !== 'imageSlider_parent') {
return;
}
if (self.get('linkDisabled')) {
if (self.lastPercentageX < 0.5) {
self.set('_indexToLoad', self.get('_index') - 1);
} else if (self.lastPercentageX >= 0.5) {
self.set('_indexToLoad', self.get('_index') + 1);
};
} else {
if (self.lastPercentageX < 0.3) {
self.set('_indexToLoad', self.get('_index') - 1);
} else if (self.lastPercentageX > 0.7) {
self.set('_indexToLoad', self.get('_index') + 1);
} else {}
}
},
mouseLeaveOnEnter: function(e) {},
mouseLeaveOnImage: function(e) {
this.removeIcons();
},
mouseMoveOnImage: function(e) {
var self = this;
if (!e) return;
if (e.original.target.className !== 'imageSlider_parent') {
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_none');
self.set('profileVisibilityClass', 'disp_none');
return;
}
var percentageX = (e.original.offsetX || e.original.layerX) / (e.original.target.offsetWidth || e.original.target.naturalWidth);
var percentageY = (e.original.offsetY || e.original.layerY) / (e.original.target.offsetHeight || e.original.target.naturalHeight);
var obj = {
x: percentageX,
y: percentageY
}
if (self.get('linkDisabled')) {
self.set('profileVisibilityClass', 'disp_none');
if (percentageX < 0.5) {
self.set('leftVisibilityClass', 'disp_block');
self.set('rightVisibilityClass', 'disp_none');
} else if (percentageX >= 0.5) {
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_block');
}
} else {
if (percentageX < 0.3) {
self.set('leftVisibilityClass', 'disp_block');
self.set('rightVisibilityClass', 'disp_none');
self.set('profileVisibilityClass', 'disp_none');
} else if (percentageX > 0.7) {
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_block');
self.set('profileVisibilityClass', 'disp_none');
} else {
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_none');
self.set('profileVisibilityClass', 'disp_block');
}
}
self.lastPercentageX = percentageX;
},
position: function() {
var wrapper = this.find('.imageSlider_wrapper');
var img = this.find('.imageSlider_wrapper>img');
fit(img, wrapper, {
watch: true,
apply: true
});
},
removeIcons: function() {
var self = this;
self.set('leftVisibilityClass', 'disp_none');
self.set('rightVisibilityClass', 'disp_none');
self.set('profileVisibilityClass', 'disp_none');
},
hidePreloader: function() {
var self = this;
self.set('preloaderVisibilityClass', 'disp_none');
},
showPreloader: function() {
var self = this;
self.set('preloaderVisibilityClass', 'disp_block');
},
activeImageUrl: function() {
var self = this;
var idx = self.get('index');
return self.get("images." + idx);
},
showControls: function() {
var self = this;
var images = self.get('images');
return images.length > 1;
},
getAsync: function(url) {
var self = this;
NProgress.configure({ parent: self.get('parent') });
NProgress.start();
return new Promise(function(resolve, reject) {
self.showPreloader();
var img = new Image();
img.onload = function() {
self.hidePreloader();
NProgress.done();
resolve();
}
img.onerror = function() {
self.hidePreloader();
NProgress.done();
reject();
};
img.setAttribute("src", url);
})
}
})
new ImageSlider({
el: '#slider1',
data: {
images: images,
parent: '#slider1',
},
});