cocooned 1.3.0 → 1.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d9d9a27c6eb59ebc51ae3ab92101a7cf66f6fc13e8e23b011a19ee8722dd083
-  data.tar.gz: c258c388dc29c44d3b0dc9024d5423a7c118ef45f5549c168b61f536c55e9b8a
+  metadata.gz: 0ff5fc052a1bf37f18e1f22b550f35bf876e0cc09c4c7d4ebef3667c7afde67a
+  data.tar.gz: 55202ea14bda345f2ed5f20fc95ebb0de1bfa7831e9f70ba92b2a092c7ca210b
 SHA512:
-  metadata.gz: a5f36777a4f62e29498b58491db235b55df6df2084e9a1cebdbbf0842501751e740ee4e996084d7092fe39da85609fb4575f23e64032a3a4207a5ddb5d7bf605
-  data.tar.gz: a80571f97c5ffaf66aea6856b3ea0cc3ee1d403633e48b18cb6e1a464c93cf353cd6d10a4a1681c60bba9aa98f647922de74aac62e9a23172fbdf637fd3b77de
+  metadata.gz: ed672de23fce13326d63cb1e943689ea8f4df8be8873111daecb9a25df954ee06a47592a6b28399c95120e6079337c26125838b42a868395e0d5639d08461569
+  data.tar.gz: 23b8d0ab6bdfda55e974f322bec4a0a39a9fd089f9bfbfa343144ccdc76639560286a4212ac3018e0ee10a567d70b8f363be5c3c3578e5000440de41a2464e04

data/Rakefile

@@ -1,44 +1,106 @@
 # frozen_string_literal: true
 
-require 'bundler/gem_tasks'
+## Test suites
 
-# Test suites
+# Ruby
 require 'rspec/core/rake_task'
 RSpec::Core::RakeTask.new
-
 task default: :spec
 
+# JavaScript
 require 'jasmine'
 load 'jasmine/tasks/jasmine.rake'
 
-# Linters
+## Linters
+
+# Ruby
 require 'rubocop/rake_task'
 RuboCop::RakeTask.new do |task|
   task.options = ['--config', 'config/linters/ruby.yml']
 end
 
+# JavaScript
 eslint_args = ['--no-eslintrc', '--config config/linters/js.json']
 eslint_path = ['app/assets/**/*.js', 'spec/javascripts/**/*.js', 'spec/dummy/app/assets/**/*.js']
 
 namespace :eslint do
-  desc 'Auto-correct JavaScript files'
+  desc 'Auto-correct eslint offenses'
   task :auto_correct do
     system("yarnpkg run eslint #{(eslint_args + ['--fix']).join(' ')} #{eslint_path.join(' ')}")
   end
 end
 
-desc 'Lint JavaScript code'
+desc 'Run eslint'
 task :eslint do
   system("yarnpkg run eslint #{eslint_args.join(' ')} #{eslint_path.join(' ')}")
 end
 
-# Documentation
-require 'rdoc/task'
+# Both
+namespace :linters do
+  desc 'Auto-correct Rubocop and eslint offenses'
+  task auto_correct: ['rubocop:auto_correct', 'eslint:auto_correct']
+end
+
+desc 'Run Rubocop and eslint'
+task linters: %i[rubocop eslint]
+
+## Packaging
+
+# Ruby
+require 'bundler/gem_tasks'
+
+# JavaScript
+require 'json'
+
+spec = Bundler.load_gemspec('./cocooned.gemspec')
+npm_scope = 'notus.sh'
+
+npm_src_dir = './npm'
+npm_dest_dir = './dist'
+CLOBBER.include 'dist'
 
