StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Horsey autocomplete example

This commit is contained in:
Israel Garcia 2017-05-17 01:15:13 -04:00
parent 1393b148db
commit 26a1a84602
4 changed files with 2977 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/11_autocomplete.html
View File

@ -19,7 +19,7 @@
} }
</style> </style>
<link href="./css/darktheme.css" rel="stylesheet" type="text/css"> <!--<link href="./css/darktheme.css" rel="stylesheet" type="text/css">-->
</head> </head>
<body> <body>

151
examples/12_autocomplete_horsey.html Normal file
View File

@ -0,0 +1,151 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Auto Complete</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<link href="horsey/horsey.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="horsey/horsey.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
</head>
<body>
<p>
This example demonstrates how to use JSONEditor with Horsey autocomplete,
https://github.com/bevacqua/horsey
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
var container = document.getElementById('jsoneditor');
var hy = null;
var startFrom = 0;
var activeOptions = [];
var options = {
modes: ['text', 'tree'],
autocomplete: {
ActivationChar: '',
ApplyTo:['values'],
Show: function (node, element) {
function setEndOfContenteditable(contentEditableElement) {
var range, selection;
if (document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
}
else if (document.selection)//IE 8 and lower
{
range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
range.select();//Select the range (make it the visible selection
}
}
var YaskON = {
stringify: function (o, prefix, activationChar) {
prefix = prefix || '';
switch (typeof o) {
case 'object':
var output = "";
if (Array.isArray(o)) {
o.forEach(function (e, index) {
output += activationChar + prefix + '[' + index + ']' + '\n';
}.bind(this));
return output;
}
output = "";
for (var k in o) {
if (o.hasOwnProperty(k)) {
if (prefix == "") output += this.stringify(o[k], k, activationChar);
}
}
if (prefix != "") output += activationChar + prefix + '\n'
return output;
case 'function':
return "";
default:
if (prefix != "")
return prefix + '\n';
else
return '';
}
}
};
var data = {};
startFrom = 0;
var text = element.innerText;
var lastPoint = text.lastIndexOf('.');
if ((lastPoint > 0) && (text.length > 1)) {
var fnode = node.editor.node.findNode('.' + text.substring(this.ActivationChar.length, lastPoint));
if (fnode && typeof fnode.getValue() == 'object') {
data = fnode.getValue();
startFrom = text.lastIndexOf('.') + 1;
}
}
else
data = node.editor.get();
var optionsStr = YaskON.stringify(data, null, this.ActivationChar);
var options = (optionsStr == "") ? [] : optionsStr.split("\n");
activeOptions = options;
if (activeOptions.length > 0) {
if (hy && hy.attachment != element) {
hy.destroy();
hy = null;
}
if (hy == null)
hy = horsey(element, {
source(data, done) {
setTimeout(() => done(null, [{
list: activeOptions.filter(item => item.startsWith(data.input.substring(startFrom)))
}]), 50);
},
set: function (value) {
element.innerText = element.innerText.substring(0, startFrom) + value;
setEndOfContenteditable(element);
},
filter: function (q, suggestion) {
return true;
}
});
}
},
Hide: function () {
if (hy) hy.hide();
}
}
};
var json = {
'array': [{'field1':'v1', 'field2':'v2'}, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

61
examples/horsey/horsey.css Normal file
View File

@ -0,0 +1,61 @@
.sey-container {
display: none;
position: absolute;
box-shadow: 1px 2px 6px;
background-color: #fff;
color: #333;
transition: left 0.1s ease-in-out;
z-index: 1;
}
.sey-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.sey-show {
display: block;
}
.sey-hide {
display: none;
}
.sey-empty {
cursor: default;
padding: 7px;
}
.sey-item {
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 7px;
}
.sey-item:hover {
background-color: #444;
color: #fff;
}
.sey-selected {
background-color: #333;
color: #fff;
}
.sey-char-highlight {
font-weight: bold;
}
.sey-category-id {
background-color: #eee;
color: #aaa;
text-align: right;
text-transform: capitalize;
font-style: italic;
font-size: 12px;
box-shadow: 1px 0px 1px;
padding: 7px;
}

2764
examples/horsey/horsey.js Normal file
View File

File diff suppressed because one or more lines are too long