anecdote 0.0.11 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 731d413c12e7e2df573ec129199e90c23f2b1762
-  data.tar.gz: 8744182c040cca592769fdfab20aeb4b2e2a383e
+  metadata.gz: ff1401eb1c4a1eb66947868960bdee98819e376b
+  data.tar.gz: 9c64c70c1dbd8c7d1f93ebd1f23953462f07b628
 SHA512:
-  metadata.gz: a4857bc8480b415482180e80221f391acd24971e8834785e501c75238a6a361fd72d53b478887064a6ec765be1149418c38226b10a4c78f8ce92427636614abe
-  data.tar.gz: 5a6ced3382c1972bc3c90787186246ca79dea3bfe93a939a78703dd4e492d323eeac448b2eb71b9cd3fc1ddb648dd7f110bc30a09fb3258638739449e1460a24
+  metadata.gz: 47063a277cb0f93e3a5201fe16c43ff35a69850cb84837f65acde576195437fd981b36b6b014e9b65fef806cb03b5ed1b7314c1e3c72bc0a3aba7d9454dccc1f
+  data.tar.gz: c84f53a4f2c5dd8aed9c095076bc854e7bbe1bb646d34618c84912dd12807fb5072a32dca24714bf3c39c9e1e41ea8ea6d48e2811dd9b2b2017cf9976261dfde

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

@@ -129,7 +129,7 @@
       }
     }
   }
-  
+
 }
 
 
@@ -163,30 +163,55 @@
       margin-top: 0;
     }
   }
-  .anecdote-gallery-offset-dn2bak {
-    display: none;
+  .flexbox &.anecdote-flex-module-a4j2aj .flex-scope > .anecdote-module-3ba83n {
+    @include remify( margin-left, 1 );
   }
+}
+
 
