Skip to content

Commit

Permalink
basic wireframe
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzhaobraze
zzhaobraze committed May 1, 2024
1 parent 47d8ab8 commit 1eae1bd
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 37 deletions.
60 changes: 60 additions & 0 deletions _plugins/sdktabs.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
module Tags
class SdkTabsBlock < Liquid::Block
def initialize(tag_name, tabonly = 'false', tokens)
super
@tabclass = 'sdk-tab_toggle'
@tabid = 'sdk-tab_' + (0...12).map { (97 + rand(26)).chr }.join
if tabonly.downcase.strip == 'local'
@tabclass = 'sdk-tab_toggle_only'
end
end
def render(context)
tabs = super.scan(/data\-tab=\"(.*?)\"/)
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|
# scan returns array of results, only care about first match
tabslist += ' <li class="sdkrow ' + tab[0].gsub(' ', '-').gsub(/[^\w-]/, '')
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"
end
end
tabslist += '</ul>' + "\n"
tabslist + '<div id="' + @tabid + '" class="sdk-tab-content ' + @tabclass + '_div">' + "\n" + super + "\n</div>\n"
end
end

class SdkTabBlock < 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(' ', '-').gsub(/[^\w-]/, '')

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

end

Liquid::Template.register_tag("sdktabs", Tags::SdkTabsBlock)
Liquid::Template.register_tag("sdktab", Tags::SdkTabBlock)
4 changes: 2 additions & 2 deletions _plugins/tabs.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ def render(context)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(' ', '-').gsub(/[^\w-]/, '')

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

Expand Down Expand Up @@ -106,7 +106,7 @@ def render(context)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(' ', '-').gsub(/[^\w-]/, '')

'<div class="ab-sub_tab-pane ' + tabslug + '_sub_tab " data-sub_tab="' + @tab + '">' + content + "</div>"
return '<div class="ab-sub_tab-pane ' + tabslug + '_sub_tab " data-sub_tab="' + @tab + '">' + content + "</div>"
end
end
end
Expand Down
95 changes: 95 additions & 0 deletions assets/css/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,101 @@
display: block;
}
}
// Sdk tabs css
.sdkrow {
margin-left: 0;
}

ul.sdk-ab-nav {
margin-bottom: 10px;
margin-left: 0 !important;
padding-left: 0;
list-style: none;

> li {
position: relative;
display: block;
&::before {
content: none !important;
font-size: 12px;
vertical-align: middle;
}
> a {
position: relative !important;
display: block !important;
padding: 5px 15px;
cursor: pointer;
font-size: 14px;

border: 1px solid $blue-ice !important;
border-radius: 5px !important;
&:hover,
&:focus {
text-decoration: none;
background-color: $white;
}
}
}

&::before,
&::after {
content: " ";
display: table;
}
&::after {
clear: both;
}
}

ul.sdk-ab-nav-tabs {

> li {
float: left;
margin-bottom: 10px;
margin-right: 10px;
> a {
color: $black-shark;
margin-right: 2px;
line-height: 25px;
text-transform: uppercase;
&:hover {
color: $blue-scooter;
background-color: $white;
}
}
}

> li {
&.active {
color: $blue-scooter;
background-color: $white ;
border-radius: 5px;
border-color: $navy-bay;
cursor: default;
a {
color: $navy-bay;

&:hover {
color: $blue-scooter;
background-color: $white;
}
}
}
}
}

