Skip to content

Basic wireframe for a new tab type #7290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 11, 2025
Merged

Basic wireframe for a new tab type #7290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23250d8
sdk tabs
zzhaobraze Jan 31, 2025
699e7a7
add visibility check and refresh
zzhaobraze Feb 10, 2025
d3efdb2
remove redudant cookie
zzhaobraze Feb 10, 2025
7a2eea9
fix tab cookies
zzhaobraze Feb 10, 2025
639bf53
updating tab colors
internetisaiah Feb 11, 2025
6f0c346
fix redirect
zzhaobraze Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion _layouts/broken_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,8 @@
if (redirected_count < max_redirects) {
redirected_count++
query_params.set('redirected',redirected_count );
var redirected = '?' + query_params.toString();

var redirected = ((urlsearch.indexOf('?') > -1 ) ? '?' : '&') + query_params.toString();
if (validurls[urlpath.toLowerCase() + '/' + urlhash] ) {
return location.href = redirecturl(urlpath.toLowerCase() + '/' + urlhash,urlhash,redirected);
}
Expand Down
133 changes: 133 additions & 0 deletions _plugins/sdktabs.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
require 'digest/md5'

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\-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|
itemid = (0...12).map { (97 + rand(26)).chr }.join

tabslug = tab[0].gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(tab[0]) if tabslug.empty?

# scan returns array of results, only care about first match
tabslist += ' <li id="sdkt_' + itemid + '" class="sdkrow ' + tabslug
if ind == 0
tabslist += ' active'
end
tabslist += '"><a class="' + @tabclass + '" data-sdk-tab-target="' + @tabid + '" data-sdk-tab="' + tabslug + '">' + 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
contentid = (0...12).map { (97 + rand(26)).chr }.join

content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
content = converter.convert(content)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(@tab) if tabslug.empty?

return '<div id="sdkc_' + contentid + '" 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|

itemid = (0...12).map { (97 + rand(26)).chr }.join
tabslug = tab[0].gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(tab[0]) if tabslug.empty?

# scan returns array of results, only care about first match
tabslist += ' <li id="sdkst_' + itemid + '" class="coderow ' + tabslug + '_sub_sdk_tab'
if ind == 0
tabslist += ' sub_active'
end
tabslist += '"><a class="' + @tabclass + '" data-sdk-sub_tab-target="' + @tabid + '" data-sdk-sub_tab="' + tabslug + '_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
contentid = (0...12).map { (97 + rand(26)).chr }.join

content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
content = converter.convert(content)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(@tab) if tabslug.empty?

return '<div id="sdksc_' + contentid + '" 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)
13 changes: 9 additions & 4 deletions _plugins/tabs.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ def render(context)
tabslist = '<ul class="ab-nav ab-nav-tabs ' + @tabclass + '_ul" id="' + @tabid + '_nav">' + "\n"
if tabs.length > 0
tabs.each_with_index do |tab, ind|
itemid = (0...12).map { (97 + rand(26)).chr }.join
tabslug = tab[0].gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(tab[0]) if tabslug.empty?

# scan returns array of results, only care about first match
tabslist += ' <li tabindex="0" class="coderow ' + tabslug
tabslist += ' <li tabindex="0" id="mt_' + itemid + '" class="coderow ' + tabslug
if ind == 0
tabslist += ' active'
end
Expand Down Expand Up @@ -49,14 +50,15 @@ def render(context)
match ? match[1].size : 0
end
indentation = indentation.min
contentid = (0...12).map { (97 + rand(26)).chr }.join

content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
content = converter.convert(content)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(@tab) if tabslug.empty?

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

Expand All @@ -74,11 +76,13 @@ def render(context)
tabslist = '<ul class="ab-sub_nav ab-sub_nav-sub_tabs ' + @tabclass + '_ul" id="' + @tabid + '_nav">' + "\n"
if tabs.length > 0
tabs.each_with_index do |tab, ind|
itemid = (0...12).map { (97 + rand(26)).chr }.join

tabslug = tab[0].gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(tab[0]) if tabslug.empty?

# scan returns array of results, only care about first match
tabslist += ' <li tabindex="0" class="coderow ' + tabslug + '_sub_tab'
tabslist += ' <li tabindex="0" id="st_' + itemid + '" class="coderow ' + tabslug + '_sub_tab'
if ind == 0
tabslist += ' sub_active'
end
Expand Down Expand Up @@ -108,14 +112,15 @@ def render(context)
match ? match[1].size : 0
end
indentation = indentation.min
contentid = (0...12).map { (97 + rand(26)).chr }.join

content = indentation ? super.gsub(/^#{' |\t' * indentation}/, '') : super
content = converter.convert(content)
content = content.strip # Strip again to avoid "\n"
tabslug = @tab.gsub(/[^0-9a-z]/i, '')
tabslug = Digest::MD5.hexdigest(@tab) if tabslug.empty?

'<div class="ab-sub_tab-pane ' + tabslug + '_sub_tab " data-sub_tab="' + @tab + '">' + content + "</div>"
return '<div id="sc_' + contentid + '" class="ab-sub_tab-pane ' + tabslug + '_sub_tab " data-sub_tab="' + @tab + '">' + content + "</div>"
end
end
end
Expand Down
175 changes: 149 additions & 26 deletions assets/css/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
ul.ab-nav-tabs {
> li {
&.active {
color: $blue-scooter;
color: $braze-purple;
background-color: $white;
border: 1px solid $grey-ghost;
border-radius: 4px 4px 0 0;
Expand Down Expand Up @@ -120,31 +120,154 @@
}
}

.ab-tab-content,
.ab-sub_tab-content {
margin-bottom: 30px;
padding: 20px 20px 0 20px;
p {
padding: 0;
}
border: 1px solid $grey-ghost;
}
.ab-tab-content {
overflow-x: auto;
> .ab-tab-pane {
display: none;
}
> .active {
display: block;
}
}
.ab-sub_tab-content {
> .ab-sub_tab-pane {
display: none;
}
> .sub_active {
display: block;
.ab-tab-content, .ab-sub_tab-content {
margin-bottom: 30px;
padding: 20px 20px 0 20px;
p {
padding: 0;
}
border: 1px solid $grey-ghost;
}
.ab-tab-content {
> .ab-tab-pane {
display: none;
}
> .active {
display: block;
}
}
.ab-sub_tab-content {
> .ab-sub_tab-pane {
display: none;
}
> .sub_active {
display: block;
}
}
// Sdk tabs css
.sdkrow {
margin-left: 0;
}

ul.sdk-ab-nav,
ul.sdk-ab-sub_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,
ul.sdk-ab-sub_nav-sub_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: $braze-purple;
background-color: $white;
}
}
}

> li {
&.active {
color: $braze-purple;
background-color: $white ;
border-radius: 5px;
border-color: $braze-purple;
cursor: default;
a {
color: $braze-purple;

&:hover {
color: $braze-purple;
background-color: $white;
}
}
}
}
}
ul.sdk-ab-sub_nav-sub_tabs {
> li {
&.sub_active {
color: $braze-purple;
background-color: $white ;
border-radius: 5px;
border-color: $braze-purple;
cursor: default;
a {
color: $braze-purple;

&:hover {
color: $braze-purple;
background-color: $white;
}
}
}
}
}
}
.sdk-tab-content, .sdk-ab_sub_tab-content {
padding: 20px 20px 0 20px;
p {
padding: 0;
}

> .sdk-ab-tab-pane {
display: none;
}
> .active {
display: block;
}
}

.sdk-ab-sub_tab-content {
> .sdk-ab-sub_tab-pane {
display: none;
}
> .sub_active {
display: block;
}
}
}
}
Loading