Skip to content

Commit

Permalink
Transfer IndexedDB API demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@wbamberg
wbamberg committed Jan 15, 2022
1 parent 8ecbe27 commit 1e4b25b
Show file tree
Hide file tree
Showing 4 changed files with 685 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.

* The "fullscreen-api" directory is for examples and demos of the [Fullscreen API](https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). Run the [example live](http://mdn.github.io/dom-examples/fullscreen-api/).

* The "indexeddb-api" directory contains a demo for the [IndexedDB API](https://mdn.github.io/dom-examples/indexeddb-api/index.html).

* The "insert-adjacent" directory contains simple demos for [insertAdjacentElement](http://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) and [insertAdjacentText](http://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html).

* The "matchmedia" directory contains a simple demo to test matchMedia functionality. See [Window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) for more details. [Run the demo live](http://mdn.github.io/dom-examples/matchmedia/).
Expand Down
145 changes: 145 additions & 0 deletions indexeddb-api/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB Example</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" defer>
</script>
<script src="main.js" defer></script>
</head>

<body>
<h1>IndexedDB Demo: storing blobs, e-publication example</h1>
<div class="note">
<p>Works and tested with:</p>
<div id="compat"></div>
</div>

<div id="msg"></div>

<form id="register-form">
<table>
<tbody>
<tr>
<td>
<label for="pub-title" class="required">Title:</label>
</td>
<td>
<input type="text" id="pub-title" name="pub-title" />
</td>
</tr>
<tr>
<td>
<label for="pub-biblioid" class="required"
>Bibliographic ID:<br />
<span class="note">(ISBN, ISSN, etc.)</span>
</label>
</td>
<td>
<input type="text" id="pub-biblioid" name="pub-biblioid" />
</td>
</tr>
<tr>
<td>
<label for="pub-year">
Year:
</label>
</td>
<td>
<input type="number" id="pub-year" name="pub-year" />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<label for="pub-file">
File image:
</label>
</td>
<td>
<input type="file" id="pub-file" />
</td>
</tr>
<tr>
<td>
<label for="pub-file-url">
Online-file image URL:<br />
<span class="note">(same origin URL)</span>
</label>
</td>
<td>
<input type="text" id="pub-file-url" name="pub-file-url" />
</td>
</tr>
</tbody>
</table>

<div class="button-pane">
<input type="button" id="add-button" value="Add Publication" />
<input type="reset" id="register-form-reset" />
</div>
</form>

<form id="delete-form">
<table>
<tbody>
<tr>
<td>
<label for="pub-biblioid-to-delete">
Bibliographic ID:<br />
<span class="note">(ISBN, ISSN, etc.)</span>
</label>
</td>
<td>
<input
type="text"
id="pub-biblioid-to-delete"
name="pub-biblioid-to-delete"
/>
</td>
</tr>
<tr>
<td>
<label for="key-to-delete">
Key:<br />
<span class="note">(for example 1, 2, 3, etc.)</span>
</label>
</td>
<td>
<input type="text" id="key-to-delete" name="key-to-delete" />
</td>
</tr>
</tbody>
</table>
<div class="button-pane">
<input type="button" id="delete-button" value="Delete Publication" />
<input
type="button"
id="clear-store-button"
value="Clear the whole store"
class="destructive"
/>
</div>
</form>

<form id="search-form">
<div class="button-pane">
<input
type="button"
id="search-list-button"
value="List database content"
/>
</div>
</form>

<div>
<div id="pub-msg"></div>
<div id="pub-viewer"></div>
<ul id="pub-list"></ul>
</div>

</body>
</html>
92 changes: 92 additions & 0 deletions indexeddb-api/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
body {
font-family: sans-serif;
}

table {
border-collapse: collapse;
}

form {
background-color: #cccccc;
border-radius: 0.3em;
display: inline-block;
margin-bottom: 0.5em;
padding: 1em;
}

table {
border-collapse: collapse;
}

input {
padding: 0.3em;
border-color: #cccccc;
border-radius: 0.3em;
}

.required:after {
content: "*";
color: red;
}

.button-pane {
margin-top: 1em;
}

#pub-viewer {
float: right;
width: 48%;
height: 20em;
border: solid #d092ff 0.1em;
}

#pub-viewer iframe {
width: 100%;
height: 100%;
}

#pub-list {
width: 46%;
background-color: #eeeeee;
border-radius: 0.3em;
}

#pub-list li {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
}

#msg {
margin-bottom: 1em;
}

.action-success {
padding: 0.5em;
color: #00d21e;
background-color: #eeeeee;
border-radius: 0.2em;
}

.action-failure {
padding: 0.5em;
color: #ff1408;
background-color: #eeeeee;
border-radius: 0.2em;
}

.note {
font-size: smaller;
}

.destructive {
background-color: orange;
}

.destructive:hover {
background-color: #ff8000;
}

.destructive:active {
background-color: red;
}
Loading

0 comments on commit 1e4b25b

Please sign in to comment.