SAK-42642 Add favourite sites stars and functionality to the top bar (s…

…akaiproject#7441)

config/configuration/bundles/src/bundle/org/sakaiproject/config/bundle/default.sakai.properties

@@ -974,6 +974,15 @@
 # DEFAULT: true
 # portal.autofavorite=false
 
+# SAK-42642 - Display stars for favorite sites beside their site titles in the top bar
+# DEFAULT: true
+# portal.favoriteSitesBar.showFavoriteStars=false
+
+# SAK-42642 - Display stars on all sites (true) or only on the current site (false)
+# Requires "portal.favoriteSitesBar.showFavoriteStars" to be enabled above first
+# DEFAULT: true
+# portal.favoriteSitesBar.showFavStarsOnAllSites=false
+
 # SAK-32690 Enable a link in the LHS tool menu to add more tools, it redirects the user to the tool manage helper.
 # The legacy property was "portal.experimental.addmoretools", this property is also supported.
 # DEFAULT: false

help/help-component/src/bundle/TutorialMessages.properties

@@ -49,6 +49,12 @@ introToSakai_moreButton.body=The <span class="no-wrap"><i class="fa fa-th tut-ic
 <br /><br />\
 In the sites drawer, sites are organized by term or category, and can be pinned to the top navigation. 
 
+#Site Fav panel
+introToSakai_favSites.title=Starred Sites
+introToSakai_favSites.body=Starred sites are pinned to the top navigation for easy access.\
+<br /><br />\
+You can pin or unpin a site to the top by clicking or tapping on the star <span class="no-wrap">( <i class="fa fa-star tut-icon-star"></i> )</span> beside the site&#39;s title. 
+
 #Tool Menu panel
 introToSakai_toolMenu.title=Tools Menu
 introToSakai_toolMenu.body=Tools for the current site appear in the left menu. Each tool serves a different function, such as delivering content, providing assessments, or facilitating collaboration.\

help/help-component/src/tutorial/Tutorial.config

@@ -62,15 +62,24 @@ introToSakai_allsites.fadeout=
 #Sites panel
 introToSakai_moreButton.selection=.view-all-sites-btn:visible i
 introToSakai_moreButton.previousUrl=/direct/tutorial/introToSakai_allsites.json
-introToSakai_moreButton.nextUrl=/direct/tutorial/introToSakai_toolMenu.json
+introToSakai_moreButton.nextUrl=/direct/tutorial/introToSakai_favSites.json
 introToSakai_moreButton.dialog=
 introToSakai_moreButton.positionTooltip=topRight
 introToSakai_moreButton.positionTarget=bottomMiddle
 introToSakai_moreButton.fadeout=
 
+#Sites Favourites panel  
+introToSakai_favSites.selection=#linkNav:visible ul#topnav li:last a.Mrphs-sitesNav__favbtn
+introToSakai_favSites.previousUrl=/direct/tutorial/introToSakai_moreButton.json
+introToSakai_favSites.nextUrl=/direct/tutorial/introToSakai_toolMenu.json
+introToSakai_favSites.dialog=
+introToSakai_favSites.positionTooltip=topMiddle
+introToSakai_favSites.positionTarget=bottomMiddle
+introToSakai_favSites.fadeout=
+
 #Tool Menu panel (for desktop view)
 introToSakai_toolMenu.selection=#toolMenu ul:first:has(li > .js-toggle-nav:visible)
-introToSakai_toolMenu.previousUrl=/direct/tutorial/introToSakai_moreButton.json
+introToSakai_toolMenu.previousUrl=/direct/tutorial/introToSakai_favSites.json
 introToSakai_toolMenu.nextUrl=/direct/tutorial/introToSakai_toolMenuNarrowView.json
 introToSakai_toolMenu.dialog=
 introToSakai_toolMenu.positionTooltip=leftMiddle

library/src/morpheus-master/js/src/sakai.morpheus.more.sites.js

@@ -364,6 +364,18 @@ $PBJQ(document).ready(function($){
   var container = $PBJQ('#selectSite');
   var favoritesPane = $PBJQ('#otherSitesCategorWrap');
   var organizePane = $PBJQ('#organizeFavorites');
+  var topNavPane = $PBJQ('#topnav');
+
+  // Keep a copy of the order of the sites across the top bar in case a user
+  // unpins and then repins a site to the top bar without refreshing: the order
+  // of the sites should remain the same
+  var setInitialTopBarSiteDisplayOrder = function() {
+    return $PBJQ('.Mrphs-sitesNav__favbtn', topNavPane).map(function () {
+      return $PBJQ(this).data('site-id');
+    }).toArray();
+  };
+
+  var initialTopBarSiteDisplayOrder = setInitialTopBarSiteDisplayOrder();
 
   // Build up a map of siteid => list item.  Do this instead of an ID
   // selector to cope with Site IDs containing strange characters.
@@ -497,6 +509,89 @@ $PBJQ(document).ready(function($){
       return $PBJQ(this).attr('data-site-id');
     }).toArray();
   }
+
+  /**
+   * @func syncFavoritesToServer
+   * @desc Reusable method to sync fav changes to the server
+   * @param {Array} favs  - List of SiteIds to be used as favourites
+   * @param {Function} onError  - Error function to be called on AJAX failure 
+   */
+  var syncFavoritesToServer = function(favs, onError) {
+
+    if (!onError) {
+      onError = function (err) {};
+    }
+
+    var newState = {
+      favoriteSiteIds: favs,
+      autoFavoritesEnabled: autoFavoritesEnabled,
+    };
+
+    $PBJQ.ajax({
+      url: '/portal/favorites/update',
+      method: 'POST',
+      data: {
+        userFavorites: JSON.stringify(newState),
+      },
+      error: onError
+    });
+
+    // Update the list
+    favoritesList = favs;
+  }
+
+  /**
+   * @func topNavFavorite
+   * @desc Toggles favouriting from the top navigation
+   * @param {*} event  - jQuery Event for item clicked
+   */
+  var toggleTopNavFavorite = function(event) {
+    event.preventDefault();
+
+    var thisFavButton = $PBJQ(event.target);
+    var newFavId = thisFavButton.data("site-id");
+
+    getUserFavorites(function(list){
+      var favs = list; 
+      var ind = favs.indexOf(newFavId); 
+
+      if(ind === -1) {
+        // Add Fav
+        var favIdIndex = initialTopBarSiteDisplayOrder.indexOf(newFavId);
+        if(favIdIndex !== -1) {
+          // Inserting the site id into the previous location of the favorites array to 
+          // maintain the site's location on the top bar, if toggled off then back on 
+          // without a page reload:
+          favs.splice(favIdIndex, 0, newFavId);
+        } else {
+          // Was not in the original list of favorites, so we'll add the site to the end:
+          favs.push(newFavId);
+        }
+      } else {
+        // Remove Fav
+        favs.splice(ind,1)
+      }
+
+      // Toggle the classes, so the opposite star appears
+      thisFavButton.toggleClass("non-fav");
+      thisFavButton.toggleClass("fav");
+
+      // Use plain JS to toggle the value of the aria-checked attribute
+      var thisFavButtonForJS = thisFavButton[0];
+      if(thisFavButtonForJS.getAttribute("aria-checked") === "true") {
+        thisFavButtonForJS.setAttribute("aria-checked", "false");
+      } else {
+        thisFavButtonForJS.setAttribute("aria-checked", "true");
+      }
+
+      syncFavoritesToServer(favs);
+    });
+  };
+
+  // Add the fav toggle to the top-nav buttons
+  $PBJQ(".Mrphs-sitesNav__favbtn").each(function(i, e) {
+    return $PBJQ(e).click(toggleTopNavFavorite);
+  });
 
   var loadFromServer = function (attempt) {
     if (syncInProgress) {

library/src/morpheus-master/sass/_defaults.scss

@@ -189,7 +189,6 @@ $sites-nav-menu-item-border-thickness:		1px !default;
 /* Favorites - item */
 $sites-nav-menu-item-background:            #FFFFFF !default;
 $sites-nav-menu-item-color:                 #4C4C4C !default;
-$sites-nav-menu-item-icon-color:            #666666 !default;
 $sites-nav-menu-item-border-color:          #E5E5E5 !default;
 $sites-nav-menu-item-border-top:            $sites-nav-menu-item-border-thickness solid $sites-nav-menu-item-border-color !default;
 $sites-nav-menu-item-border-right:          $sites-nav-menu-item-border-top !default;
@@ -198,7 +197,6 @@ $sites-nav-menu-item-border-left:           $sites-nav-menu-item-border-top !def
 /* Favorites - item hovered */
 $sites-nav-menu-item-hover-background:      #FFFFFF !default;
 $sites-nav-menu-item-hover-color:           #191919 !default;
-$sites-nav-menu-item-hover-icon-color:      #424242 !default;
 $sites-nav-menu-item-hover-border-color:    #7F7F7F !default;
 $sites-nav-menu-item-hover-border-top:      $sites-nav-menu-item-border-thickness solid $sites-nav-menu-item-hover-border-color !default;
 $sites-nav-menu-item-hover-border-right:    $sites-nav-menu-item-hover-border-top !default;
@@ -207,7 +205,6 @@ $sites-nav-menu-item-hover-border-left:     $sites-nav-menu-item-hover-border-to
 /* Favorites - item selected */
 $sites-nav-menu-item-selected-background:   $primary-color !default;
 $sites-nav-menu-item-selected-color:        #FFFFFF !default;
-$sites-nav-menu-item-selected-icon-color:   #FFFFFF !default;
 $sites-nav-menu-item-selected-border-color: #326B97 !default;
 $sites-nav-menu-item-selected-border-top:   $sites-nav-menu-item-border-thickness solid $sites-nav-menu-item-selected-border-color !default;
 $sites-nav-menu-item-selected-border-right: $sites-nav-menu-item-selected-border-top !default;
@@ -216,7 +213,6 @@ $sites-nav-menu-item-selected-border-left:  $sites-nav-menu-item-selected-border
 /* Favorites - item selected and hovered */
 $sites-nav-menu-item-selected-hover-background:   lighten($sites-nav-menu-item-selected-background, 5%) !default;
 $sites-nav-menu-item-selected-hover-color:        #FFFFFF !default;
-$sites-nav-menu-item-selected-hover-icon-color:   #FFFFFF !default;
 $sites-nav-menu-item-selected-hover-border-color: $sites-nav-menu-item-selected-border-color !default;
 $sites-nav-menu-item-selected-hover-border-top:   $sites-nav-menu-item-border-thickness solid $sites-nav-menu-item-selected-hover-border-color !default;
 $sites-nav-menu-item-selected-hover-border-right: $sites-nav-menu-item-selected-hover-border-top !default;

library/src/morpheus-master/sass/base/_extendables.scss

@@ -1,12 +1,5 @@
 @import "base/compass";
 
-.sitesNav__drop{
-	cursor: pointer;
-	display: inline-block;
-	height:  12px;
-	width:   16px;
-}
-
 .blurry{
 	@include filter( blur(0.1em) );
 }