udongo 0.1.0

data/app/assets/javascripts/backend/datepickers.js

@@ -0,0 +1,67 @@
+var datepickers = datepickers || {
+  init: function() {
+    this.load_ranges();
+    this.load_regulars();
+    $('.date_picker, .date_range_picker').find('.input-group-addon').on(
+      'click',
+      this.icon_click_listener
+    );
+  },
+
+  icon_click_listener: function(e) {
+    e.preventDefault();
+    $(this).parents('.input-group').find('input').trigger('focus');
+  },
+
+  load_ranges: function() {
+    if(typeof this.starts_on === 'undefined' || typeof this.stops_on === 'undefined') return;
+
+    $('.date_range_picker input').each(function(){
+      var input = $(this);
+
+      if(input.data('start') !== null) {
+        datepickers.starts_on(input.data('start')).datepicker().on(
+          'changeDate',
+          datepickers.starts_on_change_date_listener
+        );
+      }
+
+      if(input.data('stop') !== null) {
+        datepickers.stops_on(input.data('stop')).datepicker({
+          weekStart: 1,
+          autoclose: true
+        }).on('changeDate', datepickers.stops_on_change_date_listener);
+      }
+    });
+  },
+
+  load_regulars: function() {
+    var inputs = $('.date_picker input');
+    if(typeof inputs.datepicker !== 'function') return;
+    inputs.datepicker();
+  },
+
+  starts_on: function(id) {
+    return $('.date_range_picker input[data-start="'+ id +'"]');
+  },
+
+  starts_on_change_date_listener: function(selected) {
+    var input = $(this);
+    var date = new Date(selected.date.valueOf());
+    date.setDate(date.getDate(new Date(selected.date.valueOf())));
+    datepickers.stops_on(input.data('start')).datepicker('setStartDate', date);
+  },
+
+  stops_on: function(id) {
+    return $('.date_range_picker input[data-stop="'+ id +'"]');
+  },
+
+  stops_on_change_date_listener: function(selected) {
+    var input = $(this);
+    var date = new Date(selected.date.valueOf());
+    date.setDate(date.getDate(new Date(selected.date.valueOf())));
+    datepickers.starts_on(input.data('stop')).datepicker('setEndDate', date);
+  }
+};
+
+$(function(){ datepickers.init(); });

data/app/assets/javascripts/backend/general.js

@@ -0,0 +1,7 @@
+var general = general || {
+  init: function() {
+    $('form:not(.no-focus) input:visible:not(.no-focus):first').focus();
+  }
+};
+
+$(function(){ general.init(); });

data/app/assets/javascripts/backend/pages.js

@@ -0,0 +1,7 @@
+var pages = pages || {
+  init: function() {
+    tree.init('#pages-tree');
+  }
+};
+
+$(function(){ pages.init(); });

data/app/assets/javascripts/backend/plugins/autocomplete.js

