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

Add indexeddb demo #90

Merged
merged 1 commit into from
Jan 17, 2022
Merged

Add indexeddb demo #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Remove resizeobserver commit
  • Loading branch information
@wbamberg
wbamberg committed Jan 17, 2022
commit 57a699e73b1a688b1d95cdb3fcc460211251075e
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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