richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Finished <select> generation for searchable dropdowns, bug fixes, docs changes

pull/1129/head
jlukic 10 years ago
parent
8a54c1ebb9
commit
f2d7d0c244
7 changed files with 194 additions and 93 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/elements/button.html.eco
  2. 136
      server/documents/modules/dropdown.html.eco
  3. 2
      server/files/javascript/dropdown.js
  4. 3
      server/files/stylesheets/semantic.css
  5. 18
      src/definitions/elements/button.less
  6. 104
      src/definitions/modules/dropdown.js
  7. 20
      src/definitions/modules/dropdown.less

4
server/documents/elements/button.html.eco
View File

@ -267,7 +267,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<div class="spaced example">
<h4 class="ui header">Sizes</h4>
<p>A button can have different sizes:</p>
<p>A button can have different sizes</p>
<div class="mini ui button">
Mini
</div>
@ -296,7 +296,7 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<div class="spaced example">
<h4 class="ui header">Colors</h4>
<p>A button can have different colors:</p>
<p>A button can have different colors</p>
<div class="ui black button">Black</div>
<div class="ui yellow button">Yellow</div>
<div class="ui green button">Green</div>

136
server/documents/modules/dropdown.html.eco
View File

@ -58,64 +58,26 @@ themes : ['Default']
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="2">Unknown</div>
</div>
</div>
</div>
<div class="another dropdown example">
<div class="ui ignored info message">
<div class="header">Converting Select Elements</div>
<p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p>
</div>
<select class="ui dropdown">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="">Gender</option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
<div class="existing code">
<select class="ui dropdown">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Search Selection</h4>
@ -179,6 +141,76 @@ themes : ['Default']
</div>
</div>
</div>
<div class="another dropdown example">
<select class="ui search dropdown">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<div class="existing code">
<select class="ui search dropdown">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!-- Omitted for brevity !-->
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="dropdown example">

2
server/files/javascript/dropdown.js
View File

@ -8,7 +8,7 @@ semantic.dropdown.ready = function() {
$examples = $('.example'),
$hoverDropdown = $examples.filter('.hover').find('.ui.dropdown'),
$buttonDropdown = $examples.filter('.button.example').find('.ui.dropdown'),
$dropdown = $examples.filter('.dropdown').find('.ui.dropdown:not(.simple)'),
$dropdown = $examples.filter('.dropdown').find('> .ui.dropdown:not(.simple)'),
$transition = $examples.filter('.transition').find('.ui.dropdown'),
$transitionButton = $examples.filter('.transition').find('.ui.button').first(),
// alias

3
server/files/stylesheets/semantic.css
View File

@ -173,6 +173,9 @@ a:hover {
#example .code .active.ui.modal {
display: none !important;
}
#example .existing.code {
display: none;
}
#example #menu .item .item {
font-size: 0.875rem;

18
src/definitions/elements/button.less
View File

