Badge/User: Improve toggling hidden badges in public profile

See: https://mantis.ilias.de/view.php?id=43589
mjansenDatabay · Jan 14, 2025 · b82015d · b82015d
1 parent b92a16b
commit b82015d
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 82 deletions.
diff --git a/components/ILIAS/Badge/Badge.php b/components/ILIAS/Badge/Badge.php
@@ -32,9 +32,12 @@ public function init(
         array | \ArrayAccess &$pull,
         array | \ArrayAccess &$internal,
     ): void {
-        $contribute[\ILIAS\Setup\Agent::class] = static fn() =>
-        new \ilBadgeSetupAgent(
+        $contribute[\ILIAS\Setup\Agent::class] = static fn() => new \ilBadgeSetupAgent(
             $pull[\ILIAS\Refinery\Factory::class]
         );
+        $contribute[Component\Resource\PublicAsset::class] = fn() => new Component\Resource\ComponentJS(
+            $this,
+            'PublicProfileBadges.js'
+        );
     }
 }
diff --git a/components/ILIAS/Badge/js/ilBadge.js b/components/ILIAS/Badge/js/ilBadge.js
diff --git a/components/ILIAS/Badge/resources/PublicProfileBadges.js b/components/ILIAS/Badge/resources/PublicProfileBadges.js
@@ -0,0 +1,95 @@
+class BadgeToggle {
+  static HIDDEN_CLASS = 'ilNoDisplay';
+
+  static BADGE_CLASS = 'ilHiddenProfileBadge';
+
+  constructor(containerId, showButtonId, hideButtonId) {
+    this.badgeContainer = document.getElementById(containerId);
+    this.showButton = document.getElementById(showButtonId);
+    this.hideButton = document.getElementById(hideButtonId);
+
+    this.init();
+  }
+
+  init() {
+    this.showButton.addEventListener('click', (e) => this.handleClick(e, true));
+    this.hideButton.addEventListener('click', (e) => this.handleClick(e, false));
+  }
+
+  handleClick(event, show) {
+    event.preventDefault();
+    this.toggleButtonVisibility(show)
+      .then(() => this.toggleBadgeVisibility(show));
+  }
+
+  toggleBadgeVisibility(show) {
+    return new Promise((resolve) => {
+      const badges = this.badgeContainer.querySelectorAll(`.${BadgeToggle.BADGE_CLASS}`);
+      const promises = Array.from(badges).map((badge) => this.animateBadge(badge, show));
+      Promise.all(promises).then(resolve);
+    });
+  }
+
+  animateBadge(badge, show) {
+    return new Promise((resolve) => {
+      const height = badge.scrollHeight;
+
+      const stylesBeforeAnimation = show ? {
+        display: 'inline-block',
+        height: '0px',
+        opacity: '0',
+        overflow: 'hidden',
+      } : {
+        overflow: 'hidden',
+      };
+
+      const stylesAfterAnimation = show ? {
+        height: '',
+        opacity: '',
+        overflow: '',
+      } : {
+        display: 'none',
+        height: '',
+        opacity: '',
+        overflow: '',
+      };
+
+      const classAction = show ? 'remove' : 'add';
+
+      Object.assign(badge.style, stylesBeforeAnimation);
+
+      this.animateHeightOpacity(
+        badge,
+        show ? 0 : height,
+        show ? height : 0,
+        show ? 0 : 1,
+        show ? 1 : 0,
+      ).then(() => {
+        Object.assign(badge.style, stylesAfterAnimation);
+        badge.classList[classAction](BadgeToggle.HIDDEN_CLASS);
+        resolve();
+      });
+    });
+  }
+
+  animateHeightOpacity(element, fromHeight, toHeight, fromOpacity, toOpacity) {
+    return new Promise((resolve) => {
+      const animation = element.animate(
+        [
+          { height: `${fromHeight}px`, opacity: fromOpacity },
+          { height: `${toHeight}px`, opacity: toOpacity },
+        ],
+        { duration: 200, easing: 'cubic-bezier(0.42, 0, 0.58, 1)' },
+      );
+      animation.onfinish = resolve;
+    });
+  }
+
+  toggleButtonVisibility(show) {
+    return new Promise((resolve) => {
+      this.showButton.classList.toggle(BadgeToggle.HIDDEN_CLASS);
+      this.hideButton.classList.toggle(BadgeToggle.HIDDEN_CLASS);
+      resolve();
+    });
+  }
+}
diff --git a/components/ILIAS/User/classes/Profile/class.ilPublicUserProfileGUI.php b/components/ILIAS/User/classes/Profile/class.ilPublicUserProfileGUI.php
@@ -20,7 +20,6 @@
 
 use ILIAS\User\Profile\GUIRequest;
 use ILIAS\User\Profile\VCard;
-
 use ILIAS\Language\Language;
 
 /**
@@ -568,6 +567,8 @@ public function getEmbeddable(bool $a_add_goto = false): string
         }
 
         // badges
+        $this->tpl->addJavaScript('assets/js/PublicProfileBadges.js');
+        $this->tpl->addOnLoadCode('new BadgeToggle("ilbdgprcont", "ilbdgprfhdm", "ilbdgprfhdl");');
         $user_badges = ilBadgeAssignment::getInstancesByUserId($user->getId());
         if ($user_badges) {
             $has_public_badge = false;
@@ -583,13 +584,14 @@ public function getEmbeddable(bool $a_add_goto = false): string
                     $renderer = new ilBadgeRenderer($ass);
 
                     // limit to 20, [MORE] link
-                    if ($cnt <= $cut) {
-                        $tpl->setCurrentBlock('badge_bl');
-                        $tpl->setVariable('BADGE', $renderer->getHTML());
-                    } else {
-                        $tpl->setCurrentBlock('badge_hidden_item_bl');
-                        $tpl->setVariable('BADGE_HIDDEN', $renderer->getHTML());
+                    if ($cnt > $cut) {
+                        $tpl->setCurrentBlock('hidden_badge');
+                        $tpl->touchBlock('hidden_badge');
+                        $tpl->parseCurrentBlock();
                     }
+
+                    $tpl->setCurrentBlock('badge_bl');
+                    $tpl->setVariable('BADGE', $renderer->getHTML());
                     $tpl->parseCurrentBlock();
 
                     $has_public_badge = true;
@@ -600,7 +602,6 @@ public function getEmbeddable(bool $a_add_goto = false): string
                 $this->lng->loadLanguageModule('badge');
                 $tpl->setVariable('BADGE_HIDDEN_TXT_MORE', $this->lng->txt('badge_profile_more'));
                 $tpl->setVariable('BADGE_HIDDEN_TXT_LESS', $this->lng->txt('badge_profile_less'));
-                $tpl->touchBlock('badge_js_bl');
             }
 
             if ($has_public_badge) {

diff --git a/components/ILIAS/User/templates/default/tpl.usr_public_profile.html b/components/ILIAS/User/templates/default/tpl.usr_public_profile.html
@@ -88,21 +88,14 @@ <h3 class="ilProfileSectionHead">{TXT_PORTFOLIO}</h3>
 			<!-- BEGIN badges_row -->
 			<div class="ilProfileSection">
 				<h3 class="ilProfileSectionHead">{TXT_BADGES}</h3>
-				<div>
+				<div id="ilbdgprcont">
 					<!-- BEGIN badge_bl -->
-					<span class="ilProfileBadge">{BADGE}</span>
+					<span class="ilProfileBadge<!-- BEGIN hidden_badge --> ilHiddenProfileBadge ilNoDisplay<!-- END hidden_badge -->">{BADGE}</span>
 					<!-- END badge_bl -->
 				</div>
-				<!-- BEGIN badge_hidden_bl -->
-				<div id="ilbdgprfhd" style="display:none;">
-					<!-- BEGIN badge_hidden_item_bl -->
-					<span class="ilProfileBadge">{BADGE_HIDDEN}</span>
-					<!-- END badge_hidden_item_bl -->
-				</div>
-				<!-- BEGIN badge_hidden_bl -->
 				<!-- BEGIN badge_hidden_actions_bl -->
-				<a href="#" id="ilbdgprfhdm" class="btn btn-default" onclick="ilbdgprfhdtgl();">{BADGE_HIDDEN_TXT_MORE}</a>
-				<a href="#" id="ilbdgprfhdl" class="btn btn-default" onclick="ilbdgprfhdtgl();" style="display:none">{BADGE_HIDDEN_TXT_LESS}</a>
+				<a href="#" id="ilbdgprfhdm" class="btn btn-default">{BADGE_HIDDEN_TXT_MORE}</a>
+				<a href="#" id="ilbdgprfhdl" class="btn btn-default ilNoDisplay">{BADGE_HIDDEN_TXT_LESS}</a>
 				<!-- END badge_hidden_actions_bl -->
 			</div>
 			<!-- END badges_row -->
@@ -113,15 +106,4 @@ <h3 class="ilProfileSectionHead">{TXT_BADGES}</h3>
 <!-- BEGIN table_start -->
 <!-- END table_start -->
 <!-- BEGIN table_end -->
-<!-- END table_end -->
-<!-- BEGIN badge_js_bl -->
-<script type="text/javascript">
-function ilbdgprfhdtgl() {
-  $('#ilbdgprfhd').slideToggle('slow',  function() {
-    $('#ilbdgprfhdl').toggle();
-	$('#ilbdgprfhdm').toggle();
-  });
-  return false;
-}
-</script>
-<!-- END badge_js_bl -->
+<!-- END table_end -->