Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

How to use custom javascript with quark template?

Started by Tiina 4 years ago · 4 replies · 1958 views

4 years ago

Hello,
I’d like to use some custom javascript as part of my Grav website, but I’m not sure how to go about it. I’m using my own template inherited from Quark v2.0.3. Does anyone know of any tutorials for this? I’m a beginner but happy to experiment! I have used html and css before, everything else is quite new to me.
<br>
I’ve found topics on the asset manager, and adding js to the footer, but they don’t include enough scope for me to get things to work.
https://learn.getgrav.org/17/themes/asset-manager
<br>
What I’m trying to do is add draggable functionality to elements in the body of one default.md page. I’ve found a js library which has the functionality I need. I want to use the Dragging code from this page -
https://interactjs.io/
<br>
I have put the CSS in my custom.css file.
My questions are:

Do I need to add the link to the js library in a specific way to the asset manager to get it to work in the body of the page (e.g. ‘bottom’ or inline)? Is there anywhere else I need to reference it?
Can I add the html code needed straight into the default.md page?
How or where do I put the extra js code on the page to make it active? Can I make a custom.js file and reference that? Or do I need to include it somehow in the default.md page?
<br>
Thank you in advance for your help! I’ve been lurking on this forum for a while and have found so much useful info so far, it's much appreciated.

4 years ago

I'm not sure if it is best practice but I added some js to js -> site.js and it worked.

If you have your own theme inherited from Quark then just make a js folder in there, copy in the site.js file and try adding your code at the bottom.

Another way might be to make a dedicated js file for your code and add a call to it in the templates. You could add a line to this section in basehtml.twig.

TWIG

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
    {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
{% endblock %}

4 years ago

Thank you @ozfiddler - I will try making a copy of the site.js! I made a js folder and added custom.js with my code in it, added it to the base.html.twig but without group:bottom so will try that too... 🤞

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3129 posts

4 years ago Solution

@Tiinateaspoon,

What I’m trying to do is add draggable functionality to elements in the body of one default.md page.

If it is only one page you would like to add the library to, it would be a bit overkill to add the library to template base.html.twig. When doing this, the library will be loaded for each and every page that extends the 'base' template.

Option 1:

You can add js + css straight into the Markdown of the page. Here is an example adding the library to page 02.typography/default.md of a fresh Grav installation. I copied the javascript from the home page of https://interactjs.io:

HTML

---
title: Typography
---

<script type="module">
import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX,
                  event.pageY)
    }
  }
})
</script>

<style>
.item {
    color: red;
}
</style>

<div class="item">Please move me!</div>

... etc.

Here is the result:
Animation|690x244

Option 2:

If you would like to have the possibility to reuse the logic for multiple pages, you could copy template 'default.html.twig' into 'interact.html.twig' inside your inheriting theme and add the code there:

TWIG

{% extends 'partials/base.html.twig' %}

{% block content %}

  <script type="module">
    import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'

    interact('.item').draggable({
      listeners: {
        move(event) {
          console.log(event.pageX, event.pageY)
        }
      }
    })
  </script>

  <style>
    .item {
        color: red;
    }
  </style>

  <div class="item">Please move me!</div>

  {{ page.content|raw }}

{% endblock %}

You will now need to rename the page to 02.typographt/interact.md.

Option 3:

And if you like clean code, you can move the javascript and css into their own files. and add them to the assets in 'interact.html.twig':

TWIG

{% extends 'partials/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    {% do assets.addCss('theme://css/interact.css') %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% do assets.addJs('theme://js/interact.js', {group: 'bottom', type: 'module'}) %}
{% endblock %}

{% block content %}

    <div class="item">Please move me!</div>

    {{ page.content|raw }}
{% endblock %}

last edited 12/23/21 by pamtbaau

4 years ago

@pamtbaau thank you so much for the comprehensive reply, you are a treasure! I will have an experiment over the next few days 😀

Topic	Replies	Views	Activity
Multisite in subdirectory Support · by Thomas, 1 week ago	3	66	22 minutes ago
How to listen for GET requests instead of POST requests? Support · by Anna, 3 days ago	2	72	21 hours ago
Twig not processing in 2.0.0 Support · by Justin Young, 22 hours ago	1	40	22 hours ago
Form: GRAV.Yes translation key Support · by Duc , 1 week ago	2	76	6 days ago
Installing Grav on Windows 11 Support · by Colin Hume, 1 week ago	2	70	6 days ago

Option 1:

Option 2:

Option 3:

Suggested topics