AngularJS Example

by bodine30

HTML

<div ng-app="MFSwatches" ng-cloak>
  <div data-ng-controller="SwatchesCtrl" class="swatches" data-color-name="{{currentColorName}}" data-size-availability="{{sizeAvailability}}">
    I have {{swatches.length}} colors. They are:
    <a ng-href="{{mainProductImageURL}}" class="lightbox" title="{{currentColorName}}" >
      <img 
        ng-src="{{mainProductImageURL}}" 
        alt="" 
        class="main-product-image"
      />
    </a>
    <div 
      class="swatch" 
      data-ng-repeat="swatch in swatches"
      data-set-up="" 
      data-ng-mouseenter="handleMouseEnter();"
      data-ng-mouseleave="handleMouseLeave();"
    >
      <a ng-href="{{swatch.imageURL}}" class="lightbox" title="{{swatch.name + currentColorName}}"></a>
    </div>
    <div>
      Color available in: 
      <span data-ng-repeat="size in currentSwatchSizes" class="sizes-in-color">{{size | uppercase}}</span>
    </div>
  </div>
  {{hex="ffffff";sizes=["s","m","l"];name="white";""}}
  {{hex="000000";sizes=["s","m","l"];name="black";}}
  {{hex="ff0000";sizes=["s","l"];name="red";}}
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<style>
strong {display:none;}
div:active strong {display:inline;}
.ng-invalid { border: 1px solid red; }
[data-white] {color:blue;}
.swatches { position:relative; }
.swatch { display:inline-block; margin:.2em; width:20px; height:20px; border:1px solid black; box-shadow:0 0 transparent; -moz-box-shadow:0 0 transparent; -webkit-box-shadow:0 0 transparent; -webkit-transform:rotate(0deg) scale(1); -webkit-transition:-webkit-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; -ms-transform:rotate(0deg) scale(1); -ms-transition:-ms-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; -o-transform:rotate(0deg) scale(1); -o-transition:-o-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; transform:rotate(0deg) scale(1); transition:transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; }
.swatch:hover { box-shadow:0 0 10px rgba(0, 0, 0, .4); -moz-box-shadow:0 0 10px rgba(0, 0, 0, .4); -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .4); -webkit-transform:rotate(45deg) scale(2); -webkit-transition:-webkit-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; -ms-transform:rotate(45deg) scale(2); -ms-transition:-ms-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; -o-transform:rotate(45deg) scale(2); -o-transition:-o-transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; transform:rotate(45deg) scale(2); transition:transform 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms; position:relative; z-index:1; }
.main-product-image { float:right; height:298px; max-width:252px; }
.swatches:after { content:attr(data-color-name); position:absolute; top:0; right:0; font:400 2em/1.3 "Verdana"; background-image:-webkit-linear-gradient(245deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0) 80%); background-image:-ms-linear-gradient(245deg, rgba(0, 0, 0, 0.4), rgba(255, 255,...

JavaScript

var MFSwatches = angular.module("MFSwatches", [])
    .directive("setUp", function () {
        return {
            link:function(scope, iElement, iAttrs) {
                    iElement.attr({
                      "title":"Get " + scope.swatch.name + " in " + scope.swatch.sizes.toString().toUpperCase(),
                      "data-color-name":scope.swatch.name,
                      "data-hex-code":scope.swatch.hex,
                      "style":"background-color:#"+scope.swatch.hex+";"
                    });
                }            
          };
    })
    .factory("swatchHover", function(){
      return {
        handleMouseEnter: function() {
          this.$parent.mainProductImageURL = this.dynamicImageBase + this.swatch.imageURL + this.dynamicBaseProductImageSize;
          this.$parent.currentColorName = this.swatch.name + " " + this.swatch.sizes.toString().toUpperCase();
          this.$parent.currentSwatchSizes = this.swatch.sizes;
        },
        handleMouseLeave: function() {      
          this.$parent.mainProductImageURL = this.dynamicImageBase + this.swatches[0].imageURL + this.dynamicBaseProductImageSize;
          this.$parent.currentColorName = this.swatches[0].name + " " + this.swatches[0].sizes.toString().toUpperCase();
          this.$parent.currentSwatchSizes = this.swatches[0].sizes;
        }
      };
    });

function SwatchesCtrl($scope, swatchHover) {
    $scope.swatches = [
      {"name":"white","hex":"ffffff","sizes":["s","m","l"],"imageURL":"%2Ffiles%2F1323869%2Fuploaded%2F18000_00_hr_Dec12.jpg"},
      {"name":"black","hex":"000000","sizes":["s","l"],"imageURL":"%2Ffiles%2F1323869%2Fuploaded%2F18000_30_hr_Dec12.jpg"},
      {"name":"red","hex":"ff0000","sizes":["m","l","xl","2xl"],"imageURL":"%2Ffiles%2F1323869%2Fuploaded%2F18000_58_hr_Dec12.jpg"}
    ];
    $scope.currentColorName = $scope.swatches[0].name + " " + $scope.swatches[0].sizes.toString().toUpperCase();
    $scope.currentSwatchSizes = $scope.swatches[0].sizes;
...