| Current Path : /home/zieirix/www/components/com_roksprocket/layouts/features/assets/js/ |
| Current File : /home/zieirix/www/components/com_roksprocket/layouts/features/assets/js/features.js |
/*!
* @version $Id: features.js 30547 2017-03-08 21:14:11Z reggie $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2020 RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*/
((function(){
if (typeof this.RokSprocket == 'undefined') this.RokSprocket = {};
else Object.merge(this.RokSprocket, {Features: null});
Element.implement({
'styles': function(){
var mu = moofx(this), result = mu.style.apply(mu, arguments);
if (arguments.length == 1 && typeof arguments[0] == 'string') return result;
return this;
},
'moofx': function(){
var mu = moofx(this);
mu.animate.apply(mu, arguments);
return this;
}
});
var Features = new Class({
Implements: [Options, Events],
animations: {},
options: {
data: 'features',
settings: {}
},
initialize: function(options){
this.setOptions(options);
this.data = this.options.data;
this.features = document.getElements('[data-' + this.data + ']');
this.settings = {};
this.timers = {};
this.statuses = {};
},
attach: function(feature, settings){
feature = typeOf(feature) == 'number' ?
document.getElements('[data-' + this.data + '=' + this.getID(feature) + ']')
:
feature;
settings = typeOf(settings) == 'string' ? JSON.decode(settings) : settings;
var containers = (feature ? new Elements([feature]).flatten() : this.features);
containers.each(function(container){
container.store('roksprocket:' + this.data + ':attached', true);
this.setSettings(container, settings, 'restore');
var relay = {
mouseenter: container.retrieve('roksprocket:' + this.data + ':mouseenter', function(event){
this.stopTimer.call(this, container);
this.pause.call(this, container);
}.bind(this)),
mouseleave: container.retrieve('roksprocket:' + this.data + ':mouseleave', function(event){
this.resume.call(this, container);
this.startTimer.call(this, container);
}.bind(this)),
pagination: container.retrieve('roksprocket:' + this.data + ':relay', function(event, pane){
this.toPane.call(this, event, container, pane);
}.bind(this)),
next: container.retrieve('roksprocket:' + this.data + ':next', function(event, element){
this.direction.call(this, event, container, element, 'next');
}.bind(this)),
previous: container.retrieve('roksprocket:' + this.data + ':previous', function(event, element){
this.direction.call(this, event, container, element, 'previous');
}.bind(this)),
swipe: container.retrieve('roksprocket:' + this.data + ':swipe', function(event, element){
event.preventDefault();
this.direction.call(this, event, container, element, (event.direction == 'right' ? 'previous' : 'next'));
}.bind(this))
};
['mouseenter', 'mouseleave'].each(function(type){
container.addEvent(type, relay[type]);
});
['pagination', 'next', 'previous'].each(function(dir, i){
var query = '[data-' + this.data + '-' + dir + ']';
if (i > 0) query += ', [data-' + dir + ']';
container.addEvent('click:relay(' + query + ')', relay[dir]);
}, this);
if (Browser.Features.Touch) container.addEvent('swipe', relay['swipe']);
if (this.getSettings(container).autoplay && this.getSettings(container).autoplay.toInt()) this.startTimer(container);
//this.toPosition(container, 0);
}, this);
},
detach: function(feature){
feature = typeOf(feature) == 'number' ?
document.getElements('[data-' + this.data + '=' + this.getID(feature) + ']')
:
feature;
var containers = (feature ? new Elements([feature]).flatten() : this.features);
containers.each(function(container){
container.store('roksprocket:' + this.data + ':attached', false);
var relay = {
mouseenter: container.retrieve('roksprocket:' + this.data + ':mouseenter'),
mouseleave: container.retrieve('roksprocket:' + this.data + ':mouseleave'),
pagination: container.retrieve('roksprocket:' + this.data + ':relay'),
next: container.retrieve('roksprocket:' + this.data + ':next'),
previous: container.retrieve('roksprocket:' + this.data + ':previous')
};
['mouseenter', 'mouseleave'].each(function(type){
container.removeEvent(type, relay[type]);
});
['pagination', 'next', 'previous'].each(function(dir, i){
var query = '[data-' + this.data + '-' + dir + ']';
if (i > 0) query += ', [data-' + dir + ']';
container.removeEvent('click:relay(' + query + ')', relay[dir]);
}, this);
if (Browser.Features.Touch) container.removeEvent('swipe', relay['swipe']);
}, this);
},
setSettings: function(container, settings, restore){
var id = this.getID(container),
options = Object.clone(this.options.settings);
if (!restore || !this.settings['id-' + id]){
this.settings['id-' + id] = Object.merge(options, settings || options);
}
},
getSettings: function(container){
var id = this.getID(container);
return this.settings['id-' + id];
},
getContainer: function(container){
if (!container) container = document.getElements('[data-' + this.data + ']');
if (typeOf(container) == 'number') container = document.getElement('[data-' + this.data + '='+container+']');
if (typeOf(container) == 'string') container = document.getElement(container);
return container;
},
getID: function(id){
if (typeOf(id) == 'number') id = document.getElement('[data-' + this.data + '='+id+']');
if (typeOf(id) == 'string') id = document.getElement(id);
return !id ? id : id.get('data-' + this.data);
},
getRandom: function(){
var random = Number.random(0, Object.getLength(this.animations) - 1),
keys = Object.keys(this.animations);
return this.animations[keys[random]];
},
toPosition: function(container, position){
container = this.getContainer(container);
if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
this.stopTimer(container);
var features = container.getElements('[data-' + this.data + '-pagination]'),
current = container.getElement('[data-' + this.data + '-pagination][class=active]');
if (!features.length) return;
if (features[position] && features[position].hasClass('active')) return;
if (position > features.length - 1) position = 0;
if (position < 0) position = features.length - 1;
if (features.length){
features.removeClass('active');
features[position].addClass('active');
}
this.animate(container, current.get('data-' + this.data + '-pagination') - 1, position);
},
toPane: function(event, container, pane){
if (event) event.preventDefault();
container = this.getContainer(container);
if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
var features = container.getElements('[data-' + this.data + '-pagination]'),
position = pane.get('data-' + this.data + '-pagination') - 1;
if (position == -1) throw new Error('RokSprocket Feature [' + this.data + ']: Instance ID "' + container.get('data-' + this.data) + '", index not found.');
this.toPosition(container, position);
},
direction: function(event, container, element, dir){
if (event) event.preventDefault();
dir = dir || 'next';
this[dir](container, element);
},
next: function(container, element){
container = this.getContainer(container);
if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
if (typeOf(container) == 'elements') return this.nextAll(container, element);
var pages = container.getElements('[data-' + this.data + '-pagination]');
if (!pages.length) return;
var active = pages.filter(function(page){ return page.hasClass('active'); }),
position = pages.indexOf(active.length ? active[0] : '') || 0,
next = position + 1;
if (next > pages.length - 1) next = 0;
this.toPosition(container, next);
},
nextAll: function(containers, element){
containers = this.getContainer(containers);
if (typeOf(containers) == 'element') return this.next(containers, element);
containers.each(function(container){
this.next(container, element);
}, this);
},
previous: function(container, element){
container = this.getContainer(container);
if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
if (typeOf(container) == 'elements') return this.previousAll(container, element);
var pages = container.getElements('[data-' + this.data + '-pagination]');
if (!pages.length) return;
var active = pages.filter(function(page){ return page.hasClass('active'); }),
position = pages.indexOf(active.length ? active[0] : '') || 0,
previous = position - 1;
if (previous < 0) previous = pages.length - 1;
this.toPosition(container, previous);
},
previousAll: function(containers, element){
containers = this.getContainer(containers);
if (typeOf(containers) == 'element') return this.previous(containers, element);
containers.each(function(container){
this.previous(container, element);
}, this);
},
startTimer: function(container){
container = this.getContainer(container);
if (!container.retrieve('roksprocket:' + this.data + ':attached')) return;
var settings = this.getSettings(container),
id = this.getID(container),
status = this.statuses['id-' + id],
autoplay = settings.autoplay.toInt(),
delay = (settings.delay.toInt()) * 1000;
clearTimeout(this.timers['id-' + id]);
if (autoplay && status != 'pause') this.timers['id-' + id] = this.next.delay(delay, this, container);
},
stopTimer: function(container){
container = this.getContainer(container);
var id = this.getID(container);
clearTimeout(this.timers['id-' + id]);
},
pause: function(container){
container = this.getContainer(container);
var id = this.getID(container);
this.statuses['id-' + id] = 'pause';
},
resume: function(container){
container = this.getContainer(container);
var id = this.getID(container);
this.statuses['id-' + id] = 'play';
},
animate: function(container, from, to){
var contents = container.getElements('[data-' + this.data + '-content]'),
images = container.getElements('[data-' + this.data + '-image]'),
settings = this.getSettings(container),
styles = {
content: {
show: {display: 'block', 'z-index': 2},
hide: {display: 'none', 'z-index': 1}
},
image: {
show: {display: 'block', position: 'relative', 'z-index': 2},
hide: {display: 'none', position: 'absolute', 'z-index': 1}
}
},
current = {
content: contents[from],
image: images[from]
},
next = {
content: contents[to],
image: images[to]
};
Object.each(current, function(value, key){
current[key].style(styles[key].hide);
next[key].style(styles[key].show);
}, this);
if (settings.autoplay && settings.autoplay.toInt()) this.startTimer(container);
},
addAnimations: function(animations){
Object.merge(this.animations, animations);
}
});
Features.prototype.addAnimations({
crossfade: {
from: {opacity: 0},
to: {opacity: 1}
},
fromTop: {
from: {opacity: 0, top: '-50%'},
to: {opacity: 1, top: '0%'}
},
fromTopLeft: {
from: {opacity: 0,top: '-50%',left: '-50%'},
to: {opacity: 1, top: '0%', left: '0%'}
},
fromTopRight: {
from: {opacity: 0, top: '-50%', right: '-50%'},
to: {opacity: 1, top: '0%', right: '0%'}
},
fromBottom: {
from: {opacity: 0, top: '50%'},
to: {opacity: 1, top: '0%'}
},
fromBottomLeft: {
from: {opacity: 0, top: '75%', left: '-75%'},
to: {opacity: 1, top: '0%', left: '0%'}
},
fromBottomRight: {
from: {opacity: 0, right: '-50%', top: '50%'},
to: {opacity: 1, right: '0%', top: '0%'}
},
fromLeft: {
from: {opacity: 0, transform: 'translate3d(-50%, 0, 0)'},
to: {opacity: 1, transform: 'translate3d(0, 0, 0)'}
},
fromRight: {
from: {opacity: 0, transform: 'translate3d(50%, 0, 0)'},
to: {opacity: 1, transform: 'translate3d(0, 0, 0)'}
}
});
this.RokSprocket.Features = Features;
})());