Skip to content

Commit

Permalink
add sdk subtabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzhaobraze
zzhaobraze committed Oct 21, 2024
1 parent ed1e7ae commit c8f5f84
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 27 deletions.
63 changes: 60 additions & 3 deletions _plugins/sdktabs.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ def initialize(tag_name, tabonly = 'false', tokens)
end
end
def render(context)
tabs = super.scan(/data\-tab=\"sdk\-(.*?)\"/)
tabs = super.scan(/data\-sdk\-tab=\"sdk\-(.*?)\"/)
tabslist = '<ul class="sdk-ab-nav sdk-ab-nav-tabs ' + @tabclass + '_ul" id="' + @tabid + '_nav">' + "\n"
if tabs.length > 0
tabs.each_with_index do |tab, ind|
Expand All @@ -18,7 +18,7 @@ def render(context)
if ind == 0
tabslist += ' active'
end
tabslist += '"><a class="' + @tabclass + '" data-tab-target="' + @tabid + '" data-tab="' + tab[0].gsub(' ', '-').gsub(/[^\w-]/, '') + '">' + tab[0] + '</a></li>' + "\n"
tabslist += '"><a class="' + @tabclass + '" data-sdk-tab-target="' + @tabid + '" data-sdk-tab="' + tab[0].gsub(' ', '-').gsub(/[^\w-]/, '') + '">' + tab[0] + '</a></li>' + "\n"
end
end
tabslist += '</ul>' + "\n"
Expand Down Expand Up @@ -50,11 +50,68 @@ def render(context)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(' ', '-').gsub(/[^\w-]/, '')

return '<div class="sdk-ab-tab-pane ' + tabslug + '_tab " data-tab="sdk-' + @tab + '">' + content + "</div>"
return '<div class="sdk-ab-tab-pane ' + tabslug + '_tab " data-sdk-tab="sdk-' + @tab + '">' + content + "</div>"
end
end

class SdkSubTabsBlock < Liquid::Block
def initialize(tag_name, tabonly = 'false', tokens)
super
@tabclass = 'sub_sdk-tab_toggle'
@tabid = 'sub_sdk-tab_' + (0...12).map { (97 + rand(26)).chr }.join
if tabonly.downcase.strip != 'global'
@tabclass = 'sub_sdk-tab_toggle_only'
end
end
def render(context)
tabs = super.scan(/data\-sdk\-sub\_tab=\"(.*?)\"/)
tabslist = '<ul class="sdk-ab-sub_nav sdk-ab-sub_nav-sub_tabs ' + @tabclass + '_ul" id="' + @tabid + '_nav">' + "\n"

if tabs.length > 0
tabs.each_with_index do |tab, ind|
# scan returns array of results, only care about first match
tabslist += ' <li class="coderow ' + tab[0].gsub(' ', '-') + '_sub_sdk_tab'
if ind == 0
tabslist += ' sub_active'
end
tabslist += '"><a class="' + @tabclass + '" data-sdk-sub_tab-target="' + @tabid + '" data-sdk-sub_tab="' + tab[0].gsub(' ', '-') + '_sub_sdk_tab">' + tab[0] + '</a></li>' + "\n"
end
end
tabslist += '</ul>' + "\n"
tabslist + '<div id="' + @tabid + '" class="sdk-ab-sub_tab-content ' + @tabclass + '_sdk_div">' + "\n" + super + "\n</div>\n"
end
end

class SdkSubTabBlock < Liquid::Block
def initialize(tag_name, tab, tokens)
super
@tab = tab.strip.downcase
end

def render(context)
return "" if @tab.empty?

site = context.registers[:site]
converter = site.find_converter_instance(Jekyll::Converters::Markdown)

lines = super.rstrip.split(/\r\n|\r|\n/).select { |line| line.size > 0 }
indentation = lines.map do |line|
match = line.match(/^(\s+)[^\s]+/)
match ? match[1].size : 0
end
indentation = indentation.min

content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
content = converter.convert(content)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(' ', '-')

return '<div class="sdk-ab-sub_tab-pane ' + tabslug + '_sub_sdk_tab " data-sdk-sub_tab="' + @tab + '">' + content + "</div>"
end
end
end

Liquid::Template.register_tag("sdktabs", Tags::SdkTabsBlock)
Liquid::Template.register_tag("sdktab", Tags::SdkTabBlock)
Liquid::Template.register_tag("sdksubtabs", Tags::SdkSubTabsBlock)
Liquid::Template.register_tag("sdksubtab", Tags::SdkSubTabBlock)
35 changes: 32 additions & 3 deletions assets/css/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,8 @@
margin-left: 0;
}

ul.sdk-ab-nav {
ul.sdk-ab-nav,
ul.sdk-ab-sub_nav {
margin-bottom: 10px;
margin-left: 0 !important;
padding-left: 0;
Expand Down Expand Up @@ -190,7 +191,8 @@
}
}

ul.sdk-ab-nav-tabs {
ul.sdk-ab-nav-tabs,
ul.sdk-ab-sub_nav-sub_tabs{

> li {
float: left;
Expand Down Expand Up @@ -226,8 +228,26 @@
}
}
}
ul.sdk-ab-sub_nav-sub_tabs {
> li {
&.sub_active {
color: $blue-scooter;
background-color: $white ;
border-radius: 5px;
border-color: $navy-bay;
cursor: default;
a {
color: $navy-bay;

.sdk-tab-content {
&:hover {
color: $blue-scooter;
background-color: $white;
}
}
}
}
}
.sdk-tab-content, .sdk-ab_sub_tab-content {
padding: 20px 20px 0 20px;
p {
padding: 0;
Expand All @@ -239,6 +259,15 @@
> .active {
display: block;
}
}

.sdk-ab-sub_tab-content {
> .sdk-ab-sub_tab-pane {
display: none;
}
> .sub_active {
display: block;
}
}
}
}
52 changes: 31 additions & 21 deletions assets/js/documents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,18 +380,20 @@ $(document).ready(function() {
$('div.' + tabtype+ prefix +'tab_toggle_div div.' + tabtype + 'ab-' + prefix + 'tab-pane').removeClass(prefix + 'active');
$('div.' + tabtype+ prefix +'tab_toggle_div div.' + curtab + postfix).addClass(prefix + 'active');
}

function setTabOnlyClass(tabtype, prefix, postfix, partab, curtab){
$('#' + partab + '_nav li').removeClass(prefix + 'active');
$('#' + partab + '_nav li.' + curtab).addClass(prefix + 'active');
$('#' + partab + ' div.' + tabtype + 'ab-' + prefix + 'tab-pane').removeClass(prefix + 'active');
$('#' + partab + ' div.' + curtab + postfix).addClass(prefix + 'active');
}

// Updated Tab switcher
$('.tab_toggle, .sdk-tab_toggle').click(function(e){
e.preventDefault();
var $this = $(this);
var curtab = $this.attr('data-tab');
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var curtab = $this.attr('data-' + tabtype + 'tab');
var tabstate = $this.attr("class").includes('sdk-') ? 'sdktab' : 'tab';
setTabClass(tabtype,'', '_tab', curtab)
setTabState($this.text(), tabstate);
Expand All @@ -401,44 +403,50 @@ $(document).ready(function() {
e.preventDefault();

var $this = $(this);
var curtab = $this.attr('data-tab');
var partab = $this.attr('data-tab-target');
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var curtab = $this.attr('data-' + tabtype + 'tab');
var partab = $this.attr('data-' + tabtype + 'tab-target');
var tabstate = $this.attr("class").includes('sdk-') ? 'sdktab' : 'tab';
setTabOnlyClass(tabtype,'','_tab', partab, curtab)
setTabState($this.text(), tabstate);
});

$('.ab-tab-content .ab-tab-pane:first-child, .sdk-tab-content .sdk-ab-tab-pane:first-child').addClass('active');

$('.sub_tab_toggle').click(function(e){
$('.sub_tab_toggle, sub_sdk-tab_toggle').click(function(e){
e.preventDefault();
var $this = $(this);
var tabstate = $this.attr("class").includes('sdk-') ? 'sdksubtab' : 'subtab';

setTabClass('','sub_', '', curtab)
setTabState($this.text(), 'subtab');
setTabState($this.text(), tabstate);
});

$('.sub_tab_toggle_only').click(function(e){
$('.sub_tab_toggle_only, .sub_sdk-tab_toggle_only').click(function(e){
e.preventDefault();

var $this = $(this);
var curtab = $this.attr('data-sub_tab');
var partab = $this.attr('data-sub_tab-target');
setTabOnlyClass('','sub_','', partab, curtab)
setTabState($this.text(), 'subtab');
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var curtab = $this.attr('data-' + tabtype + 'sub_tab');
var partab = $this.attr('data-' + tabtype + 'sub_tab-target');
var tabstate = $this.attr("class").includes('sdk-') ? 'sdksubtab' : 'subtab';

setTabOnlyClass(tabtype,'sub_','', partab, curtab)
setTabState($this.text(), tabstate);
});
$('.ab-sub_tab-content .ab-sub_tab-pane:first-child').addClass('sub_active');
$('.ab-sub_tab-content .ab-sub_tab-pane:first-child, .sdk-ab-sub_tab-content .sdk-ab-sub_tab-pane:first-child').addClass('sub_active');

let tab_query = (new URLSearchParams(window.location.search).get('tab') || '').replace('_sub_tab','');
let sub_tab_query = (new URLSearchParams(window.location.search).get('subtab') || '').replace('_sub_tab','');
let sdk_tab_query = (new URLSearchParams(window.location.search).get('sdktab') || '').replace('_sub_tab','');
let sdk_sub_tab_query = (new URLSearchParams(window.location.search).get('sdksubtab') || '').replace('_sub_tab','');

// if tab is set via param or cookied, activate tab
$('.tab_toggle, .sdk-tab_toggle').each(function(e,v){
var $this = $(v);
var curtab = $this.attr('data-tab');
var curtab_name = $this.text().toLowerCase();
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var curtab = $this.attr('data-' + tabtype + 'tab');
var curtab_name = $this.text().toLowerCase();

if ((tab_query && (tab_query == curtab_name)) || (sdk_tab_query && (sdk_tab_query == curtab_name))){
setTabClass(tabtype,'', '_tab', curtab)
Expand All @@ -453,10 +461,10 @@ $(document).ready(function() {

$('.tab_toggle_only, .sdk-tab_toggle_only').each(function(e,v){
var $this = $(v);
var curtab = $this.attr('data-tab');
var partab = $this.attr('data-tab-target');
var curtab_name = $this.text().toLowerCase();
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var curtab = $this.attr('data-' + tabtype + 'tab');
var partab = $this.attr('data-' + tabtype + 'tab-target');
var curtab_name = $this.text().toLowerCase();
if ((tab_query && (tab_query == curtab_name)) || (sdk_tab_query && (sdk_tab_query == curtab_name))){
setTabOnlyClass(tabtype,'', '_tab', partab, curtab)
}
Expand All @@ -466,11 +474,12 @@ $(document).ready(function() {
setTabOnlyClass(tabtype,'', '_tab', partab, curtab)
}
});

$('.sub_tab_toggle, .sub_sdk-tab_toggle').each(function(e,v){
var $this = $(v);
var curtab = $this.attr('data-sub_tab');
var curtab_name = $this.text().toLowerCase();
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk' : '';
var curtab = $this.attr('data-' + tabtype + 'sub_tab');
var curtab_name = $this.text().toLowerCase();
if ((tab_query && (tab_query == curtab_name)) ||
(sub_tab_query && (sub_tab_query == curtab_name))
){
Expand All @@ -484,13 +493,14 @@ $(document).ready(function() {
}
});

$('.sub_tab_toggle_only').each(function(e,v){
$('.sub_tab_toggle_only, .sub_sdk-tab_toggle_only').each(function(e,v){
var $this = $(v);
var curtab = $this.attr('data-sub_tab');
var partab = $this.attr('data-sub_tab-target');
var curtab_name = $this.text().toLowerCase();
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk' : '';

var curtab = $this.attr('data-' + tabtype + 'sub_tab');
var partab = $this.attr('data-' + tabtype + 'sub_tab-target');

if ((tab_query && (tab_query == curtab_name)) ||
(sub_tab_query && (sub_tab_query == curtab_name))
){
Expand Down

0 comments on commit c8f5f84

Please sign in to comment.