Skip to content

Commit

Permalink
fix: update feed
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreancardona
andreancardona committed Aug 30, 2023
1 parent 8869202 commit afc6dec
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 34 deletions.
14 changes: 7 additions & 7 deletions content/index/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</tr>
<tr>
<td><code>article</code></td>
<td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
<td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
</tr>
<tr>
<td><code>banner</code></td>
Expand Down Expand Up @@ -124,7 +124,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</tr>
<tr>
<td><code>feed</code></td>
<td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
<td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
</tr>
<tr>
<td><code>form</code></td>
Expand Down Expand Up @@ -482,7 +482,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
</tr>
<tr>
<td><code>aria-busy</code></td>
<td><a href="../patterns/feed/examples/feed.html">Feed</a></td>
<td><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></td>
</tr>
<tr>
<td><code>aria-checked</code></td>
Expand Down Expand Up @@ -555,7 +555,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
<li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
<li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
<li><a href="../patterns/table/examples/table.html">Table</a></li>
</ul>
</td>
Expand Down Expand Up @@ -672,7 +672,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
<li><a href="../patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></li>
<li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
<li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
<li><a href="../patterns/grid/examples/data-grids.html">Data Grid</a></li>
<li><a href="../patterns/grid/examples/layout-grids.html">Layout Grid</a></li>
<li><a href="../patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
Expand Down Expand Up @@ -755,7 +755,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-posinset</code></td>
<td>
<ul>
<li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
<li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
<li><a href="../patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
<li><a href="../patterns/treeview/examples/treeview-1b.html">File Directory Treeview Using Declared Properties</a></li>
</ul>
Expand Down Expand Up @@ -825,7 +825,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-setsize</code></td>
<td>
<ul>
<li><a href="../patterns/feed/examples/feed.html">Feed</a></li>
<li><a href="../patterns/feed/examples/feed.html">Infinite Scrolling Feed</a></li>
<li><a href="../patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
<li><a href="../patterns/treeview/examples/treeview-1b.html">File Directory Treeview Using Declared Properties</a></li>
</ul>
Expand Down
25 changes: 3 additions & 22 deletions content/patterns/feed/examples/feed-display.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,33 +19,14 @@
<script src="../../../shared/js/utils.js"></script>
<script src="js/feed.js"></script>
<script src="js/feedDisplay.js"></script>
<script src="js/main.js"></script>
<!-- <script src="js/main.js"></script> -->
</head>
<body>
<main>
<h1>Recommended Restaurants</h1>

<section>
<h2>About This Example</h2>
<p>
<strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
This page provides a proposed implementation of a feed component.
This proposal does not yet have ARIA Practices Task Force consensus.
Feedback is welcome in <a href="https://github.com/w3c/aria-practices/issues/565">issue 565.</a>
</p>
</section>
<h3>Recommended Restaurants</h3>

<section id="main-content">
<div id="restaurant-feed" role="feed"></div>
</section>

<section id="side-panel">
<label for="delay-time-select">Select article loading delay</label>
<select id="delay-time-select" name="delay_time">
<option value="200">200 ms</option>
<option value="400">400 ms</option>
</select>
</section>
</main>

</body>
</html>
19 changes: 16 additions & 3 deletions content/patterns/feed/examples/feed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feed Example</title>
<title>Infinite Scrolling Feed Example</title>

<!-- Core JS and CSS shared by all examples -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
Expand All @@ -12,6 +12,12 @@
<script src="../../../shared/js/highlight.pack.js"></script>
<script src="../../../shared/js/app.js"></script>
<script src="../../../shared/js/skipto.js"></script>

<!-- JS and CSS for this example -->
<script src="../../../shared/js/utils.js"></script>
<script src="js/feed.js"></script>
<script src="js/feedDisplay.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand All @@ -21,7 +27,7 @@
</ul>
</nav>
<main>
<h1>Feed Example</h1>
<h1>Infinite Scrolling Feed Example</h1>

<section>
<h2>About This Example</h2>
Expand All @@ -44,7 +50,14 @@ <h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<p>The example feed experience below is presented in an iframe in order not to obstruct from the rest of the content of the page. </p>
<iframe id="feed_frame" src="../feed-display.html" height="500" title="Feed example" style="width: 100%"></iframe>
<div id="side-panel">
<label for="delay-time-select">Select article loading delay</label>
<select id="delay-time-select" name="delay_time">
<option value="200">200 ms</option>
<option value="800">800 ms</option>
</select>
</div>
<iframe id="feed_frame" src="./feed-display.html" height="500" title="Feed example" style="width: 100%"></iframe>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
Expand Down
7 changes: 5 additions & 2 deletions content/patterns/feed/examples/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@
* @function onload
* @description Initialize the feed once the page has loaded
*/
window.addEventListener('load', function () {
var feedNode = document.getElementById('restaurant-feed');
document.getElementById('feed_frame').addEventListener('load', function () {
// var feedNode = document.getElementById('restaurant-feed');
var iframe = document.getElementById('feed_frame');
var feedNode =
iframe.contentWindow.document.getElementById('restaurant-feed');
var delaySelect = document.getElementById('delay-time-select');
var restaurantFeed = new aria.Feed(feedNode, delaySelect);

Expand Down

0 comments on commit afc6dec

Please sign in to comment.