Skip to content
Snippets Groups Projects
Commit 022c3600 authored by Sven Kästle's avatar Sven Kästle
Browse files

feat: Imported the annotation prototype 

page: annotation_document.html
url: http://localhost:8080/pages/annotation_document.html
parent f7e06075
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css 0 → 100644
+ 70
− 0
View file @ 022c3600
ol {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.mainpage {
display: flex;
box-sizing: border-box;
font-family: Arial;
background-color: #f1f1f1;
height: 100%;
}
.rightcolumn {
float: right;
width: 25%;
display: inline-block;
/* background-color: blue; */
}
.leftcolumn {
float: left;
width: 75%;
display: inline-block;
/* background-color: yellow; */
}
.rightcontent {
margin: 10px;
}
.leftcontent {
margin: 10px;
/* background-color: white; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
padding: 5px;
display: inline-block;
background-color: white;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.cardAvatar {
width: 50px;
height: 50px;
background: orange;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 50px;
color: white;
font-size: 25px;
display: inline-block;
vertical-align: middle;
}
.cardContent {
color: black;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.spacing {
height: 10px;
/* background-color: orange; */
}
.hl {
background-color: yellow;
}
gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js 0 → 100644
+ 93
− 0
View file @ 022c3600
$(document).ready(function() {
console.log("start ready function");
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("start annotation");
var text = generateId(6);
var user = generateId(1).toUpperCase();
var color = getRandomColor();
$.fn.addAnnotation(user, text, color);
window.close;
},
items: {
"annotation": {name: "Annotation", icon: "edit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
$.fn.addAnnotation = function(title, text, color) {
var list = $('#annotations')
var selection = getSelectedText()
if (selection.length > 0) {
var replacement = $('<span></span>').css('background-color', color).html(selection);
var replacementHtml = $('<div>').append(replacement.clone()).remove().html();
$('#hiho').html( $('#hiho').html().replace(selection, replacementHtml) );
if ($('#annotations li').filter( ".listelement" ).length > 0) {
list.prepend(
$('<li>').attr('class', 'spacing')
)
}
list.prepend(
$('<li>').attr('class', 'listelement').append(
$('<div>').attr('class', 'card').append(
$('<div>').attr('class', 'cardAvatar').css('background-color', color).append(
$('<b>').append(title)
)
).append(
$('<div>').attr('class', 'cardContent').append(
$('<span>').append(selection.substring(0, 5) + "...")
)
)
)
);
}
}
console.log("end ready function");
});
function getSelectedText() {
if(window.getSelection){
return window.getSelection().toString();
}
else if(document.getSelection){
return document.getSelection();
}
else if(document.selection){
return document.selection.createRange().text;
}
}
function generateId(length) {
var id = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (var i = 0; i < length; i++) {
id += possible.charAt(Math.floor(Math.random() * possible.length));
}
return id;
}
function getRandomColor() {
return 'rgb(' +
(Math.floor(Math.random()*56)+170) + ', ' +
(Math.floor(Math.random()*56)+170) + ', ' +
(Math.floor(Math.random()*56)+170) +
')';
}
\ No newline at end of file
gemeinsamforschen/src/main/webapp/pages/annotation_document.html 0 → 100644
+ 78
− 0
View file @ 022c3600
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>muster-gemeinsam-forschen</title>
<!-- css - annotationStyle -->
<link rel="stylesheet" type="text/css" href="../assets/css/annotationStyle.css">
<!-- css - contextMenu -->
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<!-- css - bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- css - styles -->
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- css - font awesome -->
<link rel="stylesheet" href="../assets/fonts/font-awesome.min.css">
<!-- css - sidebar -->
<link rel="stylesheet" href="../assets/css/Sidebar-Menu.css">
<!-- js - jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- js - bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- js - jQuery ui position -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- js - contextMenu script -->
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<!-- js - annotationScript -->
<script src="../assets/js/annotationScript.js"></script>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">overview</a></li>
<li><a href="#">Quizfrage</a></li>
<li><a href="#">ePortfolio</a></li>
<li><a href="#">Beitrag</a></li>
<li><a href="#">Bewertung</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<div class="page-content-wrapper">
<div class="container-fluid">
<h1>gemeinsam Forschen
<a href="#">
<span class="glyphicon glyphicon-envelope"
style="font-size:27px;margin-top:-17px;margin-left:600px;"></span>
</a>
<a href="#">
<span class="glyphicon glyphicon-cog" style="font-size:29px;margin-left:5px;margin-top:-25px;"></span>
</a>
</h1>
</div>
<div class="mainpage">
<div class="leftcolumn">
<div class="leftcontent ">
<div class="text context-menu-one" id="hiho">
Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed. Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst.
</div>
</div>
</div>
<div class="rightcolumn">
<div class="rightcontent">
<ol id="annotations">
</ol>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment