From f87ba57771e84d9fbb5f0cba233de3c16b9492aa Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Mon, 18 Apr 2022 15:49:23 -0400 Subject: [PATCH 01/14] Added only logos template Signed-off-by: Zhou Fang --- js/solstice/eclipsefdn.members-list.js | 13 +++++++++++++ .../wg-members/wg-member-only-logos.mustache | 11 +++++++++++ 2 files changed, 24 insertions(+) create mode 100644 js/solstice/templates/wg-members/wg-member-only-logos.mustache diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 0589d68..3b326a5 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -16,6 +16,7 @@ import 'jquery-match-height'; import getMembers from '../api/eclipsefdn.members'; import displayErrMsg from '../utils/displayErrMsg'; import template from './templates/explore-members/member.mustache'; +import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; const SD_NAME = 'Strategic Members'; @@ -124,6 +125,18 @@ const EclipseFdnMembersList = (async () => { membersListArray = membersListArray.filter((list) => list.members.length !== 0); } + switch (element.getAttribute('data-ml-template')) { + // membersListArray for WG only contains 1 item + case 'only-logos': + element.innerHTML = templateOnlyLogos({ + item: membersListArray[0].members, + }); + return; + + default: + break; + } + element.innerHTML = template({ sections: membersListArray, hostname: window.location.hostname.includes('staging.eclipse.org') diff --git a/js/solstice/templates/wg-members/wg-member-only-logos.mustache b/js/solstice/templates/wg-members/wg-member-only-logos.mustache new file mode 100644 index 0000000..fd3e6b4 --- /dev/null +++ b/js/solstice/templates/wg-members/wg-member-only-logos.mustache @@ -0,0 +1,11 @@ +{{#item}} +
  • + {{#website}} + + {{/website}} + {{name}} + {{#website}} + + {{/website}} +
    • +{{/item}} -- GitLab From 4d41d6b8e5132160bd3bda279509ef321c61f953 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Tue, 19 Apr 2022 14:39:30 -0400 Subject: [PATCH 02/14] Added template - logo with levels --- js/solstice/eclipsefdn.members-list.js | 14 ++++++++++++++ .../wg-member-logo-with-levels.mustache | 18 ++++++++++++++++++ less/_components/classes-blocks.less | 3 ++- 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 3b326a5..cf8821a 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -17,6 +17,7 @@ import getMembers from '../api/eclipsefdn.members'; import displayErrMsg from '../utils/displayErrMsg'; import template from './templates/explore-members/member.mustache'; import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; +import templateLogoWithLevels from './templates/wg-members/wg-member-logo-with-levels.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; const SD_NAME = 'Strategic Members'; @@ -133,6 +134,19 @@ const EclipseFdnMembersList = (async () => { }); return; + case 'logo-with-levels': + document.querySelectorAll('.members-by-level').forEach((item) => { + // Get members/orgs belong to the level of current item + item.innerHTML = templateLogoWithLevels({ + item: membersListArray[0].members.filter((member) => + member.wgpas.find( + (wgpa) => wgpa.working_group === 'osgi' && wgpa.level === item.getAttribute('data-ml-wg-level') + ) + ), + }); + }); + $.fn.matchHeight._applyDataApi(); + return; default: break; } diff --git a/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache b/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache new file mode 100644 index 0000000..2855e2e --- /dev/null +++ b/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache @@ -0,0 +1,18 @@ +{{#item}} +
    +
    +
    +

    + {{name}} +

    +
    +
    +
    + + {{name}} logo + +
    +
    +
    +
    +{{/item}} diff --git a/less/_components/classes-blocks.less b/less/_components/classes-blocks.less index d336cae..c7b3085 100644 --- a/less/_components/classes-blocks.less +++ b/less/_components/classes-blocks.less @@ -141,7 +141,8 @@ .box-body { padding: @bordered-box-padding; .logos { - max-height: 120px; + max-height: 100px; + max-width: 200px; } } } -- GitLab From 101875d9d99779ddc0e23998a0043d079e905415 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Tue, 19 Apr 2022 16:10:48 -0400 Subject: [PATCH 03/14] Fixed filter issue for logo-with-levels template --- js/solstice/eclipsefdn.members-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index cf8821a..7830c99 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -140,7 +140,7 @@ const EclipseFdnMembersList = (async () => { item.innerHTML = templateLogoWithLevels({ item: membersListArray[0].members.filter((member) => member.wgpas.find( - (wgpa) => wgpa.working_group === 'osgi' && wgpa.level === item.getAttribute('data-ml-wg-level') + (wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level') ) ), }); -- GitLab From f916f6e717a609c2d021999b5c434d812b2daea2 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Tue, 19 Apr 2022 16:41:46 -0400 Subject: [PATCH 04/14] Added logo without title by levels template --- js/solstice/eclipsefdn.members-list.js | 28 +++++++++++-------- .../wg-member-logo-title-with-levels.mustache | 18 ++++++++++++ .../wg-member-logo-with-levels.mustache | 27 +++++++----------- 3 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 7830c99..fe75226 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -17,6 +17,7 @@ import getMembers from '../api/eclipsefdn.members'; import displayErrMsg from '../utils/displayErrMsg'; import template from './templates/explore-members/member.mustache'; import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; +import templateLogoTitleWithLevels from './templates/wg-members/wg-member-logo-title-with-levels.mustache'; import templateLogoWithLevels from './templates/wg-members/wg-member-logo-with-levels.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; @@ -126,6 +127,17 @@ const EclipseFdnMembersList = (async () => { membersListArray = membersListArray.filter((list) => list.members.length !== 0); } + const displayMembersByLevels = (theTemplate) => { + document.querySelectorAll('.members-by-level').forEach((item) => { + // Get members belong to the level of current item + item.innerHTML = theTemplate({ + item: membersListArray[0].members.filter((member) => + member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level')) + ), + }); + }); + }; + switch (element.getAttribute('data-ml-template')) { // membersListArray for WG only contains 1 item case 'only-logos': @@ -134,19 +146,13 @@ const EclipseFdnMembersList = (async () => { }); return; - case 'logo-with-levels': - document.querySelectorAll('.members-by-level').forEach((item) => { - // Get members/orgs belong to the level of current item - item.innerHTML = templateLogoWithLevels({ - item: membersListArray[0].members.filter((member) => - member.wgpas.find( - (wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level') - ) - ), - }); - }); + case 'logo-title-with-levels': + displayMembersByLevels(templateLogoTitleWithLevels); $.fn.matchHeight._applyDataApi(); return; + case 'logo-with-levels': + displayMembersByLevels(templateLogoWithLevels); + return; default: break; } diff --git a/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache b/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache new file mode 100644 index 0000000..2855e2e --- /dev/null +++ b/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache @@ -0,0 +1,18 @@ +{{#item}} +
    +
    +
    +

    + {{name}} +

    +
    +
    +
    + + {{name}} logo + +
    +
    +
    +
    +{{/item}} diff --git a/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache b/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache index 2855e2e..bda9d96 100644 --- a/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache +++ b/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache @@ -1,18 +1,11 @@ {{#item}} -
    -
    -
    -

    - {{name}} -

    -
    -
    -
    - - {{name}} logo - -
    -
    -
    -
    -{{/item}} +
  • + {{#website}} + + {{/website}} + {{name}} + {{#website}} + + {{/website}} +
    • +{{/item}} \ No newline at end of file -- GitLab From e4d76d87748b232fdfff6cd51861362519131d5b Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Wed, 20 Apr 2022 10:23:48 -0400 Subject: [PATCH 05/14] Added loading template --- docs/members.html | 4 ++-- js/solstice/eclipsefdn.members-list.js | 8 ++++++++ js/solstice/templates/loading-icon.mustache | 4 ++++ 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 js/solstice/templates/loading-icon.mustache diff --git a/docs/members.html b/docs/members.html index 32bfb54..dd26a84 100644 --- a/docs/members.html +++ b/docs/members.html @@ -458,9 +458,9 @@
    -
    +
    - + Loading...
    diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index fe75226..0f7d2c0 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -19,6 +19,7 @@ import template from './templates/explore-members/member.mustache'; import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; import templateLogoTitleWithLevels from './templates/wg-members/wg-member-logo-title-with-levels.mustache'; import templateLogoWithLevels from './templates/wg-members/wg-member-logo-with-levels.mustache'; +import templateLoading from './templates/loading-icon.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; const SD_NAME = 'Strategic Members'; @@ -31,6 +32,13 @@ const EclipseFdnMembersList = (async () => { return; } + const memberLevelElements = document.querySelectorAll('.members-by-level'); + if (memberLevelElements && memberLevelElements.length > 0) { + memberLevelElements.forEach((ele) => (ele.innerHTML = templateLoading())); + } else { + element.innerHTML = templateLoading(); + } + let membersListArray = [ { level: SD_NAME, members: [] }, { level: AP_NAME, members: [] }, diff --git a/js/solstice/templates/loading-icon.mustache b/js/solstice/templates/loading-icon.mustache new file mode 100644 index 0000000..1eac4be --- /dev/null +++ b/js/solstice/templates/loading-icon.mustache @@ -0,0 +1,4 @@ +
    + + Loading... +
    \ No newline at end of file -- GitLab From 7abe39a9ec2864a1c76a16f94f0317f55b2cddab Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Wed, 20 Apr 2022 10:33:01 -0400 Subject: [PATCH 06/14] Removed duplicated template --- js/solstice/eclipsefdn.members-list.js | 6 +++--- js/solstice/templates/loading-icon.mustache | 2 +- .../wg-members/wg-member-logo-with-levels.mustache | 11 ----------- .../wg-members/wg-member-only-logos.mustache | 8 ++++---- 4 files changed, 8 insertions(+), 19 deletions(-) delete mode 100644 js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 0f7d2c0..48bbdfc 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -18,7 +18,6 @@ import displayErrMsg from '../utils/displayErrMsg'; import template from './templates/explore-members/member.mustache'; import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; import templateLogoTitleWithLevels from './templates/wg-members/wg-member-logo-title-with-levels.mustache'; -import templateLogoWithLevels from './templates/wg-members/wg-member-logo-with-levels.mustache'; import templateLoading from './templates/loading-icon.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; @@ -138,6 +137,7 @@ const EclipseFdnMembersList = (async () => { const displayMembersByLevels = (theTemplate) => { document.querySelectorAll('.members-by-level').forEach((item) => { // Get members belong to the level of current item + // membersListArray for WG only contains 1 item item.innerHTML = theTemplate({ item: membersListArray[0].members.filter((member) => member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level')) @@ -147,7 +147,6 @@ const EclipseFdnMembersList = (async () => { }; switch (element.getAttribute('data-ml-template')) { - // membersListArray for WG only contains 1 item case 'only-logos': element.innerHTML = templateOnlyLogos({ item: membersListArray[0].members, @@ -159,7 +158,7 @@ const EclipseFdnMembersList = (async () => { $.fn.matchHeight._applyDataApi(); return; case 'logo-with-levels': - displayMembersByLevels(templateLogoWithLevels); + displayMembersByLevels(templateOnlyLogos); return; default: break; @@ -173,4 +172,5 @@ const EclipseFdnMembersList = (async () => { }); $.fn.matchHeight._applyDataApi(); })(); + export default EclipseFdnMembersList; diff --git a/js/solstice/templates/loading-icon.mustache b/js/solstice/templates/loading-icon.mustache index 1eac4be..3c5a143 100644 --- a/js/solstice/templates/loading-icon.mustache +++ b/js/solstice/templates/loading-icon.mustache @@ -1,4 +1,4 @@
    Loading... -
    \ No newline at end of file +
    diff --git a/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache b/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache deleted file mode 100644 index bda9d96..0000000 --- a/js/solstice/templates/wg-members/wg-member-logo-with-levels.mustache +++ /dev/null @@ -1,11 +0,0 @@ -{{#item}} -
  • - {{#website}} - - {{/website}} - {{name}} - {{#website}} - - {{/website}} -
    • -{{/item}} \ No newline at end of file diff --git a/js/solstice/templates/wg-members/wg-member-only-logos.mustache b/js/solstice/templates/wg-members/wg-member-only-logos.mustache index fd3e6b4..8e4553c 100644 --- a/js/solstice/templates/wg-members/wg-member-only-logos.mustache +++ b/js/solstice/templates/wg-members/wg-member-only-logos.mustache @@ -1,11 +1,11 @@ {{#item}}
  • - {{#website}} + {{#website}} - {{/website}} + {{/website}} {{name}} - {{#website}} + {{#website}} - {{/website}} + {{/website}}
    • {{/item}} -- GitLab From 8bf2ed78d6df87f5a708b1cd78bd4d9e29ce9ba7 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Wed, 20 Apr 2022 10:44:10 -0400 Subject: [PATCH 07/14] Updated example site based on new changes to the templates and logic --- docs/explore-wg.html | 6 +----- docs/members-adoptium.html | 6 +----- docs/members-sd-as.html | 6 +----- docs/members.html | 4 ---- js/solstice/eclipsefdn.wgs-list.js | 2 ++ 5 files changed, 5 insertions(+), 19 deletions(-) diff --git a/docs/explore-wg.html b/docs/explore-wg.html index 618a4f0..1fad481 100644 --- a/docs/explore-wg.html +++ b/docs/explore-wg.html @@ -362,11 +362,7 @@
    -
    -
    - - Loading... -
    +
    diff --git a/docs/members-adoptium.html b/docs/members-adoptium.html index c1a80c1..7fb115b 100644 --- a/docs/members-adoptium.html +++ b/docs/members-adoptium.html @@ -459,11 +459,7 @@

    Adoptium Working Group Members

    -
    -
    - - Loading... -
    +
    diff --git a/docs/members-sd-as.html b/docs/members-sd-as.html index 08c5ee3..ed86388 100644 --- a/docs/members-sd-as.html +++ b/docs/members-sd-as.html @@ -458,11 +458,7 @@
    -
    -
    - - Loading... -
    +
    diff --git a/docs/members.html b/docs/members.html index dd26a84..94280af 100644 --- a/docs/members.html +++ b/docs/members.html @@ -459,10 +459,6 @@
    -
    - - Loading... -
    diff --git a/js/solstice/eclipsefdn.wgs-list.js b/js/solstice/eclipsefdn.wgs-list.js index b3a2b84..e337f82 100644 --- a/js/solstice/eclipsefdn.wgs-list.js +++ b/js/solstice/eclipsefdn.wgs-list.js @@ -15,12 +15,14 @@ import displayErrMsg from '../utils/displayErrMsg'; import template from './templates/explore-working-groups/working-group-list.mustache'; +import templateLoading from './templates/loading-icon.mustache'; const EclipseFdnWGsList = (async () => { const element = document.querySelector('.eclipsefdn-wgs-list'); if (!element) { return; } + element.innerHTML = templateLoading(); let url = 'https://membership.eclipse.org/api/working_groups'; let wgsData; -- GitLab From b27838a911f9b7db86f0ff68cf6bc04265d28dda Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Thu, 21 Apr 2022 16:24:55 -0400 Subject: [PATCH 08/14] Added ability to display level under each logo --- js/solstice/eclipsefdn.members-list.js | 2 ++ .../wg-members/wg-member-only-logos.mustache | 17 ++++++++------- less/_components/classes-flex.less | 7 +++++++ less/_components/classes-lists.less | 21 +++++++++++++++++++ 4 files changed, 39 insertions(+), 8 deletions(-) diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 48bbdfc..475087c 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -142,6 +142,7 @@ const EclipseFdnMembersList = (async () => { item: membersListArray[0].members.filter((member) => member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level')) ), + showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo') || false, }); }); }; @@ -150,6 +151,7 @@ const EclipseFdnMembersList = (async () => { case 'only-logos': element.innerHTML = templateOnlyLogos({ item: membersListArray[0].members, + showLevelUnderLogo: element.getAttribute('data-ml-level-under-logo') || false, }); return; diff --git a/js/solstice/templates/wg-members/wg-member-only-logos.mustache b/js/solstice/templates/wg-members/wg-member-only-logos.mustache index 8e4553c..5755798 100644 --- a/js/solstice/templates/wg-members/wg-member-only-logos.mustache +++ b/js/solstice/templates/wg-members/wg-member-only-logos.mustache @@ -1,11 +1,12 @@ {{#item}} -
  • - {{#website}} - - {{/website}} - {{name}} - {{#website}} - - {{/website}} +
  • + + {{name}} + + {{#showLevelUnderLogo}} + + {{showLevelUnderLogo}} + + {{/showLevelUnderLogo}}
    • {{/item}} diff --git a/less/_components/classes-flex.less b/less/_components/classes-flex.less index 3b2e218..a86cb48 100644 --- a/less/_components/classes-flex.less +++ b/less/_components/classes-flex.less @@ -7,6 +7,7 @@ * * Contributors: * Christopher Guindon + * Zhou Fang * * SPDX-License-Identifier: EPL-2.0 */ @@ -18,6 +19,12 @@ display: flex; } +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + @media (min-width: @screen-md-min) { .vertical-align-md { .vertical-align; diff --git a/less/_components/classes-lists.less b/less/_components/classes-lists.less index 5b7d8e4..a1a85ff 100755 --- a/less/_components/classes-lists.less +++ b/less/_components/classes-lists.less @@ -7,6 +7,7 @@ * * Contributors: * Christopher Guindon + * Zhou Fang * * SPDX-License-Identifier: EPL-2.0 */ @@ -138,3 +139,23 @@ ul.list-no-bullets { .fa-li{ top:0.23em; } + +.members-by-level { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 45px; + .members-item { + font-size: 12px; + padding: 0; + a { + height: 80px; + max-width: 110px; + margin-bottom: 5px; + img.img-responsive { + max-height: 100%; + } + } + } +} -- GitLab From fcb8dfe403a4643a42d6bdf0a53a750071d0f12b Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Fri, 22 Apr 2022 12:08:04 -0400 Subject: [PATCH 09/14] Added logic to handle url linked to logo --- docs/members-adoptium.html | 6 ++++-- js/solstice/eclipsefdn.members-detail.js | 16 ++-------------- js/solstice/eclipsefdn.members-list.js | 14 ++++++++++++-- js/solstice/eclipsefdn.wgs-list.js | 3 +-- .../wg-member-logo-title-with-levels.mustache | 6 +++--- .../wg-members/wg-member-only-logos.mustache | 2 +- js/utils/{displayErrMsg.js => utils.js} | 15 +++++++++++++-- less/_components/classes-lists.less | 19 ++++++++++++++++++- 8 files changed, 54 insertions(+), 27 deletions(-) rename js/utils/{displayErrMsg.js => utils.js} (57%) diff --git a/docs/members-adoptium.html b/docs/members-adoptium.html index 7fb115b..a11800a 100644 --- a/docs/members-adoptium.html +++ b/docs/members-adoptium.html @@ -458,8 +458,10 @@
    -

    Adoptium Working Group Members

    -
    +

    Adoptium Working Group Strategic Members

    +
    diff --git a/js/solstice/eclipsefdn.members-detail.js b/js/solstice/eclipsefdn.members-detail.js index 393bbc6..6a69c70 100644 --- a/js/solstice/eclipsefdn.members-detail.js +++ b/js/solstice/eclipsefdn.members-detail.js @@ -14,6 +14,7 @@ import getMembers from '../api/eclipsefdn.members'; import template from './templates/explore-members/member-detail.mustache'; import { SD_IMG, AP_IMG, AS_IMG } from './eclipsefdn.constants.js'; +import { validateURL } from '../utils/utils'; const EclipseFdnMemberDetail = (async () => { const element = document.querySelector('.member-detail'); @@ -112,24 +113,11 @@ const EclipseFdnMemberDetail = (async () => { return false; }; - const validateURL = () => { - let isValidate; - try { - // This will fail if the URL is not valid - new URL(memberDetailData.website); - isValidate = true; - } catch (error) { - isValidate = false; - console.log(error); - } - return isValidate; - }; - element.innerHTML = template({ section: memberDetailData, getMemberLevelImg, shouldShowLinksSideBar, - validateURL, + validateURL: () => validateURL(memberDetailData.website), trimDescription: function () { const description = this.description.long; return description ? description.replaceAll('\\r\\n', '').replaceAll('\\', '') : ''; diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 475087c..bf2ca57 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -14,7 +14,7 @@ import $ from 'jquery'; import 'jquery-match-height'; import getMembers from '../api/eclipsefdn.members'; -import displayErrMsg from '../utils/displayErrMsg'; +import { displayErrMsg, validateURL } from '../utils/utils'; import template from './templates/explore-members/member.mustache'; import templateOnlyLogos from './templates/wg-members/wg-member-only-logos.mustache'; import templateLogoTitleWithLevels from './templates/wg-members/wg-member-logo-title-with-levels.mustache'; @@ -48,6 +48,7 @@ const EclipseFdnMembersList = (async () => { const isRandom = element.getAttribute('data-ml-sort') === 'random'; const level = element.getAttribute('data-ml-level'); const wg = element.getAttribute('data-ml-wg'); + const linkMemberWebsite = element.getAttribute('data-ml-link-member-website') === 'true' ? true : false; if (level) { level.split(' ').forEach((item) => (url = `${url}&levels=${item}`)); @@ -134,8 +135,15 @@ const EclipseFdnMembersList = (async () => { membersListArray = membersListArray.filter((list) => list.members.length !== 0); } + const urlLinkToLogo = function () { + if (linkMemberWebsite && validateURL(this.website)) { + return this.website; + } + return `https://www.eclipse.org/membership/showMember.php?member_id=${this.organization_id}`; + }; + const displayMembersByLevels = (theTemplate) => { - document.querySelectorAll('.members-by-level').forEach((item) => { + memberLevelElements.forEach((item) => { // Get members belong to the level of current item // membersListArray for WG only contains 1 item item.innerHTML = theTemplate({ @@ -143,6 +151,7 @@ const EclipseFdnMembersList = (async () => { member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level')) ), showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo') || false, + urlLinkToLogo, }); }); }; @@ -152,6 +161,7 @@ const EclipseFdnMembersList = (async () => { element.innerHTML = templateOnlyLogos({ item: membersListArray[0].members, showLevelUnderLogo: element.getAttribute('data-ml-level-under-logo') || false, + urlLinkToLogo }); return; diff --git a/js/solstice/eclipsefdn.wgs-list.js b/js/solstice/eclipsefdn.wgs-list.js index e337f82..e7f5859 100644 --- a/js/solstice/eclipsefdn.wgs-list.js +++ b/js/solstice/eclipsefdn.wgs-list.js @@ -13,7 +13,7 @@ * SPDX-License-Identifier: EPL-2.0 */ -import displayErrMsg from '../utils/displayErrMsg'; +import { displayErrMsg } from '../utils/utils'; import template from './templates/explore-working-groups/working-group-list.mustache'; import templateLoading from './templates/loading-icon.mustache'; @@ -120,7 +120,6 @@ const EclipseFdnWGsList = (async () => { } }); target.classList.add('active'); - currentSelectedStatus = newSelectedStatus; }; diff --git a/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache b/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache index 2855e2e..6c398b0 100644 --- a/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache +++ b/js/solstice/templates/wg-members/wg-member-logo-title-with-levels.mustache @@ -3,13 +3,13 @@

    - {{name}} + {{name}}

    - - {{name}} logo + + {{name}} logo
    diff --git a/js/solstice/templates/wg-members/wg-member-only-logos.mustache b/js/solstice/templates/wg-members/wg-member-only-logos.mustache index 5755798..7493f5f 100644 --- a/js/solstice/templates/wg-members/wg-member-only-logos.mustache +++ b/js/solstice/templates/wg-members/wg-member-only-logos.mustache @@ -1,6 +1,6 @@ {{#item}}
  • - + {{name}} {{#showLevelUnderLogo}} diff --git a/js/utils/displayErrMsg.js b/js/utils/utils.js similarity index 57% rename from js/utils/displayErrMsg.js rename to js/utils/utils.js index 9159352..10f11b0 100644 --- a/js/utils/displayErrMsg.js +++ b/js/utils/utils.js @@ -11,7 +11,18 @@ * SPDX-License-Identifier: EPL-2.0 */ -const displayErrMsg = (element, err = '', errText = 'Sorry, something went wrong, please try again later.') => +export const displayErrMsg = (element, err = '', errText = 'Sorry, something went wrong, please try again later.') => (element.innerHTML = ``); -export default displayErrMsg; +export const validateURL = (url) => { + let isValidate; + try { + // This will fail if the url is not valid + new URL(url); + isValidate = true; + } catch (error) { + isValidate = false; + console.log(error); + } + return isValidate; +}; diff --git a/less/_components/classes-lists.less b/less/_components/classes-lists.less index a1a85ff..1c9f593 100755 --- a/less/_components/classes-lists.less +++ b/less/_components/classes-lists.less @@ -145,7 +145,24 @@ ul.list-no-bullets { justify-content: center; align-items: center; flex-wrap: wrap; - gap: 45px; + &.gap-10 { + gap: 10px; + } + &.gap-20 { + gap: 20px; + } + &.gap-30 { + gap: 30px; + } + &.gap-40 { + gap: 40px; + } + &.gap-50 { + gap: 50px; + } + &.gap-60 { + gap: 60px; + } .members-item { font-size: 12px; padding: 0; -- GitLab From 6ccb8eb7cf65f2eec5c5e64279582ae5f5eacb31 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Fri, 22 Apr 2022 13:40:33 -0400 Subject: [PATCH 10/14] Fixed layout issue for default template --- less/_components/classes-flex.less | 1 + less/_components/classes-lists.less | 5 +---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/less/_components/classes-flex.less b/less/_components/classes-flex.less index a86cb48..8ab114a 100644 --- a/less/_components/classes-flex.less +++ b/less/_components/classes-flex.less @@ -23,6 +23,7 @@ display: flex; justify-content: center; align-items: center; + flex-wrap: wrap; } @media (min-width: @screen-md-min) { diff --git a/less/_components/classes-lists.less b/less/_components/classes-lists.less index 1c9f593..2970285 100755 --- a/less/_components/classes-lists.less +++ b/less/_components/classes-lists.less @@ -140,11 +140,8 @@ ul.list-no-bullets { top:0.23em; } +.eclipsefdn-members-list, .members-by-level { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; &.gap-10 { gap: 10px; } -- GitLab From 1c04772d3edad71b93266a5030d284606a6bb8c3 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Fri, 22 Apr 2022 14:16:27 -0400 Subject: [PATCH 11/14] Minor css structure update --- less/_components/classes-flex.less | 19 +++++++++++++++++++ less/_components/classes-lists.less | 28 ++++++---------------------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/less/_components/classes-flex.less b/less/_components/classes-flex.less index 8ab114a..236569c 100644 --- a/less/_components/classes-flex.less +++ b/less/_components/classes-flex.less @@ -26,6 +26,25 @@ flex-wrap: wrap; } +.gap-10 { + gap: 10px; +} +.gap-20 { + gap: 20px; +} +.gap-30 { + gap: 30px; +} +.gap-40 { + gap: 40px; +} +.gap-50 { + gap: 50px; +} +.gap-60 { + gap: 60px; +} + @media (min-width: @screen-md-min) { .vertical-align-md { .vertical-align; diff --git a/less/_components/classes-lists.less b/less/_components/classes-lists.less index 2970285..130bbba 100755 --- a/less/_components/classes-lists.less +++ b/less/_components/classes-lists.less @@ -142,34 +142,18 @@ ul.list-no-bullets { .eclipsefdn-members-list, .members-by-level { - &.gap-10 { - gap: 10px; - } - &.gap-20 { - gap: 20px; - } - &.gap-30 { - gap: 30px; - } - &.gap-40 { - gap: 40px; - } - &.gap-50 { - gap: 50px; - } - &.gap-60 { - gap: 60px; - } .members-item { font-size: 12px; padding: 0; - a { + } + a { + & { height: 80px; max-width: 110px; margin-bottom: 5px; - img.img-responsive { - max-height: 100%; - } + } + img.img-responsive { + max-height: 100%; } } } -- GitLab From 3104cd07bf562b6fc66d82b309ed9840d45ff569 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Tue, 26 Apr 2022 13:28:54 -0400 Subject: [PATCH 12/14] Updated css based on feedback and improved ie11 layout --- less/_components/classes-lists.less | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/less/_components/classes-lists.less b/less/_components/classes-lists.less index 130bbba..031c91d 100755 --- a/less/_components/classes-lists.less +++ b/less/_components/classes-lists.less @@ -140,11 +140,13 @@ ul.list-no-bullets { top:0.23em; } -.eclipsefdn-members-list, -.members-by-level { +.eclipsefdn-members-list{ .members-item { font-size: 12px; padding: 0; + @media all and (-ms-high-contrast:none){ + padding: 20px + } } a { & { @@ -154,6 +156,9 @@ ul.list-no-bullets { } img.img-responsive { max-height: 100%; + @media all and (-ms-high-contrast:none){ + max-width: 110px; + } } } } -- GitLab From 6abdd4ec6776b785567f3895fea33f0bb1ef1139 Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Wed, 27 Apr 2022 11:37:20 -0400 Subject: [PATCH 13/14] Updated display members logic to hanlde cases similar to ecdtools --- js/solstice/eclipsefdn.members-list.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index bf2ca57..2c06e14 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -144,15 +144,19 @@ const EclipseFdnMembersList = (async () => { const displayMembersByLevels = (theTemplate) => { memberLevelElements.forEach((item) => { - // Get members belong to the level of current item + item.innerHTML = '' + // Work for both 'level' and 'level1, level2, ...' + item.getAttribute('data-ml-wg-level').split(',').forEach((level, index)=>{ + // Get members belong to current level // membersListArray for WG only contains 1 item - item.innerHTML = theTemplate({ - item: membersListArray[0].members.filter((member) => - member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === item.getAttribute('data-ml-wg-level')) - ), - showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo') || false, - urlLinkToLogo, - }); + item.innerHTML = item.innerHTML + theTemplate({ + item: membersListArray[0].members.filter((member) => + member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === level.trim()) + ), + showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo').split(',')[index].trim() || false, + urlLinkToLogo, + }); + }) }); }; -- GitLab From 8e27e4ac8eeec2aebf3d9f5b6afad0dc290f576e Mon Sep 17 00:00:00 2001 From: Zhou Fang Date: Wed, 27 Apr 2022 11:55:08 -0400 Subject: [PATCH 14/14] Fixed issue when there is no data-ml-level-under-logo --- js/solstice/eclipsefdn.members-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/solstice/eclipsefdn.members-list.js b/js/solstice/eclipsefdn.members-list.js index 2c06e14..46caf5f 100644 --- a/js/solstice/eclipsefdn.members-list.js +++ b/js/solstice/eclipsefdn.members-list.js @@ -153,7 +153,7 @@ const EclipseFdnMembersList = (async () => { item: membersListArray[0].members.filter((member) => member.wgpas.find((wgpa) => wgpa.working_group === wg && wgpa.level === level.trim()) ), - showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo').split(',')[index].trim() || false, + showLevelUnderLogo: item.getAttribute('data-ml-level-under-logo')?.split(',')?.[index]?.trim() || false, urlLinkToLogo, }); }) -- GitLab