decidim 0.0.1.alpha9 → 0.0.1

data/decidim-admin/spec/shared/manage_process_steps_examples.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+RSpec.shared_examples "manage process steps examples" do
+  let(:active) { false }
+  let!(:process_step) do
+    create(
+      :participatory_process_step,
+      participatory_process: participatory_process,
+      active: active
+    )
+  end
+
+  before do
+    switch_to_host(organization.host)
+    login_as user, scope: :user
+    visit decidim_admin.participatory_process_path(participatory_process)
+    click_link "Steps"
+  end
+
+  it "displays all fields from a single participatory process" do
+    within "#steps table" do
+      click_link translated(process_step.title)
+    end
+
+    within "dl" do
+      expect(page).to have_content(stripped translated(process_step.title, locale: :en))
+      expect(page).to have_content(stripped translated(process_step.title, locale: :es))
+      expect(page).to have_content(stripped translated(process_step.title, locale: :ca))
+      expect(page).to have_content(stripped translated(process_step.short_description, locale: :en))
+      expect(page).to have_content(stripped translated(process_step.short_description, locale: :es))
+      expect(page).to have_content(stripped translated(process_step.short_description, locale: :ca))
+      expect(page).to have_content(stripped translated(process_step.description, locale: :en))
+      expect(page).to have_content(stripped translated(process_step.description, locale: :es))
+      expect(page).to have_content(stripped translated(process_step.description, locale: :ca))
+    end
+  end
+
+  it "creates a new participatory_process" do
+    find("#steps .actions .new").click
+
+    within ".new_participatory_process_step" do
+      fill_in_i18n(
+        :participatory_process_step_title,
+        "#title-tabs",
+        en: "My participatory process step",
+        es: "Mi fase de proceso participativo",
+        ca: "La meva fase de procés participatiu"
+      )
+      fill_in_i18n_editor(
+        :participatory_process_step_short_description,
+        "#short_description-tabs",
+        en: "Short description",
+        es: "Descripción corta",
+        ca: "Descripció curta"
+      )
+      fill_in_i18n_editor(
+        :participatory_process_step_description,
+        "#description-tabs",
+        en: "A longer description",
+        es: "Descripción más larga",
+        ca: "Descripció més llarga"
+      )
+      fill_in :participatory_process_step_start_date, with: 1.months.ago
+      fill_in :participatory_process_step_end_date, with: 2.months.from_now
+
+      find("*[type=submit]").click
+    end
+
+    within ".flash" do
+      expect(page).to have_content("successfully")
+    end
+
+    within "#steps table" do
+      expect(page).to have_content("My participatory process step")
+    end
+  end
+
+  it "updates a participatory_process_step" do
+    within "#steps" do
+      within find("tr", text: translated(process_step.title)) do
+        click_link "Edit"
+      end
+    end
+
+    within ".edit_participatory_process_step" do
+      fill_in_i18n(
+        :participatory_process_step_title,
+        "#title-tabs",
+        en: "My new title",
+        es: "Mi nuevo título",
+        ca: "El meu nou títol"
+      )
+
+      find("*[type=submit]").click
+    end
+
+    within ".flash" do
+      expect(page).to have_content("successfully")
+    end
+
+    within "#steps table" do
+      expect(page).to have_content("My new title")
+      click_link("My new title")
+    end
+  end
+
+  context "deleting a participatory process step" do
+    let!(:process_step2) { create(:participatory_process_step, participatory_process: participatory_process) }
+
+    before do
+      visit current_path
+    end
+
+    it "deletes a participatory_process_step" do
+      within find("tr", text: translated(process_step2.title)) do
+        click_link "Destroy"
+      end
+
+      within ".flash" do
+        expect(page).to have_content("successfully")
+      end
+
+      within "#steps table" do
+        expect(page).to_not have_content(translated(process_step2.title))
+      end
+    end
+  end
+
+  context "activating a step" do
+    it "activates a step" do
+      within find("tr", text: translated(process_step.title)) do
+        click_link "Activate"
+      end
+
+      within find("tr", text: translated(process_step.title)) do
+        expect(page).to have_content("Deactivate")
+      end
+    end
+  end
+
+  context "deactivating a step" do
+    let(:active) { true }
+
+    it "deactivates a step" do
+      within find("tr", text: translated(process_step.title)) do
+        click_link "Deactivate"
+      end
+
+      within find("tr", text: translated(process_step.title)) do
+        expect(page).to have_content("Activate")
+      end
+    end
+  end
+end

