livingstyleguide 2.0.0.alpha.10 → 2.0.0.alpha.11

data/lib/livingstyleguide/integration.rb

@@ -1,4 +1,4 @@
-require 'livingstyleguide/integration/compass'
-require 'livingstyleguide/integration/rails'
-require 'livingstyleguide/integration/sprockets'
-require 'livingstyleguide/integration/sass'
+require "livingstyleguide/integration/compass"
+require "livingstyleguide/integration/rails"
+require "livingstyleguide/integration/sprockets"
+require "livingstyleguide/integration/sass"

data/lib/livingstyleguide/integration/compass.rb

@@ -1,5 +1,4 @@
 if defined?(Compass)
-  base_directory = File.join(File.dirname(__FILE__), '..', '..', '..')
-  Compass::Frameworks.register 'livingstyleguide', path: base_directory
+  base_directory = File.join(File.dirname(__FILE__), "..", "..", "..")
+  Compass::Frameworks.register "livingstyleguide", path: base_directory
 end
-

data/lib/livingstyleguide/integration/rails.rb

@@ -1,12 +1,9 @@
 if defined?(Rails) and defined?(Rails::Railtie)
-
-  require 'rails'
+  require "rails"
   class LivingStyleGuideRailtie < Rails::Railtie
-    initializer 'living_style_guide.assets' do
-      Rails.application.assets.register_engine('.lsg', ::LivingStyleGuide::Document)
+    initializer "living_style_guide.assets" do
+      Rails.application.assets.register_engine(".lsg", ::LivingStyleGuide::Document)
       LivingStyleGuide.default_options[:scss_template] = ::Sass::Rails::ScssTemplate
     end
   end
-
 end
-

data/lib/livingstyleguide/integration/sass.rb

@@ -1,4 +1,4 @@
-sass_directory = File.join(File.dirname(__FILE__), '..', '..', '..', 'stylesheets')
+sass_directory = File.join(File.dirname(__FILE__), "..", "..", "..", "stylesheets")
 if ENV.has_key?("SASS_PATH")
   ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + sass_directory
 else

data/lib/livingstyleguide/integration/sprockets.rb

@@ -1,6 +1,5 @@
 begin
-  require 'sprockets'
-  Sprockets.register_engine('.lsg', ::LivingStyleGuide::Document)
+  require "sprockets"
+  Sprockets.register_engine(".lsg", ::LivingStyleGuide::Document)
 rescue LoadError
 end
-

data/lib/livingstyleguide/markdown_extensions.rb

@@ -1,7 +1,7 @@
-require 'redcarpet'
-require 'tilt'
-require 'minisyntax'
-require 'erb'
+require "redcarpet"
+require "tilt"
+require "minisyntax"
+require "erb"
 
 module LivingStyleGuide
   REDCARPET_RENDER_OPTIONS = {
@@ -16,7 +16,7 @@ module LivingStyleGuide
   class RedcarpetHTML < ::Redcarpet::Render::HTML
     def initialize(options = {}, document)
       @options = options
-      @options[:prefix] ||= 'lsg--'
+      @options[:prefix] ||= "lsg--"
       @document = document
       @header = nil
       @ids = {}
@@ -45,7 +45,7 @@ module LivingStyleGuide
 
     def block_code(code, language)
       language = language.to_s.strip.to_sym
-      language = @options[:default_language] if language == :''
+      language = @options[:default_language] if language == :""
       document = Document.new(livingstyleguide: @document) { code }
       document.id = document_id
       document.type = language == :example ? @document.defaults[:global][:type] : language
@@ -60,10 +60,10 @@ module LivingStyleGuide
 
     private
     def slug(text)
-      require 'active_support/core_ext/string/inflections'
-      ::ActiveSupport::Inflector.parameterize(text, '-')
+      require "active_support/core_ext/string/inflections"
+      ::ActiveSupport::Inflector.parameterize(text, "-")
     rescue LoadError
-      text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, '-').gsub(/^-|-$/, '')
+      text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, "-").gsub(/^-|-$/, "")
     end
 
     private

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

@@ -1,3 +1,3 @@
-<section class="<%= classes.join(' ') %>" id="<%= id %>">
+<section class="<%= classes.join(" ") %>" id="<%= id %>">
   <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
 </section>

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

@@ -1,4 +1,4 @@
-<section class="<%= classes.join(' ') %>" id="<%= id %>">
+<section class="<%= classes.join(" ") %>" id="<%= id %>">
   <div class="lsg--html">
     <%= html %>
   </div>

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