@@ -0,0 +1,147 @@
+(function($){
+  $.fn.udongo_autocomplete = function(options) {
+    var original_input = this;
+    var settings = $.extend({
+      minLength: 2,
+      on_add: function(item) { return true; },
+      on_remove: function(item) { return true; },
+    }, options);
+
+    add_li_to_ul = function(li) {
+      if(last_item().length) {
+        last_item().after(li);
+      } else {
+        ul().find('li.tagit-new').before(li);
+      }
+
+      li.find('.tagit-close').on('click', function(e){ remove_li(li) });
+    };
+
+    bootstrap = function(input, callback) {
+      $.ajax({
+        type: 'GET',
+        url: input.data('path')
+      }).done(function(data){
+        generate_ul(input, data);
+        generate_lis_from_value(data);
+        callback(ul_input(), data);
+      });
+    };
+
+    generate_li = function(ui) {
+      classes = '{0} choice tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable';
+      classes = classes.format(li_class(ui).substr(1));
+
+      var data = '';
+      for(var prop in ui.item) {
+        data += ' data-{0}="{1}"'.format(prop, ui.item[prop]);
+      }
+
+      var item = $('<li class="{0}" {1} />'.format(classes, data));
+      item.append($('<span class="tagit-label">{0}</span>'.format(ui.item.label)));
+      item.append($('<a class="tagit-close"><span class="text-icon">×</span></a>'));
+      return item;
+    };
+
+    generate_lis_from_value = function(data) {
+      var value = original_input.val();
+      var values = value.split(',');
+
+      if(value !== '') {
+        for(i = 0; i != values.length; i++) {
+          o = data.filter(function(o){
+            return o.value == values[i];
+          });
+
+          var item = generate_li({ item: o[0] });
+          add_li_to_ul(item);
+        }
+      }
+    };
+
+    generate_ul = function(input, data) {
+      var list = $('<ul class="autocomplete tagit ui-widget ui-widget-content ui-corner-all"/>');
+      var data = original_input.data();
+
+      for(var prop in data) {
+        list.data(prop, data[prop]);
+      }
+
+      var new_input = $('<li class="tagit-new" />').append(
+        $('<input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">')
+      );
+      new_input.find('input').on('keydown', function(e){
+        if(e.keyCode == 8 && $(this).val() == '' && ul().find('li.choice').length > 0) {
+          remove_li(last_item());
+        }
+      });
+
+      list.append(new_input);
+      input.after(list);
+      input.addClass('hidden');
+
+      return list;
+    };
+
+    last_item = function() {
+      return ul().find('li.choice:last');
+    };
+
+    li_class = function(ui) {
+      return '.item-{0}'.format(ui.item.value);
+    };
+
+    remove_li = function(item) {
+      if($.isFunction(settings.on_remove) && settings.on_remove.call(this, item)) {
+        item.remove();
+      }
+    };
+
+    select = function(e, ui) {
+      var input = $(this);
+      var new_li = generate_li(ui);
+      new_li.addClass('hidden');
+
+      // blocks any new choices after reaching the limit
+      if(ul().data('limit') !== 0 && ul().find('li.choice').length >= ul().data('limit')) {
+        input.val('');
+        return false;
+      }
+
+      add_li_to_ul(new_li);
+
+      if($.isFunction(settings.on_add) && settings.on_add.call(this, new_li)) {
+        new_li.removeClass('hidden');
+        input.val('');
+        return false;
+      } else {
+        // by returning true, we ensure the jQueryUI default select gets executed.
+        return true;
+      }
+    };
+
+    ul = function() {
+      return $('ul.autocomplete');
+    };
+
+    ul_input = function() {
+      return ul().find('input');
+    };
+
+    return original_input.each(function(){
+      bootstrap($(this), function(input, data){
+        input.autocomplete({
+          minLength: settings.minLength,
+          select: select,
+          source: function(request, response) {
+            response($.ui.autocomplete.filter(data, request.term));
+          },
+          // prevent value inserted on focus
+          focus: function() {
+            return false;
+          }
+        });
+      });
+    });
+  };
+}(jQuery));

data/app/assets/javascripts/backend/plugins/tagbox.js

@@ -0,0 +1,52 @@
+(function($) {
+  $.fn.udongo_tagbox = function(options) {
+    var settings = $.extend({
+      items: 'items-path',
+      limit: null,
+      minLength: 2,
+      on_add: function(tag, input) {},
+      on_remove: function(tag, input) {}
+    }, options);
+
+    return this.each(function() {
+      var input = $(this);
+
+      if(typeof settings.items == 'string'){
+        $.ajax({
+          type: 'GET',
+          url: input.data(settings.items)
+        }).done(function(data){
+          settings.items = data;
+          return tagit(input, settings.items);
+        });
+      } else {
+        return tagit(input, settings.items);
+      }
+
+      function tagit(input, items) {
+        input.tagit({
+          autocomplete: {
+            minLength: settings.minLength,
+            source: function(request, response) {
+              response($.ui.autocomplete.filter(settings.items, request.term));
+            }
+          },
+          allowSpaces: true,
+          caseSensitive: false,
+          removeConfirmation: true,
+          tagLimit: settings.limit,
+          beforeTagAdded: function(event, ui) {
+            if($.isFunction(settings.on_add)){
+              settings.on_add.call(this, ui.tag.find('.tagit-label').text(), input);
+            }
+          },
+          afterTagRemoved: function(event, ui) {
+            if($.isFunction(settings.on_remove)){
+              settings.on_remove.call(this, ui.tag.find('.tagit-label').text(), input);
+            }
+          }
+        });
+      }
+    });
+  };
+}(jQuery));

