Notes for a Generic Component Based Application

README.md

yeoman - http://yeoman.io/

index.html

<div id="SomeCalculatorContainer">
  <c-loan-calculator></c-loan-calculator>
</div>
<style>
  #SomeCalculatorContainer {
    height:500px;
    width:250px;
    padding:$componentPadding;
  }
</style>

LoanCalculator.hbs

{{! 
  * Keep blocks used by exclusively by ComponentLoanCalculator inside this file and prefix them with ComponentLoanCalculator
  * When designing your partials, assume the container will control margins, dimensions and positioning.
  * Assume a generic 5-10px padding for components (defined in the theme .component)
  * For information on breakpoint see the scss file
  * for angular apps use square brackets for binding [[myVar]] (because curly brackets are used by handlebars)
  * Document this document vigilantly
}}
{{#partial "ComponentLoanCalculator"}}
  <div class="component LoanCalculator [[breakpoint]]">
    {{#block "ComponentLoanCalculator_Header"}}{{/block}}
    {{#block "ComponentLoanCalculator_Body"}}{{/block}}
    {{#block "ComponentLoanCalculator_Footer"}}{{/block}}
  </div>
{{/partial}}
{{! DO WE NEED TO DEFINE A PARTIAL *BEFORE* WE CAN USE IT? EG. SHOULD THESE GO ON TOP OF THE COMPONENT PARTIAL INSTEAD OF BELOW IT? }}
{{#partial "ComponentLoanCalculator_Header"}}
	<header>
	  <h1>{{i18n LoanCalculator.title}}</h1>
	</header>
{{/partial}}
{{#partial "ComponentLoanCalculator_Body"}}
  <div class="content"></div>
{{/partial}}
{{#partial "ComponentLoanCalculator_Footer"}}
	<footer>
	  <button ng-click="ctrl.save()">Save</button>
	</footer>
{{/partial}}

LoanCalculator.js

/** 
 * LoanCalculator Component
 * @author eBay Classifieds Group
 * @version Bolt2.0
 * @link http://www.oracle.com/technetwork/java/javase/documentation/index-137868.html
 * @link https://github.com/benjaminapetersen/angular-element-query
 * 
 * Please document LoanCalculator religiously
 */
angular.module('LoanCalculator', [])
  .directive('cLoanCalculator', function() {
    return {
      scope: {},
      templateUrl: 'LoanCalculator.hbs',
      replace: true,
      controller: 'LoanCalculatorCtrl',
      controllerAs: 'ctrl'
    };
  })
  .controller('LoanCalculatorCtrl', ["$scope","component","rateService",function($scope,component,rateService){
  	_init();
  	function _init(){
  		component.elementQuery.subscribe('widths', onResize);
  		rateService.subscribe(onRateChange)
  	}
    function save(view){
      
    }
    // expose interface
    this.save = save
  });

LoanCalculator.scss

@import "theme";
/*
  * Keep .LoanCalculator selectors and declarations inside its block. This namespaces your component and prevents collisions.
  * Keep your selector tree shallow by defining unique elements on the root of your component
  * Document this document vigilantly
  * The theme file includes base element selectors for generic element behavior, font-sizes, component padding, you can override these in your component.
  * hard code generic colors and assume the container controls component margins, dimensions and positioning.
  * media-breakpoints allows us to modify the component as it changes size with sm, md, lg, xl selectors 
  .sm:200-400
  .md:401-600
  .lg:601-80
  .xl-801+
  TODO: Add git commit hook that prevents selectors outside the .LoanCalculator block;
  https://github.com/sass/sass/issues/279 (points to template using grunt sass --watch sass:css -I "sass/themes/alaMaula")
*/
.component.LoanCalculator {
	h1 {
		@include %componentHeader;
	}
	.footer .button {
	  float:right;
	}
	// when the component is really small lets change the way it looks
	&.sm button {
		float:none;
		margin:0 auto;
	}
}