use markdown for profile-editing. Add save button. will remove linky

once everything's in markdown

Gruntfile.js

@@ -16,6 +16,8 @@ module.exports = function(grunt) {
             'public/bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js',
             'public/bower_components/angular/angular.min.js',
             'public/bower_components/angular-sanitize/angular-sanitize.min.js',
+            'public/bower_components/showdown/compressed/showdown.js',
+            'public/bower_components/angular-markdown-directive/markdown.js',
             'public/bower_components/angular-route/angular-route.min.js',
             'public/bower_components/angular-resource/angular-resource.min.js',
             'public/bower_components/angular-ui/build/angular-ui.min.js',

bower.json

@@ -31,9 +31,12 @@
     "bootstrap": "v2.3.2",
     "angular-route": "1.2.0-rc.1",
     "angular-ui-utils": "~0.0.4",
-    "angular-sanitize": "1.2.0-rc.1"
+    "angular-sanitize": "1.2.0-rc.1",
+    "angular-markdown-directive": "~0.1.0"
   },
   "resolutions": {
-    "jquery": "~2.0.3"
+    "jquery": "~2.0.3",
+    "angular": "1.2.0-rc.1",
+    "bootstrap": "v2.3.2"
   }
 }

public/js/app.js

@@ -1,7 +1,7 @@
 "use strict";
 
 window.habitrpg = angular.module('habitrpg',
-    ['ngRoute', 'ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'sharedServices', 'authServices', 'notificationServices', 'ui.bootstrap', 'ui.keypress'])
+    ['ngRoute', 'ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'sharedServices', 'authServices', 'notificationServices', 'ui.bootstrap', 'ui.keypress', 'btford.markdown'])
 
   .constant("API_URL", "")
   .constant("STORAGE_USER_ID", 'habitrpg-user')

views/index.jade

@@ -29,7 +29,11 @@ html
       script(type='text/javascript', src='/bower_components/jquery/jquery.min.js')
       script(type='text/javascript', src='/bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js')
       script(type='text/javascript', src='/bower_components/angular/angular.min.js')
+
       script(type='text/javascript', src='/bower_components/angular-sanitize/angular-sanitize.min.js')
+      script(type='text/javascript', src='/bower_components/showdown/compressed/showdown.js')
+      script(type='text/javascript', src='/bower_components/angular-markdown-directive/markdown.js')
+
       script(type='text/javascript', src='/bower_components/angular-route/angular-route.min.js')
       script(type='text/javascript', src='/bower_components/angular-resource/angular-resource.min.js')
       script(type='text/javascript', src='/bower_components/angular-ui/build/angular-ui.min.js')

views/options/profile.jade

@@ -38,28 +38,49 @@
 
   // ------- Edit -------
   .span4
-    // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
-    img.pull-right(ng-src='{{user.profile.imageUrl}}')
-    .control-group
-      label.control-label(for='profileImageUrl') Photo Url
-      .controls
-        input#profileImageUrl(type='url', ng-model='user.profile.imageUrl', placeholder='Image Url', ng-blur='set("profile.imageUrl", user.profile.imageUrl)')
-    .control-group
-      label.control-label(for='profileFullName') Full Name
-      .controls
-        input#profileFullName(type='text', placeholder='Full Name', ng-model='user.profile.name', ng-blur='set("profile.name", user.profile.name)', )
-    .control-group
-      label.control-label(for='profileBlurb') Blurb
-      .controls
-        textarea#profileBlurb(placeholder='Blurb', ng-model='user.profile.blurb', ng-blur='set("profile.blurb", user.profile.blurb)')
-    .control-group
-      label.control-label(for='profileWebsite') Websites
-      .controls
+    button.btn.btn-default(ng-click='_editing.profile = true', ng-show='!_editing.profile') Edit
+    button.btn.btn-primary(ng-click='_editing.profile = false', ng-show='_editing.profile') Save
+    div(ng-show='!_editing.profile')
+      h4 Display Name
+      span(ng-show='profile.profile.name') {{profile.profile.name}}
+      span.muted(ng-hide='profile.profile.name') - None -
+
+      h4 Photo
+      img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}')
+      span.muted(ng-hide='profile.profile.imageUrl') - None -
+
+      h4 Blurb
+      p(ng-show='profile.profile.blurb', btf-markdown='profile.profile.blurb')
+      span.muted(ng-hide='profile.profile.blurb') - None -
+      //{{profile.profile.blurb | linky:'_blank'}}
+
+      h4 Websites
+      ul(ng-show='profile.profile.websites')
+        // TODO let's remove links eventually, since we can do markdown on profiles
+        li(ng-repeat='website in profile.profile.websites')
+          a(target='_blank', ng-href='{{website}}') {{website}}
+      span.muted(ng-hide='profile.profile.websites') - None -
+
+    div.whatever-options(ng-show='_editing.profile')
+      // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+      .control-group.option-large
+        label.control-label Display Name
+        input.option-content(type='text', placeholder='Full Name', ng-model='user.profile.name', ng-blur='set("profile.name", user.profile.name)', )
+      .control-group.option-large
+        label.control-label Photo Url
+        input.option-content(type='url', ng-model='user.profile.imageUrl', placeholder='Image Url', ng-blur='set("profile.imageUrl", user.profile.imageUrl)')
+      .control-group.option-large
+        label.control-label Blurb
+        textarea.option-content(style='height:15em;', placeholder='Blurb', ng-model='user.profile.blurb', ng-blur='set("profile.blurb", user.profile.blurb)')
+        small
+          a(target='_blank', href='http://daringfireball.net/projects/markdown/') Use Markdown form formatting
+      .control-group.option-large
+        label.control-label Websites
         form(ng-submit='addWebsite()')
-          input#profileWebsite(type='url', ng-model='_newWebsite', placeholder='Add Website')
-      ul
-        // would prefer if there were and index in #each, instead using data-website to search with indexOf
-        li(ng-repeat='website in user.profile.websites')
-          | {{website}}
-          a(data-website='{{website}}', ng-click='removeWebsite($index)')
-            i.icon-remove
+          input.option-content(type='url', ng-model='_newWebsite', placeholder='Add Website')
+        ul
+          // would prefer if there were and index in #each, instead using data-website to search with indexOf
+          li(ng-repeat='website in user.profile.websites')
+            | {{website}}
+            a(ng-click='removeWebsite($index)')
+              i.icon-remove

views/shared/modals/members.jade

@@ -8,10 +8,10 @@ div(ng-controller='MemberModalCtrl')
       .row-fluid
         .span6
           img(ng-show='profile.profile.imageUrl', ng-src='{{profile.profile.imageUrl}}')
-          p(ng-show='profile.profile.blurb') {{profile.profile.blurb | linky:'_blank'}}
+          p(ng-show='profile.profile.blurb', btf-markdown='profile.profile.blurb')
           ul(ng-show='profile.profile.websites')
             li(ng-repeat='website in profile.profile.websites')
-              a(href='{{website}}') {{website}}
+              a(href='{{website}}', target='_blank') {{website}}
           h3 Stats
             include ../profiles/stats
         .span6