Lottie component

.dockerignore

@@ -1,2 +1 @@
-node_modules
-**/node_modules
+*

Dockerfile

@@ -1,4 +1,4 @@
-FROM php:8.2.11-apache
+FROM php:8.3-apache
 
 ARG UNAME=www-data
 ARG UGROUP=www-data

README.md

@@ -3,9 +3,9 @@
 <p align="center">
   <img src="https://www.vvveb.com/admin/themes/default/img/biglogo.png" alt="Vvveb">
   <br><br>
-  <strong>Drag and drop website builder javascript library.</strong>
+  <strong>Drag and drop page builder javascript library.</strong>
   <br>
-  <span>Built with Vanilla Js with no dependencies and Bootstrap 5</span>
+  <span>Built with Vanilla Js with no dependencies or build tools and Bootstrap 5</span>
 </p>
 <p align="center">
   <a href="https://www.vvveb.com">Website</a> |
@@ -75,13 +75,33 @@ Because of browser iframe security you need to use a webserver such as apache/xa
 To use the image upload or page save feature you need to have php installed.
 
 
+## Docker
+
+### Local development
+
+From VvvebJs folder run
+
+```bash
+docker-compose up
+```
+
+### Image 
+
+Or run image 
+
+```bash
+docker run -p 8080:80 vvveb/vvvebjs
+```
+
+Open http://localhost:8080/editor.php or http://localhost:8080/editor.html
+
 ## Save page
 
 Save page function needs either php or node
 
 ### PHP
 
-If you use xampp or a shared hosting account php should work without any change.
+If you use docker, xampp or a shared hosting account php should work without any change.
 
 Saving is done using [save.php](save.php)
 
@@ -98,15 +118,6 @@ Open http://localhost:8080/editor.html
 
 Saving is done using [save.js](save.js)
 
-### Docker
-
-From VvvebJs folder run
-
-```bash
-docker-compose up
-```
-
-Open http://localhost:8080/editor.php
 
 ## [Landing template](https://github.com/givanz/landing)
 

css/vvvebjs-editor-helpers.css

