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

Don't include 2nd bundled copy of css on demo page. Resolves #487 #488

Merged
merged 2 commits into from
May 7, 2024
Merged

Don't include 2nd bundled copy of css on demo page. Resolves #487 #488

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6eba2c
Don't include 2nd bundled copy of css on demo page. Resolves #487 of …
patrick-lienau May 1, 2024
d1c89b9
Reformat to 2-space indents
patrick-lienau May 6, 2024
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
Prev Previous commit
Reformat to 2-space indents
  • Loading branch information
@patrick-lienau
patrick-lienau committed May 7, 2024
commit d1c89b9908a94e40a08148c2849d40fe0508c4cc
342 changes: 171 additions & 171 deletions demo/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,191 +13,191 @@ import MarkersDisplay from '@Components/MarkersDisplay/MarkersDisplay';
import './app.scss';

const App = ({ manifestURL }) => {
const [userURL, setUserURL] = React.useState(manifestURL);
const [manifestUrl, setManifestUrl] = React.useState(manifestURL);

const tabValues = [
{ title: 'Details', ref: React.useRef(null) },
{ title: 'Transcripts', ref: React.useRef(null) },
{ title: 'Files', ref: React.useRef(null) },
{ title: 'Markers', ref: React.useRef(null) },
];

React.useEffect(() => {
setManifestUrl(manifestUrl);
}, [manifestUrl]);

const handleSubmit = (e) => {
e.preventDefault();
setManifestUrl(userURL);
};

const handleUserInput = (e) => {
setManifestUrl();
setUserURL(e.target.value);
};

return (
<div className='ramp-demo'>
<div className='ramp--details'>
<h1>Ramp</h1>
<p>An interactive, IIIF powered A/V player built with components
from <a href="https://www.npmjs.com/package/@samvera/ramp"
target="_blank">
@samvera/ramp
</a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
of your <em>public</em> manifest to view it in the player.
</p>
<div className='ramp--form_container'>
<form onSubmit={handleSubmit}>
<div className='row'>
<div className='col-1'>
<label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
</div>
<div className='col-2'>
<input type='url'
id='manifesturl'
name='manifesturl'
value={userURL}
onChange={handleUserInput}
placeholder='Manifest URL'
className="ramp-demo__manifest-input" />
<input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
</div>
</div>
</form>
</div>
</div>
<div className='ramp--player_container'>
<IIIFPlayer
manifestUrl={manifestUrl}
>
<div className="iiif-player-demo">
<MediaPlayer enableFileDownload={true} />
<div className="components-row">
<div className="nav">
<AutoAdvanceToggle />
<StructuredNavigation />
</div>
<Tabs tabValues={tabValues} manifestUrl={manifestUrl} />
</div>
</div>
</IIIFPlayer>
const [userURL, setUserURL] = React.useState(manifestURL);
const [manifestUrl, setManifestUrl] = React.useState(manifestURL);

const tabValues = [
{ title: 'Details', ref: React.useRef(null) },
{ title: 'Transcripts', ref: React.useRef(null) },
{ title: 'Files', ref: React.useRef(null) },
{ title: 'Markers', ref: React.useRef(null) },
];

React.useEffect(() => {
setManifestUrl(manifestUrl);
}, [manifestUrl]);

const handleSubmit = (e) => {
e.preventDefault();
setManifestUrl(userURL);
};

const handleUserInput = (e) => {
setManifestUrl();
setUserURL(e.target.value);
};

return (
<div className='ramp-demo'>
<div className='ramp--details'>
<h1>Ramp</h1>
<p>An interactive, IIIF powered A/V player built with components
from <a href="https://www.npmjs.com/package/@samvera/ramp"
target="_blank">
@samvera/ramp
</a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
of your <em>public</em> manifest to view it in the player.
</p>
<div className='ramp--form_container'>
<form onSubmit={handleSubmit}>
<div className='row'>
<div className='col-1'>
<label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
</div>
<div className='col-2'>
<input type='url'
id='manifesturl'
name='manifesturl'
value={userURL}
onChange={handleUserInput}
placeholder='Manifest URL'
className="ramp-demo__manifest-input" />
<input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
</div>
</div>
</form>
</div>
);
</div>
<div className='ramp--player_container'>
<IIIFPlayer
manifestUrl={manifestUrl}
>
<div className="iiif-player-demo">
<MediaPlayer enableFileDownload={true} />
<div className="components-row">
<div className="nav">
<AutoAdvanceToggle />
<StructuredNavigation />
</div>
<Tabs tabValues={tabValues} manifestUrl={manifestUrl} />
</div>
</div>
</IIIFPlayer>
</div>
</div>
);
};


