Added shake movements on errors for better visual feedback, closing #5
This commit is contained in:
Lukas Metzger
parent
0c4bb7e127
commit
bda3384ad7
|
|
@ -22,6 +22,8 @@ $(document).ready(function() {
|
|||
saveData(function(id) {
|
||||
location.assign("edit-master.php#" + id);
|
||||
});
|
||||
} else {
|
||||
shake($('#zone-button-add'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -74,4 +76,20 @@ function saveData(callback) {
|
|||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
|
||||
function shake(element){
|
||||
var interval = 50;
|
||||
var distance = 5;
|
||||
var times = 6;
|
||||
|
||||
$(element).css('position','relative');
|
||||
|
||||
for(var iter=0;iter<(times+1);iter++){
|
||||
$(element).animate({
|
||||
left:((iter%2===0 ? distance : distance*-1))
|
||||
},interval);
|
||||
}
|
||||
|
||||
$(element).animate({ left: 0},interval);
|
||||
}
|
||||
|
|
@ -36,6 +36,8 @@ $(document).ready(function() {
|
|||
if(validateSoaData()) {
|
||||
saveSoaData();
|
||||
$('#soa button[type=submit]').prop("disabled", true);
|
||||
} else {
|
||||
shake($('#soa button[type=submit]'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -273,6 +275,7 @@ function saveRecord() {
|
|||
var tableRow = $(this).parent().parent();
|
||||
|
||||
if(!validateLine.call(this)) {
|
||||
shake($(this));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -324,6 +327,7 @@ function saveRecord() {
|
|||
|
||||
function addRecord() {
|
||||
if(!validateLine.call(this)) {
|
||||
shake($('#addButton'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -450,4 +454,20 @@ function validateLine() {
|
|||
function remoteClicked() {
|
||||
var recordId = $(this).parent().siblings().eq(0).text();
|
||||
location.assign("edit-remote.php#" + recordId);
|
||||
}
|
||||
|
||||
function shake(element){
|
||||
var interval = 50;
|
||||
var distance = 5;
|
||||
var times = 6;
|
||||
|
||||
$(element).css('position','relative');
|
||||
|
||||
for(var iter=0;iter<(times+1);iter++){
|
||||
$(element).animate({
|
||||
left:((iter%2===0 ? distance : distance*-1))
|
||||
},interval);
|
||||
}
|
||||
|
||||
$(element).animate({ left: 0},interval);
|
||||
}
|
||||
|
|
@ -103,6 +103,7 @@ function resetFields() {
|
|||
function addPassword() {
|
||||
if($('#data-password-password').val() != $('#data-password-password2').val() || $('#data-password-password').val().length <= 0) {
|
||||
$('#data-password-password2').parent().addClass("has-error");
|
||||
shake($('#data-password-confirm'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -128,6 +129,7 @@ function addPassword() {
|
|||
function addKey() {
|
||||
if($('#data-key-key').val().length <= 0) {
|
||||
$('#data-key-key').parent().addClass("has-error");
|
||||
shake($('#data-key-confirm'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -265,4 +267,20 @@ function changeKey() {
|
|||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
|
||||
function shake(element){
|
||||
var interval = 50;
|
||||
var distance = 5;
|
||||
var times = 6;
|
||||
|
||||
$(element).css('position','relative');
|
||||
|
||||
for(var iter=0;iter<(times+1);iter++){
|
||||
$(element).animate({
|
||||
left:((iter%2===0 ? distance : distance*-1))
|
||||
},interval);
|
||||
}
|
||||
|
||||
$(element).animate({ left: 0},interval);
|
||||
}
|
||||
|
|
@ -99,12 +99,15 @@ function addUser() {
|
|||
if($('#user-password').val().length <= 0) {
|
||||
$('#user-password').parent().addClass("has-error");
|
||||
$('#user-password2').parent().addClass("has-error");
|
||||
shake($('#user-button-add'));
|
||||
}
|
||||
|
||||
if($('#user-name').parent().hasClass("has-error")) {
|
||||
shake($('#user-button-add'));
|
||||
return;
|
||||
}
|
||||
if($('#user-password2').parent().hasClass("has-error")) {
|
||||
shake($('#user-button-add'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -146,6 +149,16 @@ function getUserData() {
|
|||
}
|
||||
|
||||
function saveUserChanges() {
|
||||
|
||||
if($('#user-name').parent().hasClass("has-error")) {
|
||||
shake($('#user-button-add'));
|
||||
return;
|
||||
}
|
||||
if($('#user-password2').parent().hasClass("has-error")) {
|
||||
shake($('#user-button-add'));
|
||||
return;
|
||||
}
|
||||
|
||||
var data = {
|
||||
id: location.hash.substring(1),
|
||||
name: $('#user-name').val(),
|
||||
|
|
@ -233,4 +246,20 @@ function addPermissions() {
|
|||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
|
||||
function shake(element){
|
||||
var interval = 50;
|
||||
var distance = 5;
|
||||
var times = 6;
|
||||
|
||||
$(element).css('position','relative');
|
||||
|
||||
for(var iter=0;iter<(times+1);iter++){
|
||||
$(element).animate({
|
||||
left:((iter%2===0 ? distance : distance*-1))
|
||||
},interval);
|
||||
}
|
||||
|
||||
$(element).animate({ left: 0},interval);
|
||||
}
|
||||
|
|
@ -41,6 +41,7 @@ function savePassword() {
|
|||
$('#user-password2').parent().addClass("has-error");
|
||||
}
|
||||
if($('#user-password2').parent().hasClass("has-error")) {
|
||||
shake($('#saveChanges'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -61,3 +62,18 @@ function savePassword() {
|
|||
);
|
||||
}
|
||||
|
||||
function shake(element){
|
||||
var interval = 50;
|
||||
var distance = 5;
|
||||
var times = 6;
|
||||
|
||||
$(element).css('position','relative');
|
||||
|
||||
for(var iter=0;iter<(times+1);iter++){
|
||||
$(element).animate({
|
||||
left:((iter%2===0 ? distance : distance*-1))
|
||||
},interval);
|
||||
}
|
||||
|
||||
$(element).animate({ left: 0},interval);
|
||||
}
|
||||
Loading…
Reference in a new issue