Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00
Code Issues Activity

Added nifty transitions

Browse source
This commit is contained in:
Brian Peacock 2014-05-07 16:51:03 -05:00
parent 112e551240
commit 8b3dc9072f
8 changed files with 308 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
lib/GUI/css/main.less
View file

@ -1,6 +1,7 @@
@import "../../../node_modules/helpers.less/helpers.less";
@import "./markdown.less";
@import "./highlight.js.less";
@import "./fontello.less";
/*** Main Styles ***/
body {
@ -8,16 +9,20 @@ body {
font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}
a, a:visited {
text-decoration: none;
color: #0D5AFF;
}
a:hover {
text-decoration: underline;
}
h1 {
text-align: center;
a, a:visited {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
@ -49,12 +54,21 @@ h1 {
#search-form {
float: right;
@media (max-width: 540px) {
float: none;
margin-top: 6px;
}
@height: 30px;
input, button {
margin: 0;
vertical-align: top;
border: 1px solid #CCC;
&:focus {
outline: none;
}
}
input {
@ -64,10 +78,6 @@ h1 {
padding: 0 5px;
font-size: 16px;
border-right: 0;
&:focus {
outline: none;
}
}
button {
@ -75,7 +85,7 @@ h1 {
width: @height;
margin: 0;
border-left: 0;
background: none;
background: #FFF;
cursor: pointer;
font-size: 16px;
color: #999;
@ -94,12 +104,28 @@ h2 {
background: #F3F3F3;
.border-radius(4px);
padding: 12px 15px 15px;
.transition(height .3s);
overflow: hidden;
h3 {
font-size: 24px;
margin: 0 0 10px;
}
.name:hover {
text-decoration: none;
}
.name:before {
margin: 0;
margin-left: -10px;
.transformTransition(.15s);
}
&.open .name:before {
.rotate(90deg);
}
.version {
font-size: 16px;
color: #666;

2
lib/GUI/entry.handlebars
View file

@ -1,6 +1,6 @@
<article class='entry' data-name='{{ name }}' data-version='{{ version }}'>
<h3>
<a class='name' href='javascript:void(0)'>{{ name }}</a>
<a class='name icon-angle-right' href='javascript:void(0)'>{{ name }}</a>
<small class='version'>v{{ version }}</small>
<div class='author'>By: {{ _npmUser.name }}</div>
</h3>

2
lib/GUI/index.handlebars
View file

@ -20,7 +20,7 @@
<h2>
Available Packages:
<form id='search-form'>
<input type='text' placeholder='Search' name='q' /><button class='clear'>X</button>
<input type='text' placeholder='Search' /><button class='clear icon-search'></button>
</form>
</h2>

44
lib/GUI/js/entry.js
View file

@ -1,27 +1,61 @@
var $ = require('unopinionate').selector,
onClick = require('onclick');
onClick = require('onclick'),
transitionComplete = require('transition-complete');
$(function() {
onClick('.entry .name', function() {
var $this = $(this),
$entry = $this.closest('.entry');
//Close entry
if($entry.hasClass('open')) {
$entry
.removeClass('open')
.find('.readme').remove();
.height($entry.height())
.removeClass('open');
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
}
//Open entry
else {
//Close open entries
$('.entry.open').each(function() {
var $this = $(this);
$this
.height($this.attr('data-height'))
.removeClass('open');
});
//Add the open class
$entry.addClass('open');
//Explicitly set heights for transitions
var height = $entry.height();
$entry
.attr('data-height', height)
.css('height', height);
//Get the data
$.ajax({
url: '/-/readme/'+$entry.attr('data-name')+'/'+$entry.attr('data-version'),
dataType: 'text',
success: function(html) {
console.log(html);
$("<div class='readme'>")
var $readme = $("<div class='readme'>")
.html(html)
.appendTo($entry);
$entry.height(height + $readme.outerHeight());
transitionComplete(function() {
$entry.css('height', 'auto');
});
}
});
}

14
lib/GUI/js/search.js
View file

@ -2,10 +2,11 @@ var $ = require('unopinionate').selector,
template = require('../entry.handlebars');
$(function() {
var $form = $('#search-form'),
$input = $form.find('input'),
var $form = $('#search-form'),
$input = $form.find('input'),
$searchResults = $("#search-results"),
$body = $('body'),
$body = $('body'),
$clear = $form.find('.clear'),
request;
$form.bind('submit keyup', function(e) {
@ -15,6 +16,11 @@ $(function() {
$body.addClass('state-search');
//Switch the icons
$clear
[q ? 'addClass' : 'removeClass']('icon-cancel')
[!q ? 'addClass' : 'removeClass']('icon-search');
if(q) {
if(request) {
request.abort();
@ -41,7 +47,7 @@ $(function() {
}
});
$form.find('.clear').click(function(e) {
$clear.click(function(e) {
e.preventDefault();
$input.val('');
$form.keyup();

112
lib/static/main.css
View file

File diff suppressed because one or more lines are too long

130
lib/static/main.js
View file

@ -13,7 +13,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
if (helper = helpers.version) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.version); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "'>\n <h3>\n <a class='name' href='javascript:void(0)'>";
+ "'>\n <h3>\n <a class='name icon-angle-right' href='javascript:void(0)'>";
if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
@ -32,35 +32,69 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
});
},{"handlebars/runtime":11}],2:[function(require,module,exports){
var $ = require('unopinionate').selector,
onClick = require('onclick');
onClick = require('onclick'),
transitionComplete = require('transition-complete');
$(function() {
onClick('.entry .name', function() {
var $this = $(this),
$entry = $this.closest('.entry');
//Close entry
if($entry.hasClass('open')) {
$entry
.removeClass('open')
.find('.readme').remove();
.height($entry.height())
.removeClass('open');
setTimeout(function() {
$entry.css('height', $entry.attr('data-height') + 'px');
}, 0);
transitionComplete(function() {
$entry.find('.readme').remove();
$entry.css('height', 'auto');
});
}
//Open entry
else {
//Close open entries
$('.entry.open').each(function() {
var $this = $(this);
$this
.height($this.attr('data-height'))
.removeClass('open');
});
//Add the open class
$entry.addClass('open');
//Explicitly set heights for transitions
var height = $entry.height();
$entry
.attr('data-height', height)
.css('height', height);
//Get the data
$.ajax({
url: '/-/readme/'+$entry.attr('data-name')+'/'+$entry.attr('data-version'),
dataType: 'text',
success: function(html) {
console.log(html);
$("<div class='readme'>")
var $readme = $("<div class='readme'>")
.html(html)
.appendTo($entry);
$entry.height(height + $readme.outerHeight());
transitionComplete(function() {
$entry.css('height', 'auto');
});
}
});
}
});
});
},{"onclick":12,"unopinionate":13}],3:[function(require,module,exports){
},{"onclick":12,"transition-complete":13,"unopinionate":14}],3:[function(require,module,exports){
require('./search');
require('./entry');
@ -69,10 +103,11 @@ var $ = require('unopinionate').selector,
template = require('../entry.handlebars');
$(function() {
var $form = $('#search-form'),
$input = $form.find('input'),
var $form = $('#search-form'),
$input = $form.find('input'),
$searchResults = $("#search-results"),
$body = $('body'),
$body = $('body'),
$clear = $form.find('.clear'),
request;
$form.bind('submit keyup', function(e) {
@ -82,6 +117,11 @@ $(function() {
$body.addClass('state-search');
//Switch the icons
$clear
[q ? 'addClass' : 'removeClass']('icon-cancel')
[!q ? 'addClass' : 'removeClass']('icon-search');
if(q) {
if(request) {
request.abort();
@ -108,14 +148,14 @@ $(function() {
}
});
$form.find('.clear').click(function(e) {
$clear.click(function(e) {
e.preventDefault();
$input.val('');
$form.keyup();
});
});
},{"../entry.handlebars":1,"unopinionate":13}],5:[function(require,module,exports){
},{"../entry.handlebars":1,"unopinionate":14}],5:[function(require,module,exports){
"use strict";
/*globals Handlebars: true */
var base = require("./handlebars/base");
@ -755,7 +795,71 @@ $(document).bind('mousedown', click._doAnywheres);
module.exports = click;
},{"unopinionate":13}],13:[function(require,module,exports){
},{"unopinionate":14}],13:[function(require,module,exports){
(function(root) {
var callbacks = [];
var transitionComplete = function(callback) {
if(callbacks.length === 0) {
setEvent();
}
callbacks.push(callback);
};
function setEvent() {
document.addEventListener(eventName(), function() {
var i = callbacks.length;
while(i--) {
callbacks[i]();
}
callbacks = [];
});
}
var _eventName;
function eventName() {
if(!_eventName) {
// Sourced from: http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers
var el = document.createElement('fakeelement');
transitions = {
transition: 'transitionend',
OTransition: 'oTransitionEnd',
MozTransition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd'
};
for(var t in transitions) {
if(el.style[t] !== undefined) {
_eventName = transitions[t];
}
}
}
return _eventName;
}
/*** Export ***/
// AMD
if(typeof define === 'function' && define.amd) {
define([], function() {
return transitionComplete;
});
}
// CommonJS
else if(typeof exports !== 'undefined') {
module.exports = transitionComplete;
}
// Browser Global
else {
root.transitionComplete = transitionComplete;
}
})(this);
},{}],14:[function(require,module,exports){
(function (global){
(function(root) {
var unopinionate = {

1
package.json
View file

@ -32,6 +32,7 @@
"request": ">= 2.31.0",
"semver": ">= 2.2.1",
"tar.gz": "^0.1.1",
"transition-complete": "0.0.2",
"underscore": "^1.6.0",
"unopinionate": "0.0.4"
},