binda 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9698551271bf5efe2fbaa045f9fd93b6c5edf49b
-  data.tar.gz: 7e4772d16ce867877f8059f31c66648aebdb8700
+  metadata.gz: 380a6ee6ba0e7fad66075ccd4f6d35f79b7946d3
+  data.tar.gz: 04d50e53a323cff2202b6ea28fc422eed13d625c
 SHA512:
-  metadata.gz: 23a18574bd5b641433165fd1954bf3a52e65aa44d5b98be39bbb8554d2813756b054461e8e41fc6c69769fe6701cb4d22bcb7c082c097765c24c452794242c50
-  data.tar.gz: d1a3ca511d47479cd569e9fd716afed73183d391085994a752ffa32c9fc62756ca14a15c2b631d793accc60632c8e8e0b2b1adcbc059787d5eb84464a1c11f58
+  metadata.gz: 668e07be1cf3f3c424b79d48c0dbd17698a6f7919870dd0121b8efde2cb9e327f01517f4b5702284dfb31f6fc8960bcef1f4e160be96bd832d046f86199d6f52
+  data.tar.gz: c5d557f08401dd999c81162bc7cad8f375b75f079d0ff22c75d824ca6e9840de555d51e0a58661ab6415435919f1dbde3dcb072aaa74e651e9bf0bd877632904

data/README.md

