binda 0.0.7 → 0.1.0

data/Rakefile

@@ -24,21 +24,9 @@ load 'rails/tasks/statistics.rake'
 require 'bundler/gem_tasks'
 
 
-
-# # I guess this generate test file every time you use `rails g` command
-# require 'rake/testtask'
-# Rake::TestTask.new(:test) do |t|
-#   t.libs << 'lib'
-#   t.libs << 'test'
-#   t.pattern = 'test/**/*_test.rb'
-#   t.verbose = false
-#   t.warning = false
-# end
-# task default: :test
-
 # This should ensure creation of spec instead of test (partially true)
 # https://stackoverflow.com/a/4632188/1498118
 require 'rspec/core/rake_task'
 RSpec::Core::RakeTask.new('spec')
 # If you want to make this the default task
-task default: :spec
+task default: :spec

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

@@ -11,8 +11,31 @@
 // about supported directives.
 //
 
+// JQuery
 //= require jquery
 //= require jquery_ujs
 //= 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
+
+// Bootstrap
+//= require bootstrap/bootstrap-sprockets
+
+// Select2
+//= require select2/select2.full.min
+
+// TweenLite
+// GSAP/CSSPlugin.min
+// GSAP/EasePack.min
+// GSAP/ScrollToPlugin.min
+// GSAP/TweenLite.min
+
+// Binda scripts
 //= require binda/dist/binda.bundle.js
+

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * 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')
+
+		// 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`)
+		}
+	})
+}

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