-Rake::RDocTask.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'Cocooned'
-  rdoc.options << '--line-numbers' << '--inline-source'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
+assets_dir = './app/assets/'
+
+npm_files = {
+  File.join(npm_dest_dir, 'cocooned.js') => File.join(assets_dir, 'javascripts', 'cocooned.js'),
+  File.join(npm_dest_dir, 'cocooned.css') => File.join(assets_dir, 'stylesheets', 'cocooned.css'),
+  File.join(npm_dest_dir, 'README.md') => File.join(npm_src_dir, 'README.md'),
+  File.join(npm_dest_dir, 'LICENSE') => './LICENSE'
+}
+
+namespace :npm do
+  npm_files.each do |dest, src|
+    file dest => src do
+      cp src, dest
+    end
+  end
+
+  task :'package-json' do
+    contributors = []
+    spec.authors.each_with_index do |name, i|
+      next if spec.email[i].nil?
+      contributors << {
+        name: name.dup.force_encoding('UTF-8'),
+        email: spec.email[i].dup.force_encoding('UTF-8')
+      }
+    end
+
+    template = ERB.new(File.read(File.join(npm_src_dir, 'package.json.erb')))
+    content = template.result_with_hash(scope: npm_scope, spec: spec, contributors: contributors)
+    File.write(File.join(npm_dest_dir, 'package.json'),
+               JSON.pretty_generate(JSON.parse(content)))
+  end
+
+  desc "Build #{npm_scope}-#{spec.name}-#{spec.version}.tgz into the pkg directory"
+  task build: (%i[package-json] + npm_files.keys) do
+    system("cd #{npm_dest_dir} && npm pack && mv ./#{npm_scope}-#{spec.name}-#{spec.version}.tgz ../pkg/")
+  end
+
+  desc "Build and push #{npm_scope}-#{spec.name}-#{spec.version}.tgz to https://npmjs.org"
+  task release: %i[build] do
+    system("npm publish ./pkg/#{npm_scope}-#{spec.name}-#{spec.version}.tgz --access public")
+  end
 end
+
+desc 'Build packages and push them to their respective repository'
+task releases: [:release, 'npm:release']

data/app/assets/javascripts/cocoon.js

@@ -2,6 +2,7 @@
 //= require 'cocooned'
 
 // Compatibility with the original Cocoon
