Remove jQuery and jQuery UI dependencies.

This commit is contained in:
Will Scullin 2019-03-12 21:11:00 -07:00
parent 0f5c83d6ad
commit be715f3f63
No known key found for this signature in database
GPG Key ID: 9092A5C0A673416B
12 changed files with 975 additions and 829 deletions

View File

@ -27,26 +27,8 @@
<link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
<link rel="shortcut icon" href="img/logoicon.png" />
<link rel="stylesheet" type="text/css" href="css/apple2.css" />
<link rel="stylesheet" type="text/css"
href="//code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
<!-- white text in controls -->
<style type="text/css">
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
color: white;
}
.ui-state-default .ui-icon {
background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
}
</style>
<!-- jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<!-- Disk Index -->
<script type="text/javascript" src="json/disks/index.js"></script>
@ -55,12 +37,8 @@
ondragover="handleDragOver(0, event)"
ondrop="handleDrop(0, event)"
ondragend="handleDragEnd(0, event)">
<div id="fb-root"></div>
<div style="margin: auto; width: 614px">
<div id="header">
<a href="//www.w3.org/html/logo/" target="_blank">
<img src="//www.w3.org/html/logo/badge/html5-badge-h-solo.png" style="float: right" />
</a>
<a href="about.html" target="_blank">
<img src="img/badge.png" id="badge" />
</a>
@ -75,7 +53,7 @@
<div style="float: left; width: 50%"
ondragover="handleDragOver(1, event)"
ondrop="handleDrop(1, event)"
ondragend="handleDragEnd(2, event)">
ondragend="handleDragEnd(1, event)">
<button id="diskload1" class="diskload" title="Load Disk"
onclick="openLoad(1, event);">
<i class="fas fa-folder-open"></i>
@ -112,14 +90,14 @@
<button id="toggle-sound" onclick="toggleSound()" title="Toggle Sound">
<i class="fas fa-volume-off"></i>
</button>
<button id="toggle-printer" onclick="$('#printer').dialog('open')" title="Toggle Printer">
<button id="toggle-printer" onclick="openPrinterModal()" title="Toggle Printer">
<i class="fas fa-print"></i>
</button>
<div style="float: right">
<a class="button" href="about.html" target="_blank" title="About">
<button onclick="window.open('about.html', 'blank')" title="About">
<i class="fas fa-info"></i>
</a>
<button onclick="$('#options').dialog('open')" title="Options">
</button>
<button onclick="openOptions()" title="Options">
<i class="fas fa-cog"></i>
</button>
</div>
@ -143,151 +121,263 @@
<label for="text_input">Text Input</label>
<textarea rows="10" style="width: 99%" id="text_input"></textarea>
<br />
<button onclick="io.setKeyBuffer($('#text_input').val())">
<button onclick="io.setKeyBuffer(document.querySelector('#text_input').innerText)">
Send
</button>
<input type="checkbox" id="buffering" />
<label for="buffering">Buffer</label>
<button style="float: right"
onclick="$('#keyboard').show(); $('#textarea').hide()">
onclick="document.querySelector('#keyboard').style.display = 'block'; document.querySelector('#textarea').style.display = 'none'">
Keyboard
</button>
</div>
</div>
</div>
<div id="loading" title="Loading" style="display: none">
Loading...
</div>
<div id="options" title="Options" style="display: none">
<h3>Type</h3>
<ul>
<li>
<select id="computer_type2" value="apple2plus" onchange="updateCPU()">
<option value="apple2plus">Apple ][+</option>
<option value="apple2">Autostart Apple ][</option>
<option value="original">Apple ][</option>
<option value="apple2j">Apple ][j+</option>
<option value="apple2lc">Apple ][+ (lowercase font)</option>
<option value="apple2pig">Apple ][+ (pig font)</option>
</select>
</li>
<li>
<i>* Reload page to take effect</i>
</li>
</ul>
<h3>CPU</h3>
<ul>
<li>
<input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
<label for="accelerator_toggle">
Accelerated CPU
</label>
</li>
</ul>
<h3>Joystick</h3>
<ul>
<li>
<input type="checkbox" id="disable_mouse"
onclick="updateJoystick()" />
<label for="disable_mouse">
Disable Mouse Joystick
</label>
</li>
<li>
<input type="checkbox" id="flip_x"
onclick="updateJoystick()" />
<label for="flip_x">
Flip X-Axis
</label>
</li>
<li>
<input type="checkbox" id="flip_y"
onclick="updateJoystick()" />
<label for="flip_y">
Flip Y-Axis
</label>
</li>
<li>
<input type="checkbox" id="swap_x_y"
onclick="updateJoystick()" />
<label for="swap_x_y">
Swap X-Y Axis
</label>
</li>
</ul>
<h3>Monitor</h3>
<ul>
<li>
<input type="checkbox" id="green_screen"
onclick="updateScreen()" />
<label for="green_screen">
Green Screen
</label>
</li>
<li>
<input type="checkbox" id="show_scanlines"
onclick="updateScreen()" />
<label for="show_scanlines">
Show Scanlines
</label>
</li>
</ul>
<h3>Sound</h3>
<ul>
<li>
<input type="checkbox" id="enable_sound"
onclick="updateSound()" checked="checked" />
<label for="enable_sound">
Enable (Experimental)
</label>
</li>
</ul>
</div>
<div id="save" title="Save Disk" style="display: none">
<form action="#" onsubmit="return false;">
<b>Save to Browser</b>
<br /><br />
Save Name: <input type="text" name="name" id="save_name"
style="width: 200px" />
</form>
<hr />
<div>
<b>Download to Local Disk</b>
<br /><br />
<a id="local_save_link" class="button">Download</a>
<div class="modal" id="loading-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Loading" >
<header class="modal__header">
<span id="loading-modal-title">
Loading...
</span>
</header>
</div>
</div>
</div>
<div id="manage" title="Manage Disks" style="display: none">
<div class="modal" id="options-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Options">
<header class="modal__header">
<span id="options-modal-title">
Options
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="options-modal-content">
<h3>Type</h3>
<ul>
<li>
<select id="computer_type2" value="apple2plus" onchange="updateCPU()">
<option value="apple2plus">Apple ][+</option>
<option value="apple2">Autostart Apple ][</option>
<option value="original">Apple ][</option>
<option value="apple2j">Apple ][j+</option>
<option value="apple2lc">Apple ][+ (lowercase font)</option>
<option value="apple2pig">Apple ][+ (pig font)</option>
</select>
</li>
<li>
<i>* Reload page to take effect</i>
</li>
</ul>
<h3>CPU</h3>
<ul>
<li>
<input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
<label for="accelerator_toggle">
Accelerated CPU
</label>
</li>
</ul>
<h3>Joystick</h3>
<ul>
<li>
<input type="checkbox" id="disable_mouse"
onclick="updateJoystick()" />
<label for="disable_mouse">
Disable Mouse Joystick
</label>
</li>
<li>
<input type="checkbox" id="flip_x"
onclick="updateJoystick()" />
<label for="flip_x">
Flip X-Axis
</label>
</li>
<li>
<input type="checkbox" id="flip_y"
onclick="updateJoystick()" />
<label for="flip_y">
Flip Y-Axis
</label>
</li>
<li>
<input type="checkbox" id="swap_x_y"
onclick="updateJoystick()" />
<label for="swap_x_y">
Swap X-Y Axis
</label>
</li>
</ul>
<h3>Monitor</h3>
<ul>
<li>
<input type="checkbox" id="green_screen"
onclick="updateScreen()" />
<label for="green_screen">
Green Screen
</label>
</li>
<li>
<input type="checkbox" id="show_scanlines"
onclick="updateScreen()" />
<label for="show_scanlines">
Show Scanlines
</label>
</li>
</ul>
<h3>Sound</h3>
<ul>
<li>
<input type="checkbox" id="enable_sound"
onclick="updateSound()" checked="checked" />
<label for="enable_sound">
Enable (Experimental)
</label>
</li>
</ul>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
<div id="http_load" title="Load URL" style="display: none">
<form action="#">
<input type="text" id="http_url" style="width: 500px"/>
</form>
<div class="modal" id="save-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Save Disk">
<header class="modal__header">
<span id="save-modal-title">
Save Disk
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="save-modal-content">
<form action="#" onsubmit="return false;">
<b>Save to Browser</b>
<br /><br />
Save Name: <input type="text" name="name" id="save_name"
style="width: 200px" />
</form>
<hr />
<div>
<b>Download to Local Disk</b>
<br /><br />
<a id="local_save_link" class="button">Download</a>
</div>
</main>
<footer class="modal__footer">
<button class="modal__btn" onclick="doSave()" aria-label="Save disk locally">Save</button>
</footer>
</div>
</div>
</div>
<div id="load" title="Load Disk" style="display: none">
<table>
<tr>
<td>
<select id="category_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectCategory(event)" >
</select>
</td>
<td>
<select id="disk_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectDisk(event)"
ondblclick="clickDisk(event)">
</select>
</td>
</tr>
</table>
<form action="#">
<input type="file" id="local_file" />
</form>
<div class="modal" id="manage-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="manage-modal-title">
Manage Local Saves
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="manage-modal-content">
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
</footer>
</div>
</div>
</div>
<div id="printer" title="Printer" style="display: none">
<div class="paper">
<div class="modal" id="http-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="http-modal-title">
Load URL
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="http-modal-content">
<form action="#">
<input type="text" id="http_url" style="width: 500px"/>
</form>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="load-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="load-modal-title">
Load Disk
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="load-modal-content">
<table>
<tr>
<td>
<select id="category_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectCategory(event)" >
</select>
</td>
<td>
<select id="disk_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectDisk(event)"
ondblclick="clickDisk(event)">
</select>
</td>
</tr>
</table>
<form action="#">
<input type="file" id="local_file" />
</form>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Cancel</button>
<button class="modal__btn" onclick="doLoad()" aria-label="Open the selected disk">Open</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="printer-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Printer">
<header class="modal__header">
<span class="modal__title" id="printer-modal-title">
Printer
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="printer-modal-content">
<div class="paper"></div>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
<script src="dist/main2.js"></script>

View File

@ -27,26 +27,8 @@
<link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
<link rel="shortcut icon" href="img/logoicon.png" />
<link rel="stylesheet" type="text/css" href="css/apple2.css" />
<link rel="stylesheet" type="text/css"
href="//code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
<!-- white text in controls -->
<style type="text/css">
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
color: white;
}
.ui-state-default .ui-icon {
background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
}
</style>
<!-- jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<!-- Disk Index -->
<script type="text/javascript" src="json/disks/index.js"></script>
@ -57,9 +39,6 @@
ondragend="handleDragEnd(0, event)">
<div class="outer">
<div id="header">
<a href="//www.w3.org/html/logo/" target="_blank">
<img src="//www.w3.org/html/logo/badge/html5-badge-h-solo.png" style="float: right" />
</a>
<a href="about.html" target="_blank">
<img src="img/badge2e.png" id="badge" />
</a>
@ -114,14 +93,14 @@
<button id="toggle-sound" onclick="toggleSound()">
<i class="fas fa-volume-off"></i>
</button>
<button id="toggle-printer" onclick="$('#printer').dialog('open')" title="Toggle Printer">
<button id="toggle-printer" onclick="openPrinterModal()" title="Toggle Printer">
<i class="fas fa-print"></i>
</button>
<div style="float: right">
<a class="button" href="about.html" target="_blank" title="About">
<button onclick="window.open('about.html', 'blank')" title="About">
<i class="fas fa-info"></i>
</a>
<button onclick="$('#options').dialog('open')">
</button>
<button onclick="openOptions()">
<i class="fas fa-cog"></i>
</button>
</div>
@ -134,138 +113,249 @@
<div id="keyboard"></div>
</div>
</div>
<div id="loading" title="Loading" style="display: none">
Loading...
</div>
<div id="options" title="Options" style="display: none">
<h3>Type</h3>
<ul>
<li>
<select id="computer_type2e" value="apple2enh" onchange="updateCPU()">
<option value="apple2enh">Enhanced Apple //e</option>
<option value="apple2e">Apple //e</option>
<option value="apple2rm">Enhanced Apple //e (Reactive Micro)</option>
</select>
</li>
<li>
<i>* Reload page to take effect</i>
</li>
</ul>
<h3>CPU</h3>
<ul>
<li>
<input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
<label for="accelerator_toggle">
Accelerated CPU
</label>
</li>
</ul>
<h3>Joystick</h3>
<ul>
<li>
<input type="checkbox" id="disable_mouse"
onclick="updateJoystick()" />
<label for="disable_mouse">
Disable Mouse Joystick
</label>
</li>
<li>
<input type="checkbox" id="flip_x"
onclick="updateJoystick()" />
<label for="flip_x">
Flip X-Axis
</label>
</li>
<li>
<input type="checkbox" id="flip_y"
onclick="updateJoystick()" />
<label for="flip_y">
Flip Y-Axis
</label>
</li>
<li>
<input type="checkbox" id="swap_x_y"
onclick="updateJoystick()" />
<label for="swap_x_y">
Swap X-Y Axis
</label>
</li>
</ul>
<h3>Monitor</h3>
<ul>
<li>
<input type="checkbox" id="green_screen"
onclick="updateScreen()" />
<label for="green_screen">
Green Screen
</label>
</li>
<li>
<input type="checkbox" id="show_scanlines"
onclick="updateScreen()" />
<label for="show_scanlines">
Show Scanlines
</label>
</li>
</ul>
<h3>Sound</h3>
<ul>
<li>
<input type="checkbox" id="enable_sound"
onclick="updateSound()" checked="checked" />
<label for="enable_sound">
Enable (Experimental)
</label>
</li>
</ul>
</div>
<div id="save" title="Save Disk" style="display: none">
<form action="#" onsubmit="return false;">
<b>Save to Browser</b>
<br /><br />
Save Name: <input type="text" name="name" id="save_name"
style="width: 200px" />
</form>
<hr />
<div>
<b>Download to Local Disk</b>
<br /><br />
<a id="local_save_link" class="button">Download</a>
<div class="modal" id="loading-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Loading" >
<header class="modal__header">
<span id="loading-modal-title">
Loading...
</span>
</header>
</div>
</div>
</div>
<div id="manage" title="Manage Disks" style="display: none">
</div>
<div id="http_load" title="Load URL" style="display: none">
<form action="#">
<input type="text" id="http_url" style="width: 500px"/>
</form>
</div>
<div id="load" title="Load Disk" style="display: none">
<table>
<tr>
<td>
<select id="category_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectCategory(event)" >
</select>
</td>
<td>
<select id="disk_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectDisk(event)"
ondblclick="clickDisk(event)">
</select>
</td>
</tr>
</table>
<form action="#">
<input type="file" id="local_file" />
</form>
</div>
<div id="printer" title="Printer" style="display: none">
<div class="paper">
<div class="modal" id="options-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Options">
<header class="modal__header">
<span id="options-modal-title">
Options
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="options-modal-content">
<h3>Type</h3>
<ul>
<li>
<select id="computer_type2e" value="apple2enh" onchange="updateCPU()">
<option value="apple2enh">Enhanced Apple //e</option>
<option value="apple2e">Apple //e</option>
<option value="apple2rm">Enhanced Apple //e (Reactive Micro)</option>
</select>
</li>
<li>
<i>* Reload page to take effect</i>
</li>
</ul>
<h3>CPU</h3>
<ul>
<li>
<input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
<label for="accelerator_toggle">
Accelerated CPU
</label>
</li>
</ul>
<h3>Joystick</h3>
<ul>
<li>
<input type="checkbox" id="disable_mouse"
onclick="updateJoystick()" />
<label for="disable_mouse">
Disable Mouse Joystick
</label>
</li>
<li>
<input type="checkbox" id="flip_x"
onclick="updateJoystick()" />
<label for="flip_x">
Flip X-Axis
</label>
</li>
<li>
<input type="checkbox" id="flip_y"
onclick="updateJoystick()" />
<label for="flip_y">
Flip Y-Axis
</label>
</li>
<li>
<input type="checkbox" id="swap_x_y"
onclick="updateJoystick()" />
<label for="swap_x_y">
Swap X-Y Axis
</label>
</li>
</ul>
<h3>Monitor</h3>
<ul>
<li>
<input type="checkbox" id="green_screen"
onclick="updateScreen()" />
<label for="green_screen">
Green Screen
</label>
</li>
<li>
<input type="checkbox" id="show_scanlines"
onclick="updateScreen()" />
<label for="show_scanlines">
Show Scanlines
</label>
</li>
</ul>
<h3>Sound</h3>
<ul>
<li>
<input type="checkbox" id="enable_sound"
onclick="updateSound()" checked="checked" />
<label for="enable_sound">
Enable (Experimental)
</label>
</li>
</ul>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
<script type="text/javascript" src="dist/main2e.js"></script>
<div class="modal" id="save-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Save Disk">
<header class="modal__header">
<span id="save-modal-title">
Save Disk
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="save-modal-content">
<form action="#" onsubmit="return false;">
<b>Save to Browser</b>
<br /><br />
Save Name: <input type="text" name="name" id="save_name"
style="width: 200px" />
</form>
<hr />
<div>
<b>Download to Local Disk</b>
<br /><br />
<a id="local_save_link" class="button">Download</a>
</div>
</main>
<footer class="modal__footer">
<button class="modal__btn" onclick="doSave()" aria-label="Save disk locally">Save</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="manage-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="manage-modal-title">
Manage Local Saves
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="manage-modal-content">
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="http-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="http-modal-title">
Load URL
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="http-modal-content">
<form action="#">
<input type="text" id="http_url" style="width: 500px"/>
</form>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="load-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
<header class="modal__header">
<span class="modal__title" id="load-modal-title">
Load Disk
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="load-modal-content">
<table>
<tr>
<td>
<select id="category_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectCategory(event)" >
</select>
</td>
<td>
<select id="disk_select" multiple="multiple"
class="ui-widget ui-state-default"
onchange="selectDisk(event)"
ondblclick="clickDisk(event)">
</select>
</td>
</tr>
</table>
<form action="#">
<input type="file" id="local_file" />
</form>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Cancel</button>
<button class="modal__btn" onclick="doLoad()" aria-label="Open the selected disk">Open</button>
</footer>
</div>
</div>
</div>
<div class="modal" id="printer-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Printer">
<header class="modal__header">
<span class="modal__title" id="printer-modal-title">
Printer
</span>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
</button>
</header>
<main class="modal__content" id="printer-modal-content">
<div class="paper"></div>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
<script src="dist/main2e.js"></script>
</body>
</html>

