binda 0.0.7 → 0.1.0

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

@@ -1,6 +1,6 @@
-///- - - - - - - - - - - - - - - - - - - -
-/// FORM ITEM
-///- - - - - - - - - - - - - - - - - - - -
+/**
+ * FORM ITEM EDITOR
+ */
 
 class FormItemEditor {
 	
@@ -26,14 +26,14 @@ class FormItemEditor {
 	resize()
 	{
 		$( this.target ).each( function(){
-			// If the form item edito is closed don't go any further
+			// 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).css( "max-height", $(this).removeAttr('style').height() )
+			$(this).get(0).style.height = 'auto'
+			$(this).get(0).style.maxHeight = $(this).get(0).scrollHeight + "px";
 		})
 	}
-
 }
 
 export let _FormItemEditor = new FormItemEditor()

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

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

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

@@ -1,31 +1,29 @@
-///- - - - - - - - - - - - - - - - - - - -
-/// FORM ITEM
-///- - - - - - - - - - - - - - - - - - - -
+/**
+ * FORM ITEM REPEATER
+ */
 
 import { _FormItemEditor } from './form_item_editor'
+import { setupSelect2 } from './select2' 
 
 class FormItemRepeater {
 	
-	constructor()
-	{
-		this.target = '.form-item--repeater-section'
-	}
+	constructor(){}
 
 	isSet()
 	{
-		if ( $( this.target ).length > 0 ) { return true }
+		if ( $('.form-item--repeater-section').length > 0 ) { return true }
 		else { return false }
 	}
 
 	setEvents()
 	{
-		$(document).on('click', this.target + '--add-new', addNewItem )
+		$(document).on('click', '.form-item--repeater-section--add-new', function(event){ addNewItem(this, event)} )
 		
 		$(document).on('click', '.form-item--remove-item-with-js', function( event )
 		{
 			// Stop default behaviour
 			event.preventDefault()
-			$( this ).parent( this.target ).remove()
+			$( this ).parent('.form-item--repeater-section').remove()
 			_FormItemEditor.resize()
 		})
 
@@ -34,13 +32,24 @@ class FormItemRepeater {
 			// Stop default behaviour
 			event.preventDefault()
 
+			// if ( !confirm($(this).data('confirm')) ) return
+			
+			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'	
+			// Change max-height after 50ms to trigger css animation
+			setTimeout( function(){ target.style.maxHeight = 0 + 'px'	}, 50)
+
 			$.ajax({
 				url: $( this ).attr('href'),
-				data: { id: $( this ).data('id'), isAjax: true },
+				data: { id: record_id, isAjax: true },
 				method: "DELETE"
 			}).done( ()=>{
-				$( this ).parent('li').remove()
-				_FormItemEditor.resize()
+				// Make sure the animation completes before removing the item (it should last 600ms + 50ms)
+				setTimeout( function(){ $(target).remove() }, 700)
+				// _FormItemEditor.resize()
 			})
 		})
 	}
@@ -49,25 +58,63 @@ class FormItemRepeater {
 export let _FormItemRepeater = new FormItemRepeater()
 
 
-///- - - - - - - - - - - - - - - - - - - -
-/// COMPONENT HELPER FUNCTIONS
-///- - - - - - - - - - - - - - - - - - - -
+/**
+ * COMPONENT HELPER FUNCTIONS
+ *
+ * @param      {string}  target  The target
+ * @param      {object}  event   The event
+ */
 
-function addNewItem( event ) 
+function addNewItem( target, event ) 
 {
 	// Stop default behaviour
 	event.preventDefault()
 	// Get the child to clone
-	let id = $( event.target ).data( 'id' )
+	let id = $( target ).data( 'id' )
 	let $list = $('#form-item--repeater-setting-' + id )
-	let url = $( event.target ).data( 'url' )
+	let url = $( target ).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
 		let parts = data.split('<!-- SPLIT -->')
 		let newRepeater = parts[1]
-		$list.append( newRepeater )
-		var editor_id = $list.find('textarea').last('textarea').attr('id')
-		tinyMCE.EditorManager.execCommand('mceAddEditor',true, editor_id);
-		_FormItemEditor.resize()
+
+		// Append the item
+		$list.prepend( newRepeater )
+		let 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
+		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)
 	})
 }

