Proposal - Attach cross-cms "page identifier" class to <body>
Problem
Currently there is no consistent way in Civi to tell which page you are on by querying the DOM. Usually this is done by having a class attached to the <body>
tag that identifies the current page. Unfortunately each CMS use different naming conventions, or attaches no class at all.
For example: this is the Contact Summary page's <body>
tag on each CMS
<!-- Drupal: .page-civicrm-contact-view -->
<body class="html not-front ... page-civicrm page-civicrm-contact page-civicrm-contact-view">
<!-- Joomla: .task-civicrmcontactview -->
<body class="admin com_civicrm ... task-civicrmcontactview">
<!-- Wordpress: none :( -->
<body class="wp-admin wp-core-ui ... customize-support svg”>
Proposed solution
Civi should attach "proprietary" classes to <body>
, independent from the underlying cms, so we would have something like
<!-- Drupal -->
<body class="html not-front ... page-civicrm page-civicrm-contact page-civicrm-contact-view civi-page-contact-view">
<!-- Joomla -->
<body class="admin com_civicrm ... task-civicrmcontactview civi-page-contact-view">
<!-- Wordpress -->
<body class="wp-admin wp-core-ui ... customize-support svg civi-page-contact-view”>
Why
It would open new cross-cms customization avenues for devs: styles applied only a specific page, JS plugins that use the body class to bootstrap itself or perform an action only on certain pages, etc.
Of course currently one can already inject a css/js file on specific pages by using hook_civicrm_pageRun()
, but this approach lacks the flexibility that the proposed solution would instead provide.
Technical challenges
I figured that there would be at least two:
- Find a way in all 3 cms to alter the list of classes attached to
<body>
that doesn't involve using a theme hook, given that this solution should be both cms and theme agnostic (you don't want those classes to disappear the moment an admin decides to change the administration theme) - Figure out how to programmatically generate the class name for each individual civi page
Before opening the issue I asked in the dev channel if there was already a way to identify a page that I wasn't aware of (https://chat.civicrm.org/civicrm/pl/of6xsr17sidujmm1tuasr8bupy), but apparently there isn't, at least not the in the way I'm proposing here