<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<form role="form" id="NPMSearchForm" action="#">
<h1 class="form-signin-heading">NPM Search Engine</h1>
<div class="input-group input-group-lg">
<span class="input-group-addon">Keywords</span>
<input type="text" class="form-control" placeholder="Ex: arykow npm" name="keywords">
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit">Search</button>
<br>
</form>
<section class="packages">
<div class="row packages-group">
<div class="col-md-6 package">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<img src="http://placehold.it/110x110" alt="bootsnipp" class="img-rounded img-responsive package-image" />
</div>
<div class="col-xs-9 col-md-9 section-box">
<h2 class="name">
Bootsnipp <a href="http://bootsnipp.com/" target="_blank"><span class="glyphicon glyphicon-new-window">
</span></a>
</h2>
<p class="description">
Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework</p>
<hr />
<div class="row rating-desc">
<div class="col-md-12">
<span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
</span><span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
</span><span class="glyphicon glyphicon-heart"></span>(36)<span class="separator">|</span>
<span class="glyphicon glyphicon-comment"></span>(100 Comments)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 package">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<img src="http://placehold.it/110x110" alt="jQuery2DotNet" class="img-rounded img-responsive package-image" />
</div>
<div class="col-xs-9 col-md-9 section-box">
<h2 class="name">
jQuery2DotNet <a href="http://www.jquery2dotnet.com/" target="_blank"><span class="glyphicon glyphicon-new-window">
</span></a>
</h2>
<p class="description">
Cool jQuery, CSS3,HTML5, MVC and C# tutorials with examples</p>
<hr />
<div class="row rating-desc">
<div class="col-md-12">
<span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
</span><span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
</span><span class="glyphicon glyphicon-heart"></span>(36)<span class="separator">|</span>
<span class="glyphicon glyphicon-comment"></span>(100 Comments)
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
body{ margin-top:0px; }
.glyphicon { margin-right:5px;}
.section-box h2 { margin-top:0px;}
.section-box h2 a { font-size:15px; }
.glyphicon-heart { color:#e74c3c;}
.glyphicon-comment { color:#27ae60;}
.separator { padding-right:5px;padding-left:5px; }
.section-box hr {margin-top: 0;margin-bottom: 5px;border: 0;border-top: 1px solid rgb(199, 199, 199);}
.packages { display: none; }
try {
var MockBuilder = function() {
this.data = {
};
};
MockBuilder.prototype.add = function(id, name, description, url) {
this.data[id] = {
name: name,
description: description,
url: url,
image: "http://lorempixel.com/200/200/abstract/" + name
};
return this;
};
MockBuilder.prototype.build = function() {
return this.data;
};
var NPMSearchForm = function() {
this.data = {
keywords: null
};
};
NPMSearchForm.prototype.keywords = function(keywords) {
this.data.keywords = keywords;
return this;
};
NPMSearchForm.prototype.submit = function(callback) {
var data = this.data;
var mock = new MockBuilder();
for(var index = 1; index < (1 + Math.random() * 10); index++) {
mock.add("package" + index, "name" + index, "description" + index, "http://placehold.it/100x" + (10 * index));
}
setTimeout(function() {
callback(null, mock.build());
}, 1);
};
$(document).ready(function () {
var packagesTemplate = $('.packages');
var packagesElement = null;
$("#NPMSearchForm").submit(function (event) {
try {
var keywords = $(this).find('input:text[name=keywords]').val();
console.log("keywords: %s", keywords);
var action = function() {
var callback = function(err, results) {
if(err) {
alert(err);
} else {
packagesElement = packagesTemplate.clone();
packagesElement.insertBefore(packagesTemplate);
var group = packagesElement.find('.packages-group');
var keys = Object.keys(results);
while(packagesElement.find('.package').size() < keys.length) {
group.clone().insertBefore(group);
}
var index = 0;
packagesElement.find('.package').each(function(i, e) {
if (index < keys.length) {
var result = results[keys[index++]];
$(e).find('p.description').text(result.description);
$(e).find('img.package-image').attr('src', result.image);
$(e).find('h2.name').each(function(i, e) {
e.firstChild.data = " " + result.name + " ";
$(e).find('a').attr('href', result.url);
});
//$(e).find('.rating-desc').hide();
} else {
$(e).hide();
}
});
packagesElement.fadeIn();
}
};
new NPMSearchForm().keywords(keywords).submit(callback);
};
if(packagesElement) {
packagesElement.fadeOut(function() {
packagesElement.remove();
packagesElement = null;
action();
});
} else {
action();
}
} catch(err) {
console.log("throws err: %s", err);
}
event.preventDefault();
});
});
} catch(err) {
alert("err: " + err);
}