@@ -0,0 +1,182 @@
+/**
+ * FILE UPLOAD
+ * 
+ * see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
+ * 
+ */
+
+class FileUpload {
+	
+	constructor(){
+		this.target = '.fileupload'
+	}
+
+	isSet()
+	{
+		if ( $( this.target ).length > 0 ) { return true }
+		else { return false }
+	}
+
+	setEvents()
+	{
+		let self = this
+
+		$(document).on('click', '.fileupload--remove-image-btn', remove_preview)
+
+		$(document).on('change', `${this.target} input.file`, handle_file)
+	}
+}
+
+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)
+	let $preview = $('#fileupload-'+id+' .fileupload--preview')
+
+	// Get the selected file from the input
+	// This script doesn't consider multiple files upload
+	let file = event.target.files[0]
+
+	// Don't go any further if no file has been selected
+	if ( typeof file === 'undefined' ) { return }
+
+	// Create a new FormData object which will be sent to the server
+	let formData = new FormData()
+
+	// Get data from the input element
+	$parent.find('input').each(function()
+	{
+		if ( this.isSameNode(event.target) )
+		{
+			// Add the file to the request
+			formData.append(this.getAttribute('name'), file, file.name)
+		} else {
+			// Add secondary values to the request
+			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'))
+		})
+	}
+
+	// Is this needed? Apparently it works without it. Is it a security issue?
+	// let token = document.querySelector('meta[name="csrf-token"]').content
+	// formData.append('authenticity_token', token)
+
+	// Display loader
+	$('.popup-warning').removeClass('popup-warning--hidden')
+
+	// Open the connection
+	$.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()
+	{
+		// Hide loaded
+		$('.popup-warning').addClass('popup-warning--hidden')
+		alert('Something went wrong. Upload process failed.')
+	})
+}
+
+function reset_file(event) 
+{
+	let input = event.target
+	
+	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)
+
+	// Reset previews (either image or video)
+	$parent.find('.fileupload--preview').css('background-image','').removeClass('fileupload--preview--uploaded')
+	$parent.find('video source').attr('src', '')
+
+	// 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')	
+}
+
+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})`)
+
+	// Remove and add class to trigger css animation
+	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)
+}
+
+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 ( $preview.find('video source').attr('src').length > 0 )
+	{
+		$preview.find('video').get(0).load()
+	}
+
+	// Remove and add class to trigger css animation
+	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)
+}

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

@@ -1,45 +1,78 @@
-///- - - - - - - - - - - - - - - - - - - -
-/// FORM ITEM
-///- - - - - - - - - - - - - - - - - - - -
+/**
+ * FORM ITEM
+ */
 
 import { _FormItemEditor } from './form_item_editor'
+import { setupSelect2 } from './select2' 
+
+// Component Global Variables
+let newFormItemId = 1
 
 class FormItem {
 	
-	constructor()
-	{
-		this.target = '.form-item'
-	}
+	constructor(){}
 
 	isSet()
 	{
-		if ( $( this.target ).length > 0 ) { return true }
+		if ( $('.form-item').length > 0 ) { return true }
 		else { return false }
 	}
 
 	setEvents()
 	{
-		$(document).on('click', this.target + '--add-new', addNewItem )
+		$(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 ).parent( this.target ).remove()
+			$( this ).closest('.form-item').remove()
+		})
+
+		$(document).on('click', '.form-item--collapse-btn', function( 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.removeClass('form-item--collapsed')
+			}
+			else
+			{
+				$collapsable.find('.form-item--repeater-fields').each(close)
+				$collapsable.addClass('form-item--collapsed')
+			}
 		})
 
-		$(document).on('click', '.form-item--open-button, .form-item--close-button', function()
+		$(document).on('click', '.form-item--toggle-button', function()
 		{
-			var formItemEditor = $( this ).parent('.form-item').children('.form-item--editor')
 
-			// Make sure form-item--editor max-height correspond to the actual height
-			// this is needed for the CSS transition which is trigger clicking open/close button
-			if ( !formItemEditor.hasClass('form-item--editor-close') )
-				{ _FormItemEditor.resize() }
+			let $formItem = $( this ).closest('.form-item')
+			let $formItemEditor = $formItem.children('.form-item--editor')
+
+			if ( $formItemEditor.get(0).style.maxHeight === '' ) 
+			{
+				// Update height
+				$formItemEditor.get(0).style.maxHeight = $formItemEditor.get(0).scrollHeight + "px";
 
-			// Update classes
-			formItemEditor.toggleClass('form-item--editor-close')
-			$( this ).parent('.form-item').children('.form-item--open-button, .form-item--close-button').toggle()
+				// Add class to trigger animation
+				$formItem.children('.form-item--toggle-button').removeClass('form-item--toggle-button-closed')
+			}
+			else
+			{
+				// Zero height
+				$formItemEditor.get(0).style.maxHeight = null;
+		      
+				// Add class to trigger animation
+				$formItem.children('.form-item--toggle-button').addClass('form-item--toggle-button-closed')
+			}
 		})
 	}
 }
@@ -51,15 +84,50 @@ export let _FormItem = new FormItem()
 /// COMPONENT HELPER FUNCTIONS
 ///- - - - - - - - - - - - - - - - - - - -
 
-function addNewItem( event ) 
+// 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
-	let id = $( event.target ).data( 'new-child-id' )
+	// 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 )
 	// Clone child and remove id and styles from cloned child
 	$newChild.clone().insertAfter( $newChild )
-	$newChild.removeClass( 'form-item--new' ).removeAttr( 'id' )
+	// 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(){
+		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')
+
+	// override current max-height which is set to 0
+	$formItemEditor.get(0).style.maxHeight = $formItemEditor.get(0).scrollHeight + "px";
+
 	_FormItemEditor.resize()
+
+	// Increment global id variable `newFormItemId` in case needs to be used again
+	newFormItemId++
+
+	setupSelect2( $formItemEditor.find('select') )
+}
+
+function close()
+{
+	this.style.maxHeight = '0px'
+}
+
+function open()
+{
+	this.style.maxHeight = this.scrollHeight + "px";
 }

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

@@ -1,6 +1,6 @@
-///- - - - - - - - - - - - - - - - - - - -
-/// FORM ITEM
-///- - - - - - - - - - - - - - - - - - - -
+/**
+ * FORM ITEM CHOICE
+ */
 
 import { _FormItemEditor } from './form_item_editor'
 
@@ -24,7 +24,7 @@ class FormItemChoice {
 		{
 			event.preventDefault()
 			// Clone the new choice field
-			var choices = $( this ).parent('.form-item--choices')
+			var choices = $( this ).closest('.form-item--choices')
 			var newchoice = choices.find('.form-item--new-choice')
 			var clone = newchoice.clone().removeClass('form-item--new-choice').toggle()
 			clone.find('.form-item--toggle-choice').toggle()
@@ -38,19 +38,26 @@ class FormItemChoice {
 		{
 			event.preventDefault()
 
-			var choice = $( this ).parent('.form-item--choice')
+			var choice = $( this ).closest('.form-item--choice')
 			var destination = $( this ).attr('href')
-			
+			var self = this
+
 			$.ajax({
 				url: destination,
 				type: 'DELETE',
-				success: function() { choice.remove() }
+				success: function() { 
+					choice.remove()
+					// Update form item editor size
+					_FormItemEditor.resize()
+				}
 			})
 		})
 		$(document).on('click', '.form-item--js-delete-choice', function( event )
 		{
 			event.preventDefault()
-			$( this ).parent('.form-item--choice').remove() 
+			$( this ).closest('.form-item--choice').remove()
+			// Update form item editor size
+			_FormItemEditor.resize()
 		})
 	}
 }