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