livingstyleguide 2.0.0.alpha.9 → 2.0.0.alpha.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e03cd21e33364ddfbf67d1a6d9f9c76e07d44ba2
-  data.tar.gz: 7f1ebb09b674d7846a915b3fb8547c9e191e62eb
+  metadata.gz: ba96e42a926901d8cd5997497cec4602f05f179c
+  data.tar.gz: b2e505615ea2fdcb6e5d6112bc8fe1d4c69b41ca
 SHA512:
-  metadata.gz: 532de7e59bd8e913945e6983bf635533f662c9cc702ce1b086dccc2a33dbd64aa4e0359520272cbc5afde6e64e304aaa698ac2ebb3dc0aa742377653cd19c9a3
-  data.tar.gz: 68cad8cb19c4cc277794f312fac26d010bd3018a239f8610c06cf18a363859574fe31014b05f8e00ba9a549285daec12453a78e342542372ae53726871758f35
+  metadata.gz: 8f9fac2110874728aad315e163252dec08023263415490220151b45ac208a53ab5ac2d7a9c1b390ff6f734789ed568460e75bb8c9cbb48f7ece2eb649fa1247c
+  data.tar.gz: d3f407cef912bb92a79cf0f80ffe98a7ddb75ee5b740e28a241550f813f968cc0999d1ca6ba7d296abdddffd9e45745952c9d3d61be5f67a883957f2e7bc546f

data/lib/livingstyleguide/document.rb

@@ -38,7 +38,11 @@ class LivingStyleGuide::Document < ::Tilt::Template
     @scss = ''
     @css = ''
     @locals = {}
-    @defaults = { global: {} }
+    @defaults = {
+      global: {
+        type: :html
+      }
+    }
   end
 
   def highlighted_source
@@ -81,6 +85,9 @@ class LivingStyleGuide::Document < ::Tilt::Template
 
   def evaluate(scope, locals, &block)
     @head = ""
+    @head << ERB.new(File.read("#{File.dirname(__FILE__)}/templates/javascript-copy.html.erb")).result(binding)
+    @head << ERB.new(File.read("#{File.dirname(__FILE__)}/templates/code-example.html.erb")).result(binding)
+    @head << ERB.new(File.read("#{File.dirname(__FILE__)}/templates/colors-example.html.erb")).result(binding)
     @header = ""
     @footer = ""
     @scope = scope

data/lib/livingstyleguide/filters.rb

@@ -35,3 +35,4 @@ require 'livingstyleguide/filters/style'
 require 'livingstyleguide/filters/data'
 require 'livingstyleguide/filters/layout'
 require 'livingstyleguide/filters/syntax'
+require 'livingstyleguide/filters/search_box'

data/lib/livingstyleguide/filters/colors.rb

@@ -3,8 +3,6 @@ LivingStyleGuide.add_filter :colors do |arguments, options, content|
   columns = colors.map{ |l| l.size }.max
   colors = colors.flatten
 
-  document.head << ERB.new(File.read("#{File.dirname(__FILE__)}/../templates/colors-example.html.erb")).result
-
   document.scss << <<-SCSS
     $lsg--variables: () !default;
     $lsg--variables: join(
@@ -15,11 +13,12 @@ LivingStyleGuide.add_filter :colors do |arguments, options, content|
       })
     );
   SCSS
+
   colors_html = colors.map do |variable|