data/app/assets/javascripts/binda/components/login-shader.js

@@ -0,0 +1,193 @@
+class Shader {
+    constructor(){}
+
+    isSet()
+    {
+        if ( $('#background-shader').length > 0 ) { return true }
+        else { return false }
+    }
+
+    // SETUP SHADER
+    setup () {
+
+        let Container          = PIXI.Container,
+            autoDetectRenderer = PIXI.autoDetectRenderer,
+            loader             = PIXI.loader,
+            resources          = PIXI.loader.resources,
+            Sprite             = PIXI.Sprite
+
+        // Create a container object called the `stage`
+        this.stage    = new Container()
+
+        // Create 'renderer'
+        this.renderer = PIXI.autoDetectRenderer( window.innerWidth, window.innerHeight )
+
+        // //Add the canvas to the HTML document
+
+        document.getElementById('background-shader').appendChild(this.renderer.view)
+
+
+        this.renderer.backgroundColor     = 0xFF00FF
+
+        // canvas full window
+        this.renderer.view.style.position = "fixed"
+        this.renderer.view.style.display  = "block"
+
+        let fragmentShader = document.getElementById("fragmentShader").innerHTML
+
+        let currentTime = Math.sin( Date.now() ) + 0.5
+
+        this.uniforms = {
+            uTime        : { type: '1f', value: 0.0 },
+            uCurrentTime : { type: '1f', value: currentTime },
+            uMouse       : { type: '2f', value: [ window.innerWidth, window.innerHeight ] },
+            uWindowSize  : { type: '2f', value: [ window.innerWidth, window.innerHeight ] }
+        }
+
+        this.customShader = new PIXI.AbstractFilter(null, fragmentShader, this.uniforms)
+        this.drawRectagle()
+    }
+
+
+    // DRAW RECTANGLE
+    drawRectagle() {
+
+        this.rectangle = new PIXI.Graphics()
+
+        // Set the default background color wo if browser doesn't support the filter we still see the primary color
+        let colorWithHash = '#FF00FF'
+        const colorWith0x = '0x' + colorWithHash.slice( 1, 7 )
+        this.rectangle.beginFill( colorWith0x )
+
+        // Create the background rectanlge
+        this.rectangle.drawRect( 0, 0, window.innerWidth, window.innerHeight )
+        this.rectangle.endFill()
+
+        // Setup the filter (shader)
+        this.rectangle.filters = [ this.customShader ]
+
+        // Add background to stage
+        this.stage.addChild( this.rectangle )
+    }
+
+
+    // START ANIMATION
+    start() { animate() }
+
+
+    // MOUSE UPDATE
+    mouseUpdate( event ) {
+
+        // If uniforms haven't been set yet don't do anything and exit
+        if ( typeof this.uniforms === 'undefined' ) return
+
+        // udpate mouse coordinates for the shader
+        this.customShader.uniforms.uMouse = [ event.pageX, event.pageY ]
+    }
+
+
+    // RESIZE
+    resize() {
+
+        // let scale = scaleToWindow( this.renderer.view )
+        let prevWidth  = this.renderer.view.style.width
+        let prevHeight = this.renderer.view.style.height
+        this.renderer.view.style.width    = window.innerWidth + "px"
+        this.renderer.view.style.height   = window.innerHeight + "px"
+        this.customShader.uniforms.uWindowSize = [ window.innerWidth, window.innerHeight ]
+
+        // Plese check this out ↴↴↴
+        // this.rectangle.scale.x = window.innerWidth / prevWidth
+        // this.rectangle.scale.y = window.innerHeight / prevHeight
+    }
+}
+
+
+export let _Shader = new Shader()
+
+
+// ANIMATE
+// -------
+function animate() {
+
+    // start the timer for the next animation loop
+    requestAnimationFrame( animate )
+    _Shader.customShader.uniforms.uTime += 0.01
+    // this is the main render call that makes pixi draw your container and its children.
+    _Shader.renderer.render( _Shader.stage )
+}
+
+// CONVERT HEX TO RGB COLORS
+// -------------------------
+function hexToShaderRgb( hex ) {
+
+    // Precision of the float number
+    var precision = 100
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b
+    })
+
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+        // Get a number between 0.00 and 1.00
+        r: Math.round( parseInt(result[1], 16) * precision / 255 ) / precision,
+        g: Math.round( parseInt(result[2], 16) * precision / 255 ) / precision,
+        b: Math.round( parseInt(result[3], 16) * precision / 255 ) / precision
+    } : null;
+}
+
+
+// REQUEST ANIMATION POLYFILL
+// --------------------------
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+// MIT license
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+                timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
+
+
+// Mozilla MDN optimized resize
+// https://developer.mozilla.org/en-US/docs/Web/Events/resize
+(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+            requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+

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

@@ -0,0 +1,116 @@
+/**
+ * LOGIN FORM
+ * 
+ * https://tympanus.net/Development/MinimalForm/
+ * https://github.com/codrops/MinimalForm/blob/master/js/stepsForm.js
+ */
+
+class LoginForm {
+
+  constructor()
+  {
+  	this.current = 0
+  	this.isFilled = false
+  }
+
+  isSet()
+  {
+    if ( $('.login--form').length > 0 ) { return true }
+    else { return false }
+  }
+
+  setEvents () 
+  {
+  	this.$form = $('.login--form')
+  	this.$questions = $('ol.login--questions > li')
+  	this.questionsCount = this.$questions.length
+		this.$nextButton = $('button.login--next')
+
+		// Mark the first question as the current one
+  	this.$questions.first().addClass('login--current')
+		
+		//disable form autocomplete
+		this.$form.attr('autocomplete', 'off')
+
+		let self = this
+	
+
+		// first input
+		let firstInput = this.$questions.get(this.current).querySelector( 'input, textarea, select' )
+
+		// focus
+		let onFocusStart = function() 
+		{
+			firstInput.removeEventListener( 'focus', onFocusStart )
+			self.$nextButton.addClass('login--show')
+		}
+		// show the next question control first time the input gets focused
+		firstInput.addEventListener('focus', onFocusStart )
+
+		// show next question
+		this.$nextButton.on('click', function( event ) 
+		{
+			event.preventDefault()
+			self._nextQuestion()
+		} )
+
+		// pressing enter will jump to next question
+		this.$form.on('keydown', function( event ) 
+		{
+			let keyCode = event.keyCode || event.which
+			// enter
+			if( keyCode === 13 ) 
+			{
+				event.preventDefault()
+				self._nextQuestion()
+			}
+		})
+  }
+
+  _nextQuestion() 
+  {
+		// check if form is filled
+		if( this.current === this.questionsCount - 1 ) 
+		{
+			this.isFilled = true
+		}
+
+  	// current question
+		let currentQuestion = this.$questions.get(this.current)
+
+		// increment current question iterator
+		++this.current
+
+		if( !this.isFilled ) 
+		{
+			// add class "show-next" to form element (start animations)
+			this.$form.addClass('login--show-next')
+
+			// remove class "current" from current question and add it to the next one
+			// current question
+			var nextQuestion = this.$questions.get(this.current)
+			$(currentQuestion).removeClass('login--current')
+			$(nextQuestion).addClass('login--current')
+		}
+
+		// after animation ends, remove class "show-next" from form element and change current question placeholder
+		let self = this
+		let onEndTransition = function() 
+		{
+			if( self.isFilled ) 
+			{
+				self.$form.submit()
+			}
+			else 
+			{
+				self.$form.removeClass('login--show-next')
+				// force the focus on the next input
+				nextQuestion.querySelector( 'input, textarea, select' ).focus()
+			}
+		}
+
+		setTimeout( onEndTransition, 400 ) // Wait for CSS transition to complete
+	}
+}
+
+export let _LoginForm = new LoginForm()