apps/workbench/app/assets/javascripts/editable.js

   1 $.fn.editable.defaults.ajaxOptions = {type: 'post', dataType: 'json'};
   2 $.fn.editable.defaults.send = 'always';
   3
   4 // Default for editing is popup.  I experimented with inline which is a little
   5 // nicer in that it shows up right under the mouse instead of nearby.  However,
   6 // the inline box is taller than the regular content, which causes the page
   7 // layout to shift unless we make the table rows tall, which leaves a lot of
   8 // wasted space when not editing.  Also inline can get cut off if the page is
   9 // too narrow, when the popup box will just move to do the right thing.
  10 //$.fn.editable.defaults.mode = 'inline';
  11
  12 $.fn.editable.defaults.params = function (params) {
  13     var a = {};
  14     var key = params.pk.key;
  15     a.id = $(this).attr('data-object-uuid') || params.pk.id;
  16     a[key] = params.pk.defaults || {};
  17     // Remove null values. Otherwise they get transmitted as empty
  18     // strings in request params.
  19     for (i in a[key]) {
  20         if (a[key][i] == null)
  21             delete a[key][i];
  22     }
  23     a[key][params.name] = params.value;
  24     if (!a.id) {
  25         a['_method'] = 'post';
  26     } else {
  27         a['_method'] = 'put';
  28     }
  29     return a;
  30 };
  31
  32 $.fn.editable.defaults.validate = function (value) {
  33     if (value == "***invalid***") {
  34         return "Invalid selection";
  35     }
  36 }
  37
  38 $(document).
  39     on('ready ajax:complete', function() {
  40         $('#editable-submit').click(function() {
  41             console.log($(this));
  42         });
  43         $('.editable').
  44             editable({
  45                 success: function(response, newValue) {
  46                     // If we just created a new object, stash its UUID
  47                     // so we edit it next time instead of creating
  48                     // another new object.
  49                     if (!$(this).attr('data-object-uuid') && response.uuid) {
  50                         $(this).attr('data-object-uuid', response.uuid);
  51                     }
  52                     if (response.href) {
  53                         $(this).editable('option', 'url', response.href);
  54                     }
  55                     return;
  56                 }
  57             }).
  58             on('hidden', function(e, reason) {
  59                 // After saving a new attribute, update the same
  60                 // information if it appears elsewhere on the page.
  61                 if (reason != 'save') return;
  62                 var html = $(this).html();
  63                 var uuid = $(this).attr('data-object-uuid');
  64                 var attr = $(this).attr('data-name');
  65                 var edited = this;
  66                 if (uuid && attr) {
  67                     $("[data-object-uuid='" + uuid + "']" +
  68                       "[data-name='" + attr + "']").each(function() {
  69                           if (this != edited)
  70                               $(this).html(html);
  71                       });
  72                 }
  73             });
  74     });
  75
  76 $.fn.editabletypes.text.defaults.tpl = '<input type="text" name="editable-text">'
  77
  78 $.fn.editableform.buttons = '\
  79 <button type="submit" class="btn btn-primary btn-sm editable-submit" \
  80   id="editable-submit"><i class="glyphicon glyphicon-ok"></i></button>\
  81 <button type="button" class="btn btn-default btn-sm editable-cancel" \
  82   id="editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>\
  83 '