Use let instead of var, and camelCase instead of snake

‘let’ has more predictable scoping rules and has been in the spec for over 10 years. camelCase was discussed here: #15

Author: irskep

silicon/static/js/edit.js

@@ -1,23 +1,21 @@
 // object for editor state
-var editor = {
+let editor = {
   changed: false,
-  submit_clicked: false,
+  submitClicked: false,
 };
 
-if (silicon_editor === "codemirror") {
-  var cm_instance;
-}
+let codemirrorInstance = null;
 
-function usurp_unload(e) {
+function usurpUnload(e) {
   e.preventDefault();
   e.returnValue = "";
 }
 
 window.addEventListener("load", function () {
   // load CodeMirror instance
-  if (silicon_editor === "codemirror") {
+  if (siliconEditor === "codemirror") {
     require.config({
-      baseUrl: js_modules_root,
+      baseUrl: jsModulesRoot,
     });
 
     require([
@@ -37,7 +35,7 @@ window.addEventListener("load", function () {
       "addon/display/fullscreen",
       "addon/display/panel",
     ].map((x) => `codemirror/${x}`), function (CodeMirror) {
-      cm_instance = CodeMirror.fromTextArea(
+      codemirrorInstance = CodeMirror.fromTextArea(
         document.querySelector("#body-text"),
         {
           mode: {
@@ -76,19 +74,19 @@ window.addEventListener("load", function () {
 
   // don't nag if the Submit button was clicked
   document.querySelector("#page-form").onsubmit = function () {
-    editor.submit_clicked = true;
+    editor.submitClicked = true;
   };
 
   window.addEventListener("beforeunload", function (e) {
-    if (silicon_editor === "codemirror") {
+    if (siliconEditor === "codemirror") {
       // alert on changed codemirror
-      if (!cm_instance.isClean() && !editor.submit_clicked) {
-        usurp_unload(e);
+      if (!codemirrorInstance.isClean() && !editor.submitClicked) {
+        usurpUnload(e);
       }
     } else {
       // alert on changed textarea
-      if (editor.changed && !editor.submit_clicked) {
-        usurp_unload(e);
+      if (editor.changed && !editor.submitClicked) {
+        usurpUnload(e);
       }
     }
   });

silicon/static/js/widgets.js

@@ -8,19 +8,19 @@
  * `element`: the element in the DOM
  * `url`: a URL as specified in the element's `data-widget-url` attribute
  */
-function get_widget(target) {
-  const widget_element = document.querySelector(target);
+function getWidget(target) {
+  const widgetElement = document.querySelector(target);
 
   return {
-    element: widget_element,
-    url: widget_element.getAttribute("data-widget-url"),
+    element: widgetElement,
+    url: widgetElement.getAttribute("data-widget-url"),
   };
 }
 
 /*
  * Set up relation add button event.
  */
-function relation_add_button() {
+function relationAddButton() {
   document
     .querySelector("#add-relation-btn")
     .addEventListener("click", (event) => {
@@ -31,7 +31,7 @@ function relation_add_button() {
         return;
       }
 
-      const widget = get_widget("#related-links");
+      const widget = getWidget("#related-links");
       fetch(widget.url, {
         method: "POST",
         body: new URLSearchParams({ relative: relative }),
@@ -49,7 +49,7 @@ function relation_add_button() {
         })
         .then((html) => {
           widget.element.innerHTML = html;
-          relation_delete_buttons();
+          relationDeleteButtons();
         })
         .catch((err) => {
           console.error(err);
@@ -60,11 +60,11 @@ function relation_add_button() {
 /*
  * Set up relation delete button events.
  */
-function relation_delete_buttons() {
-  const del_btns = document.querySelectorAll(".del-relation-btn");
-  const widget = get_widget("#related-links");
+function relationDeleteButtons() {
+  const deleteButtons = document.querySelectorAll(".del-relation-btn");
+  const widget = getWidget("#related-links");
 
-  del_btns.forEach(function (btn) {
+  deleteButtons.forEach(function (btn) {
     const relative = btn.getAttribute("data-del-relative");
     btn.addEventListener("click", (event) => {
       const answer = window.confirm(
@@ -79,7 +79,7 @@ function relation_delete_buttons() {
           })
           .then((html) => {
             widget.element.innerHTML = html;
-            relation_delete_buttons();
+            relationDeleteButtons();
           });
       }
     });
@@ -89,7 +89,7 @@ function relation_delete_buttons() {
 /*
  * Set up the table of contents update button.
  */
-function toc_update_button() {
+function tocUpdateButton() {
   if (!document.querySelector("#body-text")) {
     // we're not on the edit page, nothing to do
     return;
@@ -100,18 +100,18 @@ function toc_update_button() {
   document
     .querySelector("#update-toc-btn")
     .addEventListener("click", (event) => {
-      const widget = get_widget("#toc");
+      const widget = getWidget("#toc");
       // get the contents of CodeMirror, or the textarea
-      let body_text;
+      let bodyText;
       if (document.querySelector(".CodeMirror")) {
-        body_text = document.querySelector(".CodeMirror").CodeMirror.getValue();
+        bodyText = document.querySelector(".CodeMirror").CodeMirror.getValue();
       } else {
-        body_text = document.querySelector("#body-text").value;
+        bodyText = document.querySelector("#body-text").value;
       }
 
       fetch(widget.url, {
         method: "POST",
-        body: new URLSearchParams({ body: body_text }),
+        body: new URLSearchParams({ body: bodyText }),
         headers: new Headers({
           "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
         }),
@@ -137,9 +137,9 @@ function toc_update_button() {
  * Set up all the page events.
  */
 window.addEventListener("load", function () {
-  relation_add_button();
-  relation_delete_buttons();
-  toc_update_button();
+  relationAddButton();
+  relationDeleteButtons();
+  tocUpdateButton();
 
   const editor = document.querySelector("#body-text");
   if (editor) {

silicon/templates/edit.html.j2

@@ -16,8 +16,8 @@
     <script src="{{ url_for('static', filename='node_modules/requirejs/require.js') }}" defer></script>
   {% endif %}
   <script type="text/javascript">
-    const js_modules_root = "{{ url_for('static', filename='node_modules') }}";
-    const silicon_editor = "{{ config.SILICON_EDITOR }}";
+    const jsModulesRoot = "{{ url_for('static', filename='node_modules') }}";
+    const siliconEditor = "{{ config.SILICON_EDITOR }}";
   </script>
   <script src="{{ url_for('static', filename='js/widgets.js') }}" defer></script>
   <script src="{{ url_for('static', filename='js/edit.js') }}" defer></script>