Skip to content

Commit 162f349

Browse files
givanzgivanz
committed
Lottie component
1 parent 118a0b9 commit 162f349

13 files changed

+172
-76
lines changed

Diff for: ‎.dockerignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
node_modules
2-
**/node_modules
1+
*

Diff for: ‎Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM php:8.2.11-apache
1+
FROM php:8.3-apache
22

33
ARG UNAME=www-data
44
ARG UGROUP=www-data

Diff for: ‎README.md

+23-12
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<p align="center">
44
<img src="https://www.vvveb.com/admin/themes/default/img/biglogo.png" alt="Vvveb">
55
<br><br>
6-
<strong>Drag and drop website builder javascript library.</strong>
6+
<strong>Drag and drop page builder javascript library.</strong>
77
<br>
8-
<span>Built with Vanilla Js with no dependencies and Bootstrap 5</span>
8+
<span>Built with Vanilla Js with no dependencies or build tools and Bootstrap 5</span>
99
</p>
1010
<p align="center">
1111
<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
7575
To use the image upload or page save feature you need to have php installed.
7676

7777

78+
## Docker
79+
80+
### Local development
81+
82+
From VvvebJs folder run
83+
84+
```bash
85+
docker-compose up
86+
```
87+
88+
### Image
89+
90+
Or run image
91+
92+
```bash
93+
docker run -p 8080:80 vvveb/vvvebjs
94+
```
95+
96+
Open http://localhost:8080/editor.php or http://localhost:8080/editor.html
97+
7898
## Save page
7999

80100
Save page function needs either php or node
81101

82102
### PHP
83103

84-
If you use xampp or a shared hosting account php should work without any change.
104+
If you use docker, xampp or a shared hosting account php should work without any change.
85105

86106
Saving is done using [save.php](save.php)
87107

@@ -98,15 +118,6 @@ Open http://localhost:8080/editor.html
98118

99119
Saving is done using [save.js](save.js)
100120

101-
### Docker
102-
103-
From VvvebJs folder run
104-
105-
```bash
106-
docker-compose up
107-
```
108-
109-
Open http://localhost:8080/editor.php
110121

111122
## [Landing template](https://github.com/givanz/landing)
112123

