Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Jul 11, 2017
1 parent 673a0a5 commit 76bf8d3
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 98 deletions.
111 changes: 82 additions & 29 deletions server/documents/behaviors/form.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1403,10 +1403,86 @@ type : 'UI Behavior'

<h2 class="ui dividing header">Form Examples</h2>

<div class="dropdown example">
<h4 class="ui header">Regular Expressions</h4>

<div class="add example">
<h4 class="ui header">
Adding Rules Programmatically <div class="ui teal label">New in 2.2.11</div>
</h4>
<p>You can use the special behaviors <code>add field/rule</code>, <code>remove rule</code> and <code>remove field</code> to dynamically add or remove fields or rules. </p>
<div class="ui ignored info message">
<div class="ui header">Adding Multiple Rules and Complex Rules</div>
You can specify shorthand or full rule objects when adding rules. You can also specifiy fields as an array to modify multiple fields.</code>.
</div>
<div class="code">
// lets only validate username to start
$('.add.example .ui.form')
.form({
username: ['empty', 'minLength[5]']
})
;
</div>
<div class="evaluated code">
// lets toggle some validation based on button
$('.add.example .ui.positive.button')
.on('click', function() {
$('.add.example .ui.form')
// adding longform
.form('add rule', 'gender', {
rules: [
{
type : 'empty',
prompt : 'Entering your gender is necessary'
}
]
})
// adding shorthand
.form('add rule', 'password', ['empty', 'minLength[5]'])
;
})
;
</div>
<div class="evaluated code">
$('.add.example .ui.negative.button')
.on('click', function() {
$('.add.example .ui.form')
// removing multiple at once
.form('remove fields', ['gender', 'password'])
;
})
;
</div>
<div class="ui positive button">Add Additional Validation</div>
<div class="ui negative button">Remove Additional Validation</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Username</label>
<input type="text" name="username">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="two fields">
<div class="field">
<label>Gender</label>
<div class="ui fluid selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui clear button">Clear</div>
<div class="ui error message"></div>
</form>
</div>

<div class="dropdown example">
<h4 class="ui header">Validating Dropdowns</h4>
<p><a href="/modules/dropdown.html">Dropdowns</a> can also be validated like other form fields. Simply match the validation rule to the <code>input</code> or <code>select</code> associated with the dropdown</p>
Expand All @@ -1417,24 +1493,8 @@ type : 'UI Behavior'
$('.ui.form')
.form({
fields: {
gender: {
identifier : 'gender',
rules: [
{
type : 'empty',
prompt : 'Please enter a gender'
}
]
},
name: {
identifier : 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
}
gender: 'empty',
name: 'empty'
}
})
;
Expand Down Expand Up @@ -1468,14 +1528,7 @@ type : 'UI Behavior'
$('.ui.form')
.form(
fields: {
name: {
identifier : 'name',
rules: [
{
type : 'empty'
}
]
}
name: 'empty'
}
})
;
Expand Down
4 changes: 2 additions & 2 deletions server/documents/elements/icon.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ themes : ['Default']
<div class="column"><i class="shop icon"></i>Shop</div>
<div class="column"><i class="shopping bag icon"></i>Shopping Bag</div>
<div class="column"><i class="shopping basket icon"></i>Shopping Basket</div>
<div class="column"><i class="sidebar icon"></i>Sidebar</div>
<div class="column"><i class="signal icon"></i>Signal</div>
<div class="column"><i class="sitemap icon"></i>Sitemap</div>
<div class="column"><i class="tag icon"></i>Tag</div>
Expand Down Expand Up @@ -194,6 +195,7 @@ themes : ['Default']
<i class="shop icon"></i>
<i class="shopping bag icon"></i>
<i class="shopping basket icon"></i>
<i class="sidebar icon"></i>
<i class="signal icon"></i>
<i class="sitemap icon"></i>
<i class="tag icon"></i>
Expand Down Expand Up @@ -1126,7 +1128,6 @@ themes : ['Default']
<div class="column"><i class="align right icon"></i>Align Right</div>
<div class="column"><i class="attach icon"></i>Attach</div>
<div class="column"><i class="bold icon"></i>Bold</div>
<div class="column"><i class="content icon"></i>Content</div>
<div class="column"><i class="copy icon"></i>Copy</div>
<div class="column"><i class="cut icon"></i>Cut</div>
<div class="column"><i class="font icon"></i>Font</div>
Expand Down Expand Up @@ -1157,7 +1158,6 @@ themes : ['Default']
<i class="align right icon"></i>
<i class="attach icon"></i>
<i class="bold icon"></i>
<i class="content icon"></i>
<i class="copy icon"></i>
<i class="cut icon"></i>
<i class="font icon"></i>
Expand Down
141 changes: 78 additions & 63 deletions server/documents/hotfix.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,76 +6,91 @@ standalone : true
title : 'Test Page'
type : 'Library'
---
<button id='btn1'>
show modal 1
</button>
<button id='btn2'>
show modal 2
</button>
<div class="ui modal" id='modal1'>
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<div class="ui modal" id='modal2'>
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
<div class="ui container">

