anecdote 0.0.10 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ff6e14b8464ba17f6f0d8cf11f936a8455035d26
-  data.tar.gz: c0e0dad1d0955725c377735f2ffc6f174741b46b
+  metadata.gz: 731d413c12e7e2df573ec129199e90c23f2b1762
+  data.tar.gz: 8744182c040cca592769fdfab20aeb4b2e2a383e
 SHA512:
-  metadata.gz: 9a03bf91dba31643906f05b987d24901b48eaf66e74ad23cb0e8d892d839d76e11de8da1bcdca9f6f12bfd28b03e01a49766d042523e03ae4ba9706ad6f99a22
-  data.tar.gz: 87dc8ced93becde6620b8d9dd125041787f5a105eb82c8dccc0a34aeea3f2ed68f51b984812a60f6e30989d774aed8594534bb77275099bdbf725e43d2f6b5a3
+  metadata.gz: a4857bc8480b415482180e80221f391acd24971e8834785e501c75238a6a361fd72d53b478887064a6ec765be1149418c38226b10a4c78f8ce92427636614abe
+  data.tar.gz: 5a6ced3382c1972bc3c90787186246ca79dea3bfe93a939a78703dd4e492d323eeac448b2eb71b9cd3fc1ddb648dd7f110bc30a09fb3258638739449e1460a24

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

@@ -1,10 +1,17 @@
 
 $remify-baseline: 16 !default;
-$respond-device-medium-handheld: 350px;
-$respond-device-large-handheld: 450px;
-$respond-device-tablet: 650px;
-$respond-device-laptop: 960px;
-$respond-device-large-monitor: 1300px;
+$respond-devices: (
+  medium-handheld: 350px,
+  large-handheld: 450px,
+  tablet: 650px,
+  laptop: 960px,
+  large-monitor: 1300px
+);
+$respond-device-medium-handheld: map-get($respond-devices, medium-handheld);
+$respond-device-large-handheld: map-get($respond-devices, large-handheld);
+$respond-device-tablet: map-get($respond-devices, tablet);
+$respond-device-laptop: map-get($respond-devices, laptop);
+$respond-device-large-monitor: map-get($respond-devices, large-monitor);
 $fix-mqs: false !default;
 
 

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

@@ -105,36 +105,31 @@
     @include margin-horizontal( auto );
     width: 100%;
   }
-  @include respond(min, large-handheld) {
-    &.v-size-small {
-      &.v-float-right, &.v-float-left {
-        @include remify( margin, 0.35, 2, 1 );
-      }
-      &.v-float-right {
-        float: right;
-        margin-right: 0;
-      }
-      &.v-float-left {
-        float: left;
-        margin-left: 0;
-      }
+
+  @mixin float-module-3ba83n {
+    &.v-float-right, &.v-float-left {
+      @include remify( margin, 0.35, 2, 1 );
+    }
+    &.v-float-right {
+      float: right;
+      margin-right: 0;
+    }
+    &.v-float-left {
+      float: left;
+      margin-left: 0;
     }
   }
-  @include respond(min, laptop) {
-    &.v-size-medium {
-      &.v-float-right, &.v-float-left {
-        @include remify( margin, 0.35, 2, 1 );
-      }
-      &.v-float-right {
-        float: right;
-        margin-right: 0;
-      }
-      &.v-float-left {
-        float: left;
-        margin-left: 0;
+  &.v-float-from-always {
+    @include float-module-3ba83n;
+  }
+  @each $breakpoint-name, $breakpoint-px in $respond-devices {
+    &.v-float-from-#{$breakpoint-name} {
+      @include respond(min, $breakpoint-name) {
+        @include float-module-3ba83n;
       }
     }
   }
+  
 }
 
 
@@ -172,7 +167,8 @@
     display: none;
   }
 
-  @include respond(min, tablet) {
+
+  @mixin flow-gallery-dn2bak {
     .flexbox & {
       .anecdote-gallery-offset-dn2bak {
         display: block;
@@ -198,6 +194,17 @@
       }
     }
   }
+  &.v-flow-from-always {
+    @include flow-gallery-dn2bak;
+  }
+  @each $breakpoint-name, $breakpoint-px in $respond-devices {
+    &.v-flow-from-#{$breakpoint-name} {
+      @include respond(min, $breakpoint-name) {
+        @include flow-gallery-dn2bak;
+      }
+    }
+  }
+
 }
 
 /*---------------------------------------------------

data/lib/anecdote/version.rb

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

data/lib/anecdote.rb

@@ -25,19 +25,23 @@ module Anecdote
         contents = []
         contents << view_context.content_tag((settings[:href].present? ? :a : :div), (settings[:href].present? ? { href: settings[:href], title: settings[:href_title] } : {}).merge({ class: 'anecdote-intrinsic-embed-n42ha1' })) do
           if settings[:assets_path]
-            image_url = settings[:assets_path]
+            content = view_context.image_tag(settings[:assets_path], alt: '')
             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)
+            content = view_context.image_tag(settings[:image_url], alt: '')
+            dimensions = (settings[:dimensions] || settings[:image_dimensions]).split('x').map(&:to_f)
+            geo = { width: dimensions.first, height: dimensions.last }
+          elsif settings[:embed_code]
+            content = settings[:embed_code].html_safe
+            dimensions = settings[: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(image_url, alt: ''), class: 'inner', style: "padding-bottom: #{geo[:height] / geo[:width] * 100}%;")
+          view_context.content_tag(:div, content, 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')
@@ -109,6 +113,28 @@ module Anecdote
           "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'
+        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
+        klass += " #{flow_from_klass}"
+
         # build HTML output
         contents = []
         contents << view_context.content_tag(:div, graphics.html_safe, class: 'content')
@@ -142,6 +168,24 @@ module Anecdote
       when 'right' then 'v-float-right'
       when 'left' then 'v-float-left'
       end
+      klasses << case settings[:float_from]
+      when 'always' then 'v-float-from-always'
+      when 'medium-handheld' then 'v-float-from-medium-handheld'
+      when 'large-handheld' then 'v-float-from-large-handheld'
+      when 'tablet' then 'v-float-from-tablet'
+      when 'laptop' then 'v-float-from-laptop'
+      when 'large-monitor' then 'v-float-from-large-monitor'
+      else
+        if settings[:size].present?
+          case settings[:size]
+          when 'small' then 'v-float-from-large-handheld'
+          when 'medium' then 'v-float-from-laptop'
+          when 'big' then 'v-flow-from-large-monitor'
+          end
+        else
+          'v-float-from-laptop' # default
+        end
+      end
     end
     if settings[:mood].present?
       klasses << case settings[:mood]

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

@@ -8,7 +8,9 @@ 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 + scale-by=relative-width-bottom-alignment %}}
+{{ 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 %}}
   {{ 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 %}}