anecdote 0.0.16 → 0.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 26b462a7f032dd1c37d9e4cf41611d511b1e5847
-  data.tar.gz: 5ca4283dbc78f3dbaa2b493725c621da361c7dcb
+  metadata.gz: c570f33dea82903f472f26e88cb00bf355bf0584
+  data.tar.gz: 437830f3bd5827d820427e93f7947d26a323587b
 SHA512:
-  metadata.gz: 77dd186bf97e796c51d1a07eecb19ef23261105c789fb88fea3d527e69078766ca89f46b4c75f180d3bfd566cf509f34da48c89c92d446fdce2cf842b28f51a0
-  data.tar.gz: 615fed50651bc8bdc50d16cd17a38dd121e740d3081c658983806ea08186b6c438d61e02114e2f25dbd48f1c6efe768e610f353d93b9ff10d77d255c63ace4c8
+  metadata.gz: a6df8b0488c7c7390bf4aca8a27fdb84a865dbfa1a819d005183d978cc0af4c4b7f3851a66ef68034c751a51115eb6c22e436fb71408288da5b788f80e5afc01
+  data.tar.gz: ab25839c0ef94a2569c89431c4d75a1841ac489a280534053a437ecc73bef64c3968109c811ce00ea068e62cf855867b30c9d22e12377270ca6a3314670d3ffc

data/app/assets/stylesheets/anecdote/_helpers.css.scss

@@ -1,5 +1,12 @@
 
 $remify-baseline: 16 !default;
+$anecdote-spacing-an4a2q: (
+  tiny: 0.15,
+  small: 0.6,
+  standard: 1,
+  big: 2.5,
+  mega: 4
+);
 $respond-devices: (
   medium-handheld: 350px,
   large-handheld: 450px,

data/app/assets/stylesheets/anecdote/_wysicontent.css.scss

@@ -4,31 +4,45 @@
 --------------------------------------------------- */
 
 .anecdote-wysicontent-ndj4ab {
-  > *:first-child {
-    margin-top: 0;
-  }
-  > *:last-child {
-    margin-bottom: 0;
+  > *, > .anecdote-title-an4a2q.v-size-h1, > .anecdote-title-an4a2q.v-size-h2, > .anecdote-title-an4a2q.v-size-h3, > .anecdote-title-an4a2q.v-size-h4, > .anecdote-title-an4a2q.v-size-h5, > .anecdote-title-an4a2q.v-size-h6, > .anecdote-title-an4a2q.v-size-p {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
-  > p, > ul, > ol, > blockquote, > pre {
+  > p, > ul, > ol, > blockquote, > pre, > .anecdote-title-an4a2q.v-size-p {
+    font-weight: 400;
     @include formatted-text( 1, 1, 1 );
   }
-  > h1, > h2, > h3, > h4 {
+  > h1, > h2, > h3, > h4, > h5, > h6, > .anecdote-title-an4a2q.v-size-h1, > .anecdote-title-an4a2q.v-size-h2, > .anecdote-title-an4a2q.v-size-h3, > .anecdote-title-an4a2q.v-size-h4, > .anecdote-title-an4a2q.v-size-h5, > .anecdote-title-an4a2q.v-size-h6 {
     font-weight: 600;
   }
-  > h1 {
-    @include formatted-text( 2 );
+  > h1, > .anecdote-title-an4a2q.v-size-h1 {
+    @include formatted-text( 2, 3 );
+    font-style: normal;
   }
-  > h2 {
+  > h2, > .anecdote-title-an4a2q.v-size-h2 {
     @include formatted-text( 1.55, 3 );
+    font-style: normal;
   }
-  > h3 {
+  > h3, > .anecdote-title-an4a2q.v-size-h3 {
     @include formatted-text( 1.3, 3 );
+    font-style: normal;
   }
-  > h4 {
+  > h4, > .anecdote-title-an4a2q.v-size-h4 {
     @include formatted-text( 1.15, 3 );
     font-style: italic;
   }
+  > h5, > .anecdote-title-an4a2q.v-size-h5 {
+    @include formatted-text( 1.1, 3 );
+    font-style: italic;
+  }
+  > h6, > .anecdote-title-an4a2q.v-size-h6 {
+    @include formatted-text( 1.05, 3 );
+    font-style: italic;
+  }
   > code, > pre {
     font-family: monospace;
   }
@@ -82,7 +96,7 @@
 --- generic styles for images, pullquotes, asides, etc
 --------------------------------------------------- */
 .anecdote-module-3ba83n {
-  @include remify( margin-top margin-bottom, 1 );
+  @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
   @include margin-horizontal( auto );
 
   // sizes
@@ -265,28 +279,9 @@
 
 
 /*---------------------------------------------------
---- Anecdote: Spacing & Horizontal Lines
+--- Anecdote: Horizontal Lines
 --------------------------------------------------- */
 
-.anecdote-spacing-an4a2q {
-  height: 1px;
-  width: 100%;
-  display: block;
-  @include remify( margin-top margin-bottom, 1.2 );
-  &.v-tiny {
-    @include remify( margin-top margin-bottom, 0.15 );
-  }
-  &.v-small {
-    @include remify( margin-top margin-bottom, 0.6 );
-  }
-  &.v-big {
-    @include remify( margin-top margin-bottom, 2.5 );
-  }
-  &.v-mega {
-    @include remify( margin-top margin-bottom, 4 );
-  }
-}
-
 .anecdote-horizontal-line-asj31a {
   width: 100%;
   display: block;
@@ -309,6 +304,72 @@
   }
 }
 
+
+/*---------------------------------------------------
+--- Anecdote: Spacing
+--------------------------------------------------- */
+
+.anecdote-spacing-an4a2q {
+  height: 1px;
+  width: 100%;
+  display: block;
+  @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
+  &.v-tiny {
+    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, tiny) );
+  }
+  &.v-small {
+    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, small) );
+  }
+  &.v-big {
+    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, big) );
+  }
+  &.v-mega {
+    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, mega) );
+  }
+}
+
+.anecdote-adhoc-spacing-an4a2q {
+  &, .anecdote-wysicontent-ndj4ab > & {
+    &.an4a2q-v-none-top {
+      @include remify( margin-top, 0 );
+    }
+    &.an4a2q-v-none-bottom {
+      @include remify( margin-bottom, 0 );
+    }
+    &.an4a2q-v-tiny-top {
+      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, tiny) );
+    }
+    &.an4a2q-v-tiny-bottom {
+      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, tiny) );
+    }
+    &.an4a2q-v-small-top {
+      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, small) );
+    }
+    &.an4a2q-v-small-bottom {
+      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, small) );
+    }
+    &.an4a2q-v-standard-top {
+      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, standard) );
+    }
+    &.an4a2q-v-standard-bottom {
+      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
+    }
+    &.an4a2q-v-big-top {
+      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, big) );
+    }
+    &.an4a2q-v-big-bottom {
+      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, big) );
+    }
+    &.an4a2q-v-mega-top {
+      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, mega) );
+    }
+    &.an4a2q-v-mega-bottom {
+      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, mega) );
+    }
+  }
+}
+
+
 /*---------------------------------------------------
 --- Anecdote: Font Styles & Sizes
 --------------------------------------------------- */

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.0.16"
+  VERSION = "0.0.17"
 end

