lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix logic for creating anchors

1.x
jlukic 10 years ago
parent
9cabaa68e4
commit
2896e9bf49
2 changed files with 132 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      server/documents/collections/grid.html.eco
  2. 45
      server/files/javascript/docs.js

160
server/documents/collections/grid.html.eco
View File

@ -604,7 +604,10 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="example">
<h4 class="ui header">Divided Grid</h4>
<h4 class="ui header">
Divided Grid
<span class="ui teal label">Requires Rows</span>
</h4>
<p>A grid can have dividers between its columns</p>
<div class="ui three column divided grid">
<div class="column">
@ -620,7 +623,10 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="example">
<h4 class="ui header">Vertically Divided Grid</h4>
<h4 class="ui header">
Vertically Divided Grid
<span class="ui teal label">Requires Rows</span>
</h4>
<p>A grid can have dividers between rows</p>
<div class="ui vertically divided grid">
<div class="two column row">
@ -647,7 +653,10 @@ themes : ['Default', 'Fixed-width']
<div class="example">
<h4 class="ui header">Celled Grid</h4>
<h4 class="ui header">
Celled Grid
<span class="ui teal label">Requires Rows</span>
</h4>
<p>A grid can have rows divided into cells</p>
<div class="ui celled grid">
<div class="row">
@ -672,7 +681,10 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
<div class="example">
<h4 class="ui header">Internally Celled Grid</h4>
<h4 class="ui header">
Internally Celled Grid
<span class="ui teal label">Requires Rows</span>
</h4>
<p>A grid can have rows divisions only between internal rows</p>
<div class="ui internally celled grid">
<div class="row">
@ -921,13 +933,12 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="example">
<h4 class="ui header">Equal Width</h4>
<h4 class="ui header">
Equal Width
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank" class="ui teal label">Flexbox</a>
</h4>
<p>A row can automatically resize all undeclared elements to split the available width evenly</p>
<div class="ui ignored info message">
Equal width rows require <code>row</code> wrappers to work correctly. This variation uses a very new technology, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">flex-box</a> that is only supported by <a href="http://caniuse.com/#feat=flexbox">modern browsers</a>.
</div>
<div class="ui equal width grid">
<div class="row">
<div class="column">
<div class="ui segment">
1
@ -945,7 +956,6 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui equal width grid">
<div class="row">
@ -961,18 +971,6 @@ themes : ['Default', 'Fixed-width']
<div class="column">
<div class="ui segment">4</div>
</div>
<div class="column">
<div class="ui segment">5</div>
</div>
<div class="column">
<div class="ui segment">6</div>
</div>
<div class="column">
<div class="ui segment">7</div>
</div>
<div class="column">
<div class="ui segment">8</div>
</div>
</div>
<div class="row">
<div class="column">
@ -984,9 +982,6 @@ themes : ['Default', 'Fixed-width']
<div class="column">
<div class="ui segment">3</div>
</div>
<div class="column">
<div class="ui segment">4</div>
</div>
</div>
<div class="row">
<div class="column">
@ -1027,7 +1022,10 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="example">
<h4 class="ui header">Equal Height</h4>
<h4 class="ui header">
Equal Height
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank" class="ui teal label">Flexbox</a>
</h4>
<p>A row can specify that it is equal height so all of its columns appear the length of its longest column.</p>
<div class="ui three column divided equal height grid">
<div class="row">
@ -1059,8 +1057,11 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
<div class="another example">
<div class="ui ignored info message">
To make equal height column content grow to take the whole column height, use the <code>stretched</code> variation. Keep in mind flex items do not have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a> so they may display differently.
</div>
<div class="ui three column divided equal height grid">
<div class="row">
<div class="stretched row">
<div class="column">
<div class="ui segment">
1
@ -1089,9 +1090,6 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
<div class="another example">
<div class="ui ignored info message">
To make equal height column content grow to take the whole column height, use the <code>stretched</code> variation. Keep in mind flex items do not have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a> so they may display differently.
</div>
<div class="ui equal width grid">
<div class="equal height stretched row">
<div class="column">
@ -1208,17 +1206,62 @@ themes : ['Default', 'Fixed-width']
<div class="example">
<h4 class="ui header">Vertical Alignment</h4>
<p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
<div class="ui middle aligned three column grid">
<div class="ui middle aligned four column centered grid">
<div class="row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui four column centered grid">
<div class="top aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="justified row">
<div class="sixteen wide column">
<p>Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.</p>
</div>
</div>
<div class="middle aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="bottom aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
@ -1324,53 +1367,6 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Vertical Alignment</h4>
<p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
<div class="ui three column grid">
<div class="top aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="justified row">
<div class="sixteen wide column">
<p>Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.</p>
</div>
</div>
<div class="middle aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="bottom aligned row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
</div>
<h3 class="ui header">Columns</h3>

