This is my script. It is doing 2 things.
- on mouse up it highlights the text
- on highlight text, when it is clicked, it opens up a context Menu
What I want to do next is:
- take the highlighted text as
key -
take the selected option from context Menu as
value -
save
key:valuepairs inJSONformat -
write
JSONto file
I am new to web, need suggestions on how to do it. so far , my menu items are clickable but what to do next and how to implement what i want to implement is the question i want help with.
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="context_menu.js"></script>
<style type="text/css">
.red {
color: red;
};
body {
font-family: "Roboto", san-serif;
}
.center{
text-align: center;
}
.menu {
width: 120px;
z-index: 1;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: fixed;
display: none;
transition: 0.2s display ease-in;
.menu-options {
list-style: none;
padding: 10px 0;
z-index: 1;
.menu-option {
font-weight: 500;
z-index: 1;
font-size: 14px;
padding: 10px 40px 10px 20px;
// border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}
}
button{
background: grey;
border: none;
.next{
color:green;
}
&[disabled="false"]:hover{
.next{
color: red;
animation: move 0.5s;
animation-iteration-count: 2;
}
}
}
@keyframes move{
from{
transform: translate(0%);
}
50%{
transform: translate(-40%);
}
to{
transform: transform(0%);
}
}
</style>
<body>
<div class="menu">
<ul class="menu-options">
<li class="menu-option" id="demo" onclick="myFunction()" >Animal</li>
<li class="menu-option">Bird</li>
<li class="menu-option">Human</li>
<li class="menu-option">Alien</li>
<li class="menu-option">No one</li>
</ul>
</div>
<div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset imply dummy text sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</body>
<script>
const menu = document.querySelector(".menu");
console.log(menu)
let menuVisible = false;
const toggleMenu = command => {
console.log("Togel : "+command)
menu.style.display = command === "show" ? "block" : "none";
menuVisible = !menuVisible;
};
const setPosition = ({ top, left }) => {
console.log(top)
console.log(left)
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
toggleMenu("show");
};
// window.addEventListener("click", e => {
//
// });
$(function() {
thisRespondHightlightText(".select--highlight--active");
});
/*thisRespondHightlightText(".select--highlight--active");*/
function thisRespondHightlightText(thisDiv){
$(thisDiv).on("mouseup", function () {
console.log ("EVENT")
var selectedText = getSelectionText();
var selectedTextRegExp = new RegExp(selectedText,"g");
var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
console.log("Text "+ selectedText)
$(this).html(text);
if (selectedText == ""){
toggleMenu("hide");
}
else{
const origin = {
left: 100 ,
top: 100
};
setPosition(origin);
}
});
}
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
alert("In else")
text = document.selection.createRange().text;
}
return text;
}
function myFunction() {
document.getElementById("demo").innerHTML = "I am an Animal!";
}
</script>
</head>
</html>
Aucun commentaire:
Enregistrer un commentaire