Commit 86db9e42

mo khan <mo@mokhan.ca>
2014-07-19 15:02:40
enable/disable save button based on tutorial validation.
1 parent 7f1add2
Changed files (3)
app
assets
javascripts
backbone
models
templates
tutorials
views
app/assets/javascripts/backbone/models/tutorials.js.coffee
@@ -8,6 +8,17 @@ class CakeSide.Models.Tutorial extends Backbone.Model
     heading: null
     description: null
 
+  validate: (attributes, options) ->
+    return "Url is invalid." unless @isValidUrl(attributes.url || '')
+    return "This tutorial has no photos." unless @hasImage(attributes.image_url)
+
+  isValidUrl: (url) ->
+    expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
+    url.match(new RegExp(expression))
+
+  hasImage: (image_url) ->
+    image_url
+
 class CakeSide.Collections.TutorialsCollection extends Backbone.Collection
   model: CakeSide.Models.Tutorial
   url: '/api/v1/tutorials'
app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
@@ -10,7 +10,7 @@
         <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 %>">
+            <input class="input-xxlarge" id="tutorial_url" name="url" type="text" value="<%= url %>" placeholder="http://www.cakeside.com/">
           </div>
         </div>
         <div class="control-group">
@@ -23,11 +23,7 @@
             </div>
         </div>
         <div class="form-actions">
-          <% if (canSave()) { %>
-            <button id='save-button' type="submit" class="btn btn-primary">Save</button>
-          <% } else { %>
-            <button id='save-button' type="submit" class="btn btn-primary" disabled=disabled>Save</button>
-          <% } %>
+          <button id='save-button' type="submit" class="btn btn-primary" disabled=disabled>Save</button>
           <a href="#tutorials" class="btn">Cancel</a>
         </div>
       </fieldset>
app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
@@ -11,8 +11,6 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
   templateHelpers:
     canLoadPreview: ->
       @image_url
-    canSave: ->
-      false
 
   initialize: ->
     @model = new @collection.model()
@@ -31,6 +29,10 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
     @model.set('author', data.provider_name)
     @model.set('author_url', data.provider_url)
     @render()
+    if @model.isValid()
+      @enableSaveButton()
+    else
+      @disableSaveButton()
 
   resetTutorial: (url) ->
     @model.set('url', url)
@@ -39,4 +41,11 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
     @model.set('image_url', '')
     @model.set('author', '')
     @model.set('author_url', '')
+    @disableSaveButton()
     @render()
+
+  enableSaveButton: ->
+    @ui.save_button.removeAttr('disabled')
+
+  disableSaveButton: ->
+    @ui.save_button.attr('disabled', 'disabled')