<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$('#modal1').modal({closable: false})
$('#modal2').modal({inverted: true})
$('#btn1').click(function(){$('#modal1').modal('show')})
$('#btn2').click(function(){$('#modal2').modal('show')})

});
$('.ui.dropdown').dropdown();
$('.ui.checkbox').checkbox();

$('.ui.form')
.form({
fields: {
password : ['minLength[6]', 'empty'],
skills : ['minCount[2]', 'empty'],
terms : 'checked'
}
})
.form('add field', 'username', 'empty')
.form('add fields', {
name : 'empty',
gender : 'empty'
})
.form('remove rule', 'username', 'empty')
.form('remove field', 'terms')
.form('validate field', 'username')
;

});

</script>

<!-- TEST CSS HERE !-->
<style type="text/css">
.container {
margin-top: 2rem !important;
}

.ui.container {
padding-top: 2em;
}

</style>
5 changes: 5 additions & 0 deletions server/documents/modules/sticky.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,6 +527,11 @@ type : 'UI Module'
<td>false</td>
<td>Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up</td>
</tr>
<tr>
<td>setSize</td>
<td>true <div class="ui label">New in 2.2.11</div></td>
<td>Sets size of <code>fixed</code> content to match its width before fixing to screen dynamically. This is used because fixed may display block or 100% width content differently than it appears before sticking.</td>
</tr>
<tr>
<td>jitter</td>
<td>5</td>
Expand Down
10 changes: 6 additions & 4 deletions server/files/javascript/form.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
semantic.validateForm = {};
semantic.form = {};

// ready event
semantic.validateForm.ready = function() {
semantic.form.ready = function() {

// selector cache
var
$codeDropdown = $('.existing.code .dropdown'),
$dropdown = $('.main.container .ui.dropdown').not($codeDropdown),
$addExample = $('.add.example form')
// alias
handler
;
Expand All @@ -20,10 +21,11 @@ semantic.validateForm.ready = function() {
.dropdown()
;


};


// attach ready event
$(document)
.ready(semantic.validateForm.ready)
;
.ready(semantic.form.ready)
;
5 changes: 5 additions & 0 deletions server/files/javascript/validate-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ semantic.validateForm.ready = function() {
$optionalForm = $('.optional.example .ui.form'),
$dependsForm = $('.depends.example .ui.form'),
$inlineForm = $('.inline.example .ui.form'),
$addForm = $('.add.example .ui.form'),
$form = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm).not($promptForm),
$checkbox = $('.main.container .ui.checkbox'),
$dropdown = $('.main.container .ui.dropdown'),
Expand Down Expand Up @@ -333,6 +334,10 @@ semantic.validateForm.ready = function() {
}
})
;

$addForm
.form('remove fields', ['password', 'gender'])
;
};


Expand Down

0 comments on commit 76bf8d3

Please sign in to comment.