Merge branch '27-safari-checked-items-don-t-change-color' into 'develop'

Resolve "Safari - checked items don't change color"

See merge request bluekay/shopping-list!14
This commit is contained in:
Tim Krehan 2019-05-26 15:23:44 +00:00
commit e784def47f
4 changed files with 50 additions and 48 deletions

View file

@ -11,18 +11,18 @@
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item <?php if(($site=="list")||($site=="-1")){print_r("active");} ?>"> <li class="nav-item <?php if(($site=="list")||($site=="-1")){print_r("active");} ?>">
<a class="nav-link" href="/list"><i class="fas fa-list"></i> Liste</a> <a class="nav-link-font nav-link" href="/list"><i class="fas fa-list"></i> Liste</a>
</li> </li>
<li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>"> <li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>">
<a class="nav-link" href="/recipes"><i class="fas fa-book"></i> Rezepte</a> <a class="nav-link-font nav-link" href="/recipes"><i class="fas fa-book"></i> Rezepte</a>
</li> </li>
</ul> </ul>
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item <?php if($site=="settings"){print_r("active");} ?>"> <li class="nav-item <?php if($site=="settings"){print_r("active");} ?>">
<a class="nav-link" href="/settings"><i class="fas fa-user-cog"></i></a> <a class="nav-link-font nav-link" href="/settings"><i class="fas fa-user-cog"></i></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/php/logout.php"><i class="fas fa-sign-out-alt"></i></a> <a class="nav-link-font nav-link" href="/php/logout.php"><i class="fas fa-sign-out-alt"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -30,7 +30,7 @@
<div class="collapse w-75 pl-2" id="navbarToggleResponsive"> <div class="collapse w-75 pl-2" id="navbarToggleResponsive">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item <?php if($site=="list"){print_r("active");} ?>"> <li class="nav-item <?php if(($site=="list")||($site=="-1")){print_r("active");} ?>">
<a class="nav-link" href="/list"><i class="fas fa-list"></i> Liste</a> <a class="nav-link" href="/list"><i class="fas fa-list"></i> Liste</a>
</li> </li>
<li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>"> <li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>">

View file

