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.