anecdote 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80e6132b765240d3646c13c4fcef7ac592d8b9af
-  data.tar.gz: 7eac6016355dc32ca78ae3d5b06b8f1252749b8a
+  metadata.gz: 9c2e79f493a9e06b0ad695a797274253265aff11
+  data.tar.gz: 9b4b055de45e5f1f595b7897d77472651aac596b
 SHA512:
-  metadata.gz: 60576bb54a30471159fd75fe6ee84c9c98623c740f17271d9ec27e9c841a21bdb5d9c253bf4df4b22a5e5d2b28f3a77997a2eba6bd15dab96dd68597f485bad3
-  data.tar.gz: 820e4b4a41512e6ff25884f9e58a069841ee9b9abc3ea2b6d345300b98375355a1620dbe835da458d620ec296acc491e64ef9370cd324a72ddaa34ff08a4ba3e
+  metadata.gz: 2a8a4006c4eb94bc0854b368b9bbeda220f0740588408f99a622cded5facb557e566e1de90d45f66f48a4a23bee11e2e1fa5b86af881b9caba5543bbfd397733
+  data.tar.gz: 8bfd2f762597c7d58d23bad7493f00a310a0820f539a23e7f2840331236919ad9ca6ae81c392aaf7fa85462a8d61933948f8350c038893c1cfd69b6123cffb40

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

@@ -106,7 +106,9 @@
   }
   @include respond(min, large-handheld) {
     &.v-size-small {
-      @include remify( margin, 0.35, 2, 1 );
+      &.v-float-right, &.v-float-left {
+        @include remify( margin, 0.35, 2, 1 );
+      }
       &.v-float-right {
         float: right;
         margin-right: 0;
@@ -119,7 +121,9 @@
   }
   @include respond(min, laptop) {
     &.v-size-medium {
-      @include remify( margin, 0.35, 2, 1 );
+      &.v-float-right, &.v-float-left {
+        @include remify( margin, 0.35, 2, 1 );
+      }
       &.v-float-right {
         float: right;
         margin-right: 0;
@@ -163,9 +167,15 @@
       margin-top: 0;
     }
   }
+  .anecdote-gallery-offset-dn2bak {
+    display: none;
+  }
 
   @include respond(min, tablet) {
     .flexbox & {
+      .anecdote-gallery-offset-dn2bak {
+        display: block;
+      }
       .content {
         display: -ms-flexbox;
         display: -webkit-flex;

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.0.8"
+  VERSION = "0.0.9"
 end

data/lib/anecdote.rb

@@ -18,17 +18,26 @@ module Anecdote
 
   def self.init_raconteur
     raconteur.settings.setting_quotes = '$'
+
     raconteur.processors.register!('graphic', {
       handler: lambda do |settings|
         klass = (['anecdote-graphic-dn32ja'] + module_classes(settings)).flatten.join(' ')
         contents = []
         contents << view_context.content_tag(:div, class: 'anecdote-intrinsic-embed-n42ha1') do
-          geo = Paperclip::Geometry.from_file(Rails.root.join('app', 'assets', 'images', settings[:assets_path]))
+          if settings[:assets_path]
+            image_url = settings[:assets_path]
+            paperclip_geo = Paperclip::Geometry.from_file(Rails.root.join('app', 'assets', 'images', settings[:assets_path]))
+            geo = { width: paperclip_geo.width, height: paperclip_geo.height }
+          elsif settings[:image_url]
+            image_url = settings[:image_url]
+            dimensions = settings[:image_dimensions].split('x').map(&:to_f)
+            geo = { width: dimensions.first, height: dimensions.last }
+          end
           if settings[:_scope_].present? && settings[:_scope_][:processor].tag == 'gallery'
             settings[:_scope_][:settings][:_graphics_] ||= []
             settings[:_scope_][:settings][:_graphics_] << geo
           end
-          view_context.content_tag(:div, view_context.image_tag(settings[:assets_path], alt: ''), class: 'inner', style: "padding-bottom: #{geo.height / geo.width * 100}%;")
+          view_context.content_tag(:div, view_context.image_tag(image_url, alt: ''), class: 'inner', style: "padding-bottom: #{geo[:height] / geo[:width] * 100}%;")
         end
         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')
@@ -36,18 +45,72 @@ module Anecdote
         view_context.content_tag(:div, view_context.content_tag(:div, contents.join("\n").html_safe, class: 'inner'), class: klass)
       end
       })
+
     raconteur.processors.register!('gallery', {
       handler: lambda do |settings|
         klass = (['anecdote-gallery-dn2bak'] + module_classes(settings)).flatten.join(' ')
-        contents = []
         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
-        total_width = settings[:_graphics_].sum { |geo| geo.width / geo.height }
         graphics.gsub!(/class="[^"]*?anecdote-graphic-dn32ja[\s|"]/mi) do |match|
-          width = (settings[:_graphics_][index].width / settings[:_graphics_][index].height) / total_width
+          flex = flexes[index]
           index += 1
-          "style=\"-webkit-flex-basis:#{width * 100}%;-moz-flex-basis:#{width * 100}%;flex-basis:#{width * 100}%;\" #{match}".html_safe
+          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
+
+        # build HTML output
+        contents = []
         contents << view_context.content_tag(:div, graphics.html_safe, class: 'content')
         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')
@@ -55,6 +118,7 @@ module Anecdote
         view_context.content_tag(:div, view_context.content_tag(:div, contents.join("\n").html_safe, class: 'inner'), class: klass)
       end
       })
+
     raconteur.processors.register!('pull-quote', {
       handler: lambda do |settings|
         klass = (['anecdote-pull-quote-sba2ha'] + module_classes(settings)).flatten.join(' ')

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

@@ -8,14 +8,14 @@ We considered naming this article "the sort type all users want but zero sites o
 
 During our research study on product list usability the test subjects repeatedly sought out these kinds of category-specific sort types – however, to no avail since seemingly **zero sites** offer them. Even after [benchmarking](http://baymard.com/ecommerce-product-lists/benchmark/site-reviews) the product lists of 50 major e-commerce sites we have yet to find a site that truly offer category-specific sorting.
 
-{{% gallery: size=big %}}
+{{% 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 %}}
 
 In this article we'll outline our research findings on why **category-specific sorting** is so important to the user's product finding abilities, and how it can be implemented.
 
-{{ graphic: float=left + size=small + assets-path=category-specific-sorting-02-bestbuy.jpg + 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: float=left + size=small + image-url=http://assets.baymard.com/blog/category-specific-sorting-02-bestbuy-d0496405ef767b1f469cc0e71cc4f84d.jpg + image-dimensions=1032x688 + 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.$ }}
 
 Given that category-specific sorting is such an uncommon features, let's quickly **define** the term. By "category-specific sort types" we mean any sorting options that are only available in one or a few select categories (because they wouldn't make sense as site-wide sorting options – they only make sense for the products within those particular categories). Examples include being able to sort suitcases by volume, fishing rods by length, pens by point size, hard drives by storage capacity and spindle speed, road bikes by weight, etc. It's this category specificity that makes them different from common site-wide sort types such as 'Best Selling', 'Relevance', 'User Ratings', and 'Price', which are typically available for all products and categories throughout a site.