@@ -3,7 +3,6 @@ A modular CMS for Ruby on Rails 5.1.
 
 [![Gem Version](https://badge.fury.io/rb/binda.svg)](https://badge.fury.io/rb/binda)
 [![Code Climate](https://codeclimate.com/github/lacolonia/binda/badges/gpa.svg)](https://codeclimate.com/github/lacolonia/binda)
-[![Build Status](https://travis-ci.org/a-barbieri/binda.svg?branch=master)](https://travis-ci.org/lacolonia/binda)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/5dc62774a6b8b63aa72b/test_coverage)](https://codeclimate.com/github/lacolonia/binda/test_coverage)
 [![Dependency Status](https://gemnasium.com/badges/github.com/lacolonia/binda.svg)](https://gemnasium.com/github.com/lacolonia/binda)
 [![Inline docs](http://inch-ci.org/github/lacolonia/binda.svg?branch=master)](http://inch-ci.org/github/lacolonia/binda)
@@ -430,30 +429,30 @@ You can retrieve field content from a instance of `Binda::Component`, `Binda::Bo
 
 | Helper |||
 |---|---|---|
-| `has_text`| Returns `true/false` | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_text) |
-| `get_text`| Returns the text. Use [`simple_format`](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format) to maintain HTML tags. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_text) |
-| `has_string`| Returns `true/false`. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_string) |
-| `get_string`| Returns the text. Use [`simple_format`](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format) to maintain HTML tags. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_string) |
-|`has_image`| Returns `true/false`.| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_image) |
-|`get_image_url(size)`| Returns the url of the image. A thumbnail version (200x200) by specifying `thumb` size. If no size is provided the method will return the original image size. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_url) |
-|`get_image_path(size)`| Returns the path of the image. A thumbnail version (200x200) by specifying `thumb` size. If no size is provided the method will return the original image size. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_path) |
-|`get_image_size`| Returns the image size in MB. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_size) |
-|`get_image_dimension`| Returns a hash { width: xxx, height: xxx } with image dimension. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_dimension) |
-|`get_image_mime_type`| Returns the mime type of the image. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_mime_type) |
-|`has_video`| Returns `true/false`.| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_video) |
-|`get_video_url`| Returns the url of the video. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_video_url) |
-|`get_video_path`| Returns the path of the video. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_image_path) |
-|`has_date`| Returns `true/false` | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_date) |
-|`get_date`| Returns the date in `datetime` format. Use [`strftime`](https://apidock.com/rails/ActiveSupport/TimeWithZone/strftime) to change date format. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_date) |
-|`has_repeaters`| Returns `true/false`| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_repeaters) |
-|`get_repeaters`| Returns an array of repeaters. See next session for more details. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_repeaters) |
-|`get_selection_choices`| Returns an hash with label and value of the selected choice. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_selection_choices) |
-|`get_radio_choice`| Returns an hash with label and value of the selected choice. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_radio_choice) |
-|`get_checkbox_choices`| Returns an array of label/value pairs of all the selected choices. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:get_checkbox_choices) |
-|`has_related_components`| Check if has related components. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_related_components) |
-|`get_related_components`| Retrieve related components. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_related_components) |
-|`has_related_boards`| Check if has related boards. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_related_boards) |
-|`get_related_boards`| Retrieve related boards. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociations:has_related_boards) |
+| `has_text`| Returns `true/false` | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_text) |
+| `get_text`| Returns the text. Use [`simple_format`](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format) to maintain HTML tags. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_text) |
+| `has_string`| Returns `true/false`. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_string) |
+| `get_string`| Returns the text. Use [`simple_format`](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format) to maintain HTML tags. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_string) |
+|`has_image`| Returns `true/false`.| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_image) |
+|`get_image_url(size)`| Returns the url of the image. A thumbnail version (200x200) by specifying `thumb` size. If no size is provided the method will return the original image size. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_url) |
+|`get_image_path(size)`| Returns the path of the image. A thumbnail version (200x200) by specifying `thumb` size. If no size is provided the method will return the original image size. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_path) |
+|`get_image_size`| Returns the image size in MB. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_size) |
+|`get_image_dimension`| Returns a hash { width: xxx, height: xxx } with image dimension. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_dimension) |
+|`get_image_mime_type`| Returns the mime type of the image. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_mime_type) |
+|`has_video`| Returns `true/false`.| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_video) |
+|`get_video_url`| Returns the url of the video. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_video_url) |
+|`get_video_path`| Returns the path of the video. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_image_path) |
+|`has_date`| Returns `true/false` | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_date) |
+|`get_date`| Returns the date in `datetime` format. Use [`strftime`](https://apidock.com/rails/ActiveSupport/TimeWithZone/strftime) to change date format. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_date) |
+|`has_repeaters`| Returns `true/false`| [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_repeaters) |
+|`get_repeaters`| Returns an array of repeaters. See next session for more details. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_repeaters) |
+|`get_selection_choices`| Returns an hash with label and value of the selected choice. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_selection_choices) |
+|`get_radio_choice`| Returns an hash with label and value of the selected choice. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_radio_choice) |
+|`get_checkbox_choices`| Returns an array of label/value pairs of all the selected choices. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:get_checkbox_choices) |
+|`has_related_components`| Check if has related components. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_related_components) |
+|`get_related_components`| Retrieve related components. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_related_components) |
+|`has_related_boards`| Check if has related boards. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_related_boards) |
+|`get_related_boards`| Retrieve related boards. | [source](http://www.rubydoc.info/gems/binda/Binda/FieldableAssociationHelpers:has_related_boards) |
 
 If you need to get each dependent of all relations with a specified slug (or slugs) you can use `B.get_relation_dependents` helper. This is very useful to retrieve only the instances which have a owner (and therefore are 'dependents'). 
 
@@ -934,9 +933,26 @@ Same thing can be done on linux usign another binary code (see [documentation](h
 
 
 
+# Binda versioning
+
+It's possible to test edge versions of Binda on real projects. Edge versions can be found only in the github repository and can be referenced by tag.
+
+For example once `v0.1.0` is published any new edge release which can be considered stable enough for a real project is tagged with alpha or beta (`v0.1.1.alpha`, `v0.1.1.alpha.1`, `v0.1.1.beta`, etc). These tags won't change and won't be removed so you can safely add them to you gemfile like so:
+
+```ruby
+gem 'binda', github: 'lacolonia/binda', ref: 'v0.1.1.alpha.1'
+```
+
+The same tag is listed as the gem version, but it's not published to Rubygems.
+
+More info can be found at the [semantic versioning documentation](https://semver.org/spec/v2.0.0-rc.1.html).
+---
+
+
+
 ### Bug reporting
 Please refer to this [guide](http://yourbugreportneedsmore.info).
-If you need direct help you can join [Binda Slack Community](https://bindacms.slack.com).
+If you need direct help you can join [Binda Slack Channel](https://bindacms.slack.com).
 
 
 ### License

data/Rakefile

@@ -14,6 +14,10 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
+# https://www.viget.com/articles/rails-engine-testing-with-rspec-capybara-and-factorygirl/
+# Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
+# require 'rspec/core'
+
 APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
 load 'rails/tasks/engine.rake'
 

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

@@ -27,6 +27,9 @@
 // Select2
 //= require select2/select2.full.min
 
+// Lodash
+//= require lodash
+
 // TweenLite
 // GSAP/CSSPlugin.min
 // GSAP/EasePack.min

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

@@ -2,14 +2,14 @@
  * FORM ITEM CHOICE
  */
 
-import { _FormItemEditor } from "./form_item_editor";
+import { resizeCollapsableStacks } from "./form_item_collapsable";
 
 class FieldSettingChoices {
 	constructor() {
 		this.target = ".field-setting-choices--choice";
 	}
 
-	isSet() {
+	isPresent() {
 		if ($(this.target).length > 0) {
 			return true;
 		} else {
@@ -39,7 +39,7 @@ class FieldSettingChoices {
 					.closest(".field-setting-choices--choice")
 					.remove();
 				// Update form item editor size
-				_FormItemEditor.resize();
+				resizeCollapsableStacks();
 			}
 		);
 	}
@@ -65,7 +65,7 @@ function addChoice(event) {
 	// Append the clone right after
 	choices.prepend(clone);
 	// Update form item editor size
-	_FormItemEditor.resize();
+	resizeCollapsableStacks();
 }
 
 function deleteChoice(event) {
@@ -81,7 +81,7 @@ function deleteChoice(event) {
 	}).done(function() {
 		choice.remove();
 		// Update form item editor size
-		_FormItemEditor.resize();
+		resizeCollapsableStacks();
 	}).fail(function(data){
 		alert(data.responseJSON.errors);
 	});

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

@@ -10,7 +10,7 @@ class FileUpload {
 		this.target = ".fileupload";
 	}
 
-	isSet() {
+	isPresent() {
 		if ($(this.target).length > 0) {
 			return true;
 		} else {

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

@@ -0,0 +1,245 @@
+/**
+ * FORM ITEM
+ */
+
+import { setupSelect2 } from "./select2";
+
+// Component Global Variables
+let newFormItemId = 1;
+
+class FormItemCollapsable {
+	constructor() {}
+
+	isPresent() {
+		if ($(".form--list").length > 0) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	setEvents() {
+		$(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();
+	}
+}
+
+export let _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
+	let id = $(this).data("id");
+	let $list = $("#form--list-" + id);
+	let url = $(this).data("url");
+	let data = $list.sortable("serialize");
+	let 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
+		let parts = data.split("<!-- SPLIT -->");
+		let 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);
+	let collapsable = $list.find(".form-item--collapsable").get(0);
+
+	// Update select input for Select2 plugin
+	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
+ */
+export 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
+ */
+export 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();
+	let $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();
+	let record_id = $(this).data("id");
+	let targetId = `#form--list-item-${record_id}`;
+	let 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.
+ */
+export 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) {
+	let editor_ids = _.map(tinyMCE.editors, editor => {
+			return editor.id;
+		})
+	// console.log({editors});
+	$textareas.each(function() {
+		if (_.includes(editor_ids, this.getAttribute('id'))){
+			return;
+		}		
+		tinyMCE.init({
+		  selector: `#${this.getAttribute("id")}`
+		});
+	});
+}

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

@@ -7,7 +7,7 @@ class FormItemImage {
 		this.target = ".form-item--image--uploader";
 	}
 
-	isSet() {
+	isPresent() {
 		if ($(this.target).length > 0) {
 			return true;
 		} else {

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

@@ -14,7 +14,7 @@ class Shader {
     };
   }
 
-  isSet() {
+  isPresent() {
     if ($("#background-shader").length > 0) {
       return true;
     } else {

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

@@ -11,7 +11,7 @@ class LoginForm {
 		this.isFilled = false;
 	}
 
-	isSet() {
+	isPresent() {
 		if ($(".login--form").length > 0) {
 			return true;
 		} else {