populate-me 0.6.1 → 0.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4115111c6e8b75beee003063ea35e984d6442b41
-  data.tar.gz: a180faa064cc0c2e8ade0c106727f1b85af9f40c
+  metadata.gz: dbda9949e894e8d1c77c8ad65e0bfdd2bf037873
+  data.tar.gz: e7fcb6b304893759a53af5ae065a6674bf2b07bb
 SHA512:
-  metadata.gz: c6f25cc60ad3128a6d33fd3b13d0a96fbc221ecc616ef6c272851028a949843c6cf9e2a6a7fc1e9a7ea1c9a4e26b9e2c80188f40a1821220fb0ac6c575b265bc
-  data.tar.gz: 1e10eb2ceb1de0875817a1d0568f20d76ea70cb9bf64ec4c05e543a9a861ac32a37cb12d61cbb4082de6189d7242bb380165822a839e886b00667dbfb0cbe051
+  metadata.gz: e784e1176489b34f3f19331bef9d1800aca5d086eb0f481ea5002e45dfba8d36787b97b8b07c8d7ba2bd3c19f0719b06eb09d810531ce87f92d49d750f913ae5
+  data.tar.gz: 6a19f005cb13878124042a563eb621f596cf83d1a3fa063a62e99a5b75366a4a05665033ed8168a1f54fd521db8a8500b92f064e98915d656a3391d28e7f5e27

data/README.md

