Visual Designer

What is the purpose of this framework?

View the demo. Create web content using a drag and drop builder.

Example applications of this framework

View the demo. This framework can be used to build any web content. For example;

• You need to build a website that allows users to build Email Newsletters. You can insert visual-designer's drag and drop builder onto the webpage and users can use this out-of-the-box to build web content.

Status of the project

The status is in development.

Todos:

• Create NPM package of project
• Port/wrap project to React
• Port/wrap project to Vue JS
• Port/wrap project to Laravel PHP
• Port/wrap project to Pear package

License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Require customisation or expansion?

Contact the author for consulting and advice here

Demo

Open the file demo/index.html in any browser and you should see a simple demo of the JQuery Plugin - Visual Designer. I encourage you to inspect the HTML after the page has loaded. You should see a div for the visualDesignerManager and a div for each of the visualDesigner widgets. Especially have a look in the manager div for the undo widget/div, see where all the menus are stored and etc.

Build Project:

When developing:

• Install NPM
• Install Grunt
• Open Terminal (on Linux/MacOS) or Command Prompt (on Windows)
• Navigate to the ./src directory where the file Gruntfile.js resides
• Run npm install
• Enter grunt build-watch.
• The above command will check javascript and less syntax, place all js/less files into one file (/dist/css/visual-designer.css or dist/js/visual-designer.js), it will minify the files so they are smaller in file size producing (/dist/css/visual-designer.min.css or dist/js/visual-designer.min.js). Finally Grunt will now watch the folders src/less/**/*.less and src/js/**/*.js for any file changes. If those files change, it will restart the whole process.

When releasing:

• Open Terminal (on Linux/MacOS) or Command Prompt (on Windows)
• Navigate to the ./src directory where the file Gruntfile.js resides
• Enter grunt release.
• The above command will do everything grunt build-watch does but it will also copy files to the WordPress Plugin and Theme directories.

Project concepts:

The project consists of widgets, frameworks and a manager.

• Widgets are, for example, a text widget, an image widget, an accordion widget, etc. The most important widget is called the visualDesigner. It encapsulates all other widgets. A visualDesigner widget must have a framework associated with it. There can be many visualDesigner widgets in a page if needed. When looking at the code you should see some widgets inherit from others. For example a btnWidget inherits from a textWidget so a btnWidget has very similar functionality to a textWidget.

• Frameworks can be, for example, a WordPress framework, a Drupal Framework, a Pure CSS framework, etc. A framework provides framework specific functionality. For example; the WordPress framework provides custom widgets like a shortcode widget, a post widget, a menu widget.

• A Manager is a singleton widget that only occurs once on a page. So there can be multiple visualDesigner widgets on a page each using a different framework but there will only ever be one Manager (known as visualDesignerManager) widget/instance. The manager is responsible for global things like creating the undo widget, sending HTML back to the server, user license validation and etc.

How to...

Create/initialise a vD editor

<div id="my-editor"></div>

var designer = vD.init( '#my-editor', 'vDFramework' );

Re-Initialise a vD editor that contains a design

<div class="vd-release">
    <style type="text/css" vd-assoc="mvdid-1">
    @media(max-width: 8900000px) {
        #mvdid-1 {
            box-sizing: border-box;
        }
    }

    @media(max-width: 768px) {
        #mvdid-1 {
            box-sizing: border-box;
        }
    }

    @media(max-width: 414px) {
        #mvdid-1 {
            box-sizing: border-box;
        }
    }
    </style>
    <div id="my-editor" vd-type="vd-designer" data-type="visual-designer" class="vd-main" vd-version="1.2">
        <div class="vd-row-widget" vd-type="row" id="mvdid-1-3">
            <div class="vd-column-widget vd-1 vd-sm-1 vd-xs-1" vd-type="column" id="mvdid-1-4" desktop-width="12" tablet-width="12" mobile-width="12">
                <p class="vd-text-widget" vd-type="text" id="mvdid-1-5" vd-text-type="p"><span class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
            </div>
        </div>
    </div>
</div>

var designer = vD.init( '#my-editor', 'vDFramework' );

Export a design's markup

<div id="my-editor"></div>

<button id="my-btn">Export</button>

var designer = vD.init( '#my-editor', 'vDFramework' );

$( '#my-btn' ).click( function( ev ) {
    var ele = $( this );

    var removeVDClasses = true;
    designer.vD( 'export', [ removeVDClasses ] );
} );

Implementation Pipeline:

• Port the plugin from using Bootstrap Twitter to use Pure CSS. This is partially completed but some more tasks are needed.
• Menu inputs need to stretch to whatever height the buttons are
• v1.0 Menu sliders need better look
• ~~v1.0 Menu needs vertical styling for all in mobile view~~
• Implement PureCSS Accordion - src/js/frameworks/purecss/accordion-widget.js - see here for the template we should use: https://joe-crick.github.io/pure-css-components/#accordion
• Implement PureCSS Card - src/js/frameworks/purecss/card-widget.js - google 'Web Design Card' for a generic design of a card
• Implement PureCSS Headline - src/js/frameworks/purecss/headline-widget.js - google 'Web Design Headline' for a generic design of a headline
• v1.0 Implement PureCSS Hero Image - src/js/frameworks/purecss/hero-widget.js - google 'Web Design hero image' for a generic design of a hero image
• v1.0 Implement PureCSS Menu - src/js/frameworks/purecss/menu-widget.js - see here for the template we should use: https://joe-crick.github.io/pure-css-components/#menu
• v1.0 Implement PureCSS Slider/Carousel - src/js/frameworks/purecss/slider-widget.js - see here for the template we should use: https://joe-crick.github.io/pure-css-components/#carousel
• Implement PureCSS Table - src/js/frameworks/purecss/table-widget.js - see here for the template we should use: https://joe-crick.github.io/pure-css-components/#table
• Implement PureCSS Tabs - src/js/frameworks/purecss/tabs-widget.js - see here for the template we should use: https://joe-crick.github.io/pure-css-components/#tabs
• Implement WordPress Post - src/js/frameworks/wordpress/post-widget.js
• Implement WordPress Menu - src/js/frameworks/wordpress/menu-widget.js - should inherit from src/js/frameworks/purecss/menu-widget.js
• v1.0 Implement WordPress Shortcode - src/js/frameworks/wordpress/shortcode-widget.js
• Implement undo functionality for many of the menu buttons. I will add the list here soon.
• ~~Cross-Device styling: for example, make a column 100% width on mobile but only 50% width on Desktop. Will require the below feature aswell.~~ DONE
• ~~Dynamic Internal Style Editting~~ DONE
• Handle multiple frameworks on the same page: right now the plugin only thinks there is 1 framework but there could be many different frameworks on the page. For example; a WordPress Framework and a WordPress Menu Framework
• Implement WordPress Menu framework - src/js/frameworks/wpmenu-framework.js
• ~~Bug: on delete column~~ DONE
• ~~Bug: on clone widget~~ DONE
• ~~Fix vdWidget global function to handle multiple parameters~~ DONE
• ~~v1.0 Edit border-input-widget to have a slider to set border radius~~
• Implement shadow-input
• Implement gradient-input widget
• Update code to use ES6 features (arrows, etc.)
• v1.0 Implement PureCSS Hambuger menu - src/js/frameworks/purecss/hamburger-menu-widget.js - see here for the template we should use: https://codepen.io/erikterwan/pen/EVzeRP or https://codepen.io/mutedblues/pen/MmPNPG
• v1.0 Bug: if you set a widgets font-size, the widget tag gets that font size. Make the widget tag css not be affected by all widget css
• ~~On clone widget: copy widget style~~ DONE
• ~~v1.0 Bug: if multiple previously saved visualdesigners in page it can lead to id attribute conflicts. For eg, more than one div with id="vdid-2". Possible solution is to make all widget id's namespaced with the visualdesigner id~~
• ~~On delete widget: remove css from style element~~ DONE
• v1.0 Menu buttons popover's sit offscreen (hover mouse over the trash button to see problem)
• v1.0 Menu buttons popover text overflows
• Major redesign of undo functionality needed
• Can JQuery UI sortable/draggable work when the drag 'tag'/div is not a child of the element to be moved?
• Input menu's should handle enter and perform their action
• ~~Cant set button text colour~~ DONE
• ~~Implement handling of sub element styling (register, edit, delete)~~ DONE
• Revise whether the 'target' class property is needed in textWidget, btnWidget, imgWidget and videoWidget. It will be needed for tab, accordion widgets, etc.
• v1.0 ~~Edit shortcode widget to use new code (addDefaultContent(), etc.)~~
• v1.0 Implement ability to set link hover, active and visited settings
• v1.0 On mobile view mode: make the inner iframe body element 768px/414px but the actual iframe/html width wider to accomodate the vertical buttons
• v1.0 Add toggle hide/show button to _baseWidget style menu
• v1.0 On change running widget; send AJAX request to inform post change then NOT on save post/design
• v1.0 ~~Fix bugs with lock widget (txt and img sub-widgets dont get locked)~~
• v1.0 Txt and btn widget text crushed together on mobile
• v1.0 Contact Form widget
• v1.0 Fix mobile and tablet emulation
• v1.0 When dragging keep a placeholder in the original position
• v1.0 Dynamically get font-awesome library at page load
• Remove JQuery UI dependency completely