binda 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5694e1440f4d1444a866b3585c015a505b1916c9
-  data.tar.gz: fbb826b32c32544817670db8c40b2c17b4e0fa0d
+  metadata.gz: 0595e8ebcd16b13684f90a7329163fee69a897f7
+  data.tar.gz: df0c48d8da9db4f7fb62a08ac1e45c29419b09f7
 SHA512:
-  metadata.gz: 8e6fad4efa8654fd96281eba1cc2d952b06ab2c295e8c5647578dcf9fca72a9c56ac2815531f7a3a63bec2691e771181084b8f0bf5891f5cbfd5e6f470b0038e
-  data.tar.gz: 8e0b3daf423b42e5a0b381678ddd41f62d79dc54c99f359fdf5dbad30958c6f31c38a0d005717b18c77c8279e989f481d532c6e61610334440dc4883814a151f
+  metadata.gz: ddec158c8a7577054ae0f190f712a1bed77cd856e8347b3b2e0b7e0d3674d3b3bb55bc574990264144f244f45439be03087cf18bf2882b46809449b0d66a2d1f
+  data.tar.gz: 632f2a5422638d97db475735c4e0af4a0aa9801abe52b7ec3ec5687cea0490d38bea4d19ecebb8888496b3ea5892ee74fc060a071057e8b6db7aef0b9f20cee2

data/README.md

@@ -138,7 +138,7 @@ Once the _structure_ has been created it's possible to add field groups. By defa
 
 In order to add _field settings_ that will let you add content to your _component_ (or _board_) you need to enter on of the _structure's field groups_.
 
-## Retrieve a structure
+## Retrieve structure elements
 
 Once you create a _structure_ you can call it from your controller like so:
 
@@ -149,16 +149,21 @@ Once you create a _structure_ you can call it from your controller like so:
 From that you can do all sorts of things.
 
 ```ruby
-# get all field groups
+# get all field groups:
 @field_groups = @my_structure.field_groups
 
-# get all field settings
+# get all field settings:
+# (loop method) (returns an Array object)
 @field_settings = []
 @field_groups.each do |group|
   group.field_settings.each do |setting|
     @field_settings << setting
   end
 end
+# (single query method) (returns an ActiveRelation object)
+@field_settings = Binda::FieldSetting
+  .includes(field_group: [:structure])
+  .where(binda_field_groups: {structure_id: @my_structure.id})
 ```
 
 Depending on the structure type, to retrieve all related _components_ or the related _board_ you can use the Binda helper (which is suggested if you care about performance, see [component](#Components) or [board](#Boards)) or do it the usual Ruby on Rails way like so:
@@ -171,6 +176,20 @@ Depending on the structure type, to retrieve all related _components_ or the rel
 @board = @my_structure.board
 ```
 
+To retrieve _field groups_ or a _structure_ from a _field setting_ you can do the following:
+
+```Ruby
+@field_setting = Binda::FieldSetting.find_by(slug: 'my-field')
+
+# Get the field group
+@field_setting.field_group
+
+# Get the structure
+@field_setting.structure
+```
+
+Note that `@field_setting.structure` is a convenient method Binda offers to get the structure, but don't over think: this doesn't mean there is a association `Binda::Structure  --has_many-->  Binda::FieldSetting`! The association is always mediated by `Binda::FieldGroup`.
+
 ---
 
 
@@ -258,9 +277,9 @@ You can add any other option to the query then:
 
 ## Enable preview
 
-When you created the component structure you might have enabled the **preview mode**. The easiest way to integrate the preview with yor application is to update the `config/routes.rb` file with a redirect that binds the component preview url to the controller that is in chardge of showing that component in your application.
+When you created the _component structure_ you might want to enable the **preview mode**. The easiest way to integrate the preview with yor application is to update the `config/routes.rb` file with a redirect that binds the _component_ preview url to the controller that is in chardge of showing that _component_ in your application.
 
-For example let's say you have a *animal* structure with slug `animal`: 
+For example let's say you have a *animal* _structure_ with `slug = animal`: 
 
 ```ruby 
 # your application single animal route
@@ -278,11 +297,11 @@ get "admin_panel/animal/:slug", to: redirect('/animals/%{slug}')
 
 _Boards_ give you the possibility to have a panel where to list some specific settings. 
 
-A great example of a _board_ is the _Dashboard_. This board is useful to store the generic data which can be used throughout the application, like the website name and description.
+A great example of a _board_ is the _Dashboard_. This _board_ is useful to store the generic data which can be used throughout the application, like the website name and description.
 
-You can create as many _boards_ you like and add any field you want. To set up a _board_ go to _Structures_ and create a new _structure_ with type "_board_". The name of the structure will determine also the name of the board. Once created a new tab will appear on the main sidebar. The newly created structure is already populated with the _General Details_ field group which is initially empty. To add new field settings you can decide to edit this field group or create a new field group.
+You can create as many _boards_ you like and add any field you want. To set up a _board_ go to _Structures_ and create a new _structure_ with type "_board_". The name of the _structure_ will determine also the name of the _board_. Once created a new tab will appear on the main sidebar. The newly created _structure_ is already populated with the _General Details_ _field group_ which is initially empty. To add new _field settings_ you can decide to edit this _field group_ or create a new _field group_.
 
-Once ready you can head to the _board_ page by clicking the tab on the main sidebar and populate the fields with your content.
+Once ready you can head to the _board_ page by clicking the tab on the main sidebar and populate the _fields_ with your content.
 
 To retrieve _board_ content you can use one of those methods:
 
@@ -333,18 +352,43 @@ Every _field setting_ is based on a field type. You can create several field set
 
 Here below a list of field types available and their use:
 
-| Field setting | Use details |
-|---|---|
-| String | Store a string. No formatting options available. |
-| Text | Store a text. TinyMCE let's you format the text as you like.   |
-| Image | Store image. |
-| Video | Store video. |
-| Date | Store a date. |
-| Radio | Select one choice amongst a custom set. |
-| Selection | Select one or more choices amongst a custom set. |
-| Check Box | Select one or more choices amongst a custom set. |
-| Repeater | Store multiple instances of a field or a collection of fields. |
-| Relation | Connect multiple instances of a _component_ or _board_ to each other. |
+| Field type | Usage | |
+|---|---|---|
+| string | Store a string. No formatting options available. | [source](http://www.rubydoc.info/gems/binda/Binda/String) |
+| text | Store a text. TinyMCE let's you format the text as you like. | [source](http://www.rubydoc.info/gems/binda/Binda/Text) |
+| image | Store image. | [source](http://www.rubydoc.info/gems/binda/Binda/Image) |
+| video | Store video. | [source](http://www.rubydoc.info/gems/binda/Binda/Video) |
+| date | Store a date. | [source](http://www.rubydoc.info/gems/binda/Binda/Date) |
+| radio | Select one choice amongst a custom set. | [source](http://www.rubydoc.info/gems/binda/Binda/Radio) |
+| selection | Select one or more choices amongst a custom set. | [source](http://www.rubydoc.info/gems/binda/Binda/Selection) |
+| checkbox | Select one or more choices amongst a custom set. | [source](http://www.rubydoc.info/gems/binda/Binda/Checkbox) |
+| repeater | Store multiple instances of a field or a collection of fields. | [source](http://www.rubydoc.info/gems/binda/Binda/Repeater) |
+| relation | Connect multiple instances of a _component_ or _board_ to each other. | [source](http://www.rubydoc.info/gems/binda/Binda/Relation) |
+
+## Available setting and customization
+
+Sometime you might want to specify a behaviour or a restriction for a specific _field_.
+To konw more about a specific _field_ click on the **source** link where you can find a more comprehensive documentation.
+
+## Reload!
+
+In order to keep consistency between _fields_ and their own _settings_ Binda use **callbacks**. 
+
+For example the following line will create a _field setting_, but under the hood it provide each _component_ with the relative _field_:
+
+```ruby
+# Create a field setting
+@structure.field_groups_first.field_settings.create(name: 'my text', field_type: 'text')
+# => <Binda::FieldSetting id: 1, ...>
+
+# You don't have to create a text field for each component, it's alreay been done for you
+@structure.components.first.texts.first
+# => <Binda::Text id: 1, field_setting_id: 1, ...>
+```
+
+IMPORTANT: Sometimes callbacks run and the `ActiveRecord` object stored in your variable might get outdated. Use `reload` to make sure the `ActiveRecord` in your variable correspond to the real database record. (run `mycomponent.reload`)
+
+Some callbacks can a bit sneaky. For example _field settings_ with `field_type='radio'` cannot have `allow_null=true` so no matter how many times you try to update `allow_null=true` it will never change.
 
 ## How to get field content
 
@@ -371,7 +415,7 @@ Here below a list of helpers.
 
 You can retrieve field content from a instance of `Binda::Component`, `Binda::Board` or `Binda::Repeater`. See [How to get field content](#How_to_get_field_content).
 
-**NOTE: source links are based on the latest public version.** If you are using an older version or a specific branch please refer to the [source](https://github.com/lacolonia/binda/blob/master/app/models/concerns/binda/fieldable_associations.rb) switching to the branch/tag you are looking for.
+**NOTE: source links are based on the latest public version.** If you are using an older version or a specific branch please refer to the [source on github](https://github.com/lacolonia/binda/blob/master/app/models/concerns/binda/fieldable_associations.rb) and switch to the branch/tag you are looking for.
 
 | Helper |||
 |---|---|---|
@@ -518,6 +562,22 @@ To change appereance and behaviour of the page add your styles to `app/assets/st
 
 ---
 
+# Field settings and field groups
+
+---
+
+## Orphans
+
+Sometime playing with Rails console you might end up creating orphans, which basically are components without a field setting parent. They might cause errors in some queries and they hard to track down.
+
+To avoid the problem run the following command from your shell:
+
+```bash
+rails binda:remove_orphan_fields
+```
+
+---
+
 
 # Plugins
 
@@ -531,10 +591,7 @@ Here a list of useful plugins:
 
 # Upgrade
 
-Here some upgrade instruction.
-
-
-To upgrade from 0.0.6 to 0.0.7 please refer to the [release documentation](https://github.com/lacolonia/binda/releases/tag/0.0.7)
+If you are going to upgrade from a previous version please check the guidelines attached to the version release which can be found on this [Github page](https://github.com/lacolonia/binda/releases).
 
 ---
 
@@ -755,6 +812,7 @@ To contribute [fork this project](https://github.com/lacolonia/binda/wiki/_new#f
 - if you are not adding a core feature consider writing a plugin instead
 - improve and/or add new I18n translations
 - when fixing a bug, provide a failing test case that your patch solves
+- write deprecation warning for methods instead of deleting them (`app/models/concerns/binda/deprecations.rb`)
 
 ## How to work locally
 Ensure you have installed Binda dependencies.

data/app/assets/javascripts/binda/application.js

@@ -17,9 +17,6 @@
 //= require jquery-ui/widgets/sortable
 //= require jquery-ui/widget
 
-// TinyMCE
-//= require tinymce-jquery
-
 // Bootstrap dependency 
 // https://v4-alpha.getbootstrap.com/components/tooltips/
 // require tether.min
@@ -36,6 +33,9 @@
 // GSAP/ScrollToPlugin.min
 // GSAP/TweenLite.min
 
+// TinyMCE
+//= require tinymce-jquery
+
 // Binda scripts
 //= require binda/dist/binda.bundle.js
 

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

@@ -2,8 +2,7 @@
  * BOOSTRAP SCRIPT
  */
 
-export default function() 
-{
+export default function() {
 	// See https://v4-alpha.getbootstrap.com/components/tooltips/#example-enable-tooltips-everywhere
-  $('[data-toggle="tooltip"]').tooltip()
-}
+	$('[data-toggle="tooltip"]').tooltip();
+}

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

@@ -2,17 +2,17 @@
  * FIELD GROUP EDITOR
  */
 
-export default function() 
-{
-	$('.field_groups-edit #save').on('click', function(event)
-	{
-		let instanceType = $(this).data('instance-type')
-		let entriesNumber = $(this).data('entries-number')
+export default function() {
+	$(".field_groups-edit #save").on("click", function(event) {
+		let instanceType = $(this).data("instance-type");
+		let entriesNumber = $(this).data("entries-number");
 
 		// If the current structure have many entries updating the field group
 		// might be a slow operation, therefore it's good practice to inform the user
-		if ( entriesNumber > 500 ) {
-			alert(`You have ${entriesNumber} ${instanceType}. This operation might take some time to complete. To avoid unexpected behaviour don't leave or refresh the page`)
+		if (entriesNumber > 500) {
+			alert(
+				`You have ${entriesNumber} ${instanceType}. This operation might take some time to complete. To avoid unexpected behaviour don't leave or refresh the page`
+			);
 		}
-	})
-}
+	});
+}

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

@@ -2,75 +2,87 @@
  * FORM ITEM CHOICE
  */
 
-import { _FormItemEditor } from './form_item_editor'
-
+import { _FormItemEditor } from "./form_item_editor";
 
 class FieldSettingChoices {
-	
-	constructor()
-	{
-		this.target = '.field-setting-choices--choice'
+	constructor() {
+		this.target = ".field-setting-choices--choice";
 	}
 
-	isSet()
-	{
-		if ( $( this.target ).length > 0 ) { return true }
-		else { return false }
+	isSet() {
+		if ($(this.target).length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	setEvents()
-	{
-		$(document).on('click', '.field-setting-choices--add-choice', addChoice )
-		
-		$(document).on('click', '.field-setting-choices--delete-choice', deleteChoice )
-		$(document).on('click', '.field-setting-choices--js-delete-choice', function( event )
-		{
-			event.preventDefault()
-			$( this ).closest('.field-setting-choices--choice').remove()
-			// Update form item editor size
-			_FormItemEditor.resize()
-		})
+	setEvents() {
+		$(document).on(
+			"click", 
+			".field-setting-choices--add-choice", 
+			addChoice
+		);
+
+		$(document).on(
+			"click",
+			".field-setting-choices--delete-choice",
+			deleteChoice
+		);
+
+		$(document).on(
+			"click",
+			".field-setting-choices--js-delete-choice",
+			function(event) {
+				event.preventDefault();
+				$(this)
+					.closest(".field-setting-choices--choice")
+					.remove();
+				// Update form item editor size
+				_FormItemEditor.resize();
+			}
+		);
 	}
 }
 
-export let _FieldSettingChoices = new FieldSettingChoices()
-
+export let _FieldSettingChoices = new FieldSettingChoices();
 
 /**
  * HELPER FUNCTIONS
  */
 
-function addChoice(event)
-{
-	event.preventDefault()
+function addChoice(event) {
+	event.preventDefault();
 	// Clone the new choice field
-	var choices_id = $( this ).data('choices-id')
-	var choices = $(`#${choices_id}`)
-	var newchoice = choices.find('.field-setting-choices--new-choice')
-	var clone = newchoice.clone().removeClass('field-setting-choices--new-choice').toggle()
-	clone.find('.field-setting-choices--toggle-choice').toggle()
+	var choices_id = $(this).data("choices-id");
+	var choices = $(`#${choices_id}`);
+	var newchoice = choices.find(".field-setting-choices--new-choice");
+	var clone = newchoice
+		.clone()
+		.removeClass("field-setting-choices--new-choice")
+		.toggle();
+	clone.find(".field-setting-choices--toggle-choice").toggle();
 	// Append the clone right after
-	choices.prepend( clone )
+	choices.prepend(clone);
 	// Update form item editor size
-	_FormItemEditor.resize()
+	_FormItemEditor.resize();
 }
 
+function deleteChoice(event) {
+	event.preventDefault();
 
-function deleteChoice( event )
-{
-	event.preventDefault()
-
-	var choice = $( this ).closest('.field-setting-choices--choice')
-	var destination = $( this ).attr('href')
-	var self = this
+	var choice = $(this).closest(".field-setting-choices--choice");
+	var destination = $(this).attr("href");
+	var self = this;
 
 	$.ajax({
 		url: destination,
-		type: 'DELETE',
-		success: function() { 
-			choice.remove()
-			// Update form item editor size
-			_FormItemEditor.resize()
-		}
-	})
-}
+		type: "DELETE"
+	}).done(function() {
+		choice.remove();
+		// Update form item editor size
+		_FormItemEditor.resize();
+	}).fail(function(data){
+		alert(data.responseJSON.errors);
+	});
+}

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

@@ -1,76 +1,70 @@
 /**
  * FILE UPLOAD
- * 
+ *
  * see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
- * 
+ *
  */
 
 class FileUpload {
-	
-	constructor(){
-		this.target = '.fileupload'
+	constructor() {
+		this.target = ".fileupload";
 	}
 
-	isSet()
-	{
-		if ( $( this.target ).length > 0 ) { return true }
-		else { return false }
+	isSet() {
+		if ($(this.target).length > 0) {
+			return true;
+		} else {
+			return false;
+		}
 	}
 
-	setEvents()
-	{
-		let self = this
+	setEvents() {
+		let self = this;
 
-		$(document).on('click', '.fileupload--remove-image-btn', remove_preview)
+		$(document).on("click", ".fileupload--remove-image-btn", remove_preview);
 
-		$(document).on('change', `${this.target} input.file`, handle_file)
+		$(document).on("change", `${this.target} input.file`, handle_file);
 	}
 }
 
-export let _FileUpload = new FileUpload()
-
+export let _FileUpload = new FileUpload();
 
 /**
  * HELPER FUNCTIONS
  */
 
 // Reference --> http://blog.teamtreehouse.com/uploading-files-ajax
-function handle_file(event) 
-{
-	let id = event.target.getAttribute('data-id')
-	let $parent = $('#fileupload-'+id)
+function handle_file(event) {
+	let id = event.target.getAttribute("data-id");
+	let $parent = $("#fileupload-" + id);
 
 	// Get the selected file from the input
 	// This script doesn't consider multiple files upload
-	let file = event.target.files[0]
+	let file = event.target.files[0];
 
 	// Don't go any further if no file has been selected
-	if ( typeof file === 'undefined' ) { return }
+	if (typeof file == "undefined") {
+		return;
+	}
 
 	// Create a new FormData object which will be sent to the server
-	let formData = new FormData()
+	let formData = new FormData();
 
 	// Get data from the input element
-	$parent.find('input').each(function()
-	{
-		if ( this.isSameNode(event.target) )
-		{
+	$parent.find("input").each(function() {
+		if (this.isSameNode(event.target)) {
 			// Add the file to the request
-			formData.append(this.getAttribute('name'), file, file.name)
+			formData.append(this.getAttribute("name"), file, file.name);
 		} else {
 			// Add secondary values to the request
-			formData.append(this.getAttribute('name'), this.getAttribute('value'))
+			formData.append(this.getAttribute("name"), this.getAttribute("value"));
 		}
-	})
+	});
 
 	// If it's inside a repeater add repeater parameters
-	let $parent_repeater = $parent.closest('.form-item--repeater-fields')
-	if ( $parent.closest('.form-item--repeater-fields').length > 0 )
-	{
-		$parent_repeater.children('.form-group').find('input').each(function()
-		{
-			formData.append(this.getAttribute('name'), this.getAttribute('value'))
-		})
+	let $parent_repeater = $parent.closest(".form-item--repeater-fields");
+	if ($parent.closest(".form-item--repeater-fields").length > 0) {
+		gatherData($parent_repeater, formData);
 	}
 
 	// Is this needed? Apparently it works without it. Is it a security issue?
@@ -78,117 +72,140 @@ function handle_file(event)
 	// formData.append('authenticity_token', token)
 
 	// Display loader
-	$('.popup-warning--message').text( $parent.data('message') )
-	$('.popup-warning').removeClass('popup-warning--hidden')
+	$(".popup-warning--message").text($parent.data("message"));
+	$(".popup-warning").removeClass("popup-warning--hidden");
 
 	// Once form data are gathered make the request
-	makeRequest(event, formData )
+	makeRequest(event, formData);
 }
 
+function gatherData($parent_repeater, formData) {
+	$parent_repeater
+		.children(".form-group")
+		.find("input")
+		.each(function() {
+			formData.append(this.getAttribute("name"), this.getAttribute("value"));
+		});
+}
 
-function makeRequest(event, formData ) 
-{
-	let id = event.target.getAttribute('data-id')
-	let $parent = $('#fileupload-'+id)
+function makeRequest(event, formData) {
+	let id = event.target.getAttribute("data-id");
+	let $parent = $("#fileupload-" + id);
 	// Make request
-	$.ajax(
-	{
-		url: event.target.getAttribute('data-url'), 
-		type: 'PATCH',
-	  processData: false, // needed to pass formData with the current format
-	  contentType: false, // needed to pass formData with the current format
+	$.ajax({
+		url: event.target.getAttribute("data-url"),
+		type: "PATCH",
+		processData: false, // needed to pass formData with the current format
+		contentType: false, // needed to pass formData with the current format
 		data: formData
-	}).done( function(data)
-	{
-		if ( data.type == 'image' ) { setup_image_preview(data, id) } 
-		else if ( data.type == 'video' ) { setup_video_preview(data, id) } 
-		else { alert('Something went wrong. No preview has been received.') }
-
-		// Hide loaded
-		$('.popup-warning').addClass('popup-warning--hidden')
-
-		// Display details and buttons
-		$parent.find('.fileupload--details').removeClass('fileupload--details--hidden')
-		$parent.find('.fileupload--remove-image-btn').removeClass('fileupload--remove-image-btn--hidden')
-	}).fail( function(dataFail)
-	{
-		console.error("Error:", dataFail.responseJSON)
-		// Hide loaded
-		$('.popup-warning').addClass('popup-warning--hidden')
-		alert($parent.data('error'))
 	})
+		.done(function(data) {
+			updateFileuploadField(data, id);
+		})
+		.fail(function(dataFail) {
+			// Hide loaded
+			$(".popup-warning").addClass("popup-warning--hidden");
+			alert($parent.data("error"));
+		});
 }
 
-function reset_file(input) 
-{	
-	input.value = ''
+function updateFileuploadField(data, id) {
+	let $parent = $("#fileupload-" + id);
 
-	if(!/safari/i.test(navigator.userAgent)){
-	  input.type = ''
-	  input.type = 'file'
+	if (data.type == "image") {
+		setup_image_preview(data, id);
+	} else if (data.type == "video") {
+		setup_video_preview(data, id);
+	} else {
+		alert("Something went wrong. No preview has been received.");
+	}
+
+	// Hide loaded
+	$(".popup-warning").addClass("popup-warning--hidden");
+
+	// Display details and buttons
+	$parent
+		.find(".fileupload--details")
+		.removeClass("fileupload--details--hidden");
+	$parent
+		.find(".fileupload--remove-image-btn")
+		.removeClass("fileupload--remove-image-btn--hidden");
+}
+
+function reset_file(input) {
+	input.value = "";
+
+	if (!/safari/i.test(navigator.userAgent)) {
+		input.type = "";
+		input.type = "file";
 	}
 }
 
-function remove_preview(event) 
-{
-	let id = event.target.getAttribute('data-id')
-	let $parent = $('#fileupload-'+id)
+function remove_preview(event) {
+	let id = event.target.getAttribute("data-id");
+	let $parent = $("#fileupload-" + id);
 
 	// Reset previews (either image or video)
-	$parent.find('.fileupload--preview').css('background-image','').removeClass('fileupload--preview--uploaded')
-	$parent.find('video source').removeAttr('src')
-	
-	// Clear input field 
-	reset_file( $parent.find('input[type=file]').get(0) )
+	$parent
+		.find(".fileupload--preview")
+		.css("background-image", "")
+		.removeClass("fileupload--preview--uploaded");
+	$parent.find("video source").removeAttr("src");
+
+	// Clear input field
+	reset_file($parent.find("input[type=file]").get(0));
 
 	// Reset buttons to initial state
-	$parent.find('.fileupload--remove-image-btn').addClass('fileupload--remove-image-btn--hidden')
-	$parent.find('.fileupload--details').addClass('fileupload--details--hidden')	
+	$parent
+		.find(".fileupload--remove-image-btn")
+		.addClass("fileupload--remove-image-btn--hidden");
+	$parent.find(".fileupload--details").addClass("fileupload--details--hidden");
 }
 
-function setup_image_preview(data, id)
-{
-	let $parent = $('#fileupload-'+id)
-	let $preview = $('#fileupload-'+id+' .fileupload--preview')
+function setup_image_preview(data, id) {
+	let $parent = $("#fileupload-" + id);
+	let $preview = $("#fileupload-" + id + " .fileupload--preview");
 
 	// Update thumbnail
-	$preview.css('background-image', `url(${data.thumbnailUrl})`)
+	$preview.css("background-image", `url(${data.thumbnailUrl})`);
 
 	// Remove and add class to trigger css animation
-	let uploadedClass = 'fileupload--preview--uploaded'
-	$preview.removeClass(uploadedClass).addClass(uploadedClass)
+	let uploadedClass = "fileupload--preview--uploaded";
+	$preview.removeClass(uploadedClass).addClass(uploadedClass);
 
 	// Update details
-	$parent.find('.fileupload--width').text(data.width)
-	$parent.find('.fileupload--height').text(data.height)
-	$parent.find('.fileupload--filesize').text(data.size)
-	$parent.find('.fileupload--filename').text(data.name)
+	$parent.find(".fileupload--width").text(data.width);
+	$parent.find(".fileupload--height").text(data.height);
+	$parent.find(".fileupload--filesize").text(data.size);
+	$parent.find(".fileupload--filename").text(data.name);
 }
 
-function setup_video_preview(data, id)
-{
-	let $parent = $('#fileupload-'+id)
-	let $preview = $('#fileupload-'+id+' .fileupload--preview')
-
-	$preview.removeClass('fileupload--preview--uploaded')
-	  .find('video')
-	  .attr('id', 'video-' + id)
-	  .find('source')
-	  .attr('src', data.url)
-	  .attr('type', 'video/' + data.ext)
-
-  // If video source isn't blank load it (consider that a video tag is always present)
-	if ( typeof $preview.find('video source').attr('src') != undefined )
-	{
-		$preview.find('video').get(0).load()
+function setup_video_preview(data, id) {
+	let $parent = $("#fileupload-" + id);
+	let $preview = $("#fileupload-" + id + " .fileupload--preview");
+
+	$preview
+		.removeClass("fileupload--preview--uploaded")
+		.find("video")
+		.attr("id", "video-" + id)
+		.find("source")
+		.attr("src", data.url)
+		.attr("type", "video/" + data.ext);
+
+	// If video source isn't blank load it (consider that a video tag is always present)
+	if (typeof $preview.find("video source").attr("src") != undefined) {
+		$preview
+			.find("video")
+			.get(0)
+			.load();
 	}
 
 	// Remove and add class to trigger css animation
-	let uploadedClass = 'fileupload--preview--uploaded'
-	$preview.removeClass(uploadedClass).addClass(uploadedClass)
+	let uploadedClass = "fileupload--preview--uploaded";
+	$preview.removeClass(uploadedClass).addClass(uploadedClass);
 
 	// Update details
-	$parent.find('.fileupload--filesize').text(data.size)
-	$parent.find('.fileupload--filename').text(data.name)
-	$parent.find('.fileupload--videolink a').attr('href', data.url)
-}
+	$parent.find(".fileupload--filesize").text(data.size);
+	$parent.find(".fileupload--filename").text(data.name);
+	$parent.find(".fileupload--videolink a").attr("href", data.url);
+}