Tidy up code

README.md

@@ -4,7 +4,7 @@ Worship your favorite molecule by setting it as your wallpaper.
 Avogadrio is a web app that will render your favourite molecule as a desktop wallpaper from either a compund name or
 [SMILES structure](https://en.wikipedia.org/wiki/Simplified_molecular-input_line-entry_system). Molecule rendering
 is designed to be powered by [Sourire](https://github.com/tmoerman/sourire) which itself wraps the
-[Indigo cheminformatics toolkit](https://github.com/ggasoftware/indigo). Built on the 
+[Indigo cheminformatics toolkit](https://github.com/ggasoftware/indigo). Built on the
 [Silex](https://github.com/silexphp/Silex) micro-framework.
 
 ![Logo](logo.png)
@@ -62,3 +62,4 @@ A big thank you to:
 * [Nile Red](https://www.youtube.com/user/TheRedNile) inspired me to build this. I wasn't that big on chemistry until I came across his videos.
 * [Jay Holtslander](https://codepen.io/j_holtslander/) put together the hamburger menu/sidebar combo in his [Pen](https://codepen.io/j_holtslander/pen/XmpMEp) on CodePen. I believe it's derived from earlier work by [maridlcrmn](https://bootsnipp.com/maridlcrmn).
 * [Thomas Moerman](https://github.com/tmoerman) created [Sourire](https://github.com/tmoerman/sourire), which really simplified the molecule rendering process.
+* [Andre Plötze](https://github.com/andrepxx) created [Sourire](https://github.com/tmoerman/sourire), which really simplified the molecule rendering process.

src/coffee/main.coffee

@@ -240,6 +240,25 @@ $(document).ready ->
     backgroundColor = $(e.target).val().substring(1)
     modeAwareRefreshPreview()
 
+  # Set up the rotation knob.
+
+  rotationKnob = pureknob.createKnob(88, 88)
+  rotationKnob.setProperty 'angleStart', 0
+  rotationKnob.setProperty 'angleEnd', Math.PI * 2
+  rotationKnob.setProperty 'colorFG', '#C0C0C0'
+  rotationKnob.setProperty 'colorBG', '#505050'
+  rotationKnob.setProperty 'trackWidth', 0.4
+  rotationKnob.setProperty 'valMin', 0
+  rotationKnob.setProperty 'valMax', 359
+  rotationKnob.setProperty 'needle', true
+  rotationKnob.setValue 0
+  rotationKnob.addListener (knob, value) ->
+    rotation = value
+    modeAwareRefreshPreview()
+  knobNode = rotationKnob.node()
+  knobElem = document.getElementById 'rotation_knob'
+  knobElem.appendChild knobNode
+
   # Compound name update button should refresh the preview.
 
   $('.update-btn').on 'click', (e) ->
@@ -257,7 +276,7 @@ $(document).ready ->
     customLabel = getCustomLabel()
     modeAwareRefreshPreview()
 
-  # Put passed parameter values into text boxes if needed.
+  # Put passed parameter values into UI if needed.
 
   passedCompoundName = getParameterByName 'compound'
   if passedCompoundName != null
@@ -273,20 +292,15 @@ $(document).ready ->
   if passedLabel != null
     customLabelTextBox.val(passedLabel)
 
-  # Grab initial values from text boxes.
+  passedRotation = getParameterByName 'rotation'
+  if passedRotation != null
+    rotationKnob.setValue(passedRotation)
+
+  # Grab initial values from UI.
 
   currentCompoundName = compoundTextBox.val()
   currentCompoundSmiles = smilesTextBox.val()
   customLabel = customLabelTextBox.val()
-
-  window.knobListener = (k, v) ->
-    rotation = v
-    modeAwareRefreshPreview()
-  initRotationKnob()
-
-  passedRotation = getParameterByName 'rotation'
-  if passedRotation != null
-    rotationKnob.setValue(passedRotation)
   rotation = rotationKnob.getValue()
 
   # Initial update.

src/coffee/rotationknob.coffee

@@ -1,28 +0,0 @@
-###
-			 * Demo code for knob element.
-###
-
-initRotationKnob = ->
-  # Create knob element, 300 x 300 px in size.
-  knob = pureknob.createKnob(88, 88)
-  # Set properties.
-  knob.setProperty 'angleStart', 0
-  knob.setProperty 'angleEnd', Math.PI * 2
-  knob.setProperty 'colorFG', '#C0C0C0'
-  knob.setProperty 'colorBG', '#505050'
-  knob.setProperty 'trackWidth', 0.4
-  knob.setProperty 'valMin', 0
-  knob.setProperty 'valMax', 359
-  knob.setProperty 'needle', true
-  # Set initial value.
-  knob.setValue 0
-
-  knob.addListener window.knobListener
-  # Create element node.
-  node = knob.node()
-  # Add it to the DOM.
-  elem = document.getElementById('rotation_knob')
-  elem.appendChild node
-  window.rotationKnob = knob
-
-window.initRotationKnob = initRotationKnob

src/less/variables.less

@@ -28,7 +28,7 @@
 @picker-border: #444;
 
 // Width variables.
-@sidebar-width: 400px;
+@sidebar-width: 300px;
 @width2: 100px;
 @full-width: 100%;
 

templates/index.html.twig

@@ -31,11 +31,10 @@
         <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
         <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="/bower_components/spectrum/spectrum.js"></script>
+        <script type="text/javascript" src="/js-lib/pureknob.js"></script>
         <script type="text/javascript" src="/js/params.js"></script>
         <script type="text/javascript" src="/js/hamburger.js"></script>
         <script type="text/javascript" src="/js/main.js"></script>
-        <script type="text/javascript" src="/js-lib/pureknob.js"></script>
-        <script type="text/javascript" src="/js/rotationknob.js"></script>
         {% include "_analytics.html.twig" %}
     </head>
     <body>