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

Merge branch 'master' of github.com:jlukic/Semantic-UI into popup 

Conflicts:
	server/documents/modules/dropdown.html.eco
pull/2229/head
jlukic 11 years ago
parent
e05b82bcec b10e1c2d69
commit
d7bfce264a
9 changed files with 136 additions and 127 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/introduction/variations.html.eco
  2. 48
      server/documents/modules/accordion.html.eco
  3. 53
      server/documents/modules/dropdown.html.eco
  4. 103
      server/documents/modules/popup.html.eco
  5. 7
      server/documents/project/development.html.eco
  6. 2
      server/partials/header.html.eco
  7. 16
      src/modules/dropdown.js
  8. 9
      src/modules/modal.js
  9. 21
      src/modules/transition.less

4
server/documents/introduction/variations.html.eco
View File

@ -13,7 +13,7 @@ type : 'UI Introduction'
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Overview</a>
<a class="active item">Usage</a>
<a class="item">Usage</a>
</div>
</div>
@ -129,4 +129,4 @@ type : 'UI Introduction'
</a>
<!--
</div>
</div>

48
server/documents/modules/accordion.html.eco
View File

@ -18,7 +18,6 @@ type : 'UI Module'
<div class="ui vertical pointing secondary menu">
<a class="active item">Types</a>
<a class="item">Variations</a>
<a class="item">Behaviors</a>
</div>
</div>
@ -111,28 +110,6 @@ type : 'UI Module'
</div>
</div>
<h2 class="ui dividing header">Behaviors</h2>
<p>Behaviors are accessible with javascript using the syntax:<p>
<div class="code">
$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
</div>
<table class="ui definition celled table segment">
<tr>
<td>open (index)</td>
<td>Opens accordion content at index</td>
</tr>
<tr>
<td>close (index)</td>
<td>Closes accordion content at index</td>
</tr>
<tr>
<td>toggle (index)</td>
<td>Toggles accordion content at index</td>
</tr>
</table>
</div>
<div class="ui tab" data-tab="examples">
@ -249,13 +226,36 @@ type : 'UI Module'
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Usage</h2>
<h2 class="ui dividing header">Initializing</h2>
<h3 class="ui header">Initializing an accordion</h3>
<div class="test code">
$('.ui.accordion')
.accordion()
;
</div>
<h2 class="ui dividing header">Behaviors</h2>
<p>Behaviors are accessible with javascript using the syntax:<p>
<div class="code">
$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
</div>
<table class="ui definition celled table segment">
<tr>
<td>open (index)</td>
<td>Opens accordion content at index</td>
</tr>
<tr>
<td>close (index)</td>
<td>Closes accordion content at index</td>
</tr>
<tr>
<td>toggle (index)</td>
<td>Toggles accordion content at index</td>
</tr>
</table>
</div>
<div class="ui tab" data-tab="settings">

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

