Custom code and overrides in libraries site

Owned by Kyle Davis (Unlicensed)
Last updated: Jul 25, 2024
7 min read

There are a few customizations to code used on the libraries site. This doc will detail where the code is located as well as what it interacts with. It also contains some information about some rewrites in views fields that affect the display of content. This doc will NOT include template overrides (twig files). That is detailed in this document: https://oulibraries.atlassian.net/wiki/x/LoDPrw

OU_Lib_subtheme

The subtheme is the custom theme that is based on the drupal bootstrap barrio theme. This theme is based on bootstrap 5. These various files are managed as libraries in the ou_lib_subtheme.libraries.yml file - web/themes/custom/ou_lib_subtheme/ou_lib_subtheme.libraries.yml. In that file, the “global-styling” library is used for the entire site and the “front-js” library is used only on the homepage for the search box.

Styles

  • style.css - web/themes/custom/ou_lib_subtheme/css/style.css

    • Virtually all styles for the entire site. Contains lots of styles for colors, fonts, and any bootstrap overrides.

  • search.css - web/themes/custom/ou_lib_subtheme/css/search.css

    • The css needed for the search box on the homepage

  • globalnav.css - web/themes/custom/ou_lib_subtheme/css/globalnav.css

    • Used for the styling of the universal black OU top banner

JS

  • global.js - web/themes/custom/ou_lib_subtheme/js/global.js

    • Main js file for any additional functionality needed on the site.

    • Contents: Once the page has loaded, the event listener for the search form is added using the “search_form" class as the target. Then, based on what tab the user is on, the correct URL is formatted with the search term added. If going to site search, the window opens in the same tab. If going to any of the other external sites to search, the site is opened in a new tab. Also added a bit of code to set the active status correctly on normal screens for accessibility and visual improvements.

  • front.js - web/themes/custom/ou_lib_subtheme/js/front.js

    • The js needed for the search box on the homepage

    • Contents in order of appearance in file:

      • Attached Drupal behaviors to the subtheme so they can be used.

      • When a status message is shown like “cache cleared” or even errors on dev/test, it is hidden after 15 sec. Requested in the past by admins to remove the status messages after a bit

      • If room type is changed in reserve a room, we need to redirect to a specific view for that type

      • Bizzell hrs are called on every page, so we call

        callAPIhrs(18764, 1);

      • setActive function is used to set the active tab in the nav. Since it was already retrieving the current page, additional logic was added to the function for hrs of individual pages

        • Inside function we check for various pages like /hours, if /locations is in the url, and /units and call the hrs function accordingly.

        • Profile page - hide contact title if user is not employee

        • Request to hide a couple subjects from the dropdown in the eresources view

      • getHrs function breaks down individual locations and ties it in with the correct libcal hours id. Long switch statement to handle this.

      • getHrsUnits does the same as above but for units. Many fall under the 8-5 hrs group.

      • callAPIhrs contains the ajax to libcal to get hrs. All prev logic handles what location it needs. the second param is if the location is bizzell or not for additional logic for the main hrs in the banner.

      • updateHrsClasses contains some cleanup of styling issues from the hrs widget

      • remove empty view text from search block

      • Clear button on eresources redirects to /eresources so it can clear the A-Z filter if it was used.

Fonts

Fonts are loaded via the “adobe-fonts” library. In Adobe font manager, the fonts needed were chosen, then added to a project and referred to in this library. The current adobe fonts link is https://fonts.adobe.com/eulas/00000000000000003b9b011e?ref=tk.com

Custom Module for LibCal events

The location for the custom module is web/modules/custom/libcal_events

Similar to the sub theme, this custom module uses a library in “libcal_events_libraries.yml”. With that library, the following is loaded into pages where the custom module is used.

Styles

  • libcal-events.css - web/modules/custom/libcal_events/css/libcal-events.css

    • Styling used for events

JS

  • libcal-events.js - web/modules/custom/libcal_events/js/libcal-events.js

    • Main js for events.

    • Contents in order of appearance in file:

      • Page is loaded and drupal behaviors are attached.

      • If page is home page or news page, call events api

      • Events api ajax calls the controller in the module and processes and formats the data to be added to the page.

      • Hide the .book animation when successful.

Controller/PHP

  • LibcalEventsGetEventsController.php - web/modules/custom/libcal_events/src/Controller/LibcalEventsGetEventsController.php

    • Main controller for making the api call and interacting with the ajax call from the js file.

    • Contents in order of appearance in file:

      • Gets secrets from terminus. Secrets were used so they were not listed anywhere. These can be managed in the following way:

        • Set key

          terminus secrets:set site.env key value

        • Delete Key

          terminus secrets:delete site.env key

        • Show value of key

        • Show keys available

      • Set up and call curl req to AWS managed events api. Return to the ajax. Documentation here:

View rewrites

Some of the view fields required the need to rewrite the results of that field to provide a certain format to the display. This is a breakdown of those rewrites and where they are

E-Resources A-Z view

Page: https://libraries.ou.edu/eresources

