From cb893c1b5bbfec6cc9647bd3bcbcffe0eabbee2f Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Sat, 27 Sep 2014 11:05:15 +0200
Subject: [PATCH] Replacement for textarea and expanding.

---
 .../controllers/widget/organization.js.coffee | 17 ++++-------
 .../app/controllers/widget/user.js.coffee     | 26 ++++-------------
 .../app/views/widget/organization.jst.eco     |  2 +-
 .../javascripts/app/views/widget/user.jst.eco |  2 +-
 app/assets/stylesheets/zzz.css.erb            | 29 ++++++++++++-------
 5 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/widget/organization.js.coffee b/app/assets/javascripts/app/controllers/widget/organization.js.coffee
index 82a386080..a69d714fb 100644
--- a/app/assets/javascripts/app/controllers/widget/organization.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/organization.js.coffee
@@ -41,16 +41,11 @@ class App.WidgetOrganization extends App.Controller
       organizationData: organizationData
     )
 
-    a = =>
-      visible = @el.find('textarea').is(":visible")
-      if visible && !@el.find('textarea').expanding('active')
-        @el.find('textarea').expanding()
-      @el.find('textarea').on('focus', (e) =>
-        visible = @el.find('textarea').is(":visible")
-        if visible && !@el.find('textarea').expanding('active')
-          @el.find('textarea').expanding()
-      )
-    @delay( a, 40 )
+    @$('div [contenteditable]').ce(
+      mode:      'textonly'
+      multiline: true
+      maxlength: 250
+    )
 
     # enable user popups
     @userPopups()
@@ -64,7 +59,7 @@ class App.WidgetOrganization extends App.Controller
     ###
 
   update: (e) =>
-    note   = $(e.target).val()
+    note = $(e.target).ceg({ mode: 'textonly' })
     organization = App.Organization.find( @organization_id )
     if organization.note isnt note
       organization.updateAttributes( note: note )
diff --git a/app/assets/javascripts/app/controllers/widget/user.js.coffee b/app/assets/javascripts/app/controllers/widget/user.js.coffee
index 5335f1694..d4638a8d5 100644
--- a/app/assets/javascripts/app/controllers/widget/user.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/user.js.coffee
@@ -73,16 +73,11 @@ class App.WidgetUser extends App.Controller
       userData: userData
     )
 
-    a = =>
-      visible = @el.find('textarea').is(":visible")
-      if visible && !@el.find('textarea').expanding('active')
-        @el.find('textarea').expanding()
-      @el.find('textarea').on('focus', (e) =>
-        visible = @el.find('textarea').is(":visible")
-        if visible && !@el.find('textarea').expanding('active')
-          @el.find('textarea').expanding()
-      )
-    @delay( a, 40 )
+    @$('div[contenteditable]').ce(
+      mode:      'textonly'
+      multiline: true
+      maxlength: 250
+    )
 
     @userTicketPopups(
       selector: '.user-tickets'
@@ -90,17 +85,8 @@ class App.WidgetUser extends App.Controller
       position: 'right'
     )
 
-    ###
-    if user.organization_id
-      @el.append('<div class="org-info"></div>')
-      new App.WidgetOrganization(
-        organization_id: user.organization_id
-        el:              @el.find('.org-info')
-      )
-    ###
-
   update: (e) =>
-    note = $(e.target).val()
+    note = $(e.target).ceg({ mode: 'textonly' })
     user = App.User.find( @user_id )
     if user.note isnt note
       user.updateAttributes( note: note )
diff --git a/app/assets/javascripts/app/views/widget/organization.jst.eco b/app/assets/javascripts/app/views/widget/organization.jst.eco
index 8db62d4c8..31e71d058 100644
--- a/app/assets/javascripts/app/views/widget/organization.jst.eco
+++ b/app/assets/javascripts/app/views/widget/organization.jst.eco
@@ -8,7 +8,7 @@
         <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @organization[row.name] ) ) %></div>
       <% else: %>
         <div class="customer-info" title="<%- @Ti( row.display ) %>">
-          <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update-org" placeholder="<%- @T( row.display ) %>"><%= @organization[row.name] %></textarea>
+          <div contenteditable="true" class="textbox" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div>
         </div>
       <% end %>
     <% end %>
diff --git a/app/assets/javascripts/app/views/widget/user.jst.eco b/app/assets/javascripts/app/views/widget/user.jst.eco
index ed33fdf98..e309f0a82 100644
--- a/app/assets/javascripts/app/views/widget/user.jst.eco
+++ b/app/assets/javascripts/app/views/widget/user.jst.eco
@@ -17,7 +17,7 @@
     <% else: %>
       <div class="userInfo-label"><%- @Ti( row.display ) %></div>
       <div class="userInfo-value">
-        <textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea>
+        <div contenteditable="true" class="textbox" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></div>
       </div>
     <% end %>
     </div>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 97682f0c6..dd6e4ce5c 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -1363,17 +1363,6 @@ footer {
   color: #bbb;
 }
 
-.inline-edit {
-  padding: 4px;
-}
-.inline-edit:hover {
-  padding: 3px;
-  border: 1px dotted #F92;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-
 .translation {
   border: 1px dotted #F92;
   -webkit-border-radius: 3px;
@@ -3440,6 +3429,24 @@ footer {
   margin-top: 1px;
 }
 
+.textbox[contenteditable] {
+  white-space: pre;
+  padding: 1px;
+  outline-style: none;
+}
+.textbox[contenteditable]:hover, .textbox[contenteditable]:focus {
+  padding: 0;
+  border: 1px dotted hsl(145,51%,45%);
+  border-radius: 3px;
+}
+.textbox[contenteditable].invalid {
+  padding: 0;
+  border: 1px dotted #F92;
+  border-radius: 3px;
+}
+.textbox > .placeholder {
+  color: #999;
+}
 /*
 
   ----------------