Skip to content

Commit aa65352

Browse files
shahlinshahlin
committed
Added demo files
0 parents  commit aa65352

File tree

10 files changed

+1134
-0
lines changed

10 files changed

+1134
-0
lines changed

‎README.md‎

Lines changed: 615 additions & 0 deletions
Large diffs are not rendered by default.

‎battery.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<html>
2+
<head>
3+
<title>Battery Status</title>
4+
</head>
5+
6+
<body>
7+
<h2>What's my battery level?</h2>
8+
<h3 id="battery_level"></h3>
9+
10+
<br>
11+
12+
<h2>How long before my battery runs out?</h2>
13+
<h3 id="battery_discharge"></h3>
14+
15+
<br>
16+
17+
<h2>Is my laptop charging?</h2>
18+
<h3 id="battery_charging"></h3>
19+
</body>
20+
21+
<script>
22+
navigator.getBattery().then(function(battery){
23+
// Displays the current battery level
24+
document.getElementById('battery_level').innerHTML = battery.level * 100 + "%"; // Get value in percentage
25+
26+
// Displays time left before the battery runs out
27+
document.getElementById('battery_discharge').innerHTML = battery.dischargingTime / 60 / 60; // Get time in hours
28+
29+
// Displays if battery is charging (Yes!) or not (No)
30+
document.getElementById('battery_charging').innerHTML = (battery.charging == true) ? 'Yes!' : 'No';
31+
});
32+
</script>
33+
</html>

‎clipb_db.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Clipboard & WebSQL</title>
5+
</head>
6+
<body>
7+
<!-- Dummy paragraphs to be able to copy some text -->
8+
<p id="para1">1. This is paragraph 1</p>
9+
<button id="copy_btn" onclick="copy_store(1)">Copy</button>
10+
11+
<p id="para2">2. This is paragraph 2</p>
12+
<button id="copy_btn" onclick="copy_store(2)">Copy</button>
13+
14+
<p id="para3">3. This is paragraph 3</p>
15+
<button id="copy_btn" onclick="copy_store(3)">Copy</button>
16+
17+
<p id="para4">4. This is paragraph 4</p>
18+
<button id="copy_btn" onclick="copy_store(4)">Copy</button>
19+
20+
<div id="container"></div>
21+
</body>
22+
<script>
23+
// Open the database
24+
// Args list: openDatabase( db_name, version, description, size )
25+
var db = openDatabase('clipboard', '1.0', 'Clipboard DB', 2 * 1024 * 1024);
26+
27+
// Onload
28+
create_local_table(); // Create table called clips
29+
get_data(); // Retrieve data from table and display
30+
31+
// Function to create a table in the database
32+
function create_local_table(){
33+
db.transaction (
34+
function(transaction) {
35+
transaction.executeSql("CREATE TABLE IF NOT EXISTS clips(text TEXT NOT NULL)");
36+
}
37+
);
38+
}
39+
40+
// Function to retrieve information from the database and display it
41+
function get_data(){
42+
db.transaction(
43+
function(transaction){
44+
transaction.executeSql('SELECT * FROM clips;', [],
45+
function dataHandler(transaction, results){
46+
// Reference to the HTML element that'll hold the data
47+
var container = document.getElementById('container');
48+
49+
// Add content to the container with retrieved rows
50+
var html = "<h2>Contents</h2>";
51+
for(var i = 0; i < results.rows.length; i++){
52+
html += results.rows.item(i).text + "<br>";
53+
}
54+
55+
container.innerHTML = html;
56+
}
57+
);
58+
}
59+
);
60+
}
61+
62+
// Function to select a specific paragraph
63+
function select(para_num){
64+
// Create a Range object
65+
var range = document.createRange();
66+
67+
// Gets the Selection object
68+
var selection = window.getSelection();
69+
70+
// Specifies what is to be selected
71+
range.selectNodeContents(document.getElementById('para' + para_num));
72+
73+
// Removes any previous selections
74+
selection.removeAllRanges();
75+
76+
// Adds the selection to only the given range
77+
selection.addRange(range);
78+
}
79+
80+
// Function to copy selected text and store information
81+
function copy_store(para_num){
82+
// Select text for the specific paragraph
83+
select(para_num);
84+
85+
// Get text from <p> tag
86+
var text = document.getElementById('para' + para_num).innerHTML;
87+
88+
try {
89+
// Trigger copy event
90+
document.execCommand('copy');
91+
} catch (err) {
92+
console.log('Error: ' + err);
93+
}
94+
95+
// Added copied text to the DB
96+
db.transaction(
97+
function(transaction) {
98+
transaction.executeSql('INSERT INTO clips (text) VALUES ("' + text + '");');
99+
},
100+
);
101+
}
102+
</script>
103+
</html>

