/**
* plugin name: jQuery Dragval
* varsion: 1.0
* Alpha
* license: GNU GENERAL PUBLIC LICENSE v3
*
* September 21, 2010
*
* Copyright (c) 2010 Kamil Szalewski (http://szalewski.pl, http://pimago.pl)
*
* jQuery Dragval is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* jQuery Dragval is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Foobar. If not, see .
*
**/
(function($) {
jQuery.fn.dragval = function(options) {
set = jQuery.extend({
out: ".Output", // klasa inputa wyjściowego
actMin: ".ActMin", // input przetrzymujący aktualnie najmniejszą wartość
actMax: ".ActMax", // input przetrzymujący aktualnie największą wartość
loop: ".Loop", // input do sprawdzania czy pętla true, czy false
dragloop: ".DragLoop", // input do sprawdzania czy odpalona zostala juz akcja przesuwania miarki po dojechaniu do konca
rightloop: ".RightLoop", // sprawdza czy petla po wyjechaniu jest w prawo
leftloop: ".LeftLoop", // jw w lewo
mouseout: ".MouseOut", // input sledzacy czy kursor jest na miarce
measure: ".Measure", // klasa wartości miarki
indicator: ".Indicator", // klasa wskaźnika
track: ".Track", // klasa trasy wskaźnika
label: ".Label", // klasa jednej przedziałki
labels: ".Labels", // klasa wszystkich przedziałek
leftBtn: ".LeftBtn", // lewa strzałka
rightBtn: ".RightBtn", // prawa strzałka
loopTime: 60, // czas kolejnego przejścia miarki przy przytrzymywaniu strzałki (ms)
clickTime: 200, // czas po jakim zaczyna się pętla a kończy pojedyńcze kliknięcie (ms)
step: 10000, // wartość jednego kroku
min: 10000, // minimalna wartość
max: 2000000, // maksymalna wartość
startValue: 0, // startowa wartosc na pasku
indicStep: 51.7, // długość jednego kroku (px)
iniPosition: 17 // odległość od początku trasy przy starcie (px)
}, options);
this.each(function() {
var obj = $(this);
obj.prepend('
'
+'
'
+''
+''
+'
'
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+'
'
+''
+'
'
+''
+'
'
+''
+''
+''
+''
+''
+''
+'');
var indicator = set.indicator;
var loopTime = Number(set.loopTime);
var clickTime = Number(set.clickTime);
var step = Number(set.step);
var min = Number(set.min);
var max = Number(set.max);
var startValue = Number(set.startValue);
var indicStep = Number(set.indicStep);
var iniPosition = Number(set.iniPosition);
if(startValue > 0) {
$(set.out, obj).attr("value", set.startValue);
$(set.actMin, obj).attr("value", set.startValue); // aktualnie najmniejsza wartość
$(set.actMax, obj).attr("value", set.startValue+(9*set.step)); // aktualnie największa wartość
toValue( startValue );
} else {
// przypisujemy polom zdefinoiowane wartości...
$(set.out, obj).attr("value", set.min);
$(set.actMin, obj).attr("value", set.min); // aktualnie najmniejsza wartość
$(set.actMax, obj).attr("value", set.min+(9*set.step)); // aktualnie największa wartość
//... i generujemy miarkę
var x = set.min;
$(set.measure, obj).html(" ");
// ta pętla wypełnia diva z miarką od wartości najmniejszej do największej
while (x <= set.min+(9*set.step)) {
$(set.measure, obj).append(""+number_format(x," ")+"");
x = x+set.step;
}
}
//
// zaczynamy zabawę ;-)
// AKCJE
// obsługa drag
var track = $(set.track, obj);
$(indicator, obj).draggable({
axis: 'x',
containment: track,
grid: [indicStep, indicStep],
stop: function(event, ui) {
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
$(set.out, obj).attr("value", Number((posNumber-1)*step)+actMin);
$(set.loop, obj).attr("value", 0);
$(set.dragloop, obj).attr("value", 0);
$(set.mouseout, obj).attr("value", 0);
$(set.rightloop, obj).attr("value", 0);
$(set.leftloop, obj).attr("value", 0);
},
drag: function(event, ui) {
// odpowiada za przesuwanie po wyjechaniu w lewo lub prawo
if($(set.dragloop, obj).attr("value")=='0') {
if(Number($(indicator, obj).css("left").split("px")[0])<=17 && $(set.mouseout, obj).attr("value")=='1') {
$(set.loop, obj).attr("value", 1);
$(set.dragloop, obj).attr("value", 1);
$(set.leftloop, obj).attr("value", 1);
moveLeft();
}
if(Number($(indicator, obj).css("left").split("px")[0])>=481 && $(set.mouseout, obj).attr("value")=='1') {
$(set.loop, obj).attr("value", 1);
$(set.dragloop, obj).attr("value", 1);
$(set.rightloop, obj).attr("value", 1);
moveRight();
}
} else if(Number($(indicator, obj).css("left").split("px")[0]) < 482 && $(set.rightloop, obj).attr("value")=='1') {
$(set.loop, obj).attr("value", 0);
$(set.dragloop, obj).attr("value", 0);
$(set.rightloop, obj).attr("value", 0);
} else if(Number($(indicator, obj).css("left").split("px")[0]) > 17 && $(set.leftloop, obj).attr("value")=='1') {
$(set.loop, obj).attr("value", 0);
$(set.dragloop, obj).attr("value", 0);
$(set.leftloop, obj).attr("value", 0);
}
//$("#Debug").html(Math.round(Number($(indicator, obj).css("left").split("px")[0]))-Math.round(iniPosition));
if(Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ) >= 1 && Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ) <= 10) {
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
$(set.out, obj).attr("value", Number((posNumber-1)*step)+actMin);
}
}
});
// po kliknięciu w przedziałke
$(set.label, obj).click(function() {
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
var posNumber = $(this).attr("id").split("-")[1]; // number pozycji na linijce
var distance = Number(posNumber * indicStep)-indicStep; // długość pomiędzy początkiem a labelem na którego kliknięto
$(set.out, obj).attr("value", Number((posNumber-1)*step)+actMin);
$(set.indicator, obj).css("left", distance+iniPosition+"px");
});
// lewy przycisk
$(set.leftBtn, obj).mousedown(function() {
$(set.loop, obj).attr("value", 1);
moveLeftWarun( 1 );
}).mouseup(function() {
$(set.loop, obj).attr("value", 0);
$(set.mouseout, obj).attr("value", 0);
});
// prawy przycisk
$(set.rightBtn, obj).mousedown(function() {
$(set.loop, obj).attr("value", 1);
moveRightWarun( 1 );
}).mouseup(function() {
$(set.loop, obj).attr("value", 0);
$(set.mouseout, obj).attr("value", 0);
});
// wyjechanie poza miarkę z przytrzymanym przyciskiem
$(set.labels, obj).mouseleave(function() {
if($(indicator, obj).attr("class")=="Indicator ui-draggable ui-draggable-dragging") {
$(set.loop, obj).attr("value", 1);
$(set.mouseout, obj).attr("value", 1);
}
}).mouseover(function() {
$(set.loop, obj).attr("value", 0);
$(set.mouseout, obj).attr("value", 0);
});
$(indicator, obj).mouseleave(function() {
if($(indicator, obj).attr("class")=="Indicator ui-draggable ui-draggable-dragging") {
$(set.loop, obj).attr("value", 1);
$(set.mouseout, obj).attr("value", 1);
}
});
// puszczenie indicatora
$(indicator, obj).mouseup(function() {
$(set.loop, obj).attr("value", 0);
$(set.mouseout, obj).attr("value", 0);
});
// obsługa wpisywania wartości do inputa
$(set.out, obj).focusout(function() {
var newValue = Number((Math.round(Number($(set.out, obj).attr("value"))/step))*step); // nowa wartość po obliczeniu i zaokrągleniu
if(integer_validate(newValue)) {
toValue( newValue );
} else {
toValue( min );
$(set.out, obj).attr("value", min);
}
});
// FUNKCJE
function toValue( newValue ) { // funckja przesuwa indicator do wybranej wartosci
if(newValue >= min && newValue <= max) {
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
// jeżeli nowa wartość jest równa max
if(newValue==max) {
$(set.actMin, obj).attr("value", newValue-(9*step));
$(set.actMax, obj).attr("value", newValue);
//$(set.out, obj).attr("value", newValue);
$(indicator, obj).css("left", iniPosition+(9*indicStep)+"px"); // przesuwamy indicator'a
//... i generujemy miarkę
var x = newValue-(9*step);
$(set.measure, obj).html(" ");
// ta pętla wypełnia diva z miarką od wartości najmniejszej do największej
while (x <= newValue) {
$(set.measure, obj).append(""+number_format(x," ")+"");
x = x+step;
}
// jeżeli nowa wartość jest w obrębie aktualniej miarki
} else if(newValue > actMin && newValue < actMax) {
var stepsTo = (10-((actMax-newValue)/step))-1; // obliczamy ilość kroków na miarce do osiągnięcia nowej wartości
//$(set.out, obj).attr("value", newValue);
$(indicator, obj).css("left", (stepsTo*indicStep)+17+"px"); // przesuwamy indicator'a
} else { // jeżeli nie
$(set.actMin, obj).attr("value", newValue);
$(set.actMax, obj).attr("value", newValue+(9*step));
//$(set.out, obj).attr("value", newValue);
$(indicator, obj).css("left", "17px"); // przesuwamy indicator'a
//... i generujemy miarkę
var x = newValue;
$(set.measure, obj).html(" ");
// ta pętla wypełnia diva z miarką od wartości najmniejszej do największej
while (x <= (newValue+(9*step))) {
$(set.measure, obj).append(""+number_format(x," ")+"");
x = x+step;
}
}
} else if(newValue > max) {
toValue( max );
$(set.out, obj).attr("value", max);
} else if(newValue < min) {
toValue( min );
$(set.out, obj).attr("value", min);
}
}
function integer_validate(src) {
var regex = /^[\-]{0,1}[0-9]{1,8}$/;
return regex.test(src);
}
function number_format(l,r){w='';while(a=~~(l/1e3)){w=r+((b=l%1e3)>9?(b>99?'':'0'):'00')+b+w;l=a}return l+w}
// funkcja bez warunku sprawdzającego czy ma zacząć zapętlanie W LEWO
function moveLeft() {
var actValue = Number($(set.out, obj).attr("value")); // aktualna wartość inputa
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
// jeżeli aktualny max jest większy od maxa to jedziemy ze skryptem...
if(actMin>min) {
$(set.out, obj).attr("value", actValue-step);
$(set.actMin, obj).attr("value", actMin-step);
$(set.actMax, obj).attr("value", actMax-step);
var x = Number($(set.actMin, obj).attr("value"));
$(set.measure, obj).html(""); // czyścimy diva z miarką
// ta pętla wypełnia diva z miarką od wartości najmniejszej do największej
while (x <= Number($(set.actMax, obj).attr("value"))) {
$(set.measure, obj).append(""+number_format(x," ")+"");
x = x+step;
}
} else {
// ...a jeżeli nie to przesuwamy Indicator'a...
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
var distance = Number(posNumber * indicStep)-indicStep; // długość pomiędzy początkiem a labelem na którego kliknięto
// ...no chyba, że się nie na :)
if(posNumber>1) {
$(set.out, obj).attr("value", (Number((posNumber-1)*step)+actMin)-step);
$(indicator, obj).css("left", (distance+iniPosition)-indicStep+"px");
}
}
if($(set.loop, obj).attr("value")>0) {
setTimeout(moveLeft, loopTime);
}
}
// funckja z warunkiem sprawdzającym czy ma zacząć zapętlanie W LEWO
function moveLeftWarun( w ) {
var actValue = Number($(set.out, obj).attr("value")); // aktualna wartość inputa
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
// jeżeli aktualny max jest większy od maxa to jedziemy ze skryptem...
if(actMin>min) {
$(set.out, obj).attr("value", actValue-step);
$(set.actMin, obj).attr("value", actMin-step);
$(set.actMax, obj).attr("value", actMax-step);
var x = Number($(set.actMin, obj).attr("value"));
$(set.measure, obj).html(""); // czyścimy diva z miarką
// ta pętla wypełnia diva z miarką od wartości najmniejszej do największej
while (x <= Number($(set.actMax, obj).attr("value"))) {
$(set.measure, obj).append(""+number_format(x," ")+"");
x = x+step;
}
} else {
// ...a jeżeli nie to przesuwamy Indicator'a...
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
var distance = Number(posNumber * indicStep)-indicStep; // długość pomiędzy początkiem a labelem na którego kliknięto
// ...no chyba, że się nie na :)
if(posNumber>1) {
$(set.out, obj).attr("value", (Number((posNumber-1)*step)+actMin)-step);
$(indicator, obj).css("left", (distance+iniPosition)-indicStep+"px");
}
}
if(w>0) {
setTimeout(checkLoopLeft, clickTime);
} else {
if($(set.loop, obj).attr("value")>0) {
setTimeout(moveLeft, loopTime);
}
}
}
// funkcja sprawdza czy odpalić lewą pętlę
function checkLoopLeft() {
if($(set.loop, obj).attr("value")>0) {
moveLeft();
}
}
// funkcja bez warunku sprawdzającego czy ma zacząć zapętlanie W LEWO
function moveRight() {
var actValue = Number($(set.out, obj).attr("value")); // aktualna wartość inputa
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
// jeżeli aktualny max jest większy od maxa to jedziemy ze skryptem...
if(actMax"+number_format(x," ")+"");
x = x+step;
}
} else {
// ...a jeżeli nie to przesuwamy Indicator'a...
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
var distance = Number(posNumber * indicStep)-indicStep; // długość pomiędzy początkiem a labelem na którego kliknięto
// ...no chyba, że się nie na :)
if(posNumber<10) {
$(set.out, obj).attr("value", (Number((posNumber-1)*step)+actMin)+step);
$(indicator, obj).css("left", (distance+iniPosition)+indicStep+"px");
}
}
if($(set.loop, obj).attr("value")>0) {
setTimeout(moveRight, loopTime);
}
}
// funckja z warunkiem sprawdzającym czy ma zacząć zapętlanie W LEWO
function moveRightWarun( w ) {
var actValue = Number($(set.out, obj).attr("value")); // aktualna wartość inputa
var actMin = Number($(set.actMin, obj).attr("value")); // aktualnie najmniejsza wartość
var actMax = Number($(set.actMax, obj).attr("value")); // aktualnie największa wartość
// jeżeli aktualny max jest większy od maxa to jedziemy ze skryptem...
if(actMax"+number_format(x," ")+"");
x = x+step;
}
} else {
// ...a jeżeli nie to przesuwamy Indicator'a...
var posNumber = Math.round( ( ( Number($(indicator, obj).css("left").split("px")[0]) - iniPosition ) / indicStep ) + 1 ); // numer pozycji na linijce
var distance = Number(posNumber * indicStep)-indicStep; // długość pomiędzy początkiem a labelem na którego kliknięto
// ...no chyba, że się nie na :)
if(posNumber<10) {
$(set.out, obj).attr("value", (Number((posNumber-1)*step)+actMin)+step);
$(indicator, obj).css("left", (distance+iniPosition)+indicStep+"px");
}
}
if(w>0) {
setTimeout(checkLoopRight, clickTime);
} else {
if($(set.loop, obj).attr("value")>0) {
setTimeout(moveRight, loopTime);
}
}
}
// funkcja sprawdza czy odpalić prawą pętlę
function checkLoopRight() {
if($(set.loop, obj).attr("value")>0) {
moveRight();
}
}
});
return this;
};
})(jQuery);