Last active
September 8, 2018 11:44
-
-
Save gknasln/e1a0b185937a88723bfacebebc1a2fad to your computer and use it in GitHub Desktop.
Untitled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); | |
* { | |
box-sizing: border-box; | |
font-family: Roboto; | |
} | |
body{ | |
margin:0; | |
} | |
.tools{ | |
width: 100%; | |
height: 60px; | |
position: relative; | |
background: lightgray; | |
overflow: hidden; | |
} | |
.first-area, .second-area{ | |
position: absolute; | |
left: 0; | |
width: calc(100% - 40px); | |
height: 100%; | |
transition: top 0.7s; | |
} | |
.first-area{ | |
top: 0; | |
} | |
.second-area{ | |
top: 100%; | |
} | |
#search-field{ | |
width: 80%; | |
height: 35px; | |
margin: 10px auto 0 10%; | |
border-radius: 5px; | |
padding-left: 30px; | |
} | |
#filter-button{ | |
width: 40px; | |
height: 35px; | |
border-radius: 5px; | |
} | |
#up-page, #down-page{ | |
position: absolute; | |
right: 0; | |
height: 50%; | |
width: 40px; | |
border-radius: 5px; | |
/*border: none;*/ | |
background: linear-gradient(to bottom, lightgray, white, lightgray); | |
} | |
#up-page{ | |
top: 0; | |
} | |
#down-page{ | |
top: 50%; | |
} | |
.container{ | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
padding-top: 20px; | |
} | |
td button{ | |
background: none; | |
border: none; | |
outline: none; | |
} | |
table{ | |
font-family: arial, sans-serif; | |
font-size: 0.9em; | |
border-collapse: collapse; | |
width: 90%; | |
} | |
td, th { | |
border: 1px solid #dddddd; | |
text-align: left; | |
padding: 8px; | |
} | |
tr:nth-child(odd) { | |
background-color: #dddddd; | |
} | |
table tr:nth-child(1){ | |
background: linear-gradient(to bottom, lightgray, | |
rgb(165,165,165), | |
rgb(170,170,170) , | |
rgb(165,165,165), | |
lightgray); | |
border-radius: 4px; | |
text-align: center !important; | |
} | |
.highlight{ | |
background-color: green !important; | |
} | |
tr:hover{ | |
background: lightblue; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class='tools'> | |
<button id="up-page"> ▲ </button> | |
<button id="down-page"> ▼ </button> | |
<div class="first-area"> | |
<input type="text" id="search-field" /> | |
<button id="filter-button">X</button> | |
</div> | |
<div class="second-area"></div> | |
</div> | |
<div class="container"> | |
<table> | |
<tr> | |
<td> | |
<span>Kişi</span> | |
<button>▼</button> | |
</td> | |
<td> | |
<span>Firma adı</span> | |
<button>▼</button> | |
</td> | |
<td> | |
<span>E-mail</span> | |
<button>▼</button> | |
</td> | |
<td> | |
<span>Telefon</span> | |
<button>▼</button> | |
</td> | |
<td> | |
<span>Kayıt oluşturan</span> | |
<button>▼</button> | |
</td> | |
</tr> | |
</table> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const tableElement = document.querySelector('table'); | |
const firstToolContainer = document.querySelector('.tools .first-area'); | |
const secondToolContainer = document.querySelector('.tools .second-area'); | |
const upButton = document.querySelector('.tools #up-page'); | |
const downButton = document.querySelector('.tools #down-page'); | |
downButton.addEventListener('click', function(){ | |
firstToolContainer.style.top = '-100%'; | |
secondToolContainer.style.top = '0'; | |
}); | |
upButton.addEventListener('click', function(){ | |
firstToolContainer.style.top = '0'; | |
secondToolContainer.style.top = '100%'; | |
}); | |
const costumers = [ | |
{ | |
name:'Gökhan', | |
surname:'Aslan', | |
firm:'Beymen', | |
email:'gknasln@gmail.com', | |
author:'Murat Erat', | |
phone:'507 009 35 58', | |
webSite:'www.gokhanaslan.com.tr' | |
}, | |
{ | |
name:'Sinan', | |
surname:'Odak', | |
firm:'Dashmon', | |
email:'sinanodak@gmail.com', | |
author:'Murat Erat', | |
phone:'507 009 35 58', | |
webSite:'www.modahayat.com.tr' | |
}, | |
{ | |
name:'Hakan', | |
surname:'Karaduman', | |
firm:'Dashmon', | |
email:'karadumanhakan@gmail.com', | |
author:'Gökhan Aslan', | |
phone:'532 369 35 48', | |
webSite:'www.hakankaraduman.com.tr' | |
}, | |
{ | |
name: 'ipek', | |
surname: 'hitay' | |
}, | |
{ | |
name: 'Yağmur', | |
surname: 'Genel' | |
}, | |
{ | |
name: 'İnci', | |
surname: 'Türkdoğan' | |
} | |
]; | |
const views = ['firm', 'email', 'phone', 'author']; | |
let table = " <tr> <th style='text-align: center;'> <input type='checkbox'> </th> " ; | |
table += "<td> Kişi </td>" | |
for(var x = 0; x < views.length; x++){ | |
table += '<td> ' + translate(views[x]) + ' </th>'; | |
} | |
table += '</tr>'; | |
for(var i = 0; i < costumers.length; i++){ | |
table += '<tr> <td style="text-align: center;"> <input type="checkbox" data-index= ' + i + '> </td> ' | |
table += '<td> ' + costumers[i]['name'] + ' ' + costumers[i]['surname'] + ' </td> ' ; | |
for(var j = 0; j < views.length; j++){ | |
table += '<td> ' + costumers[i][views[j]] + ' </th>'; | |
} | |
table += '</tr>'; | |
} | |
tableElement.innerHTML = table; | |
function translate(word){ | |
switch(word){ | |
case 'firm': | |
return 'Firma'; | |
break; | |
case 'email': | |
return 'E-mail'; | |
break; | |
case 'author': | |
return 'Kayıt oluşturan'; | |
break; | |
case 'phone' : | |
return 'Telefon'; | |
break; | |
case 'webSite': | |
return 'Web Sitesi'; | |
break; | |
} | |
} | |
/* | |
tableElement.addEventListener('mousemove', function(e){ | |
if(e.target.parentElement.tagName == 'TR' && e.shiftKey){ | |
alert(); | |
} | |
}); | |
*/ | |
const rows = document.querySelectorAll('table tr'); | |
let lastIndex; | |
var i = 0; | |
for(; i < rows.length; i++){ | |
rows[i].querySelector('input').addEventListener('click', function(){ | |
lastIndex = this.dataset.index; | |
}); | |
rows[i].addEventListener('mousemove', function(e){ | |
if(e.shiftKey){ | |
if(lastIndex){ | |
let currentIndex = this.querySelector('input').dataset.index; | |
for(var j = 0;j < rows.length; j++){ | |
if(currentIndex >= j && j > lastIndex ){ | |
rows[j].classList.add('highlight'); | |
}else{ | |
rows[j].classList.remove('highlight'); | |
} | |
} | |
} | |
} | |
}); | |
} | |
window.addEventListener('keyup', function(e){ | |
if(e.key == 'Shift'){ | |
document.querySelectorAll('table input').classList.remove('highlight'); | |
} | |
}); | |
/* | |
document.querySelectorAll('td input').forEach((checkbox, i) => { | |
checkbox.onclick = function(e){ | |
if(e.shiftKey){ | |
alert(e.shiftKey); | |
} | |
} | |
});*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment