Ember CSS-STYLES helper

css-styles.js

import Ember from 'ember';
/*

 Template:
 <div style={{css-styles background-url='url("this/is/my/url")' color="red"}}>My Fill Color</div>
 OR
 <li id="{{index}}" style={{css-styles background-url=(concat 'url("' photo.thumbnail '")') }}></li>

 */
export function cssStyles(params, hash) {
  let styles = '';
  if(params !== undefined){
    styles = joinStyles(params);
  }
  if(hash !== undefined){
    styles = joinStyles(hash);
  }
  return Ember.String.htmlSafe(styles);
}
export default Ember.Helper.helper(cssStyles);

/*

 var options = { color : 'red', border : 'solid gray 1px', font-size : '12px'};

 joinStyles(options);
 > "color:red;border:solid gray 1px;font-size:12px;

 joinStyles(options,'=>', ' '));
 > "id=>1 name=>lucas country=>brasil"

 */
var joinStyles = function(object, glue, separator) {
  if (glue === undefined) {
    glue = ':';
  }
  if (separator === undefined) {
    separator = ';';
  }
  return $.map(Object.getOwnPropertyNames(object), function(k) {
    return [k, object[k]].join(glue);
  }).join(separator);
};

allow the hashes to be "imploded" to for css styles and bind those to the styles attribute in a handlebars template.