Admin: https://libraries.ou.edu/admin/structure/views/view/e_resources/edit/eresources

  • Content: URL

    • Need to fix format of the field_database___uri. This is the URL that the eresource links to and there were some formatting and character issues with this until the following rewrite was added. This fixed version of the URL (field_database_) is what is used in the two rewrites after that are detailed below.

      • {{ field_database___uri|render|striptags|trim|replace({'&': '&'}) }}

  • Content: Title

    • Check if the proxy checkbox was active, if so, add the proxy url to the field_database_ URL. That conditional is used in the rewrite section for this field since the title is what the user clicks on to go to the eresource.

      •  

  • permalink_url (Permalink)

    • This is similar to the Content: Title overwrite. Since we write the permalink out in the eresource listing, we need to add the proxy here as well.

“Getting Started Databases” section on resources by subject pages

Shortened display with only title and description. None of the extra data.

Page Example: https://libraries.ou.edu/resources-subject/engineering

Admin: https://libraries.ou.edu/admin/structure/views/view/e_resources/edit/block_2

  • Content: URL

    • Need to fix format of the field_database___uri. This is the URL that the eresource links to and there were some formatting and character issues with this until the following rewrite was added. This fixed version of the URL (field_database_) is what is used in the two rewrites after that are detailed below.

      • {{ field_database___uri|render|striptags|trim|replace({'&': '&'}) }}

  • Content: Title

    • Check if the proxy checkbox was active, if so, add the proxy url to the field_database_ URL. That conditional is used in the rewrite section for this field since the title is what the user clicks on to go to the eresource.

E-resources filtered by subject

This is different from view above. It shows all eresources for that subject and is filterable by type and searchable. Also shows full description with the more info section.

Page Example: https://libraries.ou.edu/subjects/african-african-american-studies

Admin: https://libraries.ou.edu/admin/structure/views/view/taxonomy_term/edit/block_1

  • Content: URL

    • Need to fix format of the field_database___uri. This is the URL that the eresource links to and there were some formatting and character issues with this until the following rewrite was added. This fixed version of the URL (field_database_) is what is used in the two rewrites after that are detailed below.

      • {{ field_database___uri|render|striptags|trim|replace({'&': '&'}) }}

  • Content: Title

    • Check if the proxy checkbox was active, if so, add the proxy url to the field_database_ URL. That conditional is used in the rewrite section for this field since the title is what the user clicks on to go to the eresource.

      •  

  • permalink_url (Permalink)

    • This is similar to the Content: Title overwrite. Since we write the permalink out in the eresource listing, we need to add the proxy here as well.

My Databases & E-references

Page: https://libraries.ou.edu/my-favorites

Admin: https://libraries.ou.edu/admin/structure/views/view/my_e_resources/edit/block_1

  • Content: URL

    • Need to fix format of the field_database___uri. This is the URL that the eresource links to and there were some formatting and character issues with this until the following rewrite was added. This fixed version of the URL (field_database_) is what is used in the two rewrites after that are detailed below.

      • {{ field_database___uri|render|striptags|trim|replace({'&': '&'}) }}

  • Content: Title

    • Check if the proxy checkbox was active, if so, add the proxy url to the field_database_ URL. That conditional is used in the rewrite section for this field since the title is what the user clicks on to go to the eresource.

My Favorites (Recent) on Homepage

Page: https://libraries.ou.edu

Admin: https://libraries.ou.edu/admin/structure/views/view/my_e_resources/edit/block_2

  • Content: URL

    • Need to fix format of the field_database___uri. This is the URL that the eresource links to and there were some formatting and character issues with this until the following rewrite was added. This fixed version of the URL (field_database_) is what is used in the two rewrites after that are detailed below.

      • {{ field_database___uri|render|striptags|trim|replace({'&': '&'}) }}

  • Content: Title

    • Check if the proxy checkbox was active, if so, add the proxy url to the field_database_ URL. That conditional is used in the rewrite section for this field since the title is what the user clicks on to go to the eresource.

Research consultations

Page: https://libraries.ou.edu/research-consultation

Admin: https://libraries.ou.edu/admin/structure/views/view/research_consultation/edit/page_1?destination=/research-consultation

  • User: Appointment Link

    • Make link an appointment button

Reserve a room breakdown into individual views

Page: https://libraries.ou.edu/reserve_a_room

The following 4 views have the same overwrite for the final field. It takes all prev fields that are hidden and adds them to the display.

Undergraduate Rooms: https://libraries.ou.edu/admin/structure/views/view/reserve_a_room/edit/page

Graduate Rooms: https://libraries.ou.edu/admin/structure/views/view/reserve_a_room/edit/page_1

Faculty Rooms: https://libraries.ou.edu/admin/structure/views/view/reserve_a_room/edit/page_2

Staff Rooms: https://libraries.ou.edu/admin/structure/views/view/reserve_a_room/edit/page_3

  • Content: Image

Employee Directory

Page: https://libraries.ou.edu/employees

Admin: https://libraries.ou.edu/admin/structure/views/view/user_admin_people/edit/page_2

  • User: Link to User (Profile)