-    if variable == '-'
-      css_class = '-lsg-empty'
-    end
-      %Q(<li class="lsg--color-swatch #{css_class || variable}"><span>#{variable}</span></li>\n)
-    end.join("\n")
-      %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
+    if variable == "-"
+      css_class = "-lsg-empty"
     end
+    %Q(<li class="lsg--color-swatch #{css_class || variable}"><span>#{variable}</span></li>\n)
+  end.join("\n")
+  %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
+end

data/lib/livingstyleguide/filters/css.rb

@@ -7,7 +7,7 @@ LivingStyleGuide.add_filter :css do |arguments, options, css|
     document.depend_on file
     document.scss << %Q(@import "#{file}";\n)
   else
-    scope = "#" + document.id.gsub(/[\/\.]/, '\\\0')
+    scope = "#" + document.id.gsub(/[\/\.]/, '\\\\\0')
     scoped_css = css.gsub(/(?<=\}|\A|;)[^@\};]+?(?=\{)/) do |selector|
       selector.split(",").map do |single_selector|
         "#{scope} #{single_selector}"

data/lib/livingstyleguide/filters/layout.rb

@@ -22,10 +22,9 @@ end
 %w(head header footer).each do |part|
   eval <<-RUBY
     LivingStyleGuide.add_filter :#{part} do |arguments, options, block|
-      if template = Tilt[options[:type]]
-        block = template.new{ block }.render
-      end
-      document.#{part} << block + "\n"
+      html = LivingStyleGuide::Document.new(livingstyleguide: document) { block }
+      html.type = options[:type]
+      document.#{part} << html.render + "\n"
       nil
     end
   RUBY

data/lib/livingstyleguide/filters/sass.rb

@@ -7,7 +7,7 @@ LivingStyleGuide.add_filter :scss do |arguments, options, scss|
     document.depend_on file
     document.scss << %Q(@import "#{file}";\n)
   else
-    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\0')} {\n#{scss}\n}\n"
+    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\\\0')} {\n#{scss}\n}\n"
   end
   nil
 end
@@ -22,7 +22,7 @@ LivingStyleGuide.add_filter :sass do |arguments, options, sass|
     document.scss << %Q(@import "#{file}";\n)
   else
     scss = Sass::Engine.new(sass).to_tree.to_scss
-    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\0')} {\n#{scss}\n}\n"
+    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\\\0')} {\n#{scss}\n}\n"
   end
   nil
 end

data/lib/livingstyleguide/filters/search_box.rb

@@ -0,0 +1,9 @@
+LivingStyleGuide.default_options[:search_box] = {
+  placeholder: "Search …"
+}
+
+LivingStyleGuide.add_filter :search_box do |arguments, options, content|
+  placeholder = options[:placeholder] || LivingStyleGuide.default_options[:search_box][:placeholder]
+  document.header << ERB.new(File.read("#{File.dirname(__FILE__)}/../templates/search-box.html.erb")).result(binding)
+  nil
+end

data/lib/livingstyleguide/markdown_extensions.rb

@@ -48,7 +48,7 @@ module LivingStyleGuide
       language = @options[:default_language] if language == :''
       document = Document.new(livingstyleguide: @document) { code }
       document.id = document_id
-      document.type = language == :example ? :html : language
+      document.type = language == :example ? @document.defaults[:global][:type] : language
       document.template = template_for(language)
       document.render(@document.scope)
     end

data/lib/livingstyleguide/templates/code-example.html.erb

@@ -0,0 +1,21 @@
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    if (testCopy()) {
+      var code = document.getElementsByClassName("lsg--code");
+
+      for (var i = 0; i < code.length; i++) {
+        var newButton = createButton()
+        code[i].appendChild(newButton)
+        newButton.addEventListener("click", function(event) {
+          selectElementRange(this.parentNode);
+        })
+      }
+    }
+  });
+
+  function createButton(copyCodeSelect) {
+    var buttonCopy = document.createElement("button");
+    buttonCopy.className = "lsg--button";
+    return buttonCopy;
+  }
+</script>

data/lib/livingstyleguide/templates/colors-example.html.erb

