binda 0.1.3 → 0.1.4

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

@@ -2,112 +2,112 @@
  * FORM ITEM
  */
 
-import { _FormItemEditor } from './form_item_editor'
-import { setupSelect2 } from './select2' 
+import { _FormItemEditor } from "./form_item_editor";
+import { setupSelect2 } from "./select2";
 
 // Component Global Variables
-let newFormItemId = 1
+let newFormItemId = 1;
 
 class FormItem {
-	
-	constructor(){}
-
-	isSet()
-	{
-		if ( $('.form-item').length > 0 ) { return true }
-		else { return false }
+	constructor() {}
+
+	isSet() {
+		if ($(".form-item").length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	setEvents()
-	{
-		$(document).on('click', '.form-item--add-new', addNewItem )
+	setEvents() {
+		$(document).on("click", ".form-item--add-new", addNewItem);
 
-		$(document).on('click', '.form-item--remove-item-with-js', function( event )
-		{
+		$(document).on("click", ".form-item--remove-item-with-js", function(event) {
 			// Stop default behaviour
-			event.preventDefault()
-			$( this ).closest('.form-item').remove()
-		})
+			event.preventDefault();
+			$(this)
+				.closest(".form-item")
+				.remove();
+		});
 
-		$(document).on('click', '.form-item--collapse-btn', collapseToggle )
+		$(document).on("click", ".form-item--collapse-btn", collapseToggle);
 	}
 }
 
-export let _FormItem = new FormItem()
-
+export let _FormItem = new FormItem();
 
 ///- - - - - - - - - - - - - - - - - - - -
 /// COMPONENT HELPER FUNCTIONS
 ///- - - - - - - - - - - - - - - - - - - -
 
-// This function could be improved as it generates an issue with 
+// 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) 
-{
+function addNewItem(event) {
 	// Stop default behaviour
-	event.preventDefault()
-	// Get the child to clone 
+	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')
-	let id = $( this ).data( 'new-form-item-id' )
-	let $newChild = $( '#' + id )
+	let id = $(this).data("new-form-item-id");
+	let $newChild = $("#" + id);
 	// Clone child and remove id and styles from cloned child
-	$newChild.clone().insertAfter( $newChild )
+	$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 )
+	$newChild
+		.removeClass("form-item--new")
+		.attr("id", "new-form-item-" + newFormItemId);
 
 	// // Update all ids to avoid duplication
-	$newChild.find('[id]').each(function(){
-		let oldId = $(this).attr('id')
-		let newId = oldId + '-' + newFormItemId
-		$(this).attr('id', newId )
-		let $forId = $newChild.find('[for='+ oldId +']')
-		if ( $forId.length > 0 ) { $forId.attr('for', newId) }
-	})
+	$newChild.find("[id]").each(function() {
+		let oldId = $(this).attr("id");
+		let newId = oldId + "-" + newFormItemId;
+		$(this).attr("id", newId);
+		let $forId = $newChild.find("[for=" + oldId + "]");
+		if ($forId.length > 0) {
+			$forId.attr("for", newId);
+		}
+	});
 
 	// Update height (max-height) of the new element
-	let $formItemEditor = $('#new-form-item-'+newFormItemId).find('.form-item--editor')
+	let $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";
+	$formItemEditor.get(0).style.maxHeight =
+		$formItemEditor.get(0).scrollHeight + "px";
 
-	_FormItemEditor.resize()
+	_FormItemEditor.resize();
 
 	// Increment global id variable `newFormItemId` in case needs to be used again
-	newFormItemId++
+	newFormItemId++;
 
-	setupSelect2( $formItemEditor.find('select') )
+	setupSelect2($formItemEditor.find("select"));
 }
 
-function close()
-{
-	this.style.maxHeight = '0px'
+function close() {
+	this.style.maxHeight = "0px";
 }
 
-function open()
-{
+function open() {
 	this.style.maxHeight = this.scrollHeight + "px";
 }
 
-function collapseToggle( event )
-{
+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()
-
-	let $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')
+	event.preventDefault();
+
+	let $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");
 	}
-}
+}

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

@@ -3,37 +3,37 @@
  */
 
 class FormItemEditor {
-	
-	constructor()
-	{
-		this.target = '.form-item--editor'
+	constructor() {
+		this.target = ".form-item--editor";
 	}
 
-	isSet()
-	{
-		if ( $( this.target ).length > 0 ) { return true }
-		else { return false }
+	isSet() {
+		if ($(this.target).length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	setEvents()
-	{
+	setEvents() {
 		// run resize to set initial size
-		this.resize()
+		this.resize();
 		// run resize on each of these events
-		$(window).resize( ()=>{ this.resize() } )
+		$(window).resize(() => {
+			this.resize();
+		});
 	}
 
-	resize()
-	{
-		$( this.target ).each( function(){
+	resize() {
+		$(this.target).each(function() {
 			// If the form item editor is closed don't go any further
-			if ( $(this).height() === 0 ) return
+			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.height = "auto";
 			$(this).get(0).style.maxHeight = $(this).get(0).scrollHeight + "px";
-		})
+		});
 	}
 }
 
-export let _FormItemEditor = new FormItemEditor()
+export let _FormItemEditor = new FormItemEditor();

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

@@ -2,22 +2,20 @@
  * FORM ITEM IMAGE
  */
 
-class FormItemImage
-{
-	constructor()
-	{
-		this.target = '.form-item--image--uploader'
+class FormItemImage {
+	constructor() {
+		this.target = ".form-item--image--uploader";
 	}
 
-	isSet()
-	{
-		if ( $( this.target ).length > 0 ) { return true }
-		else { return false }
+	isSet() {
+		if ($(this.target).length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	setEvents()
-	{
-	}
+	setEvents() {}
 }
 
-export var _FormItemImage = new FormItemImage()
+export var _FormItemImage = new FormItemImage();

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

@@ -2,120 +2,126 @@
  * FORM ITEM REPEATER
  */
 
-import { _FormItemEditor } from './form_item_editor'
-import { setupSelect2 } from './select2' 
+import { _FormItemEditor } from "./form_item_editor";
+import { setupSelect2 } from "./select2";
 
 class FormItemRepeater {
-	
-	constructor(){}
-
-	isSet()
-	{
-		if ( $('.form-item--repeater-section').length > 0 ) { return true }
-		else { return false }
+	constructor() {}
+
+	isSet() {
+		if ($(".form-item--repeater-section").length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	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()
-			_FormItemEditor.resize()
-		})
+	setEvents() {
+		$(document).on(
+			"click",
+			".form-item--repeater-section--add-new",
+			addNewItem
+		);
 
-		$(document).on('click', '.form-item--delete-repeater-item', deleteRepeter )
+		$(document).on("click", ".form-item--remove-item-with-js", function(event) {
+			// Stop default behaviour
+			event.preventDefault();
+			$(this)
+				.parent(".form-item--repeater-section")
+				.remove();
+			_FormItemEditor.resize();
+		});
+
+		$(document).on("click", ".form-item--delete-repeater-item", deleteRepeter);
 	}
 }
 
-export let _FormItemRepeater = new FormItemRepeater()
-
+export let _FormItemRepeater = new FormItemRepeater();
 
 /**
  * COMPONENT HELPER FUNCTIONS
  */
 
-function addNewItem( event ) 
-{
+function addNewItem(event) {
 	// Stop default behaviour
-	event.preventDefault()
+	event.preventDefault();
 	// Get the child to clone
-	let id = $( this ).data( 'id' )
-	let $list = $('#form-item--repeater-setting-' + id )
-	let url = $( this ).data( 'url' )
-	$.post( url, { repeater_setting_id: id }, function( data )
-	{
+	let id = $(this).data("id");
+	let $list = $("#form-item--repeater-setting-" + id);
+	let 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 
+		// 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
-		let parts = data.split('<!-- SPLIT -->')
-		let newRepeater = parts[1]
-		setupAndAppend( newRepeater, $list )
-	})
+		let parts = data.split("<!-- SPLIT -->");
+		let newRepeater = parts[1];
+		setupAndAppend(newRepeater, $list);
+	});
 }
 
-function setupAndAppend( newRepeater, $list )
-{
+function setupAndAppend(newRepeater, $list) {
 	// Append the item
-	$list.prepend( newRepeater )
-	let new_repeater_item = $list.find('.form-item--repeater').get(0)
+	$list.prepend(newRepeater);
+	let new_repeater_item = $list.find(".form-item--repeater").get(0);
 
 	// Prepare animation
-	new_repeater_item.style.maxHeight = 0
+	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'
-		})
+	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);
-	
+	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
-	setupSelect2( $list.find('select') )
+	setupSelect2($list.find("select"));
 
 	// Refresh Sortable to update the added item with Sortable features
-	$list.sortable('refresh')
+	$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)
+	setTimeout(function() {
+		new_repeater_item.style.maxHeight = new_repeater_item.scrollHeight + "px";
+	}, 50);
 }
 
-function deleteRepeter( event )
-{
+function deleteRepeter(event) {
 	// Stop default behaviour
-	event.preventDefault()
-	
-	let record_id = $( this ).data('id') 
-	let target = $('#repeater_' + record_id).get(0)
-	// As max-height isn't set you need to set it manually before changing it, 
+	event.preventDefault();
+
+	let record_id = $(this).data("id");
+	let 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'	
+	target.style.maxHeight = target.scrollHeight + "px";
 	// Change max-height after 50ms to trigger css animation
-	setTimeout( function(){ target.style.maxHeight = 0 + 'px'	}, 50)
+	setTimeout(function() {
+		target.style.maxHeight = 0 + "px";
+	}, 50);
 
 	$.ajax({
-		url: $( this ).attr('href'),
+		url: $(this).attr("href"),
 		data: { id: record_id, isAjax: true },
 		method: "DELETE"
-	}).done( ()=>{
+	}).done(() => {
 		// Make sure the animation completes before removing the item (it should last 600ms + 50ms)
-		setTimeout( function(){ $(target).remove() }, 700)
+		setTimeout(function() {
+			$(target).remove();
+		}, 700);
 		// _FormItemEditor.resize()
-	})
-}
+	});
+}