@@ -56,6 +56,7 @@ body {
 /*
 Prevents iframe mouse events that prevents clicking on the component  
  */
+[data-component-lottie] > svg,
 [data-component-oembed] > iframe,
 [data-component-video] > iframe,
 [data-component-maps] > iframe,

libs/builder/builder.js

@@ -3412,7 +3412,7 @@ Vvveb.FileManager = {
 
 			//allow event to change page or cancel by setting page to false
 			window.dispatchEvent(new CustomEvent("vvveb.FileManager.deletePage", {
-				detail: page,
+				detail: page
 			}));
 
 			if (page) {
@@ -3450,7 +3450,7 @@ Vvveb.FileManager = {
 
 			//allow event to change page or newfile or cancel by setting page to false
 			window.dispatchEvent(new CustomEvent("vvveb.FileManager.renamePage", {
-				detail: page,
+				detail: {page, newfile}
 			}));
 
 			if (page) {

libs/builder/components-widgets.js

@@ -16,7 +16,7 @@ limitations under the License.
 https://github.com/givanz/VvvebJs
 */
 
-Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", "widgets/chartjs",/* "widgets/facebookpage", */"widgets/paypal", /*"widgets/instagram",*/ "widgets/twitter", "widgets/openstreetmap"/*, "widgets/facebookcomments"*/];
+Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", "widgets/chartjs", "widgets/lottie",/* "widgets/facebookpage", */"widgets/paypal", /*"widgets/instagram",*/ "widgets/twitter", "widgets/openstreetmap"/*, "widgets/facebookcomments"*/];
 
 Vvveb.Components.extend("_base", "widgets/googlemaps", {
     name: "Google Maps",
@@ -749,3 +749,91 @@ Vvveb.Components.extend("_base", "widgets/chartjs", {
 		}
 	 }]
 });
+
+function lottieAfterDrop(node) {
+	//check if lottie js is included and if not add it when drag starts to allow the script to load
+	body = Vvveb.Builder.frameBody;
+
+	if (!body.querySelector("#lottie-js")) {
+		let lib = document.createElement('script');
+		let code = document.createElement('script');
+		lib.id = 'lottie-js';
+		lib.type = 'text/javascript';
+		lib.src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js';
+		code.type = 'text/javascript';
+		code.text = `
+		let lottie = [];
+		function initLottie(onlyNew = false) {
+			if (typeof bodymovin == "undefined") return;
+			
+			
+			let list = document.querySelectorAll('.lottie' + (onlyNew ? ":not(.lottie-initialized)" : "") );
+			list.forEach(el => {
+				el.replaceChildren();
+				let animItem = bodymovin.loadAnimation({
+				  wrapper: el,
+				  animType: 'svg',
+				  loop: (el.dataset.loop  == "true" ? true : false),
+				  autoplay: (el.dataset.autoplay == "true" ? true : false),
+				  path: el.dataset.path
+				});
+				
+			});
+		}
+
+		if (document.readyState !== 'loading') {
+			initLottie();
+		  } else {
+			document.addEventListener('DOMContentLoaded', initLottie);
+		  }`;			
+
+		body.appendChild(lib);
+		body.appendChild(code);
+
+		lib.addEventListener('load', function() {		
+			Vvveb.Builder.iframe.contentWindow.initLottie();
+		});
+	} else {
+		Vvveb.Builder.iframe.contentWindow.initLottie(true);
+	}
+
+	return node;
+};
+
+Vvveb.Components.add("widgets/lottie", {
+    name: "Lottie",
+    image: "icons/lottie.svg",
+    attributes: ["data-component-lottie"],
+    html: `
+	  <div class="lottie" data-component-lottie data-path="https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json" data-loop="true" data-autoplay="true">
+	  </div>	
+	`,
+	afterDrop: lottieAfterDrop,
+
+    onChange: function (node, property, value) {
+		Vvveb.Builder.iframe.contentWindow.initLottie();
+		Vvveb.Builder.selectNode(node);
+		return node;
+	},	
+
+    properties: [{
+		name: "Path",
+        key: "path",
+        //inputtype: ImageInput,
+        inputtype: TextInput,
+		htmlAttr:"data-path",
+	},{
+		name: "Autoplay",
+        key: "autoplay",
+		htmlAttr:"data-autoplay",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	},{	name: "Loop",
+        key: "loop",
+		htmlAttr:"data-loop",
+		inputtype: CheckboxInput,
+		inline:true,
+        col:4
+	}]
+});

libs/builder/inputs.js

@@ -26,7 +26,6 @@ let Input = {
 		if (event && event.target) {
 			const e = new CustomEvent('propertyChange', { detail: {value : input.value ?? this.value, input: this, origEvent:event} });
 			event.currentTarget.dispatchEvent(e);
-			//event.data.element.trigger('propertyChange', [this.value, this, event]);
 		}
 	},
 
@@ -55,7 +54,6 @@ let Input = {
 			fun = this[ this.events[i][1] ];
 			el = this.events[i][2];
 
-			//this.element[0].querySelector(el).addEventListener(ev, function (ev, el, fun, target, event) {
 			this.element[0].addEventListener(ev, function (ev, el, fun, target, event) {
 			  if (event.target.closest(el)) {
 				  //target, event, element, input
@@ -71,7 +69,7 @@ let Input = {
 let TextInput = { ...Input, ...{
 
     events: [
-	//event, listener, child element
+        //event, listener, child element
         ["focusout", "onChange", "input"],
 	 ],
 
@@ -751,7 +749,7 @@ let ListInput = { ...Input, ...{
 	},	
 
 	select: function(event, node, input) {
-		let index = [...this.parentNode.children].indexOf(el);//sectionItem.index();
+		let index = [...this.parentNode.children].indexOf(el);
 
 		event.action = "select";
 		event.index = index;
@@ -821,7 +819,6 @@ let AutocompleteList = { ...Input, ...{
 
 	onAutocompleteChange: function(event, node, input) {
 		input.value = event.detail;
-		//return input.onChange(event, node, input);
 		return input.onChange.call(this, event, node, input);
 	},
 
@@ -868,7 +865,6 @@ let TagsInput = { ...Input, ...{
 
 			}
 		}
-		//$('input', this.element).data("tagsInput").setValue(value);
 	},
 
 	init: function(data) {

libs/builder/plugin-bootstrap-colorpicker.js

@@ -1,18 +1,18 @@
-var ColorInput = $.extend({}, ColorInput, {
+let ColorInput = { ...ColorInput, ...{
 
     events: [
         ["change", "onChange", "input"],
 	 ],
 
 	setValue: function(value) {
-		var color = this.rgb2hex(value);
+		let color = this.rgb2hex(value);
 		$('input', this.element).val();
 		$('i', this.element).css('background-color', value);
 	},
 
 	init: function(data) {
-		var colorinput = this.render("bootstrap-color-picker-input", data);
-		var colorpicker = $('.input-group', colorinput).colorpicker();
+		let colorinput = this.render("bootstrap-color-picker-input", data);
+		let colorpicker = $('.input-group', colorinput).colorpicker();
 		return colorinput;
 	},
   }