para 0.11.4 → 0.12.0

data/app/javascripts/para/inputs/multi-select-input.js

@@ -0,0 +1,343 @@
+var ref, ref1,
+  boundMethodCheck = function(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new Error('Bound instance method accessed before binding'); } };
+
+ref = Para.MultiSelectInput = (function() {
+  class MultiSelectInput extends Vertebra.View {
+    initialize() {
+      this.triggerSearch = this.triggerSearch.bind(this);
+      this.onSearchReturn = this.onSearchReturn.bind(this);
+      this.onItemAdded = this.onItemAdded.bind(this);
+      this.onItemRemoved = this.onItemRemoved.bind(this);
+      this.selectedItemsSorted = this.selectedItemsSorted.bind(this);
+      
+      var el;
+      this.$searchField = this.$('[data-search-field]');
+      this.$selectedItems = this.$('[data-selected-items] tbody');
+      this.$availableItems = this.$('[data-available-items]');
+      this.$input = this.$('[data-multi-select-input-field]');
+      this.searchURL = this.$el.data('search-url');
+      this.orderable = this.$el.is('[data-orderable]');
+      this.searchParam = this.$searchField.attr('name');
+      this.noSelectedItemsTemplate = this.$('[data-no-selected-items]').data('no-selected-items');
+      this.noAvailableItemsTemplate = this.$('[data-no-available-items]').data('no-available-items');
+      this.throttledTriggerSearch = throttle(this.triggerSearch, 300, {
+        trailing: true
+      });
+      this.availableItems = [];
+      this.selectedItems = (function() {
+        var j, len, ref1, results1;
+        ref1 = this.$selectedItems.find('[data-selected-item-id]');
+        results1 = [];
+        for (j = 0, len = ref1.length; j < len; j++) {
+          el = ref1[j];
+          results1.push(this.buildSelectedItem(el));
+        }
+        return results1;
+      }).call(this);
+      this.refreshSelectedItems();
+      return this.refreshAvailableItems();
+    }
+
+    onSearchKeyUp() {
+      return this.throttledTriggerSearch();
+    }
+
+    triggerSearch() {
+      boundMethodCheck(this, ref);
+      return this.searchFor(this.$searchField.val());
+    }
+
+    searchFor(terms) {
+      var data, ref1;
+      terms = trim(terms);
+      if (terms === this.terms || (!terms && !this.terms)) {
+        return;
+      }
+      this.terms = terms;
+      this.setLoading(true);
+      if ((ref1 = this._currentSearchXHR) != null) {
+        ref1.abort();
+      }
+      data = this.$('[data-search-field-input]').serialize();
+      return this._currentSearchXHR = $.get(this.searchURL, data).done(this.onSearchReturn);
+    }
+
+    onSearchReturn(results) {
+      boundMethodCheck(this, ref);
+      this._currentSearchXHR = null;
+      this.setLoading(false);
+      this.$('[data-available-items] tbody').html(results);
+      return this.refreshAvailableItems();
+    }
+
+    refreshAvailableItems() {
+      var el, item, j, len, ref1;
+      ref1 = this.availableItems;
+      for (j = 0, len = ref1.length; j < len; j++) {
+        item = ref1[j];
+        item.destroy();
+      }
+      this.availableItems = (function() {
+        var k, len1, ref2, results1;
+        ref2 = this.$('[data-available-items] tr');
+        results1 = [];
+        for (k = 0, len1 = ref2.length; k < len1; k++) {
+          el = ref2[k];
+          results1.push(this.buildAvailableItem(el));
+        }
+        return results1;
+      }).call(this);
+      if (!this.availableItems.length) {
+        return this.showEmptyListHint(this.noAvailableItemsTemplate, this.$availableItems);
+      }
+    }
+
+    buildAvailableItem(el) {
+      var availableItem, j, len, ref1, selectedItem;
+      availableItem = new Para.MultiSelectAvailableItem({
+        el: el
+      });
+      ref1 = this.selectedItems;
+      for (j = 0, len = ref1.length; j < len; j++) {
+        selectedItem = ref1[j];
+        if (selectedItem.id === availableItem.id) {
+          availableItem.setSelected(true);
+        }
+      }
+      this.listenTo(availableItem, 'add', this.onItemAdded);
+      return availableItem;
+    }
+
+    onItemAdded(item) {
+      boundMethodCheck(this, ref);
+      return this.selectItem(item);
+    }
+
+    buildSelectedItem(el) {
+      var selectedItem;
+      selectedItem = new Para.MultiSelectSelectedItem({
+        el: el
+      });
+      this.listenTo(selectedItem, 'remove', this.onItemRemoved);
+      return selectedItem;
+    }
+
+    selectItem(item) {
+      var selectedItem;
+      if (this.alreadySelected(item)) {
+        return;
+      }
+      item.setSelected(true);
+      selectedItem = this.buildSelectedItem(item.$el.attr('data-selected-item-template'));
+      this.selectedItems.push(selectedItem);
+      return this.refreshSelectedItems();
+    }
+
+    alreadySelected(item) {
+      var j, len, ref1, selectedItem;
+      ref1 = this.selectedItems;
+      for (j = 0, len = ref1.length; j < len; j++) {
+        selectedItem = ref1[j];
+        if (selectedItem.id === item.id) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    refreshSelectedItems() {
+      var j, len, ref1, selectedItem, selectedItemIds;
+      this.$selectedItems.empty();
+      ref1 = this.selectedItems;
+      for (j = 0, len = ref1.length; j < len; j++) {
+        selectedItem = ref1[j];
+        selectedItem.renderTo(this.$selectedItems);
+      }
+      selectedItemIds = ((function() {
+        var k, len1, ref2, results1;
+        ref2 = this.selectedItems;
+        results1 = [];
+        for (k = 0, len1 = ref2.length; k < len1; k++) {
+          selectedItem = ref2[k];
+          results1.push(selectedItem.id);
+        }
+        return results1;
+      }).call(this)).join(', ');
+      this.$input.val(selectedItemIds);
+      if (this.selectedItems.length) {
+        return this.initializeOrderable();
+      } else {
+        return this.showEmptyListHint(this.noSelectedItemsTemplate, this.$selectedItems);
+      }
+    }
+
+    showEmptyListHint(template, $container) {
+      return $(template).appendTo($container);
+    }
+
+    onItemRemoved(selectedItem) {
+      var availableItem, index, item, itemIndex, j, k, len, len1, ref1, ref2;
+      boundMethodCheck(this, ref);
+      ref1 = this.selectedItems;
+      for (index = j = 0, len = ref1.length; j < len; index = ++j) {
+        item = ref1[index];
+        if (item.id === selectedItem.id) {
+          itemIndex = index;
+        }
+      }
+      this.selectedItems.splice(itemIndex, 1);
+      selectedItem.destroy();
+      this.refreshSelectedItems();
+      ref2 = this.availableItems;
+      for (k = 0, len1 = ref2.length; k < len1; k++) {
+        item = ref2[k];
+        if (item.id === selectedItem.id) {
+          availableItem = item;
+        }
+      }
+      if (availableItem) {
+        return availableItem.setSelected(false);
+      }
+    }
+
+    onAllItemsAdded() {
+      var availableItem, j, len, ref1, results1;
+      if (!this.availableItems.length) {
+        return;
+      }
+      ref1 = this.availableItems;
+      results1 = [];
+      for (j = 0, len = ref1.length; j < len; j++) {
+        availableItem = ref1[j];
+        results1.push(this.selectItem(availableItem));
+      }
+      return results1;
+    }
+
+    onAllItemsRemoved() {
+      var item, j, len, ref1, results1;
+      if (!this.selectedItems.length) {
+        return;
+      }
+      this.selectedItems = [];
+      this.refreshSelectedItems();
+      ref1 = this.availableItems;
+      results1 = [];
+      for (j = 0, len = ref1.length; j < len; j++) {
+        item = ref1[j];
+        results1.push(item.setSelected(false));
+      }
+      return results1;
+    }
+
+    initializeOrderable() {
+      var columnsCount;
+      if (!this.orderable) {
+        return;
+      }
+      columnsCount = this.$selectedItems.find('> tr > td').length;
+      this.$selectedItems.sortable('destroy');
+      this.$selectedItems.sortable({
+        handle: '.order-anchor',
+        animation: 150
+      });
+      return this.$selectedItems.on('sort', this.selectedItemsSorted);
+    }
+
+    selectedItemsSorted() {
+      var el, index, indices, j, len, ref1;
+      boundMethodCheck(this, ref);
+      indices = {};
+      ref1 = this.$selectedItems.find('[data-selected-item-id]');
+      for (index = j = 0, len = ref1.length; j < len; index = ++j) {
+        el = ref1[index];
+        indices[$(el).data('selected-item-id')] = index;
+      }
+      this.selectedItems.sort((a, b) => {
+        var aIndex, bIndex;
+        aIndex = indices[a.id];
+        bIndex = indices[b.id];
+        if (aIndex > bIndex) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+      return this.refreshSelectedItems();
+    }
+
+    setLoading(state) {
+      this.$el.toggleClass('loading', state);
+      return this.$('.fa-search').toggleClass('fa-spin', state);
+    }
+
+  };
+
+  MultiSelectInput.prototype.events = {
+    'keyup [data-search-field]': 'onSearchKeyUp',
+    'click [data-add-all]': 'onAllItemsAdded',
+    'click [data-remove-all]': 'onAllItemsRemoved'
+  };
+
+  return MultiSelectInput;
+
+}).call(this);
+
+Para.MultiSelectAvailableItem = (function() {
+  class MultiSelectAvailableItem extends Vertebra.View {
+    initialize() {
+      return this.id = this.$el.data('available-item-id');
+    }
+
+    addItem() {
+      return this.trigger('add', this);
+    }
+
+    setSelected(selected) {
+      this.selected = selected;
+      return this.$el.toggleClass('selected', this.selected);
+    }
+
+  };
+
+  MultiSelectAvailableItem.prototype.events = {
+    'click [data-add-item]': 'addItem'
+  };
+
+  return MultiSelectAvailableItem;
+
+}).call(this);
+
+ref1 = Para.MultiSelectSelectedItem = class MultiSelectSelectedItem extends Vertebra.View {
+  constructor() {
+    super(...arguments);
+    this.removeItem = this.removeItem.bind(this);
+  }
+
+  initialize() {
+    return this.id = this.$el.data('selected-item-id');
+  }
+
+  bindEvents() {
+    return this.$('[data-remove-item]').on('click', this.removeItem);
+  }
+
+  renderTo($container) {
+    this.$el.appendTo($container);
+    return this.bindEvents();
+  }
+
+  removeItem(e) {
+    boundMethodCheck(this, ref1);
+    return this.trigger('remove', this);
+  }
+
+};
+
+$.simpleForm.onDomReady(function($document) {
+  return $document.find('[data-multi-select-input]').each(function(i, el) {
+    return new Para.MultiSelectInput({
+      el: el
+    });
+  });
+});

data/app/javascripts/para/inputs/nested_many.js

@@ -0,0 +1,151 @@
+Para.NestedManyField = class NestedManyField {
+  constructor($field1) {
+    this.stoppingPropagation = this.stoppingPropagation.bind(this);
+    this.afterInsertField = this.afterInsertField.bind(this);
+    this.beforeRemoveField = this.beforeRemoveField.bind(this);
+    // When a sub field is removed, update every sub field position
+    this.afterRemoveField = this.afterRemoveField.bind(this);
+    this.collapseShown = this.collapseShown.bind(this);
+    this.$field = $field1;
+    this.$fieldsList = this.$field.find('.fields-list');
+    this.initializeOrderable();
+    this.initializeCocoon();
+    this.$field.on('shown.bs.collapse', this.stoppingPropagation(this.collapseShown));
+  }
+
+  initializeOrderable() {
+    this.orderable = this.$field.hasClass('orderable');
+    if (!this.orderable) {
+      return;
+    }
+    return this.$fieldsList.sortable({
+      handle: '.order-anchor',
+      animation: 150,
+      onUpdate: $.proxy(this.handleOrderingUpdated, this)
+    });
+  }
+
+  handleOrderingUpdated() {
+    var formFields;
+    formFields = [];
+    return this.$fieldsList.find('.form-fields:visible').each(function(_i, el) {
+      var $el, $parent, isNestedField, j, len;
+      for (j = 0, len = formFields.length; j < len; j++) {
+        $parent = formFields[j];
+        isNestedField = $parent.find(el).length;
+      }
+      if (isNestedField) {
+        return;
+      }
+      $el = $(el);
+      $el.find('.resource-position-field:eq(0)').val(formFields.length);
+      return formFields.push($el);
+    });
+  }
+
+  initializeCocoon() {
+    this.$fieldsList.on('cocoon:after-insert', this.stoppingPropagation(this.afterInsertField));
+    this.$fieldsList.on('cocoon:before-remove', this.stoppingPropagation(this.beforeRemoveField));
+    return this.$fieldsList.on('cocoon:after-remove', this.stoppingPropagation(this.afterRemoveField));
+  }
+
+  stoppingPropagation(callback) {
+    return (e, ...args) => {
+      e.stopPropagation();
+      return callback(e, ...args);
+    };
+  }
+
+  afterInsertField(e, $element) {
+    var $collapsible;
+    if (($collapsible = $element.find('[data-open-on-insert="true"]')).length) {
+      this.openInsertedField($collapsible);
+    }
+    if (this.orderable) {
+      this.$fieldsList.sortable('destroy');
+      this.initializeOrderable();
+      this.handleOrderingUpdated();
+    }
+    return $element.simpleForm();
+  }
+
+  beforeRemoveField(e, $element) {
+    var $nextEl;
+    $nextEl = $element.next();
+    if ($nextEl.is('[data-attributes-mappings]') && !$element.is('[data-persisted]')) {
+      // Remove attributes mappings field for new records since it will try to
+      // create an empty nested resource otherwise
+      return $nextEl.remove();
+    }
+  }
+
+  afterRemoveField() {
+    return this.handleOrderingUpdated();
+  }
+
+  openInsertedField($field) {
+    var $target;
+    $target = $($field.attr('href'));
+    return $target.collapse('show');
+  }
+
+  collapseShown(e) {
+    var $target;
+    $target = $(e.target);
+    if ($target.is("[data-rendered]") || $target.data("rendered")) {
+      return this.initializeCollapseContent($target);
+    } else {
+      this.loadCollapseContent($target);
+      return this.scrollToTarget($target);
+    }
+  }
+
+  initializeCollapseContent($target) {
+    this.scrollToTarget($target);
+    return this.focusFirstField($target);
+  }
+
+  scrollToTarget($target) {
+    var $affixNavTabs, $field, scrollOffset;
+    $field = this.$field.find(`[data-toggle='collapse'][href='#${$target.attr('id')}']`);
+    scrollOffset = -($('[data-header]').outerHeight() + 30);
+    if (($affixNavTabs = $('[data-affix-header="tabs"]:eq(0)')).length) {
+      scrollOffset -= $affixNavTabs.outerHeight();
+    }
+    return $.scrollTo($field, 200, {
+      offset: scrollOffset
+    });
+  }
+
+  focusFirstField($target) {
+    return $target.find('input, textarea, select').eq('0').focus();
+  }
+
+  loadCollapseContent($target) {
+    var data, targetUrl;
+    targetUrl = $target.data("render-path");
+    if (!targetUrl) {
+      return;
+    }
+    data = {
+      "id": $target.data("id"),
+      "object_name": $target.data("object-name"),
+      "model_name": $target.data("model-name")
+    };
+    return $.get(targetUrl, data).then((resp) => {
+      var $content;
+      $content = $(resp);
+      $target.find("[data-nested-form-container]:eq(0)").html($content);
+      $content.simpleForm();
+      this.focusFirstField($target);
+      return $target.data("rendered", true);
+    });
+  }
+
+};
+
+$.simpleForm.onDomReady(function($document) {
+  return $document.find('.nested-many-field').each(function(i, el) {
+    return new Para.NestedManyField($(el));
+  });
+});

data/app/javascripts/para/lib/fetch.js

@@ -0,0 +1,41 @@
+import crossFetch from "cross-fetch";
+
+export const GET = "GET";
+export const POST = "POST";
+export const PATCH = "PATCH";
+export const DELETE = "DELETE";
+
+// This method is a shortcut method for calling `fetch` with a setup that allows calling
+// the Rails backend, preprocessing the response text or throwing an error if the response
+// has a 400+ status code.
+//
+// This is useful to fetch a remote partial from the server or submit a sub-part of a form
+// like used in the FormBranchConditionsEditorManager component.
+//
+export const fetch = (url, fetchOptions = {}) => {
+  const csrfToken = document.querySelector("meta[name='csrf-token']").content;
+
+  fetchOptions.headers = fetchOptions.headers || {};
+  fetchOptions.headers["X-CSRF-Token"] = csrfToken;
+  
+  const options = {
+    method: "GET",
+    credentials: "include",
+    ...fetchOptions
+  };
+
+  return crossFetch(url, options).then(
+    // Handle the server response and potential form errors depending on the type of the
+    // response status code
+    response => {
+      if (response.ok) {
+        return response.text();
+      } else {
+        const error = new Error(response.statusText);
+        error.response = response;
+        throw error;
+      }
+    }
+  );
+};
+

data/app/javascripts/para/lib/page-loading.js

@@ -0,0 +1,42 @@
+Para.PageLoading = class PageLoading {
+  constructor() {
+    this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
+  }
+
+  start() {
+    return this.addLoadingMarkup();
+  }
+
+  stop() {
+    return this.removeLoadingMarkup();
+  }
+
+  addLoadingMarkup() {
+    $('<div/>', {
+      class: 'loading-overlay',
+      'data-loading-overlay': true
+    }).prependTo('body');
+    
+    $('<div/>', {
+      class: 'loading-spinner',
+      'data-loading-spinner': true
+    }).prependTo('body');
+  }
+
+  removeLoadingMarkup() {
+    $('[data-loading-overlay]').remove();
+    return $('[data-loading-spinner]').remove();
+  }
+
+};
+
+// Global loading manager allowing to
+Para.loadingManager = new Para.PageLoading();
+
+$(document).on('turbo:before-fetch-request', Para.loadingManager.start);
+
+$(document).on('turbo:load turbo:frame-load turbo:before-stream-render turbo:frame-missing turbo:fetch-request-error', function() {
+  Para.loadingManager.stop();
+  return $('body').on('submit', '[data-para-form]:not([data-remote])', Para.loadingManager.start);
+});

data/app/javascripts/para/simple_form_extension/colorpicker.js

@@ -0,0 +1,30 @@
+var ColorPicker;
+
+ColorPicker = class ColorPicker {
+  constructor($el) {
+    var $parent;
+    this.$el = $el;
+    if (($parent = this.$el.closest('[data-colorpicker-wrapper]')).length) {
+      $parent.colorpicker();
+    } else {
+      this.$el.colorpicker();
+    }
+  }
+
+};
+
+$.fn.simpleFormColorpicker = function() {
+  return this.each(function(i, el) {
+    var $input, instance;
+    $input = $(el);
+    if ($input.data('simple-form:colorpicker')) {
+      return;
+    }
+    instance = new ColorPicker($input);
+    return $input.data('simple-form:colorpicker', instance);
+  });
+};
+
+$.simpleForm.onDomReady(function($document) {
+  return $document.find('[data-colorpicker]').simpleFormColorpicker();
+});