<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/naimjeem/pen/qRvZMO?depth=everything&order=popularity&page=81&q=editable&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
html,
body {
position: relative;
height: 100%;
background: #fff;
}
.wrapper {
position: relative;
height: 100%;
}
pre {
max-width: 30em;
display: block;
background: #000;
color: white;
padding: 0.5em;
border: 1px solid black;
word-break: break-all;
word-wrap: break-word;
}
/* box */
.box-left {
width: 12rem;
height: 100%;
float: left;
margin: 9;
padding: 0.5rem;
background: #fff;
}
.box-right {
position: relative;
width: calc(100% - 12rem);
height: calc(100% - 5em);
float: left;
margin: 0;
margin-bottom: 1em;
padding: 0.5rem;
background: white;
overflow-y: auto;
}
/* left boxes */
.box-left div {
display: block;
padding: 0.5rem;
margin: 0;
margin-bottom: 0.2em;
text-align: center;
line-height: 2rem;
background: #2C3E50;
color: white;
cursor: all-scroll;
}
.box-left div:hover. .box-left div:focus {
background: #ecf0f1;
}
.reset,
.save {
text-align: right;
padding: 0.5em 1em;
background: #2C3E50;
color: white;
margin: 0.8em 0.2em;
cursor: pointer;
}
.reset:hover,
.save:hover,
.reset:focus,
.save:focus {
background: #95a5a6;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 1111 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
background: grey !important;
display: block !important;
padding: 0.5rem !important;
text-align: center !important;
line-height: 2rem !important;
color: white !important;
overflow:hidden;
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
background: grey !important;
line-height:1.2em;
min-height:5em;
}</style></head><body>
<div class="wrapper">
<div class="box-left">
<div data-tpl="header1" data-title="Header 1">
Header 1
</div>
<div data-tpl="header2" data-title="Header 2">
Header 2
</div>
<div data-tpl="header3" data-title="Header 3">
Header 3
</div>
<div data-tpl="shortparagraph" data-title="Short paragraph">
Short paragraph
</div>
<div data-tpl="mediumparagraph" data-title="Medium paragraph">
Medium paragraph
</div>
<div data-tpl="largeparagraph" data-title="Large paragraph">
Large paragraph
</div>
<div data-tpl="ullist" data-title="Ordened list">
Ordened list
</div>
<div data-tpl="ollist" data-title="Unordened list">
Unordened list
</div>
<div data-tpl="code" data-title="Code">
Code
</div>
</div>
<div class="box-right"></div>
<div class="options">
<button class="reset">Reset</button>
<button class="save">Save File</button>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js'></script>
<script >/**
* short localStorage
*/
var db = localStorage;
/**
* short query selector
*
* @param {<type>} el { parameter_description }
* @return {string} { description_of_the_return_value }
*/
var _ = function _(el) {
return document.querySelector(el);
};
/**
* Gets the tpl.
*
* @param {<type>} element The element
* @return {string} The tpl.
*/
var getTpl = function getTpl(element) {
return tpl[element];
};
/**
* Makes an editable.
*
* @return {string} { description_of_the_return_value }
*/
var makeEditable = function makeEditable() {
var elements = document.querySelectorAll('.drop-element');
var toArr = Array.prototype.slice.call(elements);
Array.prototype.forEach.call(toArr, function (obj, index) {
if (obj.querySelector('img')) {
return false;
} else {
obj.addEventListener('click', function (e) {
e.preventDefault();
obj.children[0].setAttribute('contenteditable', '');
obj.focus();
});
obj.children[0].addEventListener('blur', function (e) {
e.preventDefault();
obj.children[0].removeAttribute('contenteditable');
});
}
});
};
/**
* Removes a divs to save.
*
* @return {string} { description_of_the_return_value }
*/
var removeDivsToSave = function removeDivsToSave() {
var elements = document.querySelectorAll('.drop-element');
var toArr = Array.prototype.slice.call(elements);
var html = '';
Array.prototype.forEach.call(toArr, function (obj, index) {
obj.children[0].removeAttribute('contenteditable');
html += obj.innerHTML;
});
return html;
};
/**
* Templates
*
* @type string
*/
var tpl = {
'header1': '<h1>I am header 1</h1>',
'header2': '<h2>I am header 2</h2>',
'header3': '<h3>I am header 3</h3>',
'shortparagraph': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>',
'mediumparagraph': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>',
'largeparagraph': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>',
'ullist': '<ul><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ul>',
'ollist': '<ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol>',
'image': '<img src="http://lorempixel.com/400/200/">',
'code': '<pre>function say(name){\n return name;\n}</pre>'
};
/**
* init dragula
*
* @type function
*/
var containers = [_('.box-left'), _('.box-right')];
var drake = dragula(containers, {
copy: function copy(el, source) {
return source === _('.box-left');
},
accepts: function accepts(el, target) {
return target !== _('.box-left');
}
});
drake.on('out', function (el, container) {
if (container == _('.box-right')) {
el.innerHTML = getTpl(el.getAttribute('data-tpl'));
el.className = 'drop-element';
makeEditable();
db.setItem('savedData', _('.box-right').innerHTML);
}
if (container == _('.box-left')) {
el.innerHTML = el.getAttribute('data-title');
}
});
/**
* save in local storage
*/
if (typeof db.getItem('savedData') !== 'undefined') {
_('.box-right').innerHTML = db.getItem('savedData');
makeEditable();
};
/**
* reset
*/
_('.reset').addEventListener('click', function (e) {
e.preventDefault;
if (confirm('Are you sure !')) {
_('.box-right').innerHTML = '';
}
});
/**
* save to file
*/
_('.save').addEventListener('click', function (e) {
e.preventDefault();
var blob = new Blob([removeDivsToSave()], {
type: 'text/html;charset=utf-8'
});
db.setItem('savedData', _('.box-right').innerHTML);
saveAs(blob, 'file.html');
});
//# sourceURL=pen.js
</script>
</body></html>
