Skip to content

Commit c15f130

Browse files
zackkridazackkrida
committed
FAQ page (desktop).
1 parent 076f1c4 commit c15f130

File tree

11 files changed

+391
-6
lines changed

11 files changed

+391
-6
lines changed

‎acf-json/group_5fa9dc5475882.json

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"key": "group_5fa9dc5475882",
3+
"title": "Frequently Asked Questions",
4+
"fields": [
5+
{
6+
"key": "field_5fa9dcf04f6db",
7+
"label": "FAQ Group",
8+
"name": "faq_group",
9+
"type": "repeater",
10+
"instructions": "Add a group of frequently asked questions. For example, one could add a group of frequently-asked questions relating to \"Registration\" or to \"Courses\".",
11+
"required": 0,
12+
"conditional_logic": 0,
13+
"wrapper": {
14+
"width": "",
15+
"class": "",
16+
"id": ""
17+
},
18+
"collapsed": "field_5fa9dd284f6dc",
19+
"min": 0,
20+
"max": 0,
21+
"layout": "row",
22+
"button_label": "",
23+
"sub_fields": [
24+
{
25+
"key": "field_5fa9dd284f6dc",
26+
"label": "Title",
27+
"name": "title",
28+
"type": "text",
29+
"instructions": "",
30+
"required": 0,
31+
"conditional_logic": 0,
32+
"wrapper": {
33+
"width": "",
34+
"class": "",
35+
"id": ""
36+
},
37+
"default_value": "",
38+
"placeholder": "Group title (example: \"Courses\")",
39+
"prepend": "",
40+
"append": "",
41+
"maxlength": ""
42+
},
43+
{
44+
"key": "field_5fa9dd4d4f6dd",
45+
"label": "Questions",
46+
"name": "questions",
47+
"type": "repeater",
48+
"instructions": "Add questions and answers here.",
49+
"required": 0,
50+
"conditional_logic": 0,
51+
"wrapper": {
52+
"width": "",
53+
"class": "",
54+
"id": ""
55+
},
56+
"collapsed": "field_5fa9dd694f6de",
57+
"min": 0,
58+
"max": 0,
59+
"layout": "block",
60+
"button_label": "Add Question",
61+
"sub_fields": [
62+
{
63+
"key": "field_5fa9dd694f6de",
64+
"label": "Question",
65+
"name": "question",
66+
"type": "text",
67+
"instructions": "",
68+
"required": 0,
69+
"conditional_logic": 0,
70+
"wrapper": {
71+
"width": "",
72+
"class": "",
73+
"id": ""
74+
},
75+
"default_value": "",
76+
"placeholder": "",
77+
"prepend": "",
78+
"append": "",
79+
"maxlength": ""
80+
},
81+
{
82+
"key": "field_5fa9dd714f6df",
83+
"label": "Answer",
84+
"name": "answer",
85+
"type": "wysiwyg",
86+
"instructions": "",
87+
"required": 0,
88+
"conditional_logic": 0,
89+
"wrapper": {
90+
"width": "",
91+
"class": "",
92+
"id": ""
93+
},
94+
"default_value": "",
95+
"tabs": "all",
96+
"toolbar": "full",
97+
"media_upload": 1,
98+
"delay": 0
99+
}
100+
]
101+
}
102+
]
103+
}
104+
],
105+
"location": [
106+
[
107+
{
108+
"param": "page_template",
109+
"operator": "==",
110+
"value": "template-faq.php"
111+
}
112+
]
113+
],
114+
"menu_order": 0,
115+
"position": "normal",
116+
"style": "default",
117+
"label_placement": "top",
118+
"instruction_placement": "label",
119+
"hide_on_screen": "",
120+
"active": true,
121+
"description": "",
122+
"modified": 1604968392
123+
}

‎assets/css/styles.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/script.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
jQuery(document).ready(function ($) {
2+
// FAQ Page
3+
if ($(".page-template-template-faq").length > 0) {
4+
var lock = false;
5+
var $faqLinks = $('[href^="#"]');
6+
7+
// Set the active link from the url hash
8+
function setActiveFromHash() {
9+
var $activeFAQLink = $('.faq-sidebar a[href="' + window.location.hash + '"]');
10+
11+
if ($activeFAQLink.length > 0) {
12+
$faqLinks.removeClass("active");
13+
$activeFAQLink.addClass("active");
14+
}
15+
}
16+
17+
setActiveFromHash();
18+
19+
// When the hash is updated, add the active class to the sidebar items
20+
$(window).on("hashchange", function (event) {
21+
event.preventDefault();
22+
setActiveFromHash();
23+
});
24+
25+
TableOfContents.init();
26+
}
27+
});
28+
29+
/**
30+
* Object to set the links active when headings are scrolled by.
31+
* @todo: Move to own file.
32+
*/
33+
var TableOfContents = {
34+
container: document.body,
35+
links: null,
36+
headings: null,
37+
intersectionOptions: {
38+
rootMargin: "0px",
39+
threshold: 1,
40+
},
41+
previousSection: null,
42+
observer: null,
43+
activeClass: "active",
44+
45+
init: function () {
46+
this.handleObserver = this.handleObserver.bind(this);
47+
48+
this.setUpObserver();
49+
this.findLinksAndHeadings();
50+
this.observeSections();
51+
},
52+
53+
handleLinkClick: function (evt) {
54+
evt.preventDefault();
55+
let id = evt.target.getAttribute("href").replace("#", "");
56+
57+
let section = this.headings.find((heading) => {
58+
return heading.getAttribute("id") === id;
59+
});
60+
61+
section.setAttribute("tabindex", -1);
62+
section.focus();
63+
64+
window.scroll({
65+
behavior: "smooth",
66+
top: section.offsetTop - 15,
67+
block: "start",
68+
});
69+
70+
if (this.container.classList.contains(this.activeClass)) {
71+
this.container.classList.remove(this.activeClass);
72+
}
73+
},
74+
75+
handleObserver: function (entries, observer) {
76+
entries.forEach((entry) => {
77+
let href = `#${entry.target.getAttribute("id")}`,
78+
link = this.links.find((l) => l.getAttribute("href") === href);
79+
80+
if (entry.isIntersecting && entry.intersectionRatio >= 1) {
81+
link.classList.add("is-visible");
82+
this.previousSection = entry.target.getAttribute("id");
83+
} else {
84+
link.classList.remove("is-visible");
85+
}
86+
87+
this.highlightFirstActive();
88+
});
89+
},
90+
91+
highlightFirstActive: function () {
92+
let firstVisibleLink = this.container.querySelector(".is-visible");
93+
94+
this.links.forEach((link) => {
95+
link.classList.remove(this.activeClass);
96+
});
97+
98+
if (firstVisibleLink) {
99+
firstVisibleLink.classList.add(this.activeClass);
100+
}
101+
102+
if (!firstVisibleLink && this.previousSection) {
103+
this.container
104+
.querySelector(`a[href="#${this.previousSection}"]`)
105+
.classList.add(this.activeClass);
106+
}
107+
},
108+
109+
observeSections: function () {
110+
this.headings.forEach((heading) => {
111+
this.observer.observe(heading);
112+
});
113+
},
114+
115+
setUpObserver: function () {
116+
this.observer = new IntersectionObserver(this.handleObserver, this.intersectionOptions);
117+
},
118+
119+
findLinksAndHeadings: function () {
120+
this.links = [...this.container.querySelectorAll(".faq-sidebar a")];
121+
this.headings = this.links.map((link) => {
122+
let id = link.getAttribute("href");
123+
return document.querySelector(id);
124+
});
125+
},
126+
};

‎front/dist/js/bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front/src/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
require('./styles/styles.scss')
1+
require("./styles/styles.scss");
2+
3+
import "./js/page-faqs";

‎front/src/js/page-faqs.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// FAQ page JavaScript
2+
3+
document.addEventListener("DOMContentReady", () => {
4+
alert("this is the FAQ page!");
5+
});

‎front/src/styles/base.scss

+15
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,18 @@ a,
1414
a:hover {
1515
color: $color-forest-green;
1616
}
17+
18+
h1,
19+
h2,
20+
h3,
21+
h4,
22+
h5,
23+
h6 {
24+
a {
25+
color: inherit;
26+
}
27+
}
28+
29+
html {
30+
scroll-behavior: smooth;
31+
}

‎front/src/styles/modules.scss

+12
Original file line numberDiff line numberDiff line change
@@ -159,3 +159,15 @@
159159
height: 180px;
160160
}
161161
}
162+
163+
// FAQ Page
164+
.wp-theme-certificates.page-template-template-faq {
165+
.faq-sidebar {
166+
position: sticky;
167+
top: $space-normal;
168+
}
169+
170+
.faq-sidebar .active {
171+
font-weight: bold;
172+
}
173+
}

‎functions.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public function actions_manager() {
5959
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
6060
}
6161
public function enqueue_scripts() {
62-
//Nothing yet
62+
wp_enqueue_script( 'cc_certificates_script', THEME_LOCAL_URI . '/assets/js/script.js', array( 'jquery' ), self::theme_ver, true );
6363
}
6464
public function enqueue_styles() {
6565
wp_enqueue_style( 'cc_current_style', THEME_LOCAL_URI . '/assets/css/styles.css', array('cc_base_style'), self::theme_ver );

‎single-cc_course.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<?php the_content(); ?>
2121
</div>
2222
<div class="entry-meta">
23-
<?php
23+
<?php
2424
$course_duration = get_post_meta( get_the_ID(), 'course_duration', true );
2525
$course_language = get_post_meta( get_the_ID(), 'course_language', true );
2626
$course_url = get_post_meta( get_the_ID(), 'course_apply_url', true );
@@ -47,7 +47,7 @@
4747
}
4848
?>
4949
</div>
50-
<?php
50+
<?php
5151
$upcoming_events = Certificates_Website::get_upcoming_course_events( get_the_ID() );
5252
if ( !empty( $upcoming_events ) ) {
5353
echo '<h4>Upcoming Courses</h4>';

0 commit comments

Comments
 (0)