anecdote 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c58bec54cd3c66501a4564f0c946fbd41c2fc4a9
-  data.tar.gz: eed063fd46ca572e4bedb912b2882d19a5ecbed1
+  metadata.gz: df5c022e5045447b6faede544f262b06dc805fed
+  data.tar.gz: ae325e4c510ff16a31d71eb4e1fd457fba1cffd8
 SHA512:
-  metadata.gz: 365a0f3d31e70247361f5f54363daa337194eea1b06d938a32cafe37f4ebae5d2b97e7ddb50c579f2ad0a214ba81a6fe750435c154b9a12180ff0b95d979d8ff
-  data.tar.gz: ef31547aae848623b84611ddf20d5fc4fa7d0178efd03ef484404ea5169eb9d0863d67c2eca9121c7875a56d9a5f7b33eea1ee944ee6be306f35daf48c7e3d90
+  metadata.gz: 275c93f62f144290ab9dfd80a08e68919a31f9a0a739aaf5ad0abb2c8c78063e4930a69d7065f00f7099f3da315a6316d17ba885cf53288ff026121d3fb6f691
+  data.tar.gz: 14429fb20d9197186267e9506e546a25258531164df74d100b08c65494cb53a9ee5cac3fdb93d6b959496ddb9d6d1d62aedc5a067f486475eff735f05b9fc6e3

data/app/assets/javascripts/anecdote/_modernizr.js

