PEdit

Edit multiple HTML elements (children) within a specific area (editor). Edit elements via the GUI or the object API. No libraries needed, just good old Vanilla JavaScript.

Developed by the team behind www.printees.se.

View live demo

Features

• Resize element (ratio driven)
• Move element
• Remove element

Browser Support

Desktop and touch devices, IE8+, Chrome, Opera, Safari, Firefox

Setup

(1) Install via NPM or download from GIT.

npm install pedit

Download: https://github.com/awkwardgroup/pedit/archive/master.zip

(2) Include the pedit javascipt.

<script src="javascripts/pedit.min.js"></script>

(3) Include the stylesheet. You can edit the Sass file and compile it, or just edit the CSS. You will probably need to edit the style to fit your needs :)

<link rel="stylesheet" type="text/css" href="stylesheets/style.css">

(4) Markup the HTML. Each child element of #editor will be editable after render.

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

(5) initialize the editor by ID

var editor = PEDIT.init('editor');

(6) Configure editor options (optional)

editor.offset = 2;

(7) Render child elements

editor.render();

Editor

With a reference to the editor you can access and update properties/options and run functions related to it. For example you can add a child dynamically:

1. var element = document.createElement('div');
2. editor.element.appendChild(element);
3. editor.render();

You can also add a child directly without using editor.render(); to get a reference to it:

3. var child = editor.createChild(element);

Editor Functions

render()
Render all children in the editor.
createChild(element)
Render a single element in the editor.
calculateSize(pixels, horizontal)
Converts pixels to editor related percent value
getChild(ID)
Returns a child object based on ID.
clean()
Cleans the editor by deleting all children and reseting the trailing ID for children.

Editor Properties

editor.element
The editors HTML DOM element.
editor.width
The editors property width, defaults to elements offsetWidth.
editor.height
The editors property height, defaults to elements offsetHeight.
editor.offset
The editors inner offset, used when calculating sizes of elements within the editor.
editor.remove
Enable remove of children in the editor.
editor.resize
Enable resize of children in the editor.
editor.childMaxWidth
Set maximum width of children (in percent, only numeric value).
editor.childMaxHeight
Set maximum height of children (in percent, only numeric value).
editor.childMinWidth
Set minimum width of children (in percent, only numeric value).
editor.childMinHeight
Set minimum width of children (in percent, only numeric value).
editor.childTrailID
The ID that is used for children, incremented when a child is rendered.
editor.moveDoneFunction
Reference a function that runs when the movement of a child object is done. Takes the child object as a parameter.
editor.resizeDoneFunction
Reference a function that runs when the resizing of a child object is done. Takes the child object as a parameter.
editor.removeDoneFunction (Only runs on GUI interaction)
Reference a function that runs when the deleting of a child object is done. Takes the child object as a parameter.
editor.childRenderedFunction
Reference a function that runs when the redering of each child object is done. Takes the child object as a parameter.
editor.children
An object that holds all the children of the editor.

Child

With a reference to the child object you can edit it via functions or access necessary properties. For example you can update the position of the child:

child.updateElementPosition(20, 20);

Or you can access the childs size properties:

var width = child.width();
var height = child.height();

Child Functions

updateElementPosition(offsetX, offsetY)
Updates the position of the element within the editor.
updateElementSize
Updates the size of the element within the editor.

Child Properties

The ID that represents the child object.
child.element
The childs HTML DOM element.
child.elementResize
The childs HTML DOM element for the resize button.
child.elementRemove
The childs HTML DOM element for the remove button.
child.editor
A reference to the child parent editor object.
child.locked
Locks the child and diabsles it from being interacted with.
child.width
The childs width in percent (related to the editor width).
child.height
The childs height in percent (related to the editor height).
child.offsetX
The childs X offset in percent (related to the editor width).
child.offsetY
The childs Y offset in percent (related to the editor height).

Other functions

There are some other functions that can be accessed within the namespace.

PEDIT.tools.isTouchDevice()
Detect if it's a touch device, returns true or false;
PEDIT.tools.getPageXY(event)
Get the current X and Y based on the event, returns an array.
PEDIT.tools.addTouchClass(className)
Adds a class to the body element if it's a touch device.
PEDIT.tools.toggleClass(element, className, remove)
Add or remove a class to an element.

Misc

Please report issues with the script here on GitHub.