‎clipb_idb.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Clipboard & IndexedDB</title>
5+
</head>
6+
<body>
7+
<!-- Dummy paragraphs to be able to copy some text -->
8+
<p id="para1">1. This is paragraph 1</p>
9+
<button id="copy_btn" onclick="copy_store(1)">Copy</button>
10+
11+
<p id="para2">2. This is paragraph 2</p>
12+
<button id="copy_btn" onclick="copy_store(2)">Copy</button>
13+
14+
<p id="para3">3. This is paragraph 3</p>
15+
<button id="copy_btn" onclick="copy_store(3)">Copy</button>
16+
17+
<p id="para4">4. This is paragraph 4</p>
18+
<button id="copy_btn" onclick="copy_store(4)">Copy</button>
19+
20+
<div id="container"></div>
21+
</body>
22+
<script>
23+
// In the following line, you should include the prefixes of implementations you want to test.
24+
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
25+
// DON'T use "var indexedDB = ..." if you're not in a function.
26+
// Moreover, you may need references to some window.IDB* objects:
27+
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
28+
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
29+
30+
// Check if IndexedDB is supported
31+
if (!window.indexedDB) {
32+
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
33+
}
34+
35+
// Open the database
36+
var db;
37+
38+
// Name the database 'clipboard_db' and the version as 1
39+
request = window.indexedDB.open("clipboard_db", 1);
40+
41+
data = [];
42+
43+
// In case there was an error
44+
request.onerror = function(event) {
45+
alert("Error in creating database");
46+
};
47+
48+
// If the operation was successful
49+
request.onsuccess = function(event) {
50+
db = event.target.result;
51+
52+
// Call the function to retrieve information and display it
53+
get_data();
54+
};
55+
56+
// This event is only implemented in recent browsers
57+
request.onupgradeneeded = function(event) {
58+
var db = event.target.result;
59+
60+
// Create an objectStore to hold information about our clips.
61+
objectStore = db.createObjectStore("clips", { keyPath: "id" });
62+
};
63+
64+
// Function to select a specific paragraph
65+
function select(para_num){
66+
// Create a Range object
67+
var range = document.createRange();
68+
69+
// Gets the Selection object
70+
var selection = window.getSelection();
71+
72+
// Specifies what is to be selected
73+
range.selectNodeContents(document.getElementById('para' + para_num));
74+
75+
// Removes any previous selections
76+
selection.removeAllRanges();
77+
78+
// Adds the selection to only the given range
79+
selection.addRange(range);
80+
}
81+
82+
// Function to copy selected text and store information
83+
function copy_store(para_num){
84+
// Get text from <p> tag
85+
var text = document.getElementById('para' + para_num).innerHTML;
86+
87+
// Store information on the data variable
88+
data.push({id: para_num, para: text});
89+
90+
// Create an object store to hold your copied text and open it for read/write
91+
var dataStore = db.transaction("clips", "readwrite").objectStore("clips");
92+
93+
// For each item in the data variable, add it to the database
94+
data.forEach(function(data) {
95+
dataStore.add(data);
96+
});
97+
98+
// Select text for the specific paragraph
99+
select(para_num);
100+
101+
try {
102+
// Trigger copy event
103+
document.execCommand('copy');
104+
} catch (err) {
105+
console.log('Error: ' + err);
106+
}
107+
}
108+
109+
// Function to retrieve data from database and display it
110+
function get_data(){
111+
// Get a reference to the object store where our copied text is stored
112+
var objectStore = db.transaction(["clips"]).objectStore("clips");
113+
114+
// Open cursor to iterate over the objects in the object store
115+
var request = objectStore.openCursor();
116+
117+
// Get reference to the HTML element where data is displayed
118+
var container = document.getElementById('container');
119+
container.innerHTML = "<h1>Contents</h1>";
120+
121+
// Handle errors in case object store couldn't be accessed
122+
request.onerror = function(event) {
123+
// Handle errors!
124+
console.log('Error accessing data');
125+
};
126+
127+
// If the request is successful, output it on the screen
128+
request.onsuccess = function(event) {
129+
let cursor = event.target.result;
130+
131+
// Get all records
132+
if (cursor) {
133+
// Values on the database
134+
let value = cursor.value;
135+
136+
// Display data in HTML element
137+
// value.para -> para is the column name given in the object store
138+
container.innerHTML += value.para + "<br>";
139+
140+
// Move the cursor to the next item if any
141+
cursor.continue();
142+
}
143+
};
144+
}
145+
</script>
146+
</html>

