Merge pull request #71 from pajavyskocil/DS_changes

Ds changes

Author: Dominik František Bučík

CHANGELOG.md

@@ -2,6 +2,16 @@
 All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
+#### Changed
+- Remove star which was shown on items on Discovery Service. Now the star will be shown only at previously selected IdP.
+- Change work with IdP entities with tags 'social' and  'preferred' on DS
+    - Width of entities is now counted automatically
+    - Social IdP has 'Sign in with' before name, Preferred IdP hasn't
+    - Added possibility to change display name in attribute 'fullDisplayName' in metadata
+- If user's last selected IdP is known then show only this IdP and button to show all IdPs 
+- Set autofocus on previously selected IdP if exist
+- Removed unused function showIcon() in disco-tpl.php
+
 #### Fixed
 - Fixed the bug in 'getEntitylesAttribute' function to return correct value of Entityless attribute 
 

dictionaries/disco.definition.json

@@ -15,10 +15,18 @@
     "en": "your institutional account",
     "cs": "váš univerzitní účet"
   },
+  "sign_with_other_institution": {
+    "en": "Sign in using other institution",
+    "cs": "Přihlásit se účtem jiné instituce"
+  },
   "previous_selection": {
       "en": "your previous selection",
       "cs": "vaše předchozí volba"
   },
+  "sign_in_with": {
+    "en": "Sign in with ",
+    "cs": "Přihlásit se pomocí "
+  },
   "type_name_institution": {
     "en": "Type the name of your institution",
     "cs": "Zadejte název instituce"

themes/perun/perun/disco-tpl.php

@@ -29,6 +29,8 @@
     Module::getModuleUrl('discopower/assets/js/suggest.js') . '"></script>';
 
 $this->data['head'] .= searchScript();
+$this->data['head'] .= showEntriesScript();
+$this->data['head'] .= setFocus();
 
 const CONFIG_FILE_NAME = 'module_perun.php';
 
@@ -121,33 +123,18 @@
     if (!$warningIsOn || $warningType === WARNING_TYPE_INFO || $warningType === WARNING_TYPE_WARNING) {
         if (!empty($this->getPreferredIdp())) {
             echo '<p class="descriptionp">' . $this->t('{perun:disco:previous_selection}') . '</p>';
-            echo '<div class="metalist list-group">';
+            echo '<div id="last-used-idp" class="metalist list-group">';
             echo showEntry($this, $this->getPreferredIdp(), true);
             echo '</div>';
 
-
             echo getOr();
-        }
 
-        echo '<div class="row">';
-        foreach ($this->getIdps('preferred') as $idpentry) {
-            echo '<div class="col-md-4">';
-            echo '<div class="metalist list-group">';
-            echo showEntry($this, $idpentry, false);
-            echo '</div>';
-            echo '</div>';
+            echo '<span id="showEntries" class="btn btn-block btn-default btn-lg">' .
+                 $this->t('{perun:disco:sign_with_other_institution}') .'</span>' ;
+            echo '<div id="entries" style="display: none">';
         }
-        echo '</div>';
 
-        echo '<div class="row">';
-        foreach ($this->getIdps('social') as $idpentry) {
-            echo '<div class="col-md-4">';
-            echo '<div class="metalist list-group">';
-            echo showEntry($this, $idpentry, false);
-            echo '</div>';
-            echo '</div>';
-        }
-        echo '</div>';
+        echo showAllTaggedIdPs($this);
 
         echo getOr();
 
@@ -188,11 +175,29 @@
             $this->t('{perun:disco:add_institution}') .
             '</a>';
     }
+
+    if (!empty($this->getPreferredIdp())) {
+        echo '</div>';
+    }
+
     echo '</div>';
 }
 
 $this->includeAtTemplateBase('includes/footer.php');
 
+function showEntriesScript()
+{
+    $script = '<script type="text/javascript">
+     $(document).ready(function() {
+         $("#showEntries").click(function() {
+             $("#entries").show();
+             $("#showEntries").hide();
+         });
+     });
+    </script>';
+    return $script;
+}
+
 function searchScript()
 {
 
@@ -207,6 +212,21 @@ function searchScript()
     return $script;
 }
 
+function setFocus()
+{
+    $script = '<script type="text/javascript">
+
+	$(document).ready(function() {
+	    if ($("#last-used-idp")) {
+		    $("#last-used-idp .metaentry").focus();
+	    }
+	});
+	
+	</script>';
+
+    return $script;
+}
+
 /**
  * @param DiscoTemplate $t
  * @param array $metadata
@@ -227,8 +247,6 @@ function showEntry($t, $metadata, $favourite = false)
 
     $html .= '<strong>' . $t->getTranslatedEntityName($metadata) . '</strong>';
 
-    $html .= showIcon($metadata);
-
     $html .= '</a>';
 
     return $html;
@@ -237,9 +255,11 @@ function showEntry($t, $metadata, $favourite = false)
 /**
  * @param DiscoTemplate $t
  * @param array $metadata
+ * @param bool $showSignInWith
+ *
  * @return string html
  */