Diff for: ‎css/vvvebjs-editor-helpers.css

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ body {
5656
/*
5757
Prevents iframe mouse events that prevents clicking on the component
5858
*/
59+
[data-component-lottie] > svg,
5960
[data-component-oembed] > iframe,
6061
[data-component-video] > iframe,
6162
[data-component-maps] > iframe,

Diff for: ‎demo/landing

Submodule landing updated 87 files

Diff for: ‎libs/builder/builder.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3412,7 +3412,7 @@ Vvveb.FileManager = {
34123412

34133413
//allow event to change page or cancel by setting page to false
34143414
window.dispatchEvent(new CustomEvent("vvveb.FileManager.deletePage", {
3415-
detail: page,
3415+
detail: page
34163416
}));
34173417

34183418
if (page) {
@@ -3450,7 +3450,7 @@ Vvveb.FileManager = {
34503450

34513451
//allow event to change page or newfile or cancel by setting page to false
34523452
window.dispatchEvent(new CustomEvent("vvveb.FileManager.renamePage", {
3453-
detail: page,
3453+
detail: {page, newfile}
34543454
}));
34553455

34563456
if (page) {

Diff for: ‎libs/builder/components-widgets.js

+89-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ limitations under the License.
1616
https://github.com/givanz/VvvebJs
1717
*/
1818

19-
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", "widgets/chartjs",/* "widgets/facebookpage", */"widgets/paypal", /*"widgets/instagram",*/ "widgets/twitter", "widgets/openstreetmap"/*, "widgets/facebookcomments"*/];
19+
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", "widgets/chartjs", "widgets/lottie",/* "widgets/facebookpage", */"widgets/paypal", /*"widgets/instagram",*/ "widgets/twitter", "widgets/openstreetmap"/*, "widgets/facebookcomments"*/];
2020

2121
Vvveb.Components.extend("_base", "widgets/googlemaps", {
2222
name: "Google Maps",
@@ -749,3 +749,91 @@ Vvveb.Components.extend("_base", "widgets/chartjs", {
749749
}
750750
}]
751751
});
752+
753+
function lottieAfterDrop(node) {
754+
//check if lottie js is included and if not add it when drag starts to allow the script to load
755+
body = Vvveb.Builder.frameBody;
756+
757+
if (!body.querySelector("#lottie-js")) {
758+
let lib = document.createElement('script');
759+
let code = document.createElement('script');
760+
lib.id = 'lottie-js';
761+
lib.type = 'text/javascript';
762+
lib.src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js';
763+
code.type = 'text/javascript';
764+
code.text = `
765+
let lottie = [];
766+
function initLottie(onlyNew = false) {
767+
if (typeof bodymovin == "undefined") return;
768+
769+
770+
let list = document.querySelectorAll('.lottie' + (onlyNew ? ":not(.lottie-initialized)" : "") );
771+
list.forEach(el => {
772+
el.replaceChildren();
773+
let animItem = bodymovin.loadAnimation({
774+
wrapper: el,
775+
animType: 'svg',
776+
loop: (el.dataset.loop == "true" ? true : false),
777+
autoplay: (el.dataset.autoplay == "true" ? true : false),
778+
path: el.dataset.path
779+
});
780+
781+
});
782+
}
783+
784+
if (document.readyState !== 'loading') {
785+
initLottie();
786+
} else {
787+
document.addEventListener('DOMContentLoaded', initLottie);
788+
}`;
789+
790+
body.appendChild(lib);
791+
body.appendChild(code);
792+
793+
lib.addEventListener('load', function() {
794+
Vvveb.Builder.iframe.contentWindow.initLottie();
795+
});
796+
} else {
797+
Vvveb.Builder.iframe.contentWindow.initLottie(true);
798+
}
799+
800+
return node;
801+
};
802+
803+
Vvveb.Components.add("widgets/lottie", {
804+
name: "Lottie",
805+
image: "icons/lottie.svg",
806+
attributes: ["data-component-lottie"],
807+
html: `
808+
<div class="lottie" data-component-lottie data-path="https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json" data-loop="true" data-autoplay="true">
809+
</div>
810+
`,
811+
afterDrop: lottieAfterDrop,
812+
813+
onChange: function (node, property, value) {
814+
Vvveb.Builder.iframe.contentWindow.initLottie();
815+
Vvveb.Builder.selectNode(node);
816+
return node;
817+
},
818+
819+
properties: [{
820+
name: "Path",
821+
key: "path",
822+
//inputtype: ImageInput,
823+
inputtype: TextInput,
824+
htmlAttr:"data-path",
825+
},{
826+
name: "Autoplay",
827+
key: "autoplay",
828+
htmlAttr:"data-autoplay",
829+
inputtype: CheckboxInput,
830+
inline:true,
831+
col:4
832+
},{ name: "Loop",
833+
key: "loop",
834+
htmlAttr:"data-loop",
835+
inputtype: CheckboxInput,
836+
inline:true,
837+
col:4
838+
}]
839+
});

Diff for: ‎libs/builder/icons/lottie.svg

+1
Loading

Diff for: ‎libs/builder/inputs.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ let Input = {
2626
if (event && event.target) {
2727
const e = new CustomEvent('propertyChange', { detail: {value : input.value ?? this.value, input: this, origEvent:event} });
2828
event.currentTarget.dispatchEvent(e);
29-
//event.data.element.trigger('propertyChange', [this.value, this, event]);
3029
}
3130
},
3231

@@ -55,7 +54,6 @@ let Input = {
5554
fun = this[ this.events[i][1] ];
5655
el = this.events[i][2];
5756

58-
//this.element[0].querySelector(el).addEventListener(ev, function (ev, el, fun, target, event) {
5957
this.element[0].addEventListener(ev, function (ev, el, fun, target, event) {
6058
if (event.target.closest(el)) {
6159
//target, event, element, input
@@ -71,7 +69,7 @@ let Input = {
7169
let TextInput = { ...Input, ...{
7270

7371
events: [
74-
//event, listener, child element
72+
//event, listener, child element
7573
["focusout", "onChange", "input"],
7674
],
7775

@@ -751,7 +749,7 @@ let ListInput = { ...Input, ...{
751749
},
752750

753751
select: function(event, node, input) {
754-
let index = [...this.parentNode.children].indexOf(el);//sectionItem.index();
752+
let index = [...this.parentNode.children].indexOf(el);
755753

756754
event.action = "select";
757755
event.index = index;
@@ -821,7 +819,6 @@ let AutocompleteList = { ...Input, ...{
821819

822820
onAutocompleteChange: function(event, node, input) {
823821
input.value = event.detail;
824-
//return input.onChange(event, node, input);
825822
return input.onChange.call(this, event, node, input);
826823
},
827824

@@ -868,7 +865,6 @@ let TagsInput = { ...Input, ...{
868865

869866
}
870867
}
871-
//$('input', this.element).data("tagsInput").setValue(value);
872868
},
873869

874870
init: function(data) {

Diff for: ‎libs/builder/plugin-bootstrap-colorpicker.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
var ColorInput = $.extend({}, ColorInput, {
1+
let ColorInput = { ...ColorInput, ...{
22

33
events: [
44
["change", "onChange", "input"],
55
],
66

77
setValue: function(value) {
8-
var color = this.rgb2hex(value);
8+
let color = this.rgb2hex(value);
99
$('input', this.element).val();
1010
$('i', this.element).css('background-color', value);
1111
},
1212

1313
init: function(data) {
14-
var colorinput = this.render("bootstrap-color-picker-input", data);
15-
var colorpicker = $('.input-group', colorinput).colorpicker();
14+
let colorinput = this.render("bootstrap-color-picker-input", data);
15+
let colorpicker = $('.input-group', colorinput).colorpicker();
1616
return colorinput;
1717
},
1818
}

0 commit comments

Comments
 (0)