Skip to content

Instantly share code, notes, and snippets.

@Thomascountz
Last active September 19, 2018 15:13
Show Gist options
  • Save Thomascountz/032caa4b69f5c5a3d5c2b9c124e00619 to your computer and use it in GitHub Desktop.
Save Thomascountz/032caa4b69f5c5a3d5c2b9c124e00619 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="analyzeButton">Analyze</button>
<div class="editor" id="editor" contentEditable=true>
I love it here! I hate doing work.
</div>
<script src="ToneHighlightPrototype.js"></script>
</body>
</html>
.editor {
margin-top: 10px;
font-size: 24px;
font-family: Helvetica, Arial, Sans-Serif;
}
.editor:focus {
outline: none;
}
.joy {
background-color: #ffd70085;
}
.anger {
background-color: #b2222285;
}
window.onload = function() {
document.getElementById("editor").focus();
};
const mockResponse = [{
"sentence_id": 0,
"text": "I love it here!",
"tones": [{
"score": 0.880435,
"tone_id": "joy",
"tone_name": "Joy"
}]
}, {
"sentence_id": 1,
"text": "I hate doing work.",
"tones": [{
"score": 0.789717,
"tone_id": "anger",
"tone_name": "Anger"
}]
}];
const clearPreviousAnnotations = (content) => {
return content.replace(/<\/*span[^>]*>/g, "")
}
const reportSentenceTones = (content, sentencesTones) => {
let newContent = clearPreviousAnnotations(content)
for (let sentence of sentencesTones) {
const firstToneId = sentence.tones[0].tone_id;
const sentenceText = sentence.text
const annotatedText = `<span class="${firstToneId}">${sentenceText}</span>`
console.log(firstToneId, sentenceText, annotatedText)
newContent = newContent.replace(sentenceText, annotatedText)
}
return newContent;
}
const editor = document.getElementById('editor')
const analyzeButton = document.getElementById('analyzeButton')
analyzeButton.addEventListener('click', (e) => {
const oldHTML = editor.innerHTML
const newHTML = reportSentenceTones(oldHTML, mockResponse)
document.execCommand('selectAll', false, null)
document.execCommand('insertHTML', false, newHTML)
});
editor.addEventListener('keypress', (e) => {
const newHTML = clearAnnotations(editor.innerHTML)
document.execCommand('selectAll', false, null)
document.execCommand('insertHTML', false, newHTML)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment