Skip to content

Instantly share code, notes, and snippets.

@vadim8kiselev

vadim8kiselev/index.html

Last active November 29, 2017 00:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vadim8kiselev/d5f9d9cb21a9c2d414da8bf9c69b9ba6 to your computer and use it in GitHub Desktop.
Save vadim8kiselev/d5f9d9cb21a9c2d414da8bf9c69b9ba6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Task 2</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page">
<input id="image-loader" type="file" onchange="previewFile()" style="display: none">
<input id="content-loader" type="file" onchange="importJson()" style="display: none">
<nav>
<ul class="menu">
<li>
<a href="#">File</a>
<ul id="file-sub-menu" class="sub-menu">
<li><a href="#" data-command='importJSON'>Import</a></li>
<li><a href="#" data-command='exportJSON'>Export</a></li>
<li><a href="#" data-command="print">Print</a></li>
<li><a href="#" data-command="custom">Create Actions</a></li>
</ul>
</li>
<li>
<a href="#">Edit</a>
<ul id="edit-sub-menu" class="sub-menu">
<li><a href="#" data-command='undo'>Undo</a></li>
<li><a href="#" data-command='redo'>Redo</a></li>
<li><a href="#" data-command='cut'>Cut</a></li>
<li><a href="#" data-command='copy'>Copy</a></li>
<li><a href="#" data-command='paste'>Paste</a></li>
<li><a href="#" data-command='pastePlainText'>Paste as text</a></li>
</ul>
</li>
</ul>
<ul class="menu toolbar">
<li><a href="#" data-command='undo'><i class='fa fa-undo'></i></a></li>
<li><a href="#" data-command='redo'><i class='fa fa-repeat'></i></a></li>
<li><a href="#" data-command='bold'><i class='fa fa-bold'></i></a></li>
<li><a href="#" data-command='italic'><i class='fa fa-italic'></i></a></li>
<li><a href="#" data-command='underline'><i class='fa fa-underline'></i></a></li>
<li><a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a></li>
<li><a href="#" data-command='justifyCenter'><i class='fa fa-align-center'></i></a></li>
<li><a href="#" data-command='justifyRight'><i class='fa fa-align-right'></i></a></li>
<li>
<a href="#" data-command="insertTable"><i class="fa fa-table"></i></a>
<ul class="sub-menu">
<li><input type="text" id="rows-number" placeholder="Number of rows:"></li>
<li><input type="text" id="cols-number" placeholder="Number of columns:"></li>
<li><a href="#" data-command="insertTable">Apply</a></li>
</ul>
</li>
<li>
<a href="#" data-command='insertimage'><i class='fa fa-image'></i></a>
<ul class="sub-menu">
<li><a href="#" data-command='insertimageFile'>File</a></li>
<li><a href="#" data-command='insertimage'>Link</a></li>
</ul>
</li>
</ul>
</nav>
<div id='editor' contenteditable>
<p>Text area. Try to write some text or paste an image</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Raw
index.js
(function ($) {
const customActions = [
{
name: 'alert',
icon: 'fa-bolt',
action: function() {
alert("ALERT")
}
},
{
name: 'strikeThrough',
icon: 'fa-strikethrough',
action: function() {
document.execCommand("strikeThrough", false, null)
}
}
];
//$('a[data-command]').click(function (e) {
$('nav').on('click', 'a[data-command]', function (e) {
updateFocus()
var command = $(this).data('command')
let flag = false;
customActions.forEach((customAction) => {
if (command === customAction.name) {
customAction.action();
flag = true;
}
});
if (flag) {
return;
}
if (command === 'insertimageFile') {
$('#image-loader').click();
} else if (command === 'insertimage') {
url = prompt('Enter the link here: ', '');
if (url) {
document.execCommand(command, false, url);
}
} else if (command === 'insertTable') {
document.execCommand("insertHTML", false, generateTable());
} else if (command === 'print') {
initPrint();
} else if (command === 'importJSON') {
$('#content-loader').click();
} else if (command === 'exportJSON') {
exportJSON();
} else if (command === 'custom') {
createCustomActions();
} else {
document.execCommand(command, false, null);
}
});
function updateFocus() {
setTimeout(function() {
$('#editor').focus();
}, 0);
}
function createCustomActions() {
customActions.forEach((customAction) => {
let menuPanel = $(".toolbar");
let name = customAction.name;
let icon = customAction.icon;
let button = `<li><a href='#' data-command='${name}'><i class='fa ${icon}'></i></a></li>`;
menuPanel.append(button);
});
}
$("input[type=file]").change(function () {
let inp = $("input[type=file]");
if (inp.val() !== "") {
inp.val("");
}
});
window.previewFile = function() {
let file = document.querySelector('input[type=file]').files[0];
let reader = new FileReader();
reader.addEventListener("load", function () {
document.execCommand('insertHTML', false, "<img src='" + reader.result + "'/>")
file.value = null
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function generateTable() {
let rowsNumber = $('#rows-number').val()
let colsNumber = $('#cols-number').val()
let table = document.createElement("table")
table.className = "custom-table"
let head = document.createElement("thead")
let headTr = document.createElement("tr")
for (let i = 0; i < colsNumber; i) {
let headTh = document.createElement("th")
headTr.appendChild(headTh)
}
head.appendChild(headTr);
let body = document.createElement("tbody")
for (let i = 0; i < rowsNumber; i) {
let bodyTr = document.createElement("tr")
for (let j = 0; j < colsNumber; j) {
let bodyTd = document.createElement("td")
bodyTr.appendChild(bodyTd)
}
body.appendChild(bodyTr)
}
table.appendChild(head)
table.appendChild(body)
return table.outerHTML
}
function initPrint() {
var printedWindow = window.open();
printedWindow.document.write(document.getElementById('editor').innerHTML);
printedWindow.document.close();
printedWindow.print();
printedWindow.close();
}
window.importJson = function() {
let file = document.querySelector('#content-loader').files[0];
let reader = new FileReader();
reader.addEventListener("load", function () {
let jsonObject = JSON.parse(reader.result);
$("#editor").html(jsonObject.data);
file.value = null;
}, false);
if (file) {
reader.readAsText(file);
}
}
function exportJSON() {
let blob, objJSON = {
title: "response",
data: $('#editor').html(),
};
blob = new Blob([JSON.stringify(objJSON)], {
type: "application/json"
});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, "response.json");
} else {
let a = window.document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "response.json";
window.document.body.appendChild(a);
a.click();
window.document.body.removeChild(a);
}
}
})(jQuery);
Raw
style.css
html, body {
margin: 0;
height: 100%;
}
input {
padding: 0;
border: 0;
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 20px;
}
input:focus {
outline: 0;
}
a {
cursor: pointer;
}
#page {
display: flex;
flex-flow: column;
height: 100%;
}
#editor {
overflow: auto;
padding: 1em;
resize: none;
outline: none;
flex: auto;
}
.toolbar {
text-align: left;
border: 1px solid #000;
padding: 0 10px;
}
.toolbar a {
text-align: center;
font-family: 'Candal';
color: black;
padding: 5px;
width: 1.5em;
margin: 0 -2px;
display: inline-block;
text-decoration: none;
}
a[data-command='redo'],
a[data-command='underline'],
a[data-command='justifyRight'] {
margin-right: 20px;
}
/*-------------------------------*/
ul.menu {
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
padding-left: 5px;
}
ul.menu > li {
float: left;
width: auto;
}
ul.menu > li a {
display: block;
width: auto;
text-decoration: none;
}
ul.menu a:hover {
background-color: #f8f8f8;
}
ul.menu li:hover ul {
visibility: visible;
border: 1px solid black;
}
ul.sub-menu {
z-index: 1;
text-align: left;
padding: 0;
visibility: hidden;
display: block;
position: absolute;
line-height: 28px;
background-color: #fff;
list-style-type: none;
}
ul.sub-menu > li {
width: 150px;
}
ul.sub-menu > li > input {
width: 150px;
}
ul.menu a, ul.sub-menu a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
padding: 0 10px;
}
.custom-table {
border: solid 1px #f2f2f2;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.custom-table thead th, td {
min-width: 50px;
border: solid 1px #f2f2f2;
text-shadow: 1px 1px 1px #fff;
}
.custom-table thead th {
background-color: #f2f2f2;
padding: 10px;
text-align: left;
}
.custom-table tbody td {
color: #333;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment