app/pages/bookmarks.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>ブックマーク</title>
   9     <link href="flast://style.css" type="text/css" rel="stylesheet" />
  10     <script>
  11         if (getDarkTheme()) {
  12             document.write(
  13                 `<link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/darkly/bootstrap.min.css" type="text/css" rel="stylesheet" integrity="sha384-pKJMCXwCXq3HwRBt27cwwSmc0/DAo2BjRxGd7nEESEStk++p6LffHmhX9oqzVDUk" crossorigin="anonymous" />`
  14             );
  15         } else {
  16             document.write(
  17                 `<link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" integrity="sha384-bfWZLPtvQKHg/nZNhaO/ZW4Ba8ISud5CtEjnCTU6OR1yOq5zrrF+JP2o7om6rzLf" crossorigin="anonymous" />`
  18             );
  19         }
  20     </script>
  21     <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" type="text/css" rel="stylesheet" />
  22     <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Roboto" type="text/css"
  23         rel="stylesheet" />
  24     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet" />
  25     <link rel="icon" sizes="any" href="flast://public.svg" type="image/svg+xml">
  26     <link rel="mask-icon" href="flast://public.svg" color="black">
  27 </head>
  28
  29 <body style="padding-top: 75px;">
  30     <nav class="navbar navbar-default navbar-fixed-top">
  31         <div class="container-fluid">
  32             <div class="navbar-header">
  33                 <a class="navbar-brand">
  34                     <script>document.write(getAppName());</script></a>
  35                 <ul class="nav navbar-nav navbar-right">
  36                     <li><a href="#" data-toggle="modal" data-target="#clearModal">ブックマークをクリア</a></li>
  37                 </ul>
  38             </div>
  39         </div>
  40     </nav>
  41     <div class="container-fluid">
  42         <div class="row">
  43             <div class="col-md-3">
  44                 <ul class="nav nav-pills nav-stacked">
  45                     <li>
  46                         <a href="flast://home/">
  47                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">home</i>
  48                             ホーム
  49                         </a>
  50                     </li>
  51                     <hr>
  52                     <li>
  53                         <a href="flast://history/">
  54                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">history</i>
  55                             履歴
  56                         </a>
  57                     </li>
  58                     <li>
  59                         <a href="flast://downloads/">
  60                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">get_app</i>
  61                             ダウンロード
  62                         </a>
  63                     </li>
  64                     <li>
  65                         <a href="flast://bookmarks/">
  66                             <i class="material-icons"
  67                                 style="vertical-align: text-bottom; font-size: 16px;">bookmarks</i> ブックマーク
  68                         </a>
  69                     </li>
  70                     <li>
  71                         <a href="flast://store/">
  72                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">shop</i>
  73                             WebApp Store
  74                         </a>
  75                     </li>
  76                     <li class="dropdown">
  77                         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  78                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">settings</i>
  79                             設定
  80                         </a>
  81                         <ul class="dropdown-menu" style="width: 100%;">
  82                             <li><a href="flast://settings/">ホーム</a></li>
  83                             <li class="divider"></li>
  84                             <li><a href="flast://settings/#design">デザイン</a></li>
  85                             <li><a href="flast://settings/#engine">検索エンジン</a></li>
  86                             <li><a href="flast://settings/#adblock">広告ブロック</a></li>
  87                             <li><a href="flast://settings/#window">ウィンドウ</a></li>
  88                             <li class="divider"></li>
  89                             <li><a href="flast://settings/#about">
  90                                     <script>document.write(getAppName());</script> について</a></li>
  91                         </ul>
  92                     </li>
  93                     <li>
  94                         <a href="flast://help/">
  95                             <i class="material-icons"
  96                                 style="vertical-align: text-bottom; font-size: 16px;">help_outline</i> ヘルプ
  97                         </a>
  98                     </li>
  99                 </ul>
 100             </div>
 101             <div class="col-md-9" style="padding-right: 0px;">
 102                 <div style="padding: 15px; overflow-y: auto; height: calc(100vh - 75px);">
 103                     <h3>ブックマーク</h3>
 104                     <hr>
 105                     <script>
 106                         if (navigator.userAgent.indexOf('PrivMode') != -1) {
 107                             document.write(
 108                                 `<div class="panel panel-default" id="private">
 109                                     <div class="panel-heading">プライベート ブックマーク</div>
 110                                     <div class="panel-body">
 111                                         <div class="table-responsive">
 112                                             <table class="table table-striped table-hover table-style" id="privMarkList">
 113                                                 <thead>
 114                                                     <tr>
 115                                                         <th class="table-icon"></th>
 116                                                         <th class="table-title">タイトル</th>
 117                                                         <th class="table-url">URL</th>
 118                                                         <th class="table-date">追加日時</th>
 119                                                     </tr>
 120                                                 </thead>
 121                                                 <tbody>
 122                                                 </tbody>
 123                                             </table>
 124                                         </div>
 125                                     </div>
 126                                 </div>
 127                                 <hr>`
 128                             );
 129                         }
 130                     </script>
 131                     <div class="panel panel-default" id="normal">
 132                         <div class="panel-heading">ブックマーク</div>
 133                         <div class="panel-body">
 134                             <div class="table-responsive">
 135                                 <table class="table table-striped table-hover table-style" id="markList">
 136                                     <thead>
 137                                         <tr>
 138                                             <th class="table-icon"></th>
 139                                             <th class="table-title">タイトル</th>
 140                                             <th class="table-url">URL</th>
 141                                             <th class="table-date">追加日時</th>
 142                                         </tr>
 143                                     </thead>
 144                                     <tbody>
 145                                     </tbody>
 146                                 </table>
 147                             </div>
 148                         </div>
 149                     </div>
 150                 </div>
 151             </div>
 152         </div>
 153     </div>
 154     <div class="modal fade" id="clearModal" tabindex="-1">
 155         <div class="modal-dialog" style="z-index: 9999;">
 156             <div class="modal-content">
 157                 <div class="modal-header">
 158                     <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
 159                     <h4 class="modal-title">ブックマークをクリア</h4>
 160                 </div>
 161                 <div class="modal-body">
 162                     これまでのブックマークをクリアします。<br>
 163                     続行を押すとブックマークがクリアされます。
 164                 </div>
 165                 <div class="modal-footer">
 166                     <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
 167                     <button type="button" class="btn btn-primary" id="clearBookmark">続行</button>
 168                 </div>
 169             </div>
 170         </div>
 171     </div>
 172     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 173     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 174     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 175     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 176     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
 177     <script type="text/javascript">
 178         $(document).ready(function () {
 179             $(`a[href="${window.location.href}"]`).parent().addClass('active');
 180
 181             $('#clearBookmark').click(function () {
 182                 clearBookmark(true);
 183                 location.reload();
 184             });
 185
 186             if (navigator.userAgent.indexOf('PrivMode') != -1) {
 187                 getBookmarks(true).then((data) => {
 188                     data.forEach((item, i) => {
 189                         $('#markList').append(
 190                             $('<tr></tr>')
 191                                 .append($('<td class="table-icon"></td>').append($(`<img src="http://www.google.com/s2/favicons?domain=${new URL(item.url).origin}" />`)))
 192                                 .append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title)))
 193                                 .append($('<td class="table-url"></td>').text(item.url))
 194                                 .append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm')))
 195                         );
 196                     });
 197                     getBookmarks(false).then((data) => {
 198                         data.forEach((item, i) => {
 199                             $('#markList').append(
 200                                 $('<tr></tr>')
 201                                     .append($('<td class="table-icon"></td>').append($(`<img src="http://www.google.com/s2/favicons?domain=${new URL(item.url).origin}" />`)))
 202                                     .append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title)))
 203                                     .append($('<td class="table-url"></td>').text(item.url))
 204                                     .append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm')))
 205                             );
 206                         });
 207                     });
 208                 });
 209             } else {
 210                 getBookmarks(false).then((data) => {
 211                     data.forEach((item, i) => {
 212                         $('#markList').append(
 213                             $('<tr></tr>')
 214                                 .append($('<td class="table-icon"></td>').append($(`<img src="http://www.google.com/s2/favicons?domain=${new URL(item.url).origin}" />`)))
 215                                 .append($('<td class="table-title"></td>').append($(`<a href="${item.url}"></a>`).text(item.title)))
 216                                 .append($('<td class="table-url"></td>').text(item.url))
 217                                 .append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm')))
 218                         );
 219                     });
 220                 });
 221             }
 222         });
 223     </script>
 224 </body>
 225
 226 </html>