data/decidim-admin/spec/shared/manage_processes_examples.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+RSpec.shared_examples "manage processes examples" do
+  context "previewing processes" do
+    context "when the process is unpublished" do
+      let!(:participatory_process) { create(:participatory_process, :unpublished, organization: organization) }
+
+      it "allows the user to preview the unpublished process" do
+        within find("tr", text: translated(participatory_process.title)) do
+          click_link "Preview"
+        end
+
+        expect(current_path).to eq decidim.participatory_process_path(participatory_process)
+        expect(page).to have_content(translated(participatory_process.title))
+      end
+    end
+
+    context "when the process is published" do
+      let!(:participatory_process) { create(:participatory_process, organization: organization) }
+
+      it "allows the user to preview the unpublished process" do
+        within find("tr", text: translated(participatory_process.title)) do
+          click_link "Preview"
+        end
+
+        expect(current_path).to eq decidim.participatory_process_path(participatory_process)
+        expect(page).to have_content(translated(participatory_process.title))
+      end
+    end
+  end
+
+  it "displays all fields from a single participatory process" do
+    within "table" do
+      click_link participatory_process.title["en"]
+    end
+
+    within "dl" do
+      expect(page).to have_content(stripped translated(participatory_process.title, locale: :en))
+      expect(page).to have_content(stripped translated(participatory_process.title, locale: :es))
+      expect(page).to have_content(stripped translated(participatory_process.title, locale: :ca))
+      expect(page).to have_content(stripped translated(participatory_process.subtitle, locale: :en))
+      expect(page).to have_content(stripped translated(participatory_process.subtitle, locale: :es))
+      expect(page).to have_content(stripped translated(participatory_process.subtitle, locale: :ca))
+      expect(page).to have_content(stripped translated(participatory_process.short_description, locale: :en))
+      expect(page).to have_content(stripped translated(participatory_process.short_description, locale: :es))
+      expect(page).to have_content(stripped translated(participatory_process.short_description, locale: :ca))
+      expect(page).to have_content(stripped translated(participatory_process.description, locale: :en))
+      expect(page).to have_content(stripped translated(participatory_process.description, locale: :es))
+      expect(page).to have_content(stripped translated(participatory_process.description, locale: :ca))
+      expect(page).to have_content(participatory_process.hashtag)
+      expect(page).to have_content(participatory_process.slug)
+      expect(page).to have_xpath("//img[@src=\"#{participatory_process.hero_image.url}\"]")
+      expect(page).to have_xpath("//img[@src=\"#{participatory_process.banner_image.url}\"]")
+    end
+  end
+
+  it "updates an participatory_process" do
+    click_link translated(participatory_process.title)
+    click_processes_menu_link "Settings"
+
+    within ".edit_participatory_process" do
+      fill_in_i18n(
+        :participatory_process_title,
+        "#title-tabs",
+        en: "My new title",
+        es: "Mi nuevo título",
+        ca: "El meu nou títol"
+      )
+      attach_file :participatory_process_banner_image, image3_path
+
+      find("*[type=submit]").click
+    end
+
+    within ".flash" do
+      expect(page).to have_content("successfully")
+    end
+
+    within "table" do
+      expect(page).to have_content("My new title")
+      click_link("My new title")
+    end
+
+    within "dl" do
+      expect(page).to_not have_css("img[src*='#{image2_filename}']")
+      expect(page).to have_css("img[src*='#{image3_filename}']")
+    end
+  end
+
+  context "publishing a process" do
+    let!(:participatory_process) { create(:participatory_process, :unpublished, organization: organization) }
+
+    before do
+      click_link translated(participatory_process.title)
+      click_processes_menu_link "Settings"
+    end
+
+    it "publishes the process" do
+      click_link "Publish"
+      expect(page).to have_content("published successfully")
+      expect(page).to have_content("Unpublish")
+      expect(current_path).to eq decidim_admin.edit_participatory_process_path(participatory_process)
+
+      participatory_process.reload
+      expect(participatory_process).to be_published
+    end
+  end
+
+  context "unpublishing a process" do
+    let!(:participatory_process) { create(:participatory_process, organization: organization) }
+
+    before do
+      click_link translated(participatory_process.title)
+      click_processes_menu_link "Settings"
+    end
+
+    it "unpublishes the process" do
+      click_link "Unpublish"
+      expect(page).to have_content("unpublished successfully")
+      expect(page).to have_content("Publish")
+      expect(current_path).to eq decidim_admin.edit_participatory_process_path(participatory_process)
+
+      participatory_process.reload
+      expect(participatory_process).not_to be_published
+  end
+  end
+
+  context "when there are multiple organizations in the system" do
+    let!(:external_participatory_process) { create(:participatory_process) }
+
+    before do
+      visit decidim_admin.participatory_processes_path
+    end
+
+    it "doesn't let the admin manage processes form other organizations" do
+      within "table" do
+        expect(page).to_not have_content(external_participatory_process.title)
+      end
+    end
+  end
+end