@ -20,7 +20,6 @@ type : 'UI Module'
<a class="active item">Types</a>
<a class="item">Variations</a>
<a class="item">States</a>
<a class="item">Behavior</a>
</div>
</div>
@ -220,6 +219,28 @@ type : 'UI Module'
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Initializing</h2>
<h3 class="ui header">Initializing a dropdown</h3>
<div class="code" data-label="HTML" data-type="html">
<div class="ui dropdown">
<div class="text">Select</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="option1">Option 1</div>
<div class="item" data-value="option2">Option 2</div>
</div>
</div>
</div>
<div class="code" data-label="Javascript" data-type="javascript">
$('.ui.dropdown')
.dropdown()
;
</div>
<h2 class="ui dividing header">Behavior</h2>
<div class="no example">
@ -249,28 +270,6 @@ type : 'UI Module'
;
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Initializing a dropdown</h3>
<div class="code" data-label="HTML" data-type="html">
<div class="ui dropdown">
<div class="text">Select</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="option1">Option 1</div>
<div class="item" data-value="option2">Option 2</div>
</div>
</div>
</div>
<div class="code" data-label="Javascript" data-type="javascript">
$('.ui.dropdown')
.dropdown()
;
</div>
</div>
<div class="ui tab" data-tab="examples">
@ -295,7 +294,7 @@ type : 'UI Module'
<div class="dropdown example">
<h3 class="ui header">Button Group</h3>
<p>A <a href="/element/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
<p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
<div class="ui red icon buttons">
<div class="ui top left pointing dropdown button">
<i class="user icon"></i>
@ -327,7 +326,7 @@ type : 'UI Module'
<div class="button example">
<h3 class="ui header">Combo Button</h3>
<p>A <a href="/element/button.html">button</a> can be formatted with a dropdown</p>
<p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown</p>
<div class="ui teal buttons">
<div class="ui button">Update Post</div>
<div class="ui teal dropdown icon button">
@ -374,7 +373,7 @@ type : 'UI Module'
<div class="hover example">
<h3 class="ui header">Menu</h3>
<p>A <a href="/collection/menu.html">menu</a> element can contain a dropdown</p>
<p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
<div class="ui compact tiered purple inverted menu">
<div class="menu">
<a class="active item">
@ -408,7 +407,7 @@ type : 'UI Module'
<div class="dropdown example">
<h3 class="ui header">Form</h3>
<p>A dropdown can be formatted to allow selection inside a <a href="/collection/form.html">form</a></p>
<p>A dropdown can be formatted to allow selection inside a <a href="/collections/form.html">form</a></p>
<div class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">

103
server/documents/modules/popup.html.eco
View File

@ -18,7 +18,6 @@ type : 'UI Module'
<div class="ui vertical pointing secondary menu">
<a class="active item">Types</a>
<a class="item">Variations</a>
<a class="item">Behaviors</a>
</div>
</div>
@ -58,53 +57,11 @@ type : 'UI Module'
<p>A popup can have its colors inverted</p>
<i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
<h2 class="ui dividing header">Behavior</h2>
All the following behaviors can be called using the syntax <code>$('.foo').sidebar('behavior name', argumentOne, argumentTwo)</code>
<table class="ui definition celled table segment">
<tr>
<td>show</td>
<td>Shows popup</td>
</tr>
<tr>
<td>hide</td>
<td>Hides popup</td>
</tr>
<tr>
<td>hide all</td>
<td>Hides all visible pop ups on the page</td>
</tr>
<tr>
<td>toggle</td>
<td>Toggles visibility of popup</td>
</tr>
<tr>
<td>is visible</td>
<td>Returns whether popup is visible</td>
</tr>
<tr>
<td>is hidden</td>
<td>Returns whether popup is hidden</td>
</tr>
<tr>
<td>exists</td>
<td>Returns whether popup is created and inserted into the page</td>
</tr>
<tr>
<td>set position(position)</td>
<td>Repositions a popup</td>
</tr>
<tr>
<td>remove</td>
<td>Removes popup from the page</td>
</tr>
</table>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Usage</h2>
<h2 class="ui dividing header">Initializing</h2>
<h3 class="ui header">Initializing an popup</h3>
<div class="code">
@ -142,14 +99,56 @@ type : 'UI Module'
</div>
<div class="ui horizontal divider">Or</div>
<h4 class="ui header">Initializing with javascript content</h4>
<div class="code">
$('.ui.popup')
.popup({
content: 'Hello I am a popup'
})
;
</div>
<div class="code">
$('.ui.popup')
.popup({
content: 'Hello I am a popup'
})
;
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
All the following behaviors can be called using the syntax <code>$('.foo').popup('behavior name', argumentOne, argumentTwo)</code>
<table class="ui definition celled table segment">
<tr>
<td>show</td>
<td>Shows popup</td>
</tr>
<tr>
<td>hide</td>
<td>Hides popup</td>
</tr>
<tr>
<td>hide all</td>
<td>Hides all visible pop ups on the page</td>
</tr>
<tr>
<td>toggle</td>
<td>Toggles visibility of popup</td>
</tr>
<tr>
<td>is visible</td>
<td>Returns whether popup is visible</td>
</tr>
<tr>
<td>is hidden</td>
<td>Returns whether popup is hidden</td>
</tr>
<tr>
<td>exists</td>
<td>Returns whether popup is created and inserted into the page</td>
</tr>
<tr>
<td>set position(position)</td>
<td>Repositions a popup</td>
</tr>
<tr>
<td>remove</td>
<td>Removes popup from the page</td>
</tr>
</table>
</div>
@ -468,7 +467,7 @@ type : 'UI Module'
<tbody>
<tr>
<td>name</td>
<td>Sidebar</td>
<td>Popup</td>
<td>Name used in debug logs</td>
</tr>
<tr>

