├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .travis.yml ├── CONTRIBUTORS.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── angular-deckgrid.js ├── angular-deckgrid.min.js ├── bower.json ├── karma.conf.js ├── package.json ├── specs └── deckgrid.spec.js └── src ├── deckgrid.js ├── descriptor.js └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | 5 | indent_style = space 6 | indent_size = 4 7 | 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = false 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": false, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 4, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "angular": false, 23 | "expect": false, 24 | "$": false, 25 | "beforeEach": false, 26 | "it": false, 27 | "describe": false, 28 | "inject": false 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | before_script: 5 | - 'npm install -g bower grunt-cli' 6 | - 'bower install' 7 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | # angular-deckgrid - contributors 2 | 3 | _(ordered by first contribution)_ 4 | 5 | - [Ben Ma](http://github.com/benjaminma) 6 | - [Mike](http://github.com/mikenikles) 7 | - [Mladen Danic ](http://github.com/Maidomax) 8 | - [Patrick Stapleton](http://github.com/gdi2290) 9 | - [johnwest80](http://github.com/johnwest80) 10 | - [Sebastian Oergel](http://github.com/sebastianoe) 11 | - [Benchekroune](https://github.com/overben) 12 | - [Elad Ossadon](https://github.com/elado) 13 | - [Andrei Malyshev](https://github.com/k41n) 14 | - [Michel Boudreau](https://github.com/mboudreau) 15 | - [Sam Milledge](https://github.com/smilledge) 16 | - [Phuong Nguyen](https://github.com/phuongnd08) 17 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013-2014 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | module.exports = function (grunt) { 15 | 16 | 'use strict'; 17 | 18 | var banner = '/*! <%= pkg.name %> (v<%= pkg.version %>) - Copyright: 2013 - 2014, <%= pkg.author %> - <%= pkg.license %> */\n'; 19 | 20 | grunt.initConfig({ 21 | pkg: grunt.file.readJSON('bower.json'), 22 | uglify: { 23 | options: { 24 | preserveComments: 'some', 25 | report: 'gzip' 26 | }, 27 | dist: { 28 | src: '<%= pkg.name %>.js', 29 | dest: '<%= pkg.name %>.min.js' 30 | } 31 | }, 32 | concat: { 33 | options: { 34 | banner: banner 35 | }, 36 | dist: { 37 | src: ['src/index.js', 'src/descriptor.js', 'src/deckgrid.js'], 38 | dest: '<%= pkg.name %>.js' 39 | } 40 | }, 41 | jshint: { 42 | options: { 43 | jshintrc: '.jshintrc' 44 | }, 45 | all: [ 46 | 'Gruntfile.js', 47 | 'src/*.js', 48 | 'test/*.js' 49 | ] 50 | }, 51 | karma: { 52 | dist: { 53 | configFile: 'karma.conf.js' 54 | }, 55 | watch: { 56 | configFile: 'karma.conf.js', 57 | singleRun: false, 58 | autoWatch: true 59 | } 60 | }, 61 | ngmin: { 62 | dist: { 63 | src: '<%= pkg.name %>.js', 64 | dest: '<%= pkg.name %>.js' 65 | } 66 | } 67 | }); 68 | 69 | grunt.loadNpmTasks('grunt-contrib-uglify'); 70 | grunt.loadNpmTasks('grunt-contrib-concat'); 71 | grunt.loadNpmTasks('grunt-contrib-jshint'); 72 | grunt.loadNpmTasks('grunt-karma'); 73 | grunt.registerTask('test', ['jshint', 'karma:dist']); 74 | grunt.registerTask('default', ['test', 'concat', 'uglify']); 75 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2014 André König, Germany 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-deckgrid 2 | 3 | A lightweight masonry-like grid for AngularJS. 4 | 5 | [Website / Demo](http://akoenig.github.io/angular-deckgrid) 6 | 7 | ## Installation 8 | 9 | 1. `bower install --save angular-deckgrid` 10 | 2. Include `angular-deckgrid` in your HTML. 11 | 12 | ```html 13 | 14 | ``` 15 | 16 | 3. Inject the `angular-deckgrid` module in your application. 17 | 18 | ```js 19 | angular.module('your.module', [ 20 | 'akoenig.deckgrid' 21 | ]); 22 | ``` 23 | 24 | ## Usage 25 | 26 | The directive does not depend on the visual representation. All the responsiveness and beauty comes from your CSS file. But wait a second. Let's take a look how the directive will be integrated. An example: 27 | 28 |
29 | 30 | Okay, we assume that you have a collection of photos and you want to display these in a _deckgrid_, where every photo provides a _name_ and a _source_ URL. The internal structure of this collection is completely up to you. You can use any collection structure you want. No restrictions at all. 31 | 32 | ### The attributes 33 | 34 | * `source`: The collection of objects that should be passed into your _deckgrid_ (by reference. Object change will be reflected in the grid). 35 | * `cardTemplate`: The URL to the template which represents one single card in the _deckgrid_. 36 | 37 | ### Alternative ways to provide the template 38 | * `cardTemplateString` attribute: You can provide this attribute *instead* of the `cardTemplate` attribute to use the attribute value directly as the template. Example: 39 | 40 | ```html 41 |
42 | ``` 43 | 44 | * No template attribute: if you omit a template attribute (`cardTemplate` and `cardTemplateString`), the inner HTML of the directive will be used as the template, like in: 45 | 46 | ```html 47 |
48 |
49 |

{{card.title}}

