From 54a8c75f0981d5a40a831b516e0971985962cc45 Mon Sep 17 00:00:00 2001 From: sebnitu Date: Fri, 20 Jan 2017 17:19:56 -0800 Subject: [PATCH] Finished the tabs devlog post --- docs/assets/js/jquery.docready.js | 13 +++++-- docs/assets/js/scripts.min.js | 2 +- .../_posts/2017-01-16-exploring-tabs/index.md | 34 +++++++++++++------ src/scss/blocks/_tabs.scss | 2 +- 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/docs/assets/js/jquery.docready.js b/docs/assets/js/jquery.docready.js index 9992424a..8add6794 100644 --- a/docs/assets/js/jquery.docready.js +++ b/docs/assets/js/jquery.docready.js @@ -127,7 +127,7 @@ }); /** - * @Sticky Element + * Sticky Element */ $('.sticky').theiaStickySidebar({ containerSelector : '.row', @@ -135,13 +135,22 @@ }); /** - * @Navigation Toggle + * Navigation Toggle */ $('.widget-menu .toggle').click(function() { $(this).parent().toggleClass('active'); return false; }); + /** + * New Tab Links + */ + $('.onclick-newtab').click(function() { + $(this).attr('target', '_blank'); + window.open($(this).attr('href')); + return false; + }); + }); /** diff --git a/docs/assets/js/scripts.min.js b/docs/assets/js/scripts.min.js index a174796e..79b5bb75 100644 --- a/docs/assets/js/scripts.min.js +++ b/docs/assets/js/scripts.min.js @@ -1 +1 @@ -!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0||!(i("body").width().theiaStickySidebar:after {content: ""; display: table; clear: both;}')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:"",transform:"none"})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};if(a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.length&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length){var s=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;a.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(s)}).remove(),a.stickySidebar=i("
").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)}a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var r=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),r-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-r,0==r?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()a.container.width())return void o()}var r=i(document).scrollTop(),d="static";if(r>=a.sidebar.offset().top+(a.paddingTop-a.options.additionalMarginTop)){var c,p=a.paddingTop+t.additionalMarginTop,l=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,b=a.sidebar.offset().top,g=a.sidebar.offset().top+e(a.container),f=0+t.additionalMarginTop,h=a.stickySidebar.outerHeight()+p+l0?Math.min(m,f):Math.max(m,c-a.stickySidebar.outerHeight()),m=Math.max(m,u),m=Math.min(m,S-a.stickySidebar.outerHeight());var k=a.container.height()==a.stickySidebar.outerHeight();d=(k||m!=f)&&(k||m!=c-a.stickySidebar.outerHeight())?r+m-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:n(a.stickySidebar)+"px",transform:"translateY("+m+"px)",left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))+"px",top:"0px"});else if("absolute"==d){var v={};"absolute"!=a.stickySidebar.css("position")&&(v.position="absolute",v.transform="translateY("+(r+m-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom)+"px)",v.top="0px"),v.width=n(a.stickySidebar)+"px",v.left="",a.stickySidebar.css(v)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=r}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}function n(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return"undefined"==typeof t&&(t=i.width()),t}var s={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern"};t=i.extend(s,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery),function(i){"use strict"}(jQuery),function(i){"use strict";i(document).ready(function(){i(".dismissible > .close").on("click",function(){i(this).closest(".dismissible").fadeOut()}),i(document).click(function(){i(".dropdown-trigger.on-click").removeClass("active")}),i(".dropdown-trigger.on-click").click(function(t){var o=i(this).hasClass("active");i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),o||i(this).addClass("active"),t.stopPropagation()}),i(".dropdown-trigger.on-click .dropdown").click(function(t){i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),i(this).addClass("active"),t.stopPropagation()}),i(".tabs-nav").each(function(t){var o=i(this),e=o.parents(".tabs").find(".tabs-content"),a=e.length;a||(e=o.attr("data-content"),e?(e=i("#"+e),e.length&&(a=1)):console.log("Tabs content does not exist!")),o.find("a").click(function(){var t=i(this).parents("li").hasClass("active");if(!t)if(o.find("li").removeClass("active"),i(this).parents("li").addClass("active"),a){e.find(".tabs-panel").removeClass("active");var n=i(this).attr("href");i(n).addClass("active")}else console.log("Tabs content does not exist!");return!1})}),i(".sticky").theiaStickySidebar({containerSelector:".row",additionalMarginTop:0}),i(".widget-menu .toggle").click(function(){return i(this).parent().toggleClass("active"),!1})}),i(window).on("load",function(){})}(jQuery); \ No newline at end of file +!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0||!(i("body").width().theiaStickySidebar:after {content: ""; display: table; clear: both;}')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:"",transform:"none"})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};if(a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.length&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length){var s=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;a.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(s)}).remove(),a.stickySidebar=i("
").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)}a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var r=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),r-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-r,0==r?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()a.container.width())return void o()}var r=i(document).scrollTop(),d="static";if(r>=a.sidebar.offset().top+(a.paddingTop-a.options.additionalMarginTop)){var c,p=a.paddingTop+t.additionalMarginTop,l=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,b=a.sidebar.offset().top,g=a.sidebar.offset().top+e(a.container),f=0+t.additionalMarginTop,h=a.stickySidebar.outerHeight()+p+l0?Math.min(m,f):Math.max(m,c-a.stickySidebar.outerHeight()),m=Math.max(m,u),m=Math.min(m,S-a.stickySidebar.outerHeight());var y=a.container.height()==a.stickySidebar.outerHeight();d=(y||m!=f)&&(y||m!=c-a.stickySidebar.outerHeight())?r+m-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:n(a.stickySidebar)+"px",transform:"translateY("+m+"px)",left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))+"px",top:"0px"});else if("absolute"==d){var v={};"absolute"!=a.stickySidebar.css("position")&&(v.position="absolute",v.transform="translateY("+(r+m-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom)+"px)",v.top="0px"),v.width=n(a.stickySidebar)+"px",v.left="",a.stickySidebar.css(v)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=r}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}function n(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return"undefined"==typeof t&&(t=i.width()),t}var s={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern"};t=i.extend(s,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery),function(i){"use strict"}(jQuery),function(i){"use strict";i(document).ready(function(){i(".dismissible > .close").on("click",function(){i(this).closest(".dismissible").fadeOut()}),i(document).click(function(){i(".dropdown-trigger.on-click").removeClass("active")}),i(".dropdown-trigger.on-click").click(function(t){var o=i(this).hasClass("active");i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),o||i(this).addClass("active"),t.stopPropagation()}),i(".dropdown-trigger.on-click .dropdown").click(function(t){i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),i(this).addClass("active"),t.stopPropagation()}),i(".tabs-nav").each(function(t){var o=i(this),e=o.parents(".tabs").find(".tabs-content"),a=e.length;a||(e=o.attr("data-content"),e?(e=i("#"+e),e.length&&(a=1)):console.log("Tabs content does not exist!")),o.find("a").click(function(){var t=i(this).parents("li").hasClass("active");if(!t)if(o.find("li").removeClass("active"),i(this).parents("li").addClass("active"),a){e.find(".tabs-panel").removeClass("active");var n=i(this).attr("href");i(n).addClass("active")}else console.log("Tabs content does not exist!");return!1})}),i(".sticky").theiaStickySidebar({containerSelector:".row",additionalMarginTop:0}),i(".widget-menu .toggle").click(function(){return i(this).parent().toggleClass("active"),!1}),i(".onclick-newtab").click(function(){return i(this).attr("target","_blank"),window.open(i(this).attr("href")),!1})}),i(window).on("load",function(){})}(jQuery); \ No newline at end of file diff --git a/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md b/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md index 0aae3c69..11fa5286 100644 --- a/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md +++ b/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md @@ -50,7 +50,9 @@ Next, we'll write a quick set of divs that represent our content panes which we'
``` -We'll need to settle on a class that we use to show the active tab item and also one to show and hide the panels. Lets just go with `.active` as it's pretty clear. The other markup aspect we'll need to handle is how we link the tabs navigation to it's respective tab content. The main concern here is in the case our document may have more than one set of tabs on a view. So we decided to incorporate two methods that are fairly intuitive and lets the developer decide what works best for them. +Lastly we'll link the tab navigation using the `href` attribute on the links with the`id` value of the content panel they toggle. We'll also need to settle on a class that we use to show the active tab item and also one to show and hide the panels. Lets just go with `.active` as it's pretty clear. + +The other markup aspect we'll need to handle is how we link the tabs control group to a tabs content group. The main concern here is in the case our document may have more than one set of tabs on a view. So we decided to incorporate two methods that are fairly intuitive and lets the developer decide what works best for them. ### Data Attribute Link @@ -279,18 +281,28 @@ So we've got some solid semantic markup and handled our requirements for tab beh Now we've got a fully functional tabs block component with just the bare minimum styling that you can test here. -

See the Pen bgqmJo by Sebastian Nitu (@sebnitu) on CodePen.

+

See the Pen BaseWeb Tabs - Vanilla by Sebastian Nitu (@sebnitu) on CodePen.

-With this as our base, we can go any stylistic direction we'd like. [Mary Lou](https://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/) wrote a great post on Codrops if you're looking for some inspiration. For our purposes, we want some basic styles that can be easily adopted in most projects without much effort. +With this as our base, we can go any stylistic direction we'd like. [Mary Lou](https://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/) wrote a great post on Codrops if you're looking for some inspiration. For our purposes, we want some very basic styles that can be easily adopted in most projects without much effort. Here are the two options that we came up with which can be modified to suit most situations. ---- +

See the Pen BaseWeb Tabs - Fold Styles by Sebastian Nitu (@sebnitu) on CodePen.

+ + +

See the Pen BaseWeb Tabs - Line Styles by Sebastian Nitu (@sebnitu) on CodePen.

+ + +## Conclusion + +That wraps up our tabs block component solution. We've managed to hit all our requirements we listed in the introduction. The next steps we took in BaseWeb involve creating a variable map for customization and some handy mixins that abstract our styles a bit. You can read more about that implementation over on the [documentations page](/docs/blocks/tabs/). -## Further Reading +### Further Reading -* [Material IO](https://material.io/guidelines/components/tabs.html#tabs-specs) -* [Apple Developer UI Tab Bar](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html) -* [Bootstrap Twitter Tabs](http://getbootstrap.com/javascript/#tabs) -* [Foundation Tabs](http://foundation.zurb.com/sites/docs/tabs.html) -* [Tab Style Inspiration](https://tympanus.net/Development/TabStylesInspiration/) -* [Tabs Used Right](https://www.nngroup.com/articles/tabs-used-right/) + diff --git a/src/scss/blocks/_tabs.scss b/src/scss/blocks/_tabs.scss index d9e5fd46..9a2cdf68 100644 --- a/src/scss/blocks/_tabs.scss +++ b/src/scss/blocks/_tabs.scss @@ -249,7 +249,7 @@ $tabs: ( @include make-tabs(); /** - * Tabs Style: Default + * Tabs Style: Fold */ @include add-tab-style($style: 'fold');