-function showTaggedEntry($t, $metadata)
+function showTaggedEntry($t, $metadata, $showSignInWith = false)
 {
 
     $bck = 'white';
@@ -252,36 +272,69 @@ function showTaggedEntry($t, $metadata)
 
     $html .= '<img src="' . $metadata['icon'] . '">';
 
-    $html .= '<strong>Sign in with ' . $t->getTranslatedEntityName($metadata) . '</strong>';
+    if (isset($metadata['fullDisplayName'])) {
+        $html .= '<strong>' . $metadata['fullDisplayName'] . '</strong>';
+    } elseif ($showSignInWith) {
+        $html .= '<strong>' . $t->t('{perun:disco:sign_in_with}') . $t->getTranslatedEntityName($metadata) .
+                 '</strong>';
+    } else {
+        $html .= '<strong>' . $t->getTranslatedEntityName($metadata) . '</strong>';
+    }
 
     $html .= '</a>';
 
     return $html;
 }
 
+function getOr()
+{
+    $or = '<div class="hrline">';
+    $or .= '	<span>or</span>';
+    $or .= '</div>';
+    return $or;
+}
 
-function showIcon($metadata)
+function showAllTaggedIdPs($t)
 {
     $html = '';
-    // Logos are turned off, because they are loaded via URL from IdP. Some IdPs have bad configuration,
-    // so it breaks the WAYF.
-
-    /*if (isset($metadata['UIInfo']['Logo'][0]['url'])) {
-        $html .= '<img src="' .
-                    htmlspecialchars(\SimpleSAML\Utils\HTTP::resolveURL($metadata['UIInfo']['Logo'][0]['url'])) .
-                    '" class="idp-logo">';
-    } else if (isset($metadata['icon'])) {
-        $html .= '<img src="' . htmlspecialchars(\SimpleSAML\Utils\HTTP::resolveURL($metadata['icon'])) .
-                    '" class="idp-logo">';
-    }*/
-
+    $html .= showTaggedIdPs($t, 'preferred');
+    $html .= showTaggedIdPs($t, 'social', true);
     return $html;
 }
 
-function getOr()
+
+function showTaggedIdPs($t, $tag, $showSignInWith = false)
 {
-    $or = '<div class="hrline">';
-    $or .= '	<span>or</span>';
-    $or .= '</div>';
-    return $or;
+    $html = '';
+    $idps = $t->getIdPs($tag);
+    $idpCount = count($idps);
+    $counter = 0;
+
+    $fullRowCount = floor($idpCount / 3);
+    for ($i = 0; $i < $fullRowCount; $i++ ) {
+        $html .= '<div class="row">';
+        for ($j = 0; $j < 3; $j++) {
+            $html .= '<div class="col-md-4">';
+            $html .= '<div class="metalist list-group">';
+            $html .= showTaggedEntry($t, $idps[array_keys($idps)[$counter]], $showSignInWith);
+            $html .= '</div>';
+            $html .= '</div>';
+            $counter++;
+        }
+        $html .= '</div>';
+    }
+    if (($idpCount % 3) !== 0) {
+        $html .= '<div class="row">';
+        for ($i = 0; $i < $idpCount % 3; $i++) {
+            $html .= '<div class="col-md-' . (12 / ($idpCount % 3))  . '">';
+            $html .= '<div class="metalist list-group">';
+            $html .= showTaggedEntry($t, $idps[array_keys($idps)[$counter]], $showSignInWith);
+            $html .= '</div>';
+            $html .= '</div>';
+            $counter++;
+        }
+        $html .= '</div>';
+    }
+
+    return $html;
 }

www/res/css/disco.css

@@ -1,10 +1,20 @@
 a.metaentry {
-    padding: 10px 15px 10px 35px;
+    padding: 10px 15px 10px 15px;
+}
+
+a.metaentry:hover {
+    background-image: none;
+}
+
+a.metaentry:focus {
+    outline: none;
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 a.metaentry.favourite {
     background-image: url(../../../../resources/icons/silk/star.png);
     background-position: 10px center;
+    padding-left: 35px;
 }
 
 a.metaentry .idp-logo {
@@ -13,10 +23,6 @@ a.metaentry .idp-logo {
     max-width: 120px;
 }
 
-a.metaentry:hover {
-    background-position: 10px center;
-}
-
 a.metaentryrow .idp-logo {
     max-height: 40px;
     max-width: 200px;