diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..32c105d --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +demos/* linguist-documentation diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..782dc14 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/.gitignore b/.gitignore index 702858b..e32c00e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,13 @@ node_modules _site/ + +### JetBrains template +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm + +*.iml + +## Directory-based project format: +.idea/ + + + diff --git a/.lgtm b/.lgtm new file mode 100644 index 0000000..7197dee --- /dev/null +++ b/.lgtm @@ -0,0 +1,3 @@ +approvals = 1 +pattern = "(?i):shipit:|:\\+1:|LGTM" + diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..65df7fe --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,67 @@ +# Contribute + +## Introduction + +First, thank you for considering contributing to jquery-adaptive-backgrounds! It's people like you that make the open source community such a great community! 😊 + +We welcome any type of contribution, not only code. You can help with +- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) +- **Marketing**: writing blog posts, howto's, printing stickers, ... +- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... +- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. +- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/jquery-adaptive-backgrounds). + +## Your First Contribution + +Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). + +## Submitting code + +Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. + +## Code review process + +The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. +It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? + +## Financial contributions + +We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/jquery-adaptive-backgrounds). +Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed. + +## Questions + +If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!). +You can also reach us at hello@jquery-adaptive-backgrounds.opencollective.com. + +## Credits + +### Contributors + +Thank you to all the people who have already contributed to jquery-adaptive-backgrounds! + + + +### Backers + +Thank you to all our backers! [[Become a backer](https://opencollective.com/jquery-adaptive-backgrounds#backer)] + + + + +### Sponsors + +Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/jquery-adaptive-backgrounds#sponsor)) + + + + + + + + + + + + + \ No newline at end of file diff --git a/MAINTAINERS b/MAINTAINERS new file mode 100644 index 0000000..acd6204 --- /dev/null +++ b/MAINTAINERS @@ -0,0 +1,2 @@ +briangonzalez +sstern6 diff --git a/README.md b/README.md index a7d07dc..59cd01c 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,39 @@ -

- -

+![artboard](https://cloud.githubusercontent.com/assets/659829/17540609/4533a390-5e6c-11e6-8438-db25bcee1adc.png) -jquery.adaptive-backgrounds.js ------------------------------- +> jquery.adaptive-backgrounds.js _A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element._ **[Check it out on the web!](http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/)** +[![OpenCollective Backers][backer-badge]][backer-url] [![OpenCollective Sponsors][sponsor-badge]][sponsor-url] + +[backer-url]: #backers +[backer-badge]: https://opencollective.com/jquery-adaptive-background/backers/badge.svg +[sponsor-url]: #sponsors +[sponsor-badge]: https://opencollective.com/jquery-adaptive-background/sponsors/badge.svg + Getting Started ------------------ -Simply include jQuery and the __[script](https://raw2.github.com/briangonzalez/jquery.adaptive-backgrounds.js/master/src/jquery.adaptive-backgrounds.js)__ in your page, then run the script like so: + +Install via bower: + +``` +bower install --save adaptive.background +``` + +Then simply include jQuery and the script in your page, and invoke it like so: ```javascript $(document).ready(function(){ - $.adaptiveBackground.run() + $.adaptiveBackground.run(); }); ``` The script looks for image(s) with the `data-adaptive-background` attribute: ```html - + ``` ### Using an element with a CSS background image @@ -32,12 +43,15 @@ Instead of using an `` element nested inside of parent element, AB supports Enable this functionality by adding a data property, `data-ab-css-background` to the element. See the example below: ```html -
+
``` Demo ----------- Here's a little demo of how it works. (1) The page loads (2) the dominant background color of the image is extracted (3) said color is applied to parent of image. _Demo drastically slowed down to show effect_. + +--- + API @@ -49,8 +63,12 @@ Default Options ---------------- - __selector__ String _(default: `'img[data-adaptive-background="1"]'`)_ a CSS selector which denotes which images to grab/process. Ideally, this selector would start with _img_, to ensure we only grab and try to process actual images. - __parent__ falsy _(default: `null`)_ a CSS selector which denotes which parent to apply the background color to. By default, the color is applied to the parent one level up the DOM tree. -- __normalizeTextColor__ boolean _(default: `false`)_ option to normalize the color of the parent text if background color is too dark or too light -- __normalizedTextColors__ Object Literal _(default: `{dark: '#000', light: '#fff'}`)_ text colors used when background is either too dark/light +- __normalizeTextColor__ boolean _(default: `false`)_ option to normalize the color of the parent text if background color is too dark or too light. +- __normalizedTextColors__ Object Literal _(default: `{dark: '#000', light: '#fff'}`)_ text colors used when background is either too dark/light. +- __shadeVariation__ `blend|true|false` (default) option to shade the color of the parent ligher or darker (see shadePercentage) or blend the color of the parent with another color by a certain percentage (see shadeColors). +- __shadePercentage__ float (default: `0`) sets the percentage of shading or blending used. Can be adjusted from -1.00 to 1.00. +- __shadeColors__ Object Literal ( default: `{light:'rgb(255,255,255)',dark:'rgb(0,0,0)'}` ) sets the color that will be used to blend the background color with. Two values are provided to account for the background color to be light or dark to start with. +- __transparent__ Transparent dominant color. Can be adjusted from 0.01 to 0.99. __Example:__ @@ -61,6 +79,12 @@ var defaults = { selector: '[data-adaptive-background="1"]', parent: null, exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ], + shadeVariation: false, + shadePercentage: 0, + shadeColors: { + light: 'rgb(255,255,255)', + dark: 'rgb(0,0,0)' + }, normalizeTextColor: false, normalizedTextColors: { light: "#fff", @@ -69,7 +93,8 @@ var defaults = { lumaClasses: { light: "ab-light", dark: "ab-dark" - } + }, + transparent: null }; $.adaptiveBackground.run(defaults) ``` @@ -120,19 +145,51 @@ To enable CORS for images hosted on S3 buckets, follow the Amazon guide [here](h For all images, you can optionally also include a cross-origin attribute in your image. This is not absolutely necessary since the `anonymous` origin is set in the Javascript code, but kudos to you for being a super-developer. ```html - + ``` Credit ------ This plugin is built on top of a script called [RGBaster](https://github.com/briangonzalez/rgbaster.js). -Author +Collaborators ------- -| ![twitter/brianmgonzalez](http://gravatar.com/avatar/f6363fe1d9aadb1c3f07ba7867f0e854?s=70](http://twitter.com/brianmgonzalez "Follow @brianmgonzalez on Twitter") | -|---| -| [Brian Gonzalez](http://briangonzalez.org) | +| ![Brian Gonzalez](http://gravatar.com/avatar/f6363fe1d9aadb1c3f07ba7867f0e854?s=70 "Brian Gonzalez") | ![Scott Stern](https://gravatar.com/avatar/0d4467ab78f0c73c7442d9b5c23299cc?s=70 "Scott Stern") | ![Alfred J Kwack](https://avatars2.githubusercontent.com/u/557102?v=4&s=70 "Alfred J KWack") +|---|---|---| +| [Brian Gonzalez](http://briangonzalez.org) | [Scott Stern](https://github.com/sstern6) | [Alfred J Kwack ](https://github.com/AlfredJKwack)| + +This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md). + + +## Backers + +Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/jquery-adaptive-backgrounds#backer)] + + + + +## Sponsors + +Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/jquery-adaptive-backgrounds#sponsor)] + + + + + + + + + + + License ------- MIT, yo. + + + + + + + diff --git a/Termfile b/Termfile index 2d9e086..8769c5d 100644 --- a/Termfile +++ b/Termfile @@ -1,5 +1,5 @@ root: - ~/code/github/jquery.adaptive-backgrounds.js + ~/code/projects/jquery.adaptive-backgrounds.js commands: git: git st diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..61ef8e1 --- /dev/null +++ b/bower.json @@ -0,0 +1,22 @@ +{ + "name": "jquery.adaptive-backgrounds.js", + "version": "1.0.3", + "homepage": "https://github.com/briangonzalez/jquery.adaptive-backgrounds.js", + "authors": [ + "Brian Gonzalez " + ], + "description": "A jQuery plugin for extracting the dominant color from images and applying the color to their parent. http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/", + "main": "src/jquery.adaptive-backgrounds.js", + "moduleType": [ + "globals" + ], + "keywords": [ + "jquery", + "adaptive", + "background", + "color", + "image", + "processing" + ], + "license": "MIT" +} diff --git a/demos/adaptive-text.html b/demos/adaptive-text.html index 27da99d..467cef9 100644 --- a/demos/adaptive-text.html +++ b/demos/adaptive-text.html @@ -15,7 +15,7 @@ - - - - - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - - - \ No newline at end of file diff --git a/demos/base-single.html b/demos/base-single.html index f5234b4..fafcc5a 100644 --- a/demos/base-single.html +++ b/demos/base-single.html @@ -7,9 +7,9 @@ @@ -21,7 +21,7 @@ } .img-wrap{ - border: 2px solid #ccc; + border: 1px solid #ccc; height: 400px; width: 400px; position: absolute; @@ -40,7 +40,7 @@
- +
diff --git a/demos/base.html b/demos/base.html index a82377c..cce9927 100644 --- a/demos/base.html +++ b/demos/base.html @@ -13,7 +13,7 @@ - + + + + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + + + diff --git a/demos/remote-image.html b/demos/remote-image.html index d9e007d..8e4f418 100644 --- a/demos/remote-image.html +++ b/demos/remote-image.html @@ -13,7 +13,7 @@ - + + + + + +
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/demos/shade-variation.html b/demos/shade-variation.html new file mode 100644 index 0000000..0fe83ca --- /dev/null +++ b/demos/shade-variation.html @@ -0,0 +1,55 @@ + + + + + Base - Single + + + + + + + + + + + +
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/misc/ab.gif b/misc/ab.gif index 6f76ba2..bc6e4bb 100644 Binary files a/misc/ab.gif and b/misc/ab.gif differ diff --git a/package.json b/package.json index 4976dfb..14e466b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "author": "Brian Gonzalez", "name": "jquery.adaptive-backgrounds", "description": "A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.", - "version": "1.0.2", + "version": "1.0.3", "repository": { "url": "http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" }, @@ -13,5 +13,16 @@ }, "engines": { "node": "*" + }, + "dependencies": { + "opencollective": "^1.0.3" + }, + "collective": { + "type": "opencollective", + "url": "https://opencollective.com/jquery-adaptive-backgrounds", + "logo": "https://opencollective.com/opencollective/logo.txt" + }, + "scripts": { + "postinstall": "opencollective postinstall" } -} +} \ No newline at end of file diff --git a/src/jquery.adaptive-backgrounds.js b/src/jquery.adaptive-backgrounds.js index 8df2c77..da5c2e9 100644 --- a/src/jquery.adaptive-backgrounds.js +++ b/src/jquery.adaptive-backgrounds.js @@ -1,119 +1,167 @@ - /* jshint debug: true, expr: true */ -;(function($){ - +; +(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, - exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ], - normalizeTextColor: false, - normalizedTextColors: { - light: "#fff", - dark: "#000" + 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 BLEND = 'blend'; + + var DEFAULTS = { + selector: '[data-adaptive-background]', + parent: null, + exclude: ['rgb(0,0,0)', 'rgb(255,255,255)'], + shadeVariation: false, + shadePercentage: 0, + shadeColors: { + light: 'rgb(255,255,255)', + dark: 'rgb(0,0,0)' }, - lumaClasses: { - light: "ab-light", - dark: "ab-dark" - } + normalizeTextColor: false, + normalizedTextColors: { + light: "#fff", + dark: "#000" + }, + lumaClasses: { + light: "ab-light", + dark: "ab-dark" + }, + transparent: null }; // Include RGBaster - https://github.com/briangonzalez/rgbaster.js /* jshint ignore:start */ - !function(n){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},e=function(n,e){var a=new Image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossOrigin="Anonymous"),a.onload=function(){var n=t("2d");n.drawImage(a,0,0);var o=n.getImageData(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.paletteSize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:Array.apply(null,new Array(u)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexOf(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.RGBaster=n.RGBaster||c}(window); - /* jshint ignore:end */ + !function(n,t){"use strict";var e=function(n,t){var e=document.createElement("canvas");return e.setAttribute("width",n),e.setAttribute("height",t),e.getContext("2d")},r=function(n,t){var r=new Image,i=n.src||n;"data:"!==i.substring(0,5)&&(r.crossOrigin="Anonymous"),r.onload=function(){var n=e(r.width,r.height);n.drawImage(r,0,0);var i=n.getImageData(0,0,r.width,r.height);t&&t(i.data)},r.src=i},i=function(n){return["rgb(",n,")"].join("")},a=function(n){var t=[];for(var e in n)t.push(o(e,n[e]));return t.sort(function(n,t){return t.count-n.count}),t},u=function(n,t){if(n.length>t)return n.slice(0,t);for(var e=n.length-1;t-1>e;e++)n.push(o("0,0,0",0));return n},o=function(n,t){return{name:i(n),count:t}},c=10,s={};s.colors=function(n,e){e=e||{};var o=e.exclude||[],s=e.paletteSize||c;r(n,function(n){for(var r={},c="",f=[],d=0;d= 128 ? blendRGBColors(color, opts.shadeColors.dark, opts.shadePercentage) : blendRGBColors(color, opts.shadeColors.light, opts.shadePercentage); + } + }; + + /* Subscribe to our color-found event. */ + $this.on(EVENT_CF, function (ev, data) { // Try to find the parent. var $parent; - if ( opts.parent && $this.parents( opts.parent ).length ) { - $parent = $this.parents( opts.parent ); - } - else if ( $this.attr( DATA_PARENT ) && $this.parents( $this.attr( DATA_PARENT ) ).length ){ - $parent = $this.parents( $this.attr( DATA_PARENT ) ); - } - else if ( useCSSBackground() ){ + if (opts.parent && $this.parents(opts.parent).length) { + $parent = $this.parents(opts.parent); + } else if ($this.attr(DATA_PARENT) && $this.parents($this.attr(DATA_PARENT)).length) { + $parent = $this.parents($this.attr(DATA_PARENT)); + } else if (useCSSBackground()) { $parent = $this; - } - else if (opts.parent) { - $parent = $this.parents( opts.parent ); - } - else { + } 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; - }; + if (!!opts.shadeVariation) + data.color = getShadeAdjustment(data.color); + + if ($.isNumeric(opts.transparent) && opts.transparent != null && opts.transparent >= 0.01 && opts.transparent <= 0.99) { + var dominantColor = data.color; + var rgbToRgba = dominantColor.replace("rgb", "rgba"); + var transparentColor = rgbToRgba.replace(")", ", " + opts.transparent + ")"); + $parent.css({ + backgroundColor: transparentColor + }); + } else { + $parent.css({ + backgroundColor: data.color + }); + } - var getNormalizedTextColor = function (color){ + var getNormalizedTextColor = function (color) { return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light; }; - var getLumaClass = function (color){ + 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) }); + 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.addClass(getLumaClass(data.color)) + .attr('data-ab-yaq', getYIQ(data.color)); opts.success && opts.success($this, data); }); @@ -122,7 +170,6 @@ handleColors(); }); - }, + } }; - -})(jQuery); +})(jQuery); \ No newline at end of file