para 0.11.4 → 0.12.0

data/app/javascripts/para/admin/tree.js

@@ -0,0 +1,124 @@
+import { PATCH, fetch } from "../lib/fetch";
+
+Para.ResourceTree = class ResourceTree {
+  constructor($el1) {
+    this.initializeSubTree = this.initializeSubTree.bind(this);
+    // Note : This method is called often (many times per second while we're dragging) and
+    // takes quite some processing.
+    this.isMovementValid = this.isMovementValid.bind(this);
+    this.handleOrderUpdated = this.handleOrderUpdated.bind(this);
+    this.$el = $el1;
+    this.initializeTree();
+  }
+
+  initializeTree() {
+    this.orderUrl = this.$el.data('url');
+    this.maxDepth = parseInt(this.$el.data('max-depth'));
+    // Each is needed here as the sortable jQuery plugin doesn't loop over each found node
+    // but initializes the tree on the first found element.
+    return $(".tree").each(this.initializeSubTree);
+  }
+
+  initializeSubTree(_i, el) {
+    return $(el).sortable({
+      group: "tree",
+      handle: ".handle",
+      draggable: ".node",
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      animation: 150,
+      onSort: this.handleOrderUpdated,
+      onMove: this.isMovementValid
+    });
+  }
+
+  isMovementValid(e) {
+    var $movedNode, $movedNodeSubtrees, $target, finalSubtreeDeepnessAfterMove, movedNodeDeepness, movedNodeTreeDeepness, targetDeepness;
+    $movedNode = $(e.dragged);
+    $target = $(e.related);
+    // Calculate the deepness of the moved and target nodes
+    movedNodeDeepness = $movedNode.parents(".node").length - 1;
+    // If the target is a node, the moved node root deepness is gonna be the same as the
+    // the target one, else the tree's parent node is counted also
+    targetDeepness = $target.parents(".node").length - 1;
+    // Find the deepest node in the subtree of the moved node
+    $movedNodeSubtrees = $movedNode.find(".tree");
+    movedNodeTreeDeepness = 0;
+    // The movedNodeTreeDeepness is the maximum deepness of a child node of the current
+    // moved node, relative to the moved node
+    $movedNodeSubtrees.each((i, el) => {
+      var subtreeDeepness, subtreeRelativeDeepness;
+      subtreeDeepness = $(el).parents(".node").length - 1;
+      subtreeRelativeDeepness = subtreeDeepness - movedNodeDeepness;
+      return movedNodeTreeDeepness = Math.max(movedNodeTreeDeepness, subtreeRelativeDeepness);
+    });
+    // Calculate the final subtree deepness once we move the whole moved node subtree to
+    // its target position
+    finalSubtreeDeepnessAfterMove = movedNodeTreeDeepness + targetDeepness;
+    // We finally validate the move only if the final subtree deepness is lower than the
+    // maximum allowed depth
+    return finalSubtreeDeepnessAfterMove <= this.maxDepth;
+  }
+
+  handleOrderUpdated(e) {
+    var $el, j, len, treeLeaves;
+    // Get all involved tree leaves that may include a subtree
+    treeLeaves = [$(e.target), $(e.from), $(e.item).find('.tree')];
+    for (j = 0, len = treeLeaves.length; j < len; j++) {
+      $el = treeLeaves[j];
+      // Update their placeholder display wether they can be a drop target or not
+      this.handlePlaceholder($el);
+    }
+    // Save the tree structure on the server
+    this.updateOrder();
+  }
+
+  // This method checks wether a given tree leaf can be a drop target, depending
+  // on wether it's located at the maximum allowed depth for the tree or not, and adds or
+  // remove a the visual placeholder to indicate its droppable state.
+
+  handlePlaceholder($el) {
+    var $placeholder, hasChildren, parentsCount;
+    $placeholder = $el.find("> .placeholder");
+    parentsCount = $el.parents('.node').length - 1;
+    hasChildren = $el.find('> .node').length;
+    if (parentsCount >= this.maxDepth || hasChildren) {
+      $placeholder.hide();
+      return $el.children(".tree").each((index, el) => {
+        return this.handlePlaceholder($(el));
+      });
+    } else {
+      return $placeholder.show();
+    }
+  }
+
+  updateOrder() {
+    fetch(this.orderUrl, { 
+      method: PATCH, 
+      body: this.buildOrderedData() 
+    });
+  }
+
+  buildOrderedData() {
+    const data = new FormData();
+
+    $(".node").each(function(index, el) {
+      const $el = $(el);
+      const resourceKey =  `resources[${index}]`
+      const parentId = $el.parents(".node").last().data("id") || "";
+
+      data.append(`${resourceKey}[id]`, $el.data("id"));
+      data.append(`${resourceKey}[position]`, index);
+      data.append(`${resourceKey}[parent_id]`, parentId);
+    });
+
+    return data;
+  }
+};
+
+// TODO: Add flash message to display ordering success
+$(document).on('turbo:load turbo:frame-load', function() {
+  return $('.root-tree').each(function(_i, el) {
+    return new Para.ResourceTree($(el));
+  });
+});