50 | 51 | 52 |
53 |
54 | ``` 55 | 56 | _Note: if you use one of these alternative ways to provide the card template, you don't have to use an external template file. However, using such a file is recommended, esp. for more complex templates._ 57 | 58 | ### A complete example: Photogrid 59 | 60 | Okay, you have your controller ready and your template is fine so far. The only thing what is missing is a flexible grid. Let's start! 61 | 62 | **Your possible data structure** 63 | 64 | $scope.photos = [ 65 | {id: 'p1', 'title': 'A nice day!', src: "http://lorempixel.com/300/400/"}, 66 | {id: 'p2', 'title': 'Puh!', src: "http://lorempixel.com/300/400/sports"}, 67 | {id: 'p3', 'title': 'What a club!', src: "http://lorempixel.com/300/400/nightlife"} 68 | ]; 69 | 70 | **Your possible card template** 71 | _(it is completely up to you)_ 72 | 73 |
74 |

{{card.title}}

75 | 76 | 77 |
78 | 79 | **Accessing the card's index** 80 | 81 | In order to use the index of the current card from within the card's template, use the `$index` property of the `card` object, like: 82 | 83 | {{card.$index}} 84 | 85 | This index reflects the index of the corresponding object in the source collection. 86 | 87 | 88 | That's all! Ehm, no. If you run your application now, you will notice that there is only one column. What is missing? Well, we have to define the configuration for the visual representation. And what is the best place for something like this? Yes, for sure! Your CSS file(s). 89 | 90 | ## The grid configuration 91 | 92 | The grid items will be distributed by your configured CSS selectors. An example: 93 | 94 | .deckgrid[deckgrid]::before { 95 | /* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' */ 96 | content: '4 .column.column-1-4'; 97 | font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */ 98 | visibility: hidden; 99 | } 100 | 101 | .deckgrid .column { 102 | float: left; 103 | } 104 | 105 | .deckgrid .column-1-4 { 106 | width: 25%; 107 | } 108 | 109 | ### The responsiveness 110 | 111 | In order to support different grid representations for different screen sizes, you can define the respective media queries like: 112 | 113 | .deckgrid .column-1-1 { 114 | width: 100%; 115 | } 116 | 117 | @media screen and (max-width: 480px){ 118 | .deckgrid[deckgrid]::before { 119 | content: '1 .column.column-1-1'; 120 | } 121 | } 122 | ... 123 | 124 | This will define that for a device with a maximum screen width of 480px, only one column should be used. As I mentioned before. It is completely up to you how to define the column sizes. Go crazy. 125 | Although this example represents an adaptive kind of layout you are able to realize a responsive layout as well. The module is for the segmentation part, you have the full control over your layout. 126 | 127 | ### Scope 128 | 129 | You may wonder why it is not possible to access your scope in the card template. The `angular-deckgrid` uses directives of AngularJS internally which creates new scopes. To avoid the "anti-pattern" of using "$parent.$parent.$parent.yourFunction()" in the card template, the `angular-deckgrid` provides a shortcut `mother.*` which points to your scope. An example: 130 | 131 | 132 | 133 | A click on this button would execute the `doSomething()` function in your scope. 134 | 135 | ## In action 136 | 137 | Do you use the `angular-deckgrid` and would like to be featured here? Just send me an [email](mailto:andre.koenig@posteo.de) and I will add you and your application to this list. 138 | 139 | - [raindrop.io](http://raindrop.io/): "Smart bookmarks - A beautiful way to remember the most important" 140 | - [infowrap.com](https://www.infowrap.com/): "An infowrap is engineered to hold everything people need together on a single page and keep them up to date." 141 | - [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." 142 | - [vazoo.de](https://vazoo.de/): "Vazoo - Der Beauty-Preisvergleich" 143 | - [vitaliator.com](https://vitaliator.com/): "Vitaliator - Das Fitnessnetzwerk" 144 | 145 | ## Changelog 146 | 147 | ### Version 0.6.0 (Future) 148 | 149 | - 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) 150 | 151 | ### Version 0.5.0 (20141031) 152 | 153 | - Upgraded AngularJS dependency in `bower.json` (v1.3.0). 154 | - Changed the collection comparison which triggers the repaint (see #48). 155 | - Switched from `$watch` to `$watchCollection` to gain a bit more performance (see #56). 156 | - Ported the ordinary `undefined` checks to AngularJS standard functions. 157 | 158 | ### Version 0.4.4 (20140514) 159 | 160 | - Merged #47 161 | - Merged #51 162 | 163 | ### Version 0.4.3 (20140422) 164 | 165 | - [Bugfix] OnMediaQueryChange Listeners not being removed onDestroy. [#35](https://github.com/akoenig/angular-deckgrid/issues/35) 166 | 167 | ### Version 0.4.2 (20140422) 168 | 169 | - [Bugfix] Problems with device orientation [#46](https://github.com/akoenig/angular-deckgrid/issues/46) 170 | 171 | ### Version 0.4.1 (20140317) 172 | 173 | - [Bugfix] If model is not ready by rendering, there's an error [#31](https://github.com/akoenig/angular-deckgrid/issues/31) 174 | - [Feature] Multiple grids on page with cardTemplateString use the last template available [#33](https://github.com/akoenig/angular-deckgrid/issues/33) 175 | 176 | ### Version 0.4.0 (20140224) 177 | 178 | - [Feature] Functionality for passing inline templates. 179 | 180 | ### Version 0.3.0 (20140220) 181 | 182 | - [Feature] It is now possible to access the index of a card from within the card's template. This is accessible via the $index property of the card reference like {{card.$index}}. 183 | 184 | ### Version 0.2.3 (20140215) 185 | 186 | - [Bugfix] If `rule.cssRules` is undefined, the style investigation should always exit. 187 | 188 | ### Version 0.2.2 (20140214) 189 | 190 | - [Bugfix] Implemented check for the case if the `selectorText` of the css rules is undefined. 191 | 192 | ### Version 0.2.1 (20131127) 193 | 194 | - [Feature] There are some directives in the template of the `angular-deckgrid`, which creates new scopes. In order to access the parent scope which is responsible for embedding the `angular-deckgrid` directive, this release contains a shortcut for accessing your scope (`{{mother.*}}`). 195 | 196 | ### Version 0.2.0 (20131123) 197 | 198 | - [Feature] Better event handling of media query changes. 199 | 200 | ### Version 0.1.1 (20131122) 201 | 202 | - [Feature] Added log message for the case when the CSS configuration is not available ([#1](https://github.com/akoenig/angular-deckgrid/issues/1)) 203 | 204 | ### Version 0.1.0 (20131121) 205 | 206 | - Initial release. Functionality for rendering grids. 207 | 208 | ## Credits 209 | 210 | * All the [people](https://github.com/akoenig/angular-deckgrid/blob/master/CONTRIBUTORS.md) who made outstanding contributions to the `angular-deckgrid` so far. 211 | * [AngularJS](http://angularjs.org) Needless to say. You know the beast. One of the best frontend frameworks in the world. 212 | * [Rolando Murillo](http://rolandomurillo.com/) and [Giorgio Leveroni](https://github.com/ppold), the guys behind [salvattore](http://salvattore.com/) who inspired me to implement a similar solution for the AngularJS world. 213 | 214 | ## Author 215 | 216 | Copyright 2013 - 2014, [André König](http://iam.andrekoenig.info) (andre.koenig@posteo.de) 217 | -------------------------------------------------------------------------------- /angular-deckgrid.js: -------------------------------------------------------------------------------- 1 | /*! angular-deckgrid (v0.5.0) - Copyright: 2013 - 2014, André König (andre.koenig@posteo.de) - MIT */ 2 | /* 3 | * angular-deckgrid 4 | * 5 | * Copyright(c) 2013-2014 André König 6 | * MIT Licensed 7 | * 8 | */ 9 | 10 | /** 11 | * @author André König (andre.koenig@posteo.de) 12 | * 13 | */ 14 | 15 | angular.module('akoenig.deckgrid', []); 16 | 17 | angular.module('akoenig.deckgrid').directive('deckgrid', [ 18 | 19 | 'DeckgridDescriptor', 20 | 21 | function initialize (DeckgridDescriptor) { 22 | 23 | 'use strict'; 24 | 25 | return DeckgridDescriptor.create(); 26 | } 27 | ]); 28 | /* 29 | * angular-deckgrid 30 | * 31 | * Copyright(c) 2013-2014 André König 32 | * MIT Licensed 33 | * 34 | */ 35 | 36 | /** 37 | * @author André König (andre.koenig@posteo.de) 38 | * 39 | */ 40 | 41 | angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [ 42 | 43 | 'Deckgrid', 44 | '$templateCache', 45 | 46 | function initialize (Deckgrid, $templateCache) { 47 | 48 | 'use strict'; 49 | 50 | /** 51 | * This is a wrapper around the AngularJS 52 | * directive description object. 53 | * 54 | */ 55 | function Descriptor () { 56 | this.restrict = 'AE'; 57 | 58 | this.template = '
' + 59 | '
' + 60 | '
'; 61 | 62 | this.scope = { 63 | 'model': '=source' 64 | }; 65 | 66 | // 67 | // Will be created in the linking function. 68 | // 69 | this.$$deckgrid = null; 70 | 71 | this.transclude = true; 72 | this.link = this.$$link.bind(this); 73 | 74 | // 75 | // Will be incremented if using inline templates. 76 | // 77 | this.$$templateKeyIndex = 0; 78 | 79 | } 80 | 81 | /** 82 | * @private 83 | * 84 | * Cleanup method. Will be called when the 85 | * deckgrid directive should be destroyed. 86 | * 87 | */ 88 | Descriptor.prototype.$$destroy = function $$destroy () { 89 | this.$$deckgrid.destroy(); 90 | }; 91 | 92 | /** 93 | * @private 94 | * 95 | * The deckgrid link method. Will instantiate the deckgrid. 96 | * 97 | */ 98 | Descriptor.prototype.$$link = function $$link (scope, elem, attrs, nullController, transclude) { 99 | var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex) + '.html'; 100 | 101 | scope.$on('$destroy', this.$$destroy.bind(this)); 102 | 103 | if (angular.isUndefined(attrs.cardtemplate)) { 104 | if (angular.isUndefined(attrs.cardtemplatestring)) { 105 | // use the provided inner html as template 106 | transclude(scope, function onTransclude (innerHTML) { 107 | var extractedInnerHTML = [], 108 | i = 0, 109 | len = innerHTML.length, 110 | outerHTML; 111 | 112 | for (i; i < len; i = i + 1) { 113 | outerHTML = innerHTML[i].outerHTML; 114 | 115 | if (angular.isDefined(outerHTML)) { 116 | extractedInnerHTML.push(outerHTML); 117 | } 118 | } 119 | 120 | $templateCache.put(templateKey, extractedInnerHTML.join()); 121 | }); 122 | } else { 123 | // use the provided template string 124 | // 125 | // note: the attr is accessed via the elem object, as the attrs content 126 | // is already compiled and thus lacks the {{...}} expressions 127 | $templateCache.put(templateKey, elem.attr('cardtemplatestring')); 128 | } 129 | 130 | scope.cardTemplate = templateKey; 131 | } else { 132 | // use the provided template file 133 | scope.cardTemplate = attrs.cardtemplate; 134 | } 135 | 136 | scope.mother = scope.$parent; 137 | 138 | this.$$deckgrid = Deckgrid.create(scope, elem[0]); 139 | }; 140 | 141 | return { 142 | create : function create () { 143 | return new Descriptor(); 144 | } 145 | }; 146 | } 147 | ]); 148 | 149 | /* 150 | * angular-deckgrid 151 | * 152 | * Copyright(c) 2013-2014 André König 153 | * MIT Licensed 154 | * 155 | */ 156 | 157 | /** 158 | * @author André König (andre.koenig@posteo.de) 159 | * 160 | */ 161 | 162 | angular.module('akoenig.deckgrid').factory('Deckgrid', [ 163 | 164 | '$window', 165 | '$log', 166 | 167 | function initialize ($window, $log) { 168 | 169 | 'use strict'; 170 | 171 | /** 172 | * The deckgrid directive. 173 | * 174 | */ 175 | function Deckgrid (scope, element) { 176 | var self = this, 177 | watcher, 178 | mql; 179 | 180 | this.$$elem = element; 181 | this.$$watchers = []; 182 | 183 | this.$$scope = scope; 184 | this.$$scope.columns = []; 185 | 186 | // 187 | // The layout configuration will be parsed from 188 | // the pseudo "before element." There you have to save all 189 | // the column configurations. 190 | // 191 | this.$$scope.layout = this.$$getLayout(); 192 | 193 | this.$$createColumns(); 194 | 195 | // 196 | // Register model change. 197 | // 198 | watcher = this.$$scope.$watchCollection('model', this.$$onModelChange.bind(this)); 199 | 200 | this.$$watchers.push(watcher); 201 | 202 | // 203 | // Register media query change events. 204 | // 205 | angular.forEach(self.$$getMediaQueries(), function onIteration (rule) { 206 | var handler = self.$$onMediaQueryChange.bind(self); 207 | 208 | function onDestroy () { 209 | rule.removeListener(handler); 210 | } 211 | 212 | rule.addListener(handler); 213 | 214 | self.$$watchers.push(onDestroy); 215 | }); 216 | 217 | mql = $window.matchMedia('(orientation: portrait)'); 218 | mql.addListener(self.$$onMediaQueryChange.bind(self)); 219 | 220 | } 221 | 222 | /** 223 | * @private 224 | * 225 | * Extracts the media queries out of the stylesheets. 226 | * 227 | * This method will fetch the media queries out of the stylesheets that are 228 | * responsible for styling the angular-deckgrid. 229 | * 230 | * @return {array} An array with all respective styles. 231 | * 232 | */ 233 | Deckgrid.prototype.$$getMediaQueries = function $$getMediaQueries () { 234 | var stylesheets = [], 235 | mediaQueries = []; 236 | 237 | stylesheets = Array.prototype.concat.call( 238 | Array.prototype.slice.call(document.querySelectorAll('style[type=\'text/css\']')), 239 | Array.prototype.slice.call(document.querySelectorAll('link[rel=\'stylesheet\']')) 240 | ); 241 | 242 | function extractRules (stylesheet) { 243 | try { 244 | return (stylesheet.sheet.cssRules || []); 245 | } catch (e) { 246 | return []; 247 | } 248 | } 249 | 250 | function hasDeckgridStyles (rule) { 251 | var regexe = /\[(\w*-)?deckgrid\]::?before/g, 252 | i = 0, 253 | selector = ''; 254 | 255 | if (!rule.media || angular.isUndefined(rule.cssRules)) { 256 | return false; 257 | } 258 | 259 | i = rule.cssRules.length - 1; 260 | 261 | for (i; i >= 0; i = i - 1) { 262 | selector = rule.cssRules[i].selectorText; 263 | 264 | if (angular.isDefined(selector) && selector.match(regexe)) { 265 | return true; 266 | } 267 | } 268 | 269 | return false; 270 | } 271 | 272 | angular.forEach(stylesheets, function onIteration (stylesheet) { 273 | var rules = extractRules(stylesheet); 274 | 275 | angular.forEach(rules, function inRuleIteration (rule) { 276 | if (hasDeckgridStyles(rule)) { 277 | mediaQueries.push($window.matchMedia(rule.media.mediaText)); 278 | } 279 | }); 280 | }); 281 | 282 | return mediaQueries; 283 | }; 284 | 285 | /** 286 | * @private 287 | * 288 | * Creates the column segmentation. With other words: 289 | * This method creates the internal data structure from the 290 | * passed "source" attribute. Every card within this "source" 291 | * model will be passed into this internal column structure by 292 | * reference. So if you modify the data within your controller 293 | * this directive will reflect these changes immediately. 294 | * 295 | * NOTE that calling this method will trigger a complete template "redraw". 296 | * 297 | */ 298 | Deckgrid.prototype.$$createColumns = function $$createColumns () { 299 | var self = this; 300 | 301 | if (!this.$$scope.layout) { 302 | return $log.error('angular-deckgrid: No CSS configuration found (see ' + 303 | 'https://github.com/akoenig/angular-deckgrid#the-grid-configuration)'); 304 | } 305 | 306 | this.$$scope.columns = []; 307 | 308 | angular.forEach(this.$$scope.model, function onIteration (card, index) { 309 | var column = (index % self.$$scope.layout.columns) | 0; 310 | 311 | if (!self.$$scope.columns[column]) { 312 | self.$$scope.columns[column] = []; 313 | } 314 | 315 | card.$index = index; 316 | self.$$scope.columns[column].push(card); 317 | }); 318 | }; 319 | 320 | /** 321 | * @private 322 | * 323 | * Parses the configuration out of the configured CSS styles. 324 | * 325 | * Example: 326 | * 327 | * .deckgrid::before { 328 | * content: '3 .column.size-1-3'; 329 | * } 330 | * 331 | * Will result in a three column grid where each column will have the 332 | * classes: "column size-1-3". 333 | * 334 | * You are responsible for defining the respective styles within your CSS. 335 | * 336 | */ 337 | Deckgrid.prototype.$$getLayout = function $$getLayout () { 338 | var content = $window.getComputedStyle(this.$$elem, ':before').content, 339 | layout; 340 | 341 | if (content) { 342 | content = content.replace(/'/g, ''); // before e.g. '3 .column.size-1of3' 343 | content = content.replace(/"/g, ''); // before e.g. "3 .column.size-1of3" 344 | content = content.split(' '); 345 | 346 | if (2 === content.length) { 347 | layout = {}; 348 | layout.columns = (content[0] | 0); 349 | layout.classList = content[1].replace(/\./g, ' ').trim(); 350 | } 351 | } 352 | 353 | return layout; 354 | }; 355 | 356 | /** 357 | * @private 358 | * 359 | * Event that will be triggered if a CSS media query changed. 360 | * 361 | */ 362 | Deckgrid.prototype.$$onMediaQueryChange = function $$onMediaQueryChange () { 363 | var self = this, 364 | layout = this.$$getLayout(); 365 | 366 | // 367 | // Okay, the layout has changed. 368 | // Creating a new column structure is not avoidable. 369 | // 370 | if (layout.columns !== this.$$scope.layout.columns) { 371 | self.$$scope.layout = layout; 372 | 373 | self.$$scope.$apply(function onApply () { 374 | self.$$createColumns(); 375 | }); 376 | } 377 | }; 378 | 379 | /** 380 | * @private 381 | * 382 | * Event that will be triggered when the source model has changed. 383 | * 384 | */ 385 | Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) { 386 | var self = this; 387 | 388 | newModel = newModel || []; 389 | oldModel = oldModel || []; 390 | 391 | if (!angular.equals(oldModel, newModel)) { 392 | self.$$createColumns(); 393 | } 394 | }; 395 | 396 | /** 397 | * Destroys the directive. Takes care of cleaning all 398 | * watchers and event handlers. 399 | * 400 | */ 401 | Deckgrid.prototype.destroy = function destroy () { 402 | var i = this.$$watchers.length - 1; 403 | 404 | for (i; i >= 0; i = i - 1) { 405 | this.$$watchers[i](); 406 | } 407 | }; 408 | 409 | return { 410 | create : function create (scope, element) { 411 | return new Deckgrid(scope, element); 412 | } 413 | }; 414 | } 415 | ]); 416 | -------------------------------------------------------------------------------- /angular-deckgrid.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-deckgrid (v0.5.0) - Copyright: 2013 - 2014, André König (andre.koenig@posteo.de) - MIT */ 2 | angular.module("akoenig.deckgrid",[]),angular.module("akoenig.deckgrid").directive("deckgrid",["DeckgridDescriptor",function(a){"use strict";return a.create()}]),angular.module("akoenig.deckgrid").factory("DeckgridDescriptor",["Deckgrid","$templateCache",function(a,b){"use strict";function c(){this.restrict="AE",this.template='
',this.scope={model:"=source"},this.$$deckgrid=null,this.transclude=!0,this.link=this.$$link.bind(this),this.$$templateKeyIndex=0}return c.prototype.$$destroy=function(){this.$$deckgrid.destroy()},c.prototype.$$link=function(c,d,e,f,g){var h="deckgrid/innerHtmlTemplate"+ ++this.$$templateKeyIndex+".html";c.$on("$destroy",this.$$destroy.bind(this)),angular.isUndefined(e.cardtemplate)?(angular.isUndefined(e.cardtemplatestring)?g(c,function(a){var c,d=[],e=0,f=a.length;for(e;f>e;e+=1)c=a[e].outerHTML,angular.isDefined(c)&&d.push(c);b.put(h,d.join())}):b.put(h,d.attr("cardtemplatestring")),c.cardTemplate=h):c.cardTemplate=e.cardtemplate,c.mother=c.$parent,this.$$deckgrid=a.create(c,d[0])},{create:function(){return new c}}}]),angular.module("akoenig.deckgrid").factory("Deckgrid",["$window","$log",function(a,b){"use strict";function c(b,c){var d,e,f=this;this.$$elem=c,this.$$watchers=[],this.$$scope=b,this.$$scope.columns=[],this.$$scope.layout=this.$$getLayout(),this.$$createColumns(),d=this.$$scope.$watchCollection("model",this.$$onModelChange.bind(this)),this.$$watchers.push(d),angular.forEach(f.$$getMediaQueries(),function(a){function b(){a.removeListener(c)}var c=f.$$onMediaQueryChange.bind(f);a.addListener(c),f.$$watchers.push(b)}),e=a.matchMedia("(orientation: portrait)"),e.addListener(f.$$onMediaQueryChange.bind(f))}return c.prototype.$$getMediaQueries=function(){function b(a){try{return a.sheet.cssRules||[]}catch(b){return[]}}function c(a){var b=/\[(\w*-)?deckgrid\]::?before/g,c=0,d="";if(!a.media||angular.isUndefined(a.cssRules))return!1;for(c=a.cssRules.length-1;c>=0;c-=1)if(d=a.cssRules[c].selectorText,angular.isDefined(d)&&d.match(b))return!0;return!1}var d=[],e=[];return d=Array.prototype.concat.call(Array.prototype.slice.call(document.querySelectorAll("style[type='text/css']")),Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))),angular.forEach(d,function(d){var f=b(d);angular.forEach(f,function(b){c(b)&&e.push(a.matchMedia(b.media.mediaText))})}),e},c.prototype.$$createColumns=function(){var a=this;return this.$$scope.layout?(this.$$scope.columns=[],void angular.forEach(this.$$scope.model,function(b,c){var d=c%a.$$scope.layout.columns|0;a.$$scope.columns[d]||(a.$$scope.columns[d]=[]),b.$index=c,a.$$scope.columns[d].push(b)})):b.error("angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration)")},c.prototype.$$getLayout=function(){var b,c=a.getComputedStyle(this.$$elem,":before").content;return c&&(c=c.replace(/'/g,""),c=c.replace(/"/g,""),c=c.split(" "),2===c.length&&(b={},b.columns=0|c[0],b.classList=c[1].replace(/\./g," ").trim())),b},c.prototype.$$onMediaQueryChange=function(){var a=this,b=this.$$getLayout();b.columns!==this.$$scope.layout.columns&&(a.$$scope.layout=b,a.$$scope.$apply(function(){a.$$createColumns()}))},c.prototype.$$onModelChange=function(a,b){var c=this;a=a||[],b=b||[],angular.equals(b,a)||c.$$createColumns()},c.prototype.destroy=function(){var a=this.$$watchers.length-1;for(a;a>=0;a-=1)this.$$watchers[a]()},{create:function(a,b){return new c(a,b)}}}]); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-deckgrid", 3 | "version": "0.5.0", 4 | "author": "André König (andre.koenig@posteo.de)", 5 | "description": "A lightweight masonry-like grid for AngularJS.", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git@github.com:akoenig/angular-deckgrid.git" 10 | }, 11 | "main": "./angular-deckgrid.js", 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "bower_components", 16 | "src", 17 | "test", 18 | "*.min.js", 19 | "*.conf.js", 20 | "*.html", 21 | "Gruntfile.js", 22 | "package.json" 23 | ], 24 | "dependencies": { 25 | "angular": "~1.3.0" 26 | }, 27 | "devDependencies": { 28 | "angular-mocks": "~1.3.2", 29 | "jquery": "~2.0.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013-2014 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | module.exports = function (config) { 15 | 16 | 'use strict'; 17 | 18 | config.set({ 19 | basePath: '', 20 | 21 | frameworks: ['jasmine'], 22 | 23 | files: [ 24 | 'bower_components/jquery/jquery.js', 25 | 'bower_components/angular/angular.js', 26 | 'bower_components/angular-mocks/angular-mocks.js', 27 | 'src/index.js', 28 | 'src/descriptor.js', 29 | 'src/deckgrid.js', 30 | 'specs/*.js' 31 | ], 32 | 33 | exclude: [], 34 | 35 | port: 8080, 36 | 37 | logLevel: config.LOG_DEBUG, 38 | 39 | autoWatch: false, 40 | 41 | browsers: ['Chrome'], 42 | 43 | singleRun: true 44 | }); 45 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-deckgrid", 3 | "version": "0.5.0", 4 | "author": "André König (andre.koenig@posteo.de)", 5 | "description": "A lightweight masonry-like grid for AngularJS.", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git@github.com:akoenig/angular-deckgrid.git" 10 | }, 11 | "devDependencies": { 12 | "grunt-contrib-uglify": "~0.2.2", 13 | "grunt-contrib-jshint": "~0.7.1", 14 | "grunt": "~0.4.1" 15 | , "grunt-contrib-concat": "~0.3.0", 16 | "grunt-karma": "~0.7.1", 17 | "karma-jasmine": "~0.1.5", 18 | "karma-chrome-launcher": "~0.1.2" 19 | }, 20 | "scripts": { 21 | "test": "grunt test" 22 | }, 23 | "main" : "angular-deckgrid.js" 24 | } 25 | -------------------------------------------------------------------------------- /specs/deckgrid.spec.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | describe('Unit: The angular-deckgrid', function () { 15 | 16 | 'use strict'; 17 | 18 | var $elem, 19 | columnCount = 3, 20 | photos = [ 21 | {id: 'photo-1', src: 'http://lorempixel.com/300/400'}, 22 | {id: 'photo-2', src: 'http://lorempixel.com/300/400'}, 23 | {id: 'photo-3', src: 'http://lorempixel.com/300/400'}, 24 | {id: 'photo-4', src: 'http://lorempixel.com/300/400'}, 25 | {id: 'photo-5', src: 'http://lorempixel.com/300/400'}, 26 | {id: 'photo-6', src: 'http://lorempixel.com/300/400'}, 27 | {id: 'photo-7', src: 'http://lorempixel.com/300/400'} 28 | ]; 29 | 30 | beforeEach(angular.mock.module('akoenig.deckgrid')); 31 | 32 | it('should have three columns and 3 images in the first column', inject([ 33 | 34 | '$rootScope', 35 | '$compile', 36 | '$templateCache', 37 | '$window', 38 | 39 | function ($rootScope, $compile, $templateCache, $window) { 40 | var $photos, 41 | $columns, 42 | $indices; 43 | 44 | $window.getComputedStyle = function () { 45 | return { 46 | content: '\''+ columnCount + ' .column.size-1-' + columnCount + '\'' 47 | }; 48 | }; 49 | 50 | $rootScope.photos = photos; 51 | 52 | // 53 | // Mock the template request 54 | // 55 | $templateCache.put('views/deckgrid-card.html', '{{card.id}}' + 56 | '{{card.$index}}'); 57 | 58 | $elem = $compile('')($rootScope); 59 | 60 | $rootScope.$digest(); 61 | 62 | $photos = $elem.find('.column:first-child img'); 63 | $columns = $elem.find('.column'); 64 | $indices = $elem.find('.column div:first-child span'); 65 | 66 | expect($columns.length).toBe(columnCount); 67 | expect($photos.length).toBe(3); 68 | 69 | expect($($photos[0]).attr('alt')).toBe(photos[0].id); 70 | expect($($photos[1]).attr('alt')).toBe(photos[3].id); 71 | expect($($photos[2]).attr('alt')).toBe(photos[6].id); 72 | 73 | expect($($indices[0]).text()).toBe('0'); 74 | expect($($indices[1]).text()).toBe('1'); 75 | expect($($indices[2]).text()).toBe('2'); 76 | } 77 | ])); 78 | 79 | it('should render the inner html of the directive if no card template attribute is specified', inject([ 80 | 81 | '$rootScope', 82 | '$compile', 83 | '$window', 84 | 85 | function ($rootScope, $compile, $window) { 86 | var $photos, 87 | $columns; 88 | 89 | $window.getComputedStyle = function () { 90 | return { 91 | content: '\''+ columnCount + ' .column.size-1-' + columnCount + '\'' 92 | }; 93 | }; 94 | 95 | $rootScope.photos = photos; 96 | 97 | // 98 | // use inner html as the card template 99 | // 100 | $elem = $compile('' + 101 | '{{card.id}}')($rootScope); 102 | 103 | $rootScope.$digest(); 104 | 105 | $photos = $elem.find('.column:first-child img'); 106 | $columns = $elem.find('.column'); 107 | 108 | expect($columns.length).toBe(columnCount); 109 | expect($photos.length).toBe(3); 110 | 111 | expect($($photos[0]).attr('alt')).toBe(photos[0].id); 112 | expect($($photos[1]).attr('alt')).toBe(photos[3].id); 113 | expect($($photos[2]).attr('alt')).toBe(photos[6].id); 114 | } 115 | ])); 116 | 117 | it('should render the html of the provided cardTemplateString attribute if this is provided instead of the cardTemplate one', inject([ 118 | 119 | '$rootScope', 120 | '$compile', 121 | '$window', 122 | 123 | function ($rootScope, $compile, $window) { 124 | var $divs, 125 | $columns; 126 | 127 | $window.getComputedStyle = function () { 128 | return { 129 | content: '\''+ columnCount + ' .column.size-1-' + columnCount + '\'' 130 | }; 131 | }; 132 | 133 | $rootScope.photos = photos; 134 | 135 | // 136 | // use the provided attribute value 137 | // 138 | $elem = $compile('')($rootScope); 140 | 141 | $rootScope.$digest(); 142 | 143 | $divs = $elem.find('.column:first-child p'); 144 | $columns = $elem.find('.column'); 145 | 146 | expect($columns.length).toBe(columnCount); 147 | expect($divs.length).toBe(3); 148 | 149 | expect($($divs[0]).text()).toBe(photos[0].id); 150 | expect($($divs[1]).text()).toBe(photos[3].id); 151 | expect($($divs[2]).text()).toBe(photos[6].id); 152 | } 153 | ])); 154 | }); -------------------------------------------------------------------------------- /src/deckgrid.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013-2014 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | angular.module('akoenig.deckgrid').factory('Deckgrid', [ 15 | 16 | '$window', 17 | '$log', 18 | 19 | function initialize ($window, $log) { 20 | 21 | 'use strict'; 22 | 23 | /** 24 | * The deckgrid directive. 25 | * 26 | */ 27 | function Deckgrid (scope, element) { 28 | var self = this, 29 | watcher, 30 | mql; 31 | 32 | this.$$elem = element; 33 | this.$$watchers = []; 34 | 35 | this.$$scope = scope; 36 | this.$$scope.columns = []; 37 | 38 | // 39 | // The layout configuration will be parsed from 40 | // the pseudo "before element." There you have to save all 41 | // the column configurations. 42 | // 43 | this.$$scope.layout = this.$$getLayout(); 44 | 45 | this.$$createColumns(); 46 | 47 | // 48 | // Register model change. 49 | // 50 | watcher = this.$$scope.$watchCollection('model', this.$$onModelChange.bind(this)); 51 | 52 | this.$$watchers.push(watcher); 53 | 54 | // 55 | // Register media query change events. 56 | // 57 | angular.forEach(self.$$getMediaQueries(), function onIteration (rule) { 58 | var handler = self.$$onMediaQueryChange.bind(self); 59 | 60 | function onDestroy () { 61 | rule.removeListener(handler); 62 | } 63 | 64 | rule.addListener(handler); 65 | 66 | self.$$watchers.push(onDestroy); 67 | }); 68 | 69 | mql = $window.matchMedia('(orientation: portrait)'); 70 | mql.addListener(self.$$onMediaQueryChange.bind(self)); 71 | 72 | } 73 | 74 | /** 75 | * @private 76 | * 77 | * Extracts the media queries out of the stylesheets. 78 | * 79 | * This method will fetch the media queries out of the stylesheets that are 80 | * responsible for styling the angular-deckgrid. 81 | * 82 | * @return {array} An array with all respective styles. 83 | * 84 | */ 85 | Deckgrid.prototype.$$getMediaQueries = function $$getMediaQueries () { 86 | var stylesheets = [], 87 | mediaQueries = []; 88 | 89 | stylesheets = Array.prototype.concat.call( 90 | Array.prototype.slice.call(document.querySelectorAll('style[type=\'text/css\']')), 91 | Array.prototype.slice.call(document.querySelectorAll('link[rel=\'stylesheet\']')) 92 | ); 93 | 94 | function extractRules (stylesheet) { 95 | try { 96 | return (stylesheet.sheet.cssRules || []); 97 | } catch (e) { 98 | return []; 99 | } 100 | } 101 | 102 | function hasDeckgridStyles (rule) { 103 | var regexe = /\[(\w*-)?deckgrid\]::?before/g, 104 | i = 0, 105 | selector = ''; 106 | 107 | if (!rule.media || angular.isUndefined(rule.cssRules)) { 108 | return false; 109 | } 110 | 111 | i = rule.cssRules.length - 1; 112 | 113 | for (i; i >= 0; i = i - 1) { 114 | selector = rule.cssRules[i].selectorText; 115 | 116 | if (angular.isDefined(selector) && selector.match(regexe)) { 117 | return true; 118 | } 119 | } 120 | 121 | return false; 122 | } 123 | 124 | angular.forEach(stylesheets, function onIteration (stylesheet) { 125 | var rules = extractRules(stylesheet); 126 | 127 | angular.forEach(rules, function inRuleIteration (rule) { 128 | if (hasDeckgridStyles(rule)) { 129 | mediaQueries.push($window.matchMedia(rule.media.mediaText)); 130 | } 131 | }); 132 | }); 133 | 134 | return mediaQueries; 135 | }; 136 | 137 | /** 138 | * @private 139 | * 140 | * Creates the column segmentation. With other words: 141 | * This method creates the internal data structure from the 142 | * passed "source" attribute. Every card within this "source" 143 | * model will be passed into this internal column structure by 144 | * reference. So if you modify the data within your controller 145 | * this directive will reflect these changes immediately. 146 | * 147 | * NOTE that calling this method will trigger a complete template "redraw". 148 | * 149 | */ 150 | Deckgrid.prototype.$$createColumns = function $$createColumns () { 151 | var self = this; 152 | 153 | if (!this.$$scope.layout) { 154 | return $log.error('angular-deckgrid: No CSS configuration found (see ' + 155 | 'https://github.com/akoenig/angular-deckgrid#the-grid-configuration)'); 156 | } 157 | 158 | this.$$scope.columns = []; 159 | 160 | angular.forEach(this.$$scope.model, function onIteration (card, index) { 161 | var column = (index % self.$$scope.layout.columns) | 0; 162 | 163 | if (!self.$$scope.columns[column]) { 164 | self.$$scope.columns[column] = []; 165 | } 166 | 167 | card.$index = index; 168 | self.$$scope.columns[column].push(card); 169 | }); 170 | }; 171 | 172 | /** 173 | * @private 174 | * 175 | * Parses the configuration out of the configured CSS styles. 176 | * 177 | * Example: 178 | * 179 | * .deckgrid::before { 180 | * content: '3 .column.size-1-3'; 181 | * } 182 | * 183 | * Will result in a three column grid where each column will have the 184 | * classes: "column size-1-3". 185 | * 186 | * You are responsible for defining the respective styles within your CSS. 187 | * 188 | */ 189 | Deckgrid.prototype.$$getLayout = function $$getLayout () { 190 | var content = $window.getComputedStyle(this.$$elem, ':before').content, 191 | layout; 192 | 193 | if (content) { 194 | content = content.replace(/'/g, ''); // before e.g. '3 .column.size-1of3' 195 | content = content.replace(/"/g, ''); // before e.g. "3 .column.size-1of3" 196 | content = content.split(' '); 197 | 198 | if (2 === content.length) { 199 | layout = {}; 200 | layout.columns = (content[0] | 0); 201 | layout.classList = content[1].replace(/\./g, ' ').trim(); 202 | } 203 | } 204 | 205 | return layout; 206 | }; 207 | 208 | /** 209 | * @private 210 | * 211 | * Event that will be triggered if a CSS media query changed. 212 | * 213 | */ 214 | Deckgrid.prototype.$$onMediaQueryChange = function $$onMediaQueryChange () { 215 | var self = this, 216 | layout = this.$$getLayout(); 217 | 218 | // 219 | // Okay, the layout has changed. 220 | // Creating a new column structure is not avoidable. 221 | // 222 | if (layout.columns !== this.$$scope.layout.columns) { 223 | self.$$scope.layout = layout; 224 | 225 | self.$$scope.$apply(function onApply () { 226 | self.$$createColumns(); 227 | }); 228 | } 229 | }; 230 | 231 | /** 232 | * @private 233 | * 234 | * Event that will be triggered when the source model has changed. 235 | * 236 | */ 237 | Deckgrid.prototype.$$onModelChange = function $$onModelChange (newModel, oldModel) { 238 | var self = this; 239 | 240 | newModel = newModel || []; 241 | oldModel = oldModel || []; 242 | 243 | if (!angular.equals(oldModel, newModel)) { 244 | self.$$createColumns(); 245 | } 246 | }; 247 | 248 | /** 249 | * Destroys the directive. Takes care of cleaning all 250 | * watchers and event handlers. 251 | * 252 | */ 253 | Deckgrid.prototype.destroy = function destroy () { 254 | var i = this.$$watchers.length - 1; 255 | 256 | for (i; i >= 0; i = i - 1) { 257 | this.$$watchers[i](); 258 | } 259 | }; 260 | 261 | return { 262 | create : function create (scope, element) { 263 | return new Deckgrid(scope, element); 264 | } 265 | }; 266 | } 267 | ]); 268 | -------------------------------------------------------------------------------- /src/descriptor.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013-2014 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [ 15 | 16 | 'Deckgrid', 17 | '$templateCache', 18 | 19 | function initialize (Deckgrid, $templateCache) { 20 | 21 | 'use strict'; 22 | 23 | /** 24 | * This is a wrapper around the AngularJS 25 | * directive description object. 26 | * 27 | */ 28 | function Descriptor () { 29 | this.restrict = 'AE'; 30 | 31 | this.template = '
' + 32 | '
' + 33 | '
'; 34 | 35 | this.scope = { 36 | 'model': '=source' 37 | }; 38 | 39 | // 40 | // Will be created in the linking function. 41 | // 42 | this.$$deckgrid = null; 43 | 44 | this.transclude = true; 45 | this.link = this.$$link.bind(this); 46 | 47 | // 48 | // Will be incremented if using inline templates. 49 | // 50 | this.$$templateKeyIndex = 0; 51 | 52 | } 53 | 54 | /** 55 | * @private 56 | * 57 | * Cleanup method. Will be called when the 58 | * deckgrid directive should be destroyed. 59 | * 60 | */ 61 | Descriptor.prototype.$$destroy = function $$destroy () { 62 | this.$$deckgrid.destroy(); 63 | }; 64 | 65 | /** 66 | * @private 67 | * 68 | * The deckgrid link method. Will instantiate the deckgrid. 69 | * 70 | */ 71 | Descriptor.prototype.$$link = function $$link (scope, elem, attrs, nullController, transclude) { 72 | var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex) + '.html'; 73 | 74 | scope.$on('$destroy', this.$$destroy.bind(this)); 75 | 76 | if (angular.isUndefined(attrs.cardtemplate)) { 77 | if (angular.isUndefined(attrs.cardtemplatestring)) { 78 | // use the provided inner html as template 79 | transclude(scope, function onTransclude (innerHTML) { 80 | var extractedInnerHTML = [], 81 | i = 0, 82 | len = innerHTML.length, 83 | outerHTML; 84 | 85 | for (i; i < len; i = i + 1) { 86 | outerHTML = innerHTML[i].outerHTML; 87 | 88 | if (angular.isDefined(outerHTML)) { 89 | extractedInnerHTML.push(outerHTML); 90 | } 91 | } 92 | 93 | $templateCache.put(templateKey, extractedInnerHTML.join()); 94 | }); 95 | } else { 96 | // use the provided template string 97 | // 98 | // note: the attr is accessed via the elem object, as the attrs content 99 | // is already compiled and thus lacks the {{...}} expressions 100 | $templateCache.put(templateKey, elem.attr('cardtemplatestring')); 101 | } 102 | 103 | scope.cardTemplate = templateKey; 104 | } else { 105 | // use the provided template file 106 | scope.cardTemplate = attrs.cardtemplate; 107 | } 108 | 109 | scope.mother = scope.$parent; 110 | 111 | this.$$deckgrid = Deckgrid.create(scope, elem[0]); 112 | }; 113 | 114 | return { 115 | create : function create () { 116 | return new Descriptor(); 117 | } 118 | }; 119 | } 120 | ]); 121 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * angular-deckgrid 3 | * 4 | * Copyright(c) 2013-2014 André König 5 | * MIT Licensed 6 | * 7 | */ 8 | 9 | /** 10 | * @author André König (andre.koenig@posteo.de) 11 | * 12 | */ 13 | 14 | angular.module('akoenig.deckgrid', []); 15 | 16 | angular.module('akoenig.deckgrid').directive('deckgrid', [ 17 | 18 | 'DeckgridDescriptor', 19 | 20 | function initialize (DeckgridDescriptor) { 21 | 22 | 'use strict'; 23 | 24 | return DeckgridDescriptor.create(); 25 | } 26 | ]); --------------------------------------------------------------------------------