docs/cookies/z/index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
    <title>HTML Cookie Counts</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="/static/css/style.css">
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> 
    <style>
/* Colors for badges */

h1 { font-family: 'Bebas Neue', cursive;}

.badge-red {
  background-color: #d54625;
}

.badge-green {
  background-color: #35bd4a;
}

.badge-blue {
  background-color: #357ebd;
}

.table-sortable > thead > tr > th {
  cursor: pointer;
}
.table-sortable > thead > tr > th[data-sorting="disabled"] {
  cursor: default;
}
.table-sortable > thead > tr > th[data-sorting="disabled"]:hover,
.table-sortable > thead > tr > th[data-sorting="disabled"]:active {
  background: inherit;
}
.table-sortable > thead > tr > th:hover,
.table-sortable > thead > tr > th:active {
  background: #F5F5F5;
}
.table-sortable > tbody > tr > td mark,
.table-sortable > tbody > tr > td .mark {
  padding-left: 0;
  padding-right: 0;
}
    </style>

</head>
<body>
<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-12'>
      <br>
      <div class='form-horizontal'>
        <div class='form-group has-feedback'>
          <div class='col-sm-12'>
            <input class='form-control table-sortable-search' placeholder='Search...' type='search'>
            <span class='glyphicon glyphicon-remove form-control-feedback search-cancel-button'></span>
          </div>
        </div>
      </div>
      <br>
      <div class='panel panel-default'>
        <div class='table-responsive' id="app">

  <h1 style="margin-left:5px">Sites for <b>Z</b> ⭐️</h1>
  <hr>

  <label>Rows per page</label>
  <select v-model="pageSizeModel">
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="25">25</option>
  </select>
    
  <table class="table table-sortable">
    <thead>
      <tr>
        <th :class="{ sorted: sort === 'id' }" @click="sortBy('id')">
          Id
        </th>
        <th :class="{ sorted: sort === 'name' }" @click="sortBy('name')">
          Name
        </th>
        <th :class="{ sorted: sort === 'value' }" @click="sortBy('value')" >
          Value
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedRows">
        <td>{{ row.id }}</td>
        <td>{{ row.name  }}</td>
        <td>{{ row.value }}</td>
        <td data-id="{{ row.id }}">
          <div class='btn-group btn-group-xs'>
            <button v-on:click="viewRow" class="btn btn-default" title="View">
              <span class="glyphicon glyphicon-eye-open"></span>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>


  <div class="controls">
    <button class="btn btn-sm" :disabled="!hasPage(-1)" @click="prevPage">←</button> 
    <button class="btn btn-sm" :disabled="!hasPage(1)"  @click="nextPage">→</button>
    <span style="float:right; margin-right:30px; margin-top:20px" class="badge badge-primary"><span class="glyphicon glyphicon-heart"></span> vsoch</span>

  </div>
  <hr>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
  <script>
// Handle socket to send /receive messages from server without refresh
$(document).ready(function(){

});

// tables.js
function preg_quote( str ) {
  // http://kevin.vanzonneveld.net
  // +   original by: booeyOH
  // +   improved by: Ates Goral (http://magnetiq.com)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Onno Marsman
  // *     example 1: preg_quote("$40");
  // *     returns 1: '\$40'
  // *     example 2: preg_quote("*RRRING* Hello?");
  // *     returns 2: '\*RRRING\* Hello\?'
  // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
  // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
  return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}

function highlight(data, search){
  return data.replace(new RegExp( "(" + preg_quote( search ) + ")" , 'gi' ), "<mark>$1</mark>" );
}

// Table
    
