From b9d781b9b578c22bd272ad15c7c24e173f11dd0f Mon Sep 17 00:00:00 2001
From: "Hahn Axel (hahn)" <axel.hahn@unibe.ch>
Date: Fri, 20 Sep 2024 09:31:58 +0200
Subject: [PATCH] move views; add list mode
---
inc_mode_boxes.php => mode/boxes/index.php | 30 +++---
mode/boxes/screen.css | 116 +++++++++++++++++++++
mode/list/index.php | 55 ++++++++++
mode/list/screen.css | 110 +++++++++++++++++++
inc_mode_wayf.php => mode/wayf/index.php | 0
mode/wayf/screen.css | 0
6 files changed, 298 insertions(+), 13 deletions(-)
rename inc_mode_boxes.php => mode/boxes/index.php (52%)
create mode 100644 mode/boxes/screen.css
create mode 100644 mode/list/index.php
create mode 100644 mode/list/screen.css
rename inc_mode_wayf.php => mode/wayf/index.php (100%)
create mode 100644 mode/wayf/screen.css
diff --git a/inc_mode_boxes.php b/mode/boxes/index.php
similarity index 52%
rename from inc_mode_boxes.php
rename to mode/boxes/index.php
index 0ff89b9..89e9265 100644
--- a/inc_mode_boxes.php
+++ b/mode/boxes/index.php
@@ -18,34 +18,38 @@ if (is_array($aIdplist) && count($aIdplist)) {
foreach ($aIdplist as $aEntry) {
$aTld[$aEntry['_tld']] = 1;
$sOut .= '
- <a href="' . $aEntry['_url']. '"
+ <a href="' . $aEntry['_url'] . '"
class="idp"
title="' . strip_tags($aEntry['_description']) . '"
>
<span>' . htmlentities($aEntry['_label']) . '</span><br>
- <span class="hidden">#'. $aEntry['_tld'] . '</span>
+ <span class="hidden">#' . $aEntry['_tld'] . '</span>
<img src="' . $aEntry['_image'] . '"><br>
</a>
'
- ;
+ ;
}
-
+
// Generate a list of TLDs to filter by it.
- if(count($aTld)>1) {
+ if (count($aTld) > 1) {
ksort($aTld);
- foreach(array_keys($aTld) as $sTld) {
- $sId='filterbtn-dot-'.str_replace('.', '', $sTld);
- $sDomainFilter.='<a href="#" id="'.$sId.'" class="filterbutton" onclick="setFilter(\'#'.$sTld.' \'); return false;">.'.$sTld.'</a> ';
+ foreach (array_keys($aTld) as $sTld) {
+ $sId = 'filterbtn-dot-' . str_replace('.', '', $sTld);
+ $sDomainFilter .= '<a href="#" id="' . $sId . '" class="filterbutton" onclick="setFilter(\'#' . $sTld . ' \'); return false;">.' . $sTld . '</a> ';
}
- $sDomainFilter = '<div id="filterByDomain" class="hidden showForLogin">'. $sDomainFilter . '</div>';
+ // $sDomainFilter = '<div id="filterByDomain" class="hidden showForLogin">'. $sDomainFilter . '</div>';
}
- echo '<div id="filterbox" class="hidden showForLogin"></div>'
+ echo '<div id="filterbox" class="hidden showForLogin">
+ <input type="text" id="filter" placeholder="' . $L->t('filter-idps-placeholder') . '" onchange="applyfilter()" onkeydown="applyfilter()" onkeyup="applyfilter()" value=""/>'
. $sDomainFilter
- .'<div class="boxes showForLogin">
- '.$sOut.'
+ . '<a href="#" id="resetfilter" onclick="resetFilter(); return false;" title="' . $L->t('resetfilter-title') . '"> X </a>
+ <span id="filterCounter"></span>
+ </div>'
+ . '<div class="boxes showForLogin">
+ ' . $sOut . '
</div><div style="clear:both"></div>';
-
+
} else {
echo '<div class="msg error">No IDPs found in Discovery Feed.</div>';
}
diff --git a/mode/boxes/screen.css b/mode/boxes/screen.css
new file mode 100644
index 0000000..2ab9ff7
--- /dev/null
+++ b/mode/boxes/screen.css
@@ -0,0 +1,116 @@
+:root {
+ --idp-border: 1px solid #cde;
+ --idp-color: #45c;
+ --idp-shadow: 0 0 2em #eee inset;
+
+ --idp-hover-shadow: 0 0 2em #eee;
+
+ --inputfilter-border: 2px solid #eee;
+ --inputfilter-color: #789;
+
+ --btn-border: 2px solid #eee;
+ --btn-bg: #f8f8f8;
+ --btn-color: #888;
+
+ --filterbtn-ative-border: 2px solid #eee;
+ --filterbtn-ative-bg: #fff;
+ --filterbtn-ative-color: #45c;
+
+ --resetfilter-border: 2px solid #ddd;
+ --resetfilter-bg: #f8f8f8;
+ --resetfilter-color: #888;
+}
+
+
+/** ---------- mode boxes: filterbar on top */
+
+div#filterbox {
+ margin-bottom: 2em;
+}
+
+#filterByDomain {
+ margin-top: 3em;
+ margin-bottom: 3em;
+}
+
+a.filterbutton,
+a#resetfilter {
+ background: var(--btn-bg);
+ border: var(--btn-border);
+ border-radius: 0.2em;
+ color: var(--btn-color);
+ font-size: 110%;
+ margin: 0 0 0 0.3em;
+ opacity: 1;
+ padding: 0.5em;
+ text-decoration: none;
+}
+
+a.filterbutton.active {
+ background: var(--filterbtn-ative-bg);
+ border-top-color: var(--filterbtn-ative-border);
+ color: var(--filterbtn-ative-color);
+}
+
+input#filter {
+ border: var(--inputfilter-border);
+ padding: 0.5em;
+ color: var(--inputfilter-color);
+ font-size: 110%;
+ width: 20em;
+}
+
+a#resetfilter {
+ background: var(--resetfilter-bg);
+ border: var(--resetfilter-border);
+ color: var(--resetfilter-color);
+ font-weight: bold;
+ margin: 0 0 0 0.3em;
+ padding: 0.5em 2em;
+}
+
+a#resetfilter:hover {
+ opacity: 0.5;
+}
+
+#filterCounter {
+ margin-left: 2em;
+ opacity: 0.7;
+}
+
+div.boxes {
+ max-height: 20em;
+ overflow: scroll;
+}
+
+div.boxes a.idp {
+ border: var(--idp-border);
+ border-radius: 1em;
+ box-shadow: var(--idp-shadow);
+ color: var(--idp-color);
+ float: left;
+ height: 7em;
+ margin: 0 1em 1em 0;
+ overflow: hidden;
+ padding: 0.5em;
+ text-align: center;
+ text-decoration: none;
+ transition: all 0.1s ease-in-out;
+ width: 14em;
+}
+
+div.boxes .idp img {
+ height: 48px;
+}
+
+div.boxes a.idp:hover {
+ box-shadow: var(--idp-hover-shadow);
+}
+
+div.boxes a.hide {
+ border: none;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ width: 0;
+}
\ No newline at end of file
diff --git a/mode/list/index.php b/mode/list/index.php
new file mode 100644
index 0000000..2515d4d
--- /dev/null
+++ b/mode/list/index.php
@@ -0,0 +1,55 @@
+<?php
+// ======================================================================
+//
+// AAI LOGIN WITH SHIBBOLETH HANDLING MULTIPLE ORGANIZATIONS
+//
+// Boxes for all organizations with an input field for filter
+//
+// License: GNU GPL 3.0
+// Source: https://git-repo.iml.unibe.ch/iml-open-source/login-aai
+// ======================================================================
+
+if (is_array($aIdplist) && count($aIdplist)) {
+ $sOut = '';
+
+ $sDomainFilter = '';
+ $aTld = [];
+
+ foreach ($aIdplist as $aEntry) {
+ $aTld[$aEntry['_tld']] = 1;
+ $sOut .= '
+ <a href="' . $aEntry['_url'] . '"
+ class="idp"
+ title="' . strip_tags($aEntry['_description']) . '"
+ >
+ <span class="logo"><img src="' . $aEntry['_image'] . '"></span>
+ <span class="label">' . htmlentities($aEntry['_label']) . '</span>
+ <span class="hidden">#' . $aEntry['_tld'] . '</span>
+ </a>
+ '
+ ;
+ }
+
+ // Generate a list of TLDs to filter by it.
+ if (count($aTld) > 1) {
+ ksort($aTld);
+ foreach (array_keys($aTld) as $sTld) {
+ $sId = 'filterbtn-dot-' . str_replace('.', '', $sTld);
+ $sDomainFilter .= '<a href="#" id="' . $sId . '" class="filterbutton" onclick="setFilter(\'#' . $sTld . ' \'); return false;">.' . $sTld . '</a> ';
+ }
+ // $sDomainFilter = '<div id="filterByDomain" class="hidden showForLogin">'. $sDomainFilter . '</div>';
+ }
+
+ echo '<div id="filterbox" class="hidden showForLogin">
+ <input type="text" id="filter" placeholder="' . $L->t('filter-idps-placeholder') . '" onchange="applyfilter()" onkeydown="applyfilter()" onkeyup="applyfilter()" value=""/>'
+ . $sDomainFilter
+ . '<a href="#" id="resetfilter" onclick="resetFilter(); return false;" title="' . $L->t('resetfilter-title') . '"> X </a>
+ <span id="filterCounter"></span>
+ </div>'
+ . '<div class="boxes showForLogin">
+ ' . $sOut . '
+ </div><div style="clear:both"></div>';
+
+} else {
+ echo '<div class="msg error">No IDPs found in Discovery Feed.</div>';
+}
diff --git a/mode/list/screen.css b/mode/list/screen.css
new file mode 100644
index 0000000..7d9d68d
--- /dev/null
+++ b/mode/list/screen.css
@@ -0,0 +1,110 @@
+:root {
+ --idp-color: #45c;
+ --idp-hover-bg: #cde;
+
+ --inputfilter-border: 2px solid #eee;
+ --inputfilter-color: #789;
+
+ --btn-border: 2px solid #eee;
+ --btn-bg: #f8f8f8;
+ --btn-color: #888;
+
+ --filterbtn-ative-border: 2px solid #eee;
+ --filterbtn-ative-bg: #fff;
+ --filterbtn-ative-color: #45c;
+
+ --resetfilter-border: 2px solid #ddd;
+ --resetfilter-bg: #f8f8f8;
+ --resetfilter-color: #888;
+}
+
+
+/** ---------- mode boxes: filterbar on top */
+
+div#filterbox {
+ margin-bottom: 2em;
+}
+
+#filterByDomain {
+ margin-bottom: 3em;
+ margin-top: 3em;
+}
+
+a.filterbutton,
+a#resetfilter {
+ background: var(--btn-bg);
+ border: var(--btn-border);
+ border-radius: 0.2em;
+ color: var(--btn-color);
+ font-size: 110%;
+ margin: 0 0 0 0.3em;
+ opacity: 1;
+ padding: 0.5em;
+ text-decoration: none;
+}
+
+a.filterbutton.active {
+ background: var(--filterbtn-ative-bg);
+ border-top-color: var(--filterbtn-ative-border);
+ color: var(--filterbtn-ative-color);
+}
+
+input#filter {
+ border: var(--inputfilter-border);
+ padding: 0.5em;
+ color: var(--inputfilter-color);
+ font-size: 110%;
+ width: 20em;
+}
+
+a#resetfilter {
+ background: var(--resetfilter-bg);
+ border: var(--resetfilter-border);
+ color: var(--resetfilter-color);
+ font-weight: bold;
+ margin: 0 0 0 0.3em;
+ padding: 0.5em 2em;
+}
+
+a#resetfilter:hover {
+ opacity: 0.5;
+}
+
+#filterCounter {
+ margin-left: 2em;
+ opacity: 0.7;
+}
+
+div.boxes {
+ background: #f4f4f8;
+ ;
+ max-height: 20em;
+ overflow: scroll;
+}
+
+div.boxes a.idp {
+ border-radius: 1em;
+ color: var(--idp-color);
+ display: block;
+ padding: 0.2em;
+ transition: all 0.1s ease-in-out;
+}
+
+div.boxes a.idp:hover {
+ background: var(--idp-hover-bg);
+}
+
+div.boxes .idp span img {
+ height: 24px;
+}
+
+div.boxes a.idp span.logo {
+ display: inline-block;
+ text-align: center;
+ width: 7em;
+ ;
+}
+
+div.boxes a.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/inc_mode_wayf.php b/mode/wayf/index.php
similarity index 100%
rename from inc_mode_wayf.php
rename to mode/wayf/index.php
diff --git a/mode/wayf/screen.css b/mode/wayf/screen.css
new file mode 100644
index 0000000..e69de29
--
GitLab