givanz / vvvebjs Goto Github PK

Updated to latest version and can no longer save. The popup is not functioning:

All the exact same on my end, only thing I did was overwrite all files with new ones.

Hi, just wonder if this project is open for a contributor? I'd like to contribute.
Cheers.

padding-left and margin-left are not working. I think it's because they are defined with a capital L in components-bootstrap.js in 3 places.

    key: "padding-Left",
    key: "margin-Left",

First, great job on VvvebJa!

When adding videos (or maps) they are inserted with values 100% width and 100% height. The 100% height does not work as iframes do not scale like images. You end up with very wide video with tiny height.

Maybe this stackoverflow issue can better explain what I mean:

https://stackoverflow.com/questions/38270661/displaying-a-youtube-video-with-iframe-full-width-of-page

Not sure of best approach to solve but since user cannot edit source or change layout, videos are not working correctly.

Also, be really nice feature to allow editing of source code:)

Thanks for sharing your work!

Hi,

Good day to you 👍

I am not able to run this project on IE 11. I tried fixing few of the code errors but the drag and drop still fails. When i drag & drop a component, there is no change in the code editor neither is the component rendered on iFrame. Do you have any idea about what the problem could be?

Hi Givanz .....Please...
when I create a new page it does not appear in filemanager when I reload editor.html
Regards Adolfo

I want to create a custom widget/ component to let user insert a graph based on certain data. The data as of now I want to pull from a specific API. Please can you provide a wiki, or guide about how to do it.

i want to postion divs absolute inside a relative div?

is it possible?

I fixed some CSS but noticed there is no configuration to compile the CSS. Is that something you could include? Or would you prefer a PR?

Hi @givanz , thanks for making this amazing editor source code.
I've been trying to add a custom element, which would be a clickable picture, ex:

< a href="some.link" >
< img src="" >
< /a >

The above HTML makes the img clickable.
I tried adding Component in the .js ( both input and components-b ) following the model in the Wiki - added the template in the indexhtml ... I can't get it to work.
I even tried the html/link - that works ( it is off by default it seems ) but doesn't really drop properly, so I turned that off - I noticed many components available not being used in the index demo.
I was wondering is there a more detailed example than the Wiki ?
It would be great if the steps could be listed.
Alternatively, I tried to wrap the img with < a href > within the component html/card but that also broke the component.
Thanks for your time, kudos for this editor -it's the best around.
thanks!

When it is changing some properties from the right-panel, I detected tree problems here:

1. component-properties are not updated - builder.js -
   for solving this problem, I triggered "click" event on element (instead of selecting it).

if (!property.child && !property.parent) element.trigger("click");//Vvveb.Builder.selectNode(element);

Another approach is to add another line with Vvveb.Builder.loadNodeComponent(element):

if (!property.child && !property.parent) {
        Vvveb.Builder.selectNode(element);
        Vvveb.Builder.loadNodeComponent(element);
}

