JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html manifest="note.manifest">
<head>
<title>Demo (updated)</title>
</head>
<script>
var db = null;
var captured = null;
var highestZ = 0;
var highestId = 0;
var initialText = "Foo Foo Foo";
var tableName = "Draggable";
var canvasId = "canvas";
var dbName = "test_whole2";
var dbErrorMessage = "Database failure.";
try {
if (window.openDatabase) {
db = openDatabase(dbName, "1.0", "Note DB", 200000);
if (!db)
alert(dbErrorMessage);
} else
alert(dbErrorMessage);
} catch(err) {
db = null;
alert(dbErrorMessage);
}
if (db != null) {
//see loaded() in draggable.js
addEventListener('load', loaded, false);
}
document.getElementsByClassName("newButton").disabled = !db;
function Note()
{
var self = this;
var note = document.createElement('div');
note.className = 'note';
note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.addEventListener('click', function() { return self.onNoteClick() }, false);
this.note = note;
var close = document.createElement('div');
close.className = 'closebutton';
close.addEventListener('click', function(event) { return self.close(event) }, false);
note.appendChild(close);
var content = document.createElement('div');
content.className = 'edit';
content.addEventListener('keyup', function() { return self.onKeyUp() }, false);
note.appendChild(content);
this.contentField = content;
//[START] iPhone/iPad events
note.addEventListener('touchstart', function(e) { return self.onTouchstart() }, false);
//annoying ang magcge show ang keypad every after dropping (touchend)
//better if dugay ang touchmove (more than a couple of seconds)...