Examples

Here is a small demo that combines the major features of the library

Navigation Bar

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quidem culpa, rerum blanditiis mollitia aut eos dolor delectus, pariatur non neque quaerat numquam laudantium autem aperiam nam assumenda qui voluptate. Quisquam voluptatum nihil eum reiciendis delectus illum eius unde minus. Ducimus, rerum? Quos ducimus ut voluptatibus quae excepturi enim iste?

Dragging

Codes

JavaScript

const menu = new PopupMenu("dragExample")
menu.bindPopup()
menu.addButtons(["draggable"])
box.addEventListener('click', togglePopup)
box.addEventListener("mousedown", drag)

HTML

<{div}> id="dragExample" <{/div}>

CSS

#dragExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }

Snapping

JavaScript

const menu2 = new PopupMenu("snapExample")
menu2.bindPopup()
menu2.addButtons(["draggable", "snapping70"])
box2.addEventListener('click', togglePopup)
box2.addEventListener("mousedown", drag)

HTML

<{div}> id="snapExample" <{/div}>

CSS

#snapExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }

Resizing

JavaScript

const menu3 = new PopupMenu("resizeExample")
const resized3 = new Resizer("resizeExample")
menu3.bindPopup()
resized3.buildBorders()
menu3.addButtons(["resizable"])
box3.addEventListener('click', togglePopup)

HTML

<{div}> id="resizeExample" <{/div}>

CSS

#resizeExample{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }

Removing

JavaScript

const menu4 = new PopupMenu("removeExample1")
menu4.bindPopup()
menu4.addButtons(["remove"])
box4.addEventListener('click', togglePopup)

const menu5 = new PopupMenu("removeExample2")
menu5.bindPopup()
menu5.addButtons(["remove"])
box5.addEventListener('click', togglePopup)

HTML

<{div id="removeExample1"}><{/div}> <{div id="removeExample2"}> <{/div}>

CSS

#removeExample1{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }
#removeExample2{ background-color: blue; height: 50px; width: 100px; position: absolute; top: 150px; left: 540px; }

Aligning

JavaScript

const menu6 = new PopupMenu("alignExample1")
menu6.bindPopup()
menu6.addButtons(["draggable","select"])
box6.addEventListener('click', togglePopup)
box6.addEventListener("mousedown", drag)

const menu7 = new PopupMenu("alignExample2")
menu7.bindPopup()
menu7.addButtons(["draggable", "select"])
box7.addEventListener('click', togglePopup)
box7.addEventListener("mousedown", drag)

HTML

<{div id="alignExample1"}><{/div}> <{div id="alignExample2"}><{/div}>

CSS

#alignExample1{ background-color: red; height: 50px; width: 100px; position: absolute; top: 150px; left: 150px; }
#alignExample2{ background-color: blue; height: 200px; width: 100px; position: absolute; top: 150px; left: 540px; }