Skip to content

Commit 03fe2cf

Browse files
jlukicjlukic
committed
2.1.9 doc updates
1 parent 9f05d0a commit 03fe2cf

7 files changed

Lines changed: 195 additions & 32 deletions

File tree

‎server/documents/behaviors/form.html.eco‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,49 @@ type : 'UI Behavior'
442442
</table>
443443
</div>
444444

445+
<div class="custom rule example">
446+
<h4 class="ui header">Adding Custom Rules</h4>
447+
<p>You can extend form validation to include your own rules. Keep in mind these will need to be executed synchronously.</p>
448+
<div class="ignore code">
449+
// some arbitrary business-logic
450+
window.user = {
451+
name : 'Simon',
452+
adminLevel : 1
453+
};
454+
// custom form validation rule
455+
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
456+
return (window.user.adminLevel >= adminLevel)
457+
};
458+
$('.ui.form')
459+
.form({
460+
fields: {
461+
dog: {
462+
identifier: 'dog',
463+
rules: [
464+
{
465+
type: 'adminLevel[2]',
466+
prompt: 'You must be at least a level-2 admin to add a dog'
467+
}
468+
]
469+
}
470+
}
471+
})
472+
;
473+
</div>
474+
<form class="ui form segment">
475+
<p>Let's go ahead and get you signed up.</p>
476+
<div class="field">
477+
<label>Dog</label>
478+
<input placeholder="Dog" name="dog" type="text">
479+
</div>
480+
<div class="ui blue submit button">
481+
<i class="add icon"></i>
482+
Add Dog
483+
</div>
484+
<div class="ui error message"></div>
485+
</form>
486+
</div>
487+
445488
<div class="inline example">
446489
<h4 class="ui header">Built-in Events</h4>
447490
<p>
@@ -1543,22 +1586,24 @@ type : 'UI Behavior'
15431586
<div class="ignore code">
15441587
$('.ui.form')
15451588
.form({
1546-
dog: {
1547-
identifier: 'dog',
1548-
rules: [
1549-
{
1550-
type: 'empty',
1551-
prompt: 'You must have a dog to add'
1552-
},
1553-
{
1554-
type: 'contains[fluffy]',
1555-
prompt: 'I only want you to add fluffy dogs!'
1556-
},
1557-
{
1558-
type: 'not[mean]',
1559-
prompt: 'Why would you add a mean dog to the list?'
1560-
}
1561-
]
1589+
fields: {
1590+
dog: {
1591+
identifier: 'dog',
1592+
rules: [
1593+
{
1594+
type: 'empty',
1595+
prompt: 'You must have a dog to add'
1596+
},
1597+
{
1598+
type: 'contains[fluffy]',
1599+
prompt: 'I only want you to add fluffy dogs!'
1600+
},
1601+
{
1602+
type: 'not[mean]',
1603+
prompt: 'Why would you add a mean dog to the list?'
1604+
}
1605+
]
1606+
}
15621607
}
15631608
})
15641609
;

‎server/documents/hotfix.html.eco‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,38 @@ standalone : true
66
title : 'Test Page'
77
type : 'Library'
88
---
9+
<div class="ui top attached tabular menu">
10+
<a class="item" data-tab="one">one</a>
11+
<a class="item" data-tab="two">two</a>
12+
<a class="item" data-tab="three">three</a>
13+
</div>
914

10-
<h1 id="hello">Hello</h1>
11-
<div class="ui popup">POPUP</div>
12-
<h1 id="result"></h1>
13-
<div class="ui button">Update</div>
15+
<div class="ui bottom attached tab segment" data-tab="one">One</div>
16+
<div class="ui bottom attached tab segment" data-tab="two">Two</div>
17+
<div class="ui bottom attached tab segment" data-tab="three">Three</div>
1418

19+
<div class="ui segment" id="log"></div>
20+
21+
<div class="ui button">
22+
Change tab
23+
</div>
1524
</body>
1625
<!-- TEST JS HERE !-->
1726
<script>
1827
$(document)
1928
.ready(function(){
20-
$('#hello').popup({
21-
on: 'click'
22-
});
2329

24-
function update() {
25-
var v = $('#hello').popup('is visible');
26-
$('#result').html(v.toString());
27-
}
30+
$tabs = $('.tabular.menu .item');
2831

29-
update();
32+
$tabs.tab({
33+
onFirstLoad: function(tabPath) {
34+
$('#log').append('<p>First load: ' + tabPath + '</p>');
35+
}
36+
});
37+
$('.button').on('click', function() {
3038

31-
$('.button').click(update);
39+
$.tab('change tab', 'one');
40+
});
3241
})
3342
;
3443
</script>

‎server/documents/introduction/advanced-usage.html.eco‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ type : 'Introduction'
1212

1313
<div class="main ui intro container">
1414

15+
1516
<h2 class="ui dividing header">Custom Pipelines</h2>
1617
<div class="no example">
1718
<h4>Importing Gulp Tasks</h4>
@@ -29,6 +30,70 @@ type : 'Introduction'
2930
</div>
3031
</div>
3132

33+
<h2 class="ui dividing header">Semantic.json Settings</h2>
34+
35+
<div class="no example">
36+
<h4>Auto-Install</h4>
37+
<p>Running <code>npm install</code> normally will launch an interactive installer, to allow this installer to run without user interaction include a special flag <code>autoInstall: true</code>in your <code>semantic.json</code> file.</p>
38+
<div class="ignored code" data-type="JS" data-title="semantic.json">
39+
{
40+
// install will now automatically build your project files without user interaction
41+
"autoInstall": true,
42+
43+
// these settings may be different
44+
"base": "",
45+
"paths": {
46+
"source": {
47+
"config": "src/theme.config",
48+
"definitions": "src/definitions/",
49+
"site": "src/site/",
50+
"themes": "src/themes/"
51+
},
52+
"output": {
53+
"packaged": "dist/",
54+
"uncompressed": "dist/components/",
55+
"compressed": "dist/components/",
56+
"themes": "dist/themes/"
57+
},
58+
"clean": "dist/"
59+
},
60+
"permission": false,
61+
"rtl": false,
62+
}
63+
</div>
64+
</div>
65+
66+
<div class="no example">
67+
<h4>Right-to-left (RTL) Languages</h4>
68+
<p>Including the flag <code>rtl:true</code> will build Semantic UI using <a href="https://github.com/MohammadYounes/rtlcss" target="_blank">RTLCSS</a>.</p>
69+
<p>To build both LTR and RTL versions use the flag <code>rtl: 'both'</code></p>
70+
<div class="ignored code" data-type="JS" data-title="semantic.json">
71+
{
72+
// builds both LTR and RTL version
73+
"rtl": "both",
74+
75+
// these settings may be different
76+
"base": "",
77+
"paths": {
78+
"source": {
79+
"config": "src/theme.config",
80+
"definitions": "src/definitions/",
81+
"site": "src/site/",
82+
"themes": "src/themes/"
83+
},
84+
"output": {
85+
"packaged": "dist/",
86+
"uncompressed": "dist/components/",
87+
"compressed": "dist/components/",
88+
"themes": "dist/themes/"
89+
},
90+
"clean": "dist/"
91+
},
92+
"permission": false,
93+
}
94+
</div>
95+
</div>
96+
3297
<h2 class="ui dividing header">Prototyping with Semantic UI</h2>
3398
<div class="no example">
3499
<h4>Sketch Files</h4>

‎server/documents/modules/tab.html.eco‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -582,6 +582,11 @@ themes : ['Default']
582582
<td>false</td>
583583
<td>Whether tab should load remote content as same url as history</td>
584584
</tr>
585+
<tr>
586+
<td>deactivate</td>
587+
<td>'siblings'</td>
588+
<td>When set to <code>siblings</code> will only deactivate elements that are DOM siblings with the activated element. When set to <code>all</code> the component will deactivate all other elements initialized at the same time.</td>
589+
</tr>
585590
<tr>
586591
<td>history</td>
587592
<td>false</td>

‎server/documents/usage/layout.html.eco‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,17 @@ type : 'Usage'
4747
</div>
4848
</div>
4949
</a>
50+
<a class="ui card" href="/examples/attached.html">
51+
<div class="image">
52+
<img src="/images/examples/attached.png">
53+
</div>
54+
<div class="content">
55+
<div class="header">Attached Content</div>
56+
<div class="description">
57+
Examples of content that can attach to other content
58+
</div>
59+
</div>
60+
</a>
5061
<a class="ui card" href="/examples/bootstrap.html">
5162
<div class="image">
5263
<img src="/images/examples/bootstrap.png">
@@ -109,4 +120,4 @@ type : 'Usage'
109120
</a>
110121
</div>
111122

112-
</div>
123+
</div>

‎server/files/javascript/validate-form.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ semantic.validateForm.ready = function() {
99
$matchingForm = $('.matching.example .ui.form'),
1010
$autoForm = $('.auto.example .ui.form'),
1111
$promptForm = $('.prompt.example .ui.form'),
12+
$ruleForm = $('.custom.rule.example .ui.form'),
1213
$dropdownForm = $('.dropdown.example .ui.form'),
1314
$optionalForm = $('.optional.example .ui.form'),
1415
$inlineForm = $('.inline.example .ui.form'),
@@ -35,6 +36,8 @@ semantic.validateForm.ready = function() {
3536
return false;
3637
};
3738

39+
40+
3841
$.fn.form.settings.defaults = {
3942
firstName: {
4043
identifier : 'first-name',
@@ -255,6 +258,26 @@ semantic.validateForm.ready = function() {
255258
})
256259
;
257260

261+
// no need to actually do this
262+
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
263+
window.user && window.user.adminLevel >= adminLevel;
264+
};
265+
$ruleForm
266+
.form({
267+
fields: {
268+
dog: {
269+
identifier: 'dog',
270+
rules: [
271+
{
272+
type: 'adminLevel[2]',
273+
prompt: 'You must be at least a level-2 admin to add a dog'
274+
}
275+
]
276+
}
277+
}
278+
})
279+
;
280+
258281
$dogForm
259282
.form({
260283
fields: {
@@ -283,4 +306,4 @@ semantic.validateForm.ready = function() {
283306
// attach ready event
284307
$(document)
285308
.ready(semantic.validateForm.ready)
286-
;
309+
;

‎server/files/stylesheets/docs.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ blockquote .author {
130130
Sidebar
131131
---------------*/
132132

133+
134+
#example .ui.sidebar.menu .item {
135+
will-change: transform;
136+
}
137+
133138
#example .sidebar.menu .logo.image,
134139
#example .sticky.menu .logo.image {
135140
width: 35px;
@@ -179,7 +184,7 @@ blockquote .author {
179184

180185
#example .masthead.segment {
181186
position: relative;
182-
z-index: 1;
187+
z-index: 3;
183188
margin: 0em;
184189
min-height: 185px;
185190
padding: 3em 0em;

0 commit comments

Comments
 (0)