‎clipb_ls.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Clipboard & Local Storage</title>
5+
</head>
6+
<body>
7+
<!-- Dummy paragraphs to be able to copy some text -->
8+
<p id="para1">1. This is paragraph 1</p>
9+
<button id="copy_btn" onclick="copy_store(1)">Copy</button>
10+
11+
<p id="para2">2. This is paragraph 2</p>
12+
<button id="copy_btn" onclick="copy_store(2)">Copy</button>
13+
14+
<p id="para3">3. This is paragraph 3</p>
15+
<button id="copy_btn" onclick="copy_store(3)">Copy</button>
16+
17+
<p id="para4">4. This is paragraph 4</p>
18+
<button id="copy_btn" onclick="copy_store(4)">Copy</button>
19+
20+
<div id="container"></div>
21+
</body>
22+
<script>
23+
// Display all the previously copied text on the screen
24+
display_clipboard();
25+
26+
// Function to select a specific paragraph
27+
function select(para_num){
28+
// Create a Range object
29+
var range = document.createRange();
30+
31+
// Gets the Selection object
32+
var selection = window.getSelection();
33+
34+
// Specifies what is to be selected
35+
range.selectNodeContents(document.getElementById('para' + para_num));
36+
37+
// Removes any previous selections
38+
selection.removeAllRanges();
39+
40+
// Adds the selection to only the given range
41+
selection.addRange(range);
42+
}
43+
44+
// Function to copy selected text and store information
45+
function copy_store(para_num){
46+
// Select text for the specific paragraph
47+
select(para_num);
48+
49+
var text = document.getElementById('para' + para_num).innerHTML;
50+
51+
// Store the key-value pair in local storage
52+
// Args list: setItem(key, value)
53+
localStorage.setItem('para' + para_num, text);
54+
55+
try {
56+
// Trigger copy event
57+
document.execCommand('copy');
58+
} catch (err) {
59+
console.log('Error: ' + err);
60+
}
61+
}
62+
63+
// Function to display the clipboard
64+
function display_clipboard(){
65+
var html = "<h1>Contents</h1>";
66+
67+
// Get all stored keys from localStorage
68+
keys = Object.keys(localStorage);
69+
70+
// For each item, display it's value
71+
for(var i = 0; i < localStorage.length; i++){
72+
html += localStorage.getItem(keys[i]) + "<br>";
73+
}
74+
75+
document.getElementById('container').innerHTML = html;
76+
}
77+
</script>
78+
</html>

0 commit comments

Comments
 (0)