-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
notepad.xhtml
158 lines (149 loc) · 6.23 KB
/
notepad.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" />
<title>Notepad Catatan Binis</title>
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,R0lGODlhEAAQAKEAAAAAAICAgP///wAAACH/
C05FVFNDQVBFMi4wAwEAAAAh/hFDcmVhdGVkIHdpdGggR0lNUAAh+QQBZAADACwAAAAAEAAQAAACJIyPacLtvp5kEUwYmL00i81VXK
eNgjiioQdeqsuakXl6tIIjBQAh+QQBZAADACwAAAAAEAAQAAACIIyPacLtvp5kcb5qG85iZ2+BkyiRV8BBaEqtrKkqslEAADs=" />
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script src='https://bstp.sourceforge.io/calculatorskit.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/>
<style>
html, body {
height:100%; box-sizing:border-box; margin:0;
}
textarea {
height:calc(100% - 2rem); box-sizing:border-box;
border:none; outline:none; resize:none;
font-family: monospace;
}
#textbox {
background-color:transparent;
width:100%;
padding:0.5em;
padding-right:calc(100% - 80ch - 0.5em - 17px);
overflow-y:scroll;
}
#linewidth-guide {
border-right:1px solid PaleTurquoise;
width:calc(80ch + 1px);
margin-left:0.5em;
position:absolute;
z-index:-1;
}
nav {
position:fixed; bottom:0; left:0;
box-sizing:border-box; width:100%; height:2rem; padding:0 0.5em;
background-color:#eee; border-top:1px solid silver;
line-height:2rem; color:gray; font-family:sans-serif; font-size:85%;
}
#controls {
float:right;
}
#save a {
text-decoration:none;
}
#about, #open > input {
display:none;
}
svg {
vertical-align:middle;
}
@media print { nav { display:none; } }
</style>
</head>
<body>
<h1 class="p-3 bg-dark text-white text-center rounded">The Agenda</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-dark" href="index.php">Home</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="home.php">Menu</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="stok.php">Stock</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="notepad.xhtml">Agenda</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="calculator.php">Calculator</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="doc.php">Doc</a></li>
<li class="breadcrumb-item"><a class="text-dark" target="blank" href="https://mesinkasironline.web.app">Web Apps</a></li>
</ol>
<textarea id="linewidth-guide" />
<textarea id="textbox" autofocus="autofocus" placeholder="masukan catatan anda disini."></textarea>
<nav>
<span id="stats">
<a href="index.php"> Back to Inventori Apps</a>
</span>
<span id="controls">
<span id="open">
<input type="file" value="open" />
<a href="#" class="btn btn-dark rounded-pill">open</a>
</span>
<span id="save">
<input id="filename" class="runded" placeholder="Search a file" />
<a href="#" class="btn btn-dark rounded-pill">save</a>
</span>
</span>
<div id='app'>{{ message }}</div>
</nav>
<div id="about">
<h2>Browserpad</h2>
<p>As the name indicates, Browserpad is a notepad in the browser.</p>
<p>It is a plain text editor built entirely with HTML, CSS and JavaScript.</p>
<p>(<a href="https://github.com/Browserpad/browserpad">source code available on github</a>)</p>
</div>
<script>
var textbox = document.querySelector('#textbox');
var timeoutID = null;
var filenameBox = document.querySelector('#filename');
// load/save cache in local storage
textbox.value = localStorage.getItem('browserpad') || '';
textbox.setSelectionRange(textbox.value.length, textbox.value.length); // place caret at end of content
calcStats(); // update counters after loading
function storeLocally() { localStorage.setItem('browserpad', textbox.value); }
window.beforeunload = storeLocally;
// tab key support
textbox.onkeypress = function (event) {
if (event.keyCode === 9) {
event.preventDefault();
var text = this.value, s = this.selectionStart, e = this.selectionEnd;
this.value = text.substring(0, s) + '\t' + text.substring(e);
this.selectionStart = this.selectionEnd = s + 1;
}
};
textbox.onkeyup = function () {
calcStats();
window.clearTimeout(timeoutID); // prevent saving too frequently
timeoutID = window.setTimeout(storeLocally, 1000);
};
// counters
function calcStats() {
updateCount('char', textbox.value.length);
updateCount('word', textbox.value === "" ? 0 : textbox.value.replace(/\s+/g, ' ').split(' ').length);
updateCount('line', textbox.value === "" ? 0 : textbox.value.split(/\n/).length);
}
function updateCount(item, value) {
document.querySelector('#' + item + '-count').textContent = value;
}
// save as file
document.querySelector('#save a').onclick = function () {
this.download = (filenameBox.value || 'browserpad.txt').replace(/^([^.]*)$/, "$1.txt");
this.href = URL.createObjectURL(new Blob([document.querySelector('textarea').value] , {type:'text/plain'}));
};
// open file
document.querySelector('#open a').onclick = function () {
document.querySelector('#open input').click();
};
document.querySelector('#open input').onchange = function () {
var reader = new FileReader();
reader.file = this.files[0]; // custom property so the filenameBox can be set from within reader.onload()
reader.onload = function () {
filenameBox.value = this.file.name;
textbox.value = this.result; // this = FileReader
};
reader.readAsText(this.files[0]); // this = input
};
// toggle spell-checking
document.querySelector('#spellcheck').onchange = function () {
textbox.spellcheck = this.checked;
};
textbox.spellcheck = document.querySelector('#spellcheck').checked; // initialize
</script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script src='https://bstp.sourceforge.io/calculatorskit.js'></script>
</body>
</html>