<!--
TODO:
* Meta-Element: Sticky Arrow
* Put styles of early elements (button , window etc.) into stylesheet instead of inline
* clear seperation of interactive and non interactive elements. GUI should be hidden in markup but made visible when external javascript is present. Thus: gui Javascript can go to a file.
Thus: element CSS and essential displaying stuff-css must remain in the file.
DONE:
* löschen
* Rudmentäres Editieren
* Drag/Drop schachteln
* Drag Drop
* Resize
* set up simple, universal markup that helps to style tables etc. via markdown
* meaningful positioning of the text-edit element via pos. absolute
* Change canvas size
* activate/Deactivate markdown parsing for each element type (when markdown, server textarea, otherwise simple input): Simple parsing now activated via editableContent-plaintext to the editableArea
* Meta Elements: Note (shrinkwrapping/scrolling Text)
--->
<!-- LICENSE: © Jan Dittrich & Contributors, 2015, MIT License (See LICENSE.md) -->
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Edittests</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="Edittests_files/jquery.js"></script>
<script src="Edittests_files/jquery-ui.js"></script>
<script src="Edittests_files/showdown.js"></script>
<script src="Edittests_files/showdownUIExtensions.js"></script>
<script src="Edittests_files/mousetrap.js"></script>
<script src="Edittests_files/jqUiEditMD2HTML.js"></script>
<link href="Edittests_files/jquery-ui.css" rel="stylesheet">
<style>
#toolbar, #widgetCollectionWrap{display:none;}
body, div{
padding:0;
margin:0;
}
.mockElement {
width: 50px;
height: 50px;
position: absolute;
}
.editableArea>p{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#canvas .custom-selected.ui-resizable>.ui-resizable-handle{
pointer-events: auto;
background: rgba(0,0,0,0); /*the following stylesheet shows these again. If only html is saved (and the mockup not interactive thus, they are hidden)*/
}
</style>
<link href="Edittests_files/quickMockupInteractive.css" rel="stylesheet">
<!--elements -->
<style>
/*all*/
.newMockElement, .mockElement{
box-sizing: border-box;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}
.newMockElement > div.editableArea, .mockElement > div.editableArea{
width: 100%;
box-sizing: border-box;
}
.newMockElement, .mockElement{
width:150px; /*if not specifies otherwise*/
}
/*buttons*/
.newMockElement.button, .mockElement.button{
justify-content: center;
align-items: center;
display: flex;
}
/*Window*/
/*tabs*/
.newMockElement.tabs, .mockElement.tabs{
background: rgba(0,0,0,0);
width:30em;
}
.newMockElement.tabs>.editableArea, .mockElement.tabs>.editableArea{
border-bottom: 2px solid gray;
background: rgba(0,0,0,0);
box-sizing: border-box;
width:100%;
margin:0;
}
.newMockElement.tabs>.editableArea a, .mockElement.tabs>.editableArea a{
pointer-events: none; /*prevent accidental navigation*/
}
.newMockElement.tabs>.editableArea>ul, .mockElement.tabs>.editableArea>ul{
box-sizing: border-box;
width:100%;
margin:0;
padding:0;
}
.newMockElement.tabs>.editableArea>ul>li, .mockElement.tabs> .editableArea>ul>li{
display: inline-block;
padding: 5px 16px;
border: 1px solid gray;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin: 0 0 -2px 0.3em;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}
.mockElement.tabs>.editableArea>ul>li.item-highlighted{
background: #DDD;
}
.newMockElement.label .mockElement.label{
width:7em;
}
/*headline*/
.newMockElement.headline>h1, .mockElement.headline>h1{
margin:0;
}
/*paragraph*/
.newMockElement.paragraph>p{
margin:0;
}
/*table*/
.newMockElement.table, .mockElement.table{
width:10em;
}
.newMockElement.table table, .mockElement.table table{
width: 100%;
border-collapse: collapse;
}
.newMockElement.table table td, .mockElement.table table td, .newMockElement.table table th, .mockElement.table table th{
border: 1px solid gray;
}
.newMockElement.table table th, .mockElement.table table th{
border-bottom: 2px solid black;
}
/*just a rectangle*/
.newMockElement.rect , .mockElement.rect{
border:2px solid #333;
width:200px;
height:200px;
}
/*optionlist*/
.newMockElement.optionRadiobutton , .mockElement.optionRadiobutton{
box-sizing: border-box;
}
.newMockElement.optionRadiobutton .editableArea li, .mockElement.optionRadiobutton .editableArea li{
display: block;
}
.newMockElement.optionRadiobutton ul, .mockElement.optionRadiobutton ul{
margin:0;
padding: 0;
}
.newMockElement.optionRadiobutton .editableArea li::before, .mockElement.optionRadiobutton .editableArea li::before{
content:"○ "
}
.newMockElement.optionRadiobutton .editableArea li.item-highlighted::before, .mockElement.optionRadiobutton .editableArea li.item-highlighted::before{
content:"◉ "
}
/*Checkboxes*/
.newMockElement.optionCheckbox , .mockElement.optionCheckbox{
box-sizing: border-box;
}
.newMockElement.optionCheckbox .editableArea li, .mockElement.optionCheckbox .editableArea li{
display: block;
}
.newMockElement.optionCheckbox ul, .mockElement.optionCheckbox ul{
margin:0;
padding: 0;
}
.newMockElement.optionCheckbox .editableArea li::before, .mockElement.optionCheckbox .editableArea li::before{
content:"☐ "
}
.newMockElement.optionCheckbox .editableArea li.item-highlighted::before, .mockElement.optionCheckbox .editableArea li.item-highlighted::before{
content:"☑ ";
}
/*Dropdown*/
.dropdownList{
border:2px solid gray;
border-radius: 3px;
padding: 0px 0 0px 0.4em;
display: table;
}
.dropdownList .editableArea{
display: table-cell;
text-align: center;
height: 100%;
vertical-align: middle;
}
.dropdownList .mockelement-dropdown-arrow{
border-left: 1px solid rgb(128, 128, 128);
padding: 0px 0.4em;
display: table-cell;
text-align: center;
height: 100%;
vertical-align: middle;
background: #EEE;
}
/*loading indicator*/
.newMockElement.loadingIndicator,
.mockElement.loadingIndicator{
border: 1px solid gray;
border-radius: 2px;
background-color: white;
padding: 0;
justify-content: center;
align-items: center;
display: flex;
position: relative
}
.newMockElement.loadingIndicator .bar,
.mockElement.loadingIndicator .bar{
margin: 0;
background-color: rgba(0, 0, 0, 0.21);
width: 70%;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
text-align: center;
}
/*entries vertical*/
.newMockElement.entries-horizontal, .mockElement.entries-horizontal{
background: rgba(0,0,0,0);
width:30em;
}
.newMockElement.entries-horizontal .editableArea, .mockElement.entries-horizontal .editableArea{
background: rgba(0,0,0,0);
box-sizing: border-box;
width:100%;
height: 100%;
margin:0;
}
.newMockElement.entries-horizontal .editableArea ul, .mockElement.entries-horizontal .editableArea ul{
box-sizing: border-box;
width:100%;
height: 100%;
margin:0;
padding:0;
display: table;
border-collapse: collapse;
}
.newMockElement.entries-horizontal ul li, .mockElement.entries-horizontal ul li{
display: table-cell;
padding: 0.2em;
border: 1px solid gray;
border-collapse: collapse;
margin: 0;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
text-align: center;
vertical-align: middle;
}
.mockElement.entries-horizontal ul li.item-highlighted{
background: #DDD;
}
/*entries horizontal*/
.newMockElement.entries-vertical, .mockElement.entries-vertical{
background: rgba(0,0,0,0);
width:30em;
}
.newMockElement.entries-vertical .editableArea, .mockElement.entries-vertical .editableArea{
background: rgba(0,0,0,0);
box-sizing: border-box;
width:100%;
height: 100%;
margin:0;
}
.newMockElement.entries-vertical .editableArea ul, .mockElement.entries-vertical .editableArea ul{
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.newMockElement.entries-vertical ul li, .mockElement.entries-vertical ul li{
margin: 0px;
font-family: "Comic Sans MS","Comic Sans",cursive;
width: 99%;
padding: 0.2em;
flex: 1 1 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid rgb(128, 128, 128);
border-collapse: collapse;
margin-top: -1px;
}
.mockElement.entries-vertical ul li.item-highlighted{
background: #DDD;
}
/*boxes vertical*/
.newMockElement.boxes-horizontal, .mockElement.boxes-horizontal{
background: rgba(0,0,0,0);
width:30em;
}
.newMockElement.boxes-horizontal .editableArea, .mockElement.boxes-horizontal .editableArea{
background: rgba(0,0,0,0);
box-sizing: border-box;
width:100%;
height: 100%;
margin:0;
}
.newMockElement.boxes-horizontal .editableArea ul, .mockElement.boxes-horizontal .editableArea ul{
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row;
}
.newMockElement.boxes-horizontal ul li, .mockElement.boxes-horizontal ul li{
padding: 0.2em;
border: 1px solid rgb(128, 128, 128);
font-family: "Comic Sans MS","Comic Sans",cursive;
margin: 0.2em;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
}
.mockElement.boxes-horizontal ul li.item-highlighted{
background: #DDD;
}
/*boxes vertical*/
.newMockElement.boxes-vertical, .mockElement.boxes-vertical{
background: rgba(0,0,0,0);
width:30em;
}
.newMockElement.boxes-vertical .editableArea, .mockElement.boxes-vertical .editableArea{
background: rgba(0,0,0,0);
box-sizing: border-box;
width:100%;
height: 100%;
margin:0;
}
.newMockElement.boxes-vertical .editableArea ul, .mockElement.boxes-vertical .editableArea ul{
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.newMockElement.boxes-vertical ul li, .mockElement.boxes-vertical ul li{
margin: 1.5% 0 0 0;
font-family: "Comic Sans MS","Comic Sans",cursive;
width: 99%;
padding: 0.2em;
flex: 1 1 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid rgb(128, 128, 128);
border-collapse: collapse;
}
.mockElement.boxes-vertical ul li.item-highlighted{
background: #DDD;
}
/*meta: note*/
.newMockElement.note, .mockElement.note{
background: #f7ee9e;
background: linear-gradient(to bottom, #f7ee9e 0%,#e0d68f 99%);
border: 0px none;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
transform: rotate(-3deg);
width:150px;
height:150px;
}
.newMockElement.note > *, .mockElement.note > *{
transform: rotate(3deg); /*so the text is not rotated*/
}
.newMockElement.note .editableArea, .mockElement.note .editableArea{
padding:0.5em;
}
/*Meta: arrow note*/
.newMockElement.arrownote, .mockElement.arrownote{
background: #f7ee9e;
border: 0px none;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width:150px;
height:30px;
}
.newMockElement.arrownote .editableArea, .mockElement.arrownote .editableArea{
padding:0.2em;
}
.newMockElement.arrownote::before, .mockElement.arrownote::before{
width: 0;
height: 0;
margin-left:-15px;
margin-top:0px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #eae193 transparent transparent;
content:"";
position:absolute
}
.newMockElement.note .editableArea, .mockElement.note .editableArea{
padding:0.5em;
}
</style>
</head>
<body style="cursor: auto;">
<div id="appContainer">
<div class="ui-resizable" id="widgetCollectionWrap">
<ul id="widgetCollection">
<!--
Tentative Description for creating elements:
In each list Element goes a div. This Div is the Interface Element which can be dragged to the canvas.
Each element has the class "newMockElement". This is changed to "mockElement" when it is added to the cavas.
Also each element can have other classes.
In the Div there can be other nested elements.
One of these elements *can* hold text that can be edited. This is done by adding the attribute "data-editablearea" to this element.
The way the text is edited can be customized, by adding the attribute data-editable-mode= to it. The attribute can have the following values: "markdown", "uielements", "plain". If you set nothing, markdown is assumed.
markdown: Is markdown with a table extension and the possibility to create radiobuttons via "(x)" and checkboxes via [x]
uielements: for creating lists where the items are seperated by a ";". List items can highlighted (item-highlighted class is added to the <li> element) by adding a "*" in front: "normal; normal; *I am Active; normal item again; …"
plain: plain text
DO: give your element an additional (aside the newMockupElement) class: "newMockupElement fooBarClass".
DO: Use ">" (direct child) instead of the " " (descendant operator); If elements are nested it can have strange side effects since the nested element will have styles that it did not have before.
DONT:
* give the element an id. The id is set by the script.
-->
<li>
<div class="newMockElement ui-draggable ui-draggable-handle" style="
justify-content: center;
align-items: center;
display: flex;
border:2px solid #333;
border-radius:3px;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
background-white;
width: 8em;
height:3em;
" data-editable-content="OK" data-editable-mode="plain">
<span class="editableArea">OK</span>
</div>
</li>
<li><!-- Dialog Window -->
<div class="newMockElement dialogWindow ui-draggable ui-draggable-handle" data-editable-content="myWindow" data-editable-mode="plain" style="
border:2px solid gray;
border-radius:3px;
width: 400px;
height:200px;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
">
<div style="
background-color:silver;
border-bottom: 2px solid #333;
border-radius: 3px;
padding:7px;
height:1.6em;
">
<span class="editableArea" style="float:left; padding:4px;">Titel</span>
<span style="padding:4px; font-size:1.5em; margin-top: -0.4em; float:right;">×</span>
</div>
</div>
</li>
<li><!-- Tabs -->
<div class="newMockElement tabs ui-draggable ui-draggable-handle" data-editable-content="Tab1;*Tab2; Tab3" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement label ui-draggable ui-draggable-handle" data-editable-content="label" data-editable-mode="plain">
<div class="editableArea">Label</div>
</div>
</li>
<li>
<div class="newMockElement headline ui-draggable ui-draggable-handle" data-editable-content="headline1" data-editable-mode="plain">
<h1 class="editableArea">Headline1</h1>
</div>
</li>
<li>
<div class="newMockElement paragraph ui-draggable ui-draggable-handle" data-editable-content="
Paragraph
(Markdown **Supported** !)">
<div class="editableArea">
Paragraph
(Markdown<strong> Supported</strong>!)
</div>
</div>
</li>
<li>
<div class="newMockElement table ui-draggable ui-draggable-handle" data-editable-content="
| h1 | h2 | h3 |
|:------|:-------:|--------:|
| 100 | [a][1] | ![b][2] |
| *foo* | **bar** | ~~baz~~ |
">
<div class="editableArea">
<table><thead>
<tr>
<th style="text-align:left;">h1</th>
<th style="text-align:center;">h2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">100</td>
<td style="text-align:center;">[a][1]</td>
</tr>
</tbody></table>
</div>
</div>
</li>
<li>
<div class="newMockElement rect ui-draggable ui-draggable-handle">
</div>
</li>
<li>
<div class="newMockElement optionCheckbox ui-draggable ui-draggable-handle" data-editable-content="bla; bla; *basd" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>option</li>
<li class="item-highlighted">other option</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement optionRadiobutton ui-draggable ui-draggable-handle" data-editable-content="bla; bla; *basd" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>option</li>
<li class="item-highlighted">other option</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement dropdownList ui-draggable ui-draggable-handle" data-editable-content="DropdownTitle" data-editable-mode="plain">
<span class="editableArea">Dropdown Title</span><span class="mockelement-dropdown-arrow">▾</span>
</div>
</li>
<li>
<div class="newMockElement loadingIndicator ui-draggable ui-draggable-handle">
<div class="bar"></div>
70%
</div>
</li>
<li>
<div class="newMockElement entries-horizontal ui-draggable ui-draggable-handle" data-editable-content="entry1;entry2;*entry3" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>Entry1</li>
<li>Entry2</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement entries-vertical ui-draggable ui-draggable-handle" data-editable-content="entry1;entry2;*entry3" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>Entry1</li>
<li>Entry2</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement boxes-horizontal ui-draggable ui-draggable-handle" data-editable-content="entry1;entry2;*entry3" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>Entry1</li>
<li>Entry2</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement boxes-vertical ui-draggable ui-draggable-handle" data-editable-content="entry1;entry2;*entry3" data-editable-mode="uielements">
<div class="editableArea">
<ul>
<li>Entry1</li>
<li>Entry2</li>
</ul>
</div>
</div>
</li>
<li>
<div class="newMockElement meta-element note ui-draggable ui-draggable-handle" data-editable-content="Notes here!" data-editable-mode="markdown">
<div class="editableArea">
</div>
</div>
</li>
<li>
<div class="newMockElement meta-element arrownote ui-draggable ui-draggable-handle" data-editable-content="Notes here!" data-editable-mode="plain">
<div class="editableArea">
note!
</div>
</div>
</li>
</ul>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div></div>
<div id="canvasWrap">
<div style="height: 2000px; width: 2000px;" class="ui-droppable" id="canvas">
<!-- this is example content-->
<!-- this is example content-->
<div id="mockElement_26761610563949" style="position: absolute; top: 223px; left: 25px; z-index: auto; width: 788px; right: auto; height: 440px; bottom: auto;" class="rect ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable">
<div id="mockElement_20253848676149" style="position: absolute; top: 8px; left: 34px; width: 548px;" class="headline ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="I try to solve a problem" data-editable-mode="plain">
<h1 id="editableArea_20253848676149" class="editableArea">I try to solve a problem</h1>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div><div id="mockElement_21414535692512" class="dialogWindow ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="myWindow" data-editable-mode="plain" style="border: 2px solid gray; border-radius: 3px; width: 473px; height: 269px; font-family: "Comic Sans MS","Comic Sans",cursive; position: absolute; top: 43px; left: 34px; z-index: auto; right: auto; bottom: auto;">
<div style="
background-color:silver;
border-bottom: 2px solid #333;
border-radius: 3px;
padding:7px;
height:1.6em;
">
<span id="editableArea_21414535692512" class="editableArea" style="float:left; padding:4px;">myWindow</span>
<span style="padding:4px; font-size:1.5em; margin-top: -0.4em; float:right;">×</span>
</div>
<div id="mockElement_70594603030604" style="position: absolute; top: 59px; left: 27px; height: 167px; width: 396px; z-index: auto; right: auto; bottom: auto;" class="tabs ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="Tab1;*Tab2; Tab3" data-editable-mode="uielements">
<div id="editableArea_70594603030604" class="editableArea"><ul><li>Tab1</li><li class="item-highlighted">Tab2</li><li> Tab3</li></ul></div>
<div id="mockElement_58964013194714" style="position: absolute; top: 47.4333px; left: 17px; z-index: auto; width: 150px; right: auto; height: 50px; bottom: auto;" class="optionRadiobutton ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="bla;*basd" data-editable-mode="uielements">
<div id="editableArea_58964013194714" class="editableArea"><ul><li>bla</li><li class="item-highlighted">basd</li></ul></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div><div id="mockElement_97303047754418" style="position: absolute; top: 57.4333px; left: 167px; width: 144px; height: 32px; z-index: auto; right: auto; bottom: auto;" class="dropdownList ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="DropdownTitle" data-editable-mode="plain">
<span id="editableArea_97303047754418" class="editableArea">DropdownTitle</span><span class="mockelement-dropdown-arrow">▾</span>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div><div id="mockElement_99523679837529" class="ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" style="justify-content: center; align-items: center; display: flex; border: 2px solid rgb(51, 51, 51); border-radius: 3px; font-family: "Comic Sans MS","Comic Sans",cursive; width: 128px; height: 31px; position: absolute; top: 122px; left: 182px; z-index: auto; right: auto; bottom: auto;" data-editable-content="OK" data-editable-mode="plain">
<span id="editableArea_99523679837529" class="editableArea">OK</span>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div><div id="mockElement_44060612623607" style="position: absolute; top: 239px; left: 8px; z-index: auto; width: 185px; right: auto; height: 20px; bottom: auto;" class="optionCheckbox ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="* Preview" data-editable-mode="uielements">
<div id="editableArea_44060612623607" class="editableArea"><ul><li class="item-highlighted"> Preview</li></ul></div>
<div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-nw"></div></div></div><div id="mockElement_91170874821183" style="position: absolute; top: 312px; left: 34px; height: 117px; width: 473px; z-index: auto; right: auto; bottom: auto;" class="rect ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable">
<div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-nw"></div><div id="mockElement_71227511541098" style="position: absolute; top: 6px; left: 188px; width: 94px; height: 20px; z-index: auto; right: auto; bottom: auto;" class="label ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="Preview X" data-editable-mode="plain">
<div id="editableArea_71227511541098" class="editableArea">Preview X</div>
<div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-nw"></div></div></div><div id="mockElement_43284444404035" style="position: absolute; top: 345px; left: 28px; z-index: auto; width: 160px; right: auto; height: 50px; bottom: auto;" class="table ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="
| h1 | h2 | h3 |
|:------|:-------:|--------:|
| 100 | [a][1] | ![b][2] |
| *foo* | **bar** | ~~baz~~ |
">
<div id="editableArea_43284444404035" class="editableArea"><pre><code> | h1 | h2 | h3 |
|:------|:-------:|--------:|
| 100 | [a][1] | ![b][2] |
| *foo* | **bar** | ~~baz~~ |
</code></pre></div>
<div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-nw"></div></div><div id="mockElement_96988484506062" style="position: absolute; top: 325px; left: 495px;" class="meta-element arrownote ui-draggable ui-draggable-handle mockElement ui-resizable ui-droppable" data-editable-content="Preview is here!" data-editable-mode="plain">
<div id="editableArea_96988484506062" class="editableArea">Preview is here!</div>
<div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90; display: block;" class="ui-resizable-handle ui-resizable-nw"></div></div></div>
<!-- example content end -->
<!-- example content end -->
</div>
</div>
<div id="toolbar">
<button class="delete-element-button">Delete Element</button>
<button class="change-canvasize-button">Change Canvas Size</button>
</div>
<script>
$(function(){
var makeMovableElement = function(element){
$(element).draggable({
distance: 4,
disabled:false,
revert:"invalid",
zIndex: 999
}).resizable({
handles:"all"
});
}
var setupElement = function(element){
makeMovableElement(element);
makeDropableElement(element);
$(element).editText();
makeSelectableElement(element,"#canvas");
}
var makeDropableElement= function(element){
$(element).droppable({
accept: ".mockElement, .newMockElement",
tolerance: "fit",
greedy: true, //you can only attach it to one element, otherwise every nested dropable recieves
hoverClass: "drop-hover",
drop: function( event, ui ) {
//calculate offset of both
var elementToAppend = null;
if(ui.draggable.hasClass("newMockElement")){//if this is a new element
elementToAppend = ui.draggable.clone(false)
elementToAppend.removeClass("newMockElement");
elementToAppend.addClass("mockElement");
elementToAppend.css("position","absolute");//always has relative otherwise = glitches
var idnr = parseInt(Math.random()*100000000000000); //not exactly a UUID but does the job for now.
elementToAppend.attr("id","mockElement_"+idnr);
//TODO: assign an id "editableArea"+idnr
elementToAppend.find(".editableArea").first().attr("id","editableArea_"+idnr)
setupElement(elementToAppend);
}else{
elementToAppend = ui.draggable;
}
var draggableOffset = ui.helper.offset(); //was ui.draggable
var droppableOffset = $(this).offset();
var newLeft = draggableOffset.left - droppableOffset.left;
var newTop = draggableOffset.top - droppableOffset.top;
elementToAppend.appendTo($(this)).css({top:newTop+"px", left:newLeft+"px"});
}
});//droppable End
}//droppableWrapper End
var makeSelectableElement = function(element,selectorCanvasParam){
var $element = $(element);
var selectorCanvas = selectorCanvasParam ? selectorCanvasParam : "body"; //if selectorCanvas is defined, set it to a standard value
var selectedClassParam = "custom-selected";
var elementSelector = ".mockElement"
var $canvas = $(selectorCanvas);
//deselect if canvas is clicked
$canvas.click(function(event){
if(event.target=== $canvas[0]){
$canvas.find("." + selectedClassParam).removeClass(selectedClassParam);
}
})
//select the this element, deselect others
$canvas.find("." + selectedClassParam).removeClass(selectedClassParam);
$element.addClass(selectedClassParam); /*custom selected, since there is a jQuery UI selected, that might be used later*/
$element.mousedown(function(event){
if($(event.target).closest(elementSelector)[0] === $element[0]){ //either it is the same element that was clicked, or the element is the clicked element’s the first parent that is a mock element.
// ist das Element das nächste parent element vom geklickten element aus: select.
// wenn nicht... dann nix.
$canvas.find("." + selectedClassParam).removeClass(selectedClassParam);
$element.addClass(selectedClassParam); /*custom selected, since there is a jQuery UI selected, that might be used later*/
}
});
}
var deleteElement = function(){
var canvasSelector = "body";
var element2BDeletedSelector = ".custom-selected";
$canvas = $(canvasSelector);
$canvas.find(element2BDeletedSelector).remove();
}
var setupGUI = function(){
$("#changeCanvasSizeDialog").dialog({
autoOpen:false,
open: function( event, ui ) {
var $container = $("#canvas");
var currentHeight = $container.height();
var currentWidth = $container.width();
//show current dimensions in the input filds
$(this).
find('input[name="height"]').
val(currentHeight);
$(this).
find('input[name="width"]').
val(currentWidth);
},
buttons: [
{
text: "OK",
click: function() {
var $container = $("#canvas");
$container.
height(
$(this).
find('input[name="height"]')
.val()
);
$container.
width(
$(this).
find('input[name="width"]').
val()
);
$(this).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$(this).dialog( "close" );
}
}
]
});
//setup toolbar
///setup toolbar-delete button
$("#toolbar .delete-element-button").click(deleteElement); //delete button
Mousetrap.bind('del', function() { deleteElement()}); //keyboard shortcut
$("#toolbar .change-canvasize-button").click(function(){
$("#changeCanvasSizeDialog").dialog("open");
});
//setup sidebar resize
$('#widgetCollectionWrap').resizable({
handles: 'e',
maxWidth:800,
})
//setup canvas
makeDropableElement("#canvas");
// prevent navigating away by accident
window.onbeforeunload = function(){
return "do you want to close the application? Unsaved changes will be lost (use your browsers save function for saving)"
};
};
setupGUI();
//setup elements already on the page
$(".mockElement").each(function(index, element){
$(element).find(".ui-resizable-handle").remove();//otherwise we get them twice, they are saved with the file and created again when the element is initialized
setupElement(element);
});
//make new siebar elements draggabe
$(".newMockElement").draggable({
distance: 4,
disabled:false,
appendTo: "body",
helper:"clone",
revert:"invalid",
zIndex:999
});
});
</script>
</div><div aria-labelledby="ui-id-1" aria-describedby="changeCanvasSizeDialog" role="dialog" tabindex="-1" style="position: absolute; height: auto; width: 300px; top: 323.5px; left: 806px; display: none;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle"><span class="ui-dialog-title" id="ui-id-1"> </span><button title="Close" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" type="button"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span></button></div><div style="display: block; width: auto; min-height: 17px; max-height: none; height: auto;" id="changeCanvasSizeDialog" class="dialog ui-dialog-content ui-widget-content">
<p>Change the size of the Canvas</p>
<label>Width:<br><input value="2000" name="width" type="text"></label><br>
<label>Height:<br><input value="2000" name="height" type="text"></label>
</div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button"><span class="ui-button-text">OK</span></button><button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button"><span class="ui-button-text">Cancel</span></button></div></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-nw"></div></div></body></html>