.sdk-tab-content {
padding: 20px 20px 0 20px;
p {
padding: 0;
}

> .sdk-ab-tab-pane {
display: none;
}
> .active {
display: block;
}
}
}
}
81 changes: 46 additions & 35 deletions assets/js/documents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,42 +400,47 @@ $(document).ready(function() {
$('#sidebar_toggle').trigger('click');
}

function setTabClass(prefix, postfix, curtab){
$('.' + prefix +'tab_toggle_ul.ab-' + prefix +'nav-' + prefix +'tabs li').removeClass(prefix + 'active');
$('.' + prefix +'tab_toggle_ul.ab-' + prefix +'nav-' + prefix +'tabs li.' + curtab).addClass(prefix + 'active');
$('div.' + prefix +'tab_toggle_div div.ab-' + prefix + 'tab-pane').removeClass(prefix + 'active');
$('div.' + prefix +'tab_toggle_div div.' + curtab + postfix).addClass(prefix + 'active');
function setTabClass(tabtype, prefix, postfix, curtab){
$('.' + tabtype + prefix +'tab_toggle_ul.' + tabtype + 'ab-' + prefix +'nav-' + prefix +'tabs li').removeClass(prefix + 'active');
$('.' + tabtype+ prefix +'tab_toggle_ul.' + tabtype + 'ab-' + prefix +'nav-' + prefix +'tabs li.' + curtab).addClass(prefix + 'active');
$('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(prefix, postfix, partab, curtab){
$('#' + partab + '_nav li').removeClass(prefix + 'active');
$('#' + partab + '_nav li.' + curtab).addClass(prefix + 'active');
$('#' + partab + ' div.ab-' + prefix + 'tab-pane').removeClass(prefix + 'active');
$('#' + partab + ' 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').click(function(e){
$('.tab_toggle, .sdk-tab_toggle').click(function(e){
e.preventDefault();
var $this = $(this);
var curtab = $this.attr('data-tab');
setTabClass('', '_tab', curtab)
setTabState($this.text(), 'tab');
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
var tabstate = $this.attr("class").includes('sdk-') ? 'sdktab' : 'tab';
setTabClass(tabtype,'', '_tab', curtab)
setTabState($this.text(), tabstate);
});
$('.tab_toggle_only').click(function(e){

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

var $this = $(this);
var curtab = $this.attr('data-tab');
var partab = $this.attr('data-tab-target');
setTabOnlyClass('','_tab', partab, curtab)
setTabState($this.text(), 'tab');
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
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').addClass('active');

$('.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){
e.preventDefault();
var $this = $(this);
var curtab = $this.attr('data-sub_tab');
setTabClass('sub_', '', curtab)
setTabClass('','sub_', '', curtab)
setTabState($this.text(), 'subtab');
});

Expand All @@ -445,59 +450,63 @@ $(document).ready(function() {
var $this = $(this);
var curtab = $this.attr('data-sub_tab');
var partab = $this.attr('data-sub_tab-target');

setTabOnlyClass('sub_','', partab, curtab)
setTabOnlyClass('','sub_','', partab, curtab)
setTabState($this.text(), 'subtab');
});
$('.ab-sub_tab-content .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','');

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

if ((tab_query && (tab_query == curtab_name)) || (sdk_tab_query && (sdk_tab_query == curtab_name))){
setTabClass(tabtype,'', '_tab', curtab)
}
else if (tab_track[curtab_name]){
let tab_cookie = Cookies.get(tab_track[curtab_name]) || '';
if (tab_cookie && (curtab_name == tab_cookie))
setTabClass('', '_tab', curtab)
setTabClass(tabtype,'', '_tab', curtab)
}

});

$('.tab_toggle_only').each(function(e,v){
$('.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();
if (tab_query && (tab_query == curtab_name)){
setTabOnlyClass('', '_tab', partab, curtab)
var tabtype = $this.attr("class").includes('sdk-') ? 'sdk-' : '';
if ((tab_query && (tab_query == curtab_name)) || (sdk_tab_query && (sdk_tab_query == curtab_name))){
setTabOnlyClass(tabtype,'', '_tab', partab, curtab)
}
else if (tab_track[curtab_name]){
let tab_cookie = Cookies.get(tab_track[curtab]) || '';
if (tab_cookie && (curtab_name == tab_cookie))
setTabOnlyClass('', '_tab', partab, curtab)
setTabOnlyClass(tabtype,'', '_tab', partab, curtab)
}
});
$('.sub_tab_toggle').each(function(e,v){
$('.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' : '';
if ((tab_query && (tab_query == curtab_name)) ||
(sub_tab_query && (sub_tab_query == curtab_name))
){

setTabClass('sub_','', curtab)
setTabClass(tabtype,'sub_','', curtab)
}
else if (tab_track[curtab_name]){
let tab_cookie = Cookies.get(tab_track[curtab_name]) || '';
if (tab_cookie && (curtab_name == tab_cookie))
setTabClass('sub_','', curtab)
setTabClass(tabtype,'sub_','', curtab)
}
});

Expand All @@ -506,15 +515,17 @@ $(document).ready(function() {
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' : '';

if ((tab_query && (tab_query == curtab_name)) ||
(sub_tab_query && (sub_tab_query == curtab_name))
){
setTabOnlyClass('sub_','', partab, curtab)
setTabOnlyClass(tabtype,'sub_','', partab, curtab)
}
else if (tab_track[curtab_name]){
let tab_cookie = Cookies.get(tab_track[curtab_name]) || '';
if (tab_cookie && (curtab_name == tab_cookie))
setTabOnlyClass('sub_','', partab, curtab)
setTabOnlyClass(tabtype,'sub_','', partab, curtab)
}
});

Expand Down

0 comments on commit 1eae1bd

Please sign in to comment.