add code modals on previews

3 files changed, 56 insertions, 2 deletions

diff --git a/assets/css/bootswatch.min.css b/assets/css/bootswatch.min.css
index 235adb79..ea487481 100644
--- a/assets/css/bootswatch.min.css
+++ b/assets/css/bootswatch.min.css
@@ -1 +1 @@
-body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background-color:#1c2533;background:-webkit-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-o-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-ms-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-moz-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:linear-gradient(20deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background-attachment:fixed;color:#fff;text-align:center}.splash .alert{margin:4em 0 2em}.splash h1{font-size:4em}.splash #social{margin:2em 0 4em}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(0,0,0,0.1);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1;border:1px solid rgba(0,0,0,0.1);border-radius:6px}.section-preview .preview .image{padding:5px}.section-preview .preview .image img{border:1px solid rgba(0,0,0,0.1)}.section-preview .preview .options{text-align:center;padding:0 2em 2em}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor img{border:1px solid rgba(0,0,0,0.1);border-radius:4px}.sponsor a:hover{text-decoration:none}.bsa{padding:0}.bsa .one .bsa_it_ad{border:none !important;background-color:transparent !important}.bsa .one .bsa_it_ad .bsa_it_t,.bsa .one .bsa_it_ad .bsa_it_d{color:inherit !important}.bsa .one .bsa_it_ad .bsa_it_i{margin-bottom:0 !important}.bsa .one .bsa_it_p{display:none}
\ No newline at end of file
+body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background-color:#1c2533;background:-webkit-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-o-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-ms-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-moz-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:linear-gradient(20deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background-attachment:fixed;color:#fff;text-align:center}.splash .alert{margin:4em 0 2em}.splash h1{font-size:4em}.splash #social{margin:2em 0 4em}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(0,0,0,0.1);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1;border:1px solid rgba(0,0,0,0.1);border-radius:6px}.section-preview .preview .image{padding:5px}.section-preview .preview .image img{border:1px solid rgba(0,0,0,0.1)}.section-preview .preview .options{text-align:center;padding:0 2em 2em}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor img{border:1px solid rgba(0,0,0,0.1);border-radius:4px}.sponsor a:hover{text-decoration:none}.bsa{padding:0}.bsa .one .bsa_it_ad{border:none !important;background-color:transparent !important}.bsa .one .bsa_it_ad .bsa_it_t,.bsa .one .bsa_it_ad .bsa_it_d{color:inherit !important}.bsa .one .bsa_it_ad .bsa_it_i{margin-bottom:0 !important}.bsa .one .bsa_it_p{display:none}
\ No newline at end of file
diff --git a/assets/js/bootswatch.js b/assets/js/bootswatch.js
index 3785411c..2f80654b 100644
--- a/assets/js/bootswatch.js
+++ b/assets/js/bootswatch.js
@@ -1 +1,39 @@
-$('[data-toggle="tooltip"]').tooltip();
\ No newline at end of file
+(function(){
+
+  var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>").click(function(){
+    var html = $(this).parent().html();
+    html = cleanSource(html);
+    $("#source-modal pre").text(html);
+    $("#source-modal").modal();
+  });
+
+  $(".bs-component").hover(function(){
+    $(this).append($button);
+    $button.show();
+  }, function(){
+    $button.hide();
+  });
+
+  function cleanSource(html) {
+    var lines = html.split(/\n/);
+
+    lines.shift();
+    lines.splice(-1, 1);
+
+    var indentSize = lines[0].length - lines[0].trim().length,
+        re = new RegExp(" {" + indentSize + "}");
+
+    lines = lines.map(function(line){
+      if (line.match(re)) {
+        line = line.substring(indentSize);
+      }
+
+      return line;
+    });
+
+    lines = lines.join("\n");
+
+    return lines;
+  }
+
+})();
diff --git a/assets/less/bootswatch.less b/assets/less/bootswatch.less
index 802888eb..dee364c5 100644
--- a/assets/less/bootswatch.less
+++ b/assets/less/bootswatch.less
@@ -17,6 +17,22 @@ body {
   margin-top: 8em;
 }
 
+.bs-component {
+  position: relative;
+}
+
+#source-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  font-weight: bold;
+}
+
+.progress {
+  margin-bottom: 10px;
+}
+
 footer {
   margin: 5em 0;