diff --git a/src/editors/base64.js b/src/editors/base64.js index 70bc37ea5..b53815718 100644 --- a/src/editors/base64.js +++ b/src/editors/base64.js @@ -5,6 +5,7 @@ JSONEditor.defaults.editors.base64 = JSONEditor.AbstractEditor.extend({ build: function() { var self = this; this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle()); + if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText); // Input that holds the base64 string this.input = this.theme.getFormInputField('hidden'); @@ -37,7 +38,7 @@ JSONEditor.defaults.editors.base64 = JSONEditor.AbstractEditor.extend({ this.preview = this.theme.getFormInputDescription(this.schema.description); this.container.appendChild(this.preview); - this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview); + this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview, this.infoButton); this.container.appendChild(this.control); }, refreshPreview: function() { diff --git a/src/editors/checkbox.js b/src/editors/checkbox.js index ee26cf6c0..4b04f1c92 100644 --- a/src/editors/checkbox.js +++ b/src/editors/checkbox.js @@ -23,10 +23,11 @@ JSONEditor.defaults.editors.checkbox = JSONEditor.AbstractEditor.extend({ this.label = this.header = this.theme.getCheckboxLabel(this.getTitle()); } if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description); + if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText); if(this.options.compact) this.container.className += ' compact'; this.input = this.theme.getCheckbox(); - this.control = this.theme.getFormControl(this.label, this.input, this.description); + this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton); if(this.schema.readOnly || this.schema.readonly) { this.always_disabled = true; diff --git a/src/editors/select.js b/src/editors/select.js index ee5473b6d..220b4b347 100644 --- a/src/editors/select.js +++ b/src/editors/select.js @@ -156,7 +156,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({ var self = this; if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle()); if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description); - + if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText); if(this.options.compact) this.container.className += ' compact'; this.input = this.theme.getSelectInput(this.enum_options); @@ -173,7 +173,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({ self.onInputChange(); }); - this.control = this.theme.getFormControl(this.label, this.input, this.description); + this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton); this.container.appendChild(this.control); this.value = this.enum_values[0]; diff --git a/src/editors/selectize.js b/src/editors/selectize.js index 5dca5235a..0072c6408 100644 --- a/src/editors/selectize.js +++ b/src/editors/selectize.js @@ -146,6 +146,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({ var self = this; if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle()); if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description); + if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText); if(this.options.compact) this.container.className += ' compact'; @@ -163,7 +164,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({ self.onInputChange(); }); - this.control = this.theme.getFormControl(this.label, this.input, this.description); + this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton); this.container.appendChild(this.control); this.value = this.enum_values[0]; diff --git a/src/editors/string.js b/src/editors/string.js index 826589874..bd1d777cd 100644 --- a/src/editors/string.js +++ b/src/editors/string.js @@ -68,6 +68,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({ var self = this, i; if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle()); if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description); + if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText); this.format = this.schema.format; if(!this.format && this.schema.media && this.schema.media.type) { @@ -252,7 +253,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({ if(this.format) this.input.setAttribute('data-schemaformat',this.format); - this.control = this.theme.getFormControl(this.label, this.input, this.description); + this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton); this.container.appendChild(this.control); // Any special formatting that needs to happen after the input is added to the dom diff --git a/src/theme.js b/src/theme.js index c1402ddc7..2987cca64 100644 --- a/src/theme.js +++ b/src/theme.js @@ -63,6 +63,39 @@ JSONEditor.AbstractTheme = Class.extend({ enableLabel: function(label) { label.style.color = ''; }, + getInfoButton: function(text) { + var icon = document.createElement('span'); + icon.innerText = "ⓘ"; + icon.style.fontSize = "16px"; + icon.style.fontWeight = "bold"; + icon.style.padding = ".25rem"; + icon.style.position = "relative"; + icon.style.display = "inline-block"; + + var tooltip = document.createElement('span'); + tooltip.style.fontSize = "12px"; + icon.style.fontWeight = "normal"; + tooltip.style["font-family"] = "sans-serif"; + tooltip.style.visibility = "hidden"; + tooltip.style["background-color"] = "rgba(50, 50, 50, .75)"; + tooltip.style.margin = "0 .25rem"; + tooltip.style.color = "#FAFAFA"; + tooltip.style.padding = ".5rem 1rem"; + tooltip.style["border-radius"] = ".25rem"; + tooltip.style.width = "20rem"; + tooltip.style.position = "absolute"; + tooltip.innerText = text; + icon.onmouseover = function() { + tooltip.style.visibility = "visible"; + }; + icon.onmouseleave = function() { + tooltip.style.visibility = "hidden"; + }; + + icon.appendChild(tooltip); + + return icon; + }, getFormInputLabel: function(text) { var el = document.createElement('label'); el.appendChild(document.createTextNode(text)); @@ -166,14 +199,16 @@ JSONEditor.AbstractTheme = Class.extend({ afterInputReady: function(input) { }, - getFormControl: function(label, input, description) { + getFormControl: function(label, input, description, infoText) { var el = document.createElement('div'); el.className = 'form-control'; if(label) el.appendChild(label); if(input.type === 'checkbox') { label.insertBefore(input,label.firstChild); + if(infoText) label.appendChild(infoText); } else { + if(infoText) label.appendChild(infoText); el.appendChild(input); } diff --git a/src/themes/bootstrap2.js b/src/themes/bootstrap2.js index d71e5ceed..5c8d8a475 100644 --- a/src/themes/bootstrap2.js +++ b/src/themes/bootstrap2.js @@ -51,13 +51,43 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({ el.style.paddingBottom = 0; return el; }, + getInfoButton: function(text) { + var icon = document.createElement('span'); + icon.className = "icon-info-sign pull-right"; + icon.style.padding = ".25rem"; + icon.style.position = "relative"; + icon.style.display = "inline-block"; + + var tooltip = document.createElement('span'); + tooltip.style["font-family"] = "sans-serif"; + tooltip.style.visibility = "hidden"; + tooltip.style["background-color"] = "rgba(50, 50, 50, .75)"; + tooltip.style.margin = "0 .25rem"; + tooltip.style.color = "#FAFAFA"; + tooltip.style.padding = ".5rem 1rem"; + tooltip.style["border-radius"] = ".25rem"; + tooltip.style.width = "25rem"; + tooltip.style.transform = "translateX(-27rem) translateY(-.5rem)"; + tooltip.style.position = "absolute"; + tooltip.innerText = text; + icon.onmouseover = function() { + tooltip.style.visibility = "visible"; + }; + icon.onmouseleave = function() { + tooltip.style.visibility = "hidden"; + }; + + icon.appendChild(tooltip); + + return icon; + }, getFormInputDescription: function(text) { var el = document.createElement('p'); el.className = 'help-inline'; el.textContent = text; return el; }, - getFormControl: function(label, input, description) { + getFormControl: function(label, input, description, infoText) { var ret = document.createElement('div'); ret.className = 'control-group'; @@ -69,6 +99,7 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({ label.className += ' checkbox'; label.appendChild(input); controls.appendChild(label); + if(infoText) controls.appendChild(infoText); controls.style.height = '30px'; } else { @@ -76,6 +107,7 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({ label.className += ' control-label'; ret.appendChild(label); } + if(infoText) controls.appendChild(infoText); controls.appendChild(input); ret.appendChild(controls); } diff --git a/src/themes/bootstrap3.js b/src/themes/bootstrap3.js index 61b8f6c30..3a5a14548 100644 --- a/src/themes/bootstrap3.js +++ b/src/themes/bootstrap3.js @@ -33,7 +33,7 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({ } return el; }, - getFormControl: function(label, input, description) { + getFormControl: function(label, input, description, infoText) { var group = document.createElement('div'); if(label && input.type === 'checkbox') { @@ -41,6 +41,7 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({ label.appendChild(input); label.style.fontSize = '14px'; group.style.marginTop = '0'; + if(infoText) group.appendChild(infoText); group.appendChild(label); input.style.position = 'relative'; input.style.cssFloat = 'left'; @@ -51,6 +52,8 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({ label.className += ' control-label'; group.appendChild(label); } + + if(infoText) group.appendChild(infoText); group.appendChild(input); } @@ -64,6 +67,36 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({ el.style.paddingBottom = 0; return el; }, + getInfoButton: function(text) { + var icon = document.createElement('span'); + icon.className = "glyphicon glyphicon-info-sign pull-right"; + icon.style.padding = ".25rem"; + icon.style.position = "relative"; + icon.style.display = "inline-block"; + + var tooltip = document.createElement('span'); + tooltip.style["font-family"] = "sans-serif"; + tooltip.style.visibility = "hidden"; + tooltip.style["background-color"] = "rgba(50, 50, 50, .75)"; + tooltip.style.margin = "0 .25rem"; + tooltip.style.color = "#FAFAFA"; + tooltip.style.padding = ".5rem 1rem"; + tooltip.style["border-radius"] = ".25rem"; + tooltip.style.width = "25rem"; + tooltip.style.transform = "translateX(-27rem) translateY(-.5rem)"; + tooltip.style.position = "absolute"; + tooltip.innerText = text; + icon.onmouseover = function() { + tooltip.style.visibility = "visible"; + }; + icon.onmouseleave = function() { + tooltip.style.visibility = "hidden"; + }; + + icon.appendChild(tooltip); + + return icon; + }, getFormInputDescription: function(text) { var el = document.createElement('p'); el.className = 'help-block'; diff --git a/src/themes/foundation.js b/src/themes/foundation.js index 3bc530e55..78a6fdddc 100644 --- a/src/themes/foundation.js +++ b/src/themes/foundation.js @@ -240,7 +240,7 @@ JSONEditor.defaults.themes.foundation6 = JSONEditor.defaults.themes.foundation5. el.style.display = 'block'; return el; }, - getFormControl: function(label, input, description) { + getFormControl: function(label, input, description, infoText) { var el = document.createElement('div'); el.className = 'form-control'; if(label) el.appendChild(label); @@ -248,8 +248,10 @@ JSONEditor.defaults.themes.foundation6 = JSONEditor.defaults.themes.foundation5. label.insertBefore(input,label.firstChild); } else if (label) { + if(infoText) label.appendChild(infoText); label.appendChild(input); } else { + if(infoText) el.appendChild(infoText); el.appendChild(input); } diff --git a/src/themes/jqueryui.js b/src/themes/jqueryui.js index 5c050ecb2..be11e807a 100644 --- a/src/themes/jqueryui.js +++ b/src/themes/jqueryui.js @@ -29,8 +29,8 @@ JSONEditor.defaults.themes.jqueryui = JSONEditor.AbstractTheme.extend({ el.style.display = 'inline-block'; return el; }, - getFormControl: function(label, input, description) { - var el = this._super(label,input,description); + getFormControl: function(label, input, description, infoText) { + var el = this._super(label,input,description, infoText); if(input.type === 'checkbox') { el.style.lineHeight = '25px';