Problem/Motivation

Many websites have internal pages that can take a few seconds to load. These pages are not accessed through form submits but through internal links. As noted in the README for this module, there are issues with adding the page load progress indicator to all <a> elements.

If you must, assign the behavior to <a> elements carefully. <a>
elements can be opened in a new browser tab or window, which would leave the
original window locked waiting for reload. Also, <a> elements are sometimes
used with modals, so make sure that you identify what classes trigger modal
windows and you use :not() to avoid them, or use specific classes when
assigning the behavior (example a.not-modal).

Despite these challenges, I did run into the use case where I need this functionality across a site. The challenges being documented in the README suggested that this use case was universal enough to warrant a feature request and a patch.

Proposed resolution

The basic idea would be this:

  • Create a checkbox on the settings form for this functionality.
  • Write a check in the JQuery for the setting.
  • Execute the page load progress indicator on <a> elements with internal links that are opened in the same tab and not from modals.

Attached is my first stab at the patch.

Comments

isaiahnixon created an issue. See original summary.

anavarre’s picture

Status: Active » Needs work
Issue tags: +Needs tests

Thanks for your contribution! I'll provide a review soon but it looks like it's working nicely at first glance.

anavarre’s picture

  1. +++ b/config/install/page_load_progress.settings.yml
    @@ -3,3 +3,4 @@ page_load_progress_elements: '.page-load-progress-submit'
     page_load_progress_esc_key: true
    

    Please put this before page_load_progress_esc_key. Explanation below.

  2. +++ b/js/page_load_progress.js
    @@ -28,6 +29,29 @@
    +      // Add the lock behavior for internal links opened in the same tab that are not in a modal.
    

    Please wrap the comment at 80 cols.

  3. +++ b/js/page_load_progress.js
    @@ -28,6 +29,29 @@
    +          // Return if the link is external.
    ...
    +          // Return if the user is attempting to open in a new tab.
    +          // Source: https://stackoverflow.com/a/20087506/9637665.
    

    'Return' is for programmers, but if we have a comment it's also for non-programmers to understand what the code is doing IMO. Instead, what about saying "Do not lock the screen if the user is attempting to open in a new tab."?

  4. +++ b/js/page_load_progress.js
    @@ -28,6 +29,29 @@
    +          // Return if the link is external.
    

    Same here: "Do not lock the screen if the link is within a modal".

  5. +++ b/js/page_load_progress.js
    @@ -28,6 +29,29 @@
    +          // Return if the user is attempting to open in a new tab.
    

    Same here: "Do not lock the screen if the user is attempting to open in a new tab.".

  6. +++ b/js/page_load_progress.js
    @@ -28,6 +29,29 @@
    +          // Source: https://stackoverflow.com/a/20087506/9637665.
    

    Thanks for adding the source, very helpful!

  7. +++ b/page_load_progress.module
    @@ -71,6 +71,7 @@ function page_load_progress_page_attachments(array &$attachments) {
           'esc_key' => $config->get('page_load_progress_esc_key'),
    

    Please put this before 'esc_key'. Explanation below.

  8. +++ b/src/Form/SettingsForm.php
    @@ -76,6 +76,13 @@ class SettingsForm extends ConfigFormBase {
    +    $form['page_load_progress_internal_links'] = [
    

    I think this checkbox should live within the VISIBILITY CONDITIONS fieldset because it's also one. Use $form['visibility_conditions']['page_load_progress_internal_links']

  9. +++ b/src/Form/SettingsForm.php
    @@ -76,6 +76,13 @@ class SettingsForm extends ConfigFormBase {
    +      '#description' => $this->t('On some sites you may want internal links to use the image lock for internal links. The lock does not trigger on links opened from a modal or when the user is trying to open the link in a new tab.'),
    

    The #title already takes care of explaining what this checkbox is for so I think we could drop 'On some sites you may want internal links to use the image lock for internal links.' entirely.

  10. +++ b/src/Form/SettingsForm.php
    @@ -88,6 +95,7 @@ class SettingsForm extends ConfigFormBase {
           ->set('page_load_progress_esc_key', $form_state->getValue('page_load_progress_esc_key'))
    +      ->set('page_load_progress_internal_links', $form_state->getValue('page_load_progress_internal_links'))
    

    Please put this above 'page_load_progress_esc_key' as per the above remark.

isaiah nixon’s picture

StatusFileSize
new4.14 KB

Thanks @anavarre for getting back to me so quickly. Here is the patch with your feedback incorporated.

anavarre’s picture

Status: Needs work » Needs review
StatusFileSize
new4.79 KB

For readability, please always keep all patches submitted in the issue queue so that it's easier to see changes. Also, creating an interdiff is best.

Here's the interdiff.

anavarre’s picture

Status: Needs review » Needs work
+++ b/js/page_load_progress.js
@@ -29,21 +29,21 @@
+          // Do not lock the screen if the user is attempting to open in a new tab.

This should be wrapped at 80 cols. Can be fixed on commit.

Otherwise it looks great, thank you. The only remaining bits I can think of ATM are:

  • Tests (let me know if you need any help with it, should be pretty simple with the existing Boolean examples)
  • Changes to page_load_progress.schema.yml to add the missing page_load_progress_internal_links
isaiah nixon’s picture

StatusFileSize
new7.27 KB
new3.69 KB

Thanks for your patience and helping me with the process. I went ahead and updated the schema and incorporated the internal links configuration into the functional tests. Let me know if this is what you were looking for and how it should be formatted.

anavarre’s picture

Status: Needs work » Needs review

Let's run tests.

The last submitted patch, 4: internal_links_4.patch, failed testing. View results

  • anavarre committed 57614ba on 8.x-1.x authored by isaiahnixon
    Issue #3004149 by isaiahnixon, anavarre: Add option for internal links
    
anavarre’s picture

Status: Needs review » Fixed

Added a few other nitpicks (like consistently naming the 'screen lock' a throbber).

This looks great to me. Committed, thanks!

  • anavarre committed c427bcc on 8.x-1.x
    Update README file in the light of #3004149
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.