Visual-designer NPM

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