diff --git a/assets/css/main.css b/assets/css/main.css index 461e366..14a59bf 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -24,7 +24,6 @@ hr { background: #ffffff; background-size: 600% 600%; - animation: Animation 25s ease-in-out infinite; display: flex; text-align: center; diff --git a/src/main.js b/src/main.js index e9350ee..d2e3bcb 100644 --- a/src/main.js +++ b/src/main.js @@ -209,11 +209,15 @@ function pickColors(num) // get gradient speed and set the gradient chrome.storage.sync.get({ - gradientSpeed: 25 + gradientSpeed: 25, + animateGradient: true }, function(items) { container.style.background = "linear-gradient(45deg, " + colorString + ")"; container.style.backgroundSize = "200% 200%"; container.style.animation = "Animation " + items.gradientSpeed + "s ease-in-out infinite"; + + if (!items.animateGradient) + container.style.webkitAnimationPlayState = "paused"; }); // set the options menu info diff --git a/src/options.js b/src/options.js index e74c136..3ede658 100644 --- a/src/options.js +++ b/src/options.js @@ -24,10 +24,16 @@ function updatePrefs(event) { { formatDateString(); updateDate(); + } else if (id == "animateGradient") { + if (event.target.checked) { + container.style.webkitAnimationPlayState = "running"; + } else { + container.style.webkitAnimationPlayState = "paused"; + } } } -// called when one of the gradien selection radios is pressed +// called when one of the gradient selection radios is pressed function changeSelectionMode(event) { // change it to either "random" or "select" @@ -61,7 +67,8 @@ function restoreOptions() gradientSpeed: 25, showDayOfWeek: true, showDayOfMonth: true, - showYear: true + showYear: true, + animateGradient: true }, function(items) { // set up switches according to stored options document.getElementById('showTime').checked = items.showTime; @@ -70,6 +77,7 @@ function restoreOptions() document.getElementById("showDayOfWeek").checked = items.showDayOfWeek; document.getElementById("showDayOfMonth").checked = items.showDayOfMonth; document.getElementById("showYear").checked = items.showYear; + document.getElementById("animateGradient").checked = items.animateGradient; // set the slider position to the current value document.getElementById("opt-speed").value = items.gradientSpeed; @@ -115,6 +123,7 @@ function resetOptions() options.showDayOfWeek = true, options.showDayOfMonth = true, options.showYear = true + options.animateGradient = true; // set the storage chrome.storage.sync.set(options); diff --git a/wavetab.html b/wavetab.html index 5aed57e..08e4165 100644 --- a/wavetab.html +++ b/wavetab.html @@ -82,6 +82,11 @@

Current Gradient Info

Name:

Package:

ID:

+
+
  • Animate Gradient
  • Gradient Selection