Page Comparison

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

Table of Contents

style	none

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.

...

global.js - web/themes/custom/ou_lib_subtheme/js/global.js
- Main js file for any additional functionality needed on the site.
- More detailed breakdown later in this docContents: 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
    Code Block
    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

...

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.
  More detailed breakdown later in this doc
  - 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.
- More detailed breakdown later in this docContents 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
      Code Block
      terminus secrets:set site.env key value
    - Delete Key
      Code Block
      terminus secrets:delete site.env key
    - Show value of key
      Code Block
      terminus secrets:show site.env key
    - Show keys available
      Code Block
      terminus secrets:list site.env
  - 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

...

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.

Code Block

{% if field_proxy|trim == 1 %}
<a class="panel-title" role="button" href="https://login.ezproxy.lib.ou.edu/login?url={{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% else %}
<a class="panel-title" role="button" href="{{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% endif %}

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.
  - Code Block
    {% if field_proxy|trim == 1 %} https://login.ezproxy.lib.ou.edu/login?url={{ field_database_ }} {% else %} {{ field_database_ }} {% endif %}

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.

Code Block

{% if field_proxy|trim == 1 %}
<a class="panel-title" role="button" href="https://login.ezproxy.lib.ou.edu/login?url={{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% else %}
<a class="panel-title" role="button" href="{{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% endif %}

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.

Code Block

{% if field_proxy|trim == 1 %}
<a class="panel-title" role="button" href="https://login.ezproxy.lib.ou.edu/login?url={{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% else %}
<a class="panel-title" role="button" href="{{ field_database_ }}" target="_blank" rel="noopener">{{ title }}</a>
{% endif %}

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

Code Block
<a href="{{ field_appointment_link__uri }}" class="btn btn-primary schedule_link">Schedule</a>

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

Code Block

<div class="row room-res-view-rows">
  <div class="col-md-2 col-sm-3 hidden-xs room-res-img">
    {{ field_image_media }}
  </div>
  <div class="room_res_name_text col-md-7 col-sm-6 col-xs-12">
    &nbsp;
    <div>{{ title }}</div>
    <div>Location: {{ field_location_reference }}</div>
    <div>Occupancy: {{ field_occupancy }}</div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <a class="btn btn-info  room-res-button" href="{{ field_reservation_link }}" target="_blank">Reserve Room</a>
  </div>
</div>

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)

Code Block
<a href="{{ view_user_1 }}">Go to {{ field_first_name_1 }}'s profile<a>

Versions Compared

Old Version 2

New Version Current

Key

OU_Lib_subtheme

Fonts

Controller/PHP

View rewrites

My Databases & E-references

My Favorites (Recent) on Homepage

Research consultations

Reserve a room breakdown into individual views

Employee Directory