@@ -21,6 +21,7 @@ Table of contents
   - [Single Documents](#single-documents)
   - [Mongo documents](#mongo-documents)
 - [Admin](#admin)
+  - [Customize Admin](#customize-admin)
 - [API](#api)
 
 Documents
@@ -403,6 +404,109 @@ probably for [single documents](#single-documents) because they are not part of
 a list. The ID would then be litterally `unique`, or whatever ID you declared
 instead.
 
+### Customize Admin
+
+You can customize the admin with a few settings. 
+The main ones are for adding CSS and javascript. 
+There are 2 settings for this: `:custom_css_url` and `:custom_js_url`.
+
+```ruby
+# lib/admin.rb
+require "populate_me/admin"
+
+class Admin < PopulateMe::Admin
+
+  set :custom_css_url, '/css/admin.css'
+  set :custom_js_url, '/js/admin.js'
+
+  set :root, ::File.expand_path('../..', __FILE__)
+
+  set :menu, [ 
+    ['Settings', '/admin/form/settings/unique'],
+    ['Articles', '/admin/list/article'],
+    ['Staff', [
+      ['Designers', '/admin/list/staff-member?filter[job]=Designer'],
+      ['Developers', '/admin/list/staff-member?filter[job]=Developer'],
+    ]]
+  ]
+
+end
+```
+
+Inside the javascript file, you can use many functions and variables that
+are under the `PopulateMe` namespace. See source code to know more about it.
+Some are callbacks like `PopulateMe.custom_init_column` which allows you to 
+bind events when a column was created.
+
+```javascript
+# /js/admin.js
+
+$(function() {
+  
+  $('body').bind('change', 'select.special', function(event) {
+    alert('Changed!');  
+  });
+
+  PopulateMe.custom_init_column = function(column) {
+    $('select.special', column).css({color: 'orange'});
+  }
+
+});
+```
+
+The other thing you might want to do is adding mustache templates.
+You can do this with the setting `:custom_templates_view`.
+
+```ruby
+# lib/admin.rb
+require "populate_me/admin"
+
+class Admin < PopulateMe::Admin
+  
+  set :custom_templates_view, :custom_templates
+
+  # ...
+
+end
+```
+
+Let's say we want to be able to set the size of the preview for attachments,
+as opposed to the default value of 150. We would put this in the view:
+
+```eruby
+<script id="template-attachment-field-custom" type="x-tmpl-mustache">
+  {{#url}}
+    <img src='{{url}}{{cache_buster}}' alt='Preview' width='{{attachment_preview_width}}' />
+    <button class='attachment-deleter'>x</button>
+    <br />
+  {{/url}}
+  <input type='file' name='{{input_name}}' {{#max_size}}data-max-size='{{max_size}}'{{/max_size}} {{{build_input_atrributes}}} />
+</script>
+```
+
+This is the default template except we've replace `150` with the mustache
+variable `attachment_preview_width`. Everything that you set on the schema 
+is available in the template, so you can set both the custom template name 
+and the width variable in the hash passed to `field` when doing your schema.
+The template name is the ID of the script tag.
+
+```ruby
+# /lib/blog_post.rb
+require 'populate_me/document'
+
+class BlogPost < PopulateMe::Document
+
+  field :title
+  field :image, type: :attachment, custom_template: 'template-attachment-field-custom', attachment_preview_width: 200, variations: [
+    PopulateMe::Variation.new_image_magick_job(:thumb, :gif, "-resize '300x'")
+  ]
+
+  # ...
+
+end
+```
+
+
 API
 ---
 

data/example/config.ru

@@ -30,7 +30,7 @@ PopulateMe::Document.set :default_attachment_class, PopulateMe::Attachment
 
 class BlogPost < PopulateMe::Document
   field :title, required: true
-  field :thumbnail, type: :attachment, max_size: 600000, variations: [
+  field :thumbnail, type: :attachment, max_size: 600*1024, variations: [
     PopulateMe::Variation.new_image_magick_job(:populate_me_thumb, :jpg, "-resize '400x225^' -gravity center -extent 400x225")
   ]
   field :content, type: :text

data/lib/populate_me/admin/__assets__/js/main.js

@@ -1,81 +1,216 @@
-var init_template = function(obj_or_id) {
+// Namespace
+var PopulateMe = {};
+
+// Returns a Mustache template from either
+// the dom element itself, or the id of the dom element.
+PopulateMe.init_template = function(obj_or_id) {
   var obj = (typeof obj_or_id == 'object') ? obj_or_id : $(obj_or_id);
   var template = obj.html();
   Mustache.parse(template);
   return template;
 };
 
-$(function() {
+// Output a legible version of the size in bytes.
+// 1024 => "1KB"
+// 2097152 => "2MB"
+PopulateMe.display_file_size = function(size) {
+  var unit = 'B';
+  if (size>1024) {
+    size = size / 1024;
+    unit = 'KB';
+  }
+  if (size>1024) {
+    size = size / 1024;
+    unit = 'MB';
+  }
+  if (size>1024) {
+    size = size / 1024;
+    unit = 'GB';
+  }
+  return size+unit;
+};
+
+// Template helpers
+PopulateMe.template_helpers = {
+  custom_partial_or_default: function() {
+    return function(text,render) {
+      return render('{{>'+(this.custom_template||text)+'}}');
+    }
+  },
+  adapted_field: function() {
+    return function(text,render) {
+      var tmpl;
+      if (this.custom_template) {
+        tmpl = this.custom_template;
+      } else {
+        tmpl = 'template_'+this.type+'_field';
+        if (!(tmpl in PopulateMe.templates)) tmpl = 'template_string_field';
+      }
+      return render('{{>'+tmpl+'}}');
+    }
+  },
+  build_input_attributes: function() {
+    var out = "";
+    $.each(this.input_attributes, function(k,v) {
+      if (v!==false) {
+        out = out+' '+k;
+        if (v!==true) out = out+'=\''+Mustache.escape(v)+'\'';
+      }
+    });
+    return out;
+  },
+  cache_buster: function() {
+    // Simple version which assumes the url has no query yet or hash
+    var buster = Math.random()*10000000000000000;
+    return '?cache_buster='+buster;
+  }
+};
 
-  // Vars
-  var finder = $('#finder');
+// Template render with helpers
+PopulateMe.mustache_render = function(data) {
+  var data_and_helpers = $.extend(data,PopulateMe.template_helpers);
+  return Mustache.render(PopulateMe.templates[data.template],data_and_helpers,PopulateMe.templates);
+};
 
-  // Init templates
-  var templates = {};
-  $('[type=x-tmpl-mustache]').each(function() {
-    var $this = $(this);
-    templates[$this.attr('id').replace(/-/g,'_')] = init_template($this);
+// Make Sortable from element or css selector
+PopulateMe.make_sortable = function(selector,context) {
+  var obj = (typeof selector == 'string') ? $(selector,context) : selector;
+  return obj.sortable({
+    forcePlaceholderSize: true,
+    handle: '.handle'
   });
+};
 
-  // Template helpers
-  var template_helpers = {
-    custom_partial_or_default: function() {
-      return function(text,render) {
-        return render('{{>'+(this.custom_template||text)+'}}');
-      }
-    },
-    adapted_field: function() {
-      return function(text,render) {
-        var tmpl;
-        if (this.custom_template) {
-          tmpl = this.custom_template;
-        } else {
-          tmpl = 'template_'+this.type+'_field';
-          if (!(tmpl in templates)) tmpl = 'template_string_field';
-        }
-        return render('{{>'+tmpl+'}}');
-      }
-    },
-    build_input_attributes: function() {
-      var out = "";
-      $.each(this.input_attributes, function(k,v) {
-        if (v!==false) {
-          out = out+' '+k;
-          if (v!==true) out = out+'=\''+Mustache.escape(v)+'\'';
+// Scroll to an element, possibly in a specific column.
+PopulateMe.scroll_to = function(el, column) {
+  if (!column) {
+    column = el.closest('.column');
+  }
+  column.animate({scrollTop: el.position().top});
+};
+
+// Mark errors for report after form validation.
+// It adds the .invalid class to invalid fields,
+// and adds the report after the label of the field.
+PopulateMe.mark_errors = function(context,report) {
+  $.each(report,function(k,v) {
+    var field = context.find('> [data-field-name='+k+']:first');
+    if (field.is('fieldset')) {
+      $.each(v, function(index,subreport) {
+        var subcontext = field.find('> .nested-documents > li:nth('+index+')');
+        PopulateMe.mark_errors(subcontext, subreport);
+      });
+    } else {
+      field.addClass('invalid');
+      var errors = "<span class='errors'>, "+v.join(', ')+"</span>";
+      field.find('> label').append(errors);
+    }
+  });
+};
+
+// JS Validations
+// This adds validations that could happen before sending
+// anything to the server and that cannot be done with 
+// browser form validations like "required".
+// For example we can check the file size so that files are not sent
+// to the server at all if they are too big.
+// Returns a boolean.
+PopulateMe.jsValidationsPassed = function(context) {
+  if (window.File && window.FileReader && window.FileList && window.Blob) {
+    try {
+      var max_size_fields = $('input[type=file][data-max-size]', context);
+      max_size_fields.each(function() {
+        var field = $(this);
+        var max_size = parseInt(field.data('max-size'));
+        if (field[0].files[0]) {
+          var fsize = field[0].files[0].size;
+          var fname = field[0].files[0].name;
+          if (fsize>max_size) {
+            alert('File too big: '+fname+' should be less than '+PopulateMe.display_file_size(max_size)+'.');
+            throw "Validation error";
+          }
         }
       });
-      return out;
-    },
-    cache_buster: function() {
-      // Simple version which assumes the url has no query yet or hash
-      var buster = Math.random()*10000000000000000;
-      return '?cache_buster='+buster;
+    } catch(e) {
+      if (e==='Validation error') { 
+        return false;
+      } else {
+        throw(e);
+      }
     }
-  };
+  }
+  return true;
+};
 
-  // Template render
-  var mustache_render = function(data) {
-    var data_and_helpers = $.extend(data,template_helpers);
-    return Mustache.render(templates[data.template],data_and_helpers,templates);
-  };
+// Init column 
+// Bind events and init things that need to happen when 
+// a new column is added to the finder.
+// The callback `custom_init_column` is also called at the end
+// in case you have things to put in your custom javascript.
+PopulateMe.init_column = function(c) {
 
-  // Sortable
-  var make_sortable = function(selector,context) {
-    var obj = (typeof selector == 'string') ? $(selector,context) : selector;
-    return obj.sortable({
-      forcePlaceholderSize: true,
-      handle: '.handle'
+  // Sort list item
+  PopulateMe.make_sortable('.documents',c).bind('sortupdate', function(e, ui) {
+    var list = $(ui.item).closest('.documents');
+    var ids = list.children().map(function() {
+      return $(this).data().id;
+    }).get();
+    $.ajax({
+      url: list.data().sortUrl,
+      type: 'put',
+      data: {
+        action: 'sort',
+        field: list.data().sortField,
+        ids: ids
+      }
     });
-  };
+    /*
+    ui.item contains the current dragged element.
+    ui.item.index() contains the new index of the dragged element
+    ui.oldindex contains the old index of the dragged element
+    ui.startparent contains the element that the dragged item comes from
+    ui.endparent contains the element that the dragged item was added to
+    */
+  });
 
-  var scroll_to = function(el, column) {
-    if (!column) {
-      column = el.closest('.column');
-    }
-    column.animate({scrollTop: el.position().top});
-  };
+  // Sort nested documents
+  PopulateMe.make_sortable('.nested-documents',c);
+
+  // Init textareas
+  $('textarea',c).trigger('input');
+
+  // Init multiple select with asmSelect
+  $('select[multiple]').asmSelect({ sortable: true, removeLabel: '&times;' });
+
+  // Possible callback from custom javascript file.
+  // If you need to do something on init_column,
+  // create this callback.
+  if (PopulateMe.custom_init_column) {
+    PopulateMe.custom_init_column(c);
+  }
+
+}; // End - Init column
+
+
+
+// Dom ready
+$(function() {
+
+  // Dom elements.
+  PopulateMe.finder = $('#finder');
+
+  // Init templates
+  PopulateMe.templates = {};
+  $('[type=x-tmpl-mustache]').each(function() {
+    var $this = $(this);
+    PopulateMe.templates[$this.attr('id').replace(/-/g,'_')] = PopulateMe.init_template($this);
+  });
 
   // Reactive text area
+  // It switches between online or longer depending on the amount 
+  // of text.
+  // Long term, for this reason, it might be used for both
+  // :string and :text fields.
   $('body').on('input propertychange', 'textarea', function() {
     if (this.value.length>50 || this.value.match(/\n/)) {
       $(this).removeClass('oneline');
@@ -84,56 +219,11 @@ $(function() {
     }
   });
 
-  // Errors
-  var mark_errors = function(context,report) {
-    $.each(report,function(k,v) {
-      var field = context.find('> [data-field-name='+k+']:first');
-      if (field.is('fieldset')) {
-        $.each(v, function(index,subreport) {
-          var subcontext = field.find('> .nested-documents > li:nth('+index+')');
-          mark_errors(subcontext, subreport);
-        });
-      } else {
-        field.addClass('invalid');
-        var errors = "<span class='errors'>, "+v.join(', ')+"</span>";
-        field.find('> label').append(errors);
-      }
-    });
-  };
-
-  // JS Validations
-  var jsValidationsPassed = function(context) {
-    if (window.File && window.FileReader && window.FileList && window.Blob) {
-      try {
-        var max_size_fields = $('input[type=file][data-max-size]', context);
-        max_size_fields.each(function() {
-          var field = $(this);
-          var max_size = parseInt(field.data('max-size'));
-          if (field[0].files[0]) {
-            var fsize = field[0].files[0].size;
-            var fname = field[0].files[0].name;
-            if (fsize>max_size) {
-              alert('File too big: '+fname+' should be less than '+max_size/1000+'KB.');
-              throw "Validation error";
-            }
-          }
-        });
-      } catch(e) {
-        if (e==='Validation error') { 
-          return false;
-        } else {
-          throw(e);
-        }
-      }
-    }
-    return true;
-  };
-
   // Ajax form
   $('body').on('submit','form.admin-post, form.admin-put', function(e) {
     e.preventDefault();
     var self = $(this);
-    if (jsValidationsPassed(self)) {
+    if (PopulateMe.jsValidationsPassed(self)) {
 
       var submit_button = $('input[type=submit]',self);
       submit_button.hide();
@@ -145,16 +235,16 @@ $(function() {
         contentType: false,
         success: function(res) {
           if (res.success==true) {
-            var reloader = finder.find('> li:nth-last-child(3) .selected')
+            var reloader = PopulateMe.finder.find('> li:nth-last-child(3) .selected')
             if (reloader.size()>0) {
               reloader.trigger('click.columnav',[function(cb_object) {
                 var target = $('[data-id='+res.data.id+']', cb_object.column);
                 if (target.size()>0) {
-                  scroll_to(target, cb_object.column);
+                  PopulateMe.scroll_to(target, cb_object.column);
                 }
               }]);
             } else {
-              finder.trigger('pop.columnav');
+              PopulateMe.finder.trigger('pop.columnav');
             }
           }
         },
@@ -163,8 +253,8 @@ $(function() {
           if (res.success==false) {
             $('.invalid',self).removeClass('invalid');
             $('.errors',self).remove();
-            mark_errors(self,res.data);
-            scroll_to(self.find('.invalid:first'));
+            PopulateMe.mark_errors(self,res.data);
+            PopulateMe.scroll_to(self.find('.invalid:first'));
             submit_button.show();
           }
         }
@@ -178,9 +268,9 @@ $(function() {
     e.preventDefault();
     var self = $(this);
     $.get(this.href, function(data) {
-      var content = $(mustache_render(data));
-      make_sortable(self.closest('fieldset').find('> ol').append(content).sortable('destroy'));
-      scroll_to(content);
+      var content = $(PopulateMe.mustache_render(data));
+      PopulateMe.make_sortable(self.closest('fieldset').find('> ol').append(content).sortable('destroy'));
+      PopulateMe.scroll_to(content);
     });
   });
 
@@ -229,58 +319,20 @@ $(function() {
     }
   });
 
-  // Init column 
-  var init_column = function(c) {
-
-    // Sort list item
-    make_sortable('.documents',c).bind('sortupdate', function(e, ui) {
-      var list = $(ui.item).closest('.documents');
-      var ids = list.children().map(function() {
-        return $(this).data().id;
-      }).get();
-      $.ajax({
-        url: list.data().sortUrl,
-        type: 'put',
-        data: {
-          action: 'sort',
-          field: list.data().sortField,
-          ids: ids
-        }
-      });
-      /*
-      ui.item contains the current dragged element.
-      ui.item.index() contains the new index of the dragged element
-      ui.oldindex contains the old index of the dragged element
-      ui.startparent contains the element that the dragged item comes from
-      ui.endparent contains the element that the dragged item was added to
-      */
-    });
-
-    // Sort nested documents
-    make_sortable('.nested-documents',c);
-
-    // Init textareas
-    $('textarea',c).trigger('input');
-
-    // Init multiple select with asmSelect
-    $('select[multiple]').asmSelect({ sortable: true, removeLabel: '&times;' });
-
-  }; // End - Init column
-
   // Init finder
-  finder.columnav({
+  PopulateMe.finder.columnav({
     on_push: function(data) {
-      init_column(data.column);
+      PopulateMe.init_column(data.column);
     },
     process_data: function(data) {
       if (typeof data == 'object') {
-        return mustache_render(data);
+        return PopulateMe.mustache_render(data);
       } else {
         return data;
       }
     }
   });  
-  finder.trigger('getandpush.columnav',[window.admin_path+window.index_path]);
+  PopulateMe.finder.trigger('getandpush.columnav',[window.admin_path+window.index_path]);
 
 }); // End - DomReady
 

data/lib/populate_me/version.rb

@@ -1,4 +1,4 @@
 module PopulateMe
-  VERSION = '0.6.1'
+  VERSION = '0.6.2'
 end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: populate-me
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.6.2
 platform: ruby
 authors:
 - Mickael Riga
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-06 00:00:00.000000000 Z
+date: 2018-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: web-utils