Last active
November 29, 2017 00:32
-
-
Save vadim8kiselev/d5f9d9cb21a9c2d414da8bf9c69b9ba6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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