View File

@ -216,11 +216,104 @@ canvas {
color: #000;
}
#load select {
#load-modal select {
width: 250px;
height: 300px;
}
.modal {
display: none;
}
.modal.is-open {
display: block;
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.modal__container {
background-color: #c4c1a0;
padding: 10px;
max-height: 100vh;
border-radius: 4px;
overflow-y: auto;
box-sizing: border-box;
}
.modal__header {
display: flex;
font-size: 14px;
justify-content: space-between;
align-items: center;
background: #44372C;
color: #fff;
padding: 5px 11px;
border: 1px outset #66594E;
border-radius: 3px;
}
.modal__title {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
color: #fff;
box-sizing: border-box;
}
.modal__close, .modal__close:active, .modal__close:hover {
background: transparent;
padding: 3px;
}
.modal__header .modal__close:before {
content: "\2715";
}
.modal__content {
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.5;
color: #000;
}
.modal__footer {
text-align: right;
}
button {
background: #44372C;
color: #fff;
padding: 5px 11px;
border: 1px outset #66594E;
border-radius: 3px;
}
button:hover {
background-color: #55473D;
border: 1px outset #66594E;
}
button:active {
background-color: #22150A;
border: 1px outset #44372C;
}
button:focus {
outline: none;
}
#keyboard {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -472,7 +565,7 @@ canvas {
width: 100%;
}
.standalone #header, .standalone #social {
.standalone #header {
display: none;
}
@ -480,11 +573,25 @@ canvas {
font-family: courier;
}
#options {
line-height: 1.75em;
height: auto !important;
#options-modal {
width: 300px;
font-size: 11px;
line-height: 1.75em;
}
#options li {
#options-modal h3 {
font-size: 13px;
}
#options-modal li {
list-style-type: none;
}
.paper {
width: 640px;
height: 480px;
overflow: auto;
background-color: white;
color: black;
font-family: monospace;
}

