JSFiddle - React, Tailwind, and code Playground

vue-virtual-scroller try 3 with working delete

by Christopher O

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>

<script src="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.min.js"></script>

<div id="app">
  <input placeholder="Search" type="text" class="headSearchBox" v-model="headSearch" /> Records: {{dispCount}}
  <my-list :list="listSorted"></my-list>
  <p>{{someInfo}}</p>
</div>
<!-- {{ list }} -->
<br>
<div style="width: 300px; height: 60px; border: 1px solid #ccc; padding: 5px 0 5px 2px; ">
<div class="avtr" style="background-image:url('https://s3.amazonaws.com/uifaces/faces/twitter/nellleo/128.jpg')"><i class="fab fa-facebook-messenger avch2" title="Facebook"></i></div>
  <span class="lstname">{{ item.n }}</span>
</div>
<br>
<div style="width: 300px; height: 60px; border: 1px solid #ccc; padding: 5px 0 5px 2px;">
<div class="avtr da"></div>
  <span class="lstname">{{ item.n }}</span>
</div>

CSS

.scroller {
  overflow-y: scroll;
  overflow-x: none;
  height: 240px;
  width: 300px;
  border: 1px solid blue;
  margin-top:5px;
}

.user {
  height: 50px;
  border-bottom: 1px solid grey;
  white-space: nowrap;
  padding: 5px 0 5px 2px;
}

.user:hover {
  background: green;
  color: white;
}

.headSearchBox{
  width:150px;
}
.avtr {
    width:50px;
    height:50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin: 0 5px 0 0;
    float:left;
    background-size: 50px 50px;
    background-color:#ccc;
    position:relative;
}
.da{
  background: #ccc url("https://secure.gravatar.com/avatar/bfc977bcf4cd0c3362f6e50d3e9d1760?s=600&d=mm&r=g") no-repeat;
  background-size: 50px 50px;
}

.avch2{
  color:#fff;
  position:absolute;
  bottom:-2px;
  right:-2px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  text-shadow: 2px 2px 4px #aaa;
}
.avch2:hover{
  color:#00f;
}
/*   ---------------------------------------------   */
.lstname{
  /* float:left; */
  font-weight:bold;
}
.lstwhen{
  float:right;
}
.lstmsg{

}
.cicon{
  margin-left: 15px;
  font-size: 12px;
  opacity: 0.5;
}

.cinfo{
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.8;
}


.ur{
    float:right;
    display: block;
    color: #fff;
    font-weight:bold;
    /*border: 1px solid #AEAEAE;*/
    border-radius: 30px;
    background-color: lightgreen;
    font-size: 10px;
    line-height: 0px;
    padding: 8px;
}

/*  BEGIN Convo Del Button  */
div.user:hover input.deleteBtn {
    display: block;
}
div.user input.deleteBtn {
    position:absolute; /* parent must have "position: relative" hardset; */
    display:none;
    top:-7px;
    left:1px;
}

.deleteBtn{
    cursor:pointer;
    color: #000;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #ddd;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 8px 3px;
    opacity: 0.4;
}
.deleteBtn:hover{
  background: #f00;
  border:...

JavaScript

console.clear();


// ----  BEGIN TA  ------------------------------------------------------------
var TAtemplateProps = {
    prefix: "",
    suffix: "",
    seconds: "0m",
    minute: "1m",
    minutes: "%dm",
    hour: "1h",
    hours: "%dh",
    day: "1d",
    days: "%dd",
    month: "1mo",
    months: "%dmo",
    year: "1y",
    years: "%dy"
};

var TAtemplate = function (t, n) {
    return TAtemplateProps[t] && TAtemplateProps[t].replace(/%d/i, Math.abs(Math.round(n)));
};

var TAsingle = function (pastTime,now) {
    if (!pastTime) return;
    pastTime = pastTime.replace(/\.\d+/, ""); // remove milliseconds
    pastTime = pastTime.replace(/-/, "/").replace(/-/, "/");
    pastTime = pastTime.replace(/T/, " ").replace(/Z/, " UTC");
    pastTime = pastTime.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
    pastTime = new Date(pastTime * 1000 || pastTime);

    //var now = new Date();
    var seconds = ((now.getTime() - pastTime) * 0.001) >> 0;
    var minutes = seconds / 60;
    var hours = minutes / 60;
    var days = hours / 24;
    var years = days / 365;

    return TAtemplateProps.prefix + (seconds < 45 && TAtemplate('seconds', seconds) || seconds < 90 && TAtemplate('minute', 1) || minutes < 45 && TAtemplate('minutes', minutes) || minutes < 90 && TAtemplate('hour', 1) || hours < 24 && TAtemplate('hours', hours) || hours < 42 && TAtemplate('day', 1) || days < 30 && TAtemplate('days', days) || days < 45 && TAtemplate('month', 1) || days < 365 && TAtemplate('months', days / 30) || years < 1.5 && TAtemplate('year', 1) || TAtemplate('years', years)) + TAtemplateProps.suffix;
};


var cacheTimeTA = 0;
function timeAgo() {
    // console.log('timeAgo');
    var now = new Date();
    ts = Math.round(now.getTime() / 1000);

    if(cacheTimeTA > ts) return;
    cacheTimeTA = ts + 60;
    
    console.log('timeAgo full');

    var elements = document.getElementsByClassName('timeago');
    for (var i in elements) {
        var $this = elements[i];
   ...