Im having trouble understanding how to add my own javascript using roots. I am trying to add a few functions but I cant seem to figure out how to link a javascript file to the blade templates. When I try I get reference error.
1 Like
I was used to Sage 9 and have the same question for Sage 10. Currently working in app.js where I define my functions in the bottom and initialize those functions where it says: // application code.
import { domReady } from '@roots/sage/client';
import Swiper, { __proto__ } from "swiper";
import isotope from "isotope-layout/dist/isotope.pkgd";
import imagesLoaded from "imagesloaded/imagesloaded.pkgd.min";
import AOS from 'aos';
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
// application code
console.log('test');
animateContentOnScroll();
masonryGrids();
animateHeaderbar();
swiperOrganizations();
};
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
function animateContentOnScroll() {
// You can also pass an optional settings object
// below listed default settings
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on
initClassName: "aos-init", // class applied after initialization
animatedClassName: "aos-animate", // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: "ease", // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation
});
}
function masonryGrids() {
$(document).ready(function () {
var $grid = $('.grid');
// continue only if we have a grid
if ($grid.length > 0) {
// if we have filters
if ($('.filter-button-group').length > 0) {
// hash of functions that match data-filter values
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
// use $(this) to get item element
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// filter items on button click
$('.filter-button-group').on('click', 'a', function () {
$('.filter-button-group a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var filterValue = $(this).attr('data-filter');
// use filter function if value matches
filterValue = filterFns[filterValue] || filterValue;
$grid.isotope({
filter: filterValue
});
});
}
// initialize Masonry Grid on #tips
$grid.imagesLoaded(function () {
// images have loaded
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
gutter: 30
}
});
});
// on scroll animate the illustations
var male = $('.vergaderbazen .vergaderbaas.male'),
female = $('.vergaderbazen .vergaderbaas.female');
animateIllustationOnScroll(male);
animateIllustationOnScroll(female);
}
});
}
function swiperOrganizations() {
// Swiper: Slider
new Swiper(".swiper-container.swiper-organizations", {
autoplay: {
delay: 5000,
disableOnInteraction: true,
},
pagination: {
el: ".swiper-pagination",
paginationClickable: true,
clickable: true,
dynamicBullets: true,
},
slidesPerView: 3,
spaceBetween: 30,
breakpoints: {
1028: {
slidesPerView: 2,
},
480: {
slidesPerView: 1,
},
},
});
}
function animateHeaderbar() {
// Hide Header on on scroll down
var didScroll, lastScrollTop = 0,
delta = 0;
jQuery(window).scroll(function (event) {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = jQuery(document).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta) return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > jQuery("header").outerHeight()) {
// Scroll Down
jQuery("header").removeClass("scroll-up").addClass("scroll-down");
} else {
// Scroll Up
if (
st + jQuery(window).height() < jQuery(document).height() &&
lastScrollTop > st + 80
) {
jQuery("header").removeClass("scroll-down").addClass("scroll-up");
}
}
lastScrollTop = st;
}
}
Its not obvious to me either and can’t find anything in the documentation about it. How did you get on? Did you find the solution?
Unlisting in favor of the new topic that was created at How to add Javascript the right way in Sage10