@@ -1,4 +1,4 @@
-<section class="<%= classes.join(' ') %>" id="<%= id %>">
+<section class="<%= classes.join(" ") %>" id="<%= id %>">
   <script><%= html %></script>
   <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
 </section>

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

@@ -9,7 +9,8 @@
 <title><%= ERB::Util.h(title) %></title>
 <script>
 // see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
-for(var e,l='article aside footer header nav section time picture'.split(' ');e=l.pop();document.createElement(e));
+for(var e,l="article aside footer header nav section time picture".split(" ");e=l.pop();document.createElement(e));
+<%= javascript %>
 </script>
 <style>
 <%= css %>
@@ -19,9 +20,20 @@ for(var e,l='article aside footer header nav section time picture'.split(' ');e=
 
 <body class="livingstyleguide">
 <%= header %>
+<% unless before.empty? %>
+  <section class="lsg--before">
+  <%= before %>
+  </section>
+<% end %>
 <div class="lsg--container">
 <%= html %>
 </div>
+<% unless after.empty? %>
+  <section class="lsg--after">
+  <%= after %>
+  </section>
+<% end %>
+
 <%= footer %>
 </body>
 

data/lib/livingstyleguide/templates/scripts/copy.js.erb

@@ -0,0 +1,24 @@
+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;
+  }
+}

data/lib/livingstyleguide/templates/scripts/copy_code.js.erb

@@ -0,0 +1,19 @@
+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;
+}

data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+  if (testCopy()) {
+    var colorSwatches = document.getElementsByClassName("lsg--color-swatch");
+    for (var i = 0; i < colorSwatches.length; i++) {
+      if (!colorSwatches[i].classList.contains("-lsg-empty")) {
+        colorSwatches[i].appendChild(createSpan());
+        colorSwatches[i].addEventListener("click", function(event) {
+          if (event.altKey) {
+            var copyHexColors = window.getComputedStyle(this, ":after").getPropertyValue("content");
+            copyHexColors = copyHexColors.replace(/'/g, "");
+            selectElementRange(createDiv(copyHexColors));
+          }
+          else {
+            selectElementRange(this.children[0]);
+          }
+        });
+      }
+    }
+  }
+});
+
+function createDiv(copyHexColors) {
+  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";
+  spanHover.appendChild(document.createTextNode("Click to copy variable\nAlt + click to copy HEX code"));
+  return spanHover;
+}

data/lib/livingstyleguide/templates/scripts/search.js.erb

@@ -0,0 +1,66 @@
+function hasClass(element, cls) {
+  return element.classList.contains(cls);
+}
+
+function addMatch(matched, node) {
+  if (node.nodeType !== Node.TEXT_NODE) {
+    if (node.className.match(/lsg--/)) {
+      matched.push(node);
+    }
+  }
+}
+
+function addNextElement(selection, matched, i) {
+  var j = i + 1;
+  while (j < selection.length) {
+    if (hasClass(selection[j], "lsg--headline")) {
+      break;
+    }
+    addMatch(matched, selection[j]);
+    j++;
+  }
+}
+
+function addPreviousElement(selection, matched, i) {
+  var j = i;
+  while (j >= 0) {
+    addMatch(matched, selection[j]);
+    if (hasClass(selection[j], "lsg--headline")) {
+      break;
+    }
+    j--;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+
+  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(element) {
+      return matched.indexOf(element) === -1;
+    });
+
+    unmatched.map(function(item) {
+      item.style.display = "none";
+    });
+
+    matched.map(function(item) {
+      item.style.display = "block";
+    });
+  });
+});

data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb

@@ -0,0 +1,53 @@
+(function(win) {
+  var getClasses = function(el) {
+    return el.className.split(/\s+/g);
+  };
+
+  var addClass = function(el, name) {
+    var classList = getClasses(el);
+    if (classList.indexOf(name) == -1) {
+      classList.push(name);
+      el.className = classList.join(" ");
+    }
+  };
+
+  var removeClass = function(el, name) {
+    var classList = getClasses(el);
+    classList[classList.indexOf(name)] = null;
+    el.className = classList.join(" ");
+  };
+
+  var toggleClass = function(el, name) {
+    var classList = getClasses(el);
+    if (classList.indexOf(name) == -1) {
+      addClass(el, name);
+      return true;
+    }
+    else {
+      removeClass(el, name);
+      return false;
+    }
+  };
+
+  var html = document.getElementsByTagName("HTML")[0];
+
+  var hideCode = localStorage.getItem("lsg--hide-code");
+
+  if (hideCode == "true") {
+    addClass(html, "lsg--hide-code");
+  }
+
+  function toggleCode(event) {
+    event.preventDefault();
+    var hideCode = toggleClass(html, "lsg--hide-code");
+    localStorage.setItem("lsg--hide-code", hideCode);
+  }
+
+  document.addEventListener("DOMContentLoaded", function() {
+    var switches = document.getElementsByClassName("lsg--code-switch");
+    for (var i = 0; i < switches.length; i++) {
+      switches[i].addEventListener("click", toggleCode);
+    }
+  });
+
+})(window);

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

