responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
607 lines (601 loc) • 22.5 kB
JavaScript
frameworkObject.realSlider = new function (){
var ObjectRealSlider = function(idSlider) {
var idSlider=idSlider;
var elementSlider = $('#'+idSlider);
var height = 85;
var containerX = 0;
var clickInInitial = -1;
var iniClickInInitial = 0;
var previousPositionInitial = 0;
var actualPositionInitial = 0;
var previousPositionFinal = 0;
var actualPositionFinal = 0;
var clickInFinal = -1;
var iniClickInFinal = 0;
var timeInitial="";
var timeFinal="";
var timeToday="";
var listTime = [];
var listTimeInPixels = [];
var caption="";
var receptorinitialvalue="";
var receptorendvalue="";
var width = 0;
var positionLastDay;
var totalDay;
/*
*
* initialize attribute
*
* */
this.initializeValues = function() {
if (elementSlider.attr('receptor-initial-value')) {
receptorinitialvalue = $('#'+idSlider).attr('receptor-initial-value');
receptorinitialvalue = receptorinitialvalue.trim();
}
if (elementSlider.attr('receptor-end-value')) {
receptorendvalue = $('#'+idSlider).attr('receptor-end-value');
receptorendvalue = receptorendvalue.trim();
}
if (elementSlider.width()) {
width = parseInt(($('#'+idSlider).width()));
}
};
/*
*
* validate if date is in format american
*
* */
var isDateValid = function(date){
date=date.trim();
var patron = false;
if(date.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
patron = true;
} else {
if(date.match(/^[0-9]{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])/)) {
patron = true;
}
}
return patron;
};
/*
*
* load data in array listTime
*
* */
this.findAndLoadDate = function(){
$('#'+idSlider).find('.item').each(function (index, element) {
var newItem = $(element).val();
if (isDateValid(newItem)) {
listTime.push(newItem);
}
});
};
/*
*
* initialize values
*
* */
this.initializeAttributeValues = function() {
if (elementSlider.attr('initial')) {
if (isDateValid(elementSlider.attr('initial'))) {
timeInitial = elementSlider.attr('initial');
listTime.push(timeInitial);
}
}
if (elementSlider.attr('end')) {
if (isDateValid(elementSlider.attr('end'))) {
timeFinal = elementSlider.attr('end');
listTime.push(timeFinal);
}
}
if (elementSlider.attr('today')) {
if (isDateValid(elementSlider.attr('today'))) {
timeToday = elementSlider.attr('today');
}
}
};
/*
*
* inject basic structure (frame and line base)
*
* */
this.indectBasicStructure = function() {
var content = [
'<div class="real-slider" onmouseup="frameworkObject.realSlider.clickOff('+"'"+idSlider+"'"+')" >',
'<div class="slider-line-base" id="'+idSlider+'slider-line-base" onmouseup="frameworkObject.realSlider.clickOff('+"'"+idSlider+"'"+')" >',
'</div>',
'</div>'
];
content = content.join(" ")
elementSlider.text("");
elementSlider.append(content);
};
/*
*
* calc distance between data
*
*/
var daysBetween = function (date1, date2) {
if (date1.indexOf("-") != -1) {
date1 = date1.split("-");
} else if (date1.indexOf("/") != -1) {
date1 = date1.split("/");
} else {
return 0;
}
if (date2.indexOf("-") != -1) {
date2 = date2.split("-");
} else if (date2.indexOf("/") != -1) {
date2 = date2.split("/");
} else {
return 0;
}
if (parseInt(date1[0], 10) >= 1000) {
var sDate = new Date(date1[0]+"/"+date1[1]+"/"+date1[2]);
} else if (parseInt(date1[2], 10) >= 1000) {
var sDate = new Date(date1[2]+"/"+date1[0]+"/"+date1[1]);
} else {
return 0;
}
if (parseInt(date2[0], 10) >= 1000) {
var eDate = new Date(date2[0]+"/"+date2[1]+"/"+date2[2]);
} else if (parseInt(date2[2], 10) >= 1000) {
var eDate = new Date(date2[2]+"/"+date2[0]+"/"+date2[1]);
} else {
return 0;
}
var one_day = 1000 * 60 * 60 * 24;
var daysApart = Math.abs(Math.ceil((sDate.getTime() - eDate.getTime()) / one_day));
return daysApart;
};
/*
*
* event get first piker position x at the moment click over piker
*
*/
this.clickInitialOn = function() {
var objy = document.getElementById(idSlider+"slider-line-base");
height = parseInt(this.findPosY(objy));
var objContainer = document.getElementById(idSlider+"slider-initial");
containerX = this.findPosX(objContainer);
iniClickInInitial = $('#'+idSlider+'slider-initial').css("left");
iniClickInInitial=parseInt(iniClickInInitial.substring(0,iniClickInInitial.length-2));
clickInInitial = 1;
};
/*
*
* event get last piker position x at the moment click over piker
*
*/
this.clickFinalOn = function() {
var objy = document.getElementById(idSlider+"slider-line-base");
height = parseInt(this.findPosY(objy));
var objContainer = document.getElementById(idSlider+"slider-final");
containerX = this.findPosX(objContainer);
iniClickInFinal = $('#'+idSlider+'slider-final').css("left");
iniClickInFinal=parseInt(iniClickInFinal.substring(0,iniClickInFinal.length-2));
clickInFinal = 1;
};
/*
*
* gun the title, as a function of current data
*
*/
var editCaption = function(){
caption = "release ";
var separator="";
if(timeInitial!="" && timeFinal!="") {
separator = " - ";
}
if (Date.parse(timeInitial) <= Date.parse(timeFinal)) {
caption += timeInitial+separator+timeFinal;
if (receptorinitialvalue != "") {
$('#'+receptorinitialvalue).val(timeInitial);
}
if (receptorendvalue != "") {
$('#'+receptorendvalue).val(timeFinal);
}
} else {
caption += timeFinal+separator+timeInitial;
if (receptorinitialvalue != "") {
$('#'+receptorinitialvalue).val(timeFinal);
}
if (receptorendvalue != "") {
$('#'+receptorendvalue).val(timeInitial);
}
}
};
/*
*
* calculate day number to the pixels
*
* */
var dayToPixel = function(data) {
var nomberDay = daysBetween(data,listTime[0]);
var pixels = parseInt((width * nomberDay) / totalDay);
return pixels;
};
/*
*
* paint green line between date initial and date final
*
* */
var showLine = function() {
var max, min;
var sliderCaptionRango = $('#' + idSlider + 'slider-line-rango');
var sliderCaption = $('#' + idSlider + 'slider-caption');
if (actualPositionInitial > actualPositionFinal) {
max = actualPositionInitial;
min = actualPositionFinal;
} else {
min = actualPositionInitial;
max = actualPositionFinal;
}
var newWidth = max - min;
if(timeInitial != "" && timeFinal != "") {
sliderCaptionRango.css("left", min);
sliderCaptionRango.css("width", newWidth);
}
var leftCaption = width - min;
if(leftCaption > 205) {
sliderCaption.css("right", "inherit");
sliderCaption.css("left", min);
} else {
sliderCaption.css("left", "inherit");
sliderCaption.css("right", leftCaption);
}
sliderCaption.text(caption);
};
/*
*
* paint wedge for each date
*
* */
this.paintWedge = function() {
for(var i = 0; i < positionLastDay; i++) {
var leftToWedge = dayToPixel(listTime[i]);
listTimeInPixels.push(leftToWedge);
var wedge = '<div class="slider-cunia" style="left: ' + leftToWedge + 'px;">'+
'</div>';
$('#'+idSlider+'slider-line-base').append(wedge);
}
if(timeToday != "") {
var leftToToday = dayToPixel(timeToday);
if (leftToToday >= 0 && leftToToday <= leftToWedge) {
leftToToday -= 5;
var divToday = '<div class="slider-today" style="left: ' + leftToToday + 'px;" >' +
'<span class="icon-icoslidertoday"></span>' +
'</div>';
$('#'+idSlider+'slider-line-base').append(divToday);
}
}
};
/*
*
* paint marker for date initial and date final
*
* */
this.paintMarker = function(){
if(parseInt(totalDay) > 2 && listTime.length >= 2){
if(timeInitial != "") {
actualPositionInitial = dayToPixel(timeInitial);
} else {
actualPositionInitial = listTimeInPixels[0];
}
if(timeFinal != "") {
actualPositionFinal = dayToPixel(timeFinal);
} else {
actualPositionFinal = listTimeInPixels[positionLastDay-1];
}
var wedge = ''+
'<div class="slider-initial" id="'+idSlider+'slider-initial" onmousedown="frameworkObject.realSlider.clickInitialOn('+"'"+idSlider+"'"+')" >'+
'<span class="icon-icoslider"></span>'+
'</div>'+
'<div class="slider-final" id="'+idSlider+'slider-final" onmousedown="frameworkObject.realSlider.clickFinalOn('+"'"+idSlider+"'"+')" >'+
'<span class="icon-icoslider"></span>'+
'</div>'+
'<div class="slider-line-rango" id="'+idSlider+'slider-line-rango">'+
'</div>'+
'<div class="slider-caption" id="'+idSlider+'slider-caption" >'+
'</div>';
$('#'+idSlider+'slider-line-base').append(wedge);
$('#'+idSlider+'slider-initial').css("left",actualPositionInitial);
$('#'+idSlider+'slider-final').css("left",actualPositionFinal-7);
previousPositionInitial = actualPositionInitial;
previousPositionFinal = actualPositionFinal;
editCaption();
showLine();
}
};
/*
*
* calculate date nearest
*
* */
var nearest;
nearest = function (position) {
position = parseInt(position);
var distance = listTimeInPixels[positionLastDay-1];
var newNearrest = 0;
for (var i = 0; i < positionLastDay; i++) {
var newdistance = parseInt(listTimeInPixels[i]) - position;
if (newdistance < 0) {
newdistance = newdistance * -1;
}
if (distance > newdistance) {
distance = newdistance;
newNearrest = i;
}
}
return newNearrest;
};
/*
*
* calculate next position from marker initial day
*
* */
var nextInitial;
nextInitial = function(){
var newPositionInitial = nearest(actualPositionInitial);
var futurePosition = listTimeInPixels[newPositionInitial];
if(futurePosition == actualPositionFinal) {
actualPositionInitial = previousPositionInitial;
$('#'+idSlider+'slider-initial').css("left", previousPositionInitial-5);
showLine();
} else {
if (futurePosition !== actualPositionInitial) {
actualPositionInitial = listTimeInPixels[newPositionInitial];
timeInitial=listTime[newPositionInitial];
editCaption();
previousPositionInitial = actualPositionInitial;
$('#'+idSlider+'slider-initial').css("left", actualPositionInitial-5);
showLine();
}
}
};
/*
*
* calculate next position from marker final day
*
* */
var nextFinal;
nextFinal = function(){
var newPositionFinal = nearest(actualPositionFinal);
var futurePosition = listTimeInPixels[newPositionFinal];
if(futurePosition == actualPositionInitial) {
actualPositionFinal = previousPositionFinal;
$('#'+idSlider+'slider-final').css("left", previousPositionFinal-5);
showLine();
} else {
if (futurePosition !== actualPositionFinal) {
actualPositionFinal = listTimeInPixels[newPositionFinal];
timeFinal = listTime[newPositionFinal];
editCaption();
previousPositionFinal = actualPositionFinal;
$('#'+idSlider+'slider-final').css("left", actualPositionFinal-5);
showLine();
}
}
};
/*
*
* stop the marker active
*
* */
this.clickOff = function() {
if(clickInInitial==1) {
clickInInitial = -1;
nextInitial();
}
if(clickInFinal==1) {
clickInFinal = -1;
nextFinal();
}
};
/*
*
* add event mousemove the element
*
* */
this.runEvent = function() {
$(".real-slider").mousemove(function (event) {
if (clickInInitial == 1) {
actualPositionInitial = iniClickInInitial+( (event.pageX - containerX) - 8);
var posInY = event.pageY;
if (parseInt(actualPositionInitial) > -7 && parseInt(actualPositionInitial) < width+2 && posInY > height - 10 && posInY < height+20) {
$('#'+idSlider+'slider-initial').css("left", actualPositionInitial);
showLine();
} else {
nextInitial();
clickInInitial = -1;
}
}
if (clickInFinal == 1) {
actualPositionFinal = iniClickInFinal+( (event.pageX - containerX) - 8);
var posInY = event.pageY;
if (parseInt(actualPositionFinal) > -7 && parseInt(actualPositionFinal) < width+2 && posInY > height - 10 && posInY < height+20) {
$('#'+idSlider+'slider-final').css("left", actualPositionFinal);
showLine();
} else {
nextFinal();
clickInFinal = -1;
}
}
});
};
/*
*
* find position x in all screen
*
* */
this.findPosX = function(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
};
/*
*
* find position y in all screen
*
* */
this.findPosY = function(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
};
this.changeValue = function(newArray){
listTime = [];
listTimeInPixels = [];
this.initializeValues();
for(var i = 0; i<newArray.length; i++) {
if(isDateValid(newArray[i])) {
listTime.push(newArray[i]);
}
}
this.initializeAttributeValues();
/* list data to sort */
listTime = listTime.sort();
positionLastDay = parseInt(listTime.length);
this.indectBasicStructure();
/* attribute: total number day */
totalDay = daysBetween(listTime[0], listTime[positionLastDay - 1]);
this.paintWedge();
this.paintMarker();
this.runEvent();
};
this.addDate = function(newDate) {
if(isDateValid(newDate)) {
var thereDate = false;
for(var i = 0; i < listTime.length; i++) {
if(listTime[i]==newDate) {
thereDate = true;
break;
}
}
if(thereDate == false) {
listTimeInPixels = [];
/* list data to sort */
listTime.push(newDate);
listTime = listTime.sort();
positionLastDay = parseInt(listTime.length);
this.indectBasicStructure();
/* attribute: total number day */
totalDay = daysBetween(listTime[0], listTime[positionLastDay - 1]);
this.paintWedge();
this.paintMarker();
this.runEvent();
}
}
};
this.deleteDate = function(delDate) {
if(isDateValid(delDate)) {
var thereDate = false;
for(var i = 0; i < listTime.length; i++) {
if(listTime[i] === delDate) {
listTime.splice(i,1);
thereDate = true;
break;
}
}
if(thereDate == true) {
listTimeInPixels = [];
/* list data to sort */
listTime = listTime.sort();
positionLastDay = parseInt(listTime.length);
this.indectBasicStructure();
/* attribute: total number day */
totalDay = daysBetween(listTime[0], listTime[positionLastDay - 1]);
this.paintWedge();
this.paintMarker();
this.runEvent();
}
}
};
/*
*
* initialize slider
*
* */
this.initializeSlider = function(){
this.initializeValues();
this.findAndLoadDate();
this.initializeAttributeValues();
/* list data to sort */
listTime = listTime.sort();
positionLastDay = parseInt(listTime.length);
this.indectBasicStructure();
/* attribute: total number day */
totalDay = daysBetween(listTime[0], listTime[positionLastDay - 1]);
this.paintWedge();
this.paintMarker();
this.runEvent();
}
this.initializeSlider();
};
/*
*
* interfaz from the element
*
* */
{
var realSlider = [];
this.add = function (id) {
realSlider[id] = new ObjectRealSlider(id);
};
this.value = function (id,newArray) {
id = id.substring(1,id.length);
if(Object.prototype.toString.call(newArray) === "[object Array]") {
realSlider[id].changeValue(newArray);
}
};
this.addDate = function (id,newDate) {
id = id.substring(1,id.length);
realSlider[id].addDate(newDate);
};
this.deleteDate = function (id,delDate) {
id = id.substring(1,id.length);
realSlider[id].deleteDate(delDate);
};
this.clickOff = function (id) {
realSlider[id].clickOff();
};
this.clickInitialOn = function (id) {
realSlider[id].clickInitialOn();
};
this.clickFinalOn = function (id) {
realSlider[id].clickFinalOn();
};
this.help = function () {
alert("el texto de la ayuda");
}
}
}
jQuery.fn.extend({
frameworkRealSlider: function() {
$(this).each(function(index, element) {
var id = $(element).attr('id');
frameworkObject.realSlider.add(id);
})
}
});