binda 0.1.5 → 0.1.6

data/app/assets/javascripts/binda/components/sortable.js

@@ -2,6 +2,8 @@
  * SORTABLE
  */
 
+import { openCollapsableStacks, closeCollapsableStacks } from './form_item_collapsable';
+
 var sortableOptions = {
 	stop: function(event, ui) {
 		ui.item.css("z-index", 0);
@@ -10,6 +12,14 @@ var sortableOptions = {
 	update: updateSortable
 };
 
+/* Initialize jQuery Sortable
+ * 
+ * This function handles several things:
+ * - it sets Sortable for each ".sortable" element
+ * - it adds handles only if required
+ * - it disable itself if it finds ".sortable--disabled" class
+ * - it sets up a toggle button and behaviour if required 
+ */
 export default function() {
 	if ($(".sortable").length > 0) {
 		// Initialize sortable item
@@ -31,50 +41,31 @@ export default function() {
 	if ($(".sortable--toggle").length > 0) {
 		setupSortableToggle();
 	}
-
-	// Add event to any sortable toggle button
-	// TODO: make this event available to element which aren't standard form repeaters
-	$(document).on(
-		"click",
-		".standard-form--repeater .sortable--toggle",
-		toggleSortable
-	);
 }
 
+/* Setup Sortable Toggle
+ *
+ * It sets up each toggle button and add the events needed to enable or disable Sortable.
+ */
 function setupSortableToggle() {
 	$(".sortable--toggle").each(function() {
-		let id = "#" + $(this).data("repeater-id");
-		$(id)
-			.find(".form-item--collapsable")
-			.addClass("form-item--collapsed");
-		$(id)
-			.find(".form-item--repeater-fields")
-			.each(close);
+		let id = "#" + $(this).data("sortable-target-id");
+		closeCollapsableStacks(id);
 	});
-}
-
-function close() {
-	this.style.maxHeight = "0px";
-}
-
-function open() {
-	this.style.maxHeight = this.scrollHeight + "px";
+	// Add event to any sortable toggle button
+	$(document).on("click", ".sortable--toggle", toggleSortable);
 }
 
 function toggleSortable(event) {
 	event.preventDefault();
-	let id = "#" + $(this).data("repeater-id");
+	let id = "#" + $(this).data("sortable-target-id");
 
 	if ($(id).hasClass("sortable--disabled")) {
 		$(id).sortable("enable");
-		$(id)
-			.find(".form-item--repeater-fields")
-			.each(close);
-		$(id)
-			.find(".form-item--collapsable")
-			.addClass("form-item--collapsed");
+		closeCollapsableStacks(id);
 	} else {
 		$(id).sortable("disable");
+		openCollapsableStacks(id);
 	}
 
 	$(id).toggleClass("sortable--disabled");

data/app/assets/javascripts/binda/dist/binda.bundle.js

@@ -68,26 +68,33 @@
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FormItemEditor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FormItemCollapsable; });
+/* harmony export (immutable) */ __webpack_exports__["b"] = closeCollapsableStacks;
+/* harmony export (immutable) */ __webpack_exports__["c"] = openCollapsableStacks;
+/* harmony export (immutable) */ __webpack_exports__["d"] = resizeCollapsableStacks;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__select2__ = __webpack_require__(1);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 /**
- * FORM ITEM EDITOR
+ * FORM ITEM
  */
 
-var FormItemEditor = function () {
-	function FormItemEditor() {
-		_classCallCheck(this, FormItemEditor);
 
-		this.target = ".form-item--editor";
+
+// Component Global Variables
+var newFormItemId = 1;
+
+var FormItemCollapsable = function () {
+	function FormItemCollapsable() {
+		_classCallCheck(this, FormItemCollapsable);
 	}
 
-	_createClass(FormItemEditor, [{
-		key: "isSet",
-		value: function isSet() {
-			if ($(this.target).length > 0) {
+	_createClass(FormItemCollapsable, [{
+		key: "isPresent",
+		value: function isPresent() {
+			if ($(".form--list").length > 0) {
 				return true;
 			} else {
 				return false;
@@ -96,33 +103,218 @@ var FormItemEditor = function () {
 	}, {
 		key: "setEvents",
 		value: function setEvents() {
-			var _this = this;
-
-			// run resize to set initial size
-			this.resize();
-			// run resize on each of these events
-			$(window).resize(function () {
-				_this.resize();
-			});
-		}
-	}, {
-		key: "resize",
-		value: function resize() {
-			$(this.target).each(function () {
-				// If the form item editor is closed don't go any further
-				if ($(this).height() === 0) return;
-				// otherwise update the max-height which is needed for the CSS transition
-				// NOTE you need to remove the max-height (inside 'style' attribute) to get the real height
-				$(this).get(0).style.height = "auto";
-				$(this).get(0).style.maxHeight = $(this).get(0).scrollHeight + "px";
-			});
+			$(document).on("click", ".form--add-list-item", addNewItem);
+			$(document).on("click", ".form--delete-list-item", deleteItem);
+			$(document).on("click", ".form-item--collapse-btn", collapseToggle);
+			$(window).resize(resizeCollapsableStacks);
+			// Make sure all collapsable items are resized already at every page load
+			resizeCollapsableStacks();
 		}
 	}]);
 
-	return FormItemEditor;
+	return FormItemCollapsable;
 }();
 
-var _FormItemEditor = new FormItemEditor();
+var _FormItemCollapsable = new FormItemCollapsable();
+
+/**
+ * COMPONENT HELPER FUNCTIONS
+ */
+
+/**
+ * Adds a new item.
+ *
+ * @param      {event}  event   The event
+ */
+function addNewItem(event) {
+	// Stop default behaviour
+	event.preventDefault();
+	// Get the child to clone
+	var id = $(this).data("id");
+	var $list = $("#form--list-" + id);
+	var url = $(this).data("url");
+	var data = $list.sortable("serialize");
+	var params = $(this).data("params");
+	if (params) {
+		data = data.concat("&" + params);
+	}
+	$.ajax({
+		url: url,
+		data: data,
+		method: "POST"
+	}).done(function (data) {
+		// Get repaeter code from Rails
+		// Due to the Rails way of creating nested forms it's necessary to
+		// create the nested item inside a different new form, then get just
+		// the code contained between the two SPLIT comments
+		var parts = data.split("<!-- SPLIT -->");
+		var newItem = parts[1];
+		setupAndAppend(newItem, $list);
+	});
+}
+
+/**
+ * Setup and append new item
+ *
+ * @param      {string}  newItem  The new item
+ * @param      {object}  $list    The list
+ */
+function setupAndAppend(newItem, $list) {
+	// Append the item
+	$list.prepend(newItem);
+	var collapsable = $list.find(".form-item--collapsable").get(0);
+
+	// Update select input for Select2 plugin
+	Object(__WEBPACK_IMPORTED_MODULE_0__select2__["b" /* setupSelect2 */])($list.find("select"));
+
+	setupTinyMCE($list.find("textarea"));
+
+	// Prepare collapsable animation
+	collapsable.style.maxHeight = "0px";
+
+	// Prepare collapsable stack animation
+	openCollapsableStacks(collapsable);
+
+	// Refresh Sortable to update the added item with Sortable features
+	$list.sortable("refresh");
+
+	// Run animation 500ms after previous style declaration (see above) otherwise animation doesn't get triggered
+	setTimeout(function () {
+		collapsable.style.maxHeight = collapsable.scrollHeight + "px";
+	}, 50);
+}
+
+/**
+ * Close collapsable stacks
+ *
+ * It closes all collapsable stacks inside the collapsable item passed as argument
+ *
+ * @param      {object, string}  target  The target
+ */
+function closeCollapsableStacks(obj) {
+	$(obj).addClass("form-item--collapsed").find(".form-item--collapsable-stack").each(function () {
+		this.style.maxHeight = "0px";
+		this.style.pointerEvents = "none";
+	});
+}
+
+/**
+ * Open collapsable stacks
+ *
+ * It opens all collapsable stacks inside the collapsable item passed as argument
+ *
+ * @param      {object, string}  target  The target
+ */
+function openCollapsableStacks(obj) {
+	// Don't execute this if sortable is enabled
+	if ($(obj).closest(".sortable").hasClass("sortable--enabled")) {
+		return;
+	}
+	$(obj).removeClass("form-item--collapsed").find(".form-item--collapsable-stack").each(function () {
+		this.style.maxHeight = this.scrollHeight + "px";
+		this.style.pointerEvents = "auto";
+	});
+}
+
+/**
+ * Toggle a collapsable item
+ *
+ * Basically it opens it or closes it based on its state
+ *
+ * @param      {event}  event   The event
+ */
+function collapseToggle(event) {
+	// Stop default behaviour
+	event.preventDefault();
+	var $collapsable = $(this).closest(".form-item--collapsable");
+	if ($collapsable.hasClass("form-item--collapsed")) {
+		$collapsable.each(function () {
+			openCollapsableStacks(this);
+		});
+	} else {
+		$collapsable.each(function () {
+			closeCollapsableStacks(this);
+		});
+	}
+}
+
+/**
+ * Delete collapsable item and hide it
+ *
+ * @param      {event}  event   The event
+ */
+function deleteItem(event) {
+	// Stop default behaviour
+	event.preventDefault();
+	var record_id = $(this).data("id");
+	var targetId = "#form--list-item-" + record_id;
+	var target = $(targetId).get(0);
+	// As max-height isn't set you need to set it manually before changing it,
+	// otherwise the animation doesn't get triggered
+	target.style.maxHeight = target.scrollHeight + "px";
+	// Change max-height after 50ms to trigger css animation
+	setTimeout(function () {
+		target.style.maxHeight = "0px";
+		target.style.pointerEvents = "none";
+	}, 50);
+	$.ajax({
+		url: $(this).attr("href"),
+		data: { id: record_id, target_id: targetId, isAjax: true },
+		method: "DELETE"
+	}).done(function (data) {
+		// Make sure the animation completes before removing the item (it should last 600ms + 50ms)
+		setTimeout(function () {
+			$(data.target_id).remove();
+		}, 700);
+	});
+	// TODO add a fallback if request fails
+}
+
+/**
+ * Resize all collapsable item
+ *
+ * If a target is passed as a argument the function will resize only that target and its children.
+ *
+ * @param      {object, string}  target  The target.
+ */
+function resizeCollapsableStacks(target) {
+	target = _.isUndefined(target) ? document.getElementsByClassName("form-item--collapsable-stack") : target;
+	// target CANNOT BE a jquery object because it leads to the following error
+	// TypeError: undefined is not an object (evaluating 't.ownerDocument.defaultView')
+	$(target).each(function () {
+		// If the collapsable item is closed don't go any further
+		if ($(this).height() === 0 || $(this).closest(".form-item--collapsable").hasClass("form-item--collapsed")) {
+			this.style.maxHeight = "0px";
+			this.style.pointerEvents = "none";
+		} else {
+			// otherwise update the max-height which is needed for the CSS transition
+			// NOTE you need to remove the max-height (inside 'style' attribute) to get the real height
+			this.style.height = "auto";
+			this.style.maxHeight = this.scrollHeight + "px";
+			this.style.pointerEvents = "auto";
+		}
+	});
+}
+
+/**
+ * Setup TinyMCE
+ *
+ * @param      {jQuery object}  $textareas  The textareas
+ */
+function setupTinyMCE($textareas) {
+	var editor_ids = _.map(tinyMCE.editors, function (editor) {
+		return editor.id;
+	});
+	// console.log({editors});
+	$textareas.each(function () {
+		if (_.includes(editor_ids, this.getAttribute('id'))) {
+			return;
+		}
+		tinyMCE.init({
+			selector: "#" + this.getAttribute("id")
+		});
+	});
+}
 
 /***/ }),
 /* 1 */
@@ -164,19 +356,17 @@ function setupSelect2(target) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_form_item__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_form_item_repeater__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_form_item_image__ = __webpack_require__(5);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components_field_setting_choices__ = __webpack_require__(6);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_form_item_editor__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__components_fileupload__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__components_login_shader__ = __webpack_require__(8);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__components_login_form__ = __webpack_require__(9);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__components_sortable__ = __webpack_require__(10);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__components_field_group_editor__ = __webpack_require__(11);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__components_bootstrap__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__components_select2__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__components_radio_toggle__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_form_item_collapsable__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_form_item_image__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_field_setting_choices__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components_fileupload__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_login_shader__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__components_login_form__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__components_sortable__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__components_field_group_editor__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__components_bootstrap__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__components_select2__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__components_radio_toggle__ = __webpack_require__(11);
 ///- - - - - - - - - - - - - - - - - - - -
 /// INDEX OF BINDA'S SCRIPTS
 ///- - - - - - - - - - - - - - - - - - - -
@@ -193,45 +383,37 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
-
-
 $(document).ready(function () {
-	if (__WEBPACK_IMPORTED_MODULE_0__components_form_item__["a" /* _FormItem */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_0__components_form_item__["a" /* _FormItem */].setEvents();
-	}
-	if (__WEBPACK_IMPORTED_MODULE_1__components_form_item_repeater__["a" /* _FormItemRepeater */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_1__components_form_item_repeater__["a" /* _FormItemRepeater */].setEvents();
-	}
-	if (__WEBPACK_IMPORTED_MODULE_2__components_form_item_image__["a" /* _FormItemImage */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_2__components_form_item_image__["a" /* _FormItemImage */].setEvents();
+	if (__WEBPACK_IMPORTED_MODULE_0__components_form_item_collapsable__["a" /* _FormItemCollapsable */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_0__components_form_item_collapsable__["a" /* _FormItemCollapsable */].setEvents();
 	}
-	if (__WEBPACK_IMPORTED_MODULE_3__components_field_setting_choices__["a" /* _FieldSettingChoices */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_3__components_field_setting_choices__["a" /* _FieldSettingChoices */].setEvents();
+	if (__WEBPACK_IMPORTED_MODULE_1__components_form_item_image__["a" /* _FormItemImage */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_1__components_form_item_image__["a" /* _FormItemImage */].setEvents();
 	}
-	if (__WEBPACK_IMPORTED_MODULE_4__components_form_item_editor__["a" /* _FormItemEditor */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_4__components_form_item_editor__["a" /* _FormItemEditor */].setEvents();
+	if (__WEBPACK_IMPORTED_MODULE_2__components_field_setting_choices__["a" /* _FieldSettingChoices */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_2__components_field_setting_choices__["a" /* _FieldSettingChoices */].setEvents();
 	}
-	if (__WEBPACK_IMPORTED_MODULE_5__components_fileupload__["a" /* _FileUpload */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_5__components_fileupload__["a" /* _FileUpload */].setEvents();
+	if (__WEBPACK_IMPORTED_MODULE_3__components_fileupload__["a" /* _FileUpload */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_3__components_fileupload__["a" /* _FileUpload */].setEvents();
 	}
-	if (__WEBPACK_IMPORTED_MODULE_7__components_login_form__["a" /* _LoginForm */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_7__components_login_form__["a" /* _LoginForm */].init();
+	if (__WEBPACK_IMPORTED_MODULE_5__components_login_form__["a" /* _LoginForm */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_5__components_login_form__["a" /* _LoginForm */].init();
 	}
-	if (__WEBPACK_IMPORTED_MODULE_6__components_login_shader__["a" /* _Shader */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_6__components_login_shader__["a" /* _Shader */].setup();
-		__WEBPACK_IMPORTED_MODULE_6__components_login_shader__["a" /* _Shader */].start();
+	if (__WEBPACK_IMPORTED_MODULE_4__components_login_shader__["a" /* _Shader */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_4__components_login_shader__["a" /* _Shader */].setup();
+		__WEBPACK_IMPORTED_MODULE_4__components_login_shader__["a" /* _Shader */].start();
 	}
-	Object(__WEBPACK_IMPORTED_MODULE_12__components_radio_toggle__["a" /* default */])();
-	Object(__WEBPACK_IMPORTED_MODULE_8__components_sortable__["a" /* default */])();
-	Object(__WEBPACK_IMPORTED_MODULE_9__components_field_group_editor__["a" /* default */])();
-	Object(__WEBPACK_IMPORTED_MODULE_10__components_bootstrap__["a" /* default */])();
-	Object(__WEBPACK_IMPORTED_MODULE_11__components_select2__["a" /* default */])();
+	Object(__WEBPACK_IMPORTED_MODULE_10__components_radio_toggle__["a" /* default */])();
+	Object(__WEBPACK_IMPORTED_MODULE_6__components_sortable__["a" /* default */])();
+	Object(__WEBPACK_IMPORTED_MODULE_7__components_field_group_editor__["a" /* default */])();
+	Object(__WEBPACK_IMPORTED_MODULE_8__components_bootstrap__["a" /* default */])();
+	Object(__WEBPACK_IMPORTED_MODULE_9__components_select2__["a" /* default */])();
 });
 
 // handle event
 window.addEventListener("optimizedResize", function () {
-	if (__WEBPACK_IMPORTED_MODULE_6__components_login_shader__["a" /* _Shader */].isSet()) {
-		__WEBPACK_IMPORTED_MODULE_6__components_login_shader__["a" /* _Shader */].resize();
+	if (__WEBPACK_IMPORTED_MODULE_4__components_login_shader__["a" /* _Shader */].isPresent()) {
+		__WEBPACK_IMPORTED_MODULE_4__components_login_shader__["a" /* _Shader */].resize();
 	}
 });
 
@@ -239,270 +421,6 @@ window.addEventListener("optimizedResize", function () {
 /* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FormItem; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__form_item_editor__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__select2__ = __webpack_require__(1);
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-/**
- * FORM ITEM
- */
-
-
-
-
-// Component Global Variables
-var newFormItemId = 1;
-
-var FormItem = function () {
-	function FormItem() {
-		_classCallCheck(this, FormItem);
-	}
-
-	_createClass(FormItem, [{
-		key: "isSet",
-		value: function isSet() {
-			if ($(".form-item").length > 0) {
-				return true;
-			} else {
-				return false;
-			}
-		}
-	}, {
-		key: "setEvents",
-		value: function setEvents() {
-			$(document).on("click", ".form-item--add-new", addNewItem);
-
-			$(document).on("click", ".form-item--remove-item-with-js", function (event) {
-				// Stop default behaviour
-				event.preventDefault();
-				$(this).closest(".form-item").remove();
-			});
-
-			$(document).on("click", ".form-item--collapse-btn", collapseToggle);
-		}
-	}]);
-
-	return FormItem;
-}();
-
-var _FormItem = new FormItem();
-
-///- - - - - - - - - - - - - - - - - - - -
-/// COMPONENT HELPER FUNCTIONS
-///- - - - - - - - - - - - - - - - - - - -
-
-// This function could be improved as it generates an issue with
-// input ids which are duplicated after the entire target has been cloned
-function addNewItem(event) {
-	// Stop default behaviour
-	event.preventDefault();
-	// Get the child to clone
-	// (`this` always refers to the second argument of the $(document).on() method, in this case '.form-item--add-new')
-	var id = $(this).data("new-form-item-id");
-	var $newChild = $("#" + id);
-	// Clone child and remove id and styles from cloned child
-	$newChild.clone().insertAfter($newChild);
-	// Remove class in order to remove styles, and change id so it's reachable when testing
-	$newChild.removeClass("form-item--new").attr("id", "new-form-item-" + newFormItemId);
-
-	// // Update all ids to avoid duplication
-	$newChild.find("[id]").each(function () {
-		var oldId = $(this).attr("id");
-		var newId = oldId + "-" + newFormItemId;
-		$(this).attr("id", newId);
-		var $forId = $newChild.find("[for=" + oldId + "]");
-		if ($forId.length > 0) {
-			$forId.attr("for", newId);
-		}
-	});
-
-	// Update height (max-height) of the new element
-	var $formItemEditor = $("#new-form-item-" + newFormItemId).find(".form-item--editor");
-
-	// override current max-height which is set to 0
-	$formItemEditor.get(0).style.maxHeight = $formItemEditor.get(0).scrollHeight + "px";
-
-	__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
-
-	// Increment global id variable `newFormItemId` in case needs to be used again
-	newFormItemId++;
-
-	Object(__WEBPACK_IMPORTED_MODULE_1__select2__["b" /* setupSelect2 */])($formItemEditor.find("select"));
-}
-
-function close() {
-	this.style.maxHeight = "0px";
-}
-
-function open() {
-	this.style.maxHeight = this.scrollHeight + "px";
-}
-
-function collapseToggle(event) {
-	// This function is temporarely just set for repeaters.
-	// TODO: Need refactoring in order to be available also for generic form items
-
-	// Stop default behaviour
-	event.preventDefault();
-
-	var $collapsable = $(this).closest(".form-item--collapsable");
-
-	if ($collapsable.hasClass("form-item--collapsed")) {
-		$collapsable.find(".form-item--repeater-fields").each(open);
-		$collapsable.find(".form-item--editor").each(open);
-		$collapsable.removeClass("form-item--collapsed");
-	} else {
-		$collapsable.find(".form-item--repeater-fields").each(close);
-		$collapsable.find(".form-item--editor").each(close);
-		$collapsable.addClass("form-item--collapsed");
-	}
-}
-
-/***/ }),
-/* 4 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FormItemRepeater; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__form_item_editor__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__select2__ = __webpack_require__(1);
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-/**
- * FORM ITEM REPEATER
- */
-
-
-
-
-var FormItemRepeater = function () {
-	function FormItemRepeater() {
-		_classCallCheck(this, FormItemRepeater);
-	}
-
-	_createClass(FormItemRepeater, [{
-		key: "isSet",
-		value: function isSet() {
-			if ($(".form-item--repeater-section").length > 0) {
-				return true;
-			} else {
-				return false;
-			}
-		}
-	}, {
-		key: "setEvents",
-		value: function setEvents() {
-			$(document).on("click", ".form-item--repeater-section--add-new", addNewItem);
-
-			$(document).on("click", ".form-item--remove-item-with-js", function (event) {
-				// Stop default behaviour
-				event.preventDefault();
-				$(this).parent(".form-item--repeater-section").remove();
-				__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
-			});
-
-			$(document).on("click", ".form-item--delete-repeater-item", deleteRepeter);
-		}
-	}]);
-
-	return FormItemRepeater;
-}();
-
-var _FormItemRepeater = new FormItemRepeater();
-
-/**
- * COMPONENT HELPER FUNCTIONS
- */
-
-function addNewItem(event) {
-	// Stop default behaviour
-	event.preventDefault();
-	// Get the child to clone
-	var id = $(this).data("id");
-	var $list = $("#form-item--repeater-setting-" + id);
-	var url = $(this).data("url");
-	$.post(url, { repeater_setting_id: id }, function (data) {
-		// Get repaeter code from Rails
-		// Due to the Rails way of creating nested forms it's necessary to
-		// create the nested item inside a different new form, then get just
-		// the code contained between the two SPLIT comments
-		var parts = data.split("<!-- SPLIT -->");
-		var newRepeater = parts[1];
-		setupAndAppend(newRepeater, $list);
-	});
-}
-
-function setupAndAppend(newRepeater, $list) {
-	// Append the item
-	$list.prepend(newRepeater);
-	var new_repeater_item = $list.find(".form-item--repeater").get(0);
-
-	// Prepare animation
-	new_repeater_item.style.maxHeight = 0;
-
-	// Group fields if sotrable is enabled
-	if ($list.hasClass("sortable--enabled")) {
-		$(new_repeater_item).find(".form-item--repeater-fields").each(function () {
-			this.style.maxHeight = 0 + "px";
-		});
-	}
-
-	// Setup TinyMCE for the newly created item
-	var textarea_editor_id = $list.find("textarea").last("textarea").attr("id");
-	tinyMCE.EditorManager.execCommand("mceAddEditor", true, textarea_editor_id);
-
-	// Resize the editor (is it needed with the new configuration?)
-	// _FormItemEditor.resize()
-
-	// Update select input for Select2 plugin
-	Object(__WEBPACK_IMPORTED_MODULE_1__select2__["b" /* setupSelect2 */])($list.find("select"));
-
-	// Refresh Sortable to update the added item with Sortable features
-	$list.sortable("refresh");
-
-	// Run animation 50ms after previous style declaration (see above) otherwise animation doesn't get triggered
-	setTimeout(function () {
-		new_repeater_item.style.maxHeight = new_repeater_item.scrollHeight + "px";
-	}, 50);
-}
-
-function deleteRepeter(event) {
-	// Stop default behaviour
-	event.preventDefault();
-
-	var record_id = $(this).data("id");
-	var target = $("#repeater_" + record_id).get(0);
-	// As max-height isn't set you need to set it manually before changing it,
-	// otherwise the animation doesn't get triggered
-	target.style.maxHeight = target.scrollHeight + "px";
-	// Change max-height after 50ms to trigger css animation
-	setTimeout(function () {
-		target.style.maxHeight = 0 + "px";
-	}, 50);
-
-	$.ajax({
-		url: $(this).attr("href"),
-		data: { id: record_id, isAjax: true },
-		method: "DELETE"
-	}).done(function () {
-		// Make sure the animation completes before removing the item (it should last 600ms + 50ms)
-		setTimeout(function () {
-			$(target).remove();
-		}, 700);
-		// _FormItemEditor.resize()
-	});
-}
-
-/***/ }),
-/* 5 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FormItemImage; });
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -521,8 +439,8 @@ var FormItemImage = function () {
 	}
 
 	_createClass(FormItemImage, [{
-		key: "isSet",
-		value: function isSet() {
+		key: "isPresent",
+		value: function isPresent() {
 			if ($(this.target).length > 0) {
 				return true;
 			} else {
@@ -540,12 +458,12 @@ var FormItemImage = function () {
 var _FormItemImage = new FormItemImage();
 
 /***/ }),
-/* 6 */
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _FieldSettingChoices; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__form_item_editor__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__ = __webpack_require__(0);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -564,8 +482,8 @@ var FieldSettingChoices = function () {
 	}
 
 	_createClass(FieldSettingChoices, [{
-		key: "isSet",
-		value: function isSet() {
+		key: "isPresent",
+		value: function isPresent() {
 			if ($(this.target).length > 0) {
 				return true;
 			} else {
@@ -583,7 +501,7 @@ var FieldSettingChoices = function () {
 				event.preventDefault();
 				$(this).closest(".field-setting-choices--choice").remove();
 				// Update form item editor size
-				__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
+				Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["d" /* resizeCollapsableStacks */])();
 			});
 		}
 	}]);
@@ -608,7 +526,7 @@ function addChoice(event) {
 	// Append the clone right after
 	choices.prepend(clone);
 	// Update form item editor size
-	__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
+	Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["d" /* resizeCollapsableStacks */])();
 }
 
 function deleteChoice(event) {
@@ -624,14 +542,14 @@ function deleteChoice(event) {
 	}).done(function () {
 		choice.remove();
 		// Update form item editor size
-		__WEBPACK_IMPORTED_MODULE_0__form_item_editor__["a" /* _FormItemEditor */].resize();
+		Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["d" /* resizeCollapsableStacks */])();
 	}).fail(function (data) {
 		alert(data.responseJSON.errors);
 	});
 }
 
 /***/ }),
-/* 7 */
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -657,8 +575,8 @@ var FileUpload = function () {
 	}
 
 	_createClass(FileUpload, [{
-		key: "isSet",
-		value: function isSet() {
+		key: "isPresent",
+		value: function isPresent() {
 			if ($(this.target).length > 0) {
 				return true;
 			} else {
@@ -840,7 +758,7 @@ function setup_video_preview(data, id) {
 }
 
 /***/ }),
-/* 8 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -868,8 +786,8 @@ var Shader = function () {
   }
 
   _createClass(Shader, [{
-    key: "isSet",
-    value: function isSet() {
+    key: "isPresent",
+    value: function isPresent() {
       if ($("#background-shader").length > 0) {
         return true;
       } else {
@@ -1057,7 +975,7 @@ function hexToShaderRgb(hex) {
 })();
 
 /***/ }),
-/* 9 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1082,8 +1000,8 @@ var LoginForm = function () {
 	}
 
 	_createClass(LoginForm, [{
-		key: "isSet",
-		value: function isSet() {
+		key: "isPresent",
+		value: function isPresent() {
 			if ($(".login--form").length > 0) {
 				return true;
 			} else {
@@ -1186,14 +1104,17 @@ var LoginForm = function () {
 var _LoginForm = new LoginForm();
 
 /***/ }),
-/* 10 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__ = __webpack_require__(0);
 /**
  * SORTABLE
  */
 
+
+
 var sortableOptions = {
 	stop: function stop(event, ui) {
 		ui.item.css("z-index", 0);
@@ -1202,6 +1123,14 @@ var sortableOptions = {
 	update: updateSortable
 };
 
+/* Initialize jQuery Sortable
+ * 
+ * This function handles several things:
+ * - it sets Sortable for each ".sortable" element
+ * - it adds handles only if required
+ * - it disable itself if it finds ".sortable--disabled" class
+ * - it sets up a toggle button and behaviour if required 
+ */
 /* harmony default export */ __webpack_exports__["a"] = (function () {
 	if ($(".sortable").length > 0) {
 		// Initialize sortable item
@@ -1223,38 +1152,31 @@ var sortableOptions = {
 	if ($(".sortable--toggle").length > 0) {
 		setupSortableToggle();
 	}
-
-	// Add event to any sortable toggle button
-	// TODO: make this event available to element which aren't standard form repeaters
-	$(document).on("click", ".standard-form--repeater .sortable--toggle", toggleSortable);
 });
 
+/* Setup Sortable Toggle
+ *
+ * It sets up each toggle button and add the events needed to enable or disable Sortable.
+ */
 function setupSortableToggle() {
 	$(".sortable--toggle").each(function () {
-		var id = "#" + $(this).data("repeater-id");
-		$(id).find(".form-item--collapsable").addClass("form-item--collapsed");
-		$(id).find(".form-item--repeater-fields").each(close);
+		var id = "#" + $(this).data("sortable-target-id");
+		Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["b" /* closeCollapsableStacks */])(id);
 	});
-}
-
-function close() {
-	this.style.maxHeight = "0px";
-}
-
-function open() {
-	this.style.maxHeight = this.scrollHeight + "px";
+	// Add event to any sortable toggle button
+	$(document).on("click", ".sortable--toggle", toggleSortable);
 }
 
 function toggleSortable(event) {
 	event.preventDefault();
-	var id = "#" + $(this).data("repeater-id");
+	var id = "#" + $(this).data("sortable-target-id");
 
 	if ($(id).hasClass("sortable--disabled")) {
 		$(id).sortable("enable");
-		$(id).find(".form-item--repeater-fields").each(close);
-		$(id).find(".form-item--collapsable").addClass("form-item--collapsed");
+		Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["b" /* closeCollapsableStacks */])(id);
 	} else {
 		$(id).sortable("disable");
+		Object(__WEBPACK_IMPORTED_MODULE_0__form_item_collapsable__["c" /* openCollapsableStacks */])(id);
 	}
 
 	$(id).toggleClass("sortable--disabled");
@@ -1284,7 +1206,7 @@ function updateSortable() {
 }
 
 /***/ }),
-/* 11 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1306,7 +1228,7 @@ function updateSortable() {
 });
 
 /***/ }),
-/* 12 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1320,7 +1242,7 @@ function updateSortable() {
 });
 
 /***/ }),
-/* 13 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";