From 022c360094a4386d488deed9bdd22ecf4e637bc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Sun, 17 Jun 2018 16:04:52 +0200
Subject: [PATCH] feat: Imported the annotation prototype
page: annotation_document.html
url: http://localhost:8080/pages/annotation_document.html
---
.../webapp/assets/css/annotationStyle.css | 70 ++++++++++++++
.../main/webapp/assets/js/annotationScript.js | 93 +++++++++++++++++++
.../webapp/pages/annotation_document.html | 78 ++++++++++++++++
3 files changed, 241 insertions(+)
create mode 100644 gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
create mode 100644 gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
create mode 100644 gemeinsamforschen/src/main/webapp/pages/annotation_document.html
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
new file mode 100644
index 00000000..dd768598
--- /dev/null
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -0,0 +1,70 @@
+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;
+}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
new file mode 100644
index 00000000..7a4f9ecd
--- /dev/null
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -0,0 +1,93 @@
+$(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
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation_document.html b/gemeinsamforschen/src/main/webapp/pages/annotation_document.html
new file mode 100644
index 00000000..9d310067
--- /dev/null
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation_document.html
@@ -0,0 +1,78 @@
+<!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
--
GitLab