[Calf] Adds images to albums too and be DRY using Ember.Mixin.p

diff --git a/example/images/data/regina-spektor/1111.jpg b/example/images/data/regina-spektor/1111.jpg
new file mode 100644 (file)
index 0000000..135a30c
Binary files /dev/null and b/example/images/data/regina-spektor/1111.jpg differ

diff --git a/example/index.html b/example/index.html
index 4ad8344..60c0134 100644 (file)
--- a/example/index.html
+++ b/example/index.html
@@ -78,7 +78,7 @@
     <script type="text/x-handlebars" data-template-name="albums">
       {{#if controller.arrangedContent}}
         {{#each album in controller.arrangedContent}}
-          <li>{{view Calf.AlbumView contentBinding="album"}}</li>
+          {{view Calf.AlbumView contentBinding="album"}}
         {{/each}}
       {{else}}
         <li>No albums found.</li>
@@ -137,6 +137,8 @@
     <script src="javascripts/app/models/album.js"></script>
     <script src="javascripts/app/models/song.js"></script>
 
+    <script src="javascripts/app/mixins/haspicture.js"></script>
+
     <script src="javascripts/app/views/application.js"></script>
     <script src="javascripts/app/views/page.js"></script>
     <script src="javascripts/app/views/nowplaying.js"></script>

diff --git a/example/javascripts/app/mixins/haspicture.js b/example/javascripts/app/mixins/haspicture.js
new file mode 100644 (file)
index 0000000..2d0b090
--- /dev/null
+++ b/example/javascripts/app/mixins/haspicture.js
@@ -0,0 +1,20 @@
+(function(app, Ember) {
+    'use strict';
+
+    var HasPictureMixin = Ember.Mixin.create({
+        mouseEnter: function(e) {
+            var npc = app.get('router').get('nowPlayingController');
+            var picture = this.get('content').get('picture');
+
+            if (picture)
+                npc.setPicture(picture);
+        },
+
+        mouseLeave: function(e) {
+            var npc = app.get('router').get('nowPlayingController');
+            npc.unsetPicture();
+        }
+    });
+
+    app.HasPictureMixin = HasPictureMixin;
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/javascripts/app/store.js b/example/javascripts/app/store.js
index bf53e20..b979ec8 100644 (file)
--- a/example/javascripts/app/store.js
+++ b/example/javascripts/app/store.js
@@ -32,7 +32,8 @@
             {"id": 0,
              "artist_id": 0,
              "name": "11:11",
-             "year": 2001
+             "year": 2001,
+             "picture": "regina-spektor/1111.jpg"
             },
             {"id": 1,
              "artist_id": 0,

diff --git a/example/javascripts/app/views/album.js b/example/javascripts/app/views/album.js
index fb845b2..e358aed 100644 (file)
--- a/example/javascripts/app/views/album.js
+++ b/example/javascripts/app/views/album.js
@@ -1,9 +1,9 @@
 (function(app, Ember) {
     'use strict';
 
-    var AlbumView = Ember.View.extend({
+    var AlbumView = Ember.View.extend(app.HasPictureMixin, {
         templateName: 'album',
-        tagName: 'span',
+        tagName: 'li',
         classNames: ['album']
     });
 

diff --git a/example/javascripts/app/views/artist.js b/example/javascripts/app/views/artist.js
index 11672fe..8904817 100644 (file)
--- a/example/javascripts/app/views/artist.js
+++ b/example/javascripts/app/views/artist.js
@@ -1,23 +1,10 @@
 (function(app, Ember) {
     'use strict';
 
-    var ArtistView = Ember.View.extend({
+    var ArtistView = Ember.View.extend(app.HasPictureMixin, {
         templateName: 'artist',
         tagName: 'li',
-        classNames: ['artist'],
-
-        mouseEnter: function(e) {
-            var npc = app.get('router').get('nowPlayingController');
-            var picture = this.get('content').get('picture');
-
-            if (picture)
-                npc.setPicture(picture);
-        },
-
-        mouseLeave: function(e) {
-            var npc = app.get('router').get('nowPlayingController');
-            npc.unsetPicture();
-        }
+        classNames: ['artist']
     });
 
     app.ArtistView = ArtistView;

diff --git a/example/javascripts/app/views/haspicture.js b/example/javascripts/app/views/haspicture.js
new file mode 100644 (file)
index 0000000..12f54a0
--- /dev/null
+++ b/example/javascripts/app/views/haspicture.js
@@ -0,0 +1,20 @@
+(function(app, Ember) {
+    'use strict';
+
+    var HasPictureMixin = Ember.Mixin.extend({
+        mouseEnter: function(e) {
+            var npc = app.get('router').get('nowPlayingController');
+            var picture = this.get('content').get('picture');
+
+            if (picture)
+                npc.setPicture(picture);
+        },
+
+        mouseLeave: function(e) {
+            var npc = app.get('router').get('nowPlayingController');
+            npc.unsetPicture();
+        }
+    });
+
+    app.HasPictureMixin = HasPictureMixin;
+})(window.Calf, window.Ember);
\ No newline at end of file