mirror of
https://github.com/apankrat/nullboard.git
synced 2025-01-17 12:48:25 +01:00
3233 lines
62 KiB
HTML
3233 lines
62 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
|
|
+-------------------------------------------------------------+
|
|
| |
|
|
| Nullboard, a minimalist kanban board |
|
|
| https://nullboard.io |
|
|
| |
|
|
+-------------------------------------------------------------+
|
|
|
|
LICENSE
|
|
|
|
The 2-clause BSD license with the Commons Clause condition.
|
|
|
|
IN SHORT
|
|
|
|
You can use, change and distribute the software free of charge
|
|
provided that you do not sell it or make money off it in
|
|
certain less direct ways as specified below. When distributed,
|
|
the software must include a complete copy of this license.
|
|
|
|
IN FULL
|
|
|
|
The Software is provided to you by the Licensor under the
|
|
License, as defined below, subject to the following condition.
|
|
|
|
Without limiting other conditions in the License, the grant of
|
|
rights under the License will not include, and the License does
|
|
not grant to you, the right to Sell the Software.
|
|
|
|
For purposes of the foregoing, "Sell" means practicing any or
|
|
all of the rights granted to you under the License to provide
|
|
to third parties, for a fee or other consideration (including
|
|
without limitation fees for hosting or consulting/ support
|
|
services related to the Software), a product or service whose
|
|
value derives, entirely or substantially, from the functionality
|
|
of the Software. Any license notice or attribution required
|
|
by the License must also include this Commons Clause License
|
|
Condition notice.
|
|
|
|
Software: Nullboard
|
|
License: The 2-clause BSD License
|
|
Licensor: Alexander Pankratov / swapped.ch
|
|
|
|
-->
|
|
<meta charset="utf-8">
|
|
<title>Nullboard</title>
|
|
<style>
|
|
|
|
/***/
|
|
@font-face {
|
|
font-family: 'Nullboard';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
src: url('extras/Barlow-Regular.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Nullboard';
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
src: url('extras/Barlow-Medium.woff') format('woff');
|
|
}
|
|
|
|
/***/
|
|
html, body, h1, textarea, input {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body, input, textarea {
|
|
font-family: Nullboard, sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
body.dragging {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
-o-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
@keyframes shake {
|
|
33% { margin-left: -5px; }
|
|
66% { margin-left: 5px; }
|
|
100% { margin-left: 0px; }
|
|
}
|
|
|
|
body.ding {
|
|
animation-name: shake;
|
|
animation-duration: 200ms;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
transition: color 200ms;
|
|
}
|
|
|
|
a, a:active, a:focus, textarea, input {
|
|
outline: none;
|
|
}
|
|
|
|
tt {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.clearfix:after,
|
|
.board:after,
|
|
.lists:after,
|
|
.notes:after,
|
|
.head:after,
|
|
.menu:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/***/
|
|
.board {
|
|
min-width: 250px;
|
|
|
|
width: -moz-max-content; /* firefox */
|
|
width: -webkit-max-content; /* chrome */
|
|
width: intrinsic; /* safari */
|
|
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
body.crowded .board {
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.board u {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.board u:before {
|
|
content: '\00D7';
|
|
position: relative;
|
|
top: 2px;
|
|
font-size: 17px;
|
|
line-height: 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/***/
|
|
.board .head {
|
|
padding: 5px 0;
|
|
margin: 0 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.board .head .text,
|
|
.board .head .edit {
|
|
font-weight: 500;
|
|
font-size: 13.5px;
|
|
line-height: 20px;
|
|
padding: 0 5px 2px;
|
|
border: none;
|
|
}
|
|
|
|
.board .head .text {
|
|
min-height: 20px;
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.board .head .edit {
|
|
display: none;
|
|
}
|
|
|
|
.board .head .edit::placeholder {
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
line-height: 22px;
|
|
text-transform: uppercase;
|
|
color: #1489db;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.board .head.editing .text {
|
|
display: none;
|
|
}
|
|
|
|
.board .head.editing .edit {
|
|
display: block;
|
|
outline: 1px solid #8eaedd;
|
|
}
|
|
|
|
.board .menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
height: 20px;
|
|
padding: 5px 6px 7px 30px;
|
|
background: linear-gradient(to right, #EAEDF000, #EAEDF0 10px);
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.board .menu a,
|
|
.board .ops a {
|
|
color: #000000A0;
|
|
transition: color 200ms;
|
|
}
|
|
|
|
.board .menu a {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.board .menu a:hover,
|
|
.board .ops a:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.board .menu a.warn:hover,
|
|
.board .ops a.warn:hover {
|
|
color: #c40;
|
|
}
|
|
|
|
.board .menu .undo-board,
|
|
.board .menu .redo-board {
|
|
display: none;
|
|
}
|
|
|
|
.board .head.editing .menu {
|
|
display: none;
|
|
}
|
|
|
|
.board > .head {
|
|
background: #EAEDF0;
|
|
padding: 5px;
|
|
margin: 0 0 10px;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.board > .head .menu {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/***/
|
|
.board .lists-scroller {
|
|
height: auto;
|
|
margin: -1px 0 10px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.lists-scroller div {
|
|
height: 1px;
|
|
}
|
|
|
|
.board .lists {
|
|
white-space: nowrap;
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.board .list {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 250px;
|
|
margin: 0 5px 10px;
|
|
background: linear-gradient(#EAEDF0 30px, #DDE1E5 90px);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.board .list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.board .list:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.board .list:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.board .list .notes {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/***/
|
|
.board .head .menu .teaser {
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 5px;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.board .head .menu .bulk {
|
|
display: none;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.board .head .menu:hover .bulk {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.board .head .menu:hover .teaser {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.board .list .menu .mov-list-r.half {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.board .list .menu .full {
|
|
display: none;
|
|
}
|
|
|
|
.board .list:first-child .menu .half,
|
|
.board .list:last-child .menu .half {
|
|
display: none;
|
|
}
|
|
|
|
.board .list:first-child .menu .mov-list-r.full,
|
|
.board .list:last-child .menu .mov-list-l.full {
|
|
display: inline-block;
|
|
}
|
|
|
|
.board .list:first-child:last-child .menu .half,
|
|
.board .list:first-child:last-child .menu .full {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.board .note {
|
|
background: #fff;
|
|
margin-top: 5px;
|
|
box-shadow: 0 1px 2px #bbb, 0 0 1px #ddd;
|
|
position: relative;
|
|
}
|
|
|
|
.board .note.dragging,
|
|
.board .note.dragging.raw {
|
|
background: #CED4DA;
|
|
box-shadow: 0 +1px 0 #00000010 inset,
|
|
0 -1px 0 #00000010 inset,
|
|
+1px 0 0 #00000010 inset,
|
|
-1px 0 0 #00000010 inset;
|
|
}
|
|
|
|
.board .note.dragging * {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/***/
|
|
.board .note:last-child {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.board .note .text,
|
|
.board .note .edit {
|
|
padding: 5px 10px;
|
|
margin-right: 15px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.board .note .text {
|
|
min-height: 13px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/***/
|
|
.board .head .text a,
|
|
.board .note .text a {
|
|
color: inherit;
|
|
cursor: default;
|
|
transition: none;
|
|
}
|
|
|
|
@keyframes whoomp {
|
|
0% { color: inherit; }
|
|
30% { color: #888; }
|
|
100% { color: inherit; }
|
|
}
|
|
|
|
.board .head .text a:hover,
|
|
.board .note .text a:hover {
|
|
animation-name: whoomp;
|
|
animation-duration: 700ms;
|
|
}
|
|
|
|
.reveal .board .head .text a,
|
|
.reveal .board .note .text a {
|
|
color: #1489db;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reveal .board .head .text a:hover,
|
|
.reveal .board .note .text a:hover {
|
|
animation-name: none;
|
|
}
|
|
|
|
/***/
|
|
.board .note .edit {
|
|
display: none;
|
|
border: none;
|
|
}
|
|
|
|
.board .note.editing {
|
|
box-shadow: none;
|
|
outline: 1px solid #8eaedd;
|
|
}
|
|
|
|
.board .note.editing .text {
|
|
display: none;
|
|
}
|
|
|
|
.board .note.editing .edit {
|
|
display: block;
|
|
resize: none;
|
|
}
|
|
|
|
/***/
|
|
.board .note .ops {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
transition: opacity 400ms;
|
|
cursor: default;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.board .note.editing .ops {
|
|
display: none;
|
|
}
|
|
|
|
.board .note:hover .ops {
|
|
opacity: 1;
|
|
}
|
|
|
|
.board .note .ops .teaser {
|
|
display: block;
|
|
margin-top: 2px;
|
|
margin-right: 1px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.board .note .ops .teaser:before {
|
|
content: '\2261';
|
|
}
|
|
|
|
.board .note .ops .bulk {
|
|
display: none;
|
|
background: #fff;
|
|
border-left: none;
|
|
padding: 0 0 1px 5px;
|
|
font-weight: 500;
|
|
border-left: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.board .note .ops .bulk a {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.board .note .ops:hover .bulk {
|
|
display: block;
|
|
}
|
|
|
|
.board .note .ops:hover .teaser {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.board .note.raw {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.board .note.raw.editing {
|
|
background: #fff;
|
|
}
|
|
|
|
.board .note.raw .text {
|
|
}
|
|
|
|
.board .note.collapsed {
|
|
height: 23px;
|
|
}
|
|
|
|
.board .note.collapsed .text {
|
|
height: 13px;
|
|
overflow: hidden;
|
|
line-height: 22px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.board .note.collapsed .ops {
|
|
opacity: 1;
|
|
}
|
|
|
|
.board .note.collapsed .ops .teaser {
|
|
padding: 1px 3px 0 1px;
|
|
}
|
|
|
|
.board .note.collapsed .ops .teaser:before {
|
|
content: '_';
|
|
top: 1px;
|
|
}
|
|
|
|
.board .note.collapsed:hover .ops .teaser:before {
|
|
content: '\2261';
|
|
}
|
|
|
|
/***/
|
|
.dragster {
|
|
z-index: 2;
|
|
position: absolute;
|
|
opacity: 0;
|
|
box-shadow: 1px 2px 3px #00000050;
|
|
background: #fff;
|
|
white-space: pre-wrap;
|
|
cursor: move;
|
|
|
|
padding: 5px 25px 5px 10px;
|
|
font-size: 11px;
|
|
|
|
box-shadow: 0 +1px 0 #ACB4BC inset,
|
|
0 -1px 0 #ACB4BC inset,
|
|
+1px 0 0 #ACB4BC inset,
|
|
-1px 0 0 #ACB4BC inset,
|
|
0px 1px 3px #00000030;
|
|
}
|
|
|
|
.dragster a {
|
|
color: #000;
|
|
}
|
|
|
|
.dragster.collapsed {
|
|
overflow: hidden;
|
|
line-height: 22px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
/***/
|
|
.logo {
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 9px;
|
|
font-size: 11px;
|
|
line-height: 19px;
|
|
padding: 6px 12px;
|
|
opacity: 0.6;
|
|
z-index: 3;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
body.crowded .logo:hover {
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.logo:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.logo .bulk {
|
|
overflow: hidden;
|
|
height: 0;
|
|
opacity: 0;
|
|
transition: opacity 400ms;
|
|
}
|
|
|
|
.logo:hover .bulk {
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
.logo a {
|
|
color: #000;
|
|
display: block;
|
|
}
|
|
|
|
.logo a:hover {
|
|
color: #1489db;
|
|
}
|
|
|
|
.logo .bulk a:before {
|
|
display: inline-block;
|
|
content: '-';
|
|
width: 11px;
|
|
}
|
|
|
|
/***/
|
|
.config {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 21px;
|
|
font-size: 11px;
|
|
line-height: 19px;
|
|
z-index: 3;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
body.crowded .config:hover {
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.config a {
|
|
display: block;
|
|
color: #000;
|
|
transition: color 200ms;
|
|
}
|
|
|
|
.config a:hover {
|
|
color: #1489db;
|
|
}
|
|
|
|
.config .teaser {
|
|
padding: 5px;
|
|
color: #999;
|
|
}
|
|
|
|
.config .bulk {
|
|
margin-right: 20px;
|
|
padding: 5px 0 10px 22px;
|
|
transition: opacity 400ms;
|
|
}
|
|
|
|
.config .bulk div {
|
|
display: none;
|
|
padding: 6px 2px;
|
|
margin: 6px -2px;
|
|
border-top: 1px solid #00000028;
|
|
border-bottom: 1px solid #00000028;
|
|
}
|
|
|
|
.config .bulk div a {
|
|
display: block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.config .bulk div a.active {
|
|
color: #1489db;
|
|
}
|
|
|
|
.config .bulk div a.active:before {
|
|
content: '\2022 ';
|
|
display: inline-block;
|
|
width: 13px;
|
|
margin-left: -13px;
|
|
}
|
|
|
|
.config .bulk div a.active:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.config .bulk a i,
|
|
.config .bulk a b {
|
|
font-style: normal;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.config .bulk a i {
|
|
display: none;
|
|
}
|
|
|
|
.config .bulk input.imp-board-select {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.config .bulk a.switch-theme {
|
|
padding-top: 6px;
|
|
margin-top: 6px;
|
|
border-top: 1px solid #00000028;
|
|
}
|
|
|
|
/***/
|
|
.config .bulk {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.config:hover .teaser {
|
|
display: none;
|
|
}
|
|
|
|
.config:hover .bulk {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/***/
|
|
.overlay {
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.9);
|
|
display: none;
|
|
color: #000;
|
|
}
|
|
|
|
/***/
|
|
.overlay .license {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
white-space: pre-wrap;
|
|
width: 384px;
|
|
height: auto;
|
|
max-height: 600px;
|
|
padding: 20px 25px 22px;
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 50%;
|
|
margin-left: -192px;
|
|
}
|
|
|
|
.overlay .license a {
|
|
color: #1489db;
|
|
}
|
|
|
|
.overlay .license span {
|
|
display: inline-block;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
/***/
|
|
.overlay .about {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
width: 240px;
|
|
height: auto;
|
|
padding: 50px 25px;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 50%;
|
|
margin-left: -145px;
|
|
}
|
|
|
|
.overlay .about h1 {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.overlay .about a {
|
|
display: block;
|
|
color: #1489db;
|
|
}
|
|
|
|
.overlay .about div {
|
|
position: absolute;
|
|
bottom: -30px;
|
|
width: 240px;
|
|
color: #eee;
|
|
}
|
|
|
|
.overlay .about div span {
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/***/
|
|
|
|
@media print {
|
|
.logo, .config,
|
|
.board .head .teaser,
|
|
.list .head .teaser {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.board .note {
|
|
box-shadow: none;
|
|
outline: 1px solid #ccc;
|
|
}
|
|
|
|
.board .note.raw {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Dark mode
|
|
*/
|
|
body.theme-dark {
|
|
background-color: #15171A;
|
|
color: #d6d6d6;
|
|
}
|
|
|
|
.theme-dark .board .head {
|
|
background: #202224;
|
|
}
|
|
|
|
/***/
|
|
.theme-dark .board .menu {
|
|
background: linear-gradient(to right, #20222400, #202224 10px);
|
|
}
|
|
|
|
.theme-dark .board .menu a {
|
|
color: #aaa;
|
|
}
|
|
|
|
.theme-dark .board .menu a:hover {
|
|
color: #fc4;
|
|
}
|
|
|
|
.theme-dark .board .menu a.warn:hover,
|
|
.theme-dark .board .ops a.warn:hover {
|
|
color: #fc5555 !important;
|
|
}
|
|
|
|
.theme-dark .board .head {
|
|
color: #eee;
|
|
}
|
|
|
|
.theme-dark .board .head .edit::placeholder {
|
|
color: #bf9d21;
|
|
}
|
|
|
|
/***/
|
|
.theme-dark .board .list {
|
|
background: #202224;
|
|
}
|
|
|
|
.theme-dark .board .note {
|
|
background: #2B2C2F;
|
|
background: linear-gradient(#2B2C2F, #27282B);
|
|
box-shadow: 0 1px 3px #0005;
|
|
text-shadow: 0 0 4px #0008;
|
|
}
|
|
|
|
.theme-dark.reveal .board .head .text a,
|
|
.theme-dark.reveal .board .note .text a {
|
|
color: #fc0;
|
|
}
|
|
|
|
@keyframes whoomp-dark {
|
|
0% { color: inherit; }
|
|
30% { color: #fff; }
|
|
100% { color: inherit; }
|
|
}
|
|
|
|
.theme-dark .board .head .text a:hover,
|
|
.theme-dark .board .note .text a:hover {
|
|
animation-name: whoomp-dark;
|
|
}
|
|
|
|
|
|
.theme-dark .board .note.raw {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.theme-dark .board .note.raw .text {
|
|
color: #eee;
|
|
text-shadow: 0 0 4px #0008;
|
|
}
|
|
|
|
.theme-dark .board .note .ops .teaser {
|
|
color: #ccc;
|
|
}
|
|
|
|
.theme-dark .board .note .ops .bulk {
|
|
background: #202224;
|
|
border-left: 1px solid #111;
|
|
border-bottom: 1px solid #111;
|
|
}
|
|
|
|
.theme-dark .board .note.raw .ops .bulk {
|
|
border: none;
|
|
}
|
|
|
|
.theme-dark .board .note .ops .bulk a {
|
|
color: #ccc;
|
|
}
|
|
|
|
.theme-dark .board .note .ops .bulk a:hover {
|
|
color: #fc2;
|
|
}
|
|
|
|
.theme-dark .board .note.dragging,
|
|
.theme-dark .board .note.dragging.raw {
|
|
background: #15171A;
|
|
box-shadow: 0 +1px 0 #000 inset,
|
|
0 -1px 0 #000 inset,
|
|
+1px 0 0 #000 inset,
|
|
-1px 0 0 #000 inset;
|
|
}
|
|
|
|
.theme-dark .dragster {
|
|
box-shadow: 0px 1px 4px #000000;
|
|
background: #2e3032;
|
|
}
|
|
|
|
.theme-dark .dragster a {
|
|
color: #d6d6d6;
|
|
}
|
|
|
|
|
|
/***/
|
|
.theme-dark textarea,
|
|
.theme-dark input {
|
|
background: #111315;
|
|
color: #eee;
|
|
}
|
|
|
|
.theme-dark .board .head.editing .edit {
|
|
outline: 1px solid #bc9908;
|
|
}
|
|
|
|
.theme-dark .board .note.editing {
|
|
background: #111315;
|
|
outline: 1px solid #bc9908;
|
|
}
|
|
|
|
/***/
|
|
.theme-dark .config, .theme-dark.crowded .config:hover {
|
|
background-color: #15171A;
|
|
}
|
|
|
|
.theme-dark .config a {
|
|
color: #ddd;
|
|
}
|
|
|
|
.theme-dark .config a:hover {
|
|
color: #fc2;
|
|
}
|
|
|
|
.theme-dark .config .bulk div {
|
|
border-top: 1px solid #fff2;
|
|
border-bottom: 1px solid #fff2;
|
|
}
|
|
|
|
.theme-dark .config .bulk div a.active {
|
|
color: #fc2;
|
|
}
|
|
|
|
.theme-dark .config .bulk a.switch-theme {
|
|
border-top: 1px solid #fff2;
|
|
}
|
|
|
|
.theme-dark .config a.switch-theme i {
|
|
display: inline;
|
|
}
|
|
|
|
.theme-dark .config a.switch-theme b {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.theme-dark .logo a {
|
|
color: #ccc;
|
|
}
|
|
|
|
.theme-dark .logo, .theme-dark.crowded .logo:hover {
|
|
background: #15171A;
|
|
}
|
|
|
|
.theme-dark .logo a:hover {
|
|
color: #fc2;
|
|
}
|
|
|
|
.theme-dark .logo > a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/*
|
|
* Larger font
|
|
*/
|
|
body.fsize-z1,
|
|
body.fsize-z1 input,
|
|
body.fsize-z1 textarea {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.fsize-z1 .board {
|
|
min-width: 290px;
|
|
}
|
|
|
|
.fsize-z1 .board u:before {
|
|
font-size: 19px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.fsize-z1 .board .head .text {
|
|
min-height: 22px;
|
|
}
|
|
|
|
.fsize-z1 .board .head .text,
|
|
.fsize-z1 .board .head .edit {
|
|
font-size: 15px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.fsize-z1 .board .head .edit::placeholder {
|
|
font-size: 10px;
|
|
line-height: 23px;
|
|
}
|
|
|
|
.fsize-z1 .board .menu {
|
|
height: 22px;
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.fsize-z1 .board .list {
|
|
width: 290px;
|
|
}
|
|
|
|
.fsize-z1 .board .note .text,
|
|
.fsize-z1 .board .note .edit,
|
|
.fsize-z1 .dragster {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.fsize-z1 .board .note .text {
|
|
min-height: 16px;
|
|
}
|
|
|
|
.fsize-z1 .board .note.collapsed {
|
|
height: 26px;
|
|
}
|
|
|
|
.fsize-z1 .board .note.collapsed .text {
|
|
height: 17px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.fsize-z1 .dragster.collapsed {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.fsize-z1 .board .note .ops {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/***/
|
|
.fsize-z1 .logo {
|
|
font-size: 13px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.fsize-z1 .logo .bulk a:before {
|
|
width: 13px;
|
|
}
|
|
|
|
/***/
|
|
.fsize-z1 .config {
|
|
font-size: 13px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.fsize-z1 .config .bulk div a.active:before {
|
|
width: 15px;
|
|
}
|
|
|
|
.fsize-z1 .config a.switch-fsize i {
|
|
display: inline;
|
|
}
|
|
|
|
.fsize-z1 .config a.switch-fsize b {
|
|
display: none;
|
|
}
|
|
|
|
/***/
|
|
.fsize-z1 .overlay .license {
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
width: 443px;
|
|
}
|
|
|
|
.fsize-z1 .overlay .about {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
width: 277px;
|
|
}
|
|
|
|
.fsize-z1 .overlay .about h1 {
|
|
font-size: 17px;
|
|
width: 277px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class=logo>
|
|
<a href=https://nullboard.io>Nullboard</a>
|
|
<div class=bulk>
|
|
<a href=# class=view-about>About</a>
|
|
<a href=# class=view-license>License</a>
|
|
<a href=https://nullboard.io/github target=_blank>Github</a>
|
|
<a href=https://nullboard.io/twitter target=_blank>Twitter</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=config>
|
|
<a href=# class=teaser>≡</a>
|
|
<div class=bulk>
|
|
<a href=# class=add-board>Add new board...</a>
|
|
<div class=boards>
|
|
<!-- here'll be boards -->
|
|
</div>
|
|
<a href=# class=exp-board>Export current board...</a>
|
|
<a href=# class=imp-board>Import boards...</a>
|
|
<input class=imp-board-select type="file" accept=".nbx">
|
|
<a href="#" class="switch-theme">Use <i>light</i><b>dark</b> theme</a>
|
|
<a href="#" class="switch-fsize">Use <i>smaller</i><b>larger</b> font</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=wrap>
|
|
</div>
|
|
|
|
<div class=overlay>
|
|
</div>
|
|
|
|
<tt>
|
|
<!-- templates -->
|
|
<div class=board>
|
|
<div class=head>
|
|
<div class=text></div>
|
|
<input class=edit spellcheck=false placeholder='Name of the board'>
|
|
<div class=menu>
|
|
<a href=# class=teaser>≡</a>
|
|
<div class=bulk>
|
|
<a href=# class='del-board warn'><u></u> Board</a>
|
|
<a href=# class='undo-board'>Undo</a>
|
|
<a href=# class='redo-board'>Redo</a>
|
|
<a href=# class='add-list'>+ List</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=lists-scroller><div></div></div>
|
|
<div class=lists>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=list>
|
|
<div class=head>
|
|
<div class=text></div>
|
|
<input class=edit spellcheck=false placeholder='Name of the list'>
|
|
<div class=menu>
|
|
<a href=# class=teaser>≡</a>
|
|
<div class=bulk>
|
|
<a href=# class='del-list warn'><u></u> List</a>
|
|
<a href=# class='mov-list-l full'>< Move</a>
|
|
<a href=# class='mov-list-l half'>< Mo</a><a href=# class='mov-list-r half'>ve ></a>
|
|
<a href=# class='mov-list-r full'>Move ></a>
|
|
<a href=# class='add-note'>+ Note</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=notes>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=note>
|
|
<div class=ops>
|
|
<a href=# class=teaser></a>
|
|
<div class=bulk>
|
|
<a href=# class='del-note warn'><u></u></a>
|
|
<a href=# class='raw-note'>R</a>
|
|
<a href=# class='collapse'>_</a>
|
|
</div>
|
|
</div>
|
|
<div class=text>
|
|
</div>
|
|
<textarea class=edit spellcheck=false></textarea>
|
|
</div>
|
|
|
|
<a href=# class=load-board></a>
|
|
|
|
<textarea class=encoder></textarea>
|
|
|
|
<div class=about>
|
|
<h1>Nullboard</h1>
|
|
Minimalist locally-stored kanban board
|
|
<a href=https://nullboard.io target=_blank>https://nullboard.io</a>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class=license>
|
|
</div>
|
|
</tt>
|
|
|
|
</body>
|
|
|
|
<script src="extras/jquery-3.3.1.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js">\x3C/script>')</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function AppConfig()
|
|
{
|
|
this.format = NB.confVersion;
|
|
this.max_undo = 50; // board revisions to keep
|
|
this.theme = null; // default or 'dark'
|
|
this.fsize = null; // default or 'z1'
|
|
this.board = null; // active board
|
|
}
|
|
|
|
function BoardMeta()
|
|
{
|
|
this.title = '';
|
|
this.current = 1; // revision
|
|
this.history = [ ]; // revision IDs
|
|
}
|
|
|
|
class Storage
|
|
{
|
|
constructor()
|
|
{
|
|
this.type = '?';
|
|
|
|
this.conf = null;
|
|
this.boardIndex = new Map();
|
|
}
|
|
|
|
open()
|
|
{
|
|
return this.openInner();
|
|
}
|
|
|
|
wipe()
|
|
{
|
|
return this.wipeInner();
|
|
}
|
|
|
|
getConfig()
|
|
{
|
|
return this.conf;
|
|
}
|
|
|
|
setActiveBoard(board_id)
|
|
{
|
|
var meta = board_id ? this.boardIndex.get(board_id) : true;
|
|
|
|
if (! meta)
|
|
throw `Invalid board_id in setActiveBoard(... ${board_id})`;
|
|
|
|
this.conf.board = board_id;
|
|
return this.setJson('config', this.conf);
|
|
}
|
|
|
|
setTheme(theme)
|
|
{
|
|
this.conf.theme = theme;
|
|
return this.setJson('config', this.conf);
|
|
}
|
|
|
|
setFsize(fsize)
|
|
{
|
|
this.conf.fsize = fsize;
|
|
return this.setJson('config', this.conf);
|
|
}
|
|
|
|
//
|
|
|
|
getBoardIndex()
|
|
{
|
|
return this.boardIndex;
|
|
}
|
|
|
|
saveBoard(board)
|
|
{
|
|
/*
|
|
* 1. assign new revision (next unused)
|
|
* 2. trim all in-between revisions bypassed by undos if any
|
|
* 3. cap history as per config
|
|
*/
|
|
var meta = this.boardIndex.get(board.id);
|
|
var ok_data, ok_meta;
|
|
|
|
delete board.history; // remove temporarily
|
|
|
|
if (! meta)
|
|
{
|
|
board.revision = 1;
|
|
|
|
ok_data = this.setJson('board.' + board.id + '.' + board.revision, board);
|
|
|
|
meta = new BoardMeta();
|
|
meta.title = board.title || '(Untitled board)';
|
|
meta.current = board.revision;
|
|
meta.history = [ board.revision ];
|
|
|
|
this.boardIndex.set(board.id, meta);
|
|
}
|
|
else
|
|
{
|
|
var rev_old = board.revision;
|
|
var rev_new = meta.history[0] + 1;
|
|
|
|
board.revision = rev_new;
|
|
|
|
ok_data = this.setJson('board.' + board.id + '.' + board.revision, board);
|
|
|
|
meta.title = board.title || '(Untitled board)';
|
|
meta.current = board.revision;
|
|
|
|
// trim revisions skipped over with undo and cap the revision count
|
|
|
|
var rebuild = [ board.revision ];
|
|
|
|
for (var rev of meta.history)
|
|
{
|
|
if ( (rev_old < rev && rev < rev_new) || (rebuild.length >= this.conf.max_undo) )
|
|
{
|
|
this.delItem('board.' + board.id + '.' + rev);
|
|
console.log( `Deleted revision ${rev} of ${board.id} (${board.title})` );
|
|
}
|
|
else
|
|
{
|
|
rebuild.push(rev);
|
|
}
|
|
}
|
|
|
|
meta.history = rebuild;
|
|
}
|
|
|
|
ok_meta = this.setJson('board.' + board.id + '.meta', meta);
|
|
|
|
board.history = meta.history; // restore
|
|
|
|
console.log( `Saved revision ${board.revision} of ${board.id} (${board.title}), ok = ${ok_data} | ${ok_meta}` );
|
|
return ok_data && ok_meta;
|
|
}
|
|
|
|
loadBoard(board_id, revision)
|
|
{
|
|
var meta = this.boardIndex.get(board_id);
|
|
|
|
if (! meta)
|
|
throw `Invalid board_id in loadBoard(${board_id}, ${revision})`;
|
|
|
|
if (revision == null)
|
|
revision = meta.current;
|
|
|
|
if (! meta.history.includes(revision))
|
|
throw `Invalid revision in loadBoard(${board_id}, ${revision})`;
|
|
|
|
var board = this.getJson('board.' + board_id + '.' + revision);
|
|
if (! board)
|
|
return false;
|
|
|
|
if (board.format != NB.blobVersion)
|
|
{
|
|
console.log('Board ' + board_id + '/' + revision + ' format is unsupported');
|
|
console.log('Have [' + board.format + '], need [' + NB.blobVersion);
|
|
return false;
|
|
}
|
|
|
|
if (board.revision != revision)
|
|
{
|
|
console.log('Board ' + board_id + '/' + revision + ' revision is wrong');
|
|
console.log('Have [' + board.revision + ']');
|
|
return false;
|
|
}
|
|
|
|
board.history = meta.history;
|
|
|
|
console.log( `Loaded revision ${board.revision} of ${board.id} (${board.title})` );
|
|
|
|
return Object.assign(new Board(), board);
|
|
}
|
|
|
|
nukeBoard(board_id)
|
|
{
|
|
var meta = this.boardIndex.get(board_id);
|
|
|
|
if (! meta)
|
|
throw `Invalid board_id in nukeBoard(${board.id})`;
|
|
|
|
var title = meta.title + '';
|
|
|
|
for (var rev of meta.history)
|
|
this.delItem('board.' + board_id + '.' + rev);
|
|
|
|
this.delItem('board.' + board_id + '.meta');
|
|
this.boardIndex.delete(board_id);
|
|
|
|
console.log( `Deleted board ${board_id} (${title})` );
|
|
}
|
|
|
|
getBoardHistory(board_id)
|
|
{
|
|
var meta = this.boardIndex.get(board_id);
|
|
|
|
if (! meta)
|
|
throw `Invalid board_id in getBoardHistory(${board_id})`;
|
|
|
|
return meta.history;
|
|
}
|
|
|
|
setBoardRevision(board_id, revision)
|
|
{
|
|
var meta = this.boardIndex.get(board_id);
|
|
|
|
if (! meta)
|
|
throw `Invalid board_id in setBoardRevision(${board_id}, ${revision})`;
|
|
|
|
if (! meta.history.includes(revision))
|
|
throw `Invalid revision in setBoardRevision(${board_id}, ${revision})`;
|
|
|
|
if (meta.current == revision) // wth
|
|
return true;
|
|
|
|
meta.current = revision;
|
|
|
|
return this.setJson('board.' + board_id + '.meta', meta);
|
|
}
|
|
|
|
/*
|
|
* private
|
|
*/
|
|
|
|
getItem(name) { throw 'implement-me'; }
|
|
setItem(name) { throw 'implement-me'; }
|
|
delItem(name) { throw 'implement-me'; }
|
|
|
|
openInner() { throw 'implement-me'; }
|
|
wipeInner() { throw 'implement-me'; }
|
|
|
|
getJson(name)
|
|
{
|
|
var foo = this.getItem(name);
|
|
if (! foo) return false;
|
|
|
|
try { foo = JSON.parse(foo); } catch (x) { return false; }
|
|
return foo;
|
|
}
|
|
|
|
setJson(name, val)
|
|
{
|
|
if (! this.setItem(name, JSON.stringify(val)))
|
|
{
|
|
console.log("setJson(" + name + ") failed");
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
};
|
|
|
|
class Storage_Local extends Storage
|
|
{
|
|
constructor()
|
|
{
|
|
super();
|
|
this.type = 'LocalStorage';
|
|
}
|
|
|
|
getItem(name)
|
|
{
|
|
return localStorage.getItem('nullboard.' + name);
|
|
}
|
|
|
|
setItem(name, val)
|
|
{
|
|
localStorage.setItem('nullboard.' + name, val);
|
|
return true;
|
|
}
|
|
|
|
delItem(name)
|
|
{
|
|
localStorage.removeItem('nullboard.' + name);
|
|
return true;
|
|
}
|
|
|
|
openInner()
|
|
{
|
|
var conf = this.getJson('config');
|
|
|
|
this.conf = new AppConfig();
|
|
|
|
if (conf && (conf.format != NB.confVersion))
|
|
{
|
|
if (! confirm('Preferences are stored in an unsupported format. Reset them?'))
|
|
return false;
|
|
|
|
conf = null;
|
|
}
|
|
|
|
if (conf)
|
|
{
|
|
this.conf = conf;
|
|
}
|
|
else
|
|
{
|
|
this.conf.theme = this.getItem('theme');
|
|
this.conf.fsize = this.getItem('fsize');
|
|
this.conf.board = this.getItem('last_board');
|
|
|
|
if (! this.setJson('config', this.conf))
|
|
{
|
|
this.conf = null;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
this.boardIndex = new Map();
|
|
|
|
for (var i=0; i<localStorage.length; i++)
|
|
{
|
|
var k = localStorage.key(i);
|
|
var m = k.match(/^nullboard\.board\.(\d+).meta$/);
|
|
var meta;
|
|
|
|
if (m)
|
|
{
|
|
// new format
|
|
meta = this.getJson('board.' + m[1] + '.meta');
|
|
|
|
if (meta)
|
|
{
|
|
for (var x of meta.history)
|
|
if (! this.getJson('board.' + m[1] + '.' + x))
|
|
{
|
|
console.log( `bad meta for ${m[1]}` );
|
|
meta = this.rebuildMeta(m[1]);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// old format
|
|
m = k.match(/^nullboard\.board\.(\d+)$/);
|
|
meta = m ? this.rebuildMeta(m[1]) : null;
|
|
}
|
|
|
|
if (! meta)
|
|
continue;
|
|
|
|
meta = Object.assign(new BoardMeta(), meta);
|
|
this.boardIndex.set( parseInt(m[1]), meta );
|
|
}
|
|
|
|
if (this.conf.board && ! this.boardIndex.has(this.conf.board))
|
|
this.conf.board = null;
|
|
|
|
this.type = 'LocalStorage';
|
|
|
|
return true;
|
|
}
|
|
|
|
wipeInner()
|
|
{
|
|
for (var i=0; i<localStorage.length; )
|
|
{
|
|
var k = localStorage.key(i);
|
|
var m = k.match(/^nullboard\./);
|
|
|
|
if (m) localStorage.removeItem(k);
|
|
else i++;
|
|
}
|
|
|
|
this.conf = new AppConfig();
|
|
this.boardIndex = new Map();
|
|
}
|
|
|
|
/*
|
|
* private
|
|
*/
|
|
rebuildMeta(board_id)
|
|
{
|
|
var meta = new BoardMeta();
|
|
|
|
// get current revision
|
|
|
|
meta.current = this.getItem('board.' + board_id); // may be null
|
|
|
|
// load history
|
|
|
|
var re = new RegExp('^nullboard\.board\.' + board_id + '\.(\\d+)$');
|
|
var revs = new Array();
|
|
|
|
for (var i=0; i<localStorage.length; i++)
|
|
{
|
|
var m = localStorage.key(i).match(re);
|
|
if (m) revs.push( parseInt(m[1]) );
|
|
}
|
|
|
|
if (! revs.length)
|
|
return false;
|
|
|
|
revs.sort(function(a,b){ return b-a; });
|
|
meta.history = revs;
|
|
|
|
// validate current revision
|
|
|
|
if (! meta.history.includes(meta.current))
|
|
meta.current = meta.history[meta.history.length-1];
|
|
|
|
// get board title
|
|
|
|
var board = this.getJson('board.' + board_id + '.' + meta.current)
|
|
meta.title = (board.title || '(untitled board)');
|
|
|
|
this.setJson('board.' + board_id + '.meta', meta);
|
|
|
|
return meta;
|
|
}
|
|
}
|
|
|
|
function _rollback()
|
|
{
|
|
localStorage.removeItem('nullboard.config');
|
|
|
|
var metas = [];
|
|
|
|
for (var i=0; i<localStorage.length; i++)
|
|
{
|
|
var m = localStorage.key(i).match(/^nullboard\.board\.(\d+)\.meta$/);
|
|
if (m) metas.push(m[0]);
|
|
}
|
|
|
|
for (var k of metas) localStorage.removeItem(k);
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function Note(text)
|
|
{
|
|
this.text = text;
|
|
this.raw = false;
|
|
this.min = false;
|
|
}
|
|
|
|
function List(title)
|
|
{
|
|
this.title = title;
|
|
this.notes = [ ];
|
|
|
|
this.addNote = function(text)
|
|
{
|
|
var x = new Note(text);
|
|
this.notes.push(x);
|
|
return x;
|
|
}
|
|
}
|
|
|
|
function Board(title)
|
|
{
|
|
this.format = NB.blobVersion;
|
|
this.id = +new Date();
|
|
this.revision = 0;
|
|
this.title = title || '';
|
|
this.lists = [ ];
|
|
|
|
this.addList = function(title)
|
|
{
|
|
var x = new List(title);
|
|
this.lists.push(x);
|
|
return x;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function Drag()
|
|
{
|
|
this.item = null; // .text of .note
|
|
this.org_loc = 0; // original noteLocation();
|
|
this.priming = null;
|
|
this.primexy = { x: 0, y: 0 };
|
|
this.$drag = null;
|
|
this.mouse = null;
|
|
this.delta = { x: 0, y: 0 };
|
|
this.in_swap = false;
|
|
|
|
this.prime = function(item, ev)
|
|
{
|
|
var self = this;
|
|
this.item = item;
|
|
this.priming = setTimeout(function(){ self.onPrimed.call(self); }, ev.altKey ? 1 : 500);
|
|
this.primexy.x = ev.clientX;
|
|
this.primexy.y = ev.clientY;
|
|
this.mouse = ev;
|
|
}
|
|
|
|
this.cancelPriming = function()
|
|
{
|
|
if (this.item && this.priming)
|
|
{
|
|
clearTimeout(this.priming);
|
|
this.priming = null;
|
|
this.item = null;
|
|
}
|
|
}
|
|
|
|
this.end = function()
|
|
{
|
|
this.cancelPriming();
|
|
this.stopDragging();
|
|
}
|
|
|
|
this.isActive = function()
|
|
{
|
|
return this.item && (this.priming == null);
|
|
}
|
|
|
|
this.onPrimed = function()
|
|
{
|
|
clearTimeout(this.priming);
|
|
this.priming = null;
|
|
this.item.was_dragged = true;
|
|
|
|
var $text = $(this.item);
|
|
var $note = $text.parent();
|
|
$note.addClass('dragging');
|
|
|
|
this.org_loc = noteLocation($note);
|
|
|
|
$('body').append('<div class=dragster></div>');
|
|
var $drag = $('body .dragster').last();
|
|
|
|
if ($note.hasClass('collapsed'))
|
|
$drag.addClass('collapsed');
|
|
|
|
$drag.html( $text.html() );
|
|
|
|
$drag.innerWidth ( $note.innerWidth() );
|
|
$drag.innerHeight( $note.innerHeight() );
|
|
|
|
this.$drag = $drag;
|
|
|
|
var $win = $(window);
|
|
var scroll_x = $win.scrollLeft();
|
|
var scroll_y = $win.scrollTop();
|
|
|
|
var pos = $note.offset();
|
|
this.delta.x = pos.left - this.mouse.clientX - scroll_x;
|
|
this.delta.y = pos.top - this.mouse.clientY - scroll_y;
|
|
this.adjustDrag();
|
|
|
|
$drag.css({ opacity: 1 });
|
|
|
|
$('body').addClass('dragging');
|
|
}
|
|
|
|
this.adjustDrag = function()
|
|
{
|
|
if (! this.$drag)
|
|
return;
|
|
|
|
var $win = $(window);
|
|
var scroll_x = $win.scrollLeft();
|
|
var scroll_y = $win.scrollTop();
|
|
|
|
var drag_x = this.mouse.clientX + this.delta.x + scroll_x;
|
|
var drag_y = this.mouse.clientY + this.delta.y + scroll_y;
|
|
|
|
this.$drag.offset({ left: drag_x, top: drag_y });
|
|
|
|
if (this.in_swap)
|
|
return;
|
|
|
|
/*
|
|
* see if a swap is in order
|
|
*/
|
|
var pos = this.$drag.offset();
|
|
var x = pos.left + this.$drag.width()/2 - $win.scrollLeft();
|
|
var y = pos.top + this.$drag.height()/2 - $win.scrollTop();
|
|
|
|
var drag = this;
|
|
var prepend = null; // if dropping on the list header
|
|
var target = null; // if over some item
|
|
var before = false; // if should go before that item
|
|
|
|
$(".board .list").each(function(){
|
|
|
|
var list = this;
|
|
var rc = list.getBoundingClientRect();
|
|
var y_min = rc.bottom;
|
|
var n_min = null;
|
|
|
|
if (x <= rc.left || rc.right <= x || y <= rc.top || rc.bottom <= y)
|
|
return;
|
|
|
|
var $list = $(list);
|
|
|
|
$list.find('.note').each(function(){
|
|
var note = this;
|
|
var rc = note.getBoundingClientRect();
|
|
|
|
if (rc.top < y_min)
|
|
{
|
|
y_min = rc.top;
|
|
n_min = note;
|
|
}
|
|
|
|
if (y <= rc.top || rc.bottom <= y)
|
|
return;
|
|
|
|
if (note == drag.item.parentNode)
|
|
return;
|
|
|
|
target = note;
|
|
before = (y < (rc.top + rc.bottom)/2);
|
|
});
|
|
|
|
/*
|
|
* dropping on the list header
|
|
*/
|
|
if (! target && y < y_min)
|
|
{
|
|
if (n_min) // non-empty list
|
|
{
|
|
target = n_min;
|
|
before = true;
|
|
}
|
|
else
|
|
{
|
|
prepend = list;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (! target && ! prepend)
|
|
return;
|
|
|
|
if (target)
|
|
{
|
|
if (target == drag.item.parentNode)
|
|
return;
|
|
|
|
if (! before && target.nextSibling == drag.item.parentNode ||
|
|
before && target.previousSibling == drag.item.parentNode)
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
if (prepend.firstChild == drag.item.parentNode)
|
|
return;
|
|
}
|
|
|
|
/*
|
|
* swap 'em
|
|
*/
|
|
var $have = $(this.item.parentNode);
|
|
var $want = $have.clone();
|
|
|
|
$want.css({ display: 'none' });
|
|
|
|
if (target)
|
|
{
|
|
var $target = $(target);
|
|
|
|
if (before)
|
|
{
|
|
$want.insertBefore($target);
|
|
$want = $target.prev();
|
|
}
|
|
else
|
|
{
|
|
$want.insertAfter($target);
|
|
$want = $target.next();
|
|
}
|
|
|
|
drag.item = $want.find('.text')[0];
|
|
}
|
|
else
|
|
{
|
|
var $notes = $(prepend).find('.notes');
|
|
|
|
$notes.prepend($want);
|
|
|
|
drag.item = $notes.find('.note .text')[0];
|
|
}
|
|
|
|
//
|
|
var h = $have.height();
|
|
|
|
drag.in_swap = true;
|
|
|
|
$want.css({ display: 'block', height: 0, marginTop: 0 });
|
|
|
|
$want.animate({ height: h }, {
|
|
duration: 'fast',
|
|
progress: function() {
|
|
$have.height( h - $(this).height() );
|
|
},
|
|
complete: function() {
|
|
$have.remove();
|
|
$want.css({ marginTop: 5, opacity: '', height: '' });
|
|
drag.in_swap = false;
|
|
drag.adjustDrag();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.onMouseMove = function(ev)
|
|
{
|
|
this.mouse = ev;
|
|
|
|
if (! this.item)
|
|
return;
|
|
|
|
if (this.priming)
|
|
{
|
|
var x = ev.clientX - this.primexy.x;
|
|
var y = ev.clientY - this.primexy.y;
|
|
if (x*x + y*y > 5*5)
|
|
this.onPrimed();
|
|
}
|
|
else
|
|
{
|
|
this.adjustDrag();
|
|
}
|
|
}
|
|
|
|
this.stopDragging = function()
|
|
{
|
|
var $text = $(this.item);
|
|
var $note = $text.parent();
|
|
$note.addClass('dragging');
|
|
|
|
$note.removeClass('dragging');
|
|
$('body').removeClass('dragging');
|
|
|
|
if (this.$drag)
|
|
{
|
|
this.$drag.remove();
|
|
this.$drag = null;
|
|
|
|
if (window.getSelection) { window.getSelection().removeAllRanges(); }
|
|
else if (document.selection) { document.selection.empty(); }
|
|
|
|
var loc_now = noteLocation($note);
|
|
if (loc_now != this.org_loc)
|
|
saveBoard();
|
|
}
|
|
|
|
this.item = null;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
/*
|
|
* poor man's error handling -- $fixme
|
|
*/
|
|
var easyMartina = false;
|
|
|
|
window.onerror = function(message, file, line, col, e){
|
|
var cb1;
|
|
if (! easyMartina) alert("Error occurred: " + e.message);
|
|
return false;
|
|
};
|
|
|
|
window.addEventListener("error", function(e) {
|
|
var cb2;
|
|
if (! easyMartina) alert("Error occurred: " + e.error.message);
|
|
return false;
|
|
});
|
|
|
|
/*
|
|
* notes / lists / boards
|
|
*/
|
|
function addNote($list, $after, $before)
|
|
{
|
|
var $note = $('tt .note').clone();
|
|
var $notes = $list.find('.notes');
|
|
|
|
$note.find('.text').html('');
|
|
$note.addClass('brand-new');
|
|
|
|
if ($before)
|
|
{
|
|
$before.before($note);
|
|
$note = $before.prev();
|
|
}
|
|
else
|
|
if ($after)
|
|
{
|
|
$after.after($note);
|
|
$note = $after.next();
|
|
}
|
|
else
|
|
{
|
|
$notes.append($note);
|
|
$note = $notes.find('.note').last();
|
|
}
|
|
|
|
$note.find('.text').click();
|
|
}
|
|
|
|
function deleteNote($note)
|
|
{
|
|
$note
|
|
.animate({ opacity: 0 }, 'fast')
|
|
.slideUp('fast')
|
|
.queue(function(){
|
|
$note.remove();
|
|
saveBoard();
|
|
});
|
|
}
|
|
|
|
function noteLocation($item)
|
|
{
|
|
var loc = 0;
|
|
for (var $p = $item.closest('.note'); $p.length; $p = $p.prev(), loc += 1);
|
|
for (var $p = $item.closest('.list'); $p.length; $p = $p.prev(), loc += 10000);
|
|
return loc;
|
|
}
|
|
|
|
//
|
|
function addList()
|
|
{
|
|
var $board = $('.wrap .board');
|
|
var $lists = $board.find('.lists');
|
|
var $list = $('tt .list').clone();
|
|
|
|
$list.find('.text').html('');
|
|
$list.find('.head').addClass('brand-new');
|
|
|
|
$lists.append($list);
|
|
$board.find('.lists .list .head .text').last().click();
|
|
|
|
var lists = $lists[0];
|
|
lists.scrollLeft = Math.max(0, lists.scrollWidth - lists.clientWidth);
|
|
|
|
setupListScrolling();
|
|
}
|
|
|
|
function deleteList($list)
|
|
{
|
|
var empty = true;
|
|
|
|
$list.find('.note .text').each(function(){
|
|
empty &= ($(this).html().length == 0);
|
|
});
|
|
|
|
if (! empty && ! confirm("Delete this list and all its notes?"))
|
|
return;
|
|
|
|
$list
|
|
.animate({ opacity: 0 })
|
|
.queue(function(){
|
|
$list.remove();
|
|
saveBoard();
|
|
});
|
|
|
|
setupListScrolling();
|
|
}
|
|
|
|
function moveList($list, left)
|
|
{
|
|
var $a = $list;
|
|
var $b = left ? $a.prev() : $a.next();
|
|
|
|
var $menu_a = $a.find('> .head .menu .bulk');
|
|
var $menu_b = $b.find('> .head .menu .bulk');
|
|
|
|
var pos_a = $a.offset().left;
|
|
var pos_b = $b.offset().left;
|
|
|
|
$a.css({ position: 'relative' });
|
|
$b.css({ position: 'relative' });
|
|
|
|
$menu_a.hide();
|
|
$menu_b.hide();
|
|
|
|
$a.animate({ left: (pos_b - pos_a) + 'px' }, 'fast');
|
|
$b.animate({ left: (pos_a - pos_b) + 'px' }, 'fast', function(){
|
|
|
|
if (left) $list.prev().before($list);
|
|
else $list.before($list.next());
|
|
|
|
$a.css({ position: '', left: '' });
|
|
$b.css({ position: '', left: '' });
|
|
|
|
$menu_a.css({ display: '' });
|
|
$menu_b.css({ display: '' });
|
|
|
|
saveBoard();
|
|
});
|
|
}
|
|
|
|
//
|
|
function openBoard(board_id)
|
|
{
|
|
closeBoard(true);
|
|
|
|
NB.board = NB.storage.loadBoard(board_id, null);
|
|
NB.storage.setActiveBoard(board_id);
|
|
|
|
showBoard(true);
|
|
}
|
|
|
|
function reopenBoard(revision)
|
|
{
|
|
var board_id = NB.board.id;
|
|
|
|
var via_menu = $('.wrap .board > .head .menu .bulk').is(':visible');
|
|
|
|
NB.storage.setBoardRevision(board_id, revision);
|
|
|
|
openBoard(board_id);
|
|
|
|
if (via_menu)
|
|
{
|
|
var $menu = $('.wrap .board > .head .menu');
|
|
var $teaser = $menu.find('.teaser');
|
|
var $bulk = $menu.find('.bulk');
|
|
|
|
$teaser.hide().delay(100).queue(function(){ $(this).css('display', '').dequeue(); });
|
|
$bulk.show().delay(100).queue(function(){ $(this).css('display', '').dequeue(); });
|
|
}
|
|
}
|
|
|
|
function closeBoard(quick)
|
|
{
|
|
var $board = $('.wrap .board');
|
|
|
|
if (quick)
|
|
$board.remove();
|
|
else
|
|
$board
|
|
.animate({ opacity: 0 }, 'fast')
|
|
.queue(function(){ $board.remove(); });
|
|
|
|
NB.board = null;
|
|
NB.storage.setActiveBoard(null);
|
|
|
|
updateUndoRedo();
|
|
updateBoardIndex();
|
|
}
|
|
|
|
//
|
|
function addBoard()
|
|
{
|
|
closeBoard(true);
|
|
|
|
NB.board = new Board();
|
|
|
|
showBoard(true);
|
|
|
|
$('.wrap .board .head').addClass('brand-new');
|
|
$('.wrap .board .head .text').click();
|
|
}
|
|
|
|
function saveBoard()
|
|
{
|
|
var $board = $('.wrap .board');
|
|
var board = Object.assign({}, NB.board); // id, revision & title
|
|
|
|
board.lists = [];
|
|
|
|
$board.find('.list').each(function(){
|
|
var $list = $(this);
|
|
var l = board.addList( getText($list.find('.head .text')) );
|
|
|
|
$list.find('.note').each(function(){
|
|
var $note = $(this)
|
|
var n = l.addNote( getText($note.find('.text')) );
|
|
n.raw = $note.hasClass('raw');
|
|
n.min = $note.hasClass('collapsed');
|
|
});
|
|
});
|
|
|
|
NB.storage.saveBoard(board);
|
|
NB.board = board;
|
|
|
|
updateUndoRedo();
|
|
updateBoardIndex();
|
|
}
|
|
|
|
function deleteBoard()
|
|
{
|
|
var $list = $('.wrap .board .list');
|
|
|
|
if ($list.length && ! confirm("PERMANENTLY delete this board, all its lists and their notes?"))
|
|
return;
|
|
|
|
NB.storage.nukeBoard(NB.board.id);
|
|
|
|
closeBoard();
|
|
}
|
|
|
|
//
|
|
function undoBoard()
|
|
{
|
|
if (! NB.board)
|
|
return false;
|
|
|
|
var hist = NB.storage.getBoardHistory(NB.board.id);
|
|
var have = NB.board.revision;
|
|
var want = 0;
|
|
|
|
for (var i=0; i<hist.length-1 && ! want; i++)
|
|
if (have == hist[i])
|
|
want = hist[i+1];
|
|
|
|
if (! want)
|
|
{
|
|
console.log('Undo - failed');
|
|
return false;
|
|
}
|
|
|
|
console.log('Undo -> ' + want);
|
|
|
|
reopenBoard(want);
|
|
return true;
|
|
}
|
|
|
|
function redoBoard()
|
|
{
|
|
if (! NB.board)
|
|
return false;
|
|
|
|
var hist = NB.storage.getBoardHistory(NB.board.id);
|
|
var have = NB.board.revision;
|
|
var want = 0;
|
|
|
|
for (var i=1; i<hist.length && ! want; i++)
|
|
if (have == hist[i])
|
|
want = hist[i-1];
|
|
|
|
if (! want)
|
|
{
|
|
console.log('Redo - failed');
|
|
return false;
|
|
}
|
|
|
|
console.log('Redo -> ' + want);
|
|
|
|
reopenBoard(want);
|
|
return true;
|
|
}
|
|
|
|
//
|
|
function showBoard(quick)
|
|
{
|
|
var board = NB.board;
|
|
|
|
var $wrap = $('.wrap');
|
|
var $bdiv = $('tt .board');
|
|
var $ldiv = $('tt .list');
|
|
var $ndiv = $('tt .note');
|
|
|
|
var $b = $bdiv.clone();
|
|
var $b_lists = $b.find('.lists');
|
|
|
|
$b[0].board_id = board.id;
|
|
setText( $b.find('.head .text'), board.title );
|
|
|
|
board.lists.forEach(function(list){
|
|
|
|
var $l = $ldiv.clone();
|
|
var $l_notes = $l.find('.notes');
|
|
|
|
setText( $l.find('.head .text'), list.title );
|
|
|
|
list.notes.forEach(function(n){
|
|
var $n = $ndiv.clone();
|
|
setText( $n.find('.text'), n.text );
|
|
if (n.raw) $n.addClass('raw');
|
|
if (n.min) $n.addClass('collapsed');
|
|
$l_notes.append($n);
|
|
});
|
|
|
|
$b_lists.append($l);
|
|
});
|
|
|
|
if (quick)
|
|
$wrap.html('').append($b);
|
|
else
|
|
$wrap.html('')
|
|
.css({ opacity: 0 })
|
|
.append($b)
|
|
.animate({ opacity: 1 });
|
|
|
|
updatePageTitle();
|
|
updateUndoRedo();
|
|
updateBoardIndex();
|
|
setupListScrolling();
|
|
}
|
|
|
|
/*
|
|
* demo board
|
|
*/
|
|
function createDemoBoard()
|
|
{
|
|
var blob =
|
|
'{"format":20190412,"id":1555071015420,"revision":581,"title":"Welcome to Nullboard","lists":[{"title":"The Use' +
|
|
'r Manual","notes":[{"text":"This is a note.\\nA column of notes is a list.\\nA set of lists is a board.","raw"' +
|
|
':false,"min":false},{"text":"All data is saved locally.\\nThe whole thing works completely offline.","raw":fal' +
|
|
'se,"min":false},{"text":"Last 50 board revisions are retained.","raw":false,"min":false},{"text":"Ctrl-Z is Un' +
|
|
'do - goes one revision back.\\nCtrl-Y is Redo - goes one revision forward.","raw":false,"min":false},{"tex' +
|
|
't":"Caveats","raw":true,"min":false},{"text":"Desktop-oriented.\\nMobile support is basically untested.","raw"' +
|
|
':false,"min":false},{"text":"Works in Firefox, Chrome is supported.\\nShould work in Safari, may work in Edge.' +
|
|
'","raw":false,"min":false},{"text":"Still very much in beta. Caveat emptor.","raw":false,"min":false},{"text":' +
|
|
'"Issues and suggestions","raw":true,"min":false},{"text":"Post them on Github.\\nSee \\"Nullboard\\" at the to' +
|
|
'p left for the link.","raw":false,"min":false}]},{"title":"Things to try","notes":[{"text":"\u2022 Click on ' +
|
|
'a note to edit.","raw":false,"min":false},{"text":"\u2022 Click outside of it when done editing.\\n\u2022 ' +
|
|
'Alternatively, use Shift-Enter.","raw":false,"min":false},{"text":"\u2022 To discard changes press Escape.",' +
|
|
'"raw":false,"min":false},{"text":"\u2022 Try Ctrl-Enter, see what it does.\\n\u2022 Try Ctrl-Shift-Enter t' +
|
|
'oo.","raw":false,"min":false},{"text":"\u2022 Hover over a note to show its \u2261 menu.\\n\u2022 Hover ' +
|
|
'over \u2261 to reveal the options.","raw":false,"min":false},{"text":"\u2022 X deletes the note.\\n\u2022' +
|
|
' R changes how a note looks.\\n\u2022 _ collapses the note.","raw":false,"min":false},{"text":"This is a ' +
|
|
'raw note.","raw":true,"min":false},{"text":"This is a collapsed note. Only its first line is visible. Useful f' +
|
|
'or keeping lists compact.","raw":false,"min":true}, {"text":"Links","raw":true,"min":false}, {"text":"Links pu' +
|
|
'lse on hover and can be opened via the right-click menu - https://nullboard.io","raw":false,"min":false}, {"tex' +
|
|
't":"Pressing CapsLock highlights all links and makes them left-clickable.","raw":false,"min":false}]},{"title"' +
|
|
':"More things to try","notes":[{"text":"\u2022 Drag notes around to rearrange.\\n\u2022 Works between the ' +
|
|
'lists too.","raw":false,"min":false},{"text":"\u2022 Click on a list name to edit.\\n\u2022 Enter to save,' +
|
|
' Esc to cancel.","raw":false,"min":false},{"text":"\u2022 Try adding a new list.\\n\u2022 Try deleting one' +
|
|
'. This _can_ be undone.","raw":false,"min":false},{"text":"\u2022 Same for the board name.","raw":false,"m' +
|
|
'in":false},{"text":"Boards","raw":true,"min":false},{"text":"\u2022 Check out \u2261 at the top right.",' +
|
|
'"raw":false,"min":false},{"text":"\u2022 Try adding a new board.\\n\u2022 Try switching between the boards' +
|
|
'.","raw":false,"min":false},{"text":"\u2022 Try deleting a board. Unlike deleting a\\n list this _canno' +
|
|
't_ be undone.","raw":false,"min":false},{"text":"\u2022 Export the board (save to a file, as json)\\n' +
|
|
'\u2022 Import the board (load from a save)","raw":false,"min":false}]}]}';
|
|
|
|
var demo = JSON.parse(blob);
|
|
|
|
if (! demo)
|
|
return false;
|
|
|
|
demo.id = +new Date();
|
|
demo.revision = 0;
|
|
|
|
NB.storage.saveBoard(demo);
|
|
NB.storage.setActiveBoard(demo.id);
|
|
|
|
return Object.assign(new Board(), demo);
|
|
}
|
|
|
|
/*
|
|
* board export / import
|
|
*/
|
|
function exportBoard()
|
|
{
|
|
var blob, file;
|
|
|
|
if (! NB.board)
|
|
{
|
|
var index = NB.storage.getBoardIndex();
|
|
var all = [];
|
|
|
|
boards.forEach(function(meta, board_id){
|
|
all.push( NB.storage.loadBoard(board_id, null) );
|
|
})
|
|
|
|
blob = JSON.stringify(all);
|
|
file = `Nullboard.nbx`;
|
|
}
|
|
else
|
|
{
|
|
var board = NB.board;
|
|
blob = JSON.stringify(board);
|
|
file = `Nullboard-${board.id}-${board.title}.nbx`;
|
|
}
|
|
|
|
blob = encodeURIComponent(blob);
|
|
blob = "data:application/octet-stream," + blob;
|
|
|
|
return { blob: blob, file: file };
|
|
}
|
|
|
|
function checkImport(foo)
|
|
{
|
|
var props = [ 'format', 'id', 'revision', 'title', 'lists' ];
|
|
|
|
for (var i=0; i<props.length; i++)
|
|
if (! foo.hasOwnProperty(props[i]))
|
|
return "Required board properties are missing.";
|
|
|
|
if (! foo.id || ! foo.revision || ! Array.isArray(foo.lists))
|
|
return "Required board properties are empty.";
|
|
|
|
if (foo.format != NB.blobVersion)
|
|
return `Unsupported blob format "${board.format}", expecting "${NB.blobVersion}".`;
|
|
|
|
return null;
|
|
}
|
|
|
|
function importBoard(blob)
|
|
{
|
|
var data;
|
|
|
|
try
|
|
{
|
|
data = JSON.parse(blob);
|
|
}
|
|
catch (x)
|
|
{
|
|
alert('File is not in a valid JSON format.');
|
|
return false;
|
|
}
|
|
|
|
if (! Array.isArray(data))
|
|
data = [ data ];
|
|
|
|
var index = NB.storage.getBoardIndex();
|
|
var msg, one, all = '';
|
|
|
|
for (var i=0; i<data.length; i++)
|
|
{
|
|
var board = data[i];
|
|
|
|
var whoops = checkImport(board);
|
|
if (whoops)
|
|
{
|
|
alert(whoops);
|
|
return false;
|
|
}
|
|
|
|
var title = board.title || '(untitled board)';
|
|
one = `"${title}", ID ${board.id}, revision ${board.revision}`;
|
|
all += ` ID ${board.id}, revision ${board.revision} - "${title}" \n`;
|
|
}
|
|
|
|
if (data.length == 1) msg = `Import a board called ${one} ?`;
|
|
else msg = `About to import the following boards:\n\n${all}\nProceed?`;
|
|
|
|
if (! confirm(msg))
|
|
return false;
|
|
|
|
for (var i=0; i<data.length; i++)
|
|
{
|
|
var board = data[i];
|
|
|
|
if (index.has(board.id))
|
|
{
|
|
console.log(`Import: board ${board.id} (${board.title}) will be assigned new ID`);
|
|
board.id = +new Date();
|
|
}
|
|
|
|
board.revision--; // save will ++ it back
|
|
|
|
if (! NB.storage.saveBoard(board)) // this updates 'index'
|
|
{
|
|
alert(`Failed to save board ${board.id}. Import failed.`);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
openBoard(data[0].id);
|
|
}
|
|
|
|
/*
|
|
*
|
|
*/
|
|
function updatePageTitle()
|
|
{
|
|
var title = 'Nullboard';
|
|
|
|
if (NB.board)
|
|
{
|
|
title = NB.board.title;
|
|
title = 'NB - ' + (title || '(untitled board)');
|
|
}
|
|
|
|
document.title = title;
|
|
}
|
|
|
|
function updateUndoRedo()
|
|
{
|
|
var $undo = $('.board .menu .undo-board');
|
|
var $redo = $('.board .menu .redo-board');
|
|
|
|
var undo = false;
|
|
var redo = false;
|
|
|
|
if (NB.board && NB.board.revision)
|
|
{
|
|
var history = NB.storage.getBoardHistory(NB.board.id);
|
|
var rev = NB.board.revision;
|
|
|
|
undo = (rev != history[history.length-1]);
|
|
redo = (rev != history[0]);
|
|
}
|
|
|
|
if (undo) $undo.show(); else $undo.hide();
|
|
if (redo) $redo.show(); else $redo.hide();
|
|
}
|
|
|
|
function updateBoardIndex()
|
|
{
|
|
var $index = $('.config .boards');
|
|
var $export = $('.config .exp-board');
|
|
var $entry = $('tt .load-board');
|
|
|
|
var $board = $('.wrap .board');
|
|
var id_now = NB.board && NB.board.id;
|
|
var empty = true;
|
|
|
|
$index.html('');
|
|
$index.hide();
|
|
|
|
var boards = NB.storage.getBoardIndex();
|
|
|
|
boards.forEach(function(meta, board_id){
|
|
|
|
var $e = $entry.clone();
|
|
$e[0].board_id = board_id;
|
|
$e.html(meta.title);
|
|
|
|
if (board_id == id_now)
|
|
$e.addClass('active');
|
|
|
|
$index.append($e);
|
|
empty = false;
|
|
});
|
|
|
|
if (! empty)
|
|
{
|
|
if (id_now) $export.html('Export this board...').show();
|
|
else $export.html('Export all boards...').show();
|
|
}
|
|
else
|
|
{
|
|
$export.hide();
|
|
}
|
|
|
|
if (! empty) $index.show();
|
|
}
|
|
|
|
/*
|
|
* generic utils
|
|
*/
|
|
function htmlEncode(raw)
|
|
{
|
|
return $('tt .encoder').text(raw).html();
|
|
}
|
|
|
|
function setText($note, text)
|
|
{
|
|
$note.attr('_text', text);
|
|
|
|
text = htmlEncode(text);
|
|
hmmm = /\b(https?:\/\/[^\s]+)/mg;
|
|
|
|
text = text.replace(hmmm, function(url){
|
|
return '<a href="' + url + '" target=_blank>' + url + '</a>';
|
|
});
|
|
|
|
$note.html(text);
|
|
}
|
|
|
|
function getText($note)
|
|
{
|
|
return $note.attr('_text');
|
|
}
|
|
|
|
/*
|
|
* inline editing
|
|
*/
|
|
function startEditing($text, ev)
|
|
{
|
|
var $note = $text.parent();
|
|
var $edit = $note.find('.edit');
|
|
|
|
$note[0]._collapsed = $note.hasClass('collapsed');
|
|
$note.removeClass('collapsed');
|
|
|
|
$edit.val( getText($text) );
|
|
$edit.width( $text.width() );
|
|
$edit.height( $text.height() );
|
|
$note.addClass('editing');
|
|
|
|
$edit.focus();
|
|
}
|
|
|
|
function stopEditing($edit, via_escape, via_xclick)
|
|
{
|
|
var $item = $edit.parent();
|
|
if (! $item.hasClass('editing'))
|
|
return;
|
|
|
|
$item.removeClass('editing');
|
|
if ($item[0]._collapsed)
|
|
$item.addClass('collapsed')
|
|
|
|
//
|
|
var $text = $item.find('.text');
|
|
var text_now = $edit.val().trimRight();
|
|
var text_was = getText( $text );
|
|
|
|
//
|
|
var brand_new = $item.hasClass('brand-new');
|
|
$item.removeClass('brand-new');
|
|
|
|
if (via_escape && brand_new)
|
|
{
|
|
$item.closest('.note, .list, .board').remove();
|
|
return;
|
|
}
|
|
|
|
if (via_xclick && brand_new && !text_now.length)
|
|
{
|
|
$item.closest('.note, .list, .board').remove();
|
|
return;
|
|
}
|
|
|
|
if (text_now != text_was || brand_new)
|
|
{
|
|
setText( $text, text_now );
|
|
|
|
if ($item.parent().hasClass('board'))
|
|
NB.board.title = text_now;
|
|
|
|
updatePageTitle();
|
|
saveBoard();
|
|
}
|
|
|
|
//
|
|
if (brand_new && $item.hasClass('list'))
|
|
addNote($item);
|
|
}
|
|
|
|
function handleTab(ev)
|
|
{
|
|
var $this = $(this);
|
|
var $note = $this.closest('.note');
|
|
var $sibl = ev.shiftKey ? $note.prev() : $note.next();
|
|
|
|
if ($sibl.length)
|
|
{
|
|
stopEditing($this, false, false);
|
|
$sibl.find('.text').click();
|
|
}
|
|
}
|
|
|
|
//
|
|
function setRevealState(ev)
|
|
{
|
|
var raw = ev.originalEvent;
|
|
var caps = raw.getModifierState && raw.getModifierState( 'CapsLock' );
|
|
|
|
if (caps) $('body').addClass('reveal');
|
|
else $('body').removeClass('reveal');
|
|
}
|
|
|
|
//
|
|
function showDing()
|
|
{
|
|
$('body')
|
|
.addClass('ding')
|
|
.delay(250)
|
|
.queue(function(){ $(this).removeClass('ding').dequeue(); });
|
|
}
|
|
|
|
/*
|
|
* overlay
|
|
*/
|
|
function showOverlay($div)
|
|
{
|
|
$('.overlay')
|
|
.html('')
|
|
.append($div)
|
|
.css({ opacity: 0, display: 'block' })
|
|
.animate({ opacity: 1 });
|
|
}
|
|
|
|
function hideOverlay()
|
|
{
|
|
$('.overlay').animate({ opacity: 0 }, function(){
|
|
$(this).hide();
|
|
});
|
|
}
|
|
|
|
function haveOverlay()
|
|
{
|
|
return $('.overlay').css('display') != 'none';
|
|
}
|
|
|
|
/*
|
|
* license popup
|
|
*/
|
|
function formatLicense()
|
|
{
|
|
var text = document.head.childNodes[1].nodeValue;
|
|
var pos = text.search('LICENSE');
|
|
var qos = text.search('Software:');
|
|
var bulk;
|
|
|
|
bulk = text.substr(pos, qos-pos);
|
|
bulk = bulk.replace(/([^\n])\n\t/g, '$1 ');
|
|
bulk = bulk.replace(/\n\n\t/g, '\n\n');
|
|
bulk = bulk.replace(/([A-Z ]{7,})/g, '<u>$1</u>');
|
|
|
|
//
|
|
var c1 = [];
|
|
var c2 = [];
|
|
|
|
text.substr(qos).trim().split('\n').forEach(function(line){
|
|
line = line.split(':');
|
|
c1.push( line[0].trim() + ':' );
|
|
c2.push( line[1].trim() );
|
|
});
|
|
|
|
bulk += '<span>' + c1.join('<br>') + '</span>';
|
|
bulk += '<span>' + c2.join('<br>') + '</span>';
|
|
|
|
//
|
|
var links =
|
|
[
|
|
{ text: '2-clause BSD license', href: 'https://opensource.org/licenses/BSD-2-Clause/' },
|
|
{ text: 'Commons Clause', href: 'https://commonsclause.com/' }
|
|
];
|
|
|
|
links.forEach(function(l){
|
|
bulk = bulk.replace(l.text, '<a href="' + l.href + '" target=_blank>' + l.text + '</a>');
|
|
});
|
|
|
|
return bulk.trim();
|
|
}
|
|
|
|
/*
|
|
* adjust this and that
|
|
*/
|
|
function adjustLayout()
|
|
{
|
|
var $body = $('body');
|
|
var $board = $('.board');
|
|
|
|
if (! $board.length)
|
|
return;
|
|
|
|
var lists = $board.find('.list').length;
|
|
var lists_w = (lists < 2) ? 250 : 260 * lists - 10;
|
|
var body_w = $body.width();
|
|
|
|
if (lists_w + 190 <= body_w)
|
|
{
|
|
$board.css('max-width', '');
|
|
$body.removeClass('crowded');
|
|
}
|
|
else
|
|
{
|
|
var max = Math.floor( (body_w - 40) / 260 );
|
|
max = (max < 2) ? 250 : 260 * max - 10;
|
|
$board.css('max-width', max + 'px');
|
|
$body.addClass('crowded');
|
|
}
|
|
}
|
|
|
|
//
|
|
function adjustListScroller()
|
|
{
|
|
var $board = $('.board');
|
|
if (! $board.length)
|
|
return;
|
|
|
|
var $lists = $('.board .lists');
|
|
var $scroller = $('.board .lists-scroller');
|
|
var $inner = $scroller.find('div');
|
|
|
|
var max = $board.width();
|
|
var want = $lists[0].scrollWidth;
|
|
var have = $inner.width();
|
|
|
|
if (want <= max)
|
|
{
|
|
$scroller.hide();
|
|
return;
|
|
}
|
|
|
|
$scroller.show();
|
|
if (want == have)
|
|
return;
|
|
|
|
$inner.width(want);
|
|
cloneScrollPos($lists, $scroller);
|
|
}
|
|
|
|
function cloneScrollPos($src, $dst)
|
|
{
|
|
var src = $src[0];
|
|
var dst = $dst[0];
|
|
|
|
if (src._busyScrolling)
|
|
{
|
|
src._busyScrolling--;
|
|
return;
|
|
}
|
|
|
|
dst._busyScrolling++;
|
|
dst.scrollLeft = src.scrollLeft;
|
|
}
|
|
|
|
function setupListScrolling()
|
|
{
|
|
var $lists = $('.board .lists');
|
|
var $scroller = $('.board .lists-scroller');
|
|
|
|
adjustListScroller();
|
|
|
|
$lists[0]._busyScrolling = 0;
|
|
$scroller[0]._busyScrolling = 0;
|
|
|
|
$scroller.on('scroll', function(){ cloneScrollPos($scroller, $lists); });
|
|
$lists .on('scroll', function(){ cloneScrollPos($lists, $scroller); });
|
|
|
|
adjustLayout();
|
|
}
|
|
|
|
/*
|
|
* some global variables, fiiinally
|
|
*/
|
|
var NB =
|
|
{
|
|
codeVersion: 20210331,
|
|
blobVersion: 20190412, // blobs compatible
|
|
board: null,
|
|
};
|
|
|
|
NB.storage = new Storage_Local();
|
|
NB.drag = new Drag(),
|
|
|
|
/*
|
|
* event handlers
|
|
*/
|
|
$(window).on('blur', function(){
|
|
$('body').removeClass('reveal');
|
|
});
|
|
|
|
$(document).on('keydown', function(ev){
|
|
setRevealState(ev);
|
|
});
|
|
|
|
$(document).on('keyup', function(ev){
|
|
|
|
var raw = ev.originalEvent;
|
|
|
|
setRevealState(ev);
|
|
|
|
if (ev.target.nodeName == 'TEXTAREA' ||
|
|
ev.target.nodeName == 'INPUT')
|
|
return;
|
|
|
|
if (ev.ctrlKey && (raw.code == 'KeyZ'))
|
|
{
|
|
var ok = ev.shiftKey ? redoBoard() : undoBoard();
|
|
if (! ok)
|
|
showDing();
|
|
}
|
|
else
|
|
if (ev.ctrlKey && (raw.code == 'KeyY'))
|
|
{
|
|
if (! redoBoard())
|
|
showDing();
|
|
}
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .text', function(ev){
|
|
|
|
if (this.was_dragged)
|
|
{
|
|
this.was_dragged = false;
|
|
return false;
|
|
}
|
|
|
|
NB.drag.cancelPriming();
|
|
|
|
startEditing($(this), ev);
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .note .text a', function(ev){
|
|
|
|
if (! $('body').hasClass('reveal'))
|
|
return true;
|
|
|
|
ev.stopPropagation();
|
|
return true;
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('keydown', '.board .edit', function(ev){
|
|
|
|
var isNote = (this.tagName == 'TEXTAREA');
|
|
|
|
// esc
|
|
if (ev.keyCode == 27)
|
|
{
|
|
stopEditing($(this), true, false);
|
|
return false;
|
|
}
|
|
|
|
// tab
|
|
if (ev.keyCode == 9)
|
|
{
|
|
handleTab.call(this, ev);
|
|
return false;
|
|
}
|
|
|
|
// done
|
|
if (ev.keyCode == 13 && ! isNote ||
|
|
ev.keyCode == 13 && ev.altKey ||
|
|
ev.keyCode == 13 && ev.shiftKey && ! ev.ctrlKey)
|
|
{
|
|
stopEditing($(this), false, false);
|
|
return false;
|
|
}
|
|
|
|
// done + (add after / add before)
|
|
if (ev.keyCode == 13 && ev.ctrlKey)
|
|
{
|
|
var $this = $(this);
|
|
var $note = $this.closest('.note');
|
|
var $list = $note.closest('.list');
|
|
|
|
stopEditing($this, false, false);
|
|
|
|
if ($note && ev.shiftKey) // ctrl-shift-enter
|
|
addNote($list, null, $note);
|
|
else
|
|
if ($note && !ev.shiftKey) // ctrl-enter
|
|
addNote($list, $note);
|
|
|
|
return false;
|
|
}
|
|
|
|
// done + collapse
|
|
if (isNote && ev.altKey && ev.key == 'ArrowUp')
|
|
{
|
|
var $item = $(this).parent();
|
|
$item[0]._collapsed = true;
|
|
stopEditing($(this), false, false);
|
|
return false;
|
|
}
|
|
|
|
// done + expand
|
|
if (isNote && ev.altKey && ev.key == 'ArrowDown')
|
|
{
|
|
var $item = $(this).parent();
|
|
$item[0]._collapsed = false;
|
|
stopEditing($(this), false, false);
|
|
return false;
|
|
}
|
|
|
|
// done + toggle 'raw'
|
|
if (isNote && ev.altKey && ev.keyCode == 82)
|
|
{
|
|
$(this).parent().toggleClass('raw');
|
|
stopEditing($(this), false, false);
|
|
return false;
|
|
}
|
|
|
|
// ctrl-shift-8
|
|
if (isNote && ev.key == '*' && ev.ctrlKey)
|
|
{
|
|
var have = this.value;
|
|
var pos = this.selectionStart;
|
|
var want = have.substr(0, pos) + '\u2022 ' + have.substr(this.selectionEnd);
|
|
$(this).val(want);
|
|
this.selectionStart = this.selectionEnd = pos + 2;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
$('.wrap').on('keypress', '.board .edit', function(ev){
|
|
|
|
// tab
|
|
if (ev.keyCode == 9)
|
|
{
|
|
handleTab.call(this, ev);
|
|
return false;
|
|
}
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('blur', '.board .edit', function(ev){
|
|
if (document.activeElement != this)
|
|
stopEditing($(this), false, true);
|
|
else
|
|
; // switch away from the browser window
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('input propertychange', '.board .note .edit', function(){
|
|
|
|
var delta = $(this).outerHeight() - $(this).height();
|
|
|
|
$(this).height(10);
|
|
|
|
if (this.scrollHeight > this.clientHeight)
|
|
$(this).height(this.scrollHeight-delta);
|
|
|
|
});
|
|
|
|
//
|
|
$('.config').on('click', '.add-board', function(){
|
|
addBoard();
|
|
return false;
|
|
});
|
|
|
|
$('.config').on('click', '.load-board', function(){
|
|
|
|
var board_id = $(this)[0].board_id;
|
|
|
|
if (NB.board && (NB.board.id == board_id))
|
|
closeBoard();
|
|
else
|
|
openBoard( $(this)[0].board_id );
|
|
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .del-board', function(){
|
|
deleteBoard();
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .undo-board', function(){
|
|
undoBoard();
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .redo-board', function(){
|
|
redoBoard();
|
|
return false;
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('click', '.board .add-list', function(){
|
|
addList();
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .del-list', function(){
|
|
deleteList( $(this).closest('.list') );
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .mov-list-l', function(){
|
|
moveList( $(this).closest('.list'), true );
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .mov-list-r', function(){
|
|
moveList( $(this).closest('.list'), false );
|
|
return false;
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('click', '.board .add-note', function(){
|
|
addNote( $(this).closest('.list') );
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .del-note', function(){
|
|
deleteNote( $(this).closest('.note') );
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .raw-note', function(){
|
|
$(this).closest('.note').toggleClass('raw');
|
|
saveBoard();
|
|
return false;
|
|
});
|
|
|
|
$('.wrap').on('click', '.board .collapse', function(){
|
|
$(this).closest('.note').toggleClass('collapsed');
|
|
saveBoard();
|
|
return false;
|
|
});
|
|
|
|
//
|
|
$('.wrap').on('mousedown', '.board .note .text', function(ev){
|
|
NB.drag.prime(this, ev);
|
|
});
|
|
|
|
$(document).on('mouseup', function(ev){
|
|
NB.drag.end();
|
|
});
|
|
|
|
$(document).on('mousemove', function(ev){
|
|
setRevealState(ev);
|
|
NB.drag.onMouseMove(ev);
|
|
});
|
|
|
|
//
|
|
$('.config').on('click', '.imp-board', function(ev){
|
|
$('.config .imp-board-select').click();
|
|
return false;
|
|
});
|
|
|
|
$('.config').on('change', '.imp-board-select' , function(){
|
|
var files = this.files;
|
|
var reader = new FileReader();
|
|
reader.onload = function(ev){ importBoard(ev.target.result); };
|
|
reader.readAsText(files[0]);
|
|
return true;
|
|
});
|
|
|
|
$('.config').on('click', '.exp-board', function(){
|
|
var pack = exportBoard();
|
|
$(this).attr('href', pack.blob);
|
|
$(this).attr('download', pack.file);
|
|
return true;
|
|
});
|
|
|
|
$('.config').on('click', '.switch-theme', function() {
|
|
var $body = $('body');
|
|
$body.toggleClass('theme-dark');
|
|
NB.storage.setTheme($body.hasClass('theme-dark') ? 'dark' : '');
|
|
return false;
|
|
});
|
|
|
|
$('.config').on('click', '.switch-fsize', function(){
|
|
var $body = $('body');
|
|
$body.toggleClass('fsize-z1');
|
|
NB.storage.setFsize($body.hasClass('fsize-z1') ? 'z1' : '');
|
|
return false;
|
|
});
|
|
|
|
//
|
|
$('.overlay').click(function(ev){
|
|
if (ev.originalEvent.target != this)
|
|
return true;
|
|
hideOverlay();
|
|
return false;
|
|
});
|
|
|
|
$(window).keydown(function(ev){
|
|
if (haveOverlay() && ev.keyCode == 27)
|
|
hideOverlay();
|
|
});
|
|
|
|
$('.view-about').click(function(){
|
|
var $div = $('tt .about').clone();
|
|
$div.find('div').html(`Version ${NB.codeVersion}`);
|
|
showOverlay($div);
|
|
return false;
|
|
});
|
|
|
|
$('.view-license').click(function(){
|
|
|
|
var $div = $('tt .license').clone();
|
|
$div.html(formatLicense());
|
|
showOverlay($div);
|
|
return false;
|
|
});
|
|
|
|
$(window).resize(adjustLayout);
|
|
|
|
/*
|
|
* the init()
|
|
*/
|
|
if (! NB.storage.open())
|
|
{
|
|
easyMartina = true;
|
|
throw new Error();
|
|
}
|
|
|
|
var boards = NB.storage.getBoardIndex();
|
|
|
|
boards.forEach( function(meta, board_id) {
|
|
var hist = meta.history.join(', ');
|
|
console.log( `Found board ${board_id} - "${meta.title}", revision ${meta.current}, history [${hist}]` );
|
|
});
|
|
|
|
//
|
|
var conf = NB.storage.getConfig();
|
|
|
|
console.log( `Active: [${conf.board}]` );
|
|
console.log( `Theme: [${conf.theme}]` );
|
|
console.log( `Fsize: [${conf.fsize}]` );
|
|
|
|
if (conf.theme)
|
|
$('body').addClass('theme-' + conf.theme);
|
|
|
|
if (conf.fsize)
|
|
$('body').addClass('fsize-' + conf.fsize);
|
|
|
|
if (conf.board)
|
|
openBoard(conf.board)
|
|
|
|
//
|
|
adjustLayout();
|
|
|
|
updateBoardIndex();
|
|
|
|
//
|
|
if (! NB.board && ! $('.config .load-board').length)
|
|
NB.board = createDemoBoard();
|
|
|
|
if (NB.board)
|
|
showBoard(true);
|
|
|
|
//
|
|
setInterval(adjustListScroller, 100);
|
|
|
|
setupListScrolling();
|
|
|
|
</script>
|
|
|
|
</html>
|