I also changed render function by changing some vars / function to local (added "var") and prevent to pollute the global scope

    render: function(type) {

        var component = this._components[type]; //local var

        var rightPanel = jQuery("#right-panel #component-properties");  //local var
        var section = rightPanel.find('.section[data-section="default"]');  //local var

        if (!(Vvveb.preservePropertySections && section.length))
        {
            rightPanel.html('').append(tmpl("vvveb-input-sectioninput", {key:"default", header:component.name}));
            section = rightPanel.find(".section");
        }

        rightPanel.find('[data-header="default"] span').html(component.name);
        section.html("")

        if (component.beforeInit) component.beforeInit(Vvveb.Builder.selectedEl.get(0));

        var fn = function(component, property) {  //local function
            return property.input.on('propertyChange', function (event, value, input) {
                    var element = Vvveb.Builder.selectedEl; //local var
                    if (property.child) element = element.find(property.child);
                    if (property.parent) element = element.parent(property.parent);

                    if (property.onChange)
                    {
                        element = property.onChange(element, value, input, component);
                    }/* else */
                    if (property.htmlAttr)
                    {
                        var oldValue = element.attr(property.htmlAttr); //local var

                        if (property.htmlAttr == "class" && property.validValues)
                        {
                            element.removeClass(property.validValues.join(" "));
                            element = element.addClass(value);
                        }
                        else if (property.htmlAttr == "style")
                        {
                            element = element.css(property.key, value);
                        }
                        else
                        {
                            element = element.attr(property.htmlAttr, value);
                        }

                        Vvveb.Undo.addMutation({type: 'attributes',
                                                target: element.get(0),
                                                attributeName: property.htmlAttr,
                                                oldValue: oldValue,
                                                newValue: element.attr(property.htmlAttr)});
                    }

                    if (component.onChange)
                    {
                        element = component.onChange(element, property, value, input);
                    }

                    if (!property.child && !property.parent) element.trigger("click");//Vvveb.Builder.selectNode(element);

                    return element;
            });
        };

        var property, element, nodeElement = Vvveb.Builder.selectedEl;  //local var

        for (var i in component.properties)
        {
            property = component.properties[i];

            if (property.beforeInit) property.beforeInit(element.get(0))

            element = nodeElement;
            if (property.child) element = element.find(property.child);

            if (property.data) {
                property.data["key"] = property.key;
            } else
            {
                property.data = {"key" : property.key};
            }

            if (typeof property.group  === 'undefined') property.group = null;

            property.input = property.inputtype.init(property.data);

            if (property.init)
            {
                property.inputtype.setValue(property.init(element.get(0)));
            } else if (property.htmlAttr)
            {
                if (property.htmlAttr == "style")
                {
                    //value = element.css(property.key);//jquery css returns computed style
                    var value = getStyle(element.get(0), property.key);//local var //getStyle returns declared style 
                } else
                {
                    var value = element.attr(property.htmlAttr); //local var
                }

                //if attribute is class check if one of valid values is included as class to set the select
                if (value && property.htmlAttr == "class" && property.validValues)
                {
                    value = value.split(" ").filter(function(el) {
                        return property.validValues.indexOf(el) != -1
                    });
                }

                property.inputtype.setValue(value);
            }

            fn(component, property);

            if (property.inputtype == SectionInput)
            {
                section = rightPanel.find('.section[data-section="' + property.key + '"]');

                if (Vvveb.preservePropertySections && section.length)
                {
                    section.html("");
                } else
                {
                    rightPanel.append(property.input);
                    section = rightPanel.find('.section[data-section="' + property.key + '"]');
                }
            }
            else
            {
                var row = $(tmpl('vvveb-property', property)); //local vars
                row.find('.input').append(property.input);
                section.append(row);
            }

            if (property.inputtype.afterInit)
            {
                property.inputtype.afterInit(property.input);
            }

        }

        if (component.init) component.init(Vvveb.Builder.selectedEl.get(0));
    }

2. Changing the size of title (jumbotron title for example) crashes - builder.js
   This is because in components-bootstrap4.js, at "html/heading" properties, the Size property
   has htmlAttr: "id". The problem is that it is changing a nodeName, not an attribute (practically replacing it), and this can affect the Undo / Redo chain in a more complex editing mode (because the target element will be deleted, and when is restored is practically another element).
   I don't know if Mutation Observer can handle this.

3. TextInput fires on keyup - inputs.js - (if the user changes the id with a looongIDName, the id attribute will be changed for each key pressed, and in case of using Undo operation, it will be a pain for the user)
   That is why I changed it to "blur":

var TextInput = $.extend({}, Input, {

    events: [
        ["blur", "onChange", "input"], //["keyup", "onChange", "input"],
     ],

    init: function(data) {
        return this.render("textinput", data);
    },
  }
);

I'm using latest chrome 70. When I open editor.html file it shows error "Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame" but it seems fine in firefox.

