Switch to CSS animation

flack · Sep 9, 2019 · bd50a3d · bd50a3d
1 parent 1868b67
commit bd50a3d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/lib/midcom/services/uimessages.php b/lib/midcom/services/uimessages.php
@@ -98,8 +98,6 @@ public function add_head_elements()
     {
         midcom::get()->head->enable_jquery();
         midcom::get()->head->add_jsfile(MIDCOM_STATIC_URL . '/midcom.services.uimessages/jquery.midcom_services_uimessages.js');
-        midcom::get()->head->add_jsfile(MIDCOM_JQUERY_UI_URL . '/effect.min.js');
-        midcom::get()->head->add_jsfile(MIDCOM_JQUERY_UI_URL . '/effects/effect-pulsate.min.js');
         midcom::get()->head->add_stylesheet(MIDCOM_STATIC_URL . '/stock-icons/font-awesome-4.7.0/css/font-awesome.min.css');
         midcom::get()->head->add_stylesheet(MIDCOM_STATIC_URL . '/midcom.services.uimessages/growl.css', 'screen');
     }

diff --git a/static/midcom.services.uimessages/growl.css b/static/midcom.services.uimessages/growl.css
@@ -2,6 +2,27 @@
  * Styles for ui messages with javascript
  */
 
+@keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+  92% {
+    opacity: 1;
+  }
+  94% {
+    opacity: 0;
+  }
+  96% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 #midcom_services_uimessages_wrapper
 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
@@ -62,6 +83,11 @@
   color: #333;
 }
 
+#midcom_services_uimessages_wrapper div.error.pulsate
+{
+    animation: pulsate 7s cubic-bezier(.5, 0, 1, 1) .5s infinite;
+}
+
 #midcom_services_uimessages_wrapper div.error h3
 {
   font-size: 100%;

diff --git a/static/midcom.services.uimessages/jquery.midcom_services_uimessages.js b/static/midcom.services.uimessages/jquery.midcom_services_uimessages.js
@@ -72,10 +72,9 @@ $.fn.midcom_services_uimessage = function(options) {
 
         case MIDCOM_SERVICES_UIMESSAGES_TYPE_ERROR:
             if (MIDCOM_SERVICES_UIMESSAGES_ERROR_HIGHLIGHT) {
-                $('#' + id).data('interval', setInterval(function() {
-                    $('#' + id).effect('pulsate', { times: 1}, 500);
-                }, 7000));
+                $('#' + id).addClass('pulsate');
             }
+            break;
 
         case MIDCOM_SERVICES_UIMESSAGES_TYPE_OK:
         case MIDCOM_SERVICES_UIMESSAGES_TYPE_WARNING: