JSON generator templates

Save json generator templates in the browser local storage for later use

当前为 2016-01-17 提交的版本,查看 最新版本

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