Is it possible to make an image upload for the images used in the templates? How can I edit the images? If I paste in a new Url for the image, it is not shown?

Hi Givanz,

I extended the editor to add label type control like below:

Vvveb.Components.extend("_base", "html/label", {
    name: "Label",
    image: "icons/label.svg",
    nodes: ["label"],
    html: '<div class="form-group"><label for="">Label</label></div>',
    beforeInit: function (node) {
        properties = [];
        var $node = $(node);
        var caption = $node.text();
        data = {"caption": caption};

        properties.push({
            name: "Caption",
            key: "caption",
            inputtype: TextInput,
            data: data,
            onChange: function (node, value, input) {
                $node.text(value);
                Vvveb.Components.render("html/label");
                return node;
            },
        });
      
        //remove all option properties
        this.properties = this.properties.filter(function (item) {
            return item.key.indexOf("caption") === -1;
        });

        //add remaining properties to generated column properties
        for (var i = 0; i < this.properties.length; i++) {
            properties.push(this.properties[i]);
        }

        this.properties = properties;
        return node;
    },
    properties: [
    {
        name: "Caption",
        key: "caption",
        inputtype: TextInput
    }, {
        name: "For ID",
        htmlAttr: "for",
        key: "for",
        inputtype: TextInput
    }]
});

Issue: Inner HTML of label <label for="">Label</label> is not set as Caption property. However if i provide the new value in the Caption textbox then Inner HTML of label set as per given text on blur event.

When i clicked on a div or container at the workspace. then i tried to clone it using "clone element"...and suddently gone crazy. i just clicked it once...but i got 7-8 copies.it happens every time i use clone element.
any solution? thx

Just a quick note: Seems landio is missing from demo folder on latest release.

Also the eCommerce demo seems missing?

I also see some demo templates referencing popper.min.js in js/vendor. The vendor folder does not exist

Vvveb.js is getting better with every release, thank you so much for sharing it! Working on using this in classroom so students can build simple "about me" pages:)

Cheers!

Hello..

Looks a great project.
Can you please give me basic idea on how to save user inputs on server side.
I plan to integrate with php/laravel framework.

@givanz Any ideas will be helpful?

I got the following error when open editor.html

• What;s Installation Process to use Vvvebjs

Uncaught TypeError: Cannot read property 'doctype' of undefined
    at Object.getHtml (builder.js:1044)
    at HTMLButtonElement.save (builder.js:1161)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.q.handle (jquery.min.js:3)

Hey Givan,

Love this project - really great tool and excellent idea! I'm not technical so forgive the questions but looking for some basic info on the following:

1. In the demo, I am unable to execute JS functions when in preview mode (by copy and paste into code editor). Is this possible?

2. Can pages be linked together to create click through from buttons?

3. Do you have example of script which will allow pages to be saved to server?

I have lots more questions, but will leave it here for now. Thanks for the help!

Dear Givanz,

Look Great and useful.

But i need an auto save button or something like that, i need when i drag and drop an element to save automaticallly in my DB or to call Gethtml() function. but i need to know when i can use this function ?

Thank you.

I am trying to create a "data-table" component which shows records from a database table. I am thinking of creating a htmlAttr: "data" and use that to accept tablename on the right panel(For eg: data-tablename="users"). But I can't figure out how to modify the HTML after user enters tablename.

Do you have any suggestions on how this can be implemented?

Thanks in advance.

Dears,

Am having this error, when i redirect my page to the page Builder:

Uncaught DOMException: Blocked a frame with origin "my domain" from accessing a cross-origin frame.

How to solve this in Builder.js ?

1. Add a Table element
2. Click on TD. Go to Size. Increase width.
   Issue: TD width does not change
3. Now change width unit from px to em to px. Change TD width. Notice that it works now.

POC

When I tried to add a margin to an element and i switched from px to em and its not updating in the live view.
Everything else seems fine. rem is also working.