function Table($table,$input){

    $table.find("th").each(function($key, el){
        if ($(el).attr("data-sorting")!="disabled"){
            $("<span/>").attr("class","fa").attr("row-id",$key+1).appendTo(el);
    }}).click(function(){
        var asc=true;
        if ($(this).find("span.fa").attr("class")=="fa"||$(this).find("span.fa").attr("class")=="fa fa-caret-up fa-fw"){
            $table.find("th[data-sorting!=disabled] span.fa").attr("class","fa");
            $(this).find("span.fa").attr("class","fa fa-caret-down fa-fw");
            asc=true;
        }
        else if ($(this).find("span.fa").attr("class")=="fa fa-caret-down fa-fw"){
            $table.find("th[data-sorting!=disabled] span.fa").attr("class","fa");
            $(this).find("span.fa").attr("class","fa fa-caret-up fa-fw");
            asc=false
        }
        value=$.map($table.find("td:nth-child("+($(this).find("span.fa").attr("row-id"))+")"),function(el){
            return {text:$(el).text().trim(),row:$(el).parent()};
        });

        value.sort(function(x, y){ 
            if (asc){
                if (x.text < y.text) {
                    return -1;
                }
                if (x.text > y.text) {
                    return 1;
                }
            } else {
                if (x.text < y.text) {
                    return 1;
                }
                if (x.text > y.text) {
                    return -1;
                }
            }
            return 0;
        });
        $table.find("tr:gt(0)").remove();
        $.each(value,function(key,value){
            $(value.row).appendTo($table);
        });
    });
    $table.find("th:first").click();
    $input.on("keyup change",function(){
        var newText=$(this).val();
        $table.find("span.text-wrap").each(function(key,value){
            $(value).html($(value).text());
            $(value).contents().unwrap();
        });        
        if (newText.trim()!=""){    
            $table.find("tr:gt(0)").hide();                        
            var textNode=$table.find("tr:gt(0) *")
              .contents()
              .filter(function() {
                return this.nodeType === 3; //Node.TEXT_NODE
              }).each(function(key,value){
                    var nodeText=value.data;
                    if (nodeText.toLowerCase().indexOf(newText.toLowerCase())!=-1){
                        $(value).closest("tr").show();
                        if ($(value).parent().attr("class")!="text-wrap")
                            $(value).wrap("<span class='text-wrap'></span>");
                        $(value).parent().html(highlight(nodeText ,newText));
                    }
                
              });;
              
              }else{
                $table.find("tr").show();
              }
    });
    
}

$(function(){
    Table($(".table-sortable"),$(".table-sortable-search"));
});

// Search

$('input[type="search"]').keyup(function () {
  var t = $(this);
  t.next('span').toggle(Boolean(t.val()));
});

$('input[type="search"] + .search-cancel-button').hide($(this).prev('input').val()).click(function () {
  $(this).prev('input').val('').focus();
  $(this).hide();
});

const app = new Vue({
  data: () => ({
    rows: [{"id": 1, "name": "https://box.com", "value": ""}],
    lookup: {  "1": "https://box.com" },
    sort: 'id',
    sortDir:'asc',
    page: 0,
    pageSize: 25
  }),
  methods: {
    viewRow: function(event) {
        var rowId = $(event.target).closest('tr').find('td:first').text()
        var site = this.lookup[rowId].replace(/(^\w+:|^)\/\//, '');
        document.location = "/url-headers/site/" + site
    },
    sortBy: function(s) {
      if (s === this.sort) {
        this.sortDir = (this.sortDir === 'asc') ? 'desc' : 'asc';
      } else {
        this.sortDir = 'asc';
      }
      this.sort = s;
    },
    isActiveSort: function(s) { 
      return this.sort === s; 
    },
    hasPage: function(dir) {
      if (dir === -1 && (this.page > 0)) return true;
      if (dir ===  1 && (((this.page+1)*this.pageSize) < this.rows.length)) return true;
      return false;
    },
    prevPage: function() {
      if (this.hasPage(-1)) this.page--;
    },
    nextPage: function() {
      if (this.hasPage(1)) this.page++;
    }
  },
  computed: {
    sortedRows: function() {
      return this.rows.sort((a, b) => {
        let dir = (this.sortDir === 'asc') ? 1 : -1;
        if (a[this.sort] < b[this.sort]) {
          return -1 * dir;
        } else if (a[this.sort] > b[this.sort]) {
          return  1 * dir;
        } else {
          return 0;
        }
      }).filter((row, idx) => {
        let s = this.page*this.pageSize;
        let e = (this.page+1)*this.pageSize;
        return (idx >= s && idx < e);
        });
    },
    pageSizeModel: {
      get() {
        return this.pageSize;
      },
      set(v) {
        this.pageSize = v;
        this.page = 0;
      }
    }
  },
  filters: {
    capitalize: function (v) {
      if (!v) return ''
      v = v.toString()
      return v.charAt(0).toUpperCase() + v.slice(1)
    }
  }
}).$mount('#app');
</script>
</body>
</html>