data/lib/anecdote.rb

@@ -172,6 +172,29 @@ module Anecdote
         view_context.content_tag(:div, nil, class: klasses.flatten.join(' '))
       end
       })
+
+    raconteur.processors.register!('title', {
+      handler: lambda do |settings|
+        klasses = ['anecdote-title-an4a2q']
+        klasses += spacing_classes(settings)
+        supported_sizes = %w(h1 h2 h3 h4 h5 h6 p)
+        # visual hierarchy, i.e. determines CSS / rendering
+        if supported_sizes.include?(settings[:size])
+          klasses << "v-size-#{settings[:size]}"
+        else
+          tag = 'v-size-h1'
+        end
+        # semantic hierarchy, i.e. determines HTML tag (if undefined, fall back on visual hierarchy)
+        if settings[:tag].present?
+          tag = settings[:tag]
+        elsif supported_sizes.include?(settings[:size])
+          tag = settings[:size]
+        else
+          tag = 'h1'
+        end
+        view_context.content_tag(tag, markdown_and_parse(settings[:text]).gsub(/^\<\/?\w+>|\<\/?\w+>$/i, '').html_safe, id: settings[:anchor], class: klasses.flatten.join(' '))
+      end
+      })
   end
 
 
@@ -228,8 +251,41 @@ module Anecdote
     klasses
   end
 
+  def self.spacing_classes(settings)
+    klasses = []
+    css_base = 'anecdote-adhoc-spacing-an4a2q'
+    css = {
+      none: 'an4a2q-v-none',
+      tiny: 'an4a2q-v-tiny',
+      small: 'an4a2q-v-small',
+      standard: 'an4a2q-v-standard',
+      big: 'an4a2q-v-big',
+      mega: 'an4a2q-v-mega'
+    }
+    supported_sizes = css.keys.map(&:to_s)
+    # both top and bottom
+    if settings[:spacing].present? && supported_sizes.include?(settings[:spacing])
+      klasses << css_base
+      klasses << ["#{css[settings[:spacing].to_sym]}-top", "#{css[settings[:spacing].to_sym]}-bottom"]
+    end
+    # top only
+    if settings[:spacing_before].present? && supported_sizes.include?(settings[:spacing_before])
+      klasses << css_base
+      klasses << "#{css[settings[:spacing_before].to_sym]}-top"
+    end
+    # bottom only
+    if settings[:spacing_after].present? && supported_sizes.include?(settings[:spacing_after])
+      klasses << css_base
+      klasses << "#{css[settings[:spacing_after].to_sym]}-bottom"
+    end
+    # flatten (in case of generic setting, which produces a nested array)
+    # uniq (in case of individual top and bottom settings)
+    klasses.flatten.compact.uniq
+  end
+
   def self.module_classes(settings)
     klasses = %w(anecdote-module-3ba83n)
+    klasses += spacing_classes(settings)
     klasses << case settings[:font_family]
     when 'primary' then 'anecdote-primary-font-a3a8fb'
     when 'secondary' then 'anecdote-secondary-font-a3a8fb'
@@ -278,7 +334,7 @@ module Anecdote
       when 'negative' then 'v-mood-negative'
       end
     end
-    klasses.compact
+    klasses.flatten.compact.uniq
   end
 
 

data/test/dummy/app/assets/stylesheets/application.css.scss

@@ -34,10 +34,10 @@ $remify-baseline: 20;
 --- content blocks of formatted text and modules
 --------------------------------------------------- */
 .anecdote-wysicontent-ndj4ab {
-  > h1, > h2, > h3, > h4 {
+  > h1, > h2, > h3, > h4, > h5, > h6, > .anecdote-title-an4a2q.v-size-h1, > .anecdote-title-an4a2q.v-size-h2, > .anecdote-title-an4a2q.v-size-h3, > .anecdote-title-an4a2q.v-size-h4, > .anecdote-title-an4a2q.v-size-h5, > .anecdote-title-an4a2q.v-size-h6 {
     @include secondary-font;
   }
-  > h1, > h2, > h3, > h4, > p, > ul, > ol, > blockquote, > pre {
+  > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > blockquote, > pre {
     @include centered-standard-width;
     strong {
       font-weight: 600;