From 2c8cf689e61354c17e692a14be1749b5328f0cbd Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Mon, 23 Dec 2013 12:30:51 -0800 Subject: [PATCH 1/6] Add jQuery Adaptive Backgrounds. Much awesome. --- .../components/jquery.adaptive-backgrounds.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 base/static/javascripts/components/jquery.adaptive-backgrounds.js diff --git a/base/static/javascripts/components/jquery.adaptive-backgrounds.js b/base/static/javascripts/components/jquery.adaptive-backgrounds.js new file mode 100644 index 00000000..e705a3fb --- /dev/null +++ b/base/static/javascripts/components/jquery.adaptive-backgrounds.js @@ -0,0 +1,82 @@ + +/* jshint debug: true, expr: true */ + +;(function($){ + + /* Constants & defaults. */ + var DATA_COLOR = 'data-ab-color'; + var DATA_PARENT = 'data-ab-parent'; + var EVENT_CF = 'ab-color-found'; + + var DEFAULTS = { + selector: 'img[data-adaptive-background="1"]', + parent: null, + normalizeTextColor: false, + normalizedTextColors: { + light: "#fff", + dark: "#000" + } + }; + + // 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;"data:"!==a.src.substring(0,5)&&(d.crossOrigin="Anonymous"),d.src=a.src,d.onload=function(){var e=b();e.drawImage(d,0,0);var f=e.getImageData(0,0,a.width,a.height);c&&c(f.data)}},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 function which applies colors, attrs, and triggers events. */ + var handleColors = function(){ + RGBaster.colors($this[0], function(colors){ + $this.attr(DATA_COLOR, colors.dominant); + $this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette }); + }, 20); + }; + + /* Subscribe to our color-found event. */ + $this.on( EVENT_CF, function(ev, data){ + var $data = data; + var $parent; + 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 }); + + if ( opts.normalizeTextColor ){ + + /* Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ */ + var getTextColor = function (){ + var rgb = $data.color.match(/\d+/g); + var yiq = ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000; + return yiq >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light; + }; + + $parent.css({ color: getTextColor() }); + } + }); + + /* Handle the colors. */ + handleColors(); + + }); + }, + }; + +})(jQuery); From 9eee5f421af9e1de6d14eb74cf971929491319fd Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Sat, 22 Feb 2014 12:29:06 -0800 Subject: [PATCH 2/6] Hide the actors for group formations on the front page. Because LONG. --- base/assets/stylesheets/partials/_landings.scss | 5 ++--- .../correlations/partials/happenings_list_groups.html | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/base/assets/stylesheets/partials/_landings.scss b/base/assets/stylesheets/partials/_landings.scss index 3eda4a37..d96aa132 100644 --- a/base/assets/stylesheets/partials/_landings.scss +++ b/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; diff --git a/base/templates/correlations/partials/happenings_list_groups.html b/base/templates/correlations/partials/happenings_list_groups.html index 5816a496..e01948c3 100644 --- a/base/templates/correlations/partials/happenings_list_groups.html +++ b/base/templates/correlations/partials/happenings_list_groups.html @@ -2,7 +2,7 @@ {% with event.content_object as object %} {% if event.date_field == "started" %} -
+
{% filter typogrify %} {{ object }} is formed
with {% for member in object.original_members %}{{ member }}{% include "utilities/commaify.html" %}{% endfor %}
@@ -18,7 +18,7 @@
{% endif %} {% if event.date_field == "ended" %} -
+
{{ object }} disbands {% if object.final_members %}
with {% for member in object.final_members %}{{ member }}{% include "utilities/commaify.html" %}{% endfor %}
{% endif %} {% if event.items.exists %}{% include "correlations/partials/happenings_news.html" %}{% endif %} From 4282f5c764cc92c5f3e7d6346d4b511e7d34bad1 Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Mon, 24 Feb 2014 14:57:27 -0800 Subject: [PATCH 3/6] Basic implementation of the adaptive background script. --- base/assets/javascripts/base.coffee | 19 +++++++++++++++++++ base/templates/partials/assets.html | 1 + base/templates/people/group_detail.html | 4 ++-- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/base/assets/javascripts/base.coffee b/base/assets/javascripts/base.coffee index eb9fc61c..c2c7d78d 100644 --- a/base/assets/javascripts/base.coffee +++ b/base/assets/javascripts/base.coffee @@ -34,3 +34,22 @@ ready = -> $(document).ready ready $(document).on 'page:load', ready + +defaults = + parent: '[data-adaptive-parent="1"]' + normalizeTextColor: true + normalizedTextColors: + light: '#fff' + dark: '#000' +# 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 diff --git a/base/templates/partials/assets.html b/base/templates/partials/assets.html index f5e90647..37b32f6d 100644 --- a/base/templates/partials/assets.html +++ b/base/templates/partials/assets.html @@ -10,6 +10,7 @@ + diff --git a/base/templates/people/group_detail.html b/base/templates/people/group_detail.html index ea1357af..5ba71e14 100644 --- a/base/templates/people/group_detail.html +++ b/base/templates/people/group_detail.html @@ -13,12 +13,12 @@
-
+
{% url 'image-detail' object.photo|urlencode as image_detail_url %} - {% if object.photo_thumbnail %}{% else %}
{% endif %} + {% if object.photo_thumbnail %}{% else %}
{% endif %}

{{ object.name }} From 9bbc90095624fc802268357164c63ca02f2284d6 Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Mon, 24 Feb 2014 15:04:39 -0800 Subject: [PATCH 4/6] Upgrade jquery.adaptive-backgrounds.js. --- .../components/jquery.adaptive-backgrounds.js | 66 ++++++++++++++----- 1 file changed, 51 insertions(+), 15 deletions(-) diff --git a/base/static/javascripts/components/jquery.adaptive-backgrounds.js b/base/static/javascripts/components/jquery.adaptive-backgrounds.js index e705a3fb..0a801cac 100644 --- a/base/static/javascripts/components/jquery.adaptive-backgrounds.js +++ b/base/static/javascripts/components/jquery.adaptive-backgrounds.js @@ -6,24 +6,32 @@ /* 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: 'img[data-adaptive-background="1"]', + 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;"data:"!==a.src.substring(0,5)&&(d.crossOrigin="Anonymous"),d.src=a.src,d.onload=function(){var e=b();e.drawImage(d,0,0);var f=e.getImageData(0,0,a.width,a.height);c&&c(f.data)}},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); + !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. */ + + /* + Our main function declaration. + */ $.adaptiveBackground = { run: function( options ){ var opts = $.extend({}, DEFAULTS, options); @@ -35,19 +43,36 @@ $( opts.selector ).each(function(index, el){ var $this = $(this); - /* Small helper function which applies colors, attrs, and triggers events. */ + /* Small helper functions which applie + colors, attrs, triggers events, and check for css + */ var handleColors = function(){ - RGBaster.colors($this[0], function(colors){ + 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 ( $this.attr( DATA_PARENT ) ){ + + if ( useCSSBackground() ){ + $parent = $this; + } + else if ( $this.attr( DATA_PARENT ) ){ $parent = $this.parents( $this.attr( DATA_PARENT ) ); } else if (opts.parent) { @@ -59,17 +84,28 @@ $parent.css({ backgroundColor: data.color }); - if ( opts.normalizeTextColor ){ + // 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; + }; - /* Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ */ - var getTextColor = function (){ - var rgb = $data.color.match(/\d+/g); - var yiq = ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000; - return yiq >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light; - }; + 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)); - $parent.css({ color: getTextColor() }); - } }); /* Handle the colors. */ From b195684f4ffbaf42359616eaf75d758511ae3d07 Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Mon, 24 Feb 2014 16:03:51 -0800 Subject: [PATCH 5/6] Move some of the adaptive background code around. --- base/assets/javascripts/base.coffee | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/base/assets/javascripts/base.coffee b/base/assets/javascripts/base.coffee index c2c7d78d..7e15efe4 100644 --- a/base/assets/javascripts/base.coffee +++ b/base/assets/javascripts/base.coffee @@ -32,24 +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 - -defaults = - parent: '[data-adaptive-parent="1"]' - normalizeTextColor: true - normalizedTextColors: - light: '#fff' - dark: '#000' -# lumaClasses: -# light: "ab-light" -# dark: "ab-dark" - -$ -> - $.adaptiveBackground.run(defaults) + # jquery.adaptive-background options and instantiation. + defaults = + parent: '[data-adaptive-parent="1"]' + lumaClasses: + light: 'ab-light' + dark: 'ab-dark' - $('[data-adaptive-parent="1"]').on 'ab-color-found', (ev, payload) -> + $.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 + console.log ev # The jQuery.Event object. return + +($ document).ready ready +($ document).on 'page:load', ready From 5027299ac7e2999812110c79d55b7606690bd36b Mon Sep 17 00:00:00 2001 From: Bryan Veloso Date: Mon, 24 Feb 2014 16:04:10 -0800 Subject: [PATCH 6/6] Moving assets to the bottom makes CORS work in Chrome. :| --- base/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/base/templates/base.html b/base/templates/base.html index b77a1402..bc33159f 100644 --- a/base/templates/base.html +++ b/base/templates/base.html @@ -23,7 +23,6 @@ -{% include "partials/assets.html" %} {% if not debug %}