Merge pull request #13463 from twbs/docs-theme-toggler

add button to toggle the optional theme when viewing the docs

docs/_includes/header.html

@@ -15,6 +15,10 @@
 
 <!-- Bootstrap core CSS -->
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+  <!-- Optional Bootstrap Theme -->
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
 
 <!-- Documentation extras -->
 <link href="../assets/css/docs.min.css" rel="stylesheet">

docs/_layouts/default.html

@@ -47,10 +47,14 @@
             <a class="back-to-top" href="#top">
               Back to top
             </a>
+            {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+            <a href="#" class="bs-docs-theme-toggle">
+              Preview theme
+            </a>
+            {% endif %}
           </div>
         </div>
       </div>
-
     </div>
 
     {% include footer.html %}

docs/assets/css/_src/docs.css

@@ -583,7 +583,8 @@ body {
 }
 
 /* Back to top (hidden on mobile) */
-.back-to-top {
+.back-to-top,
+.bs-docs-theme-toggle {
   display: none;
   padding: 4px 10px;
   margin-top: 10px;
@@ -592,13 +593,18 @@ body {
   font-weight: 500;
   color: #999;
 }
-.back-to-top:hover {
+.back-to-top:hover,
+.bs-docs-theme-toggle:hover {
   color: #563d7c;
   text-decoration: none;
 }
+.bs-docs-theme-toggle {
+  margin-top: 0;
+}
 
 @media (min-width: 768px) {
-  .back-to-top {
+  .back-to-top,
+  .bs-docs-theme-toggle {
     display: block;
   }
 }

docs/assets/js/_src/application.js

@@ -53,6 +53,23 @@
       $('.bs-top').affix()
     }, 100)
 
+    // theme toggler
+    ;(function () {
+      var stylesheetLink = $('#bs-theme-stylesheet')
+      var themeBtn = $('.bs-docs-theme-toggle')
+      themeBtn.click(function () {
+        var href = stylesheetLink.attr('href');
+        if (!href || href.indexOf('data') === 0) {
+          stylesheetLink.attr('href', stylesheetLink.attr('data-href'))
+          themeBtn.text('Disable theme preview')
+        }
+        else {
+          stylesheetLink.attr('href', '')
+          themeBtn.text('Preview theme')
+        }
+      })
+    })();
+
     // tooltip demo
     $('.tooltip-demo').tooltip({
       selector: '[data-toggle="tooltip"]',

docs/assets/js/docs.min.js

@@ -13,4 +13,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.
  */
-!function(a){a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-navbar").tooltip({selector:'a[data-toggle="tooltip"]',container:".bs-docs-navbar .nav"}),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)})})}(jQuery);
+!function(a){a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle");c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme")):(b.attr("href",b.attr("data-href")),c.text("Disable theme preview"))})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-navbar").tooltip({selector:'a[data-toggle="tooltip"]',container:".bs-docs-navbar .nav"}),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)})})}(jQuery);
\ No newline at end of file