The place for javascript in Ojs 3.1.x.x

kawahyu · January 25, 2018, 1:09pm

Dear all,
I want to add image slider in for example additional content. I have googled about it. To do, it has 3 codes; html, css and javascript.

Where the JS codes will be placed?
Is it in custom tags in setting?

@Vitaliy
@asmecher

Vitaliy · January 25, 2018, 1:13pm

You can look how I have done in through a plugin. It displays 3 latest articles’ sliders on the main page. But I also have added one custom method in PublishedArticle class. Although, with minimal modifications, you can do this without latter.

kawahyu · January 25, 2018, 2:22pm

Thanks @Vitaliy. I will make a try.
If it does not use plugin, how to work with or where to place JavaScript in ojs to make carousel work?
For example make image slider in sidebar

Gokmen_ARSLAN · January 25, 2018, 2:30pm

Hi

I uploaded the plugin, yet it is not work. I cannot see it in the generic plugins-ojs 3.1-1.
I changed the name as browse and, then browsePlugin. when adding with second name, the plugins cannot upload.

bests,

Vitaliy · January 25, 2018, 4:44pm

This plugin is not intended for public use. As I wrote earlier, it requires changes in OJS core.
Method getPublishedArticlesBySection, that I have used there, doesn’t exist in original OJS PublishedArticle class.

Gokmen_ARSLAN · January 25, 2018, 5:20pm

Thank you very much for your quick respond.

How can I use this plugin with child theme or how can I modify the plugin?
If you help, I will be glad.
Thanks again.

Vitaliy · January 26, 2018, 11:58am

This plugin retrieves 3 articles from the database (that user points from the plugin settings tab in the dashboard), seeks attached to the XML images with file name slider.png or slider.jpg and displays these images as sliders on the index page. If you want to use this functionality, I can guide you though needed modifications.

Gokmen_ARSLAN · January 26, 2018, 12:17pm

Dear Vitaliy,
I want to use this function for recent articles (three or more) on the home page, like your journal: Psychosomatic Medicine and General Practice
Register. How can I make it? Can you help me about modification for child theme? I do not use the images. I want to use only recent articles names as a slider.

Bests,
Gökmen

Vitaliy · January 26, 2018, 1:18pm

That’s the method I have added in PublishedArticleDAO class:

function getPublishedArticlesBySection($journalId = null, $rangeInfo = null, $reverse = false, $sections) {
        $params = $this->getFetchParameters();
        if ($journalId) $params[] = (int) $journalId;
        $result = $this->retrieveRange(
            'SELECT	ps.*,
				s.*,
				' . $this->getFetchColumns() . '
			FROM	published_submissions ps
				LEFT JOIN submissions s ON ps.submission_id = s.submission_id
				LEFT JOIN issues i ON ps.issue_id = i.issue_id
				' . $this->getFetchJoins() . '
			WHERE 	i.published = 1
				' . ($journalId?'AND s.context_id = ?':'') . '
				AND s.status <> ' . STATUS_DECLINED . '
				AND se.section_id IN ('. $sections . ')
			ORDER BY ps.date_published '. ($reverse?'DESC':'ASC'),
            $params,
            $rangeInfo
        );

        return new DAOResultFactory($result, $this, '_fromRow');
    }

It retrieves articles by section id’s (you can view section id in the database).
But if you don’t need that specificity, you can change it in the code to the method, which this DAO class already has, for example getPublishedArticlesByJournalId

Vitaliy · January 26, 2018, 1:25pm

What you will need, is to modify this plugin’s method (function):

github.com

Vitaliy-1/browsePlugin/blob/master/BrowsePlugin.inc.php#L63



    if ($template != 'frontend/pages/indexJournal.tpl') return false;

    $templateMgr = $params[0];
    $templateMgr->addStylesheet('browse1', Request::getBaseUrl() . DIRECTORY_SEPARATOR . $this->getPluginPath() . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR . 'browse.css');
    $templateMgr->addJavaScript('jatsParser', Request::getBaseUrl() . DIRECTORY_SEPARATOR . $this->getPluginPath() . DIRECTORY_SEPARATOR .  'js' . DIRECTORY_SEPARATOR .'browse.js');

    return false;
}

