collection

<h1>{{sofa.title}} Collection</h1>

collections

<div class="row">
	<header>
		<h1>I'm looking for a {{arrayToString(choices.materials)}} {{arrayToString(choices.configurations)}}</h1>
	</header>

	<main class="col-md-12">

	<section class="panel">
		<form class="form" ng-submit="submit()">
			<div class="row">
				<div class="col-md-4">
					<fieldset class="form-group col-md-4">
						<div class="row">
							<label ng-repeat="material in materials" style="display:block;">
								<input type="checkbox" ng-model="materials" checklist-model="choices.materials" checklist-value="material"> {{material | capitalize}}
							</label>
						</div>
					</fieldset>
					<fieldset class="form-group col-md-8">
						<div class="row">
							<label ng-repeat="configuration in configurations" style="display:block;">
								<input type="checkbox" checklist-model="choices.configurations" checklist-value="configuration"> {{configuration | capitalize}}
							</label>
						</div>
					</fieldset>
				</div>
				<button type="submit" class="btn btn-primary">Submit</button>
			</div>
		</form>


		<uib-accordion close-others="false">
			<div class="cards products panel-group">
				<p>{{collections.results.length}} ranges found.</p>
				<uib-accordion-group ng-repeat="sofa in collections.results | limitTo: 10" is-open="true">

					<div class="card product col-md-12 panel panel-default">
						<div class="card-block">
							<div class="card-header">
								<div class="pull-right heart fa-stack fa-2x {{sofa.favourite}}"><i class="fa fa-circle fa-stack-2x"></i><a href="" class="fa fa-heart fa-stack-1x" ng-click="sofa.favourite=!sofa.favourite"></a></div>
								<h4 class="card-title">{{sofa.title | lowercase}} Collection from {{sofa.price}}</h4>
							</div>
							<div class="panel-collapse" role="tabpanel">
								<div class="panel-body">
									<div class="row">
										<div class="col-md-6">
										<slick settings="leadConfig">
											<figure ng-repeat="swatch in sofa.variants | limitTo: 1">
												<img ng-src="{{swatch.swatch}}" class="swatch">
											</figure>
										</slick>
										</div>
										<div class="micro-swatches col-md-6">
										<slick settings="microConfig">
											<figure ng-repeat="swatch in sofa.variants">
												<img ng-src="{{swatch.swatch}}" class="swatch">
											</figure>
										</slick>
										</div>
									</div>
									<div class="container">
										<ul class="info row list-inline">
											<li class="items col-md-3">Available in {{sofa.items}} items</li>
											<li class="fabrics col-md-3">Personalise with {{sofa.colours}} colours</li>
											<li class="delivered col-md-3">Delivered in 72 hours</li>
											<li class="action col-md-3"><a class="btn btn-black-outline" ng-href="#/collections/{{sofa.title}}">View Range</a></li>
										</ul>
									</div>
								</div>

							</div>
						</div>
					</div>
				</uib-accordion-group>


			</div>
		</uib-accordion>

			<div class="favourites">

				<h2><i class="fa fa-heart fa-fw"></i>Your favourites</h2>
				<ul class="list-inline">
					<li ng-show="sofa.favourite" ng-init="sofa.favourite = false" ng-repeat="sofa in results.results | limitTo: 10" class="fade">
						<h3>{{sofa.title}} - {{sofa.favourite}}</h3>
						<figure>
							<img ng-repeat="swatch in sofa.variants | limitTo:1" ng-src="{{swatch.swatch}}">
						</figure>
						<ul class="action-icons">
							<li class="trash fa-stack fa-1x {{sofa.favourite}}"><i class="fa fa-circle fa-stack-2x"></i><a href="" class="fa fa-trash-o fa-stack-1x" ng-click="sofa.favourite=!sofa.favourite"></a></li>
							<li class="search fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><a href="" class="fa fa-search fa-stack-1x"></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

	</section>

	</main>

</div>

controllers.js

angular.module('store', ['ngRoute','ngAnimate','checklist-model','wiz.validation','mgcrea.ngStrap','ui.bootstrap','angularSmoothscroll','slickCarousel'])



