Dashboard Animations - Using a Cookie

dashboard-animations-using-a-cookie.markdown

Dashboard Animations - Using a Cookie

A Pen by Chase Harrison on CodePen.

License.

index.html

<input id="enableAnimations" type="checkbox" value="on"/>
<label for="enableAnimations">Dashboard Animations On</label>


<button onclick="getCookie()">TEST</button>

script.js

$(document).ready(function() {
  
  
  // Dashboard Animations
  getCookie(); // Get page defaults
    var $animations = $("#enableAnimations");
  
    $($animations).on("change", function() {
      var $value = $(this).val().toString();
      if($value === "on"){
        $(this).val("off");
        setCookie("animationcookie", "animationcookie0", 365);
        $("#enableAnimations").next().text("Animations Off");
      } else {
        $(this).val("on");
        setCookie("animationcookie", "animationcookie1", 365);
        $("#enableAnimations").next().text("Animations On");
      }
      getCookie();
    });

}); //Doc Ready

function getCookie() {
    var cookiesArray = document.cookie.split("; ");
    var filterArray = [];
    for (var i = 0; i < cookiesArray.length; i++) {
        var nameValueArray = cookiesArray[i].split("=");
        // Adds defaults depending on Cookies
        if (nameValueArray[0] === "animationcookie" && nameValueArray[1] === "animationcookie1") {
          $("body").addClass("animations");
          $("#enableAnimations").prop("checked", true);
          $("#enableAnimations").next().text("Animations On");
        } else {
          $("#enableAnimations").prop("checked", false);
          $("#enableAnimations").next().text("Animations Off");
          $("body").removeClass("animations");
        }
    }
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.animations {background-color: blue;}