Skip to content

Commit dce1221

Browse files
abdelilahelhaddadabdelilahelhaddad
committed
🔥 🎨 Convert HTML Template to WP ✨ 🌐
1 parent d6b1760 commit dce1221

13 files changed

+26767
-13648
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎front-page.php

+30-25
Original file line numberDiff line numberDiff line change
@@ -85,35 +85,40 @@ class="btn btn--blue">View All
8585
</div>
8686

8787
<div class="hero-slider">
88-
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/bus.jpg')
89-
?>);">
90-
<div class="hero-slider__interior container">
91-
<div class="hero-slider__overlay">
92-
<h2 class="headline headline--medium t-center">Free Transportation</h2>
93-
<p class="t-center">All students have free unlimited bus fare.</p>
94-
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
88+
<div data-glide-el="track" class="glide__track">
89+
<div class="glide__slides">
90+
<div class="hero-slider__slide"
91+
style="background-image: url(<?php echo get_theme_file_uri('/images/bus.jpg') ?>);">
92+
<div class="hero-slider__interior container">
93+
<div class="hero-slider__overlay">
94+
<h2 class="headline headline--medium t-center">Free Transportation</h2>
95+
<p class="t-center">All students have free unlimited bus fare.</p>
96+
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
97+
</div>
98+
</div>
9599
</div>
96-
</div>
97-
</div>
98-
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/apples.jpg')
99-
?>);">
100-
<div class="hero-slider__interior container">
101-
<div class="hero-slider__overlay">
102-
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
103-
<p class="t-center">Our dentistry program recommends eating apples.</p>
104-
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
100+
<div class="hero-slider__slide"
101+
style="background-image: url(<?php echo get_theme_file_uri('/images/apples.jpg') ?>);">
102+
<div class="hero-slider__interior container">
103+
<div class="hero-slider__overlay">
104+
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
105+
<p class="t-center">Our dentistry program recommends eating apples.</p>
106+
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
107+
</div>
108+
</div>
105109
</div>
106-
</div>
107-
</div>
108-
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/bread.jpg')
109-
?>);">
110-
<div class="hero-slider__interior container">
111-
<div class="hero-slider__overlay">
112-
<h2 class="headline headline--medium t-center">Free Food</h2>
113-
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
114-
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
110+
<div class="hero-slider__slide"
111+
style="background-image: url(<?php echo get_theme_file_uri('/images/bread.jpg') ?>);">
112+
<div class="hero-slider__interior container">
113+
<div class="hero-slider__overlay">
114+
<h2 class="headline headline--medium t-center">Free Food</h2>
115+
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
116+
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
117+
</div>
118+
</div>
115119
</div>
116120
</div>
121+
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]"></div>
117122
</div>
118123
</div>
119124

‎functions.php

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ function pageBanner($args = NULL)
3939
function wplearn_scripts()
4040
{
4141
wp_enqueue_script('main-wplearn-js', get_template_directory_uri() . '/js/scripts-bundled.js', [], _S_VERSION, true);
42+
wp_enqueue_script('search-wplearn-js', get_template_directory_uri() . '/js/search.js', [], _S_VERSION, true);
4243
wp_enqueue_style(
4344
'google-font',
4445
'//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i',

‎js/modules/HeroSlider.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import $ from 'jquery';
2+
3+
class HeroSlider {
4+
constructor() {
5+
this.els = $(".hero-slider");
6+
this.initSlider();
7+
}
8+
9+
initSlider() {
10+
this.els.slick({
11+
autoplay: true,
12+
arrows: false,
13+
dots: true
14+
});
15+
}
16+
}
17+
18+
export default HeroSlider;

‎js/modules/MobileMenu.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import $ from 'jquery';
2+
3+
class MobileMenu {
4+
constructor() {
5+
this.menu = $(".site-header__menu");
6+
this.openButton = $(".site-header__menu-trigger");
7+
this.events();
8+
}
9+
10+
events() {
11+
this.openButton.on("click", this.openMenu.bind(this));
12+
}
13+
14+
openMenu() {
15+
this.openButton.toggleClass("fa-bars fa-window-close");
16+
this.menu.toggleClass("site-header__menu--active");
17+
}
18+
}
19+
20+
export default MobileMenu;

‎js/modules/Search.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import $ from 'jquery';
2+
3+
class Search {
4+
// 1. describe and create/initiate our object
5+
constructor() {
6+
this.addSearchHTML();
7+
this.resultsDiv = $("#search-overlay__results");
8+
this.openButton = $(".js-search-trigger");
9+
this.closeButton = $(".search-overlay__close");
10+
this.searchOverlay = $(".search-overlay");
11+
this.searchField = $("#search-term");
12+
this.events();
13+
this.isOverlayOpen = false;
14+
this.isSpinnerVisible = false;
15+
this.previousValue;
16+
this.typingTimer;
17+
}
18+
19+
// 2. events
20+
events() {
21+
this.openButton.on("click", this.openOverlay.bind(this));
22+
this.closeButton.on("click", this.closeOverlay.bind(this));
23+
$(document).on("keydown", this.keyPressDispatcher.bind(this));
24+
this.searchField.on("keyup", this.typingLogic.bind(this));
25+
}
26+
27+
28+
// 3. methods (function, action...)
29+
typingLogic() {
30+
if (this.searchField.val() != this.previousValue) {
31+
clearTimeout(this.typingTimer);
32+
33+
if (this.searchField.val()) {
34+
if (!this.isSpinnerVisible) {
35+
this.resultsDiv.html('<div class="spinner-loader"></div>');
36+
this.isSpinnerVisible = true;
37+
}
38+
this.typingTimer = setTimeout(this.getResults.bind(this), 750);
39+
} else {
40+
this.resultsDiv.html('');
41+
this.isSpinnerVisible = false;
42+
}
43+
44+
}
45+
46+
this.previousValue = this.searchField.val();
47+
}
48+
49+
getResults() {
50+
$.when(
51+
$.getJSON(universityData.root_url + '/wp-json/wp/v2/posts?search=' + this.searchField.val()),
52+
$.getJSON(universityData.root_url + '/wp-json/wp/v2/pages?search=' + this.searchField.val())
53+
).then((posts, pages) => {
54+
var combinedResults = posts[0].concat(pages[0]);
55+
this.resultsDiv.html(`
56+
<h2 class="search-overlay__section-title">General Information</h2>
57+
${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
58+
${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
59+
${combinedResults.length ? '</ul>' : ''}
60+
`);
61+
this.isSpinnerVisible = false;
62+
}, () => {
63+
this.resultsDiv.html('<p>Unexpected error; please try again.</p>');
64+
});
65+
}
66+
67+
keyPressDispatcher(e) {
68+
if (e.keyCode == 83 && !this.isOverlayOpen && !$("input, textarea").is(':focus')) {
69+
this.openOverlay();
70+
}
71+
72+
if (e.keyCode == 27 && this.isOverlayOpen) {
73+
this.closeOverlay();
74+
}
75+
76+
}
77+
78+
openOverlay() {
79+
this.searchOverlay.addClass("search-overlay--active");
80+
$("body").addClass("body-no-scroll");
81+
this.searchField.val('');
82+
setTimeout(() => this.searchField.focus(), 301);
83+
console.log("our open method just ran!");
84+
this.isOverlayOpen = true;
85+
}
86+
87+
closeOverlay() {
88+
this.searchOverlay.removeClass("search-overlay--active");
89+
$("body").removeClass("body-no-scroll");
90+
console.log("our close method just ran!");
91+
this.isOverlayOpen = false;
92+
}
93+
94+
addSearchHTML() {
95+
$("body").append(`
96+
<div class="search-overlay">
97+
<div class="search-overlay__top">
98+
<div class="container">
99+
<i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
100+
<input type="text" class="search-term" placeholder="What are you looking for?" id="search-term">
101+
<i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
102+
</div>
103+
</div>
104+
105+
<div class="container">
106+
<div id="search-overlay__results"></div>
107+
</div>
108+
109+
</div>
110+
`);
111+
}
112+
113+
}
114+
115+
export default Search;

0 commit comments

Comments
 (0)