@ -9,11 +9,11 @@ $(document).ready(function () {
function highlightNewEntry(){ function highlightNewEntry(){
var cookies = document.cookie; var cookies = document.cookie;
var cookieRegExp = new RegExp(/;?\s+newItem=(\d+)/g); var cookieRegExp = new RegExp(/[;]{0,1}\s{0,1}newItem=(\d+)/g);
var match = cookieRegExp.exec(cookies); var match = cookieRegExp.exec(cookies);
if(match!=null){ if(match!=null){
var newID = match[1]; var newID = match[1];
var checkBox = $("[data-id=" + newID + "]"); var checkBox = $(`[data-id='${newID}']`);
var newRow = checkBox.parent().parent(); var newRow = checkBox.parent().parent();
newRow.removeClass($(checkBox).data("color")); newRow.removeClass($(checkBox).data("color"));
newRow.addClass("alert-primary"); newRow.addClass("alert-primary");
@ -22,7 +22,6 @@ function highlightNewEntry(){
newRow.addClass($(checkBox).data("color")); newRow.addClass($(checkBox).data("color"));
}, 1000); }, 1000);
document.cookie = "newItem=-1" document.cookie = "newItem=-1"
console.log(document.cookie);
} }
} }
@ -48,29 +47,29 @@ function checkItem() {
status: $(this).prop("checked") status: $(this).prop("checked")
}, },
success: function () { success: function () {
var color = $("[data-id='" + dataId + "'").data("color"); var dataIdSelector = (`[data-id='${dataId}']`);
var color = $(dataIdSelector).data("color");
$("[data-id='" + dataId + "'").parent().parent().removeClass("bg-danger"); $(dataIdSelector).parent().parent().removeClass("bg-danger");
if($("[data-id='" + dataId + "'").prop("checked")){ if($(dataIdSelector).prop("checked")){
$("[data-id='" + dataId + "'").parent().parent().removeClass(color); $(dataIdSelector).parent().parent().removeClass(color);
$("[data-id='" + dataId + "'").parent().parent().addClass("bg-success"); $(dataIdSelector).parent().parent().addClass("bg-success");
} }
else{ else{
$("[data-id='" + dataId + "'").parent().parent().removeClass("bg-success"); $(dataIdSelector).parent().parent().removeClass("bg-success");
$("[data-id='" + dataId + "'").parent().parent().addClass(color); $(dataIdSelector).parent().parent().addClass(color);
} }
}, },
error: function () { error: function () {
$("[data-id='" + dataId + "'").parent().parent().addClass("bg-danger"); $(dataIdSelector).parent().parent().addClass("bg-danger");
$("[data-id='" + dataId + "'").parent().parent().data("toggle", "popover"); $(dataIdSelector).parent().parent().data("toggle", "popover");
$("[data-id='" + dataId + "'").parent().parent().data("container", "body"); $(dataIdSelector).parent().parent().data("container", "body");
$("[data-id='" + dataId + "'").parent().parent().data("placement", "top"); $(dataIdSelector).parent().parent().data("placement", "top");
$("[data-id='" + dataId + "'").parent().parent().data("html", true); $(dataIdSelector).parent().parent().data("html", true);
$("[data-id='" + dataId + "'").parent().parent().data("trigger", "focus"); $(dataIdSelector).parent().parent().data("trigger", "focus");
$("[data-id='" + dataId + "'").parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren"); $(dataIdSelector).parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
$("[data-id='" + dataId + "'").parent().parent().attr("title", "Fehler!"); $(dataIdSelector).parent().parent().attr("title", "Fehler!");
$("[data-id='" + dataId + "'").parent().parent().popover('show'); $(dataIdSelector).parent().parent().popover('show');
} }
}); });
} }

View file

@ -1,33 +1,32 @@
$(document).ready(function(){ $(document).ready(function () {
var recipes = $("#recipes a"); $("#search-recipes").on("keyup", searchRecipe);
var headerLetters = $("#recipes h2");
$("#search-recipes").on("keyup", searchRecipe(recipes, headerLetters));
$("#clear-search-string").click(clearSearchString); $("#clear-search-string").click(clearSearchString);
}); });
function searchRecipe(recipes, headerLetters) { function searchRecipe() {
return function () { var searchString = $("#search-recipes").val().toUpperCase();
var search = $("#search-recipes").val().toUpperCase(); var recipes = $("#recipes a");
for (var i = 0; i < recipes.length; i++) {
if (recipes[i].innerHTML.toUpperCase().indexOf(search) > -1) { for (var i = 0; i < recipes.length; i++) {
recipes[i].style.display = ""; if (recipes[i].innerHTML.toUpperCase().indexOf(searchString) > -1) {
} $(recipes[i]).show()
else {
recipes[i].style.display = "none";
}
} }
for (var j = 0; j < headerLetters.length; j++) { else {
if (($("*[data-letter='" + headerLetters[j].innerHTML + "']:visible")).length > 0) { $(recipes[i]).hide();
headerLetters[j].style.display = "";
}
else {
headerLetters[j].style.display = "none";
}
} }
}; }
$("#recipes").children().each(index => {
var container = ($("#recipes").children())[index];
$(container).removeClass("d-none").addClass("d-flex");
if(($(container).find("a:visible")).length==0){
$(container).removeClass("d-flex").addClass("d-none");
}
});
} }
function clearSearchString(){ function clearSearchString() {
$("#search-recipes").val(""); $("#search-recipes").val("");
$("#search-recipes").focus(); $("#search-recipes").focus();
$("#search-recipes").keyup(); $("#search-recipes").keyup();

View file

@ -6,4 +6,8 @@
.list-row { .list-row {
transition: .5s; transition: .5s;
}
.nav-link-font {
font-size: 16px !important;
} }