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/ab02209b-579d-42ab-8e1a-284f3678df67n%40googlegroups.com.
