# Visual Designer ## What is the purpose of this framework? View the [demo](https://sazr.github.io/visual-designer.html). Create web content using a drag and drop builder. ## Example applications of this framework View the [demo](https://sazr.github.io/visual-designer.html). 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](https://creativecommons.org/licenses/by-sa/4.0/). ## Require customisation or expansion? Contact the author for consulting and advice [here](mailto:samzielkeryner@gmail.com?subject=visual-designer) ## 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** ```
var designer = vD.init( '#my-editor', 'vDFramework' ); ``` **Re-Initialise a vD editor that contains a design** ```

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

var designer = vD.init( '#my-editor', 'vDFramework' ); ``` **Export a design's markup** ```
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