@@ -0,0 +1,3 @@
+/*! modernizr 3.2.0 (Custom Build) | MIT *
+ * http://modernizr.com/download/?-flexbox-svg-setclasses !*/
+!function(e,n,t){function r(e,n){return typeof e===n}function s(){var e,n,t,s,o,i,a;for(var l in w)if(w.hasOwnProperty(l)){if(e=[],n=w[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=r(n.fn,"function")?n.fn():n.fn,o=0;o<e.length;o++)i=e[o],a=i.split("."),1===a.length?Modernizr[a[0]]=s:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=s),y.push((s?"":"no-")+a.join("-"))}}function o(e){var n=S.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?S.className.baseVal=n:S.className=n)}function i(e,n){return!!~(""+e).indexOf(n)}function a(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function f(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var s;for(var o in e)if(e[o]in n)return t===!1?e[o]:(s=n[e[o]],r(s,"function")?f(s,t||n):s);return!1}function d(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function c(){var e=n.body;return e||(e=a(x?"svg":"body"),e.fake=!0),e}function p(e,t,r,s){var o,i,l,f,u="modernizr",d=a("div"),p=c();if(parseInt(r,10))for(;r--;)l=a("div"),l.id=s?s[r]:u+(r+1),d.appendChild(l);return o=a("style"),o.type="text/css",o.id="s"+u,(p.fake?p:d).appendChild(o),p.appendChild(d),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(n.createTextNode(e)),d.id=u,p.fake&&(p.style.background="",p.style.overflow="hidden",f=S.style.overflow,S.style.overflow="hidden",S.appendChild(p)),i=t(d,e),p.fake?(p.parentNode.removeChild(p),S.style.overflow=f,S.offsetHeight):d.parentNode.removeChild(d),!!i}function m(n,r){var s=n.length;if("CSS"in e&&"supports"in e.CSS){for(;s--;)if(e.CSS.supports(d(n[s]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var o=[];s--;)o.push("("+d(n[s])+":"+r+")");return o=o.join(" or "),p("@supports ("+o+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,s,o){function f(){d&&(delete P.style,delete P.modElem)}if(o=r(o,"undefined")?!1:o,!r(s,"undefined")){var u=m(e,s);if(!r(u,"undefined"))return u}for(var d,c,p,v,h,g=["modernizr","tspan"];!P.style;)d=!0,P.modElem=a(g.shift()),P.style=P.modElem.style;for(p=e.length,c=0;p>c;c++)if(v=e[c],h=P.style[v],i(v,"-")&&(v=l(v)),P.style[v]!==t){if(o||r(s,"undefined"))return f(),"pfx"==n?v:!0;try{P.style[v]=s}catch(y){}if(P.style[v]!=h)return f(),"pfx"==n?v:!0}return f(),!1}function h(e,n,t,s,o){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,s,o):(a=(e+" "+E.join(i+" ")+i).split(" "),u(a,n,t))}function g(e,n,r){return h(e,t,t,n,r)}var y=[],w=[],C={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){w.push({name:e,fn:n,options:t})},addAsyncTest:function(e){w.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=C,Modernizr=new Modernizr,Modernizr.addTest("svg",!!n.createElementNS&&!!n.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect);var S=n.documentElement,x="svg"===S.nodeName.toLowerCase(),_="Moz O ms Webkit",b=C._config.usePrefixes?_.split(" "):[];C._cssomPrefixes=b;var E=C._config.usePrefixes?_.toLowerCase().split(" "):[];C._domPrefixes=E;var N={elem:a("modernizr")};Modernizr._q.push(function(){delete N.elem});var P={style:N.elem.style};Modernizr._q.unshift(function(){delete P.style}),C.testAllProps=h,C.testAllProps=g,Modernizr.addTest("flexbox",g("flexBasis","1px",!0)),s(),o(y),delete C.addTest,delete C.addAsyncTest;for(var z=0;z<Modernizr._q.length;z++)Modernizr._q[z]();e.Modernizr=Modernizr}(window,document);

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

@@ -10,7 +10,7 @@ $fix-mqs: false !default;
 
 
 @mixin scope-variation($sel) {
-  @at-root #{selector-append('.v-size-full-width', &)} {
+  @at-root #{selector-append($sel, &)} {
     @content;
   }
 }

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

@@ -83,20 +83,20 @@
 .anecdote-module-3ba83n {
   @include remify( margin-top margin-bottom, 1 );
   @include margin-horizontal( auto );
-  max-width: 100%;
 
   // sizes
+  @include remify( max-width, 30 );
   &.v-size-small {
-    @include remify( width, 12 );
+    @include remify( max-width, 12 );
   }
   &.v-size-medium {
-    @include remify( width, 20 );
+    @include remify( max-width, 20 );
   }
   &.v-size-big {
-    @include remify( width, 40 );
+    @include remify( max-width, 40 );
   }
   &.v-size-full-width {
-    width: auto;
+    max-width: 100%;
   }
 
   // positioning
@@ -131,17 +131,63 @@
   }
 }
 
+
+/*---------------------------------------------------
+--- Anecdote: Caption
+--------------------------------------------------- */
+.anecdote-caption-ajkd3b {
+  font-size: 0.8em;
+  color: #555;
+}
+
 /*---------------------------------------------------
 --- Anecdote: Graphic
 --------------------------------------------------- */
 .anecdote-graphic-dn32ja {
-  @include remify( font-size, 0.85 );
-  color: #555;
-  .caption {
+  .anecdote-caption-ajkd3b {
     @include remify( padding-top, 0.5 );
   }
 }
 
+/*---------------------------------------------------
+--- Anecdote: Gallery
+--------------------------------------------------- */
+.anecdote-gallery-dn2bak {
+  .anecdote-caption-ajkd3b {
+    @include remify( padding-top, 0.5 );
+  }
+  .anecdote-graphic-dn32ja {
+    margin-bottom: 0;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  @include respond(min, tablet) {
+    .flexbox & {
+      .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%;
+          @include remify( margin-left, 1 );
+          margin-top: 0;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
 /*---------------------------------------------------
 --- Anecdote: Pull Quote
 --------------------------------------------------- */
@@ -160,12 +206,12 @@
   &.v-float-right, &.v-float-left {
     @include respond(max, large-handheld) {
       &.v-size-small {
-        width: 100%;
+        max-width: 100%;
       }
     }
     @include respond(max, laptop) {
       &.v-size-medium {
-        width: 100%;
+        max-width: 100%;
       }
     }
   }

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

data/lib/anecdote.rb

@@ -12,12 +12,9 @@ module Anecdote
     @raconteur ||= ::Raconteur.new
   end
 
-
-  # <div class="guie-n765ns-intrinsic-embed">
-  #   <div class="inner" style="padding-bottom: 64.92248062%;">
-  #     <img src="/baymard-articles/category-specific-sorting-01-rei-mock-up-0f0ae156f355de764324aa6aa4b84d3f.jpg" alt="" />
-  #   </div>
-  # </div>
+  def self.inline_js
+    view_context.content_tag(:script, Rails.application.assets.find_asset('anecdote/application.js').to_s.html_safe)
+  end
 
   def self.init_raconteur
     raconteur.settings.setting_quotes = '$'
@@ -27,10 +24,33 @@ module Anecdote
         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[:_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}%;")
         end
         if settings[:caption].present?
-          contents << view_context.content_tag(:div, markdown_and_parse(settings[:caption]), class: 'caption anecdote-wysicontent-ndj4ab')
+          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)
+      end
+      })
+    raconteur.processors.register!('gallery', {
+      handler: lambda do |settings|
+        klass = (['anecdote-gallery-dn2bak'] + module_classes(settings)).flatten.join(' ')
+        contents = []
+        graphics = settings[:_yield_].html_safe
+        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
+          index += 1
+          "style=\"-webkit-flex-basis:#{width * 100}%;-moz-flex-basis:#{width * 100}%;flex-basis:#{width * 100}%;\" #{match}".html_safe
+        end
+        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')
         end
         view_context.content_tag(:div, view_context.content_tag(:div, contents.join("\n").html_safe, class: 'inner'), class: klass)
       end
@@ -59,6 +79,12 @@ module Anecdote
       when 'left' then 'v-float-left'
       end
     end
+    if settings[:mood].present?
+      klasses << case settings[:mood]
+      when 'positive' then 'v-mood-positive'
+      when 'negative' then 'v-mood-negative'
+      end
+    end
     klasses
   end
 

data/test/dummy/app/assets/javascripts/application.js

@@ -11,3 +11,4 @@
 // about supported directives.
 //
 //= require_tree .
+//= require 'anecdote/application'

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

@@ -12,8 +12,7 @@ $remify-baseline: 20;
   font-family: "museo-sans", Avenir;
 }
 @mixin centered-standard-width {
-  width: 30rem;
-  max-width: 100%;
+  max-width: 30rem;
   margin-left: auto;
   margin-right: auto;
 }
@@ -91,18 +90,68 @@ $remify-baseline: 20;
   // }
 }
 
+
+/*---------------------------------------------------
+--- Anecdote: Caption
+--------------------------------------------------- */
+.anecdote-caption-ajkd3b {
+  @include secondary-font;
+  .anecdote-wysicontent-ndj4ab > * {
+    margin-left: 0;
+    margin-right: 0;
+    @include remify( max-width, 40 );
+  }
+  .anecdote-module-3ba83n & {
+    @mixin anecdote-caption-ajkd3b-mood-icon( $tmp-color, $tmp-svg-paths ) {
+      > .inner {
+        @include remify( padding-left, 1.15 );
+        position: relative;
+        &:before {
+          position: absolute;
+          left: 0;
+          @include remify( width height, 1 );
+          text-align: center;
+          top: 0.25em;
+          content: '\00F7';
+          color: $tmp-color;
+          .svg & {
+            content: '';
+            top: 0.1em;
+            @include remify( background-size, 0.8, 0.8 );
+            background-attachment: scroll;
+            background-position: left center;
+            background-repeat: no-repeat;
+            background-image: url('data:image/svg+xml;utf8,<svg fill="#{$tmp-color}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">#{$tmp-svg-paths}</svg>');
+          }
+        }
+      }
+    }
+    @include scope-variation( '.v-mood-negative' ) {
+      @include anecdote-caption-ajkd3b-mood-icon( #9a3b3b, '<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/>' );
+    }
+    @include scope-variation( '.v-mood-positive' ) {
+      @include anecdote-caption-ajkd3b-mood-icon( #99af37, '<path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>' );
+    }
+  }
+}
+
 /*---------------------------------------------------
 --- Anecdote: Graphic
 --------------------------------------------------- */
 .anecdote-graphic-dn32ja {
-  @include secondary-font;
-  .caption {
+  .anecdote-caption-ajkd3b {
     @include scope-variation( '.v-size-full-width' ) {
       @include remify( margin-left margin-right, 1 );
     }
   }
 }
 
+.anecdote-gallery-dn2bak {
+  @include scope-variation( '.v-size-full-width' ) {
+    @include add-page-padding;
+  }
+}
+
 /*---------------------------------------------------
 --- Anecdote: Pull Quote
 --------------------------------------------------- */

data/test/dummy/app/views/layouts/application.html.erb

@@ -4,7 +4,7 @@
   <title>Dummy</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= Anecdote.inline_js %>
   <%= csrf_meta_tags %>
 </head>
 <body>

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

@@ -8,6 +8,11 @@ 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 %}}
+  {{ 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.$ }}