code line selector

by Soviut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="scroll">
  <div class="scroll__body">
    <div class="code">
      <div class="code-line" tabindex="0" v-for="line, i in lines" v-on:click="lineClicked(i)" v-bind:class="{ selected: selectedLines.indexOf(i) > -1 }">
        <div class="code-line__content">
          {{line}}
        </div>
        <div class="code-line__actions">
          <div class="action action-selected">[y]</div>
          <div class="action action-add">Add condition [+]</div>
          <div class="action action-remove">Remove condition [x]</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

CSS

.scroll {
  width: 100%;
  height: 200px;
  overflow: scroll;
}

.code {
  line-height: 20px;
}

.code-line {
  position: relative;

  white-space: nowrap;
  cursor: pointer;
}

.code-line:hover,
.code-line:focus {
  background: #DDD;
  outline: 0;
}

.code-line.selected .action-selected {
  display: block;
}

.action {
  display: none;
}

.code-line:not(.selected):hover .action-add,
.code-line:not(.selected):focus .action-add {
  display: block;
}

.code-line.selected:hover .action-remove,
.code-line.selected:focus .action-remove {
  display: block;
}

.code-line.selected:hover .action-selected,
.code-line.selected:focus .action-selected {
  display: none;
}


.code-line__content {
  font-family: monospace;
}

.code-line__actions {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 10px;
  
  font-family: arial, helvetica, san-serif;
  text-align: right;
  background: cornflowerblue;
}

JavaScript

var app = new Vue({
  el: '#app',
  methods: {
  	lineClicked(i) {
    	let foundIndex = this.selectedLines.indexOf(i);
      console.log('found', foundIndex);
      
      if (foundIndex > -1) {
      	this.selectedLines.splice(foundIndex, 1);
      }
      else {
        this.selectedLines.push(i);
      }
    }
  },
  
  data: {
    selectedLines: [],
    lines: [
    	'let this = "a line of code"',
    	'var testing = "this is a much longer line that will go a long way across the screen and get overlapped"',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line',
    	'this is a line'
    ]
  }
})