data/decidim-admin/spec/shared/participatory_admin_shared_context.rb

@@ -0,0 +1,19 @@
+RSpec.shared_context "participatory process admin" do
+  let(:organization) { create(:organization) }
+  let!(:user) { create(:user, :admin, :confirmed, organization: organization) }
+  let(:participatory_process) { create(:participatory_process, organization: organization) }
+  let(:process_admin) { create :user, :confirmed, organization: organization }
+  let!(:user_role) { create :participatory_process_user_role, user: process_admin, participatory_process: participatory_process }
+  let(:image1_filename) { "city.jpeg" }
+  let(:image1_path) do
+    File.join(File.dirname(__FILE__), "..", "..", "..", "decidim-dev", "spec", "support", image1_filename)
+  end
+  let(:image2_filename) { "city2.jpeg" }
+  let(:image2_path) do
+    File.join(File.dirname(__FILE__), "..", "..", "..", "decidim-dev", "spec", "support", image2_filename)
+  end
+  let(:image3_filename) { "city3.jpeg" }
+  let(:image3_path) do
+    File.join(File.dirname(__FILE__), "..", "..", "..", "decidim-dev", "spec", "support", image3_filename)
+  end
+end

data/decidim-admin/spec/spec_helper.rb

@@ -1,2 +1,6 @@
 ENV["ENGINE_NAME"] = File.dirname(File.dirname(__FILE__)).split("/").last
 require "decidim/test/base_spec_helper"
+
+RSpec.configure do |config|
+  config.include ProcessesMenuLinksHelpers
+end

data/decidim-admin/spec/support/processes_menu_links_helpers.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+# A collection of methods to help dealing with processes menu links.
+module ProcessesMenuLinksHelpers
+  # Clicks a link in the submenu of a participatory process navigation.
+  #
+  # text - a String with the name of the link that will be clicked
+  def click_processes_menu_link(text)
+    within ".row .tabs.vertical" do
+      click_link text
+    end
+  end
+end

data/decidim-admin/spec/views/decidim/static_pages/_form.html.erb_spec.rb

@@ -0,0 +1,35 @@
+require "spec_helper"
+
+module Decidim
+  describe "decidim/admin/static_pages/_form" do
+    subject { render }
+
+    let(:form) do
+      Decidim::FormBuilder.new(
+        :static_page,
+        Decidim::Admin::StaticPageForm.new(slug: slug),
+        view,
+        {}
+      )
+    end
+    let(:ability) do
+      Decidim::Admin::Abilities::AdminUser.new(build(:user, :admin))
+    end
+
+    before do
+      view.extend CanCan::ControllerAdditions
+      allow(view).to receive(:form).and_return(form)
+      allow(view).to receive(:current_ability).and_return(ability)
+    end
+
+    context "with a default static page" do
+      let(:slug) { Decidim::StaticPage::DEFAULT_PAGES.sample }
+      it { is_expected.to_not include("slug") }
+    end
+
+    context "with a normal static page" do
+      let(:slug) { "foo" }
+      it { is_expected.to include("slug") }
+    end
+  end
+end

data/decidim-admin/vendor/assets/javascripts/html.sortable.js

