Handle API error and add micro-animation

Author: tzi

plugins/SegmentEditor/API.php

@@ -355,13 +355,13 @@ public function add(
      * @param int $idSegment
      * @throws Exception if the user is not logged in or does not have the required permissions.
      */
-    public function star(int $idSegment): void
+    public function star(int $idSegment): bool
     {
         $segment = $this->getSegmentOrFail($idSegment);
         $this->checkUserCanEditOrDeleteSegment($segment);
         $bind = ['starred' => 1];
 
-        $this->getModel()->updateSegment($idSegment, $bind);
+        return $this->getModel()->updateSegment($idSegment, $bind);
     }
 
     /**
@@ -370,13 +370,13 @@ public function star(int $idSegment): void
      * @param int $idSegment
      * @throws Exception if the user is not logged in or does not have the required permissions.
      */
-    public function unstar(int $idSegment): void
+    public function unstar(int $idSegment): bool
     {
         $segment = $this->getSegmentOrFail($idSegment);
         $this->checkUserCanEditOrDeleteSegment($segment);
         $bind = ['starred' => 0];
 
-        $this->getModel()->updateSegment($idSegment, $bind);
+        return $this->getModel()->updateSegment($idSegment, $bind);
     }
 
     /**

plugins/SegmentEditor/javascripts/Segmentation.js

@@ -411,18 +411,25 @@ Segmentation = (function($) {
                 e.preventDefault();
             });
 
+            function updateStarredSegment($segment, isStarred, isError = false) {
+              const $starButton = $segment.find('.starSegment');
+              const title = self.translations[isStarred ? 'General_RemoveFromFavorites' : 'General_AddToFavorites'].toLocaleLowerCase();
+              addTooltip($starButton, title);
+              $segment.toggleClass('segmentStarred', isStarred);
+              $segment.toggleClass('segmentStarAnimation', !isError && isStarred);
+              $segment.toggleClass('segmentUnstarAnimation', !isError && !isStarred);
+              $segment.toggleClass('segmentStarErrorAnimation', isError);
+            }
+
             self.target.on('click', '[data-star]', function (e) {
                 e.stopPropagation();
                 e.preventDefault();
                 const $root = $(this).closest('li');
-                const $starButton = $root.find('.starSegment');
                 const idSegment = $root.data('idsegment');
                 const segment = getSegmentFromId(idSegment);
                 segment.starred = !segment.starred;
-                const title = self.translations[segment.starred ? 'General_RemoveFromFavorites' : 'General_AddToFavorites'].toLocaleLowerCase();
-                addTooltip($starButton, title);
                 const method = segment.starred ? 'star' : 'unstar';
-                $root.toggleClass('segmentStarred', segment.starred);
+                updateStarredSegment($root, segment.starred);
 
                 var ajaxHandler = new ajaxHelper();
                 ajaxHandler.addParams({
@@ -431,7 +438,11 @@ Segmentation = (function($) {
                   "method": 'SegmentEditor.' + method,
                   "userLogin": piwik.userLogin,
                   "idSegment": idSegment,
-                }, 'GET');
+                }, 'POST');
+                ajaxHandler.setErrorCallback(function (response) {
+                  segment.starred = !segment.starred;
+                  updateStarredSegment($root, segment.starred, true);
+                });
                 ajaxHandler.send();
             });
 

plugins/SegmentEditor/stylesheets/segmentation.less

@@ -278,6 +278,43 @@ div.scrollable {
     margin-bottom: 5px;
 }
 
+@keyframes starAnimation {
+  0% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
+  100% { transform: scale(1) rotate(360deg); }
+}
+
+@keyframes starAnimationPath {
+  0% { fill: black; }
+  50% { fill: @theme-color-brand; stroke: @theme-color-brand; }
+  100% { fill: black; }
+}
+
+@keyframes unstarAnimation {
+  0% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.2) rotate(-180deg);}
+  100% { transform: scale(1) rotate(-360deg); }
+}
+
+@keyframes unstarAnimationPath {
+  0% { fill: black; }
+  100% { fill: transparent; }
+}
+
+@keyframes starErrorAnimation {
+  0% { opacity: 0.5; }
+  5%, 15%, 25%, 35%, 45% { transform: translate(-2px)}
+  10%, 20%, 30%, 40% { transform: translate(2px)}
+  50% { opacity: 1; }
+  100% { transform: translate(0px); opacity: 0.5; }
+}
+
+@keyframes starErrorAnimationPath {
+  0% { stroke: black; fill: black; }
+  25%, 75% { stroke: red; fill: red; }
+  100% { stroke: black; fill: transparent; }
+}
+
 .segmentationContainer ul.submenu > li {
     span.editSegment,
     span.compareSegment,
@@ -310,6 +347,34 @@ div.scrollable {
         order: 2;
     }
 
+    .segmentStarAnimation .starSegment {
+      animation: starAnimation 0.5s 1;
+    }
+
+    .segmentStarAnimation .starSegment path {
+      animation: starAnimationPath 0.5s 1;
+    }
+
+    .segmentUnstarAnimation .starSegment {
+      animation: unstarAnimation 0.5s 1;
+    }
+
+    .segmentUnstarAnimation .starSegment path {
+      animation: unstarAnimationPath 0.5s 1;
+    }
+
+    .segmentStarErrorAnimation .starSegment {
+      animation: starErrorAnimation 2s 1;
+    }
+
+    .segmentStarErrorAnimation .starSegment path {
+      animation: starErrorAnimationPath 2s 1;
+    }
+
+    .segmentStarred.segmentStarErrorAnimation .starSegment path {
+      animation-direction: reverse;
+    }
+
     .segmentStarred .starSegment path {
         fill: black;
     }