Not sure if you know but the demos do not work in any browser.
The drag gets locked https://monosnap.com/file/wDhGEgxuewbNH1IX0astnnhFUARIti

Hi,

Great project, I've just started something similar and now I came across this project. My idea is bit different: I only show the page that one will modify and a floating menu that opens different contexts like a code editor or a css editor or a components palette just not to clutter the work surface. I also have a template engine (x) that I can build components with, it looks like this:

in principiu sunt:

• xblock xinclude sa incluzi component
• xblock xinclude xres sa incluzi resurse ale unui component unde vrei in pagina
• xvar sa definesti resurse
• xif expresie sa afisezi un bloc sau nu
• xfor parcurge o colectie;
• {{ }} evalueaza expresie js
• $ reprezinta contextul componentului unde gasesti parametrii si data-source-ul asociat

Ex:

<xblock xinclude="nav" xds="nav" />

<xblock xres="numevar" xinclude="nav"  />

<tag xif="jsboolexp">
</tag>

<tag xfor="$.posts" xv="post">
    {{post`}}
</tag>

<tag xfor="$.posts" xk="i">
    {{$.posts[i]}}
</tag>

<tag xfor="$.posts" xv="post" xk="i">

</tag>

TODO:

<tag xfor="-5:9" xv="u" xk="i">

</tag>

I used nodejs for server side and x template engine is build on html extended attributes and tags and {{}} to evaluate js expressions.

Q: Do you want us to try merge the tow projects ?

I plan to use monaco editor from MS to edit my content and provide js/ts intelisense for datasources and templates and make sort of a development IDE on web.

Hi,
I am a newbie. I would like to know after design How to create a webhost to host the resulting html website?

Thanks for great script...
I am loading html with editable and non editable elements.
The non editable are script generated like post galleries and product galleries and the likes..

Is there a way to define a class like "not-editable" for div or section tags that prevents triggering of wysiwyg editing for these elements ? Thought I might ask instead poking around and perhaps reinventing the wheel..
The purpose of this is to give some indication to users that certain elements are not editable... by NOT hightlighting them , the NOT editable content will not be saved as it is dynamically generated.. on every page load.

The html generated is parsed and only content that is editable will be saved indicated by data-* attributes..
and working well. :)

Static display no editor no highlight for this.. (could be class or data-attribute selector)

    <section class="not-edit"> 
     No parsing of tags here.. no Static display no editor no highlight  for this..
    </section>

Hi there,

Is there a chance to use VvvebJs inside an angular 6 application? And if you can navigate me to some examples or tutorials?

Thanks in advance,
Milan

Really like the idea of adding new page.

Can it easily be changed to add page to chosen folder? For example, add to the "/demo/album" folder instead of just /demo.

If working in certain folder be nice to add page to that specific folder.

Also being able to delete pages added be very helpful.

BTW: kids in classroom just love using and learning from vvvebJs!

Hello,

I really love this page editor.
i need your help with two little things

1)- I would like to add a countdown timer .
is there any easy way i can do that?

2)- Also i would like to give user ability to upload their own image from their computer
is that possible?

if you can give me some ideas that will be great
@givanz

Hi, the project looks amazing, however, whenever I try to access the wiki it just redirects me back to the homepage. Any idea what could be wrong?

Cheers

hi may i ask got function support to import the bootstrap template?

Hello there.
Nice work you've done with this editor.

There is a little issue with the selected element / selected box on scrolling event - The selected box does not follow the selected element when the user scrolls the page.
This is happening because the iframe's load event starts later than the moment when is running Vvveb.Builder._initBox(), and because of that, the variable window.FrameWindow does not exists.

I moved all the code with "scroll resize" event declaration into the iframe's load function, and all works great.

Now Vvveb.Builder._loadIframe() function looks like this:

    /* iframe */
    _loadIframe : function(url) {

        self.iframe = this.documentFrame.get(0);
        self.iframe.src = url;

        return this.documentFrame.on("load", function()
        {
                window.FrameWindow = self.iframe.contentWindow;
                window.FrameDocument = self.iframe.contentWindow.document;

                $(window.FrameWindow).on( "beforeunload", function(event) {
                    var dialogText = "You have unsaved changes";
                    event.returnValue = dialogText;
                    return dialogText;
                });
               // code - moved from _initBox() 
                jQuery(window.FrameWindow).on("scroll resize", function(event) {

                        if (self.selectedEl)
                        {
                            offset = self.selectedEl.offset();

                            jQuery("#select-box").css(
                                {"top": offset.top - self.frameDoc.scrollTop() ,
                                 "left": offset.left - self.frameDoc.scrollLeft() ,
                                 "width" : self.selectedEl.outerWidth(),
                                 "height": self.selectedEl.outerHeight(),
                                 //"display": "block"
                                 });

                        }

                        if (self.highlightEl)
                        {
                            offset = self.highlightEl.offset();

                            jQuery("#highlight-box").css(
                                {"top": offset.top - self.frameDoc.scrollTop() ,
                                 "left": offset.left - self.frameDoc.scrollLeft() ,
                                 "width" : self.highlightEl.outerWidth(),
                                 "height": self.highlightEl.outerHeight(),
                                 //"display": "block"
                                 });
                        }
                });
               // end - moved from _initBox() 

                Vvveb.WysiwygEditor.init(window.FrameDocument);
                if (self.initCallback) self.initCallback();

                return self._frameLoaded();
        });

    },

Also I deleted that piece of code from _initBox()

Hello @givanz ,

I am planning to use your library for creating one of my open source project related to email template builder.

It seems drag and drop; both from toolbar to content editor and control drag drop within content editor are not working as expected.

May I know which drag n drop library; you have used? Any optimization suggestion for completely replacing existing drag drop with more sophisticated drag drop or sortable libraries? i.e. interact.js etc.

I would like to implement drag drop functionality like it is there in https://www.formsite.com/ editor. It support both left->right and top->bottom drag drop in better way.

Good day, how can I add style to your builder for element? For example background for container... Thanks for help

Any chance we could have true absolute positioning by simply dragging the element and it correctly setting its left/right/bottom/top in relation to its container? Also, how about the ability to simply ressize an element such as a button or input field by dragging the corner and resizing it? This is a great feature of the Silex editor, but Im really hoping to have a more polished editor such as yours.

Hey, first thanks for your amazing work, I would rly like to use it in one of my admin panels, but I have problems initializing the editor.

I followed your usage instructions, but I get this error:

jquery.min.js:2 jQuery.Deferred exception: Cannot set property 'src' of undefined TypeError: Cannot set property 'src' of undefined at Object._loadIframe (https://www.db-app.com/VvvebJs/libs/builder/builder.js:568:19) at Object.init (https://www.db-app.com/VvvebJs/libs/builder/builder.js:504:8) at HTMLDocument.<anonymous> (https://www.db-app.com/?edit:121:21) at j (https://www.db-app.com/VvvebJs/js/jquery.min.js:2:29999) at k (https://www.db-app.com/VvvebJs/js/jquery.min.js:2:30313) undefined r.Deferred.exceptionHook @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 S @ jquery.min.js:3 12:35:01.466 jquery.min.js:2 Uncaught TypeError: Cannot set property 'src' of undefined at Object._loadIframe (builder.js:568) at Object.init (builder.js:504) at HTMLDocument.<anonymous> (?edit:121) at j (jquery.min.js:2)

I tried debugging it a bit, and it seems like the iframe/canvas is not created, what am I doing wrong?

regards matthias

Been reluctant to open issue, as not sure it is issue and will feel like big dummy. But cannot figure out...

When hovering over items a + sign appears and says "Add Element". Clicking does nothing. What is this and how to use?

Sorry to open issue for this, but just have to know:)

Thanks!

I needed to render select components inside listinputs so I setup the template as follows:
`

	{% if (typeof hide_remove === 'undefined') { %}
	<div class="col-12">
	
		<button class="btn btn-sm btn-outline-primary">
			<i class="ion-plus"></i> Add new
		</button>
		
	</div>
	{% } %}

	{% for ( var i = 0; i < options.length; i++ ) { %}
	<div class="col-12">
		<div class="input-group">
			{% if (options[i].inputtype === SelectInput) { %}
			<select class="form-control">
				<option value="">{%=options[i].placeholder%}</option>
				{% for (var j = 0; j < options[i].data.options.length; i++) { %}
				<option value="{%=options[i].data.options[j].value%}">{%=options[i].data.options[j].text%}</option>
				{% } %}
			</select>
			{% } else { %}
			<input name="{%=key%}_{%=i%}" type="text" class="form-control" value="{%=options[i].value%}" placeholder="{%=options[i].placeholder%}" />
			{% } %}
		</div>
		<br/>
	</div>
	{% } %}
	<div class="col-12">
		<button class="btn btn-sm btn-danger">
			<i class="ion-trash-a"></i> Remove
		</button>
	</div>
		
</div>`

Hi! Thanks for the updates!

Just updated to the latest and now none of the demo sites load. See this in dev console:

jquery.min.js:3 Uncaught TypeError: Cannot create property 'guid' on string 'ctrl+e'

Did not experience this error in past releases.

UPDATE: related to #28 (comment)

I use Foundation in most of my projects...how easy/difficult would it be to switch? Very intriguing project, for sure.

Hi,

I have few templates where in html we have used background images.

Can you please tell me how to add ability in the editor so that users can change their background image?
Also is there any instructions to add our own template? Have you used any common css classes which needs to use in all pages.

Looking forward for your early response!

In function _getElementType . if (el.attributes) seems to be repeated .

I had asked this on closed issue #13 but not sure if it will be seen.

Image upload is working, much appreciated.

Have issue I cannot solve though after making the changes to JS files.

When the image is uploaded, the upload path is echoed into the "Alt, Height and Width" fields? Also echoed into the left side search field?

Any ideas how to stop this behavior?

Like to use this in my classroom so kids can make simple about me blogs.

Thanks.

Hi,

Awesome project!

I would like to append the response data of the ajax into any template that the user selects. I am aware that this can be achieved through jQuery .html() or .append() but I was wondering if you currently have any other way to feed the data into the template?

Thanks,
Carl

Greetings Givan, hope you are doing well!

I was trying new release on your example site and ran across this issue:

https://www.useloom.com/share/7ff97d8bf2424292a0063d376b338fe4

There were no errors shown in DEV console or would also post those.

Also when trying out "blocks - slider" can not find way to replace image? Once dragged over and clicking on element, cannot see options.

Running Win 10 Pro and latest Chrome.

Susan

You have built an amazing web builder and I am also on the verge of building a very very very simple builder. I have few questions which I hope you will clear.

How does the web builder know what div to make editable? Do we have to specify some id or something to make js aware that the particluar div is editable or place to drop components???

A user will edit a original html template. After he is finsihed, does the web builder generate html, css and js or will it save the structure information in json and save it to db then later fetch the json and map the changes???

Hello @givanz ,
when I add component in iframe code of demo model, press export and save ,then refresh ,cannot keep the code after i changed? have you any good methods to save after demo code changed ? thanks

Just updated from your last push.

Seems the code editor is broken. Any edits are not saved and if you tick "Run code on edit", this error shown in dev console:

VM315:3 Uncaught TypeError: The element or ID supplied is not valid. (videojs)
    at t (<anonymous>:3:239)
    at htmlVideo (<anonymous>:88:5)
    at init (<anonymous>:155:5)
    at <anonymous>:161:3
    at <anonymous>:163:3
    at m (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:2)
    at Ut (jquery.min.js:2)
    at k (jquery.min.js:2)

If it matters, using the Landio Landing Page template to test new setup. But, seems editor is not saving on any template.