data/app/javascripts/para/application.js

@@ -0,0 +1,2 @@
+// Initialize Para's scope object
+window.Para = {}

data/app/javascripts/para/controllers/application.js

@@ -0,0 +1,17 @@
+import { Application } from "@hotwired/stimulus";
+
+function startStimulusApplication() {
+  if (window.Stimulus) return window.Stimulus;
+  
+  const application = Application.start();
+
+  // Configure Stimulus development experience
+  application.debug = false;
+  window.Stimulus = application;
+
+  return application;
+}
+
+const application = startStimulusApplication();
+
+export { application };

data/app/javascripts/para/controllers/index.js

@@ -0,0 +1,10 @@
+import { application } from "./application";
+
+import ParaAdminModalController from "./para_admin_modal_controller";
+application.register("para-admin-modal", ParaAdminModalController);
+
+import ParaAdminFlashMessageController from "./para_admin_flash_message_controller";
+application.register("para-admin-flash-message", ParaAdminFlashMessageController);
+
+import SelectizeFieldController from "./selectize_field_controller";
+application.register("selectize-field", SelectizeFieldController);

data/app/javascripts/para/controllers/para_admin_flash_message_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+
+const FLASH_BASE_OFFSET = 10;
+
+export default class extends Controller {
+  static targets = ["alert"];
+
+  connect() {
+    this.refreshTopOffset = this.refreshTopOffset.bind(this);
+
+    this.autoCloseTimer = setTimeout(() => this.close(), 10000);
+
+    this.refreshTopOffset();
+    window.addEventListener("resize", this.refreshTopOffset);
+
+    this.element.classList.add("in");
+  }
+
+  disconnect() {
+    this.cleanTimer();
+    window.removeEventListener("resize", this.refreshTopOffset);
+  }
+
+  close() {
+    this.element.classList.remove("in");
+    this.removeTimer = setTimeout(() => this.element.remove(), 500);
+  }
+
+  cleanTimer() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+    }
+
+    if (this.removeTimer) {
+      clearTimeout(this.removeTimer);
+    }
+  }
+
+  refreshTopOffset() {
+    const headerHeight = document.querySelector("[data-header]")?.offsetHeight || 0;
+    const affixHeaderHeight = 
+      document.querySelector("[data-affix-header]")?.offsetHeight || 0;
+
+    const offsetTop = headerHeight + affixHeaderHeight + FLASH_BASE_OFFSET;
+    
+    this.element.parentElement.style.top = `${offsetTop}px`;
+  }
+}

data/app/javascripts/para/controllers/para_admin_modal_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = {};
+  static targets = ["modal"];
+
+  connect() {}
+
+  disconnect() {
+    if (this.hasModalTarget) this.modalTarget.remove();
+  }
+
+  modalTargetConnected() {
+    this.modalTarget.classList.add('in', 'show');
+    this.displayBackdrop();
+    document.body.classList.add('modal-open');
+
+    $(this.element).simpleForm();
+  }
+
+  modalTargetDisconnected() {
+    this.closeModal();
+  }
+
+  closeModal() {
+    document.body.classList.remove('modal-open');
+
+    if (this.hasModalTarget) this.modalTarget.classList.remove('in', 'show');
+    this.backdropElement?.remove();
+    delete this.backdropElement;
+  }
+
+  displayBackdrop() {
+    if (this.backdropElement) return;
+
+    this.backdropElement = document.createElement('div');
+    this.backdropElement.classList.add(
+      'modal-backdrop', 'fade', 'in', 'bg-primary', 'bg-primary-80-desktop'
+    );
+
+    this.element.appendChild(this.backdropElement);
+  }
+}

data/app/javascripts/para/controllers/selectize_field_controller.js