function browseLatest($hookName, $params) {
    $smarty =& $params[1];
    $output =& $params[2];

    //articles id for displaying from database
    $params = $this->getRequest();
    $journal = $params->getJournal();
    $sliderFirst = $this->getSetting($journal->getId(), 'sliderFirst');
    $sliderSecond = $this->getSetting($journal->getId(), 'sliderSecond');
    $sliderThird = $this->getSetting($journal->getId(), 'sliderThird');

For example, we have on line 72:
$publishedArticleObjects = $publishedArticleDao->getPublishedArticlesBySection($journalId = null, $rangeInfoArticles, $reverse = true, "3,4,9");
You can change it to something like:
$publishedArticleObjects = $publishedArticleDao->getPublishedArticlesJournalId($journalId = null, $rangeInfoArticles, $reverse = true);

Than you will need to make an array: $publishedArticles = array();
iterate through articles and write what you need to that array.
Another step is to assign this array to the template:

$smarty->assign('publishedArticles', $publishedArticles);
$output .= $smarty->fetch($this->getTemplatePath() . 'browseLatest.tpl');

You can see this template here:

github.com

Vitaliy-1/browsePlugin/blob/master/templates/browseLatest.tpl

{* carousel *}

<div class = "article-slider col-md-12 col-lg-12">
    <div id="carousel-article" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-article" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-article" data-slide-to="1"></li>
            <li data-target="#carousel-article" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            {foreach from=$browseArticles key=k item=browseArticle}
                <div class="carousel-item {if $k==0}active{/if}">
                    <img class="slider d-block w-100" src="{$browseArticle->getImageUrl()}" alt="{$browseArticle->getTitle()}">
                    <div class="carousel-caption">
                        <a class="title-link" href="{url page="article" op="view" path=$browseArticle->getArticleUrl()}">
                            <h3>{$browseArticle->getTitle()|strip|escape:"html"}</h3>
                        </a>

This file has been truncated. show original

When this will be done, I can show you how to make settings form for the plugin.

Gokmen_ARSLAN · January 29, 2018, 8:44pm

Thank you for your respond.
I try to make your suggestions.
First, I changed the “$publishedArticleObjects = $publishedArticleDao->getPublishedArticlesBySection($journalId = null, $rangeInfoArticles, $reverse = true, “3,4,9”);” as “$publishedArticleObjects = $publishedArticleDao->getPublishedArticlesJournalId($journalId = null, $rangeInfoArticles, $reverse = true);” in the BrowsePlugin.inc.php#L63
However, I do not understand the second and following step. How can create the $publishedArticles = array(); and where?

Best,
Gökmen.

Vitaliy · January 30, 2018, 6:44am

In next part of code I am making 2 arrays. First is for latest articles and the second for sliders:

$publishedArticles = array(); 
$browseArticles = array();

Then I am iterating though PublishedArticle objects and writing data in this to arrays.

while ($publishedArticle = $publishedArticleObjects->next()) {
            $publishedArticles[] = $publishedArticle;
            if ($publishedArticle->getId() == $sliderFirst) {
                $browseArticles = $this->slidersSearch($params, $publishedArticle, $browseArticles);
            } elseif ($publishedArticle->getId() == $sliderSecond) {
                $browseArticles = $this->slidersSearch($params, $publishedArticle, $browseArticles);
            } elseif ($publishedArticle->getId() == $sliderThird) {
                $browseArticles = $this->slidersSearch($params, $publishedArticle, $browseArticles);
            }
        }

this line I check if the articles id is the one I need for slider:
$publishedArticle->getId() == $sliderFirst
You can even refactor this part of the code to structure it better.
slidersSearch is my custom function, you can view it in the bottom of the file.

After that I am assigning to the Smarty template:
$smarty->assign('browseArticles', $browseArticles);

kawahyu · January 30, 2018, 10:51pm

Dear @Vitaliy,
Once I tried the plugin, the index journal only show slider, news, editorial. Is it possible to edit your plugin to have sliders, recent articles (column display as oldGregg), additional content and sidebar?

I want to customize my journal in that way. I am using manuscript-jats

Vitaliy · January 31, 2018, 4:10pm

Have you modified PHP file accordingly?

If yes, you need now to modify frontend. Latest articles block is starting from here:

github.com

Vitaliy-1/browsePlugin/blob/master/templates/browseLatest.tpl#L51


            <span class="sr-only">{translate key="plugins.browse.previous"}</span>
        </a>
        <a class="carousel-control-next" href="#carousel-article" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">{translate key="plugins.browse.next"}</span>
        </a>
    </div>
</div>

{* browse latest *}
<div class="browse-latest-news">

    <div class="recent-articles">
        <h2 class="recent">{translate key="plugins.browse.recent.news"}</h2>
    </div>


    <div class="row">

        {foreach from=$publishedNews item=article key=k}
        <div class="news-block col-sm-6 col-md-6 col-lg-4">

you can see from there that I am iterating over 3 array (3 foreach loops). You need only one, where your articles assigned. Supposing that’s $publishedArticles array.

Also, keep in mind that I will not support this plugin (it was not ever released for public) and manuscript-jats child theme (it was replaced with Old Gregg Theme).
Manuscript-JATS theme will stop working in one of the future release (3.1.1 or 3.2.0) as there will be a major upgrade of Smarty Template Engine.

kawahyu · February 1, 2018, 11:18pm

Well, I think OldGregg is a future choice. I will switch to OldGregg, still waiting for 1.1.0.1 for journal summary and sliders in indexJournal

Thanks for your contribution for our journal

Gokmen_ARSLAN · May 28, 2018, 10:26am

Hi Vitaliy,

I made modification, yet I cannot worked the plugin.
I you help me I will be glad.

Vitaliy · May 28, 2018, 12:09pm

The plugin was never released for public use because it needs the changes in OJS core. In the PublishedArticleDAO class need to be a new method:

function getPublishedArticlesBySection($journalId = null, $rangeInfo = null, $reverse = false, $sections) {
        $params = $this->getFetchParameters();
        if ($journalId) $params[] = (int) $journalId;
        $result = $this->retrieveRange(
            'SELECT	ps.*,
				s.*,
				' . $this->getFetchColumns() . '
			FROM	published_submissions ps
				LEFT JOIN submissions s ON ps.submission_id = s.submission_id
				LEFT JOIN issues i ON ps.issue_id = i.issue_id
				' . $this->getFetchJoins() . '
			WHERE 	i.published = 1
				' . ($journalId?'AND s.context_id = ?':'') . '
				AND s.status <> ' . STATUS_DECLINED . '
				AND se.section_id IN ('. $sections . ')
			ORDER BY ps.date_published '. ($reverse?'DESC':'ASC'),
            $params,
            $rangeInfo
        );

        return new DAOResultFactory($result, $this, '_fromRow');
    }

But I see that this plugin (with or without modifications) is extensevely used by the community. So I suppose, I’ll make a few changes, so never this question shall rise again

Gokmen_ARSLAN · May 28, 2018, 12:47pm

it is great news
I look forward to hearing from you.

Thanks very much.

Gokmen_ARSLAN · February 6, 2019, 8:42pm

Hi Vitality,

Can you changes the browsePlugin for child theme or others?

Vitaliy · February 8, 2019, 11:35am

You mean integrate it with a theme?