whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor tabs implementation (#3268)

Browse Source 
* Refactor tabs implementation

* tidy head.html

* test jquery-ui tabs

* Initial tabs code refactor

* test liquid parsing

* test liquid stack

* move into tabs.html

* test jekyll tabs

* construct array

* test cleaner way

* add example content

* test split hack

* fix md

* add site.emptyArray

* set good defaults

* fix CSS

* cleanup li

* fix a href

* fix content tabs

* add space to default

* remove a href underline

* rename docs/tab-test.md to docs/tab-example.md

* fix skip toc check

* add assignees

* add comment to reference example

* add documentation to example

* escape md

* move demo to top, pretty it up

* add word

* tweak wording
This commit is contained in:
Andrew Chen
2017-05-04 13:52:59 -07:00
committed by GitHub
parent 204aad82b1
commit 105942fdb4
7 changed files with 147 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/head.html
+6 -6
View File
@@ -2,12 +2,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
<link rel="stylesheet" href="/css/styles.css"/>
<link rel="stylesheet" href="/css/jquery-ui.min.css">
<link rel="stylesheet" href="/css/sweetalert.css">
{% if page.class == "gridPage" %}<link rel="stylesheet" href="/css/gridpage.css">{% endif %}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
{% if page.class == "gridPage" %}<link rel="stylesheet" type="text/css" href="/css/gridpage.css">{% endif %}
<script src="/js/jquery-2.2.0.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/script.js"></script>
_includes/tabs.html
-17
View File
@@ -1,17 +0,0 @@
{% assign tabsraw = tabspec | newline_to_br | split: '<br />' %}
{% assign tabsetname = tabsraw[0] %}
<script>$(function(){$("#{{tabsetname}}").tabs();});</script>
<div id="{{tabsetname}}">
<ul>{% for tab in tabsraw offset:1 %}{% assign thisTab = tab | split: ',' %}
<li><a href="#{{ thisTab[0] | strip | handleize }}">{{ thisTab[0] | strip}}</a></li>{% endfor %}
</ul>
{% for tab in tabsraw offset:1 %}
{% assign thisTab = tab | split: ',' %}
{% assign tabLang=thisTab[1] %}
{% assign tabFile=thisTab[2] %}
{% assign tabGHLink=thisTab[3] %}
<div id="{{ thisTab[0] | strip | handleize }}">
{% include code.html language=tabLang file=tabFile ghlink=tabGHLink %}
</div>
{% endfor %}
</div>
_includes/tabs.md
+15
View File
@@ -0,0 +1,15 @@
{% comment %} See /docs/tabs-example.md for usage example. {% endcomment %}
{% assign tab_set_id = tab_set_name | default: "tabset" | slugify %}
<div id="{{tab_set_id}}">
<ul>
{% for name in tab_names %}
<li><a href="#{{tab_set_id}}-{{forloop.index0}}">{{ name | strip }}</a></li>
{% endfor %}
</ul>
{% for content in tab_contents %}
<div id="{{tab_set_id}}-{{forloop.index0}}">
{{ content | markdownify }}
</div>
{% endfor %}
</div>
<script>$(function(){$("#{{tab_set_id}}").tabs();});</script>