@@ -1,14 +1,13 @@
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener("DOMContentLoaded", function() {
     if (testCopy()) {
-      var colorSwatches = document.getElementsByClassName('lsg--color-swatch');
+      var colorSwatches = document.getElementsByClassName("lsg--color-swatch");
       for (var i = 0; i < colorSwatches.length; i++) {
-
-        if (!colorSwatches[i].classList.contains('-lsg-empty')) {
+        if (!colorSwatches[i].classList.contains("-lsg-empty")) {
           colorSwatches[i].appendChild(createSpan());
-          colorSwatches[i].addEventListener('click', function(event) {
+          colorSwatches[i].addEventListener("click", function(event) {
             if (event.altKey) {
-              var copyHexColors = window.getComputedStyle(this, ':after').getPropertyValue('content');
+              var copyHexColors = window.getComputedStyle(this, ":after").getPropertyValue("content");
               copyHexColors = copyHexColors.replace(/'/g, "");
               selectElementRange(createDiv(copyHexColors));
             }
@@ -22,43 +21,18 @@
   });
 
   function createDiv(copyHexColors) {
-    var divCopy = document.createElement('div');
-    divCopy.className = '-lsg-remove';
-    divCopy.setAttribute('style', 'opacity:0; position: absolute; top: -10000px');
+    var divCopy = document.createElement("div");
+    divCopy.className = "-lsg-remove";
+    divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px");
     divCopy.appendChild(document.createTextNode(copyHexColors));
     document.body.appendChild(divCopy);
     return divCopy
   }
 
   function createSpan() {
-    var spanHover = document.createElement('span');
-    spanHover.className = 'lsg--copy-color';
+    var spanHover = document.createElement("span");
+    spanHover.className = "lsg--copy-color";
     spanHover.appendChild(document.createTextNode("Click to copy variable\nAlt + click to copy HEX code"));
     return spanHover
   }
-
-  function selectElementRange(copyElementSelect) {
-    var range = document.createRange();
-    range.selectNode(copyElementSelect);
-    window.getSelection().removeAllRanges();
-    window.getSelection().addRange(range);
-
-    document.execCommand('copy');
-
-    if (copyElementSelect.classList.contains('-lsg-remove')) {
-       document.body.removeChild(copyElementSelect);
-    }
-
-    window.getSelection().removeAllRanges();
-  }
-
-  function testCopy() {
-    try {
-      document.execCommand('copy');
-      return true;
-    }
-    catch(err) {
-      return false;
-    }
-  }
 </script>

data/lib/livingstyleguide/templates/javascript-copy.html.erb

@@ -0,0 +1,26 @@
+<script>
+  function selectElementRange(copyElementSelect) {
+    var range = document.createRange();
+    range.selectNode(copyElementSelect);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+
+    document.execCommand("copy");
+
+    if (copyElementSelect.classList.contains("-lsg-remove")) {
+      document.body.removeChild(copyElementSelect);
+    }
+
+    window.getSelection().removeAllRanges();
+  }
+
+  function testCopy() {
+    try {
+      document.execCommand("copy");
+      return true;
+    }
+    catch(err) {
+      return false;
+    }
+  }
+</script>

data/lib/livingstyleguide/templates/layout.html.erb

@@ -4,6 +4,7 @@
 <head>
 <meta charset="utf-8">
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
 <meta content="The LivingStyleGuide Gem – http://livingstyleguide.org" name="generator">
 <title><%= ERB::Util.h(title) %></title>
 <script>

data/lib/livingstyleguide/templates/search-box.html.erb

@@ -0,0 +1,68 @@
+<div class="lsg--search">
+  <input type="search" class="lsg--search-box" placeholder="<%= placeholder %>" autofocus>
+</div>
+<script>
+  function hasClass(ele, cls) {
+    return ele.classList.contains(cls);
+  }
+
+  function addMatch(matched, node) {
+    if (node.nodeType !== Node.TEXT_NODE) {
+      if (node.className.match(/lsg--/)) {
+        matched.push(node);
+      }
+    }
+  }
+
+  var addNextElement = function(selection, matched, i) {
+    var j = i + 1;
+    while (j < selection.length) {
+      if (hasClass(selection[j], "lsg--headline")) {
+        break;
+      }
+      addMatch(matched, selection[j]);
+      j++;
+    }
+  }
+
+  var addPreviousElement = function(selection, matched, i) {
+    var j = i;
+    while (j >= 0) {
+      addMatch(matched, selection[j]);
+      if (hasClass(selection[j], "lsg--headline")) {
+        break;
+      }
+      j--;
+    }
+  }
+
+  document.querySelector(".lsg--search-box").addEventListener("input", function(event) {
+    var searchTerm = this.value;
+
+    var selection = document.querySelectorAll(".lsg--example, .lsg--color-swatches, .lsg--font-example, .lsg--paragraph, .lsg--unordered-list, .lsg--ordered-list, .lsg--headline, .lsg--sub-headline, .lsg--sub-sub-headline");
+    var regexp = new RegExp(searchTerm, "i");
+    selection = Array.prototype.slice.call(selection);
+    var matched = [];
+    var unmatched = [];
+
+    for (var i = 0; i < selection.length; i++) {
+      if (selection[i].textContent.match(regexp)) {
+        addMatch(matched, selection[i]);
+        addNextElement(selection, matched, i);
+        addPreviousElement(selection, matched, i);
+      };
+    };
+
+    unmatched = selection.filter(function(elem) {
+      return matched.indexOf(elem) === -1;
+    });
+
+    unmatched.map(function(item) {
+      item.style.display = "none";
+    });
+
+    matched.map(function(item) {
+      item.style.display = "block";
+    });
+  });
+</script>

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = '2.0.0.alpha.9'
+  VERSION = '2.0.0.alpha.10'
 end

data/stylesheets/_livingstyleguide.scss

@@ -48,6 +48,15 @@ $lsg--color-swatches-per-line: 2 !default;
 $lsg--highlight-color: #f6ffa3 !default;
 $lsg--highlight-border-radius: 2px;
 
+//// IMAGES - SVG ////
+
+$lsg--copy-background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%' height='100%' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'> <path id='copy-6-icon' d='M360.277,151.999V50.001H50v310.137h102v101.861h310v-310H360.277z M90,320.138V90.001h230.277v61.998 H152v168.139H90z M421.5,421.499h-230V191.832h20.569c10.639,0,20.745,4.656,27.657,12.744l19.023,22.256H358l19.366-22.408 c6.911-7.996,16.958-12.592,27.528-12.592H421.5V421.499z M379.479,338.581h-145.99v-29h145.99V338.581z M379.479,286.249h-145.99 v-29h145.99V286.249z M233.488,361.999h146.023v29H233.488V361.999z'/></svg>");
+
+//// BUTTONS ////
+
+$lsg--button-height: 23px !default;
+$lsg--button-width: $lsg--button-height !default;
+
 //// IMPORTS ////
 
 @import "livingstyleguide/reset";
@@ -55,4 +64,5 @@ $lsg--highlight-border-radius: 2px;
 @import "livingstyleguide/content";
 @import "livingstyleguide/code";
 @import "livingstyleguide/color-swatches";
+@import "livingstyleguide/search";
 @import "livingstyleguide/variables";

data/stylesheets/livingstyleguide/_code.scss

@@ -72,14 +72,20 @@
 }
 
 .lsg--code-block {
-  display: block;//none;
+  display: block;
+  min-height: $lsg--gap-width + $lsg--button-height;
   line-height: $lsg--code-line-height;
   padding: 3px $lsg--gap-width;
-  width: $lsg--width;
+  max-width: $lsg--width;
+  -ms-overflow-style: none;
 
   .show-code & {
     display: block;
   }
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
 }
 
 .lsg--example + .lsg--code-block {
@@ -98,7 +104,27 @@
   .lsg--code {
     display: block;
     margin: auto;
-    width: $lsg--width;
+    max-width: $lsg--width;
+  }
+}
+
+.lsg--button {
+  background-color: $lsg--background-color;
+  background-image: $lsg--copy-background-image;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: 90%;
+  border-radius: $lsg--border-radius;
+  bottom: floor($lsg--gap-width / 2);
+  cursor: pointer;
+  height: $lsg--button-height;
+  position: absolute;
+  right: floor($lsg--gap-width / 2);
+  visibility: hidden;
+  width: $lsg--button-width;
+
+  .lsg--code:hover & {
+    visibility: visible;
   }
 }
 
@@ -121,4 +147,3 @@
   @extend .lsg--code-highlight;
   display: block;
 }
-

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -65,7 +65,7 @@
   margin: $lsg--gap-width auto (-$lsg--gap-width) auto;
   overflow: hidden;
   padding-left: $lsg--gap-width;
-  width: $lsg--width + 2 * $lsg--gap-width;
+  max-width: $lsg--width + 2 * $lsg--gap-width;
 }
 
 @for $i from 1 through 12 {

data/stylesheets/livingstyleguide/_content.scss

@@ -10,7 +10,7 @@
   line-height: $lsg--base-line-height;
   margin: $lsg--gap-width auto;
   text-align: $lsg--base-text-align;
-  width: $lsg--width;
+  max-width: $lsg--width;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -35,7 +35,7 @@
   line-height: $lsg--headline-line-height;
   margin: (3 * $lsg--gap-width) auto $lsg--gap-width;
   text-align: $lsg--headline-text-align;
-  width: $lsg--width;
+  max-width: $lsg--width;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -89,7 +89,7 @@
   overflow: hidden;
   padding: $lsg--gap-width;
   position: relative;
-  width: $lsg--width;
+  max-width: $lsg--width;
 
   &.-lsg-has-full-width {
     @extend #{$lsg--layout-selector} !optional;

data/stylesheets/livingstyleguide/_layout.scss

@@ -14,7 +14,7 @@
   @extend %lsg--reset;
   display: block;
   margin: (4 * $lsg--gap-width) auto;
-  width: $lsg--width;
+  max-width: $lsg--width;
 }
 
 .lsg--logo {
@@ -36,4 +36,3 @@
     filter: unquote("brightness(0.7)");
   }
 }
-

data/stylesheets/livingstyleguide/_reset.scss

@@ -21,4 +21,3 @@
   text-decoration: none;
   vertical-align: baseline;
 }
-

data/stylesheets/livingstyleguide/_search.scss

@@ -0,0 +1,8 @@
+.lsg--search {
+  margin: 0px auto;
+  width: $lsg--width + ($lsg--width / 2);
+}
+
+.lsg--search-box {
+  margin: 2 * $lsg--gap-width $lsg--width + ($lsg--width / 4);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.9
+  version: 2.0.0.alpha.10
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-23 00:00:00.000000000 Z
+date: 2015-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -42,16 +42,16 @@ dependencies:
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: tilt
   requirement: !ruby/object:Gem::Requirement
@@ -224,6 +224,7 @@ files:
 - lib/livingstyleguide/filters/options.rb
 - lib/livingstyleguide/filters/require.rb
 - lib/livingstyleguide/filters/sass.rb
+- lib/livingstyleguide/filters/search_box.rb
 - lib/livingstyleguide/filters/style.rb
 - lib/livingstyleguide/filters/syntax.rb
 - lib/livingstyleguide/filters/type.rb
@@ -233,14 +234,17 @@ files:
 - lib/livingstyleguide/integration/sass.rb
 - lib/livingstyleguide/integration/sprockets.rb
 - lib/livingstyleguide/markdown_extensions.rb
+- lib/livingstyleguide/templates/code-example.html.erb
 - lib/livingstyleguide/templates/code.html.erb
 - lib/livingstyleguide/templates/colors-example.html.erb
 - lib/livingstyleguide/templates/default.html.erb
 - lib/livingstyleguide/templates/example.html.erb
 - lib/livingstyleguide/templates/font-example.html.erb
+- lib/livingstyleguide/templates/javascript-copy.html.erb
 - lib/livingstyleguide/templates/javascript.html.erb
 - lib/livingstyleguide/templates/layout.html.erb
 - lib/livingstyleguide/templates/plain.html.erb
+- lib/livingstyleguide/templates/search-box.html.erb
 - lib/livingstyleguide/version.rb
 - stylesheets/_livingstyleguide.scss
 - stylesheets/livingstyleguide/_code.scss
@@ -248,6 +252,7 @@ files:
 - stylesheets/livingstyleguide/_content.scss
 - stylesheets/livingstyleguide/_layout.scss
 - stylesheets/livingstyleguide/_reset.scss
+- stylesheets/livingstyleguide/_search.scss
 - stylesheets/livingstyleguide/_variables.scss
 homepage: http://livingstyleguide.org
 licenses: []