Improved closing modal dialog, ask user if form has changed.

app/assets/javascripts/app/controllers/_application_controller.coffee

@@ -700,6 +700,8 @@ class App.ControllerModal extends App.Controller
   headPrefix: ''
   shown: true
   closeOnAnyClick: false
+  initalFormParams: {}
+  initalFormParamsIgnore: false
 
   events:
     'submit form':                        'submit'
@@ -746,10 +748,10 @@ class App.ControllerModal extends App.Controller
       centerButtons:     @centerButtons
       leftButtons:       @leftButtons
     )
-    modal.find('.modal-body').html content
+    modal.find('.modal-body').html(content)
     if !@initRenderingDone
       @initRenderingDone = true
-      @html modal
+      @html(modal)
     else
       @$('.modal-dialog').replaceWith(modal)
     @post()
@@ -761,6 +763,8 @@ class App.ControllerModal extends App.Controller
     @el
 
   render: =>
+    @initalFormParamsIgnore = false
+
     if @buttonSubmit is true
       @buttonSubmit = 'Submit'
     if @buttonCancel is true
@@ -775,19 +779,18 @@ class App.ControllerModal extends App.Controller
     if @small
       @el.addClass('modal--small')
 
-    @el.modal
+    @el.modal(
       keyboard:  @keyboard
       show:      true
       backdrop:  @backdrop
       container: @container
-    .on
-      'show.bs.modal':   @onShow
-      'shown.bs.modal':  @onShown
-      'hide.bs.modal':   @onClose
-      'hidden.bs.modal': =>
-        @onClosed()
-        $('.modal').remove()
-      'dismiss.bs.modal': @onCancel
+    ).on(
+      'show.bs.modal':   @localOnShow
+      'shown.bs.modal':  @localOnShown
+      'hide.bs.modal':   @localOnClose
+      'hidden.bs.modal': @localOnClosed
+      'dismiss.bs.modal': @localOnCancel
+    )
 
     if @closeOnAnyClick
       @el.on('click', =>
@@ -797,6 +800,7 @@ class App.ControllerModal extends App.Controller
   close: (e) =>
     if e
       e.preventDefault()
+    @initalFormParamsIgnore = true
     @el.modal('hide')
 
   formParams: =>
@@ -804,28 +808,50 @@ class App.ControllerModal extends App.Controller
       return @formParam(@container.find('.modal form'))
     return @formParam(@$('.modal form'))
 
-  onShow: ->
+  localOnShow: (e) =>
+    @onShow(e)
+
+  onShow: (e) ->
     # do nothing
 
-  onShown: =>
+  localOnShown: (e) =>
+    @onShown(e)
+
+  onShown: (e) =>
     @$('input:not([disabled]):not([type="hidden"]):not(".btn"), textarea').first().focus()
+    @initalFormParams = @formParams()
+
+  localOnClose: (e) =>
+    diff = difference(@initalFormParams, @formParams())
+    if @initalFormParamsIgnore is false && !_.isEmpty(diff)
+      if !confirm(App.i18n.translateContent('The form content has been changed, discarded changes?'))
+        e.preventDefault()
+        return
+    @onClose(e)
 
   onClose: ->
     # do nothing
 
-  onClosed: ->
+  localOnClosed: (e) =>
+    @onClosed(e)
+    $('.modal').remove()
+
+  onClosed: (e) ->
     # do nothing
 
-  onSubmit: ->
-    # do nothing
+  localOnCancel: (e) =>
+    @onCancel(e)
 
-  onCancel: ->
+  onCancel: (e) ->
     # do nothing
 
   cancel: (e) =>
     @close(e)
     @onCancel(e)
 
+  onSubmit: (e) ->
+    # do nothing
+
   submit: (e) =>
     e.stopPropagation()
     e.preventDefault()

app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js

@@ -516,7 +516,9 @@
 				)
 			)
 				this.setValue();
-			this._trigger('hide');
+			// 2018-01-22 trigger locale hide event - conflicts with modal hide
+			//this._trigger('hide');
+			this._trigger('hide.bs.datepicker');
 			return this;
 		},
 

app/assets/javascripts/app/views/widget/user.jst.eco

@@ -1,15 +1,17 @@
 <div class="sidebar-block">
   <%- @user.avatar("50", "", "userInfo-avatar") %>
-  <h3 title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></h3>
+  <h3 title="<%- @Ti('Name') %>"><%= @user.displayName() %></h3>
 </div>
 <% for row in @userData: %>
   <% if @user[row.name] || row.name is 'note': %>
     <div class="sidebar-block">
+    <label><%- @T(row.display) %></label>
     <% if row.tag isnt 'richtext': %>
-      <label><%- @T(row.display) %></label>
-      <%- @P(@user, row.name) %>
+      <% if row.link: %><a href="<%- row.link %><%= @user[row.name] %>" target="_blank"><%- @P(@user, row.name) %></a>
+    <% else: %>
+      <%- @P(@user, row.name) %>
+    <% end %>
     <% else: %>
-      <label><%- @T(row.display) %></label>
       <div contenteditable="true" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @Ti('Add a Note') %>"><%- @user[row.name] %></div>
     <% end %>
     </div>
@@ -17,7 +19,7 @@
 <% end %>
 <% if !_.isEmpty(@user['accounts']): %>
   <div class="sidebar-block">
-    <label><%- @T( 'Linked Accounts' ) %></label>
+    <label><%- @T('Linked Accounts') %></label>
   <% for account of @user['accounts']: %>
     <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
   <% end %>
@@ -26,7 +28,7 @@
 <% if !_.isEmpty(@user['links']): %>
   <% for link in @user['links']: %>
   <div class="sidebar-block">
-    <label><%- @T( link['title'] ) %></label>
+    <label><%- @T(link['title']) %></label>
 <% for item in link['items']: %>
   <% if item['url']: %>
     <a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>