@@ -0,0 +1,691 @@
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.sortable = factory();
+  }
+}(this, function() {
+/*
+ * HTML5 Sortable library
+ * https://github.com/voidberg/html5sortable
+ *
+ * Original code copyright 2012 Ali Farhadi.
+ * This version is mantained by Alexandru Badiu <andu@ctrlz.ro> & Lukas Oppermann <lukas@vea.re>
+ * jQuery-independent implementation by Nazar Mokrynskyi <nazar@mokrynskyi.com>
+ *
+ * Released under the MIT license.
+ */
+'use strict';
+/*
+ * variables global to the plugin
+ */
+var dragging;
+var draggingHeight;
+var placeholders = [];
+var sortables = [];
+/**
+ * Get or set data on element
+ * @param {Element} element
+ * @param {string} key
+ * @param {*} value
+ * @return {*}
+ */
+var _data = function(element, key, value) {
+  if (value === undefined) {
+    return element && element.h5s && element.h5s.data && element.h5s.data[key];
+  } else {
+    element.h5s = element.h5s || {};
+    element.h5s.data = element.h5s.data || {};
+    element.h5s.data[key] = value;
+  }
+};
+/**
+ * Remove data from element
+ * @param {Element} element
+ */
+var _removeData = function(element) {
+  if (element.h5s) {
+    delete element.h5s.data;
+  }
+};
+/**
+ * Cross-browser shortcut for actual `Element.matches` method,
+ * which has vendor prefix in older browsers
+ */
+var matches;
+switch (true) {
+  case 'matches' in window.Element.prototype:
+    matches = 'matches';
+    break;
+  case 'mozMatchesSelector' in window.Element.prototype:
+    matches = 'mozMatchesSelector';
+    break;
+  case 'msMatchesSelector' in window.Element.prototype:
+    matches = 'msMatchesSelector';
+    break;
+  case 'webkitMatchesSelector' in window.Element.prototype:
+    matches = 'webkitMatchesSelector';
+    break;
+}
+/**
+ * Filter only wanted nodes
+ * @param {Array|NodeList} nodes
+ * @param {Array/string} wanted
+ * @returns {Array}
+ */
+var _filter = function(nodes, wanted) {
+  if (!wanted) {
+    return Array.prototype.slice.call(nodes);
+  }
+  var result = [];
+  for (var i = 0; i < nodes.length; ++i) {
+    if (typeof wanted === 'string' && nodes[i][matches](wanted)) {
+      result.push(nodes[i]);
+    }
+    if (wanted.indexOf(nodes[i]) !== -1) {
+      result.push(nodes[i]);
+    }
+  }
+  return result;
+};
+/**
+ * @param {Array|Element} element
+ * @param {Array|string} event
+ * @param {Function} callback
+ */
+var _on = function(element, event, callback) {
+  if (element instanceof Array) {
+    for (var i = 0; i < element.length; ++i) {
+      _on(element[i], event, callback);
+    }
+    return;
+  }
+  element.addEventListener(event, callback);
+  element.h5s = element.h5s || {};
+  element.h5s.events = element.h5s.events || {};
+  element.h5s.events[event] = callback;
+};
+/**
+ * @param {Array|Element} element
+ * @param {Array|string} event
+ */
+var _off = function(element, event) {
+  if (element instanceof Array) {
+    for (var i = 0; i < element.length; ++i) {
+      _off(element[i], event);
+    }
+    return;
+  }
+  if (element.h5s && element.h5s.events && element.h5s.events[event]) {
+    element.removeEventListener(event, element.h5s.events[event]);
+    delete element.h5s.events[event];
+  }
+};
+/**
+ * @param {Array|Element} element
+ * @param {string} attribute
+ * @param {*} value
+ */
+var _attr = function(element, attribute, value) {
+  if (element instanceof Array) {
+    for (var i = 0; i < element.length; ++i) {
+      _attr(element[i], attribute, value);
+    }
+    return;
+  }
+  element.setAttribute(attribute, value);
+};
+/**
+ * @param {Array|Element} element
+ * @param {string} attribute
+ */
+var _removeAttr = function(element, attribute) {
+  if (element instanceof Array) {
+    for (var i = 0; i < element.length; ++i) {
+      _removeAttr(element[i], attribute);
+    }
+    return;
+  }
+  element.removeAttribute(attribute);
+};
+/**
+ * @param {Element} element
+ * @returns {{left: *, top: *}}
+ */
+var _offset = function(element) {
+  var rect = element.getClientRects()[0];
+  return {
+    left: rect.left + window.scrollX,
+    top: rect.top + window.scrollY
+  };
+};
+/*
+ * remove event handlers from items
+ * @param {Array|NodeList} items
+ */
+var _removeItemEvents = function(items) {
+  _off(items, 'dragstart');
+  _off(items, 'dragend');
+  _off(items, 'selectstart');
+  _off(items, 'dragover');
+  _off(items, 'dragenter');
+  _off(items, 'drop');
+};
+/*
+ * Remove event handlers from sortable
+ * @param {Element} sortable a single sortable
+ */
+var _removeSortableEvents = function(sortable) {
+  _off(sortable, 'dragover');
+  _off(sortable, 'dragenter');
+  _off(sortable, 'drop');
+};
+/*
+ * Attach ghost to dataTransfer object
+ * @param {Event} original event
+ * @param {object} ghost-object with item, x and y coordinates
+ */
+var _attachGhost = function(event, ghost) {
+  // this needs to be set for HTML5 drag & drop to work
+  event.dataTransfer.effectAllowed = 'move';
+  event.dataTransfer.setData('text', '');
+
+  // check if setDragImage method is available
+  if (event.dataTransfer.setDragImage) {
+    event.dataTransfer.setDragImage(ghost.draggedItem, ghost.x, ghost.y);
+  }
+};
+/**
+ * _addGhostPos clones the dragged item and adds it as a Ghost item
+ * @param {Event} event - the event fired when dragstart is triggered
+ * @param {object} ghost - .draggedItem = Element
+ */
+var _addGhostPos = function(event, ghost) {
+  if (!ghost.x) {
+    ghost.x = parseInt(event.pageX - _offset(ghost.draggedItem).left);
+  }
+  if (!ghost.y) {
+    ghost.y = parseInt(event.pageY - _offset(ghost.draggedItem).top);
+  }
+  return ghost;
+};
+/**
+ * _makeGhost decides which way to make a ghost and passes it to attachGhost
+ * @param {Element} draggedItem - the item that the user drags
+ */
+var _makeGhost = function(draggedItem) {
+  return {
+    draggedItem: draggedItem
+  };
+};
+/**
+ * _getGhost constructs ghost and attaches it to dataTransfer
+ * @param {Event} event - the original drag event object
+ * @param {Element} draggedItem - the item that the user drags
+ */
+// TODO: could draggedItem be replaced by event.target in all instances
+var _getGhost = function(event, draggedItem) {
+  // add ghost item & draggedItem to ghost object
+  var ghost = _makeGhost(draggedItem);
+  // attach ghost position
+  ghost = _addGhostPos(event, ghost);
+  // attach ghost to dataTransfer
+  _attachGhost(event, ghost);
+};
+/*
+ * Remove data from sortable
+ * @param {Element} sortable a single sortable
+ */
+var _removeSortableData = function(sortable) {
+  _removeData(sortable);
+  _removeAttr(sortable, 'aria-dropeffect');
+};
+/*
+ * Remove data from items
+ * @param {Array|Element} items
+ */
+var _removeItemData = function(items) {
+  _removeAttr(items, 'aria-grabbed');
+  _removeAttr(items, 'draggable');
+  _removeAttr(items, 'role');
+};
+/*
+ * Check if two lists are connected
+ * @param {Element} curList
+ * @param {Element} destList
+ */
+var _listsConnected = function(curList, destList) {
+  if (curList === destList) {
+    return true;
+  }
+  if (_data(curList, 'connectWith') !== undefined) {
+    return _data(curList, 'connectWith') === _data(destList, 'connectWith');
+  }
+  return false;
+};
+var _getHandles = function(items, handle) {
+  var result = [];
+  var handles;
+  if (!handle) {
+    return items;
+  }
+  for (var i = 0; i < items.length; ++i) {
+    handles = items[i].querySelectorAll(handle);
+    result = result.concat(Array.prototype.slice.call(handles));
+  }
+  return result;
+};
+/*
+ * Destroy the sortable
+ * @param {Element} sortableElement a single sortable
+ */
+var _destroySortable = function(sortableElement) {
+  var opts = _data(sortableElement, 'opts') || {};
+  var items = _filter(sortableElement.children, opts.items);
+  var handles = _getHandles(items, opts.handle);
+  // remove event handlers & data from sortable
+  _removeSortableEvents(sortableElement);
+  _removeSortableData(sortableElement);
+  // remove event handlers & data from items
+  _off(handles, 'mousedown');
+  _removeItemEvents(items);
+  _removeItemData(items);
+};
+/*
+ * Enable the sortable
+ * @param {Element} sortableElement a single sortable
+ */
+var _enableSortable = function(sortableElement) {
+  var opts = _data(sortableElement, 'opts');
+  var items = _filter(sortableElement.children, opts.items);
+  var handles = _getHandles(items, opts.handle);
+  _attr(sortableElement, 'aria-dropeffect', 'move');
+  _attr(handles, 'draggable', 'true');
+  // IE FIX for ghost
+  // can be disabled as it has the side effect that other events
+  // (e.g. click) will be ignored
+  var spanEl = (document || window.document).createElement('span');
+  if (typeof spanEl.dragDrop === 'function' && !opts.disableIEFix) {
+    _on(handles, 'mousedown', function() {
+      if (items.indexOf(this) !== -1) {
+        this.dragDrop();
+      } else {
+        var parent = this.parentElement;
+        while (items.indexOf(parent) === -1) {
+          parent = parent.parentElement;
+        }
+        parent.dragDrop();
+      }
+    });
+  }
+};
+/*
+ * Disable the sortable
+ * @param {Element} sortableElement a single sortable
+ */
+var _disableSortable = function(sortableElement) {
+  var opts = _data(sortableElement, 'opts');
+  var items = _filter(sortableElement.children, opts.items);
+  var handles = _getHandles(items, opts.handle);
+  _attr(sortableElement, 'aria-dropeffect', 'none');
+  _attr(handles, 'draggable', 'false');
+  _off(handles, 'mousedown');
+};
+/*
+ * Reload the sortable
+ * @param {Element} sortableElement a single sortable
+ * @description events need to be removed to not be double bound
+ */
+var _reloadSortable = function(sortableElement) {
+  var opts = _data(sortableElement, 'opts');
+  var items = _filter(sortableElement.children, opts.items);
+  var handles = _getHandles(items, opts.handle);
+  // remove event handlers from items
+  _removeItemEvents(items);
+  _off(handles, 'mousedown');
+  // remove event handlers from sortable
+  _removeSortableEvents(sortableElement);
+};
+/**
+ * Get position of the element relatively to its sibling elements
+ * @param {Element} element
+ * @returns {number}
+ */
+var _index = function(element) {
+  if (!element.parentElement) {
+    return 0;
+  }
+  return Array.prototype.indexOf.call(element.parentElement.children, element);
+};
+/**
+ * Whether element is in DOM
+ * @param {Element} element
+ * @returns {boolean}
+ */
+var _attached = function(element) {
+  return !!element.parentNode;
+};
+/**
+ * Convert HTML string into DOM element
+ * @param {Element|string} html
+ * @returns {Element}
+ */
+var _html2element = function(html) {
+  if (typeof html !== 'string') {
+    return html;
+  }
+  var div = document.createElement('div');
+  div.innerHTML	= html;
+  return div.firstChild;
+};
+/**
+ * Insert before target
+ * @param {Element} target
+ * @param {Element} element
+ */
+var _before = function(target, element) {
+  target.parentElement.insertBefore(
+    element,
+    target
+  );
+};
+/**
+ * Insert after target
+ * @param {Element} target
+ * @param {Element} element
+ */
+var _after = function(target, element) {
+  target.parentElement.insertBefore(
+    element,
+    target.nextElementSibling
+  );
+};
+/**
+ * Detach element from DOM
+ * @param {Element} element
+ */
+var _detach = function(element) {
+  if (element.parentNode) {
+    element.parentNode.removeChild(element);
+  }
+};
+/**
+ * Make native event that can be dispatched afterwards
+ * @param {string} name
+ * @param {object} detail
+ * @returns {CustomEvent}
+ */
+var _makeEvent = function(name, detail) {
+  var e = document.createEvent('Event');
+  if (detail) {
+    e.detail = detail;
+  }
+  e.initEvent(name, false, true);
+  return e;
+};
+/**
+ * @param {Element} sortableElement
+ * @param {CustomEvent} event
+ */
+var _dispatchEventOnConnected = function(sortableElement, event) {
+  sortables.forEach(function(target) {
+    if (_listsConnected(sortableElement, target)) {
+      target.dispatchEvent(event);
+    }
+  });
+};
+/*
+ * Public sortable object
+ * @param {Array|NodeList} sortableElements
+ * @param {object|string} options|method
+ */
+var sortable = function(sortableElements, options) {
+
+  var method = String(options);
+
+  options = (function(options) {
+    var result = {
+      connectWith: false,
+      placeholder: null,
+      // dragImage can be null or a Element
+      dragImage: null,
+      disableIEFix: false,
+      placeholderClass: 'sortable-placeholder',
+      draggingClass: 'sortable-dragging',
+      hoverClass: false
+    };
+    for (var option in options) {
+      result[option] = options[option];
+    }
+    return result;
+  })(options);
+
+  if (typeof sortableElements === 'string') {
+    sortableElements = document.querySelectorAll(sortableElements);
+  }
+
+  if (sortableElements instanceof window.Element) {
+    sortableElements = [sortableElements];
+  }
+
+  sortableElements = Array.prototype.slice.call(sortableElements);
+
+  /* TODO: maxstatements should be 25, fix and remove line below */
+  /*jshint maxstatements:false */
+  sortableElements.forEach(function(sortableElement) {
+
+    if (/enable|disable|destroy/.test(method)) {
+      sortable[method](sortableElement);
+      return;
+    }
+
+    // get options & set options on sortable
+    options = _data(sortableElement, 'opts') || options;
+    _data(sortableElement, 'opts', options);
+    // reset sortable
+    _reloadSortable(sortableElement);
+    // initialize
+    var items = _filter(sortableElement.children, options.items);
+    var index;
+    var startParent;
+    var placeholder = options.placeholder;
+    if (!placeholder) {
+      placeholder = document.createElement(
+        /^ul|ol$/i.test(sortableElement.tagName) ? 'li' : 'div'
+      );
+    }
+    placeholder = _html2element(placeholder);
+    placeholder.classList.add.apply(
+      placeholder.classList,
+      options.placeholderClass.split(' ')
+    );
+
+    // setup sortable ids
+    if (!sortableElement.getAttribute('data-sortable-id')) {
+      var id = sortables.length;
+      sortables[id] = sortableElement;
+      _attr(sortableElement, 'data-sortable-id', id);
+      _attr(items, 'data-item-sortable-id', id);
+    }
+
+    _data(sortableElement, 'items', options.items);
+    placeholders.push(placeholder);
+    if (options.connectWith) {
+      _data(sortableElement, 'connectWith', options.connectWith);
+    }
+
+    _enableSortable(sortableElement);
+    _attr(items, 'role', 'option');
+    _attr(items, 'aria-grabbed', 'false');
+
+    // Mouse over class
+    if (options.hoverClass) {
+      var hoverClass = 'sortable-over';
+      if (typeof options.hoverClass === 'string') {
+        hoverClass = options.hoverClass;
+      }
+
+      _on(items, 'mouseenter', function() {
+        this.classList.add(hoverClass);
+      });
+      _on(items, 'mouseleave', function() {
+        this.classList.remove(hoverClass);
+      });
+    }
+
+    // Handle drag events on draggable items
+    _on(items, 'dragstart', function(e) {
+      e.stopImmediatePropagation();
+
+      if (options.dragImage) {
+        _attachGhost(e, {
+          draggedItem: options.dragImage,
+          x: 0,
+          y: 0
+        });
+        console.log('WARNING: dragImage option is deprecated' +
+        ' and will be removed in the future!');
+      } else {
+        // add transparent clone or other ghost to cursor
+        _getGhost(e, this);
+      }
+      // cache selsection & add attr for dragging
+      this.classList.add(options.draggingClass);
+      dragging = this;
+      _attr(dragging, 'aria-grabbed', 'true');
+      // grab values
+      index = _index(dragging);
+      draggingHeight = parseInt(window.getComputedStyle(dragging).height);
+      startParent = this.parentElement;
+      // dispatch sortstart event on each element in group
+      _dispatchEventOnConnected(sortableElement, _makeEvent('sortstart', {
+        item: dragging,
+        placeholder: placeholder,
+        startparent: startParent
+      }));
+    });
+    // Handle drag events on draggable items
+    _on(items, 'dragend', function() {
+      var newParent;
+      if (!dragging) {
+        return;
+      }
+      // remove dragging attributes and show item
+      dragging.classList.remove(options.draggingClass);
+      _attr(dragging, 'aria-grabbed', 'false');
+      dragging.style.display = dragging.oldDisplay;
+      delete dragging.oldDisplay;
+
+      placeholders.forEach(_detach);
+      newParent = this.parentElement;
+      _dispatchEventOnConnected(sortableElement, _makeEvent('sortstop', {
+        item: dragging,
+        startparent: startParent
+      }));
+      if (index !== _index(dragging) || startParent !== newParent) {
+        _dispatchEventOnConnected(sortableElement, _makeEvent('sortupdate', {
+          item: dragging,
+          index: _filter(newParent.children, _data(newParent, 'items'))
+            .indexOf(dragging),
+          oldindex: items.indexOf(dragging),
+          elementIndex: _index(dragging),
+          oldElementIndex: index,
+          startparent: startParent,
+          endparent: newParent
+        }));
+      }
+      dragging = null;
+      draggingHeight = null;
+    });
+    // Handle drop event on sortable & placeholder
+    // TODO: REMOVE placeholder?????
+    _on([sortableElement, placeholder], 'drop', function(e) {
+      var visiblePlaceholder;
+      if (!_listsConnected(sortableElement, dragging.parentElement)) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+      visiblePlaceholder = placeholders.filter(_attached)[0];
+      _after(visiblePlaceholder, dragging);
+      dragging.dispatchEvent(_makeEvent('dragend'));
+    });
+
+    // Handle dragover and dragenter events on draggable items
+    var onDragOverEnter = function(e) {
+      if (!_listsConnected(sortableElement, dragging.parentElement)) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = 'move';
+      if (items.indexOf(this) !== -1) {
+        var thisHeight = parseInt(window.getComputedStyle(this).height);
+        var placeholderIndex = _index(placeholder);
+        var thisIndex = _index(this);
+        if (options.forcePlaceholderSize) {
+          placeholder.style.height = draggingHeight + 'px';
+        }
+
+        // Check if `this` is bigger than the draggable. If it is, we have to define a dead zone to prevent flickering
+        if (thisHeight > draggingHeight) {
+          // Dead zone?
+          var deadZone = thisHeight - draggingHeight;
+          var offsetTop = _offset(this).top;
+          if (placeholderIndex < thisIndex &&
+              e.pageY < offsetTop + deadZone) {
+            return;
+          }
+          if (placeholderIndex > thisIndex &&
+              e.pageY > offsetTop + thisHeight - deadZone) {
+            return;
+          }
+        }
+
+        if (dragging.oldDisplay === undefined) {
+          dragging.oldDisplay = dragging.style.display;
+        }
+        dragging.style.display = 'none';
+        if (placeholderIndex < thisIndex) {
+          _after(this, placeholder);
+        } else {
+          _before(this, placeholder);
+        }
+        // Intentionally violated chaining, it is more complex otherwise
+        placeholders
+          .filter(function(element) {return element !== placeholder;})
+          .forEach(_detach);
+      } else {
+        if (placeholders.indexOf(this) === -1 &&
+            !_filter(this.children, options.items).length) {
+          placeholders.forEach(_detach);
+          this.appendChild(placeholder);
+        }
+      }
+    };
+    _on(items.concat(sortableElement), 'dragover', onDragOverEnter);
+    _on(items.concat(sortableElement), 'dragenter', onDragOverEnter);
+  });
+
+  return sortableElements;
+};
+
+sortable.destroy = function(sortableElement) {
+  _destroySortable(sortableElement);
+};
+
+sortable.enable = function(sortableElement) {
+  _enableSortable(sortableElement);
+};
+
+sortable.disable = function(sortableElement) {
+  _disableSortable(sortableElement);
+};
+
+
+return sortable;
+}));