pages/newtab.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://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
  13     <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Roboto" rel="stylesheet">
  14     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  15     <link rel="icon" sizes="any" href="my://public.svg" type="image/svg+xml">
  16     <link rel="mask-icon" href="my://public.svg" color="black">
  17 </head>
  18
  19 <body>
  20     <header class="topbar">
  21         <div class="nav-toggle">
  22             <i class="material-icons">
  23                 menu
  24             </i>
  25         </div>
  26         <h5 class="title">新しいタブ</h5>
  27         <input class="topbar-search" id="search" placeholder="Google で検索または URL を入力" onkeydown="handleKeydown();">
  28         <div class="btn btn-primary topbar-search-btn">
  29             <i class="material-icons">
  30                 search
  31             </i>
  32         </div>
  33     </header>
  34     <div class="nav">
  35     </div>
  36     <div class="container"></div>
  37     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  38     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  39     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  40     <script type="text/javascript">
  41         $(document).ready(function () {
  42             $('.nav a[href="' + window.location.pathname + '"]').parent().addClass('active');
  43
  44             $('#search').prop('placeholder', `${getSearchEngine().name} で検索または URL を入力`);
  45
  46             $('#search').autocomplete({
  47                 source: function (request, response) {
  48                     $.ajax({
  49                         url: "http://www.google.com/complete/search",
  50                         data: { hl: 'ja', client: 'firefox', q: request.term },
  51                         dataType: "jsonp",
  52                         type: "GET",
  53                         success: function (data) {
  54                             response(data[1]);
  55                         }
  56                     });
  57                 },
  58                 delay: 300,
  59                 minLength: 2,
  60             });
  61
  62             if (getDarkTheme()) {
  63                 $('.topbar').css({ 'background-color': '#323232', 'color': 'white' });
  64                 $('.topbar > .title').css('color', 'white');
  65                 $('.topbar-search').css({ 'background-color': '#252525', 'color': 'white' });
  66                 $('body').css('background-color', '#252525');
  67
  68                 $('.nav-toggle').hover(function () {
  69                     $(this).css('background-color', 'rgba(130, 130, 130, 0.3)');
  70                 }, function () {
  71                     $(this).css('background-color', '');
  72                 });
  73             } else {
  74                 $('.topbar').css({ 'background-color': '', 'color': '' });
  75                 $('.topbar > .title').css('color', '');
  76                 $('.topbar-search').css({ 'background-color': '', 'color': '' });
  77                 $('body').css('background-color', '');
  78
  79                 $('.nav-toggle').hover(function () {
  80                     $(this).css('background-color', 'rgba(0, 0, 0, 0.06)');
  81                 }, function () {
  82                     $(this).css('background-color', '');
  83                 });
  84             }
  85         });
  86
  87         function handleKeydown() {
  88             let searchBar = $('#search');
  89             if (event.keyCode != 13 || searchBar.val().length == 0 || searchBar.val() == '') return;
  90
  91             if (isURL(searchBar.val())) {
  92                 location.href = searchBar.val();
  93             } else {
  94                 location.href = window.getSearchEngine().url.replace('%s', searchBar.val());
  95             }
  96         }
  97
  98         function isURL(input) {
  99             const pattern = /^((?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)|my:\/\/\S.*)\S*$/;
 100
 101             if (pattern.test(input)) {
 102                 return true;
 103             }
 104             return pattern.test(`http://${input}`);
 105         }
 106     </script>
 107 </body>
 108
 109 </html>