Profiles 2

base/assets/javascripts/base.coffee

@@ -32,5 +32,19 @@ ready = ->
     ($ '.happening-decade-list').toggleClass 'visible'
     ($ '.happening-toggle .ss-icon:last-child').toggleClass 'ss-navigatedown ss-navigateup'
 
-$(document).ready ready
-$(document).on 'page:load', ready
+  # jquery.adaptive-background options and instantiation.
+  defaults =
+    parent: '[data-adaptive-parent="1"]'
+    lumaClasses:
+      light: 'ab-light'
+      dark: 'ab-dark'
+
+  $.adaptiveBackground.run(defaults)
+  ($ '[data-adaptive-parent="1"]').on 'ab-color-found', (ev, payload) ->
+    console.log payload.color # The dominant color in the image.
+    console.log payload.palette # The color palette found in the image.
+    console.log ev # The jQuery.Event object.
+    return
+
+($ document).ready ready
+($ document).on 'page:load', ready

base/assets/stylesheets/partials/_landings.scss

@@ -373,9 +373,8 @@
       font-size: 12px;
     }
   }
-  .happening-event-list {
-    font-size: 13px;
-  }
+  .happening-event-list { font-size: 13px; }
+  .event-groups-started .happening-actors { display: none; }
 }
 .happening-explore-more {
   text-align: right;

base/static/javascripts/components/jquery.adaptive-backgrounds.js

@@ -0,0 +1,118 @@
+
+/* jshint debug: true, expr: true */
+
+;(function($){
+
+  /* Constants & defaults. */
+  var DATA_COLOR    = 'data-ab-color';
+  var DATA_PARENT   = 'data-ab-parent';
+  var DATA_CSS_BG   = 'data-ab-css-background';
+  var EVENT_CF      = 'ab-color-found';
+
+  var DEFAULTS      = {
+    selector:             '[data-adaptive-background="1"]',
+    parent:               null,
+    normalizeTextColor:   false,
+    normalizedTextColors:  {
+      light:      "#fff",
+      dark:       "#000"
+    },
+    lumaClasses:  {
+      light:      "ab-light",
+      dark:       "ab-dark"
+    }
+  };
+
+  // Include RGBaster - https://github.com/briangonzalez/rgbaster.js
+  /* jshint ignore:start */
+  !function(a){"use strict";var b=function(){return document.createElement("canvas").getContext("2d")},c=function(a,c){var d=new Image,e=a.src||a;"data:"!==e.substring(0,5)&&(d.crossOrigin="Anonymous"),d.onload=function(){var a=b();a.drawImage(d,0,0);var e=a.getImageData(0,0,d.width,d.height);c&&c(e.data)},d.src=e},d=function(a){return["rgb(",a,")"].join("")},e=function(a){return a.map(function(a){return d(a.name)})},f=5,g=10,h={};h.colors=function(a,b,h){c(a,function(a){for(var c=a.length,i={},j="",k=[],l={dominant:{name:"",count:0},palette:Array.apply(null,Array(h||g)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},m=0;c>m;){if(k[0]=a[m],k[1]=a[m+1],k[2]=a[m+2],j=k.join(","),i[j]=j in i?i[j]+1:1,"0,0,0"!==j&&"255,255,255"!==j){var n=i[j];n>l.dominant.count?(l.dominant.name=j,l.dominant.count=n):l.palette.some(function(a){return n>a.count?(a.name=j,a.count=n,!0):void 0})}m+=4*f}b&&b({dominant:d(l.dominant.name),palette:e(l.palette)})})},a.RGBaster=a.RGBaster||h}(window);
+  /* jshint ignore:end */
+
+
+  /*
+    Our main function declaration.
+  */
+  $.adaptiveBackground = {
+    run: function( options ){
+      var opts = $.extend({}, DEFAULTS, options);
+
+      /* Loop over each element, waiting for it to load
+         then finding its color, and triggering the
+         color found event when color has been found.
+      */
+      $( opts.selector ).each(function(index, el){
+        var $this = $(this);
+
+        /*  Small helper functions which applie
+            colors, attrs, triggers events, and check for css
+        */
+        var handleColors = function(){
+          var img = useCSSBackground() ? CSSBackground() : $this[0];
+
+          RGBaster.colors(img, function(colors){
+            $this.attr(DATA_COLOR, colors.dominant);
+            $this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
+          }, 20);
+        };
+
+        var useCSSBackground = function(){
+          return $this.attr( DATA_CSS_BG );
+        };
+
+        var CSSBackground = function(){
+          return $this.css('background-image')
+                      .replace('url(','').replace(')','');
+        };
+
+        /* Subscribe to our color-found event. */
+        $this.on( EVENT_CF, function(ev, data){
+          var $data = data;
+          var $parent;
+
+          if ( useCSSBackground() ){
+            $parent = $this;
+          }
+          else if ( $this.attr( DATA_PARENT ) ){
+            $parent = $this.parents( $this.attr( DATA_PARENT ) );
+          }
+          else if (opts.parent) {
+            $parent = $this.parents( opts.parent );
+          }
+          else {
+            $parent = $this.parent();
+          }
+
+          $parent.css({ backgroundColor: data.color });
+
+          // Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ
+          var getYIQ = function(color){
+            var rgb = $data.color.match(/\d+/g);
+            return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
+          };
+
+          var getNormalizedTextColor = function (color){
+            return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
+          };
+
+          var getLumaClass = function (color){
+            return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light;
+          };
+
+          // Normalize the text color based on luminance.
+          if ( opts.normalizeTextColor )
+            $parent.css({ color: getNormalizedTextColor(data.color) });
+
+          // Add a class based on luminance.
+          $parent.addClass( getLumaClass(data.color) )
+                 .attr('data-ab-yaq', getYIQ(data.color));
+
+        });
+
+        /* Handle the colors. */
+        handleColors();
+
+      });
+    },
+  };
+
+})(jQuery);

base/templates/base.html

@@ -23,7 +23,6 @@
 <link rel="dns-prefetch" href="//dxglax8otc2dg.cloudfront.net">
 <link rel="icon" href="{% static 'images/favicon.ico' %}">
 <link rel="search" type="application/opensearchdescription+xml" title="Hello! Base Search" href="{% url 'opensearch' %}">
-{% include "partials/assets.html" %}
 {% if not debug %}
 <script type="text/javascript">
   var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
@@ -37,5 +36,6 @@
 {% block page %}{% endblock page %}
 </div>
 {% endblock body %}
+{% include "partials/assets.html" %}
 </body>
 </html>

base/templates/correlations/partials/happenings_list_groups.html

@@ -2,7 +2,7 @@
 
 {% with event.content_object as object %}
 {% if event.date_field == "started" %}
-<div class="happening-event">
+<div class="happening-event event-groups-started">
   {% filter typogrify %}
   <a class="actor" href="{{ object.get_absolute_url }}">{{ object }}</a> is formed
   <div class="happening-originals">with {% for member in object.original_members %}<a href="{{ member.get_absolute_url }}">{{ member }}</a>{% include "utilities/commaify.html" %}{% endfor %}</div>
@@ -18,7 +18,7 @@
 </div>
 {% endif %}
 {% if event.date_field == "ended" %}
-<div class="happening-event">
+<div class="happening-event event-groups-ended">
   <a class="actor" href="{{ object.get_absolute_url }}">{{ object }}</a> disbands
   {% if object.final_members %}<div class="happening-originals">with {% for member in object.final_members %}<a href="{{ member.get_absolute_url }}">{{ member }}</a>{% include "utilities/commaify.html" %}{% endfor %}</div>{% endif %}
   {% if event.items.exists %}{% include "correlations/partials/happenings_news.html" %}{% endif %}

base/templates/partials/assets.html

@@ -10,6 +10,7 @@
 <script src="{% static 'javascripts/components/handlebars.runtime.js' %}" data-turbolinks-track></script>
 <script src="{% static 'javascripts/components/turbolinks.js' %}" data-turbolinks-track></script>
 <script src="{% static 'javascripts/components/jquery.turbolinks.js' %}" data-turbolinks-track></script>
+<script src="{% static 'javascripts/components/jquery.adaptive-backgrounds.js' %}" data-turbolinks-track></script>
 <script src="{% static 'javascripts/components/nprogress.js' %}" data-turbolinks-track></script>
 <script src="{% static 'javascripts/application/base.js' %}" data-turbolinks-track></script>
 <script src="{% static 'javascripts/application/graphs.js' %}" data-turbolinks-track></script>

base/templates/people/group_detail.html

@@ -13,12 +13,12 @@
   <meta content="{{ object.get_absolute_url }}" itemprop="url">
 
   <div class="profile-masthead"></div>
-  <header class="profile-header">
+  <header class="profile-header" data-adaptive-parent="1">
     <div class="container">
       <div class="profile-metadata">
         <div class="profile-image object-image">
           {% url 'image-detail' object.photo|urlencode as image_detail_url %}
-          {% if object.photo_thumbnail %}<a href="{{ image_detail_url }}" target="_blank"><img src="{% get_media_prefix %}{{ object.photo_thumbnail }}"></a>{% else %}<div class="empty-image"><span class="ss-icon ss-usergroup"></span></div>{% endif %}
+          {% if object.photo_thumbnail %}<a href="{{ image_detail_url }}" target="_blank"><img src="{% get_media_prefix %}{{ object.photo_thumbnail }}" data-adaptive-background="1" cross-origin="anonymous"></a>{% else %}<div class="empty-image"><span class="ss-icon ss-usergroup"></span></div>{% endif %}
         </div>
         <h1 class="profile-name">
           <span class="name">{{ object.name }}</span>