Skip to content

Commit

Permalink
Add web plugin functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Perez committed May 2, 2015
1 parent b5c7895 commit 7ea6879
Show file tree
Hide file tree
Showing 10 changed files with 562 additions and 153 deletions.
11 changes: 11 additions & 0 deletions lib/GUI/css/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@
.main-header {
background: @white;

.navbar-default .navbar-nav > .open {
a.dropdown-toggle, a.dropdown-toggle:focus {
color: #fff;
background-color: #d9534f;
}
a:hover {
color: #fff;
background-color: #d9534f;
}
}

.navbar {
margin-bottom: 0;
}
Expand Down
149 changes: 32 additions & 117 deletions lib/GUI/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,42 @@
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>{{ name }}</title>

<link rel="icon" type="image/png" href="{{ baseUrl }}/-/static/favicon.png"/>
<link rel="stylesheet" type="text/css" href="{{ baseUrl }}/-/static/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body">
<header class="main-header">
<nav class="navbar navbar-default red-bg white no-border no-rnd-cnr" role="navigation">
<div class="container">
<div class="navbar-header clearfix">
<div class="npm-logo brand">
<a href="{{ baseUrl }}"></a>
</div>

<!-- login/logout for small devices -->
<div class="pull-right visible-xs pad-right-10">
<div>
{{#if username}}
<p class="white no-bg navbar-text pad-right-10 inline-block">Hi {{username}}</p>
<button type="submit" class="btn btn-danger inline-block js-userLogoutBtn">Logout</button>
{{else}}
<p class="white no-bg navbar-text pad-right-10 inline-block">&nbsp;</p>
<button type="submit" class="btn btn-danger inline-block" data-toggle="modal" data-target="#login-form" onclick="return false">Login</button>
{{/if}}
</div>
</div>
</div>

<div class="navbar-left hidden-xs">&nbsp;&nbsp;</div>

<div class="navbar-left setup hidden-xs">
<code class="white no-bg">npm set registry {{ baseUrl }}</code><br>
<code class="white no-bg">npm adduser --registry {{ baseUrl }}</code>
</div>

<!-- login/logout for large devices -->
<div class="navbar-collapse collapse">
<div class="navbar-right">
<form class="navbar-form navbar-right">
{{#if username}}
<p class="white no-bg pad-right-10 inline-block">Hi {{username}}</p>
<button type="submit" class="btn btn-danger inline-block js-userLogoutBtn">Logout</button>
{{else}}
<button type="submit" class="btn btn-danger inline-block" data-toggle="modal" data-target="#login-form" onclick="return false">Login</button>
{{/if}}
</form>
</div>
</div>

{{#extend "layout"}}
{{#content "main"}}
<header class="sm-registry-info light-red-bg center hidden-sm hidden-lg hidden-md">
<code class="white no-bg">{{ baseUrl }}</code><br>
</header>

<header class="packages-header container">
<div class="row">
<div class="col-md-5 hidden-xs hidden-sm">
<h2 class="title">Available Packages</h2>
</div>
</nav>
<header class="sm-registry-info light-red-bg center hidden-sm hidden-lg hidden-md">
<code class="white no-bg">{{ baseUrl }}</code><br>
</header>
<header class="packages-header container">
<div class="row">
<div class="col-md-5 hidden-xs hidden-sm">
<h2 class="title">Available Packages</h2>
</div>
<div class="col-md-4 col-md-offset-3 col-sm-12">
<form id='search-form'>
<div class="input-group input-group-lg search-container">
<input type="text" class="form-control" placeholder="Search for packages">
<span class="input-group-btn">
<button class="btn btn-default search-icon js-search-btn"><i class="icon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-md-4 col-md-offset-3 col-sm-12">
<form id='search-form'>
<div class="input-group input-group-lg search-container">
<input type="text" class="form-control" placeholder="Search for packages">
<span class="input-group-btn">
<button class="btn btn-default search-icon js-search-btn"><i class="icon-search"></i></button>
</span>
</div>
</form>
</div>
</header>
</div>
</header>
</header>

<section class="content container packages-container" id="all-packages">
{{#each packages}}
{{> entry}}
{{/each}}

{{#unless packages.length}}
<div class='no-results'>
<big>No Packages</big><br>
Use <code>npm publish</code>
</div>
{{/unless}}
{{#each packages}}
{{> entry}}
{{/each}}

{{#unless packages.length}}
<div class='no-results'>
<big>No Packages</big><br>
Use <code>npm publish</code>
</div>
{{/unless}}
</section>

<section class="content container pkg-search-container" id="search-results"></section>
{{/content}}
{{/extend}}

<div class="modal fade" id="login-form" tabindex="-1" role="dialog" aria-labelledby="login-form-label" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h5 class="modal-title" id="login-form-label">Welcome back</h5>
</div>
<form role="form" action="{{ baseUrl }}/-/login" method="post" id="login-form" autocomplete="off">
<div class="modal-body">
<div class="form-group">
<label for="user" class="sr-only">Email</label>
<input name="user" id="user" class="form-control" placeholder="Username" type="text">
</div>
<div class="form-group">
<label for="pass" class="sr-only">Password</label>
<input name="pass" id="pass" class="form-control" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</form>
</div>
</div>
</div>

<form action="{{ baseUrl }}/-/logout" method="post" class="hide" id="userLogoutForm"></form>

<script src="{{ baseUrl }}/-/static/jquery.min.js"></script>
<script type='text/javascript' src='{{ baseUrl }}/-/static/main.js'></script>
</body>
</html>
161 changes: 161 additions & 0 deletions lib/GUI/js/bootstrap-dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
/* ========================================================================
* Bootstrap: dropdown.js v3.3.0
* http://getbootstrap.com/javascript/#dropdowns
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */


+function ($) {
'use strict';

// DROPDOWN CLASS DEFINITION
// =========================

var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}

Dropdown.VERSION = '3.3.0'

Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}

var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

if (e.isDefaultPrevented()) return

$this
.trigger('focus')
.attr('aria-expanded', 'true')

$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
}

return false
}

Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which)) return

var $this = $(this)

e.preventDefault()
e.stopPropagation()

if ($this.is('.disabled, :disabled')) return

var $parent = getParent($this)
var isActive = $parent.hasClass('open')

if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}

var desc = ' li:not(.divider):visible a'
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)

if (!$items.length) return

var index = $items.index(e.target)

if (e.which == 38 && index > 0) index-- // up
if (e.which == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0

$items.eq(index).trigger('focus')
}

function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
var $this = $(this)
var $parent = getParent($this)
var relatedTarget = { relatedTarget: this }

if (!$parent.hasClass('open')) return

$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

if (e.isDefaultPrevented()) return

$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
})
}

function getParent($this) {
var selector = $this.attr('data-target')

if (!selector) {
selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}

var $parent = selector && $(selector)

return $parent && $parent.length ? $parent : $this.parent()
}


// DROPDOWN PLUGIN DEFINITION
// ==========================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.dropdown')

if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}

var old = $.fn.dropdown

$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown


// DROPDOWN NO CONFLICT
// ====================

$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}


// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================

$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)

}(jQuery);
1 change: 1 addition & 0 deletions lib/GUI/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// twitter bootstrap stuff;
// not in static 'cause I want it to be bundled with the rest of javascripts
require('./bootstrap-modal')
require('./bootstrap-dropdown')

// our own files
require('./search')
Expand Down
Loading

0 comments on commit 7ea6879

Please sign in to comment.