Carolyn, I couldn't help myself; had to try this out.
Here's a working example I created based on the code in the DSpace Health
page components. The stuff in the ngbPanelHeader DIVs could be simpler,
but the button makes the entire header clickable and the SPANs provide a
visual indicator of whether the section is expanded or not. It could
easily be just the title of the section, but this is how the DSpace
elements were done so it matches the rest of the site.
I just dropped this into one of my components and it seemed to work fine:
<ngb-accordion #acc="ngbAccordion" activeIds="panel1">
<ngb-panel id="panel1">
<ng-template ngbPanelHeader>
<div class="w-100 d-flex justify-content-between collapse-toggle"
ngbPanelToggle (click)="acc.toggle('panel1')">
<button type="button" class="btn btn-link p-0"
(click)="$event.preventDefault()"
[attr.aria-expanded]="!acc.isExpanded('panel1')"
aria-controls="collapsePanels">
Section 1
</button>
<div class="text-right d-flex">
<div class="ml-3 d-inline-block">
<span *ngIf="acc.isExpanded('panel1')" class="fas
fa-chevron-up fa-fw"></span>
<span *ngIf="!acc.isExpanded('panel1')" class="fas
fa-chevron-down fa-fw"></span>
</div>
</div>
</div>
</ng-template>
<ng-template ngbPanelContent>
Content for section 1
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelHeader>
<div class="w-100 d-flex justify-content-between collapse-toggle"
ngbPanelToggle (click)="acc.toggle('panel2')">
<button type="button" class="btn btn-link p-0"
(click)="$event.preventDefault()"
[attr.aria-expanded]="!acc.isExpanded('panel2')"
aria-controls="collapsePanels">
Section 2
</button>
<div class="text-right d-flex">
<div class="ml-3 d-inline-block">
<span *ngIf="acc.isExpanded('panel2')" class="fas
fa-chevron-up fa-fw"></span>
<span *ngIf="!acc.isExpanded('panel2')" class="fas
fa-chevron-down fa-fw"></span>
</div>
</div>
</div>
</ng-template>
<ng-template ngbPanelContent>
Content for section 2
</ng-template>
</ngb-panel>
</ngb-accordion>
On Wednesday, October 18, 2023 at 11:14:09 AM UTC-6 [email protected]
wrote:
>
> I think you are correct, the normal jquery libraries are not loaded, or
> are not loaded in such a way that the functions are available to you as
> they would be in a more traditional web application. Google turned up some
> suggestions on getting jquery into Angular apps, but I'm wondering if there
> might be an easier way.
>
> Accordions/collapse are definitely in the frontend -- when logged in, the
> right side nav menu has collapsible menu elements, and the Health page has
> a very typical looking accordion section. So the functionality is already
> there for sure.
>
> If you look at, for example,
> src/app/health-page/health-info/health-info.component.html DSpace seems
> to be using ngb-accordion to implement accordions rather than the typical
> jquery/Bootstrap accordions. ngb-accordion appears elsewhere in the code
> as well. Perhaps you could use that as a starting point?
>
> - Darryl
>
> On Tuesday, October 17, 2023 at 12:00:35 PM UTC-6 Carolyn Sullivan wrote:
>
>> @Darryl... thanks, that was definitely it :embarassed look : You're
>> awesome :)
>>
>> Potentially related issue... I'm trying to use Bootstrap 4 in my static
>> pages for the styling, but even code I copy directly from the Bootstrap
>> site without modifying doesn't display appropriately. For example, I'm
>> trying to replace our vanilla javascript custom accordions on the old
>> jsp page <https://ruor.uottawa.ca/faq.jsp> with the Collapse/Accordion
>> <https://getbootstrap.com/docs/4.0/components/collapse/>in the new
>> version, and the tabs don't open when clicked.
>>
>> [image: 101723_Bootstrap.PNG]
>> It's like it's not connecting to the files for jquery or something
>> still... has anyone seen anything like this?
>>
>> Thanks to everyone for your time and support!
>>
>> Carolyn.
>>
>> On Thursday, October 12, 2023 at 5:19:10 PM UTC-4 [email protected]
>> wrote:
>>
>>> I had a look at the custom "About" component I created for our site, and
>>> it does use translate for a header without error.
>>>
>>> I see that TranslateModule is imported in my theme's
>>> lazy-theme.module.ts so I assume (and I'm no Angular developer so I'm
>>> just kinda guessing here) that is how its made available to all the
>>> components. So I'm wondering if you forgot to import your component in
>>> lazy-theme.module.ts and that's maybe why it doesn't have translate
>>> available? In my lazy-theme.module.ts, after all the existing imports
>>> I added this for my 2 components:
>>>
>>> import { AboutComponent } from './app/info/about/about.component';
>>> import { GuidelinesComponent } from
>>> './app/info/guidelines/guidelines.component';
>>>
>>> and at the end of the DECLARATIONS array I added
>>>
>>> const DECLARATIONS = [
>>> // All the default components are here
>>>
>>> AboutComponent,
>>> GuidelinesComponent,
>>> ];
>>>
>>>
>>> If you have done all that and still have the error, then I'm afraid I'm
>>> at the edge of my Angular knowledge. Hopefully someone else can offer some
>>> suggestions
>>>
>>> - Darryl
>>>
>>> On Thursday, October 12, 2023 at 2:01:44 PM UTC-6 Carolyn Sullivan wrote:
>>>
>>>> Thanks everyone! Since my institution (the University of Ottawa in
>>>> Ontario, Canada) is a bilingual university, it's best practice for us to
>>>> have independent views in each language--otherwise, our webpages get very
>>>> bulky with the duplication of text.
>>>>
>>>> Adding the translation works fine on the home-news.component.html, but
>>>> when I try to do something similar in my created components, ie:
>>>>
>>>> <div class="container">
>>>> <div class="row panel">
>>>> <div class="col-md-12">
>>>> <h3>
>>>> {{ 'uoresearch.head' | translate }}
>>>> </h3>
>>>> <div class="panel content">
>>>>
>>>> </div>
>>>> </div>
>>>> </div>
>>>> </div>
>>>>
>>>> I end up getting
>>>>
>>>> error NG8004: No pipe found with name 'translate'.
>>>>
>>>> What could be causing this? I assume when the existing components call
>>>> the default components (ie: import { HomePageComponent as BaseComponent
>>>> } from '../../../../app/home-page/home-page.component';), it's linking
>>>> to something that calls the ngx translate module, but I can't figure out
>>>> what's going on.
>>>>
>>>>
>>>>
>>>> On Friday, October 6, 2023 at 11:46:43 AM UTC-4 [email protected]
>>>> wrote:
>>>>
>>>>> Carolyn, you could just place both the English and French text in your
>>>>> home-news.component.html file, and bypass the i18n stuff. Certainly not
>>>>> as
>>>>> elegant as having it switch based on the selected language, but it is
>>>>> easier. All the email I get from the Government of Canada just have both
>>>>> languages like that. :)
>>>>>
>>>>> DSpace does seem to set the lang attribute of the html tag to the
>>>>> selected language, so perhaps there's some fancy CSS you could do to
>>>>> show/hide the French and English sections based on the "fr" or "en"
>>>>> values
>>>>> there. I don't know if that's any less work than the i18n method, but it
>>>>> would give the appearance of being dynamic.
>>>>>
>>>>> - Darryl
>>>>>
>>>>> On Tuesday, October 3, 2023 at 8:11:18 AM UTC-6 Carolyn Sullivan wrote:
>>>>>
>>>>>> Thank you all so much for your responses! This is super helpful in
>>>>>> terms of learning more about customize the interface, and gives me some
>>>>>> direction for issues I need to be aware of (like figuring out an
>>>>>> alternative to tweaking code outside the theme). One more question: My
>>>>>> institution, uOttawa, is fully bilingual, which means all the text needs
>>>>>> to
>>>>>> be translated to both French and English. I think that means that
>>>>>> material
>>>>>> like the text on the home-news.component.html page needs to be defined
>>>>>> in
>>>>>> the i18n page, but part of me balks at the idea of adding 1000-word
>>>>>> definitions for labels... is there any other dynamic/Angular way of
>>>>>> doing
>>>>>> this, or is this, in fact, the way it's done?
>>>>>>
>>>>>> Thanks,
>>>>>> Carolyn.
>>>>>>
>>>>>> On Monday, October 2, 2023 at 2:00:52 PM UTC-4 [email protected]
>>>>>> wrote:
>>>>>>
>>>>>>> Our implementation looks very similar to Mark's. We created 2
>>>>>>> additional components in the app/info directory of our theme, one
>>>>>>> for an About component and one for a Guidelines component. I started by
>>>>>>> just copying one of the existing "feedback" or "privacy" directories (I
>>>>>>> forget which one I used, but either will work) then changed the
>>>>>>> filename
>>>>>>> names, content, selectors etc. I modified lazy-theme.module.ts in
>>>>>>> my theme folder to import my 2 new components. This seems to mimic
>>>>>>> what
>>>>>>> Mark did according to that diff in Slack.
>>>>>>>
>>>>>>> Where Mark and I differ is how I added those 2 components to
>>>>>>> DSpace. We wanted an About menu at the start of the nav bar with a
>>>>>>> dropdown for our About and Guidelines pages, and wanted the URLs to be
>>>>>>> like
>>>>>>> the Feedback URL (/info/feedback) i.e. /info/about and
>>>>>>> /info/guidelines. To do this I modified the core
>>>>>>> /src/app/info/info-routing.module.ts and imported my 2 components
>>>>>>> there and added this right below the existing FEEDBACK_PATH path
>>>>>>> (around line 20)
>>>>>>>
>>>>>>> {
>>>>>>> path: 'about',
>>>>>>> component: AboutComponent,
>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver },
>>>>>>> data: { title: 'info.about.title', breadcrumbKey: 'info.about'
>>>>>>> },
>>>>>>> },
>>>>>>> {
>>>>>>> path: 'guidelines',
>>>>>>> component: GuidelinesComponent,
>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver },
>>>>>>> data: { title: 'info.guidelines.title', breadcrumbKey:
>>>>>>> 'info.guidelines' },
>>>>>>> }
>>>>>>>
>>>>>>> To add my About menu and the dropdown options (this may not be
>>>>>>> needed for 7.6 as I think there have been some additional themable
>>>>>>> components added related to the nav bar; I did this in 7.4 initially) I
>>>>>>> added this section to /src/app/menu.resolver.ts at about line 96
>>>>>>> (i.e I inserted these as the very first entries in the menuList
>>>>>>> array in createPublicMenu, right before the existing Communities
>>>>>>> and Collections element)
>>>>>>>
>>>>>>> /* About */
>>>>>>> {
>>>>>>> id: `about_about`,
>>>>>>> parentID: 'about',
>>>>>>> active: false,
>>>>>>> visible: true,
>>>>>>> model: {
>>>>>>> type: MenuItemType.LINK,
>>>>>>> text: `info.about.title`,
>>>>>>> link: `/info/about`
>>>>>>> } as LinkMenuItemModel
>>>>>>> },
>>>>>>> {
>>>>>>> id: `about_guidelines`,
>>>>>>> parentID: 'about',
>>>>>>> active: false,
>>>>>>> visible: true,
>>>>>>> model: {
>>>>>>> type: MenuItemType.LINK,
>>>>>>> text: `info.guidelines.title`,
>>>>>>> link: `/info/guidelines`
>>>>>>> } as LinkMenuItemModel
>>>>>>> },
>>>>>>> {
>>>>>>> id: 'about',
>>>>>>> active: false,
>>>>>>> visible: true,
>>>>>>> index: 0,
>>>>>>> model: {
>>>>>>> type: MenuItemType.TEXT,
>>>>>>> text: 'menu.section.about'
>>>>>>> } as TextMenuItemModel,
>>>>>>> },
>>>>>>>
>>>>>>>
>>>>>>> I don't like having to modify code outside of the theme, but I was
>>>>>>> in a bit of a rush to get this working. I think 7.6 made some
>>>>>>> additional
>>>>>>> nav related stuff themable so I might be able to undo that last
>>>>>>> modification. I haven't actually investigated that yet.
>>>>>>>
>>>>>>> - Darryl
>>>>>>>
>>>>>>>
>>>>>>> On Monday, October 2, 2023 at 9:51:09 AM UTC-6 Carolyn Sullivan
>>>>>>> wrote:
>>>>>>>
>>>>>>>> Oh wait, I see Mark has helpfully shared his code in the DSpace
>>>>>>>> Slack:
>>>>>>>> https://dspace-org.slack.com/archives/C3TTSEB1V/p1694715563285319
>>>>>>>>
>>>>>>>> The changes aren't working in my repo so far, but this gives me a
>>>>>>>> good starting point--thanks Mark!
>>>>>>>>
>>>>>>>> On Monday, October 2, 2023 at 9:43:43 AM UTC-4 Carolyn Sullivan
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> Hello,
>>>>>>>>>
>>>>>>>>> Thank you for opening this thread. I have the same problem as
>>>>>>>>> Mariusz originally did, and was wondering if anyone could offer some
>>>>>>>>> more
>>>>>>>>> specific recommendations regarding Mark Wood's solution.
>>>>>>>>>
>>>>>>>>> On our repository, we added an additional link to the navbar menu
>>>>>>>>> like so:
>>>>>>>>>
>>>>>>>>> <li ngbDropdown class="nav-item d-flex align-items-center">
>>>>>>>>> <a class="nav-link " role="button" data-toggle="dropdown"
>>>>>>>>> aria-expanded="false" ngbDropdownToggle> About </a>
>>>>>>>>> <div ngbDropdownMenu class="m-0 border-top-0 ng-trigger
>>>>>>>>> ng-trigger-slide shadow-none" id="customDrop">
>>>>>>>>> <a ngbDropdownItem style="color: #207698"
>>>>>>>>> href="assets/about/uo-research.html">UO-Research</a>
>>>>>>>>> <a ngbDropdownItem style="color: #207698"
>>>>>>>>> href="assets/about/policies.html">Policies</a>
>>>>>>>>> <a ngbDropdownItem style="color: #207698"
>>>>>>>>> href="assets/about/faq.html">FAQ</a>
>>>>>>>>> </div>
>>>>>>>>> </li>
>>>>>>>>>
>>>>>>>>> To use this structure but have it link to a view with the DSpace
>>>>>>>>> header/footer and text content sandwiched between, would we then
>>>>>>>>> create a
>>>>>>>>> component in our custom/app folder, and then use a routing
>>>>>>>>> module/routerlink to get to that component view instead of using the
>>>>>>>>> static
>>>>>>>>> link here (https://angular.io/tutorial/tour-of-heroes/toh-pt5)?
>>>>>>>>> Is that the simplest way of doing it?
>>>>>>>>>
>>>>>>>>> Thanks,
>>>>>>>>> Carolyn.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Friday, June 10, 2022 at 8:39:52 AM UTC-4 Mariusz wrote:
>>>>>>>>>
>>>>>>>>>> It enlightened me and I have done it in the meantime. I just
>>>>>>>>>> doubled the privacy component accordingly. Managed to. It works. But
>>>>>>>>>> thanks
>>>>>>>>>> for any suggestions.
>>>>>>>>>>
>>>>>>>>>> Regards
>>>>>>>>>> Mariusz
>>>>>>>>>>
>>>>>>>>>> piątek, 10 czerwca 2022 o 14:25:27 UTC+2 [email protected]
>>>>>>>>>> napisał(a):
>>>>>>>>>>
>>>>>>>>>>> On Fri, Jun 10, 2022 at 02:35:00AM -0700, Mariusz wrote:
>>>>>>>>>>> > It works, but how can I make static pages look like the rest.
>>>>>>>>>>> I would like
>>>>>>>>>>> > a page with static content that looks like other pages in my
>>>>>>>>>>> repository. I
>>>>>>>>>>> > have already created my own theme. I would like to have
>>>>>>>>>>> additional (themed)
>>>>>>>>>>> > pages with my permanent content, as now they have info/privacy
>>>>>>>>>>> (Privacy
>>>>>>>>>>> > Statement) or info/end-user-agreement (End User Agreement) .
>>>>>>>>>>> Pages with my
>>>>>>>>>>> > own info. I don't know if I'm explaining well. ;)
>>>>>>>>>>>
>>>>>>>>>>> So, I think you are saying that you want a page with all of the
>>>>>>>>>>> common
>>>>>>>>>>> DSpace decorations, behaviors and styling, but with static
>>>>>>>>>>> content in
>>>>>>>>>>> the middle. That does not sound like a static page, but a
>>>>>>>>>>> dynamic
>>>>>>>>>>> page with fixed main content. I think that, to do this, you
>>>>>>>>>>> would
>>>>>>>>>>> just write a component whose HTML template file contains no
>>>>>>>>>>> placeholders and whose Typescript file contains no behaviors.
>>>>>>>>>>> Use the
>>>>>>>>>>> theme's styling classes so that the rendering of your component
>>>>>>>>>>> tracks
>>>>>>>>>>> changes to the theme.
>>>>>>>>>>>
>>>>>>>>>>> The "page" is assembled by Angular in the browser, and the stuff
>>>>>>>>>>> in
>>>>>>>>>>> the middle that changes as you navigate is just one part of the
>>>>>>>>>>> assembly. https://en.wikipedia.org/wiki/Single-page_application
>>>>>>>>>>>
>>>>>>>>>>> --
>>>>>>>>>>> Mark H. Wood
>>>>>>>>>>> Lead Technology Analyst
>>>>>>>>>>>
>>>>>>>>>>> University Library
>>>>>>>>>>> Indiana University - Purdue University Indianapolis
>>>>>>>>>>> 755 W. Michigan Street
>>>>>>>>>>> Indianapolis, IN 46202
>>>>>>>>>>> 317-274-0749 <(317)%20274-0749>
>>>>>>>>>>> www.ulib.iupui.edu
>>>>>>>>>>>
>>>>>>>>>>
--
All messages to this mailing list should adhere to the Code of Conduct:
https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx
---
You received this message because you are subscribed to the Google Groups
"DSpace Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com.
