From 2896e9bf49990f915c385ad465306589f56f2000 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 9 Mar 2015 13:03:35 -0400 Subject: [PATCH] Fix logic for creating anchors --- server/documents/collections/grid.html.eco | 182 ++++++++++----------- server/files/javascript/docs.js | 61 +++++-- 2 files changed, 132 insertions(+), 111 deletions(-) diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index 093ce818e..44bc53d5d 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -604,7 +604,10 @@ themes : ['Default', 'Fixed-width']
-

Divided Grid

+

+ Divided Grid + Requires Rows +

A grid can have dividers between its columns

@@ -620,7 +623,10 @@ themes : ['Default', 'Fixed-width']
-

Vertically Divided Grid

+

+ Vertically Divided Grid + Requires Rows +

A grid can have dividers between rows

@@ -647,7 +653,10 @@ themes : ['Default', 'Fixed-width']
-

Celled Grid

+

+ Celled Grid + Requires Rows +

A grid can have rows divided into cells

@@ -672,7 +681,10 @@ themes : ['Default', 'Fixed-width']
-

Internally Celled Grid

+

+ Internally Celled Grid + Requires Rows +

A grid can have rows divisions only between internal rows

@@ -921,27 +933,25 @@ themes : ['Default', 'Fixed-width']
-

Equal Width

+

+ Equal Width + Flexbox +

A row can automatically resize all undeclared elements to split the available width evenly

-
- Equal width rows require row wrappers to work correctly. This variation uses a very new technology, flex-box that is only supported by modern browsers. -
-
-
-
- 1 -
+
+
+ 1
-
-
- 2 -
+
+
+
+ 2
-
-
- 3 -
+
+
+
+ 3
@@ -961,18 +971,6 @@ themes : ['Default', 'Fixed-width']
4
-
-
5
-
-
-
6
-
-
-
7
-
-
-
8
-
@@ -984,9 +982,6 @@ themes : ['Default', 'Fixed-width']
3
-
-
4
-
@@ -1027,7 +1022,10 @@ themes : ['Default', 'Fixed-width']
-

Equal Height

+

+ Equal Height + Flexbox +

A row can specify that it is equal height so all of its columns appear the length of its longest column.

@@ -1059,8 +1057,11 @@ themes : ['Default', 'Fixed-width']
+
+ To make equal height column content grow to take the whole column height, use the stretched variation. Keep in mind flex items do not have margin collapse so they may display differently. +
-
+
1 @@ -1089,9 +1090,6 @@ themes : ['Default', 'Fixed-width']
-
- To make equal height column content grow to take the whole column height, use the stretched variation. Keep in mind flex items do not have margin collapse so they may display differently. -
@@ -1208,17 +1206,62 @@ themes : ['Default', 'Fixed-width']

Vertical Alignment

A grid can specify its vertical alignment to have all its columns vertically centered.

-
+
- +
- - + +
- + +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+

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.

+
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+
@@ -1324,53 +1367,6 @@ themes : ['Default', 'Fixed-width']
-
-

Vertical Alignment

-

A row can also specify its vertical alignment to have its columns vertically centered.

-
-
-
- -
-
- - -
-
- -
-
-
-
-

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.

-
-
-
-
- -
-
- - -
-
- -
-
-
-
- -
-
- - -
-
- -
-
-
-

Columns

diff --git a/server/files/javascript/docs.js b/server/files/javascript/docs.js index a37e209cc..0396e7d4b 100755 --- a/server/files/javascript/docs.js +++ b/server/files/javascript/docs.js @@ -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) - ; - $followSection - .removeClass('active') - ; - $activeSection - .addClass('active') + $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 = $('').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 = $('').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 = $('').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 = $('').addClass('anchor').attr('id', id) ; if($title.size() > 0) { - html += '' + $title.text() + ''; + html += '' + text + ''; } }) ; @@ -1112,7 +1136,8 @@ semantic.ready = function() { $helpPopup .popup({ - position: 'bottom right' + position: 'top left', + variation: 'inverted' }) ; @@ -1164,8 +1189,8 @@ semantic.ready = function() { //$.fn.api.settings.base = '//api.semantic-ui.com'; $.extend($.fn.api.settings.api, { - categorySearch: '//api.semantic-ui.com/search/category/{query}', - search: '//api.semantic-ui.com/search/{query}' + categorySearch : '//api.semantic-ui.com/search/category/{query}', + search : '//api.semantic-ui.com/search/{query}' }); if(window.Transifex !== undefined) {