JSON generator templates

Save JSON Generator templates in the browser local storage for later use

  1. // ==UserScript==
  2. // @name JSON generator templates
  3. // @namespace https://github.com/healarconr
  4. // @description Save JSON Generator templates in the browser local storage for later use
  5. // @include http://www.json-generator.com/
  6. // @version 1
  7. // @grant none
  8. // @license MIT License
  9. // ==/UserScript==
  10. function jsonGeneratorTemplates() {
  11.  
  12. var templates;
  13. var header;
  14. var controls;
  15. var templateControls;
  16. var templateSelect;
  17. var saveButton;
  18. var deleteButton;
  19. var resetButton;
  20.  
  21. function main() {
  22. templates = getTemplates();
  23. header = getHeader()
  24. controls = getControls();
  25. resetButton = getResetButton();
  26.  
  27. templateControls = createTemplateControls();
  28.  
  29. header.insertBefore(templateControls, controls);
  30.  
  31. handleReset();
  32. }
  33.  
  34. function getTemplates() {
  35. var templates = localStorage.getItem("templates");
  36.  
  37. if (templates == null) {
  38. templates = new Array();
  39. setTemplates(templates);
  40. } else {
  41. templates = JSON.parse(templates);
  42. }
  43.  
  44. return templates;
  45. }
  46.  
  47. function setTemplates(templates) {
  48. templates = JSON.stringify(templates);
  49. localStorage.setItem("templates", templates);
  50. }
  51.  
  52. function getEditor() {
  53. return document.getElementsByClassName("CodeMirror")[0].CodeMirror;
  54. }
  55.  
  56. function getHeader() {
  57. return document.getElementsByTagName("header")[0];
  58. }
  59.  
  60. function getControls() {
  61. return document.getElementsByClassName("controls")[0];
  62. }
  63.  
  64. function getResetButton() {
  65. return document.getElementById("reset-ui");
  66. }
  67.  
  68. function createTemplateControls() {
  69. var div = document.createElement("div");
  70. div.style.display = "inline-block";
  71. div.style.lineHeight = "31px";
  72. div.style.marginLeft = "7px";
  73. div.style.marginTop = "4px";
  74.  
  75. templateSelect = createTemplateSelect();
  76. loadTemplateOptions();
  77.  
  78. saveButton = createSaveButton();
  79. deleteButton = createDeleteButton();
  80.  
  81. div.appendChild(templateSelect);
  82. div.appendChild(saveButton);
  83. div.appendChild(deleteButton);
  84.  
  85. return div;
  86. }
  87.  
  88. function createTemplateSelect() {
  89. var select = document.createElement("select");
  90. select.id = "templates";
  91. select.style.color = "#35383B";
  92. select.style.width = "100px";
  93. select.style.height = "27px";
  94. select.style.verticalAlign = "middle";
  95. select.addEventListener("change", changeTemplate);
  96. return select;
  97. }
  98.  
  99. function loadTemplateOptions() {
  100. while (templateSelect.hasChildNodes()) {
  101. templateSelect.removeChild(templateSelect.lastChild);
  102. }
  103.  
  104. var option = document.createElement("option");
  105. option.value = null;
  106. option.disabled = true;
  107. option.selected = true;
  108. option.appendChild(document.createTextNode("Templates"));
  109. templateSelect.appendChild(option);
  110.  
  111. for (i in templates) {
  112. var template = templates[i];
  113. var option = document.createElement("option");
  114. option.value = template.content;
  115. option.appendChild(document.createTextNode(template.name));
  116. templateSelect.appendChild(option);
  117. }
  118. }
  119.  
  120. function changeTemplate() {
  121. getEditor().setValue(templateSelect.value);
  122. deleteButton.disabled = false;
  123. }
  124.  
  125. function createSaveButton() {
  126. var button = createButton();
  127. button.id = "save"
  128. button.title = "Saves the current template";
  129. button.appendChild(document.createTextNode("Save"));
  130. button.addEventListener("click", saveTemplate);
  131. return button;
  132. }
  133.  
  134. function createButton() {
  135. var button = document.createElement("button");
  136. button.style.color = "#35383B";
  137. button.style.lineHeight = 1;
  138. button.style.fontSize = "11px";
  139. button.style.padding = "5px 15px";
  140. return button;
  141. }
  142.  
  143. function saveTemplate(e) {
  144. e.preventDefault();
  145.  
  146. var overwrite = false;
  147.  
  148. if (templateSelect.selectedIndex != 0) {
  149. overwrite = confirm("Overwrite?");
  150. }
  151.  
  152. if (overwrite) {
  153. var index = templateSelect.selectedIndex - 1;
  154. var template = templates[index];
  155. template.content = getEditor().getValue();
  156. templateSelect.options[templateSelect.selectedIndex].value = template.content;
  157. setTemplates(templates);
  158. } else {
  159. var templateName = prompt("Template name", new Date().toLocaleString());
  160.  
  161. if (templateName != null) {
  162. template = {
  163. "name": templateName,
  164. "content": getEditor().getValue()
  165. };
  166.  
  167. templates.push(template);
  168. loadTemplateOptions();
  169. templateSelect.selectedIndex = templates.length;
  170. setTemplates(templates);
  171. deleteButton.disabled = false;
  172. }
  173. }
  174. }
  175.  
  176. function createDeleteButton() {
  177. var button = createButton();
  178. button.id = "delete"
  179. button.title = "Deletes the current template";
  180. button.disabled = true;
  181. button.appendChild(document.createTextNode("Delete"));
  182. button.addEventListener("click", deleteTemplate);
  183. return button;
  184. }
  185.  
  186. function deleteTemplate() {
  187. if (confirm("Are you sure?")) {
  188. var index = templateSelect.selectedIndex - 1;
  189. templates.splice(index, 1);
  190. setTemplates(templates);
  191. loadTemplateOptions();
  192. resetButton.click();
  193. }
  194. }
  195.  
  196. function handleReset() {
  197. resetButton.addEventListener("click", reset);
  198. }
  199.  
  200. function reset() {
  201. templateSelect.children[0].selected = true;
  202. deleteButton.disabled = true;
  203. }
  204.  
  205. main();
  206. }
  207.  
  208. jsonGeneratorTemplates();