[WIP] Per field sourcing

instance-app/views/contact/edit-list.html

@@ -0,0 +1,7 @@
+<ul class="contact_details">
+  <% _.each( contact_details, function (item, i) { %>
+    <li>
+      <%= render( 'contact/edit.html', { item: item, sourceText: object.get('field_sources.contact_details.' + i), i: i }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/contact/edit.html

@@ -1,12 +1,28 @@
-<input type="hidden" id="contact_id_<%= i %>" name="contact_details[<%= i %>][id]" value="<%- contact._id || '' %>">
-<label for="contact_label_<%= i %>">Label (e.g. 'Office Address', 'Twitter Account', 'Work Phone Number', etc.)</label>
-<input type="text" id="contact_label_<%= i %>" name="contact_details[<%= i %>][label]" value="<%- contact.label || '' %>">
+<div class="field-with-metadata">
+  <input type="hidden" id="contact_id_<%= i %>" name="contact_details[<%= i %>][id]" value="<%- item._id || '' %>">
 
-<label for="contact_type_<%= i %>">Type (e.g. 'twitter', 'facebook', 'cell', 'address', 'fax', etc.)</label>
-<input type="text" id="contact_type_<%= i %>" name="contact_details[<%= i %>][type]" value="<%- contact.type || '' %>">
+  <p>
+    <label for="contact_label_<%= i %>">Label (e.g. 'Office Address', 'Twitter Account', 'Work Phone Number', etc.)</label>
+    <input type="text" class="form-control" id="contact_label_<%= i %>" name="contact_details[<%= i %>][label]" value="<%- item.label || '' %>">
 
-<label for="contact_value_<%= i %>">Value (e.g. a phone number, a Twitter or Facebook username, an address, etc.)</label>
-<input type="text" id="contact_value_<%= i %>" name="contact_details[<%= i %>][value]" value="<%- contact.value || '' %>">
+  <p>
+    <label for="contact_type_<%= i %>">Type (e.g. 'twitter', 'facebook', 'cell', 'address', 'fax', etc.)</label>
+    <input type="text" class="form-control" id="contact_type_<%= i %>" name="contact_details[<%= i %>][type]" value="<%- item.type || '' %>">
+  </p>
 
-<label for="contact_note_<%= i %>">Note</label>
-<input type="text" id="contact_note_<%= i %>" name="contact_details[<%= i %>][note]" value="<%- contact.note || '' %>">
+  <p>
+    <label for="contact_value_<%= i %>">Value (e.g. a phone number, a Twitter or Facebook username, an address, etc.)</label>
+    <input type="text" class="form-control" id="contact_value_<%= i %>" name="contact_details[<%= i %>][value]" value="<%- item.value || '' %>">
+  </p>
+
+  <p>
+    <label for="contact_note_<%= i %>">Note</label>
+    <input type="text" class="form-control" id="contact_note_<%= i %>" name="contact_details[<%= i %>][note]" value="<%- item.note || '' %>">
+  </p>
+
+  <div class="field-with-metadata__metadata">
+    <a class="other_name-delete"><span class="glyphicon glyphicon-trash glyphicon-space-after"></span>Delete</a>
+    <%= render( 'field_source/trigger-editing.html', { sourceText: sourceText, sourceID: 'source-contact_detail-' + item.id } )%>
+  </div>
+</div>
+<%= render( 'field_source/display-editing.html', { sourceText: sourceText, sourceID: 'source-contact_detail-' + item.id, field: 'field_sources[contact_details][' + i + ']' } )%>

instance-app/views/contact/view-list.html

@@ -0,0 +1,7 @@
+<ul class="contact_details">
+  <% _.each( contact_details, function (item, i) { %>
+    <li>
+      <%= render( 'contact/view.html', { item: item, sourceText: object.get('field_sources.contact_details.' + i) }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/contact/view.html

@@ -1,4 +1,4 @@
-<div class="view-mode">
+<div class="field-with-metadata">
   <strong>
     <% if (item.label) { %>
       <%- item.label %> (<%- item.type %>):
@@ -10,22 +10,9 @@
   <% if (item.note) { %>
     <span class="text-muted">(<%- item.note %>)</span>
   <% } %>
-</div>
-<div class="edit-mode edit-group">
-  <a class="delete"><span class="glyphicon glyphicon-ban-circle glyphicon-space-after"></span>Delete</a>
-  <a class="edit contact-edit"><span class="glyphicon glyphicon-pencil glyphicon-space-after"></span>Edit</a>
-  <strong>
-    <% if (item.label) { %>
-      <%- item.label %> (<%- item.type %>):
-    <% } else { %>
-      <%- item.type %>:
-    <% } %>
-  </strong>
-  <%- item.value %>
-  <% if (item.note) { %>
-    <span class="text-muted">(<%- item.note %>)</span>
-  <% } %>
-</div>
-
-
 
+  <div class="field-with-metadata__metadata">
+    <%= render( 'field_source/trigger.html', { sourceText: sourceText, sourceID: 'source-contact-' + item.id } )%>
+  </div>
+</div>
+<%= render( 'field_source/display.html', { sourceText: sourceText, sourceID: 'source-contact-' + item.id } )%>

instance-app/views/field_source/display-editing.html

@@ -0,0 +1,5 @@
+<% if (popit.setting('require-sources')) { %>
+  <div class="js-source__popup  source__popup" id="<%- sourceID %>">
+    <input class="source__input" type="url" name="<%- field %>" value="<%- sourceText %>">
+  </div>
+<% } %>

instance-app/views/field_source/display.html

@@ -0,0 +1,7 @@
+<% if (popit.setting('require-sources')) { %>
+  <% if (sourceText) { %>
+    <div class="source__popup" id="<%- sourceID %>">
+      <%- sourceText %>
+    </div>
+  <% } %>
+<% } %>

instance-app/views/field_source/edit.html

@@ -0,0 +1,12 @@
+<% if (popit.setting('require-sources')) { %>
+  <div class="source  source--editing">
+    <% if (value) { %>
+      <a class="js-source__link  source__link  source__link--has-source">Change source</a>
+    <% } else { %>
+      <a class="js-source__link  source__link  source__link--no-source">Add source</a>
+    <% } %>
+    <div class="js-source__popup  source__popup">
+      <input class="source__input" type="url" name="<%- field %>" value="<%- value %>">
+    </div>
+  </div>
+<% } %>

instance-app/views/field_source/trigger-editing.html

@@ -0,0 +1,7 @@
+<% if (popit.setting('require-sources')) { %>
+  <% if (sourceText) { %>
+    <a class="js-source__link  source__link  source__link--has-source" href="#<%- sourceID %>">Change source</a>
+  <% } else { %>
+    <a class="js-source__link  source__link  source__link--no-source" href="#<%- sourceID %>">Add source</a>
+  <% } %>
+<% } %>

instance-app/views/field_source/trigger.html

@@ -0,0 +1,7 @@
+<% if (popit.setting('require-sources')) { %>
+  <% if (sourceText) { %>
+    <a class="js-source__link  source__link  source__link--has-source" href="#<%- sourceID %>">Show source</a>
+  <% } else { %>
+    <span class="js-source__link  source__link  source__link--no-source">No source</span>
+  <% } %>
+<% } %>

instance-app/views/field_source/view.html

@@ -0,0 +1,12 @@
+<% if (popit.setting('require-sources')) { %>
+  <div class="source">
+    <% if (value) { %>
+      <a class="js-source__link  source__link  source__link--has-source">Show source</a>
+    <% } else { %>
+      <a class="js-source__link  source__link  source__link--no-source">No source</a>
+    <% } %>
+    <div class="js-source__popup  source__popup">
+      <span class="source__url"><%- value %></span>
+    </div>
+  </div>
+<% } %>

instance-app/views/identifier/edit-list.html

@@ -0,0 +1,7 @@
+<ul class="identifiers">
+  <% _.each( identifiers, function (item, i) { %>
+    <li>
+      <%= render( 'identifier/edit.html', { item: item, sourceText: object.get('field_sources.identifiers.' + i), i: i }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/identifier/edit.html

@@ -1,6 +1,19 @@
-<input type="hidden" id="identifier_id_<%= i %>" name="identifiers[<%= i %>][id]" value="<%- identifier._id || '' %>">
-<label for="identifier_identifier_<%= i %>">Identifier</label>
-<input id="identifier_identifier_<%= i %>" name="identifiers[<%= i %>][identifier]" value="<%- identifier.identifier || '' %>">
+<div class="field-with-metadata">
+  <input type="hidden" id="identifier_id_<%= i %>" name="identifiers[<%= i %>][id]" value="<%- identifier._id || '' %>">
 
-<label for="identifier_scheme_<%= i %>">Schema</label>
-<input id="identifier_scheme_<%= i %>" name="identifiers[<%= i %>][scheme]" value="<%- identifier.scheme || '' %>">
+  <p>
+    <label for="identifier_identifier_<%= i %>">Identifier</label>
+    <input class="form-control" id="identifier_identifier_<%= i %>" name="identifiers[<%= i %>][identifier]" value="<%- identifier.identifier || '' %>">
+  </p>
+
+  <p>
+    <label for="identifier_scheme_<%= i %>">Schema</label>
+    <input class="form-control" id="identifier_scheme_<%= i %>" name="identifiers[<%= i %>][scheme]" value="<%- identifier.scheme || '' %>">
+  </p>
+
+  <div class="field-with-metadata__metadata">
+    <a class="other_name-delete"><span class="glyphicon glyphicon-trash glyphicon-space-after"></span>Delete</a>
+    <%= render( 'field_source/trigger-editing.html', { sourceText: sourceText, sourceID: 'source-identifier-' + item.id } )%>
+  </div>
+</div>
+<%= render( 'field_source/display-editing.html', { sourceText: sourceText, sourceID: 'source-identifier-' + item.id, field: 'field_sources[identifiers][' + i + ']' } )%>

instance-app/views/identifier/view-list.html

@@ -0,0 +1,7 @@
+<ul class="identifiers">
+  <% _.each( identifiers, function (item, i) { %>
+    <li>
+      <%= render( 'identifier/view.html', { item: item, sourceText: object.get('field_sources.identifiers.' + i) }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/identifier/view.html

@@ -1,14 +1,11 @@
-<div class="view-mode">
-  <% if (item.scheme) { %>
-    <strong><%- item.scheme %>:</strong>
-  <% } %>
-  <%- item.identifier %>
-</div>
-<div class="edit-mode edit-group">
-  <a class="delete"><span class="glyphicon glyphicon-ban-circle glyphicon-space-after"></span>Delete</a>
-  <a class="edit identifier-edit"><span class="glyphicon glyphicon-pencil glyphicon-space-after"></span>Edit</a>
+<div class="field-with-metadata">
   <% if (item.scheme) { %>
     <strong><%- item.scheme %>:</strong>
   <% } %>
   <%- item.identifier %>
+
+  <div class="field-with-metadata__metadata">
+    <%= render( 'field_source/trigger.html', { sourceText: sourceText, sourceID: 'source-identifier-' + item.id } )%>
+  </div>
 </div>
+<%= render( 'field_source/display.html', { sourceText: sourceText, sourceID: 'source-identifier-' + item.id } )%>

instance-app/views/link/edit-list.html

@@ -0,0 +1,7 @@
+<ul class="links">
+  <% _.each( links, function (item, i) { %>
+    <li>
+      <%= render( 'link/edit.html', { item: item, sourceText: object.get('field_sources.links.' + i), i: i }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/link/edit.html

@@ -1,6 +1,19 @@
-<input type="hidden" id="link_id_<%= i %>" name="links[<%= i %>][id]" value="<%- link._id|| '' %>">
-<label for="link_url_<%= i %>">Url</label>
-<input type="text" id="link_url_<%= i %>" name="links[<%= i %>][url]" value="<%- link.url || '' %>">
+<div class="field-with-metadata">
+  <input type="hidden" id="link_id_<%= i %>" name="links[<%= i %>][id]" value="<%- item._id|| '' %>">
 
-<label for="link_note_<%= i %>">Note</label>
-<input type="text" id="link_note_<%= i %>" name="links[<%= i %>][note]" value="<%- link.note || '' %>">
+  <p>
+    <label for="link_url_<%= i %>">Url</label>
+    <input type="text" class="form-control" id="link_url_<%= i %>" name="links[<%= i %>][url]" value="<%- item.url || '' %>">
+  </p>
+
+  <p>
+    <label for="link_note_<%= i %>">Note</label>
+    <input type="text" class="form-control" id="link_note_<%= i %>" name="links[<%= i %>][note]" value="<%- item.note || '' %>">
+  </p>
+
+  <div class="field-with-metadata__metadata">
+    <a class="other_name-delete"><span class="glyphicon glyphicon-trash glyphicon-space-after"></span>Delete</a>
+    <%= render( 'field_source/trigger-editing.html', { sourceText: sourceText, sourceID: 'source-link-' + item.id } )%>
+  </div>
+</div>
+<%= render( 'field_source/display-editing.html', { sourceText: sourceText, sourceID: 'source-link-' + item.id, field: 'field_sources[links][' + i + ']' } )%>

instance-app/views/link/view-list.html

@@ -0,0 +1,7 @@
+<ul class="links">
+  <% _.each( links, function (item, i) { %>
+    <li>
+      <%= render( 'link/view.html', { item: item, sourceText: object.get('field_sources.links.' + i) }) %>
+    </li>
+  <% }); %>
+</ul>

instance-app/views/link/view.html

@@ -1,14 +1,10 @@
-<div class="view-mode">
-  <strong>
-    <%- item.note %>:
-  </strong>
-  <a href="<%- item.url %>"><%- item.url %></a>
-</div>
-<div class="edit-mode edit-group">
-  <a class="delete"><span class="glyphicon glyphicon-ban-circle glyphicon-space-after"></span>Delete</a>
-  <a class="edit link-edit"><span class="glyphicon glyphicon-pencil glyphicon-space-after"></span>Edit</a>
+<div class="field-with-metadata">
   <strong>
     <%- item.note %>:
   </strong>
   <a href="<%- item.url %>"><%- item.url %></a>
+  <div class="field-with-metadata__metadata">
+    <%= render( 'field_source/trigger.html', { sourceText: sourceText, sourceID: 'source-link-' + item.id } )%>
+  </div>
 </div>
+<%= render( 'field_source/display.html', { sourceText: sourceText, sourceID: 'source-link-' + item.id } )%>

instance-app/views/membership/list-item.html

@@ -1,4 +1,7 @@
-<div class="view-mode">
+<div class="field-with-metadata">
   <%= render( 'membership/list-item-content.html', { membership: membership, member: member, organization: organization, type: type } ) %>
-  <span class="entity-little-edit-icon entity-enter-edit-mode"></span>
+  <div class="field-with-metadata__metadata">
+    <%= render( 'field_source/trigger.html', { sourceText: sourceText, sourceID: 'source-membership-' + membership.id } )%>
+  </div>
 </div>
+<%= render( 'field_source/display.html', { sourceText: sourceText, sourceID: 'source-membership-' + membership.id } )%>

instance-app/views/membership/new.html

@@ -1,4 +1,4 @@
-<div class="edit-group">
+<div class="edit-group field-with-metadata">
     <% if (membership.id) { %>
       <input type="hidden" name="memberships[<%= i %>][id]" value="<%- membership.id %>">
     <% } %>
@@ -55,5 +55,10 @@
           representing <input type="text" class="form-control" name="memberships[<%= i %>][area][name]">
         <% } %>
     <% } %>
-    <a class="btn btn-sm membership__delete delete-membership"><span class="glyphicon glyphicon-trash"></span> Delete</a>
+    <div class="field-with-metadata__metadata">
+      <a class="membership__delete delete-membership"><span class="glyphicon glyphicon-trash glyphicon-space-after"></span>Delete</a>
+      <%= render( 'field_source/trigger-editing.html', { sourceText: sourceText, sourceID: 'source-membership-' + membership.id } )%>
+    </div>
 </div>
+
+<%= render( 'field_source/display-editing.html', { sourceText: sourceText, sourceID: 'source-membership-' + membership.id, field: 'field_sources[membership][' + i + ']' } )%>