briangonzalez · November 15, 2016 22:31 · Nov 15, 2016 · Nov 15, 2016 · Nov 15, 2016
diff --git a/styles.app.css b/styles.app.css
@@ -2,6 +2,7 @@ body {
   margin: 12px 16px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 12pt;
+  background-color: #483b55;
 }
 
 .blur-loaded-image {
@@ -10,6 +11,10 @@ body {
   background-size: cover;
   background-position: center;
   transition: all 500ms ease;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .blur {

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,9 +1 @@
-<h1>Welcome to {{appName}}</h1>
-<br>
-<br>
-{{outlet}}
-
-{{ blur-loaded-image rawSrc="https://dollarshaveclub.imgix.net/product-images/detail/BRS-2AL-CURRENT-5792000c12196c0cb90ad677680ca0e9.png" }}
-
-<br>
-<br>
+{{ blur-loaded-image rawSrc="https://dollarshaveclub.imgix.net/product-images/detail/BRS-2AL-CURRENT-5792000c12196c0cb90ad677680ca0e9.png" }}
diff --git a/templates.components.blur-loaded-image.hbs b/templates.components.blur-loaded-image.hbs
@@ -1,2 +1 @@
-Test
 <div class='blur-loaded-image' style="background-image: url('{{ src }}')"></div>
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -3,7 +3,7 @@
 <br>
 {{outlet}}
 
-{{ blur-loaded-image rawSrc="https://assets.imgix.net/examples/kingfisher.jpg" }}
+{{ blur-loaded-image rawSrc="https://dollarshaveclub.imgix.net/product-images/detail/BRS-2AL-CURRENT-5792000c12196c0cb90ad677680ca0e9.png" }}
 
 <br>
 <br>
diff --git a/components.blur-loaded-image.js b/components.blur-loaded-image.js
@@ -0,0 +1,26 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  classNameBindings: [ 'loaded:no-blur:blur' ],
+
+  loaded: false,
+
+  src: Ember.computed(function () {
+    return `${this.get('rawSrc')}?w=10`;
+  }),
+
+  fetchLargeImage: Ember.on('didInsertElement', function () {
+
+    const largeImage = new Image();
+    const rawSrc = this.get('rawSrc');
+
+    largeImage.onload = () => {
+      this.set('loaded', true);
+      this.set('src', rawSrc);
+    };
+
+    largeImage.src = rawSrc;
+  })
+
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle'
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,17 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.blur-loaded-image {
+  width: 500px;
+  height: 500px;
+  background-size: cover;
+  background-position: center;
+  transition: all 500ms ease;
+}
+
+.blur {
+	filter: blur(30px);
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,9 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+{{outlet}}
+
+{{ blur-loaded-image rawSrc="https://assets.imgix.net/examples/kingfisher.jpg" }}
+
+<br>
+<br>
diff --git a/templates.components.blur-loaded-image.hbs b/templates.components.blur-loaded-image.hbs
@@ -0,0 +1,2 @@
+Test
+<div class='blur-loaded-image' style="background-image: url('{{ src }}')"></div>
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,18 @@
+{
+  "version": "0.10.6",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.9.0",
+    "ember-data": "2.9.0",
+    "ember-template-compiler": "2.9.0",
+    "ember-testing": "2.9.0"
+  },
+  "addons": {}
+}
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		Test
		<div class='blur-loaded-image' style="background-image: url('{{ src }}')"></div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Test
		<div class='blur-loaded-image' style="background-image: url('{{ src }}')"></div>