json-editor
Version:
JSON Schema based editor
350 lines (339 loc) • 9.56 kB
JavaScript
var matchKey = (function () {
var elem = document.documentElement;
if (elem.matches) return 'matches';
else if (elem.webkitMatchesSelector) return 'webkitMatchesSelector';
else if (elem.mozMatchesSelector) return 'mozMatchesSelector';
else if (elem.msMatchesSelector) return 'msMatchesSelector';
else if (elem.oMatchesSelector) return 'oMatchesSelector';
})();
JSONEditor.AbstractTheme = Class.extend({
getContainer: function() {
return document.createElement('div');
},
getFloatRightLinkHolder: function() {
var el = document.createElement('div');
el.style = el.style || {};
el.style.cssFloat = 'right';
el.style.marginLeft = '10px';
return el;
},
getModal: function() {
var el = document.createElement('div');
el.style.backgroundColor = 'white';
el.style.border = '1px solid black';
el.style.boxShadow = '3px 3px black';
el.style.position = 'absolute';
el.style.zIndex = '10';
el.style.display = 'none';
return el;
},
getGridContainer: function() {
var el = document.createElement('div');
return el;
},
getGridRow: function() {
var el = document.createElement('div');
el.className = 'row';
return el;
},
getGridColumn: function() {
var el = document.createElement('div');
return el;
},
setGridColumnSize: function(el,size) {
},
getLink: function(text) {
var el = document.createElement('a');
el.setAttribute('href','#');
el.appendChild(document.createTextNode(text));
return el;
},
disableHeader: function(header) {
header.style.color = '#ccc';
},
disableLabel: function(label) {
label.style.color = '#ccc';
},
enableHeader: function(header) {
header.style.color = '';
},
enableLabel: function(label) {
label.style.color = '';
},
getFormInputLabel: function(text) {
var el = document.createElement('label');
el.appendChild(document.createTextNode(text));
return el;
},
getCheckboxLabel: function(text) {
var el = this.getFormInputLabel(text);
el.style.fontWeight = 'normal';
return el;
},
getHeader: function(text) {
var el = document.createElement('h3');
if(typeof text === "string") {
el.textContent = text;
}
else {
el.appendChild(text);
}
return el;
},
getCheckbox: function() {
var el = this.getFormInputField('checkbox');
el.style.display = 'inline-block';
el.style.width = 'auto';
return el;
},
getMultiCheckboxHolder: function(controls,label,description) {
var el = document.createElement('div');
if(label) {
label.style.display = 'block';
el.appendChild(label);
}
for(var i in controls) {
if(!controls.hasOwnProperty(i)) continue;
controls[i].style.display = 'inline-block';
controls[i].style.marginRight = '20px';
el.appendChild(controls[i]);
}
if(description) el.appendChild(description);
return el;
},
getSelectInput: function(options) {
var select = document.createElement('select');
if(options) this.setSelectOptions(select, options);
return select;
},
getSwitcher: function(options) {
var switcher = this.getSelectInput(options);
switcher.style.backgroundColor = 'transparent';
switcher.style.display = 'inline-block';
switcher.style.fontStyle = 'italic';
switcher.style.fontWeight = 'normal';
switcher.style.height = 'auto';
switcher.style.marginBottom = 0;
switcher.style.marginLeft = '5px';
switcher.style.padding = '0 0 0 3px';
switcher.style.width = 'auto';
return switcher;
},
getSwitcherOptions: function(switcher) {
return switcher.getElementsByTagName('option');
},
setSwitcherOptions: function(switcher, options, titles) {
this.setSelectOptions(switcher, options, titles);
},
setSelectOptions: function(select, options, titles) {
titles = titles || [];
select.innerHTML = '';
for(var i=0; i<options.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',options[i]);
option.textContent = titles[i] || options[i];
select.appendChild(option);
}
},
getTextareaInput: function() {
var el = document.createElement('textarea');
el.style = el.style || {};
el.style.width = '100%';
el.style.height = '300px';
el.style.boxSizing = 'border-box';
return el;
},
getRangeInput: function(min,max,step) {
var el = this.getFormInputField('range');
el.setAttribute('min',min);
el.setAttribute('max',max);
el.setAttribute('step',step);
return el;
},
getFormInputField: function(type) {
var el = document.createElement('input');
el.setAttribute('type',type);
return el;
},
afterInputReady: function(input) {
},
getFormControl: function(label, input, description) {
var el = document.createElement('div');
el.className = 'form-control';
if(label) el.appendChild(label);
if(input.type === 'checkbox') {
label.insertBefore(input,label.firstChild);
}
else {
el.appendChild(input);
}
if(description) el.appendChild(description);
return el;
},
getIndentedPanel: function() {
var el = document.createElement('div');
el.style = el.style || {};
el.style.paddingLeft = '10px';
el.style.marginLeft = '10px';
el.style.borderLeft = '1px solid #ccc';
return el;
},
getChildEditorHolder: function() {
return document.createElement('div');
},
getDescription: function(text) {
var el = document.createElement('p');
el.innerHTML = text;
return el;
},
getCheckboxDescription: function(text) {
return this.getDescription(text);
},
getFormInputDescription: function(text) {
return this.getDescription(text);
},
getHeaderButtonHolder: function() {
return this.getButtonHolder();
},
getButtonHolder: function() {
return document.createElement('div');
},
getButton: function(text, icon, title) {
var el = document.createElement('button');
el.type = 'button';
this.setButtonText(el,text,icon,title);
return el;
},
setButtonText: function(button, text, icon, title) {
button.innerHTML = '';
if(icon) {
button.appendChild(icon);
button.innerHTML += ' ';
}
button.appendChild(document.createTextNode(text));
if(title) button.setAttribute('title',title);
},
getTable: function() {
return document.createElement('table');
},
getTableRow: function() {
return document.createElement('tr');
},
getTableHead: function() {
return document.createElement('thead');
},
getTableBody: function() {
return document.createElement('tbody');
},
getTableHeaderCell: function(text) {
var el = document.createElement('th');
el.textContent = text;
return el;
},
getTableCell: function() {
var el = document.createElement('td');
return el;
},
getErrorMessage: function(text) {
var el = document.createElement('p');
el.style = el.style || {};
el.style.color = 'red';
el.appendChild(document.createTextNode(text));
return el;
},
addInputError: function(input, text) {
},
removeInputError: function(input) {
},
addTableRowError: function(row) {
},
removeTableRowError: function(row) {
},
getTabHolder: function() {
var el = document.createElement('div');
el.innerHTML = "<div style='float: left; width: 130px;' class='tabs'></div><div class='content' style='margin-left: 130px;'></div><div style='clear:both;'></div>";
return el;
},
applyStyles: function(el,styles) {
el.style = el.style || {};
for(var i in styles) {
if(!styles.hasOwnProperty(i)) continue;
el.style[i] = styles[i];
}
},
closest: function(elem, selector) {
while (elem && elem !== document) {
if (elem[matchKey]) {
if (elem[matchKey](selector)) {
return elem;
} else {
elem = elem.parentNode;
}
}
else {
return false;
}
}
return false;
},
getTab: function(span) {
var el = document.createElement('div');
el.appendChild(span);
el.style = el.style || {};
this.applyStyles(el,{
border: '1px solid #ccc',
borderWidth: '1px 0 1px 1px',
textAlign: 'center',
lineHeight: '30px',
borderRadius: '5px',
borderBottomRightRadius: 0,
borderTopRightRadius: 0,
fontWeight: 'bold',
cursor: 'pointer'
});
return el;
},
getTabContentHolder: function(tab_holder) {
return tab_holder.children[1];
},
getTabContent: function() {
return this.getIndentedPanel();
},
markTabActive: function(tab) {
this.applyStyles(tab,{
opacity: 1,
background: 'white'
});
},
markTabInactive: function(tab) {
this.applyStyles(tab,{
opacity:0.5,
background: ''
});
},
addTab: function(holder, tab) {
holder.children[0].appendChild(tab);
},
getBlockLink: function() {
var link = document.createElement('a');
link.style.display = 'block';
return link;
},
getBlockLinkHolder: function() {
var el = document.createElement('div');
return el;
},
getLinksHolder: function() {
var el = document.createElement('div');
return el;
},
createMediaLink: function(holder,link,media) {
holder.appendChild(link);
media.style.width='100%';
holder.appendChild(media);
},
createImageLink: function(holder,link,image) {
holder.appendChild(link);
link.appendChild(image);
}
});