data/app/assets/javascripts/backend/sortable.js

@@ -0,0 +1,46 @@
+var sortable = sortable || {
+  init: function() {
+    $('table tbody').each(function(){
+      var tbody = $(this);
+
+      if(tbody.find('tr[data-update-position]').length > 0) {
+        sortable.load_on_tbody(tbody);
+      }
+    });
+  },
+
+  load_on_tbody: function(tbody) {
+    sortable.generate_handle(tbody);
+
+    tbody.sortable({
+      handle: 'td.handle',
+      update: sortable.update_position_listener
+    });
+  },
+
+  generate_handle: function(tbody) {
+    tbody.siblings('thead').find('tr th:first').before('<th></th>');
+    tbody.find('tr[data-update-position]').each(function(){
+      $(this).find('td:first').before(sortable.handle_html());
+    });
+  },
+
+  update_position_listener: function(e, ui) {
+    var new_position = ui.item[0].rowIndex;
+
+    $.ajax({
+      data: { position: new_position },
+      url: ui.item.data('update-position'),
+      type: 'POST'
+    });
+  },
+
+  handle_html: function() {
+    html = '<td class="handle">';
+    html += '  <a href="#"><span class="fa fa-arrows"></span></a>';
+    html += '</td>';
+    return $(html);
+  }
+};
+
+$(function(){ sortable.init(); });

data/app/assets/javascripts/backend/tags.js

@@ -0,0 +1,37 @@
+var tags = tags || {
+  init: function() {
+    $('input[data-tagbox]').udongo_tagbox({
+      on_add: tags.add,
+      on_remove: tags.remove
+    });
+  },
+
+  add: function(tag, input) {
+    tags.call('POST', tag, input);
+  },
+
+  remove: function(tag, input) {
+    tags.call('DELETE', tag, input);
+  },
+
+  call: function(type, tag, input) {
+    if(typeof type == 'undefined') return;
+
+    $.ajax({
+      url: input.data('base-path'),
+      data: {
+        locale: input.data('locale'),
+        taggable_type: input.data('type'),
+        taggable_id: input.data('id'),
+        tag: tag
+      },
+      type: type
+    }).done(function(data){
+      if(type == 'POST' && !data.valid) {
+        input.tagit('removeTagByLabel', data.tag);
+      }
+    });
+  }
+};
+
+$(function(){ tags.init(); });

data/app/assets/javascripts/backend/tree.js

