|
1 | 1 | <!DOCTYPE html> |
2 | | -<html> |
| 2 | +<html manifest="app.manifest"> |
3 | 3 | <head> |
4 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | 5 | <title>EasyNotes</title> |
| 6 | +<meta name="apple-mobile-web-app-title" content="EasyNotes"> |
| 7 | +<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" /> |
| 8 | +<meta name="apple-mobile-web-app-capable" content="yes"> |
| 9 | +<!--<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />--> |
6 | 10 | <!--<link rel="stylesheet" href="all.css">--> |
7 | 11 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> |
| 12 | +<link rel="apple-touch-icon" href="icons/Icon-76.png"> |
| 13 | +<link rel="apple-touch-icon" sizes="57x57" href="icons/Icon-57.png"> |
| 14 | +<link rel="apple-touch-icon" sizes="60x60" href="icons/Icon-60.png"> |
| 15 | +<link rel="apple-touch-icon" sizes="72x72" href="icons/Icon-60.png"> |
| 16 | +<link rel="apple-touch-icon" sizes="76x76" href="icons/Icon-76.png"> |
| 17 | +<link rel="apple-touch-icon" sizes="114x114" href="icons/Icon-114.png"> |
| 18 | +<link rel="apple-touch-icon" sizes="120x120" href="icons/Icon-120.png"> |
| 19 | +<link rel="apple-touch-icon" sizes="144x144" href="icons/Icon-144.png"> |
| 20 | +<link rel="apple-touch-icon" sizes="152x152" href="icons/Icon-152.png"> |
| 21 | +<link rel="apple-touch-icon" sizes="180x180" href="icons/Icon-180x180.png"> |
| 22 | +<link rel="apple-touch-startup-image" href="images/launch.png"> |
8 | 23 | <style type="text/css"> |
9 | | -html,body{padding:0;margin:0; } |
| 24 | +html,body{padding:0;margin:0;} |
10 | 25 | body{font-family: Arial, sans-serif; font-size:16px; color:#333; background-color:#f8f8f8; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;} |
11 | 26 | a{text-decoration:none; font-weight:bold; color:gray;} |
12 | 27 | #wrapper{position:absolute; width:100%; height:100%;} |
|
33 | 48 | #meta #DaysAgo{margin-left:12px;} |
34 | 49 | #meta #DateNote{margin-right:12px;} |
35 | 50 |
|
36 | | -#editor #memo{display:block; width:calc(100% - 24px); height:calc(100% - 45px); padding:4px 12px 4px 12px; background-color:transparent; border:none;} |
| 51 | +#editor #memo{display:block; width:calc(100% - 24px); height:calc(100% - 45px); padding:4px 0; margin:0 auto; background-color:transparent; border:none;} |
37 | 52 | textarea{font-weight:normal; font-size:17px; font-family: Arial, sans-serif; color:#333; overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius:0; -webkit-tap-highlight-color:rgba(0,0,0,0);} |
38 | 53 | textarea:focus{outline:none;} |
39 | 54 | #sub-panel{display:flex; flex-direction:row; justify-content:space-between; align-items:center; height:45px; overflow:hidden; background-color:#e7e7e7; text-align:center; cursor:default;} |
40 | 55 |
|
41 | 56 | /* Settings */ |
42 | 57 | #settings{display:none; width:100%; height:100%;} |
43 | 58 | #settings #page{height:calc(100% - 45px); overflow-y:auto; -webkit-overflow-scrolling:touch;} |
| 59 | +#settings #page #items:first-child{margin-top:3px;} |
44 | 60 | #settings #items{padding:10px 0; margin:0 auto; width:92%; overflow:hidden; font-size:14px;} |
45 | 61 | #settings #items #item{display:flex; flex-direction:row; justify-content:space-between; align-items:center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border:1px solid #dbdbdb; padding:14px 8px; background-color:#fff; border-top:none; color:black;} |
46 | 62 | #settings #items #item:first-child{border-top-left-radius:15px; border-top-right-radius:15px; border:1px solid #dbdbdb;} |
|
59 | 75 | #notification{position:absolute; bottom:0; width:100%; padding: 15px 0; visibility:hidden; font-size:14px; background-color:#e7e7e7; text-align:center; border-top:1px solid #bdbdbd;} |
60 | 76 | #notification.show{visibility:visible; animation:fadein 0.5s, fadeout 0.5s 3s;} |
61 | 77 | @keyframes fadein{from {opacity: 0;} to {opacity: 1;}} |
62 | | -@keyframes fadein{from {opacity: 0;} to {opacity: 1;}} |
63 | | -@keyframes fadeout{from {opacity: 1;} to {opacity: 0;}} |
64 | 78 | @keyframes fadeout{from {opacity: 1;} to {opacity: 0;}} |
65 | 79 |
|
66 | 80 | #sync-progress{display:none; position:absolute; bottom:0; width:100%; height:4px; background-color:blue; background:linear-gradient(to left, transparent, transparent, #23A6D5, transparent, transparent); background-size:200% 200%; animation:move-background 2s linear infinite;} |
|
74 | 88 | 100%{display:block; opacity:1;} |
75 | 89 | } |
76 | 90 |
|
77 | | -/* Tablet mode */ |
| 91 | +/* Android tablet mode */ |
78 | 92 | @media all and (min-width:550px) { |
79 | 93 | #list{display:block; float:left; width:37%;} |
80 | 94 | #list #items{border-right:1px solid #d5d5d5;} |
|
90 | 104 | var ActionsDB; |
91 | 105 | var SettingsDB; |
92 | 106 |
|
93 | | - var CurNoteID = -1; //По умолчанию, для возврата настроек |
| 107 | + var CurNoteID = -1; //По умолчанию новая заметка |
94 | 108 | var LatestNote; |
95 | 109 | var CurNoteDateTime; |
96 | 110 |
|
|
118 | 132 | var IDS_ABOUT_SYNC = 'IP address and port to sync notes with your PC.'; |
119 | 133 | var IDS_AUTO_SYNC = 'Sync at startup'; |
120 | 134 | var IDS_ABOUT_AUTO_SYNC = 'Automatically sync on app launch.'; |
| 135 | + |
121 | 136 | //Для всех |
122 | 137 | var IDS_DARK_THEME = 'Dark theme'; |
123 | 138 | var IDS_THEME_TIME_DEPENDENT = 'Theme is time dependent'; |
|
133 | 148 | var IDS_CONNECTION_FAILED = 'Connection failed'; |
134 | 149 |
|
135 | 150 | //Русский |
136 | | - //console.log(navigator.language.toLowerCase()); |
137 | | - //в iOS языки прописными буквами |
138 | | - if (navigator.language.toLowerCase() == 'ru-ru') { |
| 151 | + if (navigator.language.toLowerCase() == 'ru-ru') { //В iOS языки прописными буквами |
139 | 152 | IDS_MONTHS = ['янв.', 'фев.', 'мар.', 'апр.', 'май', 'июн.', 'июл.', 'авг.', 'сен.', 'окт.', 'ноя.', 'дек.']; |
140 | 153 | IDS_DAYOFWEEK = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье']; |
141 | 154 | IDS_TODAY = 'Сегодня'; |
|
314 | 327 |
|
315 | 328 | function ShowNotes() |
316 | 329 | { |
317 | | - //document.getElementById('list').className = 'page transition center'; |
318 | | - //document.getElementById('editor').className = 'page transition right'; |
319 | 330 | if (TabletMode == false) |
320 | 331 | document.getElementById('editor').style.display = 'none'; |
321 | 332 | document.getElementById('list').style.display = 'block'; |
|
513 | 524 | { |
514 | 525 | var CurTimeStamp = GetTimeStamp(); |
515 | 526 | var UTCTimeStamp = GetUTCTimeStamp(); |
| 527 | + var MemoText = document.getElementById('memo').value; |
| 528 | + var LatestCurNoteID = CurNoteID; //Для мновенного переключения на новую заметку, без ожидания выполнения SQL |
516 | 529 |
|
| 530 | + //Новая заметка |
517 | 531 | if (CurNoteID == '-1') { |
518 | | - |
519 | | - if (document.getElementById('memo').value.trim() != '') { |
| 532 | + //Не создаем заметку без текста |
| 533 | + if (MemoText.trim() != '') { |
520 | 534 | NotesDB.transaction(function (tx) { |
521 | | - tx.executeSql('INSERT INTO Notes (ID, Note, DateTime) VALUES (' + CurTimeStamp + ', "' + StrToCharCodes(document.getElementById('memo').value) + '", ' + UTCTimeStamp + ')'); |
| 535 | + tx.executeSql('INSERT INTO Notes (ID, Note, DateTime) VALUES (' + CurTimeStamp + ', "' + StrToCharCodes(MemoText) + '", ' + UTCTimeStamp + ')'); |
522 | 536 | }); |
523 | 537 |
|
524 | 538 | ActionsDB.transaction(function (tx) { |
525 | | - tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("insert", ' + CurTimeStamp + ', "' + StrToCharCodes(document.getElementById('memo').value) + '",' + UTCTimeStamp + ')'); |
| 539 | + tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("insert", ' + CurTimeStamp + ', "' + StrToCharCodes(MemoText) + '",' + UTCTimeStamp + ')'); |
526 | 540 | }); |
| 541 | + |
527 | 542 | } |
528 | 543 | //console.log('Inserted done'); |
529 | | - } else if (LatestNote.trim() != document.getElementById('memo').value.trim()) { //Добавлять только при наличии изменений |
| 544 | + } else if (LatestNote.trim() != MemoText.trim()) { //Добавлять только при наличии изменений |
530 | 545 |
|
531 | | - if (UpdateDateTime) { |
| 546 | + if (UpdateDateTime) { //Обновление времени |
532 | 547 | NotesDB.transaction(function (tx) { |
533 | | - tx.executeSql('UPDATE Notes SET Note="' + StrToCharCodes(document.getElementById('memo').value) + '", DateTime=' + UTCTimeStamp + ' WHERE ID=' + CurNoteID); |
| 548 | + tx.executeSql('UPDATE Notes SET Note="' + StrToCharCodes(MemoText) + '", DateTime=' + UTCTimeStamp + ' WHERE ID=' + LatestCurNoteID); |
534 | 549 | }); |
535 | 550 |
|
536 | 551 | ActionsDB.transaction(function (tx) { |
537 | | - tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("update", ' + CurNoteID + ', "' + StrToCharCodes(document.getElementById('memo').value) + '",' + UTCTimeStamp + ')'); |
| 552 | + tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("update", ' + LatestCurNoteID + ', "' + StrToCharCodes(MemoText) + '",' + UTCTimeStamp + ')'); |
538 | 553 | }); |
539 | | - } else { |
| 554 | + } else { //Сохранение старого времени |
540 | 555 | NotesDB.transaction(function (tx) { |
541 | | - tx.executeSql('UPDATE Notes SET Note="' + StrToCharCodes(document.getElementById('memo').value) + '" WHERE ID=' + CurNoteID); |
| 556 | + tx.executeSql('UPDATE Notes SET Note="' + StrToCharCodes(MemoText) + '" WHERE ID=' + LatestCurNoteID); |
542 | 557 | }); |
543 | 558 |
|
544 | 559 | ActionsDB.transaction(function (tx) { |
545 | | - tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("update", ' + CurNoteID + ', "' + StrToCharCodes(document.getElementById('memo').value) + '",' + CurNoteDateTime + ')'); |
| 560 | + tx.executeSql('INSERT INTO Actions (Action, ID, Note, DateTime) VALUES ("update", ' + LatestCurNoteID + ', "' + StrToCharCodes(MemoText) + '",' + CurNoteDateTime + ')'); |
546 | 561 | }); |
547 | 562 | } |
548 | 563 | //console.log('Updated done'); |
549 | 564 | } |
| 565 | + if (TabletMode) //Новая заметка открывается только в режиме планшета |
| 566 | + NewNote(); |
550 | 567 | ShowNotes(); |
551 | 568 | } |
552 | 569 |
|
553 | 570 | function RemNote() |
554 | 571 | { |
555 | | - if (CurNoteID == '-1') return; |
| 572 | + if (CurNoteID == '-1') {ShowNotes(); return;} |
556 | 573 | NotesDB.transaction(function (tx) { |
557 | | - tx.executeSql('DELETE FROM Notes WHERE id=' + CurNoteID, [], function (tx, results) { |
| 574 | + tx.executeSql('DELETE FROM Notes WHERE ID=' + CurNoteID, [], function (tx, results) { |
558 | 575 | ShowNotes(); |
| 576 | + if (TabletMode) //Новая заметка открывается только в режиме планшета |
| 577 | + NewNote(); |
559 | 578 | }, null); |
560 | 579 | }); |
561 | 580 | ActionsDB.transaction(function (tx) { |
|
579 | 598 | return new Promise(function(resolve, reject) { |
580 | 599 | var request = new XMLHttpRequest(); |
581 | 600 |
|
582 | | - request.open('GET', URL, false); |
| 601 | + request.open('GET', URL, true); |
583 | 602 |
|
584 | 603 | request.onload = function() { |
585 | 604 | if (request.status == 200) |
|
703 | 722 | } |
704 | 723 |
|
705 | 724 | function CheckTabletMode(){ |
706 | | - if (window.innerWidth >= 550) { //|| window.innerWidth > window.innerHeight |
| 725 | + if (window.innerWidth >= 550) { |
707 | 726 | TabletMode = true; |
708 | 727 | document.getElementById('list').style.display = 'block'; |
709 | 728 |
|
710 | | - if (document.getElementById('editor').style.display == 'none' && document.getElementById('settings').style.display == 'none') |
| 729 | + if (document.getElementById('editor').style.display == 'none' && (document.getElementById('settings').style.display == 'none' || document.getElementById('settings').style.display == '')) //Когда блока нет, вместо "none" бывает "" |
711 | 730 | document.getElementById('editor').style.display = 'block'; |
712 | 731 | } else { |
713 | 732 | TabletMode = false; |
|
820 | 839 | }, null); |
821 | 840 | }); |
822 | 841 |
|
823 | | - //UpdateSizes(); //Для устройств не поддерживающих css calc |
824 | 842 | }); |
825 | 843 | </script> |
826 | 844 | </head> |
|
914 | 932 |
|
915 | 933 | <div id="AboutThemeTime" class="titlebox"></div> |
916 | 934 |
|
917 | | - <div class="titlebox" style="text-align:center;"><br>EasyNotes<br><span id="LastUpdate"></span> 28.09.20<br>https://r57zone.github.io</div> |
| 935 | + <div class="titlebox" style="text-align:center;"><br>EasyNotes<br><span id="LastUpdate"></span> 17.11.20<br>https://r57zone.github.io</div> |
918 | 936 | <br><br> |
919 | 937 | </div> |
920 | 938 | </div> |
|
0 commit comments