/*Reference: https://accessible-react.eevis.codes/components/tabs */
const Tabs = ({ tabValues, manifestUrl }) => {
const [activeTab, setActiveTab] = React.useState(0);

let tabs = [];

const handleClick = (index) => {
setActiveTab(index);
};

const handleNextTab = (firstTabInRound, nextTab, lastTabInRound) => {
const tabToSelect =
activeTab === lastTabInRound ? firstTabInRound : nextTab;
setActiveTab(tabToSelect);
tabValues[tabToSelect].ref.current.focus();
};

const handleKeyPress = (event) => {
const tabCount = Object.keys(tabValues).length - 1;

if (event.key === "ArrowLeft") {
const last = tabCount;
const next = activeTab - 1;
handleNextTab(last, next, 0);
}
if (event.key === "ArrowRight") {
const first = 0;
const next = activeTab + 1;
handleNextTab(first, next, tabCount);
}
};

tabValues.map((t, index) => {
tabs.push(
<Tab
key={index}
id={t.title.toLowerCase()}
tabPanelId={`${t.title.toLowerCase()}Tab`}
index={index}
handleChange={handleClick}
activeTab={activeTab}
title={t.title}
tabRef={t.ref}
/>
);
});

return (
<section className="tabs-wrapper">
<div className="switcher">
<ul
role="tablist"
className="tablist switcher"
aria-label="more Ramp components in tabs"
onKeyDown={handleKeyPress}>
{tabs}
</ul>
</div>
<TabPanel id="detailsTab" tabId="details" tabIndex={0} activeTab={activeTab}>
<MetadataDisplay showHeading={false} />
</TabPanel>
<TabPanel id="transcriptsTab" tabId="transcripts" tabIndex={1} activeTab={activeTab}>
<Transcript
playerID="iiif-media-player"
manifestUrl={manifestUrl}
/>
</TabPanel>
<TabPanel id="filesTab" tabId="files" tabIndex={2} activeTab={activeTab}>
<SupplementalFiles showHeading={false} />
</TabPanel>
<TabPanel id="markersTab" tabId="markers" tabIndex={3} activeTab={activeTab}>
<MarkersDisplay showHeading={false} />
</TabPanel>
</section>
const [activeTab, setActiveTab] = React.useState(0);

let tabs = [];

const handleClick = (index) => {
setActiveTab(index);
};

const handleNextTab = (firstTabInRound, nextTab, lastTabInRound) => {
const tabToSelect =
activeTab === lastTabInRound ? firstTabInRound : nextTab;
setActiveTab(tabToSelect);
tabValues[tabToSelect].ref.current.focus();
};

const handleKeyPress = (event) => {
const tabCount = Object.keys(tabValues).length - 1;

if (event.key === "ArrowLeft") {
const last = tabCount;
const next = activeTab - 1;
handleNextTab(last, next, 0);
}
if (event.key === "ArrowRight") {
const first = 0;
const next = activeTab + 1;
handleNextTab(first, next, tabCount);
}
};

tabValues.map((t, index) => {
tabs.push(
<Tab
key={index}
id={t.title.toLowerCase()}
tabPanelId={`${t.title.toLowerCase()}Tab`}
index={index}
handleChange={handleClick}
activeTab={activeTab}
title={t.title}
tabRef={t.ref}
/>
);
});

return (
<section className="tabs-wrapper">
<div className="switcher">
<ul
role="tablist"
className="tablist switcher"
aria-label="more Ramp components in tabs"
onKeyDown={handleKeyPress}>
{tabs}
</ul>
</div>
<TabPanel id="detailsTab" tabId="details" tabIndex={0} activeTab={activeTab}>
<MetadataDisplay showHeading={false} />
</TabPanel>
<TabPanel id="transcriptsTab" tabId="transcripts" tabIndex={1} activeTab={activeTab}>
<Transcript
playerID="iiif-media-player"
manifestUrl={manifestUrl}
/>
</TabPanel>
<TabPanel id="filesTab" tabId="files" tabIndex={2} activeTab={activeTab}>
<SupplementalFiles showHeading={false} />
</TabPanel>
<TabPanel id="markersTab" tabId="markers" tabIndex={3} activeTab={activeTab}>
<MarkersDisplay showHeading={false} />
</TabPanel>
</section>
);
};

const Tab = ({ id, tabPanelId, index, handleChange, activeTab, title, tabRef }) => {
const handleClick = () => { handleChange(index); };
return (
<li role="presentation">
<button
role="tab"
id={id}
aria-selected={activeTab === index}
aria-controls={tabPanelId}
onClick={handleClick}
tabIndex={activeTab === index ? 0 : -1}
ref={tabRef}
>
{title}
</button>
</li>
);
const handleClick = () => { handleChange(index); };
return (
<li role="presentation">
<button
role="tab"
id={id}
aria-selected={activeTab === index}
aria-controls={tabPanelId}
onClick={handleClick}
tabIndex={activeTab === index ? 0 : -1}
ref={tabRef}
>
{title}
</button>
</li>
);
};

const TabPanel = ({ id, tabId, activeTab, tabIndex, children }) => {
return (
<section
role="tabpanel"
id={id}
aria-labelledby={tabId}
hidden={activeTab !== tabIndex}
tabIndex={0}
className="tabpanel"
>
{children}
</section>
);
return (
<section
role="tabpanel"
id={id}
aria-labelledby={tabId}
hidden={activeTab !== tabIndex}
tabIndex={0}
className="tabpanel"
>
{children}
</section>
);
};

export default App;