Skip to content

Commit

Permalink
Merge pull request #9 from tableflip/contributors
Browse files Browse the repository at this point in the history 
Pull in contributors data at build time
  • Loading branch information
@olizilla
olizilla authored Jun 20, 2017
2 parents c490005 + 3b9e9a0 commit fdaa741
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 342 deletions.
21 changes: 1 addition & 20 deletions content/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,29 +167,10 @@ <h6>Join Us</h6>
<a href="https://twitter.com/libp2p" target="_blank" class="btn-socials btn-twitter">TWITTER</a>
</div>
</div>
<div class="persons">

<svg id="shapes" width="0" height="0" style="border: none" xmlns="http://www.w3.org/2000/svg">
{{ partial "contributors.html" . }}

<defs></defs>

<symbol id="shape-icon" viewBox="0 0 300 346">

<path d="M296.5,84.2L153.5,1c-0.9-0.5-2.1-0.8-3.3-0.8c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0c-0.8,
0-1.5,0.1-2.2,0.3c-0.4,0.1-0.9,0.3-1.2,0.5L3.5,84.2C1.5,85.3,0,88,0,90.2v165c0,2.2,1.5,4.9,
3.5,6l143.1,83.2c0.3,0.2,0.7,0.3,1.1,0.5c0.7,0.2,1.5,0.4,2.3,0.4c1.2,0,
2.5-0.3,3.5-0.8l143.1-83.2c1.9-1.1,3.5-3.8,3.5-6v-165C300,88,298.5,85.3,296.5,84.2z">
</path>
</symbol>
</svg>
<div class="svg-wrapper hide">
<svg class="contributors" width="100%" height="200" xmlns="http://www.w3.org/2000/svg">
<g id="group-icons"></g>
</svg>
</div>
</div>
</article>

</main>

{{ partial "footer.html" . }}
Expand Down
285 changes: 0 additions & 285 deletions js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,290 +1,5 @@
var $ = require('jquery')
var initPage = require('./lib/init-page')
var initLogo = require('./lib/logo')

initPage()
initLogo()

