Angular Adaptive Backgrounds

Surround a picture with its dominant color using a simple directive

$ npm install --save angular-adaptive-backgrounds

the lowdown

This directive is essentially extracting the dominant color from an image and applying that color to its parent's background. Here's the most simple example:

<!-- Load the script after AngularJS --> <script src="angular.js"></script> <script src="angular-adaptive-backgrounds.js"></script>

// Make sure your app depends on this module var myApp = angular.module('myApp', ['mb-adaptive-backgrounds']);

<!-- This guy will get receive a background color... --> <div adaptive-background>   <!-- from this image -->   <img src="cool.jpg"> </div>

getting fancy

Since your markup could get far more complicated in a real example, adaptive-background will dig through its descendents for the first img it can find.

<div adaptive-background>   <div>     <div>       <img src="cool.jpg">     </div>   </div> </div>

choose an image

But if you have multiple images descending from your adaptive-background, it might find the wrong one! Fortunately, you can specify a class name.

<div adaptive-background ab-image-class="the-chosen-one">   <div>     <div>       <!-- It will skip right past this image -->       <img src="not-cool.jpg">     </div>     <div>       <!-- and grab a color from this image -->       <img src="cool.jpg" class="the-chosen-one">     </div>   </div> </div>

In certain cases, you might want to specify a class name for your entire app, instead of repeatedly setting ab-image-class.

myApp.config(function (adaptiveBackgroundsOptionsProvider) {   adaptiveBackgroundsOptionsProvider.set({     imageClass: 'the-chosen-one'   }); });

<!-- Even without setting ab-image-class... --> <div adaptive-background>   <div>     <div>       <img src="not-cool.jpg">     </div>     <div>       <!-- it will still find this image -->       <img src="cool.jpg" class="the-chosen-one">     </div>   </div> </div>

css background-image

Instead of an img element, you might have a background-image on some other element. Have no fear. Simply ensure you've set a parent class, either by ab-image-class or a global config.

<div adaptive-background ab-image-class="the-chosen-one">   <div style="background-image: url('cool.jpg');" class="the-chosen-one"></div> </div>

classes

If you have text overlaying the background color, that text might no longer be readable. You have a couple classes to work with though.

ab-light-background will be applied to a lighter background and, as you might expect, ab-dark-background on a darker background. You could do something like this to make sure your text contrasts with the background.

.ab-light-background {   color: #333; }  .ab-dark-background {   color: #fff; }

If you're displeased with those class names, feel free to change them.

myApp.config(function (adaptiveBackgroundsOptionsProvider) {   adaptiveBackgroundsOptionsProvider.set({     lightClass: 'wow-so-bright',     darkClass: 'pretty-dark-in-here'   }); });

dev

$ npm install $ npm start