Add Horsey autocomplete example
This commit is contained in:
Israel Garcia
parent
1393b148db
commit
26a1a84602
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<link href="./css/darktheme.css" rel="stylesheet" type="text/css">
|
||||
<!--<link href="./css/darktheme.css" rel="stylesheet" type="text/css">-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue