Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Convert template to JSX (fixes #89) #90

Merged
merged 16 commits into from
Jan 16, 2023
Merged

Fix: Convert template to JSX (fixes #89) #90

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
403bb2b
#89 Convert template to JSX
swashbuck Nov 22, 2022
6eef51d
#89 README.md: Fix line breaks and version number under Limitations s…
swashbuck Nov 22, 2022
259f5e9
#89 Move helpers to the view
swashbuck Nov 28, 2022
f261bc5
#89 Move helper functions to the JSX template
swashbuck Nov 28, 2022
8aca45f
#89 Move click events to template
swashbuck Nov 30, 2022
705fe03
#89 Add resourcesForceDownload() for IE 11/iOS compatibility
swashbuck Nov 30, 2022
fae1e0d
#89 (WIP) Use state var to change selected class
swashbuck Dec 1, 2022
3b5ddde
#89 (WIP) Implement aria-selected, aria-labelledby, u-display-none
swashbuck Dec 6, 2022
3319c73
#89 (WIP) Implement a11y.focusFirst (needs fix)
swashbuck Dec 6, 2022
8372a55
#89 Focus items in useEffect hook
swashbuck Dec 13, 2022
585d6aa
Fix typo in pull_request_template.md
swashbuck Dec 16, 2022
34da0ef
#89 Add resourcesFilterButton template
swashbuck Dec 16, 2022
2bdfcb7
#89 Add resourcesItem template
swashbuck Dec 16, 2022
38a8311
#89 Add resourceTypes to loop through available filters and display b…
swashbuck Dec 16, 2022
193aeb0
#89 Update comments
swashbuck Dec 16, 2022
8a29f57
#89 Remove variable from resourcesHasType
swashbuck Dec 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 25 additions & 14 deletions templates/resources.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import Adapt from 'core/js/adapt';
import a11y from 'core/js/a11y';
import device from 'core/js/device';
Expand All @@ -11,8 +11,6 @@ export default function Resources (props) {
} = props;

const _globals = Adapt.course.get('_globals');
const [selectedFilter, updateSelectedFilter] = useState('all');
const [selectedId, updateSelectedId] = useState('resources__show-all');

function resourcesHasType(resources, type) {
const hasType = resources.some(_.matcher({ _type: type }));
Expand Down Expand Up @@ -44,25 +42,38 @@ export default function Resources (props) {
return (_forceDownload || filename);
}

const [selectedFilter, setSelectedFilter] = useState('all');
const [selectedId, setSelectedId] = useState('resources__show-all');
chris-steele marked this conversation as resolved.
Show resolved Hide resolved
const [focusFlag, setFocusFlag] = useState(false);

useEffect(() => {
if (focusFlag) {
let $items;
if (selectedFilter === 'all') {
$items = $('.resources__item');
} else {
$items = $('.resources__item.is-' + selectedFilter);
}

if ($items.length < 0) return;

a11y.focusFirst($items);

setFocusFlag(false);
}
}, [focusFlag]);

function onFilterClicked(e) {
if (e && e.preventDefault) e.preventDefault();

const $clickedButton = this.$(e.currentTarget);
const filter = $clickedButton.data('filter');
const id = $clickedButton.attr('id');

updateSelectedFilter(filter);
updateSelectedId(id);

let $items;
if (filter === 'all') {
$items = $('.resources__item');
} else {
$items = $('.resources__item.is-' + filter);
}
setSelectedFilter(filter);
setSelectedId(id);

if ($items.length < 0) return;
a11y.focusFirst($items);
setFocusFlag(true);
}

return (
Expand Down