Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Allow Fullscreen Textarea for Word Long Description and Dictionary Description.

This commit is contained in:
Robbie Antenesse 2016-02-27 08:54:13 -07:00
parent 5cb27c874b
commit 989b67f923
2 changed files with 61 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.php
View File

@ -71,7 +71,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
<label><span>Equivalent Word(s)</span>
<input type="text" id="simpleDefinition" />
</label>
<label><span>Explanation/Long Definition</span>
<label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
<textarea id="longDefinition"></textarea>
</label>
<input type="hidden" id="editIndex" />
@ -141,7 +141,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
<span>Dictionary Name</span>
<input type="text" id="dictionaryNameEdit" />
</label>
<label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox()">Maximize</a></span>
<label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span>
<textarea id="dictionaryDescriptionEdit"></textarea>
</label>
@ -211,6 +211,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
<div id="expandedTextboxId" style="display:none;width:0px;height:0px;"></div>
<div id="fullScreenTextboxPage">
<span id="fullScreenTextboxScreenCloseButton" class="clickable" onclick="HideFullScreenTextbox()">Minimize</span>
<label><span id="fullScreenTextboxLabel"></span></label>
<textarea id="fullScreenTextbox"></textarea>
</div>
</div>

78
js/ui.js
View File

@ -377,16 +377,29 @@ function HideSettingsWhenComplete() {
}
}
function ShowFullScreenTextbox(textboxToExpandId) {
function ShowFullScreenTextbox(textboxToExpandId, labelText) {
var sourceTextboxElement = document.getElementById(textboxToExpandId);
var targetTextboxElement = document.getElementById("fullScreenTextbox");
document.getElementById("fullScreenTextboxLabel").innerHTML = labelText;
var selection = getInputSelection(sourceTextboxElement);
document.getElementById("expandedTextboxId").innerHTML = textboxToExpandId;
document.getElementById("fullScreenTextbox").value = document.getElementById(textboxToExpandId).value;
targetTextboxElement.value = sourceTextboxElement.value;
document.getElementById("fullScreenTextboxScreen").style.display = "block";
setSelectionRange(targetTextboxElement, selection.start, selection.end);
}
function HideFullScreenTextbox() {
var expandedTextboxId = document.getElementById("expandedTextboxId").innerHTML;
document.getElementById("dictionaryDescriptionEdit").value = document.getElementById("fullScreenTextbox").value;
var sourceTextboxElement = document.getElementById("fullScreenTextbox");
var targetTextboxElement = document.getElementById(expandedTextboxId);
var selection = getInputSelection(sourceTextboxElement);
targetTextboxElement.value = sourceTextboxElement.value;
document.getElementById("fullScreenTextboxScreen").style.display = "none";
setSelectionRange(targetTextboxElement, selection.start, selection.end);
}
function ShowDictionaryDeleteMenu(dictionaryList) {
@ -470,26 +483,51 @@ function FocusAfterAddingNewWord() {
document.getElementById("word").focus();
}
function getCaret(element) {
// Retrieved from http://stackoverflow.com/a/263796/3508346
if (element.selectionStart) {
return element.selectionStart;
} else if (document.selection) {
element.focus();
function getInputSelection(el) {
// Retrieved from http://stackoverflow.com/a/4207763
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
el.focus();
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
var range = document.selection.createRange();
if (range == null) {
return 0;
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
var re = element.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(range.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
return {
start: start,
end: end
};
}
function setSelectionRange(input, selectionStart, selectionEnd) {