View File

@ -12,6 +12,8 @@
import { base64_decode, base64_encode } from '../base64';
import { bytify, debug } from '../util';
export const DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
export default function DiskII(io, slot, callbacks)
{
slot = slot || 6;

View File

@ -1,3 +1,5 @@
import MicroModal from 'micromodal';
import Apple2IO from './apple2io';
import ApplesoftDump from './applesoft/decompiler';
import { HiresPage, LoresPage, VideoModes } from './canvas';
@ -7,12 +9,13 @@ import RAM from './ram';
import { debug, gup, hup } from './util';
import Audio from './ui/audio';
import DriveLights from './ui/drive_lights';
import { gamepad, configGamepad, initGamepad, processGamepad } from './ui/gamepad';
import KeyBoard from './ui/keyboard';
import Printer from './ui/printer';
import Tape from './ui/tape';
import Tape, { TAPE_TYPES } from './ui/tape';
import DiskII from './cards/disk2';
import DiskII, { DISK_TYPES } from './cards/disk2';
import LanguageCard from './cards/langcard';
import Parallel from './cards/parallel';
import RAMFactor from './cards/ramfactor';
@ -46,86 +49,11 @@ var TRACE = false;
var MAX_TRACE = 256;
var trace = [];
/*
* Page viewer
*/
/*
function PageDebug(page)
{
var _page = page;
function _init() {
var r, c;
var row = $('<tr />').appendTo('#page' + toHex(_page));
$('<th>\\</th>').appendTo(row);
for (c = 0; c < 16; c++) {
$('<th>' + toHex(c) + '</th>').appendTo(row);
}
for (r = 0; r < 16; r++) {
row = $('<tr />').appendTo('#page' + toHex(_page));
$('<th>' + toHex(r * 16) + '</th>').appendTo(row);
for (c = 0; c < 16; c++) {
$('<td>--</td>').appendTo(row).attr('id', 'page' + toHex(_page) + '-' + toHex(r * 16 + c));
}
}
}
_init();
return {
start: function() { return _page; },
end: function() { return _page; },
read: null,
write: function(page, off, val) {
$('#page' + toHex(page) + '-' + toHex(off)).text(toHex(val));
}
};
}
*/
var disk_categories = {'Local Saves': []};
var disk_sets = {};
var disk_cur_name = [];
var disk_cur_cat = [];
function DriveLights()
{
return {
driveLight: function(drive, on) {
$('#disk' + drive).css('background-image',
on ? 'url(css/red-on-16.png)' :
'url(css/red-off-16.png)');
},
dirty: function() {
// $('#disksave' + drive).button('option', 'disabled', !dirty);
},
label: function(drive, label) {
if (label) {
$('#disklabel' + drive).text(label);
}
return $('#disklabel' + drive).text();
},
getState: function() {
return {
disks: [
this.label(1),
this.label(2)
]
};
},
setState: function(state) {
if (state && state.disks) {
this.label(1, state.disks[0].label);
this.label(2, state.disks[1].label);
}
}
};
}
var DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
var TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
var _currentDrive = 1;
window.openLoad = function(drive, event)
@ -135,9 +63,10 @@ window.openLoad = function(drive, event)
openLoadHTTP(drive);
} else {
if (disk_cur_cat[drive]) {
$('#category_select').val(disk_cur_cat[drive]).change();
document.querySelector('#category_select').value = disk_cur_cat[drive];
window.selectCategory();
}
$('#load').dialog('open');
MicroModal.show('load-modal');
}
};
@ -147,17 +76,17 @@ window.openSave = function(drive, event)
var mimetype = 'application/octet-stream';
var data = disk2.getBinary(drive);
var a = $('#local_save_link');
var a = document.querySelector('#local_save_link');
var blob = new Blob([data], { 'type': mimetype });
a.attr('href', window.URL.createObjectURL(blob));
a.attr('download', drivelights.label(drive) + '.dsk');
a.href = window.URL.createObjectURL(blob);
a.download = drivelights.label(drive) + '.dsk';
if (event.metaKey) {
dumpDisk(drive);
} else {
$('#save_name').val(drivelights.label(drive));
$('#save').dialog('open');
document.querySelector('#save_name').value = drivelights.label(drive);
MicroModal.show('save-modal');
}
};
@ -213,32 +142,29 @@ var loading = false;
function loadAjax(drive, url) {
loading = true;
$('#loading').dialog('open');
MicroModal.show('loading-modal');
$.ajax({
url: url,
dataType: 'json',
modifiedSince: true,
error: function(xhr, status, error) {
alert(error || status);
$('#loading').dialog('close');
loading = false;
},
success: function(data) {
if (data.type == 'binary') {
loadBinary(drive, data);
} else if ($.inArray(data.type, DISK_TYPES) >= 0) {
loadDisk(drive, data);
}
initGamepad(data.gamepad);
$('#loading').dialog('close');
loading = false;
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
if (data.type == 'binary') {
loadBinary(drive, data);
} else if (DISK_TYPES.includes(data.type)) {
loadDisk(drive, data);
}
initGamepad(data.gamepad);
MicroModal.close('loading-modal');
loading = false;
}).catch(function(error) {
window.alert(error || status);
MicroModal.close('loading-modal');
loading = false;
});
}
function doLoad() {
var urls = $('#disk_select').val(), url;
window.doLoad = function doLoad() {
MicroModal.close('load-modal');
var urls = document.querySelector('#disk_select').value, url;
if (urls && urls.length) {
if (typeof(urls) == 'string') {
url = urls;
@ -247,12 +173,12 @@ function doLoad() {
}
}
var files = $('#local_file').prop('files');
var files = document.querySelector('#local_file').files;
if (files.length == 1) {
doLoadLocal(_currentDrive, files[0]);
} else if (url) {
var filename;
$('#load').dialog('close');
MicroModal.close('load-modal');
if (url.substr(0,6) == 'local:') {
filename = url.substr(6);
if (filename == '__manage') {
@ -270,16 +196,15 @@ function doLoad() {
var parts = document.location.hash.split('|');
parts[_currentDrive - 1] = filename;
document.location.hash = parts.join('|');
loadAjax(_currentDrive, url);
}
}
}
};
function doSave() {
var name = $('#save_name').val();
window.doSave = function doSave() {
var name = document.querySelector('#save_name').value;
saveLocalStorage(_currentDrive, name);
$('#save').dialog('close');
}
MicroModal.close('save-modal');
};
window.doDelete = function(name) {
if (window.confirm('Delete ' + name + '?')) {
@ -290,15 +215,15 @@ window.doDelete = function(name) {
function doLoadLocal(drive, file) {
var parts = file.name.split('.');
var ext = parts[parts.length - 1].toLowerCase();
if ($.inArray(ext, DISK_TYPES) >= 0) {
if (DISK_TYPES.includes(ext)) {
doLoadLocalDisk(drive, file);
} else if ($.inArray(ext, TAPE_TYPES) >= 0) {
tape.doLoadLocalTape(file, function() {
$('#load').dialog('close');
MicroModal.close('load-modal');
});
} else {
window.alert('Unknown file type: ' + ext);
$('#load').dialog('close');
MicroModal.close('load-modal');
}
}
@ -310,7 +235,7 @@ function doLoadLocalDisk(drive, file) {
var name = parts.join('.');
if (disk2.setBinary(drive, name, ext, this.result)) {
drivelights.label(drive, name);
$('#load').dialog('close');
MicroModal.close('load-modal');
initGamepad();
}
};
@ -318,7 +243,7 @@ function doLoadLocalDisk(drive, file) {
}
function doLoadHTTP(drive, _url) {
var url = _url || $('#http_url').val();
var url = _url || document.querySelector('#http_url').value;
if (url) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
@ -332,7 +257,7 @@ function doLoadHTTP(drive, _url) {
var name = decodeURIComponent(fileParts.join('.'));
if (disk2.setBinary(drive, name, ext, req.response)) {
drivelights.label(drive, name);
$('#http_load').dialog('close');
MicroModal.close('http-modal');
initGamepad();
}
};
@ -342,11 +267,11 @@ function doLoadHTTP(drive, _url) {
function openLoadHTTP(drive) {
_currentDrive = parseInt(drive, 10);
$('#http_load').dialog('open');
MicroModal.show('http-modal');
}
function openManage() {
$('#manage').dialog('open');
MicroModal.show('manage-modal');
}
var prefs = new Prefs();
@ -423,7 +348,7 @@ var io = new Apple2IO(cpu, vm);
var keyboard = new KeyBoard(cpu, io);
var audio = new Audio(io);
var tape = new Tape(io);
var printer = new Printer($('#printer .paper'));
var printer = new Printer('#printer-modal .paper');
var lc = new LanguageCard(io, 0, rom);
var parallel = new Parallel(io, 1, printer);
@ -460,11 +385,11 @@ function updateKHz() {
if (window.showFPS) {
delta = renderedFrames - lastFrames;
var fps = parseInt(delta/(ms/1000), 10);
$('#khz').text( fps + 'fps');
document.querySelector('#khz').innerText = fps + 'fps';
} else {
delta = cycles - lastCycles;
var khz = parseInt(delta/ms);
$('#khz').text( khz + 'KHz');
document.querySelector('#khz').innerText = khz + 'KHz';
}
startTime = now;
@ -473,13 +398,15 @@ function updateKHz() {
}
window.updateSound = function updateSound() {
var on = $('#enable_sound').prop('checked');
var label = $('#toggle-sound i');
var on = document.querySelector('#enable_sound').checked;
var label = document.querySelector('#toggle-sound i');
audio.enable(on);
if (on) {
label.removeClass('fa-volume-off').addClass('fa-volume-up');
label.classList.remove('fa-volume-off');
label.classList.add('fa-volume-up');
} else {
label.removeClass('fa-volume-up').addClass('fa-volume-off');
label.classList.remove('fa-volume-up');
label.classList.add('fa-volume-off');
}
};
@ -518,7 +445,7 @@ var accelerated = false;
window.updateCPU = function updateCPU()
{
accelerated = $('#accelerator_toggle').prop('checked');
accelerated = document.querySelector('#accelerator_toggle').checked;
kHz = accelerated ? 4092 : 1023;
io.updateHz(kHz * 1000);
if (runTimer) {
@ -686,29 +613,31 @@ function loadBinary(bin) {
}
window.selectCategory = function() {
$('#disk_select').empty();
var cat = disk_categories[$('#category_select').val()];
document.querySelector('#disk_select').innerHTML = '';
var cat = disk_categories[document.querySelector('#category_select').value];
if (cat) {
for (var idx = 0; idx < cat.length; idx++) {
var file = cat[idx], name = file.name;
if (file.disk) {
name += ' - ' + file.disk;
}
var option = $('<option />').val(file.filename).text(name)
.appendTo('#disk_select');
var option = document.createElement('option');
option.value = file.filename;
option.innerText = name;
document.querySelector('#disk_select').append(option);
if (disk_cur_name[_currentDrive] == name) {
option.attr('selected', 'selected');
option.selected = true;
}
}
}
};
window.selectDisk = function() {
$('#local_file').val('');
document.querySelector('#local_file').value = '';
};
window.clickDisk = function() {
doLoad();
window.doLoad();
};
function loadDisk(drive, disk) {
@ -742,7 +671,7 @@ function updateLocalStorage() {
}
cat = disk_categories['Local Saves'] = [];
$('#manage').empty();
document.querySelector('#manage-modal-content').innerHTML = '';
names.forEach(function(name) {
cat.push({
@ -750,13 +679,12 @@ function updateLocalStorage() {
'name': name,
'filename': 'local:' + name
});
$('#manage').append(
document.querySelector('#manage-modal-content').innerHTML =
'<span class="local_save">' +
name +
' <a href="#" onclick="doDelete(\'' +
name +
'\')">Delete</a><br /></span>'
);
'\')">Delete</a><br /></span>';
});
cat.push({
'category': 'Local Saves',
@ -832,9 +760,17 @@ function _keydown(evt) {
}
if (evt.keyCode === 112) { // F1 - Reset
cpu.reset();
evt.preventDefault(); // prevent launching help
} else if (evt.keyCode === 113) { // F2 - Full Screen
var elem = document.getElementById('screen');
if (document.webkitCancelFullScreen) {
if (evt.shiftKey) { // Full window, but not full screen
document.querySelector('#display').classList.toggle('zoomwindow');
document.querySelector('#display > div').classList.toggle('overscan', 'flexbox-centering');
document.querySelector('#screen').classList.toggle('maxhw');
document.querySelector('#header').classList.toggle('hidden');
document.querySelector('.inset').classList.toggle('hidden');
document.querySelector('#reset').classList.toggle('hidden');
} else if (document.webkitCancelFullScreen) {
if (document.webkitIsFullScreen) {
document.webkitCancelFullScreen();
} else {
@ -876,8 +812,8 @@ function _keyup(evt) {
}
window.updateScreen = function updateScreen() {
var green = $('#green_screen').prop('checked');
var scanlines = $('#show_scanlines').prop('checked');
var green = document.querySelector('#green_screen').checked;
var scanlines = document.querySelector('#show_scanlines').checked;
vm.green(green);
vm.scanlines(scanlines);
@ -889,10 +825,10 @@ var flipY = false;
var swapXY = false;
window.updateJoystick = function() {
disableMouseJoystick = $('#disable_mouse').prop('checked');
flipX = $('#flip_x').prop('checked');
flipY = $('#flip_y').prop('checked');
swapXY = $('#swap_x_y').prop('checked');
disableMouseJoystick = document.querySelector('#disable_mouse').checked;
flipX = document.querySelector('#flip_x').checked;
flipY = document.querySelector('#flip_y').checked;
swapXY = document.querySelector('#swap_x_y').checked;
configGamepad(flipX, flipY);
if (disableMouseJoystick) {
@ -907,10 +843,10 @@ function _mousemove(evt) {
return;
}
var s = $('#screen');
var offset = s.offset();
var x = (evt.pageX - offset.left) / s.width(),
y = (evt.pageY - offset.top) / s.height(),
var s = document.querySelector('#screen');
var offset = { top: s.clientTop, left: s.clientLeft };
var x = (evt.pageX - offset.left) / s.clientWidth,
y = (evt.pageY - offset.top) / s.clientHeight,
z = x;
if (swapXY) {
@ -923,79 +859,87 @@ function _mousemove(evt) {
}
window.pauseRun = function() {
var label = $('#pause-run i');
var label = document.querySelector('#pause-run i');
if (paused) {
run();
label.removeClass('fa-play').addClass('fa-pause');
label.classList.remove('fa-play');
label.classList.add('fa-pause');
} else {
stop();
label.removeClass('fa-pause').addClass('fa-play');
label.classList.remove('fa-pause');
label.classList.add('fa-play');
}
paused = !paused;
};
window.toggleSound = function() {
var enableSound = $('#enable_sound');
enableSound.prop('checked', !enableSound.prop('checked'));
var enableSound = document.querySelector('#enable_sound');
enableSound.checked = !enableSound.checked;
window.updateSound();
};
$(function() {
hashtag = document.location.hash;
window.openOptions = function () {
MicroModal.show('options-modal');
};
$('button,input[type=button],a.button').button().focus(function() {
// Crazy hack required by Chrome
var self = this;
window.setTimeout(function() {
self.blur();
}, 1);
});
window.openPrinterModal = function () {
MicroModal.show('printer-modal');
};
MicroModal.init();
document.addEventListener('DOMContentLoaded', function() {
hashtag = document.location.hash;
/*
* Input Handling
*/
$(window)
.keydown(_keydown)
.keyup(_keyup)
.mousedown(function() { audio.autoStart(); });
window.addEventListener('keydown', _keydown);
window.addEventListener('keyup', _keyup);
window.addEventListener('mousedown', function() { audio.autoStart(); });
$('canvas')
.mousedown(function(evt) {
document.querySelectorAll('canvas').forEach(function(canvas) {
canvas.addEventListener('mousedown', function(evt) {
if (!gamepad) {
io.buttonDown(evt.which == 1 ? 0 : 1);
}
evt.preventDefault();
})
.mouseup(function(evt) {
});
canvas.addEventListener('mouseup', function(evt) {
if (!gamepad) {
io.buttonUp(evt.which == 1 ? 0 : 1);
}
})
.bind('contextmenu', function(evt) { evt.preventDefault(); });
});
});
$('body').mousemove(_mousemove);
document.body.addEventListener('mousemove', _mousemove);
$('input,textarea')
.focus(function() { focused = true; })
.blur(function() { focused = false; });
document.querySelectorAll('input,textarea').forEach(function(input) {
input.addEventListener('input', function() { focused = true; });
input.addEventListener('blur', function() { focused = false; });
});
keyboard.create('#keyboard');
if (prefs.havePrefs()) {
$('#options input[type=checkbox]').each(function() {
var val = prefs.readPref(this.id);
if (val)
this.checked = JSON.parse(val);
}).change(function() {
prefs.writePref(this.id, JSON.stringify(this.checked));
document.querySelectorAll('#options-modal input[type=checkbox]').forEach(function(el) {
var val = prefs.readPref(el.id);
if (val) {
el.checked = JSON.parse(val);
}
el.addEventListener('change', function() {
prefs.writePref(el.id, JSON.stringify(el.checked));
});
});
$('#options select').each(function() {
var val = prefs.readPref(this.id);
if (val)
this.value = val;
}).change(function() {
prefs.writePref(this.id, this.value);
document.querySelectorAll('#options-modal select').forEach(function(el) {
var val = prefs.readPref(el.id);
if (val) {
el.value = val;
}
el.addEventListener('change', function() {
prefs.writePref(el.id, el.value);
});
});
}
@ -1005,54 +949,12 @@ $(function() {
window.updateScreen();
window.updateCPU();
var cancel = function() { $(this).dialog('close'); };
$('#loading').dialog({ autoOpen: false, modal: true });
$('#options').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Close': cancel }
});
$('#load').dialog({
autoOpen: false,
modal: true,
width: 540,
buttons: {'Cancel': cancel, 'Load': doLoad }
});
$('#save').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Cancel': cancel, 'Save': doSave }
});
$('#manage').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Close': cancel }
});
$('#printer').dialog({
autoOpen: false,
modal: true,
resizeable: false,
width: 570,
buttons: {
'Clear': printer.clear,
'Close': cancel
}
});
$('#http_load').dialog({
autoOpen: false,
modal: true,
width: 530,
buttons: {'Cancel': cancel, 'OK': doLoadHTTP }
});
if (window.localStorage !== undefined) {
$('.disksave').show();
document.querySelectorAll('.disksave').forEach(function (el) { el.style.display = 'inline-block';});
}
var oldcat = '';
var option;
for (var idx = 0; idx < window.disk_index.length; idx++) {
var file = window.disk_index[idx];
var cat = file.category;
@ -1061,7 +963,11 @@ $(function() {
continue;
}
if (cat != oldcat) {
$('<option />').val(cat).text(cat).appendTo('#category_select');
option = document.createElement('option');
option.value = cat;
option.innerText = cat;
document.querySelector('#category_select').append(option);
disk_categories[cat] = [];
oldcat = cat;
}
@ -1073,7 +979,9 @@ $(function() {
disk_sets[name].push(file);
}
}
$('<option/>').text('Local Saves').appendTo('#category_select');
option = document.createElement('option');
option.innerText = 'Local Saves';
document.querySelector('#category_select').append(option);
updateLocalStorage();
initGamepad();
@ -1085,23 +993,21 @@ $(function() {
processHash(hash);
}
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('select').removeAttr('multiple').css('height', 'auto');
}
if (navigator.standalone) {
$('body').addClass('standalone');
document.body.classList.add('standalone');
}
$('.key-REPT').click(function() {
$('#keyboard').hide();
$('#textarea').show();
$('#text_input').focus();
var reptKey = document.querySelector('.key-REPT');
reptKey.addEventListener('click', function() {
document.querySelector('#keyboard').style.display = 'none';
document.querySelector('#textarea').style.display = 'block';
document.querySelector.focus();
});
$('#text_input').keydown(function() {
focused = $('#buffering').prop('checked');
}).keyup(function() {
focused = $('#buffering').prop('checked');
document.querySelector('#text_input').addEventListener('keydown', function() {
focused = document.querySelector('#buffering').checked;
});
document.querySelector('#text_input').addEventListener('keyup', function() {
focused = document.querySelector('#buffering').checked;
});
run();

View File

@ -1,3 +1,5 @@
import MicroModal from 'micromodal';
import Apple2IO from './apple2io';
import ApplesoftDump from './applesoft/decompiler';
import { HiresPage, LoresPage, VideoModes } from './canvas';
@ -7,12 +9,13 @@ import Prefs from './prefs';
import { debug, gup, hup } from './util';
import Audio from './ui/audio';
import DriveLights from './ui/drive_lights';
import { gamepad, configGamepad, initGamepad, processGamepad } from './ui/gamepad';
import KeyBoard from './ui/keyboard';
import Printer from './ui/printer';
import Tape from './ui/tape';
import Tape, { TAPE_TYPES } from './ui/tape';
import DiskII from './cards/disk2';
import DiskII, { DISK_TYPES } from './cards/disk2';
import Parallel from './cards/parallel';
import RAMFactor from './cards/ramfactor';
import Thunderclock from './cards/thunderclock';
@ -41,86 +44,11 @@ var TRACE = false;
var MAX_TRACE = 256;
var trace = [];
/*
* Page viewer
*/
/*
function PageDebug(page)
{
var _page = page;
function _init() {
var r, c;
var row = $('<tr />').appendTo('#page' + toHex(_page));
$('<th>\\</th>').appendTo(row);
for (c = 0; c < 16; c++) {
$('<th>' + toHex(c) + '</th>').appendTo(row);
}
for (r = 0; r < 16; r++) {
row = $('<tr />').appendTo('#page' + toHex(_page));
$('<th>' + toHex(r * 16) + '</th>').appendTo(row);
for (c = 0; c < 16; c++) {
$('<td>--</td>').appendTo(row).attr('id', 'page' + toHex(_page) + '-' + toHex(r * 16 + c));
}
}
}
_init();
return {
start: function() { return _page; },
end: function() { return _page; },
read: null,
write: function(page, off, val) {
$('#page' + toHex(page) + '-' + toHex(off)).text(toHex(val));
}
};
}
*/
var disk_categories = {'Local Saves': []};
var disk_sets = {};
var disk_cur_name = [];
var disk_cur_cat = [];
function DriveLights()
{
return {
driveLight: function(drive, on) {
$('#disk' + drive).css('background-image',
on ? 'url(css/red-on-16.png)' :
'url(css/red-off-16.png)');
},
dirty: function() {
// $('#disksave' + drive).button('option', 'disabled', !dirty);
},
label: function(drive, label) {
if (label) {
$('#disklabel' + drive).text(label);
}
return $('#disklabel' + drive).text();
},
getState: function() {
return {
disks: [
this.label(1),
this.label(2)
]
};
},
setState: function(state) {
if (state && state.disks) {
this.label(1, state.disks[0].label);
this.label(2, state.disks[1].label);
}
}
};
}
var DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
var TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
var _currentDrive = 1;
window.openLoad = function(drive, event)
@ -130,9 +58,10 @@ window.openLoad = function(drive, event)
openLoadHTTP(drive);
} else {
if (disk_cur_cat[drive]) {
$('#category_select').val(disk_cur_cat[drive]).change();
document.querySelector('#category_select').value = disk_cur_cat[drive];
window.selectCategory();
}
$('#load').dialog('open');
MicroModal.show('load-modal');
}
};
@ -142,17 +71,17 @@ window.openSave = function(drive, event)
var mimetype = 'application/octet-stream';
var data = disk2.getBinary(drive);
var a = $('#local_save_link');
var a = document.querySelector('#local_save_link');
var blob = new Blob([data], { 'type': mimetype });
a.attr('href', window.URL.createObjectURL(blob));
a.attr('download', drivelights.label(drive) + '.dsk');
a.href = window.URL.createObjectURL(blob);
a.download = drivelights.label(drive) + '.dsk';
if (event.metaKey) {
dumpDisk(drive);
} else {
$('#save_name').val(drivelights.label(drive));
$('#save').dialog('open');
document.querySelector('#save_name').value = drivelights.label(drive);
MicroModal.show('save-modal');
}
};
@ -191,6 +120,16 @@ window.handleDrop = function(drive, event) {
} else if (dt.files.length == 2) {
doLoadLocal(1, dt.files[0]);
doLoadLocal(2, dt.files[1]);
} else {
for (var idx = 0; idx < dt.items.length; idx++) {
if (dt.items[idx].type === 'text/uri-list') {
dt.items[idx].getAsString(function(url) {
var parts = document.location.hash.split('|');
parts[drive - 1] = url;
document.location.hash = parts.join('|');
});
}
}
}
};
@ -198,32 +137,29 @@ var loading = false;
function loadAjax(drive, url) {
loading = true;
$('#loading').dialog('open');
MicroModal.show('loading-modal');
$.ajax({
url: url,
dataType: 'json',
modifiedSince: true,
error: function(xhr, status, error) {
alert(error || status);
$('#loading').dialog('close');
loading = false;
},
success: function(data) {
if (data.type == 'binary') {
loadBinary(drive, data);
} else if ($.inArray(data.type, DISK_TYPES) >= 0) {
loadDisk(drive, data);
}
initGamepad(data.gamepad);
$('#loading').dialog('close');
loading = false;
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
if (data.type == 'binary') {
loadBinary(drive, data);
} else if (DISK_TYPES.includes(data.type)) {
loadDisk(drive, data);
}
initGamepad(data.gamepad);
MicroModal.close('loading-modal');
loading = false;
}).catch(function(error) {
window.alert(error || status);
MicroModal.close('loading-modal');
loading = false;
});
}
function doLoad() {
var urls = $('#disk_select').val(), url;
window.doLoad = function doLoad() {
MicroModal.close('load-modal');
var urls = document.querySelector('#disk_select').value, url;
if (urls && urls.length) {
if (typeof(urls) == 'string') {
url = urls;
@ -232,12 +168,12 @@ function doLoad() {
}
}
var files = $('#local_file').prop('files');
var files = document.querySelector('#local_file').files;
if (files.length == 1) {
doLoadLocal(_currentDrive, files[0]);
} else if (url) {
var filename;
$('#load').dialog('close');
MicroModal.close('load-modal');
if (url.substr(0,6) == 'local:') {
filename = url.substr(6);
if (filename == '__manage') {
@ -255,16 +191,15 @@ function doLoad() {
var parts = document.location.hash.split('|');
parts[_currentDrive - 1] = filename;
document.location.hash = parts.join('|');
loadAjax(_currentDrive, url);
}
}
}
};
function doSave() {
var name = $('#save_name').val();
window.doSave = function doSave() {
var name = document.querySelector('#save_name').value;
saveLocalStorage(_currentDrive, name);
$('#save').dialog('close');
}
MicroModal.close('save-modal');
};
window.doDelete = function(name) {
if (window.confirm('Delete ' + name + '?')) {
@ -275,15 +210,15 @@ window.doDelete = function(name) {
function doLoadLocal(drive, file) {
var parts = file.name.split('.');
var ext = parts[parts.length - 1].toLowerCase();
if ($.inArray(ext, DISK_TYPES) >= 0) {
if (DISK_TYPES.includes(ext)) {
doLoadLocalDisk(drive, file);
} else if ($.inArray(ext, TAPE_TYPES) >= 0) {
tape.doLoadLocalTape(file, function() {
$('#load').dialog('close');
MicroModal.close('load-modal');
});
} else {
window.alert('Unknown file type: ' + ext);
$('#load').dialog('close');
MicroModal.close('load-modal');
}
}
@ -295,7 +230,7 @@ function doLoadLocalDisk(drive, file) {
var name = parts.join('.');
if (disk2.setBinary(drive, name, ext, this.result)) {
drivelights.label(drive, name);
$('#load').dialog('close');
MicroModal.close('load-modal');
initGamepad();
}
};
@ -303,7 +238,7 @@ function doLoadLocalDisk(drive, file) {
}
function doLoadHTTP(drive, _url) {
var url = _url || $('#http_url').val();
var url = _url || document.querySelector('#http_url').value;
if (url) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
@ -317,7 +252,7 @@ function doLoadHTTP(drive, _url) {
var name = decodeURIComponent(fileParts.join('.'));
if (disk2.setBinary(drive, name, ext, req.response)) {
drivelights.label(drive, name);
$('#http_load').dialog('close');
MicroModal.close('http-modal');
initGamepad();
}
};
@ -327,11 +262,11 @@ function doLoadHTTP(drive, _url) {
function openLoadHTTP(drive) {
_currentDrive = parseInt(drive, 10);
$('#http_load').dialog('open');
MicroModal.show('http-modal');
}
function openManage() {
$('#manage').dialog('open');
MicroModal.show('manage-modal');
}
var prefs = new Prefs();
@ -397,7 +332,7 @@ var io = new Apple2IO(cpu, vm);
var keyboard = new KeyBoard(cpu, io, true);
var audio = new Audio(io);
var tape = new Tape(io);
var printer = new Printer($('#printer .paper'));
var printer = new Printer('#printer-modal .paper');
var mmu = new MMU(cpu, vm, gr, gr2, hgr, hgr2, io, rom);
@ -424,11 +359,11 @@ function updateKHz() {
if (window.showFPS) {
delta = renderedFrames - lastFrames;
var fps = parseInt(delta/(ms/1000), 10);
$('#khz').text( fps + 'fps');
document.querySelector('#khz').innerText = fps + 'fps';
} else {
delta = cycles - lastCycles;
var khz = parseInt(delta/ms);
$('#khz').text( khz + 'KHz');
document.querySelector('#khz').innerText = khz + 'KHz';
}
startTime = now;
@ -436,14 +371,16 @@ function updateKHz() {
lastFrames = renderedFrames;
}
window.updateSound = function() {
var on = $('#enable_sound').prop('checked');
var label = $('#toggle-sound i');
window.updateSound = function updateSound() {
var on = document.querySelector('#enable_sound').checked;
var label = document.querySelector('#toggle-sound i');
audio.enable(on);
if (on) {
label.removeClass('fa-volume-off').addClass('fa-volume-up');
label.classList.remove('fa-volume-off');
label.classList.add('fa-volume-up');
} else {
label.removeClass('fa-volume-up').addClass('fa-volume-off');
label.classList.remove('fa-volume-up');
label.classList.add('fa-volume-off');
}
};
@ -480,9 +417,9 @@ window.step = function()
var accelerated = false;
window.updateCPU = function()
window.updateCPU = function updateCPU()
{
accelerated = $('#accelerator_toggle').prop('checked');
accelerated = document.querySelector('#accelerator_toggle').checked;
kHz = accelerated ? 4092 : 1023;
io.updateHz(kHz * 1000);
if (runTimer) {
@ -510,7 +447,6 @@ function run(pc) {
var now, last = Date.now();
var runFn = function() {
now = Date.now();
renderedFrames++;
var step = (now - last) * kHz, stepMax = kHz * ival;
last = now;
@ -543,7 +479,9 @@ function run(pc) {
} else {
cpu.stepCycles(step);
}
vm.blit();
if (vm.blit()) {
renderedFrames++;
}
io.tick();
}
@ -635,29 +573,31 @@ function loadBinary(bin) {
}
window.selectCategory = function() {
$('#disk_select').empty();
var cat = disk_categories[$('#category_select').val()];
document.querySelector('#disk_select').innerHTML = '';
var cat = disk_categories[document.querySelector('#category_select').value];
if (cat) {
for (var idx = 0; idx < cat.length; idx++) {
var file = cat[idx], name = file.name;
if (file.disk) {
name += ' - ' + file.disk;
}
var option = $('<option />').val(file.filename).text(name)
.appendTo('#disk_select');
var option = document.createElement('option');
option.value = file.filename;
option.innerText = name;
document.querySelector('#disk_select').append(option);
if (disk_cur_name[_currentDrive] == name) {
option.attr('selected', 'selected');
option.selected = true;
}
}
}
};
window.selectDisk = function() {
$('#local_file').val('');
document.querySelector('#local_file').value = '';
};
window.clickDisk = function() {
doLoad();
window.doLoad();
};
function loadDisk(drive, disk) {
@ -691,7 +631,7 @@ function updateLocalStorage() {
}
cat = disk_categories['Local Saves'] = [];
$('#manage').empty();
document.querySelector('#manage-modal-content').innerHTML = '';
names.forEach(function(name) {
cat.push({
@ -699,13 +639,12 @@ function updateLocalStorage() {
'name': name,
'filename': 'local:' + name
});
$('#manage').append(
document.querySelector('#manage-modal-content').innerHTML =
'<span class="local_save">' +
name +
' <a href="#" onclick="doDelete(\'' +
name +
'\')">Delete</a><br /></span>'
);
'\')">Delete</a><br /></span>';
});
cat.push({
'category': 'Local Saves',
@ -773,9 +712,7 @@ function processHash(hash) {
window.reset = keyboard.reset;
function _keydown(evt) {
audio.autoStart();
if (!focused) {
if (!focused && (!evt.metaKey || evt.ctrlKey)) {
evt.preventDefault();
var key = keyboard.mapKeyEvent(evt);
@ -789,14 +726,12 @@ function _keydown(evt) {
} else if (evt.keyCode === 113) { // F2 - Full Screen
var elem = document.getElementById('screen');
if (evt.shiftKey) { // Full window, but not full screen
$('#display').toggleClass('zoomwindow');
$('#display > div')
.toggleClass('overscan')
.toggleClass('flexbox-centering');
$('#screen').toggleClass('maxhw');
$('#header').toggleClass('hidden');
$('.inset').toggleClass('hidden');
$('#reset').toggleClass('hidden');
document.querySelector('#display').classList.toggle('zoomwindow');
document.querySelector('#display > div').classList.toggle('overscan', 'flexbox-centering');
document.querySelector('#screen').classList.toggle('maxhw');
document.querySelector('#header').classList.toggle('hidden');
document.querySelector('.inset').classList.toggle('hidden');
document.querySelector('#reset').classList.toggle('hidden');
} else if (document.webkitCancelFullScreen) {
if (document.webkitIsFullScreen) {
document.webkitCancelFullScreen();
@ -854,9 +789,9 @@ function _keyup(evt) {
}
}
window.updateScreen = function() {
var green = $('#green_screen').prop('checked');
var scanlines = $('#show_scanlines').prop('checked');
window.updateScreen = function updateScreen() {
var green = document.querySelector('#green_screen').checked;
var scanlines = document.querySelector('#show_scanlines').checked;
vm.green(green);
vm.scanlines(scanlines);
@ -868,10 +803,10 @@ var flipY = false;
var swapXY = false;
window.updateJoystick = function() {
disableMouseJoystick = $('#disable_mouse').prop('checked');
flipX = $('#flip_x').prop('checked');
flipY = $('#flip_y').prop('checked');
swapXY = $('#swap_x_y').prop('checked');
disableMouseJoystick = document.querySelector('#disable_mouse').checked;
flipX = document.querySelector('#flip_x').checked;
flipY = document.querySelector('#flip_y').checked;
swapXY = document.querySelector('#swap_x_y').checked;
configGamepad(flipX, flipY);
if (disableMouseJoystick) {
@ -886,10 +821,10 @@ function _mousemove(evt) {
return;
}
var s = $('#screen');
var offset = s.offset();
var x = (evt.pageX - offset.left) / s.width(),
y = (evt.pageY - offset.top) / s.height(),
var s = document.querySelector('#screen');
var offset = { top: s.clientTop, left: s.clientLeft };
var x = (evt.pageX - offset.left) / s.clientWidth,
y = (evt.pageY - offset.top) / s.clientHeight,
z = x;
if (swapXY) {
@ -902,79 +837,87 @@ function _mousemove(evt) {
}
window.pauseRun = function() {
var label = $('#pause-run i');
var label = document.querySelector('#pause-run i');
if (paused) {
run();
label.removeClass('fa-play').addClass('fa-pause');
label.classList.remove('fa-play');
label.classList.add('fa-pause');
} else {
stop();
label.removeClass('fa-pause').addClass('fa-play');
label.classList.remove('fa-pause');
label.classList.add('fa-play');
}
paused = !paused;
};
window.toggleSound = function() {
var enableSound = $('#enable_sound');
enableSound.prop('checked', !enableSound.prop('checked'));
var enableSound = document.querySelector('#enable_sound');
enableSound.checked = !enableSound.checked;
window.updateSound();
};
$(function() {
hashtag = document.location.hash;
window.openOptions = function () {
MicroModal.show('options-modal');
};
$('button,input[type=button],a.button').button().focus(function() {
// Crazy hack required by Chrome
var self = this;
window.setTimeout(function() {
self.blur();
}, 1);
});
window.openPrinterModal = function () {
MicroModal.show('printer-modal');
};
MicroModal.init();
document.addEventListener('DOMContentLoaded', function() {
hashtag = document.location.hash;
/*
* Input Handling
*/
$(window)
.keydown(_keydown)
.keyup(_keyup)
.mousedown(function() { audio.autoStart(); });
window.addEventListener('keydown', _keydown);
window.addEventListener('keyup', _keyup);
window.addEventListener('mousedown', function() { audio.autoStart(); });
$('canvas')
.mousedown(function(evt) {
document.querySelectorAll('canvas').forEach(function(canvas) {
canvas.addEventListener('mousedown', function(evt) {
if (!gamepad) {
io.buttonDown(evt.which == 1 ? 0 : 1);
}
evt.preventDefault();
})
.mouseup(function(evt) {
});
canvas.addEventListener('mouseup', function(evt) {
if (!gamepad) {
io.buttonUp(evt.which == 1 ? 0 : 1);
}
})
.bind('contextmenu', function(evt) { evt.preventDefault(); });
});
});
$('body').mousemove(_mousemove);
document.body.addEventListener('mousemove', _mousemove);
$('input,textarea')
.focus(function() { focused = true; })
.blur(function() { focused = false; });
document.querySelectorAll('input,textarea').forEach(function(input) {
input.addEventListener('input', function() { focused = true; });
input.addEventListener('blur', function() { focused = false; });
});
keyboard.create('#keyboard');
if (prefs.havePrefs()) {
$('#options input[type=checkbox]').each(function() {
var val = prefs.readPref(this.id);
if (val)
this.checked = JSON.parse(val);
}).change(function() {
prefs.writePref(this.id, JSON.stringify(this.checked));
document.querySelectorAll('#options-modal input[type=checkbox]').forEach(function(el) {
var val = prefs.readPref(el.id);
if (val) {
el.checked = JSON.parse(val);
}
el.addEventListener('change', function() {
prefs.writePref(el.id, JSON.stringify(el.checked));
});
});
$('#options select').each(function() {
var val = prefs.readPref(this.id);
if (val)
this.value = val;
}).change(function() {
prefs.writePref(this.id, this.value);
document.querySelectorAll('#options-modal select').forEach(function(el) {
var val = prefs.readPref(el.id);
if (val) {
el.value = val;
}
el.addEventListener('change', function() {
prefs.writePref(el.id, el.value);
});
});
}
@ -984,60 +927,22 @@ $(function() {
window.updateScreen();
window.updateCPU();
var cancel = function() { $(this).dialog('close'); };
$('#loading').dialog({ autoOpen: false, modal: true });
$('#options').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Close': cancel }
});
$('#load').dialog({
autoOpen: false,
modal: true,
width: 540,
buttons: {'Cancel': cancel, 'Load': doLoad }
});
$('#save').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Cancel': cancel, 'Save': doSave }
});
$('#manage').dialog({
autoOpen: false,
modal: true,
width: 320,
buttons: {'Close': cancel }
});
$('#printer').dialog({
autoOpen: false,
modal: true,
resizeable: false,
width: 570,
buttons: {
'Clear': printer.clear,
'Close': cancel
}
});
$('#http_load').dialog({
autoOpen: false,
modal: true,
width: 530,
buttons: {'Cancel': cancel, 'OK': doLoadHTTP }
});
if (window.localStorage !== undefined) {
$('.disksave').show();
document.querySelectorAll('.disksave').forEach(function (el) { el.style.display = 'inline-block';});
}
var oldcat = '';
var option;
for (var idx = 0; idx < window.disk_index.length; idx++) {
var file = window.disk_index[idx];
var cat = file.category;
var name = file.name, disk = file.disk;
if (cat != oldcat) {
$('<option />').val(cat).text(cat).appendTo('#category_select');
option = document.createElement('option');
option.value = cat;
option.innerText = cat;
document.querySelector('#category_select').append(option);
disk_categories[cat] = [];
oldcat = cat;
}
@ -1049,7 +954,9 @@ $(function() {
disk_sets[name].push(file);
}
}
$('<option/>').text('Local Saves').appendTo('#category_select');
option = document.createElement('option');
option.innerText = 'Local Saves';
document.querySelector('#category_select').append(option);
updateLocalStorage();
initGamepad();
@ -1061,12 +968,8 @@ $(function() {
processHash(hash);
}
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('select').removeAttr('multiple').css('height', 'auto');
}
if (navigator.standalone) {
$('body').addClass('standalone');
document.body.classList.add('standalone');
}
run();

34
js/ui/drive_lights.js Normal file
View File

@ -0,0 +1,34 @@
export default function DriveLights()
{
return {
driveLight: function(drive, on) {
var disk = document.querySelector('#disk' + drive);
disk.style.backgroundImage =
on ? 'url(css/red-on-16.png)' :
'url(css/red-off-16.png)';
},
dirty: function() {
// document.querySelector('#disksave' + drive).disabled = !dirty;
},
label: function(drive, label) {
if (label) {
document.querySelector('#disklabel' + drive).innerText = label;
}
return document.querySelector('#disklabel' + drive).innerText;
},
getState: function() {
return {
disks: [
this.label(1),
this.label(2)
]
};
},
setState: function(state) {
if (state && state.disks) {
this.label(1, state.disks[0].label);
this.label(2, state.disks[1].label);
}
}
};
}

View File

@ -106,7 +106,8 @@ export function initGamepad(data) {
gamepadMap[idx] = undefined;
}
var map = data || DEFAULT_GAMEPAD;
$.each(map, function(key, val) {
Object.keys(map).forEach(function(key) {
var val = map[key];
if (typeof val == 'string') {
val = val.charCodeAt(0);
} else {

View File

@ -9,12 +9,15 @@
* implied warranty.
*/
export default function Printer(paper) {
var _lineBuffer;
export default function Printer(el) {
var paper = document.querySelector(el);
var _lineBuffer = '';
var _line;
function newLine() {
_line = $('<div>').addClass('line').text(_lineBuffer);
_line = document.createElement('div');
_line.classList.add('line');
_line.innerText = _lineBuffer;
paper.append(_line);
_lineBuffer = '';
}
@ -39,7 +42,7 @@ export default function Printer(paper) {
_lineBuffer += c;
}
}
_line.text(_lineBuffer);
_line.innerText = _lineBuffer;
},
clear: function() {
@ -49,7 +52,7 @@ export default function Printer(paper) {
},
hasPrintout: function() {
return paper.text().length();
return paper.text.length;
}
};
}

View File

@ -12,6 +12,8 @@
import { debug } from '../util';
export const TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
export default function Tape(io) {
var AudioContext = window.AudioContext || window.webkitAudioContext;

5
package-lock.json generated
View File

@ -3515,6 +3515,11 @@
"to-regex": "^3.0.2"
}
},
"micromodal": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.3.2.tgz",
"integrity": "sha512-xRON1OqD9G8FfI1qShYTtJZaN77x03QR2UnkpL7H17877lATNJoV8XHR+nrnc2FqgXqjFdaYJYidbfISecMlNQ=="
},
"miller-rabin": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",

View File

@ -24,5 +24,8 @@
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"micromodal": "^0.3.2"
}
}