givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
6.86k stars 1.58k forks source link

Some bugs #336

Open aouniradouan opened 4 months ago

aouniradouan commented 4 months ago

Hi, I want to express my appreciation for your great page builder. I plan to use it in my upcoming project to create landing pages. However, I have been encountering some issues while using it:

  1. I cannot upload images, and it shows me a warning message when I attempt to move them.
  2. Whenever I try to create a new page, it fails to create it.
  3. I am unable to use it as RTL.
  4. When I try to create a new page, folders are not generated, and it only shows the old ones.

I would appreciate it if you could help me resolve these issues.

Thank you.

givanz commented 4 months ago

Hi

Thank you.

What error message do you get on upload and new page?

I suspect that you are loading VvvebJs from a subfolder try to load it from the root folder, instead of http://localhost/vvvebjs/editor.html use http://localhost/editor.html

Another possible cause can be file permission check if VvvebJs folder is writable by php.

For rtl make sure you add dir attribute to tag to editor.html and to the edited page.

<html lang="ar" dir="rtl">

For more rtl customizations please check bootstrap documentation https://getbootstrap.com/docs/5.3/getting-started/rtl/

aouniradouan commented 4 months ago

Thank you! These are the codes below.

`loadPage: function(name, allowedComponents = false, disableCache = true, loadComponents = false) {
        let page = $("[data-page='" + name + "']", this.tree);
        //remove active from current active page
        $("[data-page]", this.tree).removeClass("active");
        //set loaded page as active
        page.addClass("active");
        //open parent folder if closed
        $("> input[type=checkbox]", $(page).parents("[data-folder]")).prop("checked", true);

        this.currentPage = name;

        // Check if the page exists in this.pages
        if (this.pages && this.pages[name] && this.pages[name]['url']) {
            var url = this.pages[name]['url'];
            $(".btn-preview-url").attr("href", url);

            //allow event to change page or url or cancel by setting url to false
            let result;
            if (result = $(window).triggerHandler("vvveb.FileManager.loadPage", [name, url, this.pages[name]])) {
                [name, url, this.pages[name]] = result;
            }

            if (url) {
                Vvveb.Builder.loadUrl(url + (disableCache ? (url.indexOf('?') > -1 ? '&r=':'?r=') + Math.random():''), 
                    function () { 
                        if (loadComponents) { Vvveb.FileManager.loadComponents(allowedComponents); }
                        Vvveb.SectionList.loadSections(allowedComponents); 
                        Vvveb.StyleManager.init(); 
                    });
            }
        } else {
            console.error("Page with name '" + name + "' not found or does not have a valid URL.");
        }
    },  `

and I get this error in my consol :Page with name 'undefined' not found or does not have a valid URL. After attempting to create a new page, the page was successfully created but it is not loading properly.

givanz commented 4 months ago

Thanks for details.

I made some tests and found a bug in the create new page code loading the newly created page url.

I made a commit with the fix https://github.com/givanz/VvvebJs/commit/7e504600f005619be1c9ec39ee71c63dc7bc22df and a new release https://github.com/givanz/VvvebJs/releases

Please update the code and let me know if it works.

aouniradouan commented 4 months ago

Hi, Thank you, The bugs have been fixed And everything works fine Another time, thank you for this great library