+// TODO: Remove in 2.0
 function initCocoon () {
   $(Cocooned.prototype.selector('add')).each(function (_i, addLink) {
     var container = Cocooned.prototype.findContainer(addLink);

data/app/assets/javascripts/cocooned.js

@@ -1,3 +1,449 @@
-//= require './cocooned/core'
-//= require_tree './cocooned/plugins'
-//= require_tree './cocooned/jquery'
+/* globals define */
+
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], function (jquery) {
+      return (root.Cocooned = factory(jquery));
+    });
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    root.Cocooned = factory(root.jQuery);
+  }
+}(typeof self !== 'undefined' ? self : this, function ($) {
+  var Cocooned = function (container, options) {
+    this.container = $(container);
+    this.options = $.extend({}, this.defaultOptions(), (options || {}));
+
+    // Autoload plugins
+    for (var moduleName in Cocooned.Plugins) {
+      if (Cocooned.Plugins.hasOwnProperty(moduleName)) {
+        var module = Cocooned.Plugins[moduleName];
+        var optionName = moduleName.charAt(0).toLowerCase() + moduleName.slice(1);
+
+        if (this.options[optionName]) {
+          for (var method in module) {
+            if (module.hasOwnProperty(method) && typeof module[method] === 'function') {
+              this[method] = module[method];
+            }
+          }
+        }
+      }
+    }
+
+    this.init();
+  };
+
+  Cocooned.Plugins = {};
+  Cocooned.prototype = {
+
+    elementsCounter: 0,
+
+    // Compatibility with Cocoon
+    // TODO: Remove in 2.0 (Only Cocoon namespaces).
+    namespaces: {
+      events: ['cocooned', 'cocoon']
+    },
+
+    // Compatibility with Cocoon
+    // TODO: Remove in 2.0 (Only Cocoon class names).
+    classes: {
+      // Actions link
+      add: ['cocooned-add', 'add_fields'],
+      remove: ['cocooned-remove', 'remove_fields'],
+      up: ['cocooned-move-up'],
+      down: ['cocooned-move-down'],
+      // Containers
+      container: ['cocooned-container'],
+      item: ['cocooned-item', 'nested-fields']
+    },
+
+    defaultOptions: function () {
+      var options = {};
+
+      for (var moduleName in Cocooned.Plugins) {
+        if (Cocooned.Plugins.hasOwnProperty(moduleName)) {
+          var module = Cocooned.Plugins[moduleName];
+          var optionName = moduleName.charAt(0).toLowerCase() + moduleName.slice(1);
+
+          options[optionName] = module.defaultOptionValue;
+        }
+      }
+
+      return options;
+    },
+
+    notify: function (node, eventType, eventData) {
+      return !(this.namespaces.events.some(function (namespace) {
+        var namespacedEventType = [namespace, eventType].join(':');
+        var event = $.Event(namespacedEventType, eventData);
+
+        node.trigger(event, [eventData.node, eventData.cocooned]);
+
+        return (event.isPropagationStopped() || event.isDefaultPrevented());
+      }));
+    },
+
+    selector: function (type, selector) {
+      var s = selector || '&';
+      return this.classes[type].map(function (klass) { return s.replace(/&/, '.' + klass); }).join(', ');
+    },
+
+    namespacedNativeEvents: function (type) {
+      var namespaces = this.namespaces.events.map(function (ns) { return '.' + ns; });
+      namespaces.unshift(type);
+      return namespaces.join('');
+    },
+
+    buildId: function () {
+      return (new Date().getTime() + this.elementsCounter++);
+    },
+
+    buildContentNode: function (content) {
+      var id = this.buildId();
+      var html = (content || this.content);
+      var braced = '[' + id + ']';
+      var underscored = '_' + id + '_';
+
+      ['associations', 'association'].forEach(function (a) {
+        html = html.replace(this.regexps[a]['braced'], braced + '$1');
+        html = html.replace(this.regexps[a]['underscored'], underscored + '$1');
+      }, this);
+
+      return $(html);
+    },
+
+    getInsertionNode: function (adder) {
+      var $adder = $(adder);
+      var insertionNode = $adder.data('association-insertion-node');
+      var insertionTraversal = $adder.data('association-insertion-traversal');
+
+      if (!insertionNode) {
+        return $adder.parent();
+      }
+
+      if (typeof insertionNode === 'function') {
+        return insertionNode($adder);
+      }
+
+      if (insertionTraversal) {
+        return $adder[insertionTraversal](insertionNode);
+      }
+
+      return insertionNode === 'this' ? $adder : $(insertionNode);
+    },
+
+    getInsertionMethod: function (adder) {
+      var $adder = $(adder);
+      return $adder.data('association-insertion-method') || 'before';
+    },
+
+    getItems: function (selector) {
+      selector = selector || '';
+      var self = this;
+      return $(this.selector('item', selector), this.container).filter(function () {
+        return ($(this).closest(self.selector('container')).get(0) === self.container.get(0));
+      });
+    },
+
+    findContainer: function (addLink) {
+      var $adder = $(addLink);
+      var insertionNode = this.getInsertionNode($adder);
+      var insertionMethod = this.getInsertionMethod($adder);
+
+      switch (insertionMethod) {
+        case 'before':
+        case 'after':
+        case 'replaceWith':
+          return insertionNode.parent();
+
+        case 'append':
+        case 'prepend':
+        default:
+          return insertionNode;
+      }
+    },
+
+    findItem: function (removeLink) {
+      return $(removeLink).closest(this.selector('item'));
+    },
+
+    init: function () {
+      var self = this;
+
+      this.addLinks = $(this.selector('add')).filter(function () {
+        var container = self.findContainer(this);
+        return (container.get(0) === self.container.get(0));
+      });
+
+      var addLink = $(this.addLinks.get(0));
+
+      this.content = addLink.data('association-insertion-template');
+      this.regexps = {
+        association: {
+          braced: new RegExp('\\[new_' + addLink.data('association') + '\\](.*?\\s)', 'g'),
+          underscored: new RegExp('_new_' + addLink.data('association') + '_(\\w*)', 'g')
+        },
+        associations: {
+          braced: new RegExp('\\[new_' + addLink.data('associations') + '\\](.*?\\s)', 'g'),
+          underscored: new RegExp('_new_' + addLink.data('associations') + '_(\\w*)', 'g')
+        }
+      };
+
+      this.initUi();
+      this.bindEvents();
+    },
+
+    initUi: function () {
+      var self = this;
+
+      if (!this.container.attr('id')) {
+        this.container.attr('id', this.buildId());
+      }
+      this.container.addClass(this.classes['container'].join(' '));
+
+      $(function () { self.hideMarkedForDestruction(); });
+      $(document).on('page:load turbolinks:load', function () { self.hideMarkedForDestruction(); });
+    },
+
+    bindEvents: function () {
+      var self = this;
+
+      // Bind add links
+      this.addLinks.on(
+        this.namespacedNativeEvents('click'),
+        function (e) {
+          e.preventDefault();
+          self.add(this);
+        });
+
+      // Bind remove links
+      // (Binded on document instead of container to not bypass click handler defined in jquery_ujs)
+      $(document).on(
+        this.namespacedNativeEvents('click'),
+        this.selector('remove', '#' + this.container.attr('id') + ' &'),
+        function (e) {
+          e.preventDefault();
+          self.remove(this);
+        });
+
+      // Bind options events
+      $.each(this.options, function (name, value) {
+        var bindMethod = 'bind' + name.charAt(0).toUpperCase() + name.slice(1);
+        if (value && self[bindMethod]) {
+          self[bindMethod]();
+        }
+      });
+    },
+
+    add: function (adder) {
+      var $adder = $(adder);
+      var insertionMethod = this.getInsertionMethod($adder);
+      var insertionNode = this.getInsertionNode($adder);
+      var contentTemplate = $adder.data('association-insertion-template');
+      var count = parseInt($adder.data('count'), 10) || 1;
+
+      for (var i = 0; i < count; i++) {
+        var contentNode = this.buildContentNode(contentTemplate);
+        var eventData = { link: $adder, node: contentNode, cocooned: this };
+        var afterNode = (insertionMethod === 'replaceWith' ? contentNode : insertionNode);
+
+        // Insertion can be prevented through a 'cocooned:before-insert' event handler
+        if (!this.notify(insertionNode, 'before-insert', eventData)) {
+          return false;
+        }
+
+        insertionNode[insertionMethod](contentNode);
+
+        this.notify(afterNode, 'after-insert', eventData);
+      }
+    },
+
+    remove: function (remover) {
+      var self = this;
+      var $remover = $(remover);
+      var nodeToDelete = this.findItem($remover);
+      var triggerNode = nodeToDelete.parent();
+      var eventData = { link: $remover, node: nodeToDelete, cocooned: this };
+
+      // Deletion can be prevented through a 'cocooned:before-remove' event handler
+      if (!this.notify(triggerNode, 'before-remove', eventData)) {
+        return false;
+      }
+
+      var timeout = triggerNode.data('remove-timeout') || 0;
+
+      setTimeout(function () {
+        if ($remover.hasClass('dynamic')) {
+          nodeToDelete.remove();
+        } else {
+          nodeToDelete.find('input[required], select[required]').each(function (index, element) {
+            $(element).removeAttr('required');
+          });
+          $remover.siblings('input[type=hidden][name$="[_destroy]"]').val('true');
+          nodeToDelete.hide();
+        }
+        self.notify(triggerNode, 'after-remove', eventData);
+      }, timeout);
+    },
+
+    hideMarkedForDestruction: function () {
+      var self = this;
+      $(this.selector('remove', '&.existing.destroyed'), this.container).each(function (i, removeLink) {
+        var node = self.findItem(removeLink);
+        node.hide();
+      });
+    }
+  };
+
+  Cocooned.Plugins.Limit = {
+
+    defaultOptionValue: false,
+
+    bindLimit: function () {
+      this.limit = this.options['limit'];
+      this.container.on('cocooned:before-insert', function (e) {
+        var cocooned = e.cocooned;
+        if (cocooned.getLength() < cocooned.limit) {
+          return;
+        }
+
+        e.stopPropagation();
+        var eventData = { link: e.link, node: e.node, cocooned: cocooned };
+        cocooned.notify(cocooned.container, 'limit-reached', eventData);
+      });
+    },
+
+    getLength: function () {
+      return this.getItems('&:visible').length;
+    }
+  };
+
+  Cocooned.Plugins.Reorderable = {
+
+    defaultOptionValue: true,
+
+    bindReorderable: function () {
+      var self = this;
+
+      // Maintain indexes
+      this.container
+        .on('cocooned:after-insert', function (e) { self.reindex(); })
+        .on('cocooned:after-remove', function (e) { self.reindex(); })
+        .on('cocooned:after-move', function (e) { self.reindex(); });
+
+      // Move items
+      this.container.on(
+        this.namespacedNativeEvents('click'),
+        [this.selector('up'), this.selector('down')].join(', '),
+        function (e) {
+          e.preventDefault();
+          var node = this;
+          var up = self.classes['up'].some(function (klass) {
+            return node.className.indexOf(klass) !== -1;
+          });
+          self.move(this, up ? 'up' : 'down');
+        });
+
+      // Ensure positions are unique before save
+      this.container.closest('form').on(
+        this.namespacedNativeEvents('submit'),
+        function (e) {
+          self.reindex();
+        });
+    },
+
+    move: function (moveLink, direction) {
+      var self = this;
+      var $mover = $(moveLink);
+      var node = $mover.closest(this.selector('item'));
+      var siblings = (direction === 'up'
+        ? node.prevAll(this.selector('item', '&:eq(0)'))
+        : node.nextAll(this.selector('item', '&:eq(0)')));
+
+      if (siblings.length === 0) {
+        return;
+      }
+
+      // Move can be prevented through a 'cocooned:before-move' event handler
+      var eventData = { link: $mover, node: node, cocooned: this };
+      if (!self.notify(node, 'before-move', eventData)) {
+        return false;
+      }
+
+      var height = self.container.outerHeight();
+      var width = self.container.outerWidth();
+
+      self.container.css('height', height).css('width', width);
+      self.hide(node, function () {
+        var movedNode = $(this).detach();
+        movedNode[(direction === 'up' ? 'insertBefore' : 'insertAfter')](siblings);
+
+        self.show(movedNode, function () {
+          self.container.css('height', '').css('width', ''); // Object notation does not work here.
+          self.notify(movedNode, 'after-move', eventData);
+        });
+      });
+    },
+
+    reindex: function () {
+      var i = 0;
+      var nodes = this.getItems('&:visible');
+      var eventData = { link: null, nodes: nodes, cocooned: this };
+
+      // Reindex can be prevented through a 'cocooned:before-reindex' event handler
+      if (!this.notify(this.container, 'before-reindex', eventData)) {
+        return false;
+      }
+
+      nodes.each(function () { $('input[id$=_position]', this).val(++i); });
+      this.notify(this.container, 'after-reindex', eventData);
+    },
+
+    show: function (node, callback) {
+      callback = callback || function () { return true; };
+
+      node.addClass('cocooned-visible-item');
+      setTimeout(function () {
+        callback.apply(node);
+        node.removeClass('cocooned-hidden-item');
+      }, 500);
+    },
+
+    hide: function (node, callback) {
+      node.removeClass('cocooned-visible-item').addClass('cocooned-hidden-item');
+      if (callback) {
+        setTimeout(function () {
+          callback.apply(node);
+        }, 500);
+      }
+    }
+  };
+
+  // Expose a jQuery plugin
+  $.fn.cocooned = function (options) {
+    return this.each(function () {
+      var container = $(this);
+      if (typeof container.data('cocooned') !== 'undefined') {
+        return;
+      }
+
+      var cocooned = new Cocooned(container, options);
+      container.data('cocooned', cocooned);
+    });
+  };
+
+  // On-load initialization
+  $(function () {
+    $('*[data-cocooned-options]').each(function (i, el) {
+      $(el).cocooned($(el).data('cocooned-options'));
+    });
+  });
+
+  return Cocooned;
+}));