@@ -1,68 +1 @@
-<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>
+<input type="search" class="lsg--search-box" placeholder="<%= placeholder %>" autofocus>

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

@@ -0,0 +1 @@
+<input type="button" class="lsg--code-switch">

data/lib/livingstyleguide/version.rb

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

data/stylesheets/_livingstyleguide.scss

@@ -4,7 +4,7 @@ $lsg--layout-selector: body !default;
 
 //// TYPOGRAPHY ////
 
-$lsg--base-font: 'Georgia', 'Times New Roman', serif !default;
+$lsg--base-font: georgia, times new roman, serif !default;
 $lsg--base-font-size: 14px !default;
 $lsg--base-font-weight: normal !default;
 $lsg--base-line-height: 1.4 !default;
@@ -17,7 +17,7 @@ $lsg--sub-headline-font-size: 16px !default;
 $lsg--sub-sub-headline-font-size: $lsg--base-font-size !default;
 $lsg--headline-font-weight: bold !default;
 $lsg--headline-line-height: 1.1 !default;
-$lsg--code-font: Courier, "Courier New", monospace !default;
+$lsg--code-font: courier, courier new, monospace !default;
 $lsg--code-font-size: 12px !default;
 $lsg--code-font-weight: normal !default;
 $lsg--code-line-height: 1.5 !default;
@@ -51,6 +51,8 @@ $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>");
+$lsg--code-switch-hide: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 523.831q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 29.295 0 58.59 1.953l74.214 -128.898q9.765 -15.624 23.436 -17.577 3.906 0 7.812 1.953l50.778 31.248q17.577 7.812 1.953 33.201l-56.637 101.556 -46.872 78.12 -41.013 72.261 -144.522 249.984 -41.013 72.261 -46.872 80.073 -56.637 99.603q-15.624 25.389 -31.248 15.624l-52.731 -31.248q-15.624 -7.812 0 -33.201l48.825 -85.932 -7.812 -3.906q-103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 74.214 46.872 132.804l48.825 -83.979q-9.765 -23.436 -9.765 -48.825 0 -50.778 34.178 -90.815t84.956 -49.802l48.825 -83.979l-17.577 0q-97.65 0 -166.982 65.425t-69.332 159.169zm177.723 294.903l41.013 -70.308l17.577 0q97.65 0 166.982 -65.425t69.332 -159.169q0 -74.214 -46.872 -132.804l62.496 -109.368q1.953 1.953 3.906 2.929t3.906 .977q103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -25.389 0 -58.59 -3.906zm89.838 -154.287l109.368 -189.441q9.765 25.389 9.765 48.825 0 50.778 -34.178 89.838t-84.956 50.778z' fill='#000000'/></svg>");
+$lsg--code-switch-show: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 499.809q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 136.71 1.953 259.749 60.543 103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -136.71 -1.953 -259.749 -60.543 -103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 93.744 69.332 159.169t166.982 65.425 166.982 -65.425 69.332 -159.169 -69.332 -159.169 -166.982 -65.425 -166.982 65.425 -69.332 159.169zm85.932 -.977q0 -59.567 43.943 -101.556t106.439 -41.989 106.439 41.989 43.943 101.556 -43.943 102.532 -106.439 42.966 -106.439 -42.966 -43.943 -102.532z' fill='#000000'/></svg>");
 
 //// BUTTONS ////
 
@@ -64,5 +66,6 @@ $lsg--button-width: $lsg--button-height !default;
 @import "livingstyleguide/content";
 @import "livingstyleguide/code";
 @import "livingstyleguide/color-swatches";
-@import "livingstyleguide/search";
+@import "livingstyleguide/toggle-code";
+@import "livingstyleguide/before";
 @import "livingstyleguide/variables";