scratchfoundation/scratchx
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchx.git synced 2024-11-28 18:45:49 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Trigger page changes with hashchange. Fix back button

Browse source
This commit is contained in:
Ray Schamp 2015-05-08 18:44:45 -04:00
parent 0744483ca2
commit b184d78c3f
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -12,7 +12,7 @@
<main>
<header>
<div>
<a href="#home" data-action="static-link"><h1 class="scratchx-logo"><span>ScratchX</span></h1></a>
<a href="#home"><h1 class="scratchx-logo"><span>ScratchX</span></h1></a>
<nav class="main-nav">
Related Sites:
<ul>
@ -26,7 +26,7 @@
<article id="home">
<header>
<div>
<aside class="warning"><strong>Warning:</strong> These extensions are experimental. <a href="#faq" data-action="static-link">Please read the FAQ before trying them.</a></aside>
<aside class="warning message"><strong>Warning:</strong> These extensions are experimental. <a href="#faq">Please read the FAQ before trying them.</a></aside>
<h1>About ScratchX</h1>
<p>
@ -38,7 +38,7 @@
<section>
<h2>Open an Extension File</h2>
<p>Choose a .sbx file from your local drive</p>
<p><a href="#faq-sbx-file" data-action="static-link">What is a .sbx file?</a></p>
<p><a href="#faq-sbx-file">What is a .sbx file?</a></p>
</section>
<section>
<button data-action="load-file">Browse for local file</button>
@ -49,7 +49,7 @@
<section>
<h2>Open an Extension URL</h2>
<p>Paste the web address below</p>
<p><a href="#faq-scratchx-url" data-action="static-link">What is a ScratchX URL?</a></p>
<p><a href="#faq-scratchx-url">What is a ScratchX URL?</a></p>
</section>
<section>
<form class="input-plus-button url-load-form">
@ -93,14 +93,14 @@
<div>
<h2>Developer Documentation</h2>
<p>Developers can create new Experimental Extensions using Javascript. To learn more, read the <a href="http://llk.github.io/scratch-extension-docs/">Developer Documentation</a>.</p>
<p><a href="#scratch" data-action="static-link"><button>Open editor</button></a></p>
<p><button data-action="show" data-target="#scratch">Open editor</button></p>
</div>
</section>
</article>
<article id="privacy-policy">
<section>
<div>
<aside class="warning"><strong>Warning:</strong> These extensions are experimental. <a href="#faq" data-action="static-link">Please read the FAQ before trying them.</a></aside>
<aside class="warning message"><strong>Warning:</strong> These extensions are experimental. <a href="#faq">Please read the FAQ before trying them.</a></aside>
<div>
<section class="main">
<h1>Privacy Policy</h1>
@ -139,7 +139,7 @@
<article id="faq">
<section>
<div>
<aside class="warning"><strong>Warning:</strong> These extensions are experimental. <a href="#faq" data-action="static-link">Please read the FAQ before trying them.</a></aside>
<aside class="warning message"><strong>Warning:</strong> These extensions are experimental. <a href="#faq">Please read the FAQ before trying them.</a></aside>
<div>
<section class="main">
<h1><abbr title="Frequently Asked Questions">FAQ</abbr></h1>
@ -166,7 +166,7 @@
<p>Click the 'Save' button at the top of the page to download your project as an .sbx file on to your local computer. You can then send this file to other people, and they can upload your file onto ScratchX to play with your project.</p>
<h2 id="faq-examples">Where can I find example Experimental Extensions to play around with?</h2>
<p>We have linked to a few example extensions on the <a href="#home" data-action="static-link">ScratchX</a> homepage. We plan to highlight additional extensions in the coming months.</p>
<p>We have linked to a few example extensions on the <a href="#home">ScratchX</a> homepage. We plan to highlight additional extensions in the coming months.</p>
<h2 id="faq-scratchx-url">What is a ScratchX URL?</h2>
<p>Developers who make extensions for ScratchX can choose to create a custom web address or URL that points to their extension and/or demo project. Clicking on a ScratchX extension URL will take you directly to a project with an extension loaded.</p>
@ -213,9 +213,9 @@
<h2>ScratchX</h2>
<ul>
<li><a href="https://scratch.mit.edu/terms_of_use/">Terms of Service</a></li>
<li><a href="#privacy-policy" data-action="static-link">Privacy Policy</a></li>
<li><a href="#privacy-policy">Privacy Policy</a></li>
<li><a href="mailto:scratch-extensions@media.mit.edu">Contact Us</a></li>
<li><a href="#faq" data-action="static-link">FAQ</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="https://scratch.mit.edu/discuss/41/">Forums</a></li>
</ul>
</nav>

17
js/scratchx.js
View file

@ -265,20 +265,25 @@ $(document).on('click', "[data-action='modal']", function(e){
/* Page switching */
$(document).on('click', "[data-action='static-link']", function(e) {
$(document).on('click', "[data-action='show']", function(e) {
/*
* Links with data-action="static-link" should switch the view
* Anything with data-action="show" should switch the view
* to that page. Works like tabs sort of. Use like...
* <!-- Makes a link to the Privacy Policy section -->
* <a href="#privacy-policy" data-action="static-link">Privacy Policy</a>
* <button data-target="#privacy-policy" data-action="show">Privacy Policy</button>
*
*/
var path = $(this).attr("href").substring(1);
showPage(path);
window.location.hash = $(this).data("target");
});
$(window).bind('hashchange', function(e) {
if (document.location.hash == '') showPage('home');
var page = '';
if (document.location.hash == '') {
page = 'home';
} else {
page = window.location.hash.substr(1);
}
showPage(page);
});
function showPage(path) {