app/pages/bookmark.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3
   4 <head>
   5     <meta charset="UTF-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   8     <title>ブックマーク | MyBrowser</title>
   9     <link href="my://style.css" rel="stylesheet">
  10     <link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/paper/bootstrap.min.css" rel="stylesheet"
  11         integrity="sha384-czdUt3c5InCk6AjJWW7zMMS5xcvRAyC6tWoWfXuRYfX6Vvv4Es8m8eRjzMChD493" crossorigin="anonymous">
  12     <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Roboto" rel="stylesheet">
  13     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  14     <link rel="icon" sizes="any" href="my://public.svg" type="image/svg+xml">
  15     <link rel="mask-icon" href="my://public.svg" color="black">
  16     <style>
  17         .table-style {
  18             table-layout: fixed;
  19             white-space: nowrap;
  20         }
  21
  22         .table-style th.table-title,
  23         .table-style td.table-title {
  24             width: 400px;
  25             overflow: hidden;
  26             white-space: nowrap;
  27             text-overflow: ellipsis;
  28         }
  29
  30         .table-style th.table-url,
  31         .table-style td.table-url {
  32             width: calc(100% - 600px);
  33             overflow: hidden;
  34             white-space: nowrap;
  35             text-overflow: ellipsis;
  36         }
  37     </style>
  38 </head>
  39
  40 <body>
  41     <header class="topbar">
  42         <div class="nav-toggle">
  43             <i class="material-icons">
  44                 menu
  45             </i>
  46         </div>
  47         <h5 class="title">ブックマーク</h5>
  48         <button type="button" class="btn btn-link" style="margin-left: auto;" data-toggle="modal"
  49             data-target="#clearModal">
  50             ブックマークをクリア
  51         </button>
  52     </header>
  53     <div class="nav">
  54     </div>
  55     <div class="container">
  56         <script>
  57             if (navigator.userAgent.indexOf('PrivMode') != -1) {
  58                 document.write(
  59                     `<div class="panel panel-default" id="private">
  60                         <div class="panel-heading">プライベート ブックマーク</div>
  61                         <div class="panel-body">
  62                             <div class="table-responsive">
  63                                 <table class="table table-striped table-hover table-style" id="privMarkList">
  64                                     <thead>
  65                                         <tr>
  66                                             <th class="table-title">タイトル</th>
  67                                             <th class="table-url">URL</th>
  68                                             <th style="width: 200px; white-space: nowrap;">追加日時</th>
  69                                         </tr>
  70                                     </thead>
  71                                     <tbody>
  72                                     </tbody>
  73                                 </table>
  74                             </div>
  75                         </div>
  76                     </div>
  77                     <hr>`
  78                 );
  79             }
  80         </script>
  81         <div class="panel panel-default" id="normal">
  82             <div class="panel-heading">ブックマーク</div>
  83             <div class="panel-body">
  84                 <div class="table-responsive">
  85                     <table class="table table-striped table-hover table-style" id="markList">
  86                         <thead>
  87                             <tr>
  88                                 <th class="table-title">タイトル</th>
  89                                 <th class="table-url">URL</th>
  90                                 <th style="width: 200px; white-space: nowrap;">追加日時</th>
  91                             </tr>
  92                         </thead>
  93                         <tbody>
  94                         </tbody>
  95                     </table>
  96                 </div>
  97             </div>
  98         </div>
  99     </div>
 100     <div class="modal fade" id="clearModal" tabindex="-1">
 101         <div class="modal-dialog" style="z-index: 9999;">
 102             <div class="modal-content">
 103                 <div class="modal-header">
 104                     <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
 105                     <h4 class="modal-title">ブックマークをクリア</h4>
 106                 </div>
 107                 <div class="modal-body">
 108                     これまでのブックマークをクリアします。
 109                     続行を押すとブックマークがクリアされます。
 110                 </div>
 111                 <div class="modal-footer">
 112                     <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
 113                     <button type="button" class="btn btn-primary" id="clearBookmark">続行</button>
 114                 </div>
 115             </div>
 116         </div>
 117     </div>
 118     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 119     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 120     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
 121     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 122     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 123     <script type="text/javascript">
 124         $(document).ready(function () {
 125             $('.nav a[href="' + window.location.pathname + '"]').parent().addClass('active');
 126
 127             $('#clearBookmark').click(function () {
 128                 clearBookmark(true);
 129                 location.reload();
 130             });
 131
 132             if (navigator.userAgent.indexOf('PrivMode') != -1) {
 133                 getBookmarks(true).then((data) => {
 134                     data.forEach((item, i) => {
 135                         $('#privMarkList').append($('<tr></tr>').append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title))).append($('<td class="table-url"></td>').text(item.url)).append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm'))));
 136                     });
 137                     getBookmarks(false).then((data) => {
 138                         data.forEach((item, i) => {
 139                             $('#markList').append($('<tr></tr>').append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title))).append($('<td class="table-url"></td>').text(item.url)).append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm'))));
 140                         });
 141                     });
 142                 });
 143             } else {
 144                 getBookmarks(false).then((data) => {
 145                     data.forEach((item, i) => {
 146                         $('#markList').append($('<tr></tr>').append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title))).append($('<td class="table-url"></td>').text(item.url)).append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm'))));
 147                     });
 148                 });
 149             }
 150         });
 151     </script>
 152 </body>
 153
 154 </html>