// Config
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  $routeProvider

  .when('/', {
    templateUrl: 'views/home.html'
  })

  .when('/stores/', {
	  controller: 'listCtrl',
	  templateUrl: 'views/stores.html'
  })

  .when('/stores/:id', {
    controller: 'detailCtrl',
    templateUrl: 'views/store.html'
  })

  .when('/search/', {
  	controller: 'searchCtrl',
  	templateUrl: 'views/search.html'
  })

  .when('/collections/:id', {
	  controller: 'collectionsCtrl',
	  templateUrl: 'views/collections.html'
  })

  .when('/termsandconditions/', {
  	templateUrl: 'views/termsandconditions.html'
  })

  .when('/privacy-policy', {
  	templateUrl: 'views/privacy-policy.html'
  })

  .when('/about-us', {
	  templateUrl: 'views/about-us.html'
  })

  .when('/outlet', {
	  templateUrl: 'views/outlet.html'
  })

  .when('/style-guide/', {
	  controller: 'stylesCtrl',
	  templateUrl: 'views/style-guide.html'
  })

  .otherwise({
    redirectTo: '/'
  });

}])

.config(function($dropdownProvider) {
	angular.extend($dropdownProvider.defaults, {
		html: true
	});
})

// Directives
.directive('smoothScroll', [
  '$log', '$timeout', '$window', function($log, $timeout, $window) {
    /*
        Retrieve the current vertical position
        @returns Current vertical position
    */

    var currentYPosition, elmYPosition, smoothScroll;
    currentYPosition = function() {
      if ($window.pageYOffset) {
        return $window.pageYOffset;
      }
      if ($window.document.documentElement && $window.document.documentElement.scrollTop) {
        return $window.document.documentElement.scrollTop;
      }
      if ($window.document.body.scrollTop) {
        return $window.document.body.scrollTop;
      }
      return 0;
    };
    /*
        Get the vertical position of a DOM element
        @param eID The DOM element id
        @returns The vertical position of element with id eID
    */

    elmYPosition = function(eID) {
      var elm, node, y;
      elm = document.getElementById(eID);
      if (elm) {
        y = elm.offsetTop;
        node = elm;
        while (node.offsetParent && node.offsetParent !== document.body) {
          node = node.offsetParent;
          y += node.offsetTop;
        }
        return y;
      }
      return 0;
    };
    /*
        Smooth scroll to element with a specific ID without offset
        @param eID The element id to scroll to
        @param offSet Scrolling offset
    */

    smoothScroll = function(eID, offSet) {
      var distance, i, leapY, speed, startY, step, stopY, timer, _results;
      startY = currentYPosition();
      stopY = elmYPosition(eID) - offSet;
      distance = (stopY > startY ? stopY - startY : startY - stopY);
      if (distance < 100) {
        scrollTo(0, stopY);
        return;
      }
      speed = Math.round(distance / 100);
      if (speed >= 20) {
        speed = 20;
      }
      step = Math.round(distance / 25);
      leapY = (stopY > startY ? startY + step : startY - step);
      timer = 0;
      if (stopY > startY) {
        i = startY;
        while (i < stopY) {
          setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
          leapY += step;
          if (leapY > stopY) {
            leapY = stopY;
          }
          timer++;
          i += step;
        }
        return;
      }
      i = startY;
      _results = [];
      while (i > stopY) {
        setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
        leapY -= step;
        if (leapY < stopY) {
          leapY = stopY;
        }
        timer++;
        _results.push(i -= step);
      }
      return _results;
    };
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        return element.bind('click', function() {
          var offset;
          if (attr.target) {
            offset = attr.offset || 10;
            $log.log('Smooth scroll: scrolling to', attr.target, 'with offset', offset);
            return smoothScroll(attr.target, offset);
          } else {
            return $log.warn('Smooth scroll: no target specified');
          }
        });
      }
    };
  }
])
.directive('smoothScrollJquery', [
  '$log', function($log) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        return element.bind('click', function() {
          var offset, speed, target;
          if (attr.target) {
            offset = attr.offset || 10;
            target = $('#' + attr.target);
            speed = attr.speed || 500;
            $log.log('Smooth scroll jQuery: scrolling to', attr.target, 'with offset', offset, 'and speed', speed);
            return $('html,body').stop().animate({
              scrollTop: target.offset().top - offset
            }, speed);
          } else {
            $log.log('Smooth scroll jQuery: no target specified, scrolling to top');
            return $('html,body').stop().animate({
              scrollTop: 0
            }, speed);
          }
        });
      }
    };
  }
])


// Filters
.filter('capitalize', function() {
	return function(input, scope) {
		if (input!=null)
		input = input.toLowerCase();
		return input.substring(0,1).toUpperCase()+input.substring(1);
	}
})

// Controllers

