expand reblast no jquery
by John Allan
HTML
<div class="js-article-list">
<article class="collapsed"><h3>title</h3><a href="#"><span>test</span></a><img class="reblast-sharefile-thumbnail" data-src="http://41.media.tumblr.com/3e6f20bf136ce19c29e574c31be68d0f/tumblr_mra45iZgB71scamcyo1_1280.jpg"></article>
<article class="collapsed"><h3>title</h3><a href="#">test</a><img class="reblast-sharefile-thumbnail" data-src="http://41.media.tumblr.com/3e6f20bf136ce19c29e574c31be68d0f/tumblr_mra45iZgB71scamcyo1_1280.jpg"></article>
</div>
CSS
article {
background: #cdcdcd;
margin: 10px;
width: 200px;
height: 100px;
}
article.collapsed {
height: 50px;
}
article img {
max-width: 100%;
max-height: 50%;
display:block;
}
article h3 {
margin:0;
}
JavaScript
window.sharefileinline = window.sharefileinline || {};
window.sharefileinline.handleExpandReblast = function (e) {
var t, img, i, l, element, isA;
element = e.target;
isA = false;
while (element.parentNode) {
if (element.nodeName.toLocaleLowerCase() === 'a') {
isA = true;
}
if (element.className.indexOf('collapsed') >= 0) {
t = element;
break;
}
element = element.parentNode;
}
if (!isA) {
e.preventDefault();
if (t) {
img = t.querySelector('.reblast-sharefile-thumbnail');
t.className = t.className.replace('collapsed', '');
img.setAttribute('src', img.getAttribute('data-src'));
}
}
};
if (document.querySelector && document.addEventListener) {
document.querySelector('.js-article-list').addEventListener('click', window.sharefileinline.handleExpandReblast);
}