Commit c6f864e2
Changed files (5)
app
assets
javascripts
backbone
controllers
models
routers
templates
tutorials
views
tutorials
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))
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
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"
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>
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()