.controller('appCtrl', function($scope, $http, $location, $anchorScroll) {
	// Stores
	$http.get('//api.uat.sofology.co.uk/api/store/').success(function(data,status,headers,config) {
		$scope.stores = data;
	});

	// Collections
	$http.get('http://api.uat.sofology.co.uk/api/search/?query=::').success(function(data,status,headers,config) {
		$scope.collections = data;
	});


	$scope.scrollTo = function(id) {
		$location.hash(id);
		$anchorScroll();
	};
})


.controller('listCtrl', function($scope, $http) {
	$scope.postcode = "";
	$scope.submit = function() {
	    $http.get('http://api.uat.sofology.co.uk/api/localstores/' + $scope.postcode).success(function(data){
	        $scope.stores = data;
	    });
	};
})



.controller('detailCtrl', function($scope,$routeParams) {
	$scope.store = $scope.stores.filter(function(store) {
		return store.outlet == $routeParams.id
	})[0];
})




.controller('searchCtrl', function($scope, $http) {
	// Helper
	$scope.arrayToString = function(string) {
		return string.join(", ");
	}

	$scope.materials = [
		'Leather',
		'Fabric'
	];
	$scope.configurations = [
		'Sofas',
		'Chairs',
		'Corners',
		'Chaise'
	];
	$scope.choices = {
		materials: [],
		configurations: []
	};



	$scope.submit = function() {
    $basePath = 'http://api.uat.sofology.co.uk/api/search/?query=::';
    if ($scope.choices.materials != null) {
      if ($scope.choices.materials.length > 0) {
          $basePath = $basePath + 'material:' + $scope.choices.materials;
      }
    }
    if ($scope.choices.configurations != null) {
      if ($scope.choices.materials.length > 0) {
        $basePath = $basePath + ':';
      }
      if ($scope.choices.configurations.length > 0) {
        $basePath = $basePath + 'configuration:' + $scope.choices.configurations;
      }
    }

    $http.get($basePath).success(function(data,status,headers,config) {
			$scope.collections = data;
		});
	}

	$scope.leadConfig = {
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true
	};

	$scope.microConfig = {
		slidesToShow: 1,
		slidesToScroll: 1,
		rows: 3,
		slidesPerRow: 4,
		draggable: false,
		dots: true,
		arrows: false
	}

})

.controller('collectionsCtrl', function($scope,$routeParams) {
	$scope.collection = $scope.collections.filter(function(collection) {
		return collection.title == $routeParams.id
	})[0];
})

.controller('ModalCtrl', function($scope, $modal) {
  $scope.modal = {title: 'Title 123', content: 'Hello Modal<br />This is a multiline message!'};

  // Controller usage example
  //
  function MyModalController($scope) {
    $scope.title = 'Some Title ';
    $scope.content = 'Hello Modal<br />This is a multiline message from a controller!';
  }
  MyModalController.$inject = ['$scope'];
  var myModal = $modal({controller: MyModalController, templateUrl: 'views/partials/templates/modal.tpl.html', show: false});
  $scope.showModal = function() {
    myModal.$promise.then(myModal.show);
  };
  $scope.hideModal = function() {
    myModal.$promise.then(myModal.hide);
  };

})

// Bootstrap examples

.controller('stylesCtrl', function($scope, $templateCache, $alert) {
	$scope.panels = [
	    {title:'Collapsible Group Item #1', body: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.'},
	    {title:'Collapsible Group Item #2', body: 'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.'},
	    {title:'Collapsible Group Item #3', body: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.'}
  ];

  $scope.panels.activePanel = 1;

  $scope.multiplePanels = {
    activePanels: [0,1]
  };

  $scope.pushPanel = function() {
    $scope.panels.push({title: 'Collapsible Group Item #4', body: 'Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.'});
  };

  $scope.tabs = [
	  {
	    "title": "Home",
	    "content": "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica."
	  },
	  {
	    "title": "Profile",
	    "content": "Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee."
	  },
	  {
	    "title": "About",
	    "content": "Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade."
	  }
	];
	$scope.tabs.activeTab = "Home";

	$scope.dropdown = [
		{text: '<i class="fa fa-download"></i>&nbsp;Another action', href: '#anotherAction'},
		{text: '<i class="fa fa-globe"></i>&nbsp;Display an alert', click: '$alert("Holy guacamole!")'},
		{text: '<i class="fa fa-external-link"></i>&nbsp;External link', href: '/auth/facebook', target: '_self'},
		{divider: true},
		{text: 'Separated link', href: '#separatedLink'}
	];

	$scope.$alert = function(title) {
    $alert({title: title, content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', keyboard: true, show: true});
  };
})