Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added split button (needs docs/examples)
  • Loading branch information
tj committed Feb 5, 2012
1 parent 68ca0b0 commit ff0d53a
Show file tree
Hide file tree
Showing 11 changed files with 302 additions and 9 deletions.
1 change: 1 addition & 0 deletions Makefile
Expand Up @@ -5,6 +5,7 @@ COMPONENTS = emitter \
confirmation \
color-picker \
notification \
split-button \
menu \
card

Expand Down
27 changes: 26 additions & 1 deletion build/ui.css
Expand Up @@ -220,8 +220,33 @@
.notification.scale.hide {
-webkit-transform: scale(0);
-moz-transform: scale(0);
}.split-button {
display: inline-block;
border: 1px solid #eee;
}

.split-button a {
display: inline-block;
float: left;
height: 20px;
line-height: 20px;
padding: 5px 10px;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
}

.split-button .toggle {
border-left: 1px solid #eee;
}

.split-button .toggle span {
display: block;
margin-top: 8px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #888;
}.menu {
display: none;
position: absolute;
top: 0;
left: 0;
Expand Down
114 changes: 111 additions & 3 deletions build/ui.js
Expand Up @@ -584,8 +584,7 @@ function rgba(r,g,b,a) {
function ColorPicker() {
ui.Emitter.call(this);
this._colorPos = {};
this.template = html;
this.el = $(this.template);
this.el = $(html);
this.main = this.el.find('.main').get(0);
this.spectrum = this.el.find('.spectrum').get(0);
$(this.main).bind('selectstart', function(e){ e.preventDefault() });
Expand Down Expand Up @@ -1118,6 +1117,115 @@ Notification.prototype.remove = function(){
})(ui, "<li class=\"notification hide\">\n <div class=\"content\">\n <h1>Title</h1>\n <a href=\"#\" class=\"close\">×</a>\n <p>Message</p>\n </div>\n</li>");
;(function(exports, html){

/**
* Expose `SplitButton`.
*/

exports.SplitButton = SplitButton;

/**
* Initialize a new `SplitButton`
* with an optional `label`.
*
* @param {String} label
* @api public
*/

function SplitButton(label) {
ui.Emitter.call(this);
this.el = $(html);
this.events();
this.render({ label: label });
this.state = 'hidden';
}

/**
* Inherit from `Emitter.prototype`.
*/

SplitButton.prototype = new ui.Emitter;

/**
* Register event handlers.
*
* @api private
*/

SplitButton.prototype.events = function(){
var self = this
, el = this.el;

el.find('.button').click(function(e){
e.preventDefault();
self.emit('click', e);
});

el.find('.toggle').click(function(e){
e.preventDefault();
self.toggle();
});
};

/**
* Toggle the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.toggle = function(){
return 'hidden' == this.state
? this.show()
: this.hide();
};

/**
* Show the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.show = function(){
this.state = 'visible';
this.emit('show');
return this;
};

/**
* Hide the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.hide = function(){
this.state = 'hidden';
this.emit('hide');
return this;
};

/**
* Render the split-button with the given `options`.
*
* @param {Object} options
* @return {SplitButton}
* @api private
*/

SplitButton.prototype.render = function(options){
var options = options || {}
, button = this.el.find('.button')
, label = options.label;

if ('string' == label) button.text(label);
else button.text('').append(label);
return this;
};

})(ui, "<div class=\"split-button\">\n <a class=\"button\" href=\"#\">Action</a>\n <a class=\"toggle\" href=\"#\"><span></span></a>\n</div>");
;(function(exports, html){

/**
* Expose `Menu`.
*/
Expand Down Expand Up @@ -1152,7 +1260,7 @@ function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
this.el = $(html).appendTo('body');
this.el = $(html).hide().appendTo('body');
$('html').click(function(){ self.hide(); });
};

Expand Down
3 changes: 2 additions & 1 deletion docs/index.html
Expand Up @@ -210,6 +210,7 @@
}, 200);
}, 200);
});

});
</script>
</head>
Expand All @@ -220,7 +221,7 @@ <h1>UI<strong>kit</strong></h1>
<span>Modern UI components for the modern web</span>
</div>

<p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
<p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it's easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.</p>