45
server/files/javascript/docs.js
View File

@ -63,7 +63,7 @@ semantic.ready = function() {
$downloadInput = $('.download.popup input'),
$downloadStandalone = $('.standalone.column .button'),
$helpPopup = $('.header .help.icon'),
$helpPopup = $('.header .help'),
$example = $('.example'),
$shownExample = $example.filter('.shown'),
@ -178,14 +178,17 @@ semantic.ready = function() {
$section = $(this),
index = $sectionHeaders.index($section),
$followSection = $followMenu.children('.item'),
$activeSection = $followSection.eq(index)
$activeSection = $followSection.eq(index),
isActive = $activeSection.hasClass('active')
;
if(!isActive) {
$followSection
.removeClass('active')
;
$activeSection
.addClass('active')
;
}
},
example: function() {
var
@ -194,9 +197,10 @@ semantic.ready = function() {
$followSection = $followMenu.find('.menu > .item'),
$activeSection = $followSection.eq(index),
inClosedTab = ($(this).closest('.tab:not(.active)').size() > 0),
anotherExample = ($(this).filter('.another.example').size() > 0)
anotherExample = ($(this).filter('.another.example').size() > 0),
isActive = $activeSection.hasClass('active')
;
if(!inClosedTab && !anotherExample) {
if(!inClosedTab && !anotherExample && !isActive) {
$followSection
.removeClass('active')
;
@ -265,7 +269,8 @@ semantic.ready = function() {
.each(function() {
var
$section = $(this),
safeName = $section.text().trim().replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase(),
text = handler.getText($section),
safeName = handler.getSafeName(text),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
@ -278,7 +283,8 @@ semantic.ready = function() {
.each(function() {
var
$title = $(this).children('h4').eq(0),
safeName = $title.text().trim().replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase(),
text = handler.getText($title),
safeName = handler.getSafeName(text),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
@ -290,6 +296,22 @@ semantic.ready = function() {
},
getSafeName: function(text) {
return text.replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase();
},
getText: function($element) {
var
$text = $element.contents().filter(function(){
return this.nodeType == 3;
})
;
return ($text.length > 0)
? $text[0].nodeValue.trim()
: ''
;
},
createMenu: function() {
// grab each h3
var
@ -306,7 +328,8 @@ semantic.ready = function() {
activeClass = (index === 0)
? 'active '
: '',
safeName = $currentHeader.text().trim().replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase(),
text = handler.getText($currentHeader),
safeName = handler.getSafeName(text),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
@ -323,12 +346,13 @@ semantic.ready = function() {
.each(function() {
var
$title = $(this).children('h4').eq(0),
safeName = $title.text().trim().replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase(),
text = handler.getText($title),
safeName = handler.getSafeName(text),
id = window.escape(safeName),
$anchor = $('<a />').addClass('anchor').attr('id', id)
;
if($title.size() > 0) {
html += '<a class="item" href="#'+id+'">' + $title.text() + '</a>';
html += '<a class="item" href="#'+id+'">' + text + '</a>';
}
})
;
@ -1112,7 +1136,8 @@ semantic.ready = function() {
$helpPopup
.popup({
position: 'bottom right'
position: 'top left',
variation: 'inverted'
})
;

Write Preview
Loading…
Cancel
Save