@ -1100,7 +1100,7 @@
.ui.basic.black.buttons .button:hover,
.ui.basic.black.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
color: @blackHover;
color: @blackHover !important;
}
.ui.basic.black.buttons .button:active,
.ui.basic.black.button:active {
@ -1179,7 +1179,7 @@
.ui.basic.blue.buttons .button:hover,
.ui.basic.blue.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
color: @blueHover;
color: @blueHover !important;
}
.ui.basic.blue.buttons .button:active,
.ui.basic.blue.button:active {
@ -1256,7 +1256,7 @@
.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
color: @greenHover;
color: @greenHover !important;
}
.ui.basic.green.buttons .button:active,
.ui.basic.green.button:active {
@ -1332,7 +1332,7 @@
.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
color: @orangeHover;
color: @orangeHover !important;
}
.ui.basic.orange.buttons .button:active,
.ui.basic.orange.button:active {
@ -1408,7 +1408,7 @@
.ui.basic.pink.buttons .button:hover,
.ui.basic.pink.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
color: @pinkHover;
color: @pinkHover !important;
}
.ui.basic.pink.buttons .button:active,
.ui.basic.pink.button:active {
@ -1484,7 +1484,7 @@
.ui.basic.purple.buttons .button:hover,
.ui.basic.purple.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
color: @purpleHover;
color: @purpleHover !important;
}
.ui.basic.purple.buttons .button:active,
.ui.basic.purple.button:active {
@ -1560,7 +1560,7 @@
.ui.basic.red.buttons .button:hover,
.ui.basic.red.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
color: @redHover;
color: @redHover !important;
}
.ui.basic.red.buttons .button:active,
.ui.basic.red.button:active {
@ -1637,7 +1637,7 @@
.ui.basic.teal.buttons .button:hover,
.ui.basic.teal.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
color: @tealHover;
color: @tealHover !important;
}
.ui.basic.teal.buttons .button:active,
.ui.basic.teal.button:active {
@ -1714,7 +1714,7 @@
.ui.basic.yellow.buttons .button:hover,
.ui.basic.yellow.button:hover {
box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
color: @yellowHover;
color: @yellowHover !important;
}
.ui.basic.yellow.buttons .button:active,
.ui.basic.yellow.button:active {

104
src/definitions/modules/dropdown.js
View File

@ -67,6 +67,7 @@ $.fn.dropdown = function(parameters) {
initialize: function() {
module.debug('Initializing dropdown', settings);
module.setup.layout();
module.save.defaults();
module.set.selected();
@ -74,7 +75,6 @@ $.fn.dropdown = function(parameters) {
if(hasTouch) {
module.bind.touchEvents();
}
module.setup.layout();
module.bind.mouseEvents();
module.bind.keyboardEvents();
@ -103,18 +103,8 @@ $.fn.dropdown = function(parameters) {
setup: {
layout: function() {
var
html
;
if( $module.is('select') ) {
module.debug('Dropdown initialized on a select, generating html');
$module
.hide()
;
$('<div />')
.addClass( $module.attr('class') )
;
$menu = $(settings.templates.select( module.get.selectValues() ));
module.setup.select();
}
if( module.is.search() && !module.is.searchable() ) {
$search = $('<input />')
@ -128,6 +118,9 @@ $.fn.dropdown = function(parameters) {
.val('')
.attr('tabindex', 0)
;
$menu
.attr('tabindex', -1)
;
}
else {
module.debug('Simple selection dropdown initialized');
@ -135,11 +128,38 @@ $.fn.dropdown = function(parameters) {
$module
.attr('tabindex', 0)
;
$menu
.attr('tabindex', -1)
;
}
}
},
select: function() {
module.debug('Dropdown initialized on a select, generating html');
// redefine module as wrapped element
$input = $module;
$module = $('<div />')
.attr('class', $input.attr('class') )
.addClass(className.selection)
.html( settings.templates.select(module.get.selectValues()))
.insertBefore($input)
;
$input
.removeAttr('class')
.prependTo($module)
;
module.refresh();
}
},
refresh: function() {
$item = $module.find(selector.item);
$text = $module.find(selector.text);
$search = $module.find(selector.search);
$input = $module.find(selector.input);
$menu = $module.children(selector.menu);
},
bind: {
keyboardEvents: function() {
module.debug('Binding keyboard events');
@ -321,9 +341,15 @@ $.fn.dropdown = function(parameters) {
$nextItem,
newIndex
;
// default to activated choice if no selection present
if(!hasSelectedItem) {
$selectedItem = $item.filter('.' + className.active).eq(0);
hasSelectedItem = ($selectedItem.size() > 0);
}
// close shortcuts
if(pressedKey == keys.escape) {
module.verbose('Escape key pressed, closing dropdown');
$search.blur();
module.hide();
}
// result shortcuts
@ -385,12 +411,12 @@ $.fn.dropdown = function(parameters) {
},
test: {
toggle: function(event) {
if( module.determine.inMenu(event, module.toggle) ) {
if( module.determine.eventInMenu(event, module.toggle) ) {
event.preventDefault();
}
},
touch: function(event) {
module.determine.inMenu(event, function() {
module.determine.eventInMenu(event, function() {
if(event.type == 'touchstart') {
module.timer = setTimeout(module.hide, settings.delay.touch);
}
@ -401,7 +427,7 @@ $.fn.dropdown = function(parameters) {
event.stopPropagation();
},
hide: function(event) {
module.determine.inModule(event, module.hide);
module.determine.eventInModule(event, module.hide);
}
},
@ -487,7 +513,7 @@ $.fn.dropdown = function(parameters) {
module.error(error.action, settings.action);
}
},
inModule: function(event, callback) {
eventInModule: function(event, callback) {
callback = callback || function(){};
if( $(event.target).closest($module).size() === 0 ) {
module.verbose('Triggering event', callback);
@ -499,7 +525,7 @@ $.fn.dropdown = function(parameters) {
return false;
}
},
inMenu: function(event, callback) {
eventInMenu: function(event, callback) {
callback = callback || function(){};
if( $(event.target).closest($menu).size() === 0 ) {
module.verbose('Triggering event', callback);
@ -611,20 +637,29 @@ $.fn.dropdown = function(parameters) {
},
selectValues: function() {
var
options = {}
select = {
values : {}
}
;
$module
.find('option')
.each(function() {
var
name = $(this).html(),
value = $(this).attr('value') || name
value = ( $(this).attr('value') !== undefined )
? $(this).attr('value')
: name
;
options[value] = name;
if(value === '') {
select.placeholder = name;
}
else {
select.values[value] = name;
}
})
;
module.debug('Retrieved values from select', options);
return options;
module.debug('Retrieved values from select', select);
return select;
},
item: function(value, strict) {
var
@ -725,6 +760,7 @@ $.fn.dropdown = function(parameters) {
hasActive = ($item && $item.size() > 0),
edgeTolerance = 5,
offset,
itemHeight,
itemOffset,
menuOffset,
menuScroll,
@ -734,6 +770,7 @@ $.fn.dropdown = function(parameters) {
;
if($item && hasActive) {
menuHeight = $menu.height();
itemHeight = $item.height();
menuScroll = $menu.scrollTop();
menuOffset = $menu.offset().top;
itemOffset = $item.offset().top;
@ -785,7 +822,9 @@ $.fn.dropdown = function(parameters) {
}
},
active: function() {
$module.addClass(className.active);
$module
.addClass(className.active)
;
},
visible: function() {
$module.addClass(className.visible);
@ -802,10 +841,13 @@ $.fn.dropdown = function(parameters) {
: $selectedItem.text()
;
$item
.removeClass(className.filtered)
.removeClass(className.active)
.removeClass(className.selected)
;
$selectedItem
.addClass(className.active)
.addClass(className.selected)
;
module.set.text(selectedText);
}
@ -934,7 +976,6 @@ $.fn.dropdown = function(parameters) {
duration : settings.duration,
queue : true,
complete : function() {
$item.removeClass(className.filtered);
$.proxy(callback, element)();
}
})
@ -1277,12 +1318,21 @@ $.fn.dropdown.settings = {
};
$.fn.dropdown.settings.templates = {
select: function(values) {
select: function(select) {
var
html = ''
placeholder = select.placeholder || false,
values = select.values || {},
html = ''
;
html += '<i class="dropdown icon"></i>';
if(select.placeholder) {
html += '<div class="default text">' + placeholder + '</div>';
}
else {
html += '<div class="text"></div>';
}
html += '<div class="menu">';
$.each(values, function(value, name) {
$.each(select.values, function(value, name) {
html += '<div class="item" data-value="' + value + '">' + name + '</div>';
});
html += '</div>';

20
src/definitions/modules/dropdown.less
View File

@ -192,7 +192,6 @@
---------------*/
/* Displays like a select box */
.ui.selection.dropdown {
cursor: pointer;
word-wrap: break-word;
@ -216,23 +215,39 @@
z-index: @selectionZIndex;
}
select.ui.dropdown {
height: 38px;
padding: 0em;
margin: 0em;
visibility: hidden;
}
.ui.selection.dropdown > input[type="hidden"],
.ui.selection.dropdown > select {
display: none;
display: none !important;
}
.ui.selection.dropdown > .text {
margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
position: absolute;
top: auto;
margin: 0em;
width: auto;
right: @selectionHorizontalPadding;
opacity: @selectionIconOpacity;
transition: @selectionIconTransition;
}
/* Remove Selection */
.ui.selection.dropdown > .delete.icon {
opacity: 0.6;
}
.ui.selection.dropdown > .delete.icon:hover {
opacity: 1;
}
/* Search Selection Input */
.ui.selection > input.search {
cursor: pointer;
@ -267,6 +282,7 @@
width: auto;
margin: 0px -1px;
min-width: ~"calc(100% + 2px)";
outline: none;
}
.ui.selection.dropdown .menu:after,
.ui.selection.dropdown .menu:before {

Write Preview
Loading…
Cancel
Save