@@ -0,0 +1,158 @@
+var tree = tree || {
+  vars: {
+    container: null
+  },
+
+  init: function(selector) {
+    tree.vars.container = $(selector);
+    tree.grab_data();
+  },
+
+  grab_data: function() {
+    $.ajax({
+      url: tree.vars.container.data('source'),
+      type: 'GET'
+    }).done(function(data){
+      tree.load(data);
+    });
+  },
+
+  load: function(data) {
+    tree.vars.container.jstree({
+      core: tree.core_settings(data),
+      types: tree.types(),
+      plugins: ['contextmenu','dnd','json_data','types','ui','state','wholerow'],
+      contextmenu: { items: tree.contextmenu_items }
+    });
+
+    tree.vars.container.on('select_node.jstree', tree.select_node_listener);
+    $(document).on('dnd_stop.vakata', tree.dnd_stop_listener);
+  },
+
+  core_settings: function(data) {
+    return {
+      check_callback: tree.dnd_check_callback,
+      multiple: false,
+      data: data,
+      expand_selected_onload: false,
+      themes: {
+        responsive: true,
+        variant: 'large'
+      }
+    };
+  },
+
+  types: function() {
+    return {
+      default: {
+        icon: 'fa fa-folder',
+        children: true,
+        valid_children: ['default', 'file']
+      },
+      file: {
+        icon: 'fa fa-file-o',
+        valid_children: ['file']
+      }
+    };
+  },
+
+  select_node_listener: function(e, result) {
+    if(typeof result.event !== 'undefined') {
+      if(result.event.which === 1) {
+        window.location = result.node.data.url;
+      }
+    } else {
+      result.instance.deselect_node(result.node);
+    }
+  },
+
+  contextmenu_items: function(node) {
+    return {
+      remove: {
+        separator_before: false,
+        separator_after: false,
+        label: 'Verwijderen',
+        icon: 'fa fa-trash',
+        action: tree.contextmenu_remove_listener,
+        _disabled: !node.data.deletable
+      }
+    };
+  },
+
+  contextmenu_remove_listener: function(obj) {
+    var instance = tree.vars.container.jstree(true);
+    var node = instance.get_node(obj.reference.prevObject.selector);
+
+    $.ajax({
+      data: { id: node.data.id },
+      url: node.data.delete_url,
+      type: 'DELETE'
+    }).done(function(data){
+      if(data.trashed) {
+        obj.reference.prevObject.fadeOut(1000, function(){
+          instance.delete_node(node);
+        });
+      }
+    });
+  },
+
+  dnd_check_callback: function(operation, node, node_parent, node_position, more) {
+    if(operation === 'move_node') {
+      // With this you can't move nodes above or below the referenced node.
+      // I don't think there's another way around this.
+      if(!node.data.draggable || (typeof more.ref !== 'undefined' && !more.ref.data.draggable)) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  dnd_stop_listener: function(e, result) {
+    var instance = result.data.origin;
+    var moved_node = instance.get_node(result.data.nodes[0]);
+
+    $.ajax({
+      data: {
+        parent_id: tree.calculate_new_parent_id(instance, moved_node),
+        position: tree.calculate_new_position(instance, moved_node)
+      },
+      url: moved_node.data.update_position_url,
+      type: 'POST'
+    }).done(function(data){
+      if(data.moved) {
+        instance.set_icon(moved_node, 'fa fa-check');
+        tree.change_icon_color(moved_node, '#66aa66');
+
+        setTimeout(function(){
+          tree.change_icon_color(moved_node, 'inherit');
+          instance.set_icon(moved_node, 'fa fa-file-o');
+        }, 2000);
+      }
+    });
+  },
+
+  calculate_new_parent_id: function(instance, moved_node) {
+    var parent_node = instance.get_node(moved_node.parent);
+
+    if(typeof parent_node.data !== 'undefined') {
+      return parent_node.data.id;
+    } else {
+      return null;
+    }
+  },
+
+  calculate_new_position: function(instance, moved_node) {
+    var result = [];
+
+    $(instance.get_children_dom(moved_node.parent)).each(function(){
+      result.push(instance.get_node($(this).attr('id')).data.id);
+    });
+
+    return result.indexOf(moved_node.data.id) + 1;
+  },
+
+  change_icon_color: function(jstree_node, color) {
+    $('#'+ jstree_node.id).find('.jstree-icon').css('color', color);
+  }
+};

data/app/assets/stylesheets/backend/application.scss

@@ -0,0 +1,18 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_self
+ */
+
+@import 'bootstrap';
+@import 'backend/bootstrap-datepicker.min';
+@import 'udongo';