create a tutorials#new page in backbone.

5 files changed, 72 insertions, 0 deletions

diff --git a/app/assets/javascripts/backbone/controllers/tutorials_controller.js.coffee b/app/assets/javascripts/backbone/controllers/tutorials_controller.js.coffee
index 86d84d5b..7bddf3ac 100644
--- a/app/assets/javascripts/backbone/controllers/tutorials_controller.js.coffee
+++ b/app/assets/javascripts/backbone/controllers/tutorials_controller.js.coffee
@@ -6,3 +6,6 @@ class CakeSide.Controllers.TutorialsController extends Marionette.Controller
 
   index: ->
     @content_region.show(new @views.IndexView(collection: @tutorials))
+
+  new: ->
+    @content_region.show(new @views.NewView(collection: @tutorials))
diff --git a/app/assets/javascripts/backbone/models/tutorials.js.coffee b/app/assets/javascripts/backbone/models/tutorials.js.coffee
index d7eb524b..1ee1b96b 100644
--- a/app/assets/javascripts/backbone/models/tutorials.js.coffee
+++ b/app/assets/javascripts/backbone/models/tutorials.js.coffee
@@ -3,6 +3,10 @@ class CakeSide.Models.Tutorial extends Backbone.Model
 
   defaults:
     id: null
+    url: null
+    image_url: null
+    heading: null
+    description: null
 
 class CakeSide.Collections.TutorialsCollection extends Backbone.Collection
   model: CakeSide.Models.Tutorial
diff --git a/app/assets/javascripts/backbone/routers/tutorials_router.js.coffee b/app/assets/javascripts/backbone/routers/tutorials_router.js.coffee
index a7e6ec36..fa6feb45 100644
--- a/app/assets/javascripts/backbone/routers/tutorials_router.js.coffee
+++ b/app/assets/javascripts/backbone/routers/tutorials_router.js.coffee
@@ -1,3 +1,4 @@
 class CakeSide.Routers.TutorialsRouter extends Marionette.AppRouter
   appRoutes:
     "tutorials": "index"
+    "tutorials/new": "new"
diff --git a/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs b/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
new file mode 100644
index 00000000..826506c6
--- /dev/null
+++ b/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
@@ -0,0 +1,40 @@
+<div class="row">
+  <div class="span12">
+    <h1>Share a tutorial link</h1>
+  </div>
+</div>
+<div class="row">
+  <div class="span12">
+    <div class="thumbnail">
+      <img class="embed-thumb" src="<%= image_url %>" />
+      <div class="caption">
+        <h3 class="tutorial-heading"><%= heading %></h3>
+        <p id="tag-list"></p>
+        <p class="tutorial-description"><%= description %></p>
+      </div>
+    </div>
+    <form id="new-tutorial" name='tutorial' class='form-horizontal'>
+      <fieldset>
+        <div class="control-group">
+          <label class="control-label" for="tutorial_url">Tutorial URL</label>
+          <div class="controls">
+            <input class="input-xxlarge" id="tutorial_url" name="url" type="text" value="<%= url %>">
+          </div>
+        </div>
+        <div class="control-group">
+          <label for="tags" class="control-label">Tags</label>
+            <div class="controls">
+              <input type="text" id="tags" name="tutorial_tags" value="" class="input-xxlarge" autocomplete="off" />
+              <p class="help-block">
+                Note: help people find this tutorial by adding some keyword tags
+              </p>
+            </div>
+        </div>
+        <div class="form-actions">
+          <button id='save-button' type="submit" class="btn btn-primary">Save</button>
+          <a href="#tutorials" class="btn">Cancel</a>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</div>
diff --git a/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee b/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
new file mode 100644
index 00000000..855bc9ad
--- /dev/null
+++ b/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
@@ -0,0 +1,24 @@
+#= require service/embedly_service
+class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
+  template: JST['backbone/templates/tutorials/new']
+  ui:
+    url: '#tutorial_url'
+
+  events:
+    'change #tutorial_url': 'loadUrl'
+
+  initialize: ->
+    @model = new @collection.model()
+    @service = new EmbedlyService()
+
+  loadUrl: ->
+    @service.retrieve_info_on(@ui.url.val(), @loadUrlInformation)
+
+  loadUrlInformation: (data) =>
+    @model.set('url', data.url)
+    @model.set('heading', data.title)
+    @model.set('description', data.description)
+    @model.set('image_url', data.thumbnail_url)
+    @model.set('author', data.provider_name)
+    @model.set('author_url', data.provider_url)
+    @render()