Merge PR to Create Version 0.6.0

CONTRIBUTORS.md

@@ -14,3 +14,4 @@ _(ordered by first contribution)_
 - [Michel Boudreau](https://github.com/mboudreau)
 - [Sam Milledge](https://github.com/smilledge)
 - [Phuong Nguyen](https://github.com/phuongnd08)
+- [Mark Hamilton](https://github.com/thedarkcode)

Gruntfile.js

@@ -15,7 +15,7 @@ module.exports = function (grunt) {
 
     'use strict';
 
-    var banner = '/*! <%= pkg.name %> (v<%= pkg.version %>) - Copyright: 2013 - 2014, <%= pkg.author %> - <%= pkg.license %> */\n';
+    var banner = '/*! <%= pkg.name %> (v<%= pkg.version %>) - Copyright: 2013 - 2016, <%= pkg.author %> - <%= pkg.license %> */\n';
 
     grunt.initConfig({
         pkg: grunt.file.readJSON('bower.json'),
@@ -72,4 +72,4 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-karma');
     grunt.registerTask('test', ['jshint', 'karma:dist']);
     grunt.registerTask('default', ['test', 'concat', 'uglify']);
-};
+};

README.md

@@ -33,6 +33,8 @@ Okay, we assume that you have a collection of photos and you want to display the
 
 * `source`: The collection of objects that should be passed into your _deckgrid_ (by reference. Object change will be reflected in the grid).
 * `cardTemplate`: The URL to the template which represents one single card in the _deckgrid_.
+* `filter`: The filter to be applied to the source collection of objects.
+* `order-by`: The orderBy filter to be applied to the source collection of objects.
 
 ### Alternative ways to provide the template
 * `cardTemplateString` attribute: You can provide this attribute *instead* of the `cardTemplate` attribute to use the attribute value directly as the template. Example:
@@ -141,13 +143,21 @@ Do you use the `angular-deckgrid` and would like to be featured here? Just send
 - [theonegenerator.com](http://www.theonegenerator.com/): "This webapp is designed to any user in need of randomly generated data for testing cases, gaming and lottery spins."
 - [vazoo.de](https://vazoo.de/): "Vazoo - Der Beauty-Preisvergleich"
 - [vitaliator.com](https://vitaliator.com/): "Vitaliator - Das Fitnessnetzwerk"
+- [dryverlessads.com](https://dryverlessads.com/): "Dryverless Ads Offer Wall"
 
 ## Changelog
 
-### Version 0.6.0 (Future)
+### Version 0.7.0 (Future)
 
 - Open: [Bugfix] We need a solution to prevent the model binding for `innerHTML` templates (e.g. `ngIf` not working) [#44](https://github.com/akoenig/angular-deckgrid/issues/44)
 
+### Version 0.6.0 (20161011)
+
+- Add Filtering. [#88] (https://github.com/akoenig/angular-deckgrid/pull/88)
+- Add Order By. [#91] (https://github.com/akoenig/angular-deckgrid/issues/91)
+- Add Template Null check. [#94] (https://github.com/akoenig/angular-deckgrid/pull/94)
+- Fix destroy of appropriate deckgrid. [#108] (https://github.com/akoenig/angular-deckgrid/pull/108)
+
 ### Version 0.5.0 (20141031)
 
 - Upgraded AngularJS dependency in `bower.json` (v1.3.0).

angular-deckgrid.js

@@ -1,14 +1,14 @@
-/*! angular-deckgrid (v0.5.0) - Copyright: 2013 - 2014, André König (andre.koenig@posteo.de) - MIT */
+/*! angular-deckgrid (v0.6.0) - Copyright: 2013 - 2016, André König (andre.koenig@posteo.de) / Mark Hamilton (mark@dryverless.com) - MIT */
 /*
  * angular-deckgrid
  *
- * Copyright(c) 2013-2014 André König <andre.koenig@posteo.de>
+ * Copyright(c) 2013-2016 André König <andre.koenig@posteo.de> / Mark Hamilton <mark@dryverless.com>
  * MIT Licensed
  *
  */
 
 /**
- * @author André König (andre.koenig@posteo.de)
+ * @author André König (andre.koenig@posteo.de) / Mark Hamilton (mark@dryverless.com)
  *
  */
 
@@ -18,7 +18,7 @@ angular.module('akoenig.deckgrid').directive('deckgrid', [
 
     'DeckgridDescriptor',
 
-    function initialize (DeckgridDescriptor) {
+    function initialize(DeckgridDescriptor) {
 
         'use strict';
 
@@ -28,13 +28,13 @@ angular.module('akoenig.deckgrid').directive('deckgrid', [
 /*
  * angular-deckgrid
  *
- * Copyright(c) 2013-2014 André König <andre.koenig@posteo.de>
+ * Copyright(c) 2013-2016 André König <andre.koenig@posteo.de> / Mark Hamilton <mark@dryverless.com>
  * MIT Licensed
  *
  */
 
 /**
- * @author André König (andre.koenig@posteo.de)
+ * @author André König (andre.koenig@posteo.de) / Mark Hamilton (mark@dryverless.com)
  *
  */
 
@@ -43,7 +43,7 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
     'Deckgrid',
     '$templateCache',
 
-    function initialize (Deckgrid, $templateCache) {
+    function initialize(Deckgrid, $templateCache) {
 
         'use strict';
 
@@ -52,15 +52,17 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
          * directive description object.
          *
          */
-        function Descriptor () {
+        function Descriptor() {
             this.restrict = 'AE';
 
             this.template = '<div data-ng-repeat="column in columns" class="{{layout.classList}}">' +
                                 '<div data-ng-repeat="card in column" data-ng-include="cardTemplate"></div>' +
                             '</div>';
 
             this.scope = {
-                'model': '=source'
+                'model': '=source',
+                'filter': '=',
+                'orderBy': '='
             };
 
             //
@@ -75,35 +77,21 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
             // Will be incremented if using inline templates.
             //
             this.$$templateKeyIndex = 0;
-
         }
 
-        /**
-         * @private
-         *
-         * Cleanup method. Will be called when the
-         * deckgrid directive should be destroyed.
-         *
-         */
-        Descriptor.prototype.$$destroy = function $$destroy () {
-            this.$$deckgrid.destroy();
-        };
-
         /**
          * @private
          *
          * The deckgrid link method. Will instantiate the deckgrid.
          *
          */
-        Descriptor.prototype.$$link = function $$link (scope, elem, attrs, nullController, transclude) {
+        Descriptor.prototype.$$link = function $$link(scope, elem, attrs, nullController, transclude) {
             var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex) + '.html';
 
-            scope.$on('$destroy', this.$$destroy.bind(this));
-
             if (angular.isUndefined(attrs.cardtemplate)) {
                 if (angular.isUndefined(attrs.cardtemplatestring)) {
                     // use the provided inner html as template
-                    transclude(scope, function onTransclude (innerHTML) {
+                    transclude(scope, function onTransclude(innerHTML) {
                         var extractedInnerHTML = [],
                             i = 0,
                             len = innerHTML.length,
@@ -136,45 +124,49 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
             scope.mother = scope.$parent;
 
             this.$$deckgrid = Deckgrid.create(scope, elem[0]);
+
+            scope.$on('$destroy', this.$$deckgrid.destroy.bind(this.$$deckgrid));
         };
 
         return {
-            create : function create () {
+            create: function create() {
                 return new Descriptor();
             }
         };
     }
 ]);
-
 /*
  * angular-deckgrid
  *
- * Copyright(c) 2013-2014 André König <andre.koenig@posteo.de>
+ * Copyright(c) 2013-2016 André König <andre.koenig@posteo.de> / Mark Hamilton <mark@dryverless.com>
  * MIT Licensed
  *
  */
 
 /**
- * @author André König (andre.koenig@posteo.de)
+ * @author André König (andre.koenig@posteo.de) / Mark Hamilton (mark@dryverless.com)
  *
  */
 
 angular.module('akoenig.deckgrid').factory('Deckgrid', [
 
     '$window',
     '$log',
+    '$filter',
 
-    function initialize ($window, $log) {
+    function initialize($window, $log, $filter) {
 
         'use strict';
 
         /**
          * The deckgrid directive.
          *
          */
-        function Deckgrid (scope, element) {
+        function Deckgrid(scope, element) {
             var self = this,
                 watcher,
+                filterWatcher,
+                orderByWatcher,
                 mql;
 
             this.$$elem = element;
@@ -199,21 +191,26 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
 
             this.$$watchers.push(watcher);
 
+            filterWatcher = this.$$scope.$watchCollection('filter', this.$$onModelChange.bind(this));
+            orderByWatcher = this.$$scope.$watchCollection('orderBy', this.$$onModelChange.bind(this));
+            this.$$watchers.push(filterWatcher);
+            this.$$watchers.push(orderByWatcher);
+
             //
             // Register media query change events.
             //
-            angular.forEach(self.$$getMediaQueries(), function onIteration (rule) {
+            angular.forEach(self.$$getMediaQueries(), function onIteration(rule) {
                 var handler = self.$$onMediaQueryChange.bind(self);
 
-                function onDestroy () {
+                function onDestroy() {
                     rule.removeListener(handler);
                 }
 
                 rule.addListener(handler);
 
                 self.$$watchers.push(onDestroy);
             });
-            
+
             mql = $window.matchMedia('(orientation: portrait)');
             mql.addListener(self.$$onMediaQueryChange.bind(self));
 
@@ -230,7 +227,7 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * @return {array} An array with all respective styles.
          *
          */
-        Deckgrid.prototype.$$getMediaQueries = function $$getMediaQueries () {
+        Deckgrid.prototype.$$getMediaQueries = function $$getMediaQueries() {
             var stylesheets = [],
                 mediaQueries = [];
 
@@ -239,17 +236,17 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
                 Array.prototype.slice.call(document.querySelectorAll('link[rel=\'stylesheet\']'))
             );
 
-            function extractRules (stylesheet) {
+            function extractRules(stylesheet) {
                 try {
                     return (stylesheet.sheet.cssRules || []);
                 } catch (e) {
                     return [];
                 }
             }
 
-            function hasDeckgridStyles (rule) {
-                var regexe   = /\[(\w*-)?deckgrid\]::?before/g,
-                    i        = 0,
+            function hasDeckgridStyles(rule) {
+                var regexe = /\[(\w*-)?deckgrid\]::?before/g,
+                    i = 0,
                     selector = '';
 
                 if (!rule.media || angular.isUndefined(rule.cssRules)) {
@@ -269,10 +266,10 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
                 return false;
             }
 
-            angular.forEach(stylesheets, function onIteration (stylesheet) {
+            angular.forEach(stylesheets, function onIteration(stylesheet) {
                 var rules = extractRules(stylesheet);
 
-                angular.forEach(rules, function inRuleIteration (rule) {
+                angular.forEach(rules, function inRuleIteration(rule) {
                     if (hasDeckgridStyles(rule)) {
                         mediaQueries.push($window.matchMedia(rule.media.mediaText));
                     }
@@ -295,17 +292,17 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * NOTE that calling this method will trigger a complete template "redraw".
          *
          */
-        Deckgrid.prototype.$$createColumns = function $$createColumns () {
+        Deckgrid.prototype.$$createColumns = function $$createColumns() {
             var self = this;
 
             if (!this.$$scope.layout) {
                 return $log.error('angular-deckgrid: No CSS configuration found (see ' +
                                    'https://github.com/akoenig/angular-deckgrid#the-grid-configuration)');
             }
 
-            this.$$scope.columns = [];
+            self.$$scope.columns = [];
 
-            angular.forEach(this.$$scope.model, function onIteration (card, index) {
+            angular.forEach($filter('orderBy')($filter('filter')(self.$$scope.model, self.$$scope.filter), self.$$scope.orderBy), function onIteration(card, index) {
                 var column = (index % self.$$scope.layout.columns) | 0;
 
                 if (!self.$$scope.columns[column]) {
@@ -334,7 +331,7 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * You are responsible for defining the respective styles within your CSS.
          *
          */
-        Deckgrid.prototype.$$getLayout = function $$getLayout () {
+        Deckgrid.prototype.$$getLayout = function $$getLayout() {
             var content = $window.getComputedStyle(this.$$elem, ':before').content,
                 layout;
 
@@ -359,18 +356,18 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * Event that will be triggered if a CSS media query changed.
          *
          */
-        Deckgrid.prototype.$$onMediaQueryChange = function $$onMediaQueryChange () {
+        Deckgrid.prototype.$$onMediaQueryChange = function $$onMediaQueryChange() {
             var self = this,
                 layout = this.$$getLayout();
 
             //
             // Okay, the layout has changed.
             // Creating a new column structure is not avoidable.
             //
-            if (layout.columns !== this.$$scope.layout.columns) {
+            if (layout && layout.columns !== this.$$scope.layout.columns) {
                 self.$$scope.layout = layout;
 
-                self.$$scope.$apply(function onApply () {
+                self.$$scope.$apply(function onApply() {
                     self.$$createColumns();
                 });
             }
@@ -382,7 +379,7 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * Event that will be triggered when the source model has changed.
          *
          */
-        Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) {
+        Deckgrid.prototype.$$onModelChange = function $$onModelChange(newModel, oldModel) {
             var self = this;
 
             newModel = newModel || [];
@@ -398,7 +395,7 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
          * watchers and event handlers.
          *
          */
-        Deckgrid.prototype.destroy = function destroy () {
+        Deckgrid.prototype.destroy = function destroy() {
             var i = this.$$watchers.length - 1;
 
             for (i; i >= 0; i = i - 1) {
@@ -407,7 +404,7 @@ angular.module('akoenig.deckgrid').factory('Deckgrid', [
         };
 
         return {
-            create : function create (scope, element) {
+            create: function create(scope, element) {
                 return new Deckgrid(scope, element);
             }
         };