@@ -0,0 +1,142 @@
+import { Controller } from "@hotwired/stimulus";
+import Selectize from '@selectize/selectize';
+
+export default class extends Controller {
+  static values = {
+    "input": Array,
+    "creatable": Boolean,
+    "multi": Boolean,
+    "addTranslation": String,
+    "collection": Array,
+    "max-items": Number,
+    "sort-field": String,
+    "search-url": String,
+    "search-param": String,
+    "escape": Boolean
+  };
+
+  static targets = [];
+
+  connect() {
+    if (this.element.selectize) return;
+
+    // Clean previously initialized selectize DOM elements if any
+    if (this.element.nextSibling?.classList?.contains('selectize')) {
+      this.element.nextSibling.remove();
+    }
+
+    this.load = this.load.bind(this);
+
+    this.isSingle = !this.multiValue;
+
+    this.$el = $(this.element);
+    this.$el.selectize(this.options);
+
+    if (this.inputValue) this.initializeValue(this.inputValue);
+  }
+
+  get options() {
+    return {
+      mode: this.isSingle ? 'single' : 'multi',
+      maxItems: this.isSingle ? 1 : this.maxItemsValue,
+      sortField: this.sortFieldValue,
+      plugins: ['remove_button', 'clear_button'],
+      create: this.creatableValue,
+      render: this.renderOptions,
+      options: this.collectionValue,
+      load: this.load
+    };
+  }
+
+  initializeValue(options) {
+    if (this.isSingle) {
+      this.addAndSelect(options[0]);
+    } else {
+      options.forEach(option => this.addAndSelect(option));
+    }
+  }
+
+  addAndSelect(option) {
+    this.element.selectize.addOption(option);
+    return this.element.selectize.addItem(option.value);
+  }
+
+  load(query, callback) {
+    var data;
+    
+    if (!(query.length && this.searchUrlValue)) {
+      return callback();
+    }
+
+    data = {};
+    data[this.searchParamValue] = query;
+    
+    return $.ajax({
+      url: this.searchUrlValue,
+      type: 'GET',
+      data: data,
+      error: callback,
+      success: callback
+    });
+  }
+
+  get renderOptions() {
+    return {
+      option: (data, escape) => {
+        return `
+          <div data-value="${escape(data.value)}" class="item">
+            ${(this.escapeValue ? escape(data.text) : data.text)}
+          </div>
+        `;
+      },
+      item: (data, escape) => {
+        return `
+          <div data-value="${escape(data.value)}" data-selectable="" class="option">
+            ${(this.escapeValue ? escape(data.text) : data.text)}
+          </div>
+        `;
+      },
+      option_create: (data) => {
+        return `
+          <div class="create" data-selectable="">
+            ${this.addTranslationValue}
+            <strong>${data.input}</strong> ...
+          </div>
+        `;
+      }
+    };
+  }
+}
+
+// Fix for allowEmptyOption issue
+
+// See : https://github.com/selectize/selectize.js/issues/967
+
+hash_key = function(value) {
+  if (typeof value === 'undefined' || value === null) {
+    return null;
+  }
+  if (typeof value === 'boolean') {
+    if (value) {
+      return '1';
+    } else {
+      return '0';
+    }
+  }
+  return value + '';
+};
+
+$.extend(Selectize.prototype, {
+  registerOption: function(data) {
+    var key;
+    key = hash_key(data[this.settings.valueField]);
+    // Line 1187 of src/selectize.js should be changed
+    // if (!key || this.options.hasOwnProperty(key)) return false;
+    if (typeof key === 'undefined' || key === null || this.options.hasOwnProperty(key)) {
+      return false;
+    }
+    data.$order = data.$order || ++this.order;
+    this.options[key] = data;
+    return key;
+  }
+});

data/app/javascripts/para/index.js

@@ -0,0 +1,31 @@
+import "./vendor/jquery";
+
+import "bootstrap";
+import "@selectize/selectize";
+import "sortablejs";
+
+import "./simple_form_extension";
+
+import "./vendor/cocoon";
+import "./vendor/vertebra";
+import "./vendor/jasny-bootstrap";
+import "./vendor/jquery.scrollto";
+import "./vendor/jquery.sortable";
+
+import "./application";
+
+import "./lib/page-loading";
+
+import "./inputs/material-input";
+import "./inputs/multi-select-input";
+import "./inputs/nested_many";
+
+import "./admin/async-progress";
+import "./admin/filters-form";
+import "./admin/job-tracker";
+import "./admin/table";
+import "./admin/tabs";
+import "./admin/theme_actions";
+import "./admin/tree";
+
+import "./controllers";

data/app/javascripts/para/inputs/material-input.js

@@ -0,0 +1,7 @@
+$(document).on('page:change turbo:load turbo:frame-load', function() {
+  return $('body').on('focusin focusout', 'input, select, textarea', function(e) {
+    var focused;
+    focused = e.type === 'focusin';
+    return $(e.target).closest('.form-group').toggleClass('focused', focused);
+  });
+});