1 year ago
#388549
Rytis Plečkauskas
WordPress JS Modules problems
I'm doing a course of Wordpress programming, and I getting a totally no-sense problem... In file index.js (which is in theme folder src), I'm adding new modules which later is compiled by NPM. And the problem is that for example if I initiate MobileMenu class in first, MyNotes and Search classes don't works anymore, it feels like something breaks the code, because even the alert() doesn't works... I tried to look for code which can break each-other or something like that, but no luck... Can someone help me solve this problem? Thanks!
index.js
import "../css/style.scss"
// Our modules / classes
import HeroSlider from "./modules/HeroSlider"
import GoogleMap from "./modules/GoogleMap"
import Search from "./modules/Search"
import MyNotes from "./modules/MyNotes"
import MobileMenu from "./modules/MobileMenu"
// Instantiate a new object using our modules/classes
const mobileMenu = new MobileMenu()
const myNotes = new MyNotes()
const search = new Search()
const heroSlider = new HeroSlider()
const googleMap = new GoogleMap()
MobileMenu.js
class MobileMenu {
constructor() {
this.menu = document.querySelector(".site-header__menu")
this.openButton = document.querySelector(".site-header__menu-trigger")
this.events()
}
events() {
this.openButton.addEventListener("click", () => this.openMenu())
}
openMenu() {
this.openButton.classList.toggle("fa-bars")
this.openButton.classList.toggle("fa-window-close")
this.menu.classList.toggle("site-header__menu--active")
}
}
export default MobileMenu
HeroSlider.js
import Glide from "@glidejs/glide"
class HeroSlider {
constructor() {
if (document.querySelector(".hero-slider")) {
// count how many slides there are
const dotCount = document.querySelectorAll(".hero-slider__slide").length
// Generate the HTML for the navigation dots
let dotHTML = ""
for (let i = 0; i < dotCount; i++) {
dotHTML += `<button class="slider__bullet glide__bullet" data-glide-dir="=${i}"></button>`
}
// Add the dots HTML to the DOM
document.querySelector(".glide__bullets").insertAdjacentHTML("beforeend", dotHTML)
// Actually initialize the glide / slider script
var glide = new Glide(".hero-slider", {
type: "carousel",
perView: 1,
autoplay: 3000
})
glide.mount()
}
}
}
export default HeroSlider
MyNotes.js
import $ from 'jquery';
class MyNotes {
constructor() {
this.events();
}
events() {
$(".delete-note").on("click", this.deleteNote.bind(this));
$(".edit-note").on("click", this.editNote.bind(this));
$(".update-note").on("click", this.updateNote.bind(this));
}
editNote(e) {
var thisNote = $(e.target).parents("li");
if (thisNote.data("state") == "editable") {
this.makeNoteReadOnly(thisNote);
} else {
this.makeNoteEditable(thisNote);
}
}
makeNoteEditable(thisNote) {
thisNote.find(".edit-note").html('<i class="fa fa-times" aria-hidden="true"></i> Cancel');
thisNote.find(".note-title-field, .note-body-field").removeAttr("readonly").addClass("note-active-field");
thisNote.find(".update-note").addClass("update-note--visible");
thisNote.data("state", "editable");
}
makeNoteReadOnly(thisNote) {
thisNote.find(".edit-note").html('<i class="fa fa-pencil" aria-hidden="true"></i> Edit');
thisNote.find(".note-title-field, .note-body-field").attr("readonly", "readonly").removeClass("note-active-field");
thisNote.find(".update-note").removeClass("update-note--visible");
thisNote.data("state", "readonly");
}
updateNote(e) {
var thisNote = $(e.target).parents("li");
var updatedPost = {
'title': thisNote.find(".note-title-field").val(),
'content': thisNote.find(".note-body-field").val()
}
$.ajax({
beforeSend: (xhr) => {
xhr.setRequestHeader('X-WP-Nonce', JSData.nonce);
},
url: JSData.root_url + '/wp-json/wp/v2/note/' + thisNote.data('id'),
type: 'POST',
data: updatedPost,
success: () => {
this.makeNoteReadOnly(thisNote);
},
error: (response) => {
console.log("Error");
console.log(response);
}
});
}
deleteNote(e) {
var thisNote = $(e.target).parents("li");
$.ajax({
beforeSend: (xhr) => {
xhr.setRequestHeader('X-WP-Nonce', JSData.nonce);
},
url: JSData.root_url + '/wp-json/wp/v2/note/' + thisNote.data('id'),
type: 'DELETE',
success: () => {
thisNote.slideUp();
},
error: (response) => {
console.log("Error");
console.log(response);
}
});
}
}
export default MyNotes;
Search.js
import $ from 'jquery';
class Search {
constructor() {
this.addSearchHTML();
this.resultsDiv = $("#search-overlay__results");
this.openButton = $(".js-search-trigger");
this.closeButton = $(".search-overlay__close");
this.searchOverlay = $(".search-overlay");
this.searchField = $("#search-term");
this.events();
this.isOverlayOpen = false;
this.typingTimer;
this.isSpinnerVisible = false;
this.previousValue;
}
events() {
this.openButton.on("click", this.openOverlay.bind(this));
this.closeButton.on("click", this.closeOverlay.bind(this));
$(document).on("keydown", this.keyPressDispatcher.bind(this));
this.searchField.on("keyup", this.typingLogic.bind(this));
}
//Methods
openOverlay() {
this.searchOverlay.addClass("search-overlay--active");
$("body").addClass("body-no-scroll");
this.searchField.val('');
setTimeout(() => this.searchField.focus(), 301);
this.isOverlayOpen = true;
return false;
}
closeOverlay() {
this.searchOverlay.removeClass("search-overlay--active");
$("body").removeClass("body-no-scroll");
this.isOverlayOpen = false;
}
keyPressDispatcher(e) {
// S key
if (e.keyCode == 83 && !this.isOverlayOpen && !$("input, textarea").is(':focus')) {
this.openOverlay();
// ESC key
} else if (e.keyCode == 27 && this.isOverlayOpen) {
this.closeOverlay();
}
}
typingLogic() {
if (this.searchField.val() != this.previousValue) {
clearTimeout(this.typingTimer);
if (this.searchField.val()) {
if (!this.isSpinnerVisible) {
this.resultsDiv.html('<div class="spinner-loader"></div>');
this.isSpinnerVisible = true;
}
this.typingTimer = setTimeout(this.getResults.bind(this), 1500);
} else {
this.resultsDiv.html('');
this.isSpinnerVisible = false;
}
this.previousValue = this.searchField.val();
}
}
getResults() {
$.getJSON(JSData.root_url + '/wp-json/university/v1/search?term=' + this.searchField.val() , (results) => {
this.resultsDiv.html(`
<div class="row">
<div class="one-third">
<h2 class="search-overlay__section-title">General Information</h2>
${results.generalInfo.length ? '<ul class="link-list min-list">' : `<p>No results...</p>`}
${results.generalInfo.map(item => `<li><a href="${item.permalink}">${item.title}</a> ${item.type == 'post' ? `by ${item.authorName}` : ''}</li>`).join('')}
${results.generalInfo.length ? '</ul>' : ''}
</div>
<div class="one-third">
<h2 class="search-overlay__section-title">Programs</h2>
${results.programs.length ? `<ul class="link-list min-list">` : `<p>No results... <a href="${JSData.root_url}/programs">See all programs...</a></p>`}
${results.programs.map(item => `<li><a href="${item.permalink}">${item.title}</a></li>`).join('')}
${results.programs.length ? '</ul>' : ''}
<h2 class="search-overlay__section-title">Professors</h2>
${results.professors.length ? `<ul class="professor-cards">` : `<p>No results... <a href="${JSData.root_url}/professors">See all professors...</a></p>`}
${results.professors.map(item => `
<li class="professor-card__list-item">
<a class="professor-card" href="${item.permalink}">
<img style="float: left; width: 200px; height: 200px; object-fit: cover;" class="professor-card__image" src="${item.image}">
<span class="professor-card__name">${item.title}</span>
</a>
</li>
`).join('')}
${results.professors.length ? '</ul>' : ''}
</div>
<div class="one-third">
<h2 class="search-overlay__section-title">Campuses</h2>
${results.campuses.length ? `<ul class="link-list min-list">` : `<p>No results... <a href="${JSData.root_url}/campuses">See all campuses...</a></p>`}
${results.campuses.map(item => `<li><a href="${item.permalink}">${item.title}</a></li>`).join('')}
${results.campuses.length ? '</ul>' : ''}
<h2 class="search-overlay__section-title">Events</h2>
${results.events.length ? `` : `<p>No results... <a href="${JSData.root_url}/events">See all events...</a></p>`}
${results.events.map(item => `
<div class="event-summary">
<a class="event-summary__date t-center" href="${item.permalink}">
<span class="event-summary__month">${item.month}</span>
<span class="event-summary__day">${item.day}</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="${item.permalink}">${item.title}</a></h5>
<p>${item.description}<a href="${item.permalink}" class="nu gray">Learn more</a></p>
</div>
</div>
`).join('')}
</div>
</div>
`);
this.isSpinnerVisible = false;
});
}
addSearchHTML() { $("body").append(`
<div class="search-overlay">
<div class="search-overlay__top">
<div class="container">
<i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
<input type="text" class="search-term" placeholder="What are you looking for?" id="search-term" autocomplete="off">
<i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
</div>
</div>
<div class="container">
<div id="search-overlay__results"></div>
</div>
</div>`);
}
}
export default Search
GoogleMap.js
(function( $ ) {
/**
* initMap
*
* Renders a Google Map onto the selected jQuery element
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @return object The map instance.
*/
function initMap( $el ) {
// Find marker elements within map.
var $markers = $el.find('.marker');
// Create gerenic map.
var mapArgs = {
zoom : $el.data('zoom') || 16,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], mapArgs );
// Add markers.
map.markers = [];
$markers.each(function(){
initMarker( $(this), map );
});
// Center map based on markers.
centerMap( map );
// Return map instance.
return map;
}
/**
* initMarker
*
* Creates a marker for the given jQuery element and map.
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @param object The map instance.
* @return object The marker instance.
*/
function initMarker( $marker, map ) {
// Get position from marker.
var lat = $marker.data('lat');
var lng = $marker.data('lng');
var latLng = {
lat: parseFloat( lat ),
lng: parseFloat( lng )
};
// Create marker instance.
var marker = new google.maps.Marker({
position : latLng,
map: map
});
// Append to reference for later use.
map.markers.push( marker );
// If marker contains HTML, add it to an infoWindow.
if( $marker.html() ){
// Create info window.
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});
// Show info window when marker is clicked.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/**
* centerMap
*
* Centers the map showing all markers in view.
*
* @date 22/10/19
* @since 5.8.6
*
* @param object The map instance.
* @return void
*/
function centerMap( map ) {
// Create map boundaries from all map markers.
var bounds = new google.maps.LatLngBounds();
map.markers.forEach(function( marker ){
bounds.extend({
lat: marker.position.lat(),
lng: marker.position.lng()
});
});
// Case: Single marker.
if( map.markers.length == 1 ){
map.setCenter( bounds.getCenter() );
// Case: Multiple markers.
} else{
map.fitBounds( bounds );
}
}
// Render maps on page load.
$(document).ready(function(){
$('.acf-map').each(function(){
var map = initMap( $(this) );
});
});
})(jQuery);
javascript
wordpress
npm
build
module
0 Answers
Your Answer