+.anecdote-flex-module-a4j2aj {
+  .anecdote-flex-offset-a4j2aj {
+    display: none;
+  }
 
-  @mixin flow-gallery-dn2bak {
+  @mixin flow-modules-an32ka {
     .flexbox & {
-      .anecdote-gallery-offset-dn2bak {
+      .anecdote-flex-offset-a4j2aj {
         display: block;
       }
-      .content {
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        .anecdote-graphic-dn32ja {
-          -webkit-flex: 1 1 auto;
-          -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-          max-width: 100%;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-justify-content: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      > .anecdote-module-3ba83n {
+        -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+        max-width: 100%;
+        margin-top: 0;
+      }
+    }
+    // TODO: support for nested flex modules with custom gutter spacing!
+    > .anecdote-module-3ba83n {
+      .flexbox & {
+        @include remify( margin-left, 2.5 );
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      @include scope-variation( '.v-gutter-spacing-small' ) {
+        .flexbox & {
           @include remify( margin-left, 1 );
-          margin-top: 0;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
+      @include scope-variation( '.v-gutter-spacing-large' ) {
+        .flexbox & {
+          @include remify( margin-left, 4 );
           &:first-child {
             margin-left: 0;
           }
@@ -195,12 +220,12 @@
     }
   }
   &.v-flow-from-always {
-    @include flow-gallery-dn2bak;
+    @include flow-modules-an32ka;
   }
   @each $breakpoint-name, $breakpoint-px in $respond-devices {
     &.v-flow-from-#{$breakpoint-name} {
       @include respond(min, $breakpoint-name) {
-        @include flow-gallery-dn2bak;
+        @include flow-modules-an32ka;
       }
     }
   }

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.0.11"
+  VERSION = "0.0.12"
 end

data/lib/anecdote.rb

@@ -52,96 +52,85 @@ module Anecdote
 
     raconteur.processors.register!('gallery', {
       handler: lambda do |settings|
-        klass = (['anecdote-gallery-dn2bak'] + module_classes(settings)).flatten.join(' ')
+        klasses = ['anecdote-gallery-dn2bak']
+        klasses += module_classes(settings)
         graphics = settings[:_yield_].html_safe
 
         # handle scaling
         flexes = []
-        if settings[:scale_by] == 'relative-width-bottom-alignment'
-          # images scaled based on their relative width with bottom alignment
-          total_width = settings[:_graphics_].sum { |hsh| hsh[:width]}
-          settings[:_graphics_].each do |graphic|
-            flex = {
-              width: graphic[:width] / total_width,
-              graphic: graphic,
-              ratio: graphic[:width] / graphic[:height],
-              gfx_height_pad: graphic[:height] / graphic[:width]
-            }
-            flex[:width_ratio_balance] = flex[:width] / flex[:ratio]
-            flexes << flex
-          end
-          tallest = flexes.sort_by { |k| k[:width_ratio_balance] }.last
-          flexes.map do |flex|
-            flex[:faux] = flex[:width_ratio_balance] / tallest[:width_ratio_balance]
-            flex[:gfx_height_pad_faux] = flex[:gfx_height_pad] / flex[:faux]
-            flex[:top_offset] = flex[:gfx_height_pad_faux] - flex[:gfx_height_pad]
-          end
-          index = 0
-          graphics.gsub!('<div class="anecdote-intrinsic-embed-n42ha1">') do |match|
-            flex = flexes[index]
-            index += 1
-            (view_context.content_tag(:div, '', class: 'anecdote-gallery-offset-dn2bak', style: "padding-top: #{flex[:top_offset] * 100}%;").html_safe + match.html_safe).html_safe
-          end
-          # graphics.gsub!(/anecdote-intrinsic-embed-n42ha1.*?padding-bottom:\s*([\d|\.]*)/mi) do |match|
-          #   flex = flexes[index]
-          #   index += 1
-          #   match.sub(/[\d|\.]*$/, (flex[:gfx_height_pad_faux] * 100).to_s).html_safe
-          # end
-        elsif settings[:scale_by] == 'relative-width'
-          # images scaled based on their relative width
-          total_width = settings[:_graphics_].sum { |hsh| hsh[:width]}
-          settings[:_graphics_].each do |graphic|
-            flexes << { width: graphic[:width] / total_width, graphic: graphic }
-          end
-        else
-          # images scaled to equal height
-          total_ratio = settings[:_graphics_].sum { |geo| geo[:width] / geo[:height] }
-          settings[:_graphics_].each do |graphic|
-            flexes << { width: (graphic[:width] / graphic[:height]) / total_ratio, graphic: graphic }
-          end
-        end
-        index = 0
-        graphics.gsub!(/class="[^"]*?anecdote-graphic-dn32ja[\s|"]/mi) do |match|
-          flex = flexes[index]
-          index += 1
-          styles = []
-          if flex[:width].present?
-            styles << "-webkit-flex-basis:#{flex[:width] * 100}%"
-            styles << "-moz-flex-basis:#{flex[:width] * 100}%"
-            styles << "flex-basis:#{flex[:width] * 100}%"
-          end
-          "style=\"#{styles.join(';')}\" #{match}".html_safe
-        end
-
-        # flow-points
-        flow_from_klass = case settings[:flow_from]
-        when 'always' then 'v-flow-from-always'
-        when 'medium-handheld' then 'v-flow-from-medium-handheld'
-        when 'large-handheld' then 'v-flow-from-large-handheld'
-        when 'tablet' then 'v-flow-from-tablet'
-        when 'laptop' then 'v-flow-from-laptop'
-        when 'large-monitor' then 'v-flow-from-large-monitor'
+        if settings[:flexes]
+          flexes = parse_custom_flexes(settings)
         else
-          if settings[:size].present?
-            case settings[:size]
-            when 'small' then 'v-flow-from-medium-handheld'
-            when 'medium' then 'v-flow-from-large-handheld'
-            when 'big' then 'v-flow-from-tablet'
-            when 'full-width' then 'v-flow-from-tablet'
+          if settings[:scale_by] == 'relative-width-bottom-alignment'
+            # images scaled based on their relative width with bottom alignment
+            total_width = settings[:_graphics_].sum { |hsh| hsh[:width]}
+            settings[:_graphics_].each do |graphic|
+              flex = {
+                width: graphic[:width] / total_width,
+                graphic: graphic,
+                ratio: graphic[:width] / graphic[:height],
+                gfx_height_pad: graphic[:height] / graphic[:width]
+              }
+              flex[:width_ratio_balance] = flex[:width] / flex[:ratio]
+              flexes << flex
+            end
+            tallest = flexes.sort_by { |k| k[:width_ratio_balance] }.last
+            flexes.map do |flex|
+              flex[:faux] = flex[:width_ratio_balance] / tallest[:width_ratio_balance]
+              flex[:gfx_height_pad_faux] = flex[:gfx_height_pad] / flex[:faux]
+              flex[:top_offset] = flex[:gfx_height_pad_faux] - flex[:gfx_height_pad]
+            end
+            index = 0
+            graphics.gsub!('<div class="anecdote-intrinsic-embed-n42ha1">') do |match|
+              flex = flexes[index]
+              index += 1
+              (view_context.content_tag(:div, '', class: 'anecdote-flex-offset-a4j2aj', style: "padding-top: #{flex[:top_offset] * 100}%;").html_safe + match.html_safe).html_safe
+            end
+            # graphics.gsub!(/anecdote-intrinsic-embed-n42ha1.*?padding-bottom:\s*([\d|\.]*)/mi) do |match|
+            #   flex = flexes[index]
+            #   index += 1
+            #   match.sub(/[\d|\.]*$/, (flex[:gfx_height_pad_faux] * 100).to_s).html_safe
+            # end
+          elsif settings[:scale_by] == 'relative-width'
+            # images scaled based on their relative width
+            total_width = settings[:_graphics_].sum { |hsh| hsh[:width]}
+            settings[:_graphics_].each do |graphic|
+              flexes << { width: graphic[:width] / total_width, graphic: graphic }
             end
           else
-            'v-flow-from-tablet' # default
+            # images scaled to equal height
+            total_ratio = settings[:_graphics_].sum { |geo| geo[:width] / geo[:height] }
+            settings[:_graphics_].each do |graphic|
+              flexes << { width: (graphic[:width] / graphic[:height]) / total_ratio, graphic: graphic }
+            end
           end
         end
-        klass += " #{flow_from_klass}"
+        graphics = insert_flex_basis_styles(graphics, flexes)
 
         # build HTML output
         contents = []
-        contents << view_context.content_tag(:div, graphics.html_safe, class: 'content')
+        settings[:gutter_spacing] = 'small' if settings[:gutter_spacing].blank?
+        contents << view_context.content_tag(:div, graphics.html_safe, class: (['content'] + flex_classes(settings)).flatten.join(' '))
         if settings[:caption].present?
           contents << view_context.content_tag(:div, view_context.content_tag(:div, markdown_and_parse(settings[:caption]), class: 'inner anecdote-wysicontent-ndj4ab'), class: 'anecdote-caption-ajkd3b')
         end
-        view_context.content_tag(:div, view_context.content_tag(:div, contents.join("\n").html_safe, class: 'inner'), class: klass)
+        view_context.content_tag(:div, view_context.content_tag(:div, contents.join("\n").html_safe, class: 'inner'), class: klasses.flatten.join(' '))
+      end
+      })
+
+    raconteur.processors.register!('columns', {
+      handler: lambda do |settings|
+        klasses = ['anecdote-columns-nab3a2']
+        klasses += module_classes(settings)
+        columns = insert_flex_basis_styles(settings[:_yield_].html_safe, parse_custom_flexes(settings))
+        view_context.content_tag(:div, view_context.content_tag(:div, columns.html_safe, class: (['inner'] + flex_classes(settings)).flatten.join(' ')), class: klasses.flatten.join(' '))
+      end
+      })
+
+    raconteur.processors.register!('anecdote', {
+      handler: lambda do |settings|
+        klass = (['anecdote-inception-ab2a8j'] + module_classes(settings)).flatten.join(' ')
+        view_context.content_tag(:div, view_context.content_tag(:div, markdown_and_parse(settings[:_yield_]), class: 'anecdote-wysicontent-ndj4ab inner'), class: klass)
       end
       })
 
@@ -153,6 +142,60 @@ module Anecdote
       })
   end
 
+
+  def self.parse_custom_flexes(settings)
+    ratios = settings[:flexes].split(':').map(&:to_i)
+    sum = ratios.inject(&:+)
+    flexes = ratios.map { |ratio| { width: ratio.to_f / sum } }
+  end
+  def self.insert_flex_basis_styles(html_content, flexes)
+    index = 0
+    doc = Nokogiri::HTML::DocumentFragment.parse(html_content)
+    doc.elements.each do |element|
+      if element.attributes['class'].present? && element.attributes['class'].value.split(' ').include?('anecdote-module-3ba83n')
+        flex = flexes[index]
+        index += 1
+        styles = []
+        if flex[:width].present?
+          styles << "-webkit-flex-basis:#{flex[:width] * 100}%"
+          styles << "-moz-flex-basis:#{flex[:width] * 100}%"
+          styles << "flex-basis:#{flex[:width] * 100}%"
+        end
+        element.set_attribute('style', styles.join(';'))
+      end
+    end
+    doc.to_html
+  end
+  def self.flex_classes(settings)
+    klasses = %w(anecdote-flex-module-a4j2aj)
+    # custom gutter spacing
+    klasses << case settings[:gutter_spacing]
+    when 'small' then 'v-gutter-spacing-small'
+    when 'large' then 'v-gutter-spacing-large'
+    end
+    # when to wrap
+    klasses << case settings[:flow_from]
+    when 'always' then 'v-flow-from-always'
+    when 'medium-handheld' then 'v-flow-from-medium-handheld'
+    when 'large-handheld' then 'v-flow-from-large-handheld'
+    when 'tablet' then 'v-flow-from-tablet'
+    when 'laptop' then 'v-flow-from-laptop'
+    when 'large-monitor' then 'v-flow-from-large-monitor'
+    else
+      if settings[:size].present?
+        case settings[:size]
+        when 'small' then 'v-flow-from-medium-handheld'
+        when 'medium' then 'v-flow-from-large-handheld'
+        when 'big' then 'v-flow-from-tablet'
+        when 'full-width' then 'v-flow-from-tablet'
+        end
+      else
+        'v-flow-from-tablet' # default
+      end
+    end
+    klasses
+  end
+
   def self.module_classes(settings)
     klasses = %w(anecdote-module-3ba83n)
     if settings[:size].present?

data/test/dummy/app/views/pages/article.markdown

@@ -1,5 +1,18 @@
 # Category-Specific Sorting: A New Way to Sort Products
 
+{{% columns: size=big + flexes=1:1 %}}
+  {{% anecdote %}}
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+{{ graphic: href=//baymard.com + href-title=$Clicking this image will take you to Baymard.com!$ + assets-path=category-specific-sorting-01-rei-mock-up.jpg + size=big + caption=$This is the 3rd in a series of 9 articles based on research findings from our e-commerce [product list usability](http://baymard.com/research/ecommerce-product-lists study).$ }}
+  {{% end %}}
+  {{% anecdote %}}
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
+  {{% end %}}
+{{% end %}}
+
 {{ graphic: href=//baymard.com + href-title=$Clicking this image will take you to Baymard.com!$ + assets-path=category-specific-sorting-01-rei-mock-up.jpg + size=full-width + caption=$This is the 3rd in a series of 9 articles based on research findings from our e-commerce [product list usability](http://baymard.com/research/ecommerce-product-lists study).$ }}
 
 We considered naming this article "the sort type all users want but zero sites offer" because category-specific sorting really is one of those rare instances where an obvious feature has somehow been **completely overlooked** by the e-commerce community. After all, it really shouldn't come as a surprise that users would like to sort a list of TVs by "Screen size" or a collection of hard drives by "Storage capacity".
@@ -10,7 +23,7 @@ During our research study on product list usability the test subjects repeatedly
 
 {{ graphic: dimensions=1280x720 + embed-code=$<iframe src="https://www.youtube.com/embed/ZCBE8ocOkAQ" frameborder="0" allowfullscreen></iframe>$ + mood=positive + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
 
-{{% gallery: size=big + flow-from=always + scale-by=relative-width-bottom-alignment %}}
+{{% gallery: size=big + scale-by=relative-width-bottom-alignment %}}
   {{ graphic: assets-path=category-specific-sorting-02-bestbuy.jpg + mood=positive + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
   {{ graphic: assets-path=category-specific-sorting-08-faceted-sorting.jpg + mood=negative + caption=$An example of how things can go really wrong.$ }}
 {{% end %}}