7
server/documents/project/development.html.eco
View File

@ -56,10 +56,7 @@ type : 'Semantic Project'
<h3 class="ui header">4) Start Your Server</h3>
<p>It's important to note that all server code exists inside of <code>/node</code> in the project. So all commands should be run relative to that directory.</p>
<div class="code" data-title="Starting server locally" data-type="terminal">
cd node
docpad run
</div>
@ -71,7 +68,7 @@ type : 'Semantic Project'
<p>If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in <code>/src/{type}/{elementname}/</code> while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.</p>
<p>To see exactly what this is doing you can check out our <a href="https://github.com/jlukic/Semantic-UI/blob/master/node/Gruntfile.js">commented gruntfile</a></p>
<p>To see exactly what this is doing you can check out our <a href="https://github.com/jlukic/Semantic-UI/blob/master/Gruntfile.js">commented gruntfile</a></p>
<div class="code" data-title="Watching Changes" data-type="terminal">
grunt
@ -106,4 +103,4 @@ type : 'Semantic Project'
Next: Library Introduction
<i class="right arrow icon"></i>
</a>
</div>
</div>

2
server/partials/header.html.eco
View File

@ -1,4 +1,4 @@
<% @tabs = { definition: 'Definition', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'module' %>
<% @tabs = { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
<div class="<% if @tabs?: %>tab <% end %>segment">
<div class="container">

16
src/modules/dropdown.js
View File

@ -380,16 +380,22 @@ $.fn.dropdown = function(parameters) {
selection: function() {
return $module.hasClass(className.selection);
},
animated: function($subMenu) {
return ($subMenu)
? $subMenu.is(':animated') || $subMenu.transition('is animating')
: $menu.is(':animated') || $menu.transition('is animating')
;
},
visible: function($subMenu) {
return ($subMenu)
? $subMenu.is(':animated, :visible')
: $menu.is(':animated, :visible')
? $subMenu.is(':visible')
: $menu.is(':visible')
;
},
hidden: function($subMenu) {
return ($subMenu)
? $subMenu.is(':not(:animated, :visible)')
: $menu.is(':not(:animated, :visible)')
? $subMenu.is(':not(:visible)')
: $menu.is(':not(:visible)')
;
}
},
@ -524,7 +530,7 @@ $.fn.dropdown = function(parameters) {
},
hide: function() {
if( module.is.visible() ) {
if( !module.is.animated() && module.is.visible() ) {
module.debug('Hiding dropdown');
if( module.can.click() ) {
module.unbind.intent();

9
src/modules/modal.js
View File

@ -164,8 +164,13 @@ $.fn.modal = function(parameters) {
escapeKey = 27
;
if(keyCode == escapeKey) {
module.debug('Escape key pressed hiding modal');
module.hide();
if(settings.closable) {
module.debug('Escape key pressed hiding modal');
module.hide();
}
else {
module.debug('Escape key pressed, but closable is set to false');
}
event.preventDefault();
}
},

21
src/modules/transition.less
View File

@ -14,11 +14,6 @@
.ui.transition {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
@ -40,6 +35,18 @@
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
/*******************************
States
*******************************/
.ui.animating.transition {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
@ -48,10 +55,6 @@
transform: translateZ(0);
}
/*******************************
States
*******************************/
/* Loading */
.ui.loading.transition {
position: absolute;

Write Preview
Loading…
Cancel
Save