$(function () {
$('svg.contributors')[0].pauseAnimations()

var $shapes = $('#shapes')
var $shapesDefs = $shapes.find('defs')
var $contributors = $('.contributors', '.persons')
var $persons = $('.persons')
// var personsWidth = $persons.width()
var personsHeight = $persons.height()
var iconWidth = 60
var iconHeight = 70
var rowsCount = Math.round(personsHeight / iconHeight)
var countInRow = 0
// var iconCount = 0

var rowWidth = 0

$(window).on('load', function () {
setTimeout(function () {
$('.svg-wrapper').removeClass('hide')
$('svg.contributors')[0].unpauseAnimations()
}, 5000)
getContributors()
})

function getContributors () {
$.get('https://contributors.cloud.ipfs.team/contributors?org=all', function (items) {
// var iconCount = items.length
countInRow = Math.ceil(items.length / rowsCount)
rowWidth = countInRow * (iconWidth + 20)
$('.contributors', '.persons').width(rowWidth)
items.forEach(function (item, index) {
var imgId = 'img' + index

var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern')
pattern.setAttributeNS(null, 'id', imgId)
pattern.setAttributeNS(null, 'patternContentUnits', 'objectBoundingBox')
pattern.setAttributeNS(null, 'height', '100%')
pattern.setAttributeNS(null, 'width', '100%')

var img = document.createElementNS('http://www.w3.org/2000/svg', 'image')
img.setAttributeNS(null, 'width', '1')
img.setAttributeNS(null, 'height', '1')
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', item.photo)
img.setAttributeNS(null, 'preserveaspectratio', 'none')

pattern.appendChild(img)

$shapesDefs.append(pattern)

var g = document.createElementNS('http://www.w3.org/2000/svg', 'g')

var indexRow = Math.floor(index / countInRow)
var y = indexRow * (iconHeight - 10)
var indexInRow = index - (countInRow * indexRow)
var offsetX = indexRow % 2 * ((iconWidth + (indexInRow !== 0 ? 10 : 0)) / 2)
var x = indexInRow * (iconWidth + (indexInRow !== 0 ? 10 : 0)) + offsetX

var person = document.createElementNS('http://www.w3.org/2000/svg', 'use')
person.setAttributeNS(null, 'id', 'icon' + index)
person.setAttributeNS(null, 'width', iconWidth)
person.setAttributeNS(null, 'height', iconHeight)
person.setAttributeNS(null, 'x', x)
person.setAttributeNS(null, 'y', y)
person.setAttributeNS(null, 'fill', 'url(#' + imgId + ')')
person.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#shape-icon')
person.setAttribute('data-url', item.url)
person.setAttribute('data-username', item.username)
person.setAttribute('data-index', indexInRow)
person.setAttribute('data-row', indexRow)
person.setAttribute('data-position', (indexInRow === 0 ? 'first'
: (indexInRow === (countInRow - 1) || index === (items.length - 1)) ? 'last' : ''))

g.appendChild(person)

var animateX = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
animateX.setAttributeNS(null, 'attributeName', 'x')
animateX.setAttributeNS(null, 'from', '0')
animateX.setAttributeNS(null, 'to', (iconWidth * (-1)))
animateX.setAttributeNS(null, 'repeatCount', 'indefinite')
animateX.setAttributeNS(null, 'fill', 'freeze')
animateX.setAttributeNS(null, 'additive', 'sum')
animateX.setAttributeNS(null, 'accumulate', 'sum')
animateX.setAttributeNS(null, 'dur', '10s')
animateX.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon' + index)

g.appendChild(animateX)

/*
var rnd1 = Math.floor(Math.random() * 15)
var rnd2 = Math.floor(Math.random() * 15)
var animateY = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animateY.setAttributeNS(null, 'attributeName', 'y');
animateY.setAttributeNS(null, 'from', (y));
animateY.setAttributeNS(null, 'to', (y + 10));
animateY.setAttributeNS(null, 'repeatCount', 'indefinite');
animateY.setAttributeNS(null, 'values', (y) + '; ' + (y + rnd1) + '; ' + (y + rnd2) + '; ' + y);
animateY.setAttributeNS(null, 'keyTimes', '0; 0.3; 0.6; 1');
animateY.setAttributeNS(null, 'fill', 'freeze');
animateY.setAttributeNS(null, 'dur', '20s');
animateY.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon' + index);
g.appendChild(animateY);
*/

$contributors.find('#group-icons').append(g)

$('#icon' + index)
.mouseenter(mouseEnter)
.mouseleave(mouseLeave)
.on('click', mouseClick)
})
})
}

function mouseClick () {
var url = $(this).attr('data-url')
if (url.length) {
window.open(url)
}
}

function mouseLeave () {
var el = $(this)
el.closest('#group-icons').find('.tooltip').remove()
// el.closest('#group-icons').find('.hex-hover').remove();

el.attr('width', (iconWidth))
el.attr('height', (iconHeight))

el.closest('svg')[0].unpauseAnimations()
}

function mouseEnter () {
var el = $(this)
var elX = el[0].x.animVal.value
var elY = el[0].y.animVal.value
el.closest('svg')[0].pauseAnimations()

var $parent = el.closest('#group-icons')

// $parent[0].appendChild(hexHover(elX - 3, elY - 3, iconWidth + 6, iconHeight + 6));

// el.attr('width', (iconWidth + 5));
// el.attr('height', (iconHeight + 5));

$parent[0].appendChild(tooltip(el.attr('data-username')))

var $tooltip = $parent.find('.tooltip')
$tooltip.attr('transform', 'translate(' + (elX + 65) + ',' + (elY + 20) + ')')
}

// reposition first icon to last
setInterval(function () {
for (var n = 0; n < rowsCount; n++) {
var $firstIcon = $('use[data-row=' + n + ']' + '[data-position=first]')
var firstIconX = (typeof $firstIcon[0] === 'undefined') ? 0 : $firstIcon[0].x.animVal.value
if (!$firstIcon.length || firstIconX > (iconWidth * (-1))) continue

var firstIconIndex = parseInt($firstIcon.attr('data-index'))
var nextIndex = firstIconIndex < countInRow ? firstIconIndex + 1 : 0
var $nextIcon = $('use[data-row=' + n + ']' + '[data-index=' + nextIndex + ']')

// var $firstIconAnim = $firstIcon.closest('g').find('animate[attributeName="x"]')

var $lastIcon = $('use[data-row=' + n + ']' + '[data-position=last]')
var lastIconX = $lastIcon[0].x.animVal.value

$firstIcon[0].setAttribute('data-position', 'last')
$nextIcon[0].setAttribute('data-position', 'first')
$lastIcon[0].setAttribute('data-position', '')

var $firstIconparent = $firstIcon.closest('g')
var clone = $firstIconparent.get(0)
$firstIconparent.remove()

$(clone).find('use').attr('x', (lastIconX + iconWidth + 10))
var id = $(clone).find('use').attr('id')
$('#group-icons').append(clone)
var $el = $('#' + id)
$el.closest('g').find('[attributeName=x]')[0].beginElement()
$el
.mouseenter(mouseEnter)
.mouseleave(mouseLeave)
.on('click', mouseClick)
}
}, 1000)

function tooltip (username) {
var gTitle = document.createElementNS('http://www.w3.org/2000/svg', 'g')
gTitle.setAttributeNS(null, 'class', 'tooltip')

// var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#shape-tooltip');
// use.setAttribute('width', '170');
// use.setAttribute('height', '39');
// gTitle.appendChild(use);

var filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter')
filter.setAttribute('id', 'tooltip-shadow')
filter.setAttribute('width', '150%')
filter.setAttribute('height', '150%')

var feOffset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset')
feOffset.setAttribute('result', 'offOut')
feOffset.setAttribute('in', 'SourceGraphic')
feOffset.setAttribute('dx', '3')
feOffset.setAttribute('dy', '3')
filter.appendChild(feOffset)

var feColorMatrix = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix')
feColorMatrix.setAttribute('result', 'matrixOut')
feColorMatrix.setAttribute('in', 'offOut')
feColorMatrix.setAttribute('type', 'matrix')
feColorMatrix.setAttribute('values', '0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0')
filter.appendChild(feColorMatrix)

var feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur')
feGaussianBlur.setAttribute('result', 'blurOut')
feGaussianBlur.setAttribute('in', 'matrixOut')
feGaussianBlur.setAttribute('stdDeviation', '3')
filter.appendChild(feGaussianBlur)

var feBlend = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend')
feBlend.setAttribute('in', 'SourceGraphic')
feBlend.setAttribute('in2', 'blurOut')
feBlend.setAttribute('mode', 'normal')
filter.appendChild(feBlend)

gTitle.appendChild(filter)

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('style', 'fill:#fff; stroke:#b3b3b3; stroke-miterlimit: 10; opacity: 1')
path.setAttribute('d', 'M1.12,13.5,8.58,9.36a3,3,0,0,0,1.54-2.62V3.5a3,3,0,0,1,3-3h145a3,3,0,0,1,3,' +
'3v19a3,3,0,0,1-3,3h-145a3,3,0,0,1-3-3V19.45a3,3,0,0,0-1.78-2.74Z')
path.setAttribute('filter', 'url(#tooltip-shadow)')

gTitle.appendChild(path)

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
text.setAttributeNS(null, 'x', '15')
text.setAttributeNS(null, 'y', '17')
text.textContent = username
gTitle.appendChild(text)

return gTitle
}

var x, left, down

$('.svg-wrapper')
.mousedown(function (e) {
e.preventDefault()
down = true
x = e.pageX
left = $(this).scrollLeft()
})
.mousemove(function (e) {
if (down) {
var newX = e.pageX
$('.svg-wrapper').scrollLeft(left - newX + x)
}
})
// .bind('DOMMouseScroll mousewheel', function (e) {
// e.preventDefault();
// left = $(this).scrollLeft();
// var delta = e.originalEvent.wheelDelta || (-e.originalEvent.detail * 10);
// $('.svg-wrapper').scrollLeft(left - delta);
// });
$('body').mouseup(function (e) {
down = false
})

$(window).on('resize', function () {
var $stage = $('#Stage')
if (!$stage.length) return

$stage.closest('.flow-wrapper').remove()
$('.homepage-animation').addClass('static')
$('#static-stage').addClass('show')
})
})
Loading

0 comments on commit fdaa741

Please sign in to comment.