<section>
<h2 id="emitter-section"><a href="#">Emitter</a></h2>
Expand Down
23 changes: 23 additions & 0 deletions docs/style.css
Expand Up @@ -85,6 +85,29 @@ body {
-webkit-box-shadow: 0 1px 4px 0 #ddd;
-moz-box-shadow: 0 1px 4px 0 #ddd;
}
.split-button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin: 5px;
font-size: 12px;
}
.split-button a {
background: -webkit-linear-gradient(top, #fff 20%, #eee);
background: -moz-linear-gradient(top, #fff 20%, #eee);
}
.split-button a:hover {
background: -webkit-linear-gradient(top, #fff 40%, #efefef);
background: -moz-linear-gradient(top, #fff 40%, #efefef);
text-decoration: none;
}
.split-button a:active {
background: -webkit-linear-gradient(bottom, #fff 40%, #efefef);
background: -moz-linear-gradient(bottom, #fff 40%, #efefef);
text-decoration: none;
}
.split-button a {
box-shadow: inset 1px 0 rgba(255,255,255,.75), 0 1px #ddd;
}
#wrapper > section {
margin: 30px 0;
width: 350px;
Expand Down
3 changes: 1 addition & 2 deletions lib/components/color-picker/color-picker.js
Expand Up @@ -34,8 +34,7 @@ function rgba(r,g,b,a) {
function ColorPicker() {
ui.Emitter.call(this);
this._colorPos = {};
this.template = html;
this.el = $(this.template);
this.el = $(html);
this.main = this.el.find('.main').get(0);
this.spectrum = this.el.find('.spectrum').get(0);
$(this.main).bind('selectstart', function(e){ e.preventDefault() });
Expand Down
1 change: 0 additions & 1 deletion lib/components/menu/menu.css
@@ -1,5 +1,4 @@
.menu {
display: none;
position: absolute;
top: 0;
left: 0;
Expand Down
2 changes: 1 addition & 1 deletion lib/components/menu/menu.js
Expand Up @@ -33,7 +33,7 @@ function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
this.el = $(html).appendTo('body');
this.el = $(html).hide().appendTo('body');
$('html').click(function(){ self.hide(); });
};

Expand Down
27 changes: 27 additions & 0 deletions lib/components/split-button/split-button.css
@@ -0,0 +1,27 @@
.split-button {
display: inline-block;
border: 1px solid #eee;
}

.split-button a {
display: inline-block;
float: left;
height: 20px;
line-height: 20px;
padding: 5px 10px;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
}

.split-button .toggle {
border-left: 1px solid #eee;
}

.split-button .toggle span {
display: block;
margin-top: 8px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #888;
}
4 changes: 4 additions & 0 deletions lib/components/split-button/split-button.html
@@ -0,0 +1,4 @@
<div class="split-button">
<a class="button" href="#">Action</a>
<a class="toggle" href="#"><span></span></a>
</div>
106 changes: 106 additions & 0 deletions lib/components/split-button/split-button.js
@@ -0,0 +1,106 @@

/**
* Expose `SplitButton`.
*/

exports.SplitButton = SplitButton;

/**
* Initialize a new `SplitButton`
* with an optional `label`.
*
* @param {String} label
* @api public
*/

function SplitButton(label) {
ui.Emitter.call(this);
this.el = $(html);
this.events();
this.render({ label: label });
this.state = 'hidden';
}

/**
* Inherit from `Emitter.prototype`.
*/

SplitButton.prototype = new ui.Emitter;

/**
* Register event handlers.
*
* @api private
*/

SplitButton.prototype.events = function(){
var self = this
, el = this.el;

el.find('.button').click(function(e){
e.preventDefault();
self.emit('click', e);
});

el.find('.toggle').click(function(e){
e.preventDefault();
self.toggle();
});
};

/**
* Toggle the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.toggle = function(){
return 'hidden' == this.state
? this.show()
: this.hide();
};

/**
* Show the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.show = function(){
this.state = 'visible';
this.emit('show');
return this;
};

/**
* Hide the drop-down contents.
*
* @return {SplitButton}
* @api public
*/

SplitButton.prototype.hide = function(){
this.state = 'hidden';
this.emit('hide');
return this;
};

/**
* Render the split-button with the given `options`.
*
* @param {Object} options
* @return {SplitButton}
* @api private
*/

SplitButton.prototype.render = function(options){
var options = options || {}
, button = this.el.find('.button')
, label = options.label;

if ('string' == label) button.text(label);
else button.text('').append(label);
return this;
};

0 comments on commit ff0d53a

Please sign in to comment.