Citations not showing correctly in Immersion theme

[Orsova]

Hi all,

I’m running a new installation of OJS 3.04-1 on Ubuntu 22.04 with PHP 8.1 and Apache2.

MacOs Catalina 10.15.7 Chrome 114.0.5735.198

I have a strange problem with the Immersion theme. When I install the Citations plugin, it displays incorrectly, and doubles up.

This behaviour also occurs using the Health Sciences theme, but does not with the default theme.

The Apache log shows no errors when the plugin is enabled, nor when a page is loaded. Nothing in the PHP log either.

Thank you for any assistance you can provide.

ETA: I did try to update the Citations plugin, but was not successful. Attempting to upgrade to the latest github release via the backend was rejected, and deleting the plugin broke the plugin interface.

ETA2: If I select a citation style in the first menu, the site breaks, and I get a blank white page with the citation as plain text across the top.

I would also add that, more generally, the whole sidebar seems to be malfunctioning. A number of block plugins simply do not display.

[Orsova]

This seems to be a jQuery issue.

From the console:

articleCitation.js?v=3.4.0.1:107 Uncaught ReferenceError: jQuery is not defined at articleCitation.js?v=3.4.0.1:107:4

[Vitaliy-1]

Thanks, @Orsova! Yes, it looks like the plugin relies on jQuery but doesn't load it by itself.

This commit rewrites the plugin and adds a new template. It uses jQuery, which official themes don't support and I would like not to import it specifically for that. I see that the fix would require:

1. Rewriting articleCitation.js to drop the dependency from jQuery or import the library by the plugin if it doesn't get loaded earlier.
2. Adapt themes by transferring the CSL-related code from the article landing page to the citationblock.tpl, which should override the correspondent plugin's template.

[Orsova]

Thank you, @Vitaliy-1.

I tried moving the following two pieces of code from article_details.tpl in Immersion to citationblock.tpl in CSL.

`{ References } {if $parsedCitations || $publication->getData('citationsRaw')}

{translate key="submission.citations"}

    {if $parsedCitations}
        <ol class="references">
            {foreach from=$parsedCitations item="parsedCitation"}
                <li>{$parsedCitation->getCitationWithLinks()|strip_unsafe_html} {call_hook name="Templates::Article::Details::Reference" citation=$parsedCitation}</li>
            {/foreach}
        </ol>
    {else}
        <div class="references">
            {$publication->getData('citationsRaw')|escape|nl2br}
        </div>
    {/if}
{/if}`

&

`{ How to cite } {if $citation}

{translate key="submission.howToCite"}

    <div class="citation_format_value">
        <div id="citationOutput" role="region" aria-live="polite">
            {$citation}
        </div>
        <div class="citation_formats dropdown">
            <a class="btn btn-secondary" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false">
                {translate key="submission.howToCite.citationFormats"}
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dropdown-cit">
                {foreach from=$citationStyles item="citationStyle"}
                    <a
                            class="dropdown-cite-link dropdown-item"
                            aria-controls="citationOutput"
                            href="{url page="citationstylelanguage" op="get" path=$citationStyle.id params=$citationArgs}"
                            data-load-citation
                            data-json-href="{url page="citationstylelanguage" op="get" path=$citationStyle.id params=$citationArgsJson}"
                    >
                        {$citationStyle.title|escape}
                    </a>
                {/foreach}
                {if count($citationDownloads)}
                    <div class="dropdown-divider"></div>
                    <h3 class="download-cite">
                        {translate key="submission.howToCite.downloadCitation"}
                    </h3>
                    {foreach from=$citationDownloads item="citationDownload"}
                        <a class="dropdown-cite-link dropdown-item"
                           href="{url page="citationstylelanguage" op="download" path=$citationDownload.id params=$citationArgs}">
                            {$citationDownload.title|escape}
                        </a>
                    {/foreach}
                {/if}
            </div>
        </div>
    </div>
{/if}`

However, this did not fix the problem. It actually made it slightly worse - breaking the first 'more citations' button.

Perhaps I have misunderstood what you meant, or not implemented it correctly. I would appreciate any further thoughts you might have.

ETA: How is it that the plugin works here: https://demo.publicknowledgeproject.org/ojs3/demo/index.php/immersion/article/view/919 ?

[Orsova]

I understand that you would rather not add jQuery, but is there a way that I can do that elegantly for myself?

[Vitaliy-1]

I tried moving the following two pieces of code from article_details.tpl in Immersion to citationblock.tpl in CSL.

That should be transferred to the immersion/templates/plugins/generic/citationStyleLanguage/templates/citationblock.tpl. And it requires rewriting articleCitation.js to drop the dependency from jQuery.

[Orsova]

And it requires rewriting articleCitation.js to drop the dependency from jQuery.

I see. I do not know how to do that. Is there a simple way to import jQuery, instead? I really am keen to get CSL working alongside Immersion.

[jardakotesovec]

@Vitaliy-1 Here are PRs for dropping jQuery requirements: https://github.com/pkp/citationStyleLanguage/pull/114 https://github.com/pkp/citationStyleLanguage/pull/115

[Vitaliy-1]

Looks good, thanks, @jardakotesovec!

@Orsova, I've packed new releases for Immersion and Health Sciences to address this. It should fix the issue together with the above modifications in the plugin.

@asmecher, I don't have write access to this repository, can you merge these PRs?

[bozana]

Because @asmecher is only partly available this week, I merged the PRs. Alec can then give you the rights for the repository when he comes back... OK so? Can the issue be closed?

[Vitaliy-1]

Yep, thanks!

[Orsova]

Thank you, all.