Merge pull request #14 from lambdacasserole/feature-sharing

Add ability to share molecules using URL

src/coffee/main.coffee

@@ -118,6 +118,14 @@ $(document).ready ->
     regex = /^([^J][a-z0-9@+\-\[\]\(\)\\\/%=#$]{0,})$/ig
     if regex.test smiles then success() else fail()
 
+  # Checks if a string is a valid hex color.
+  #
+  # @param [string] color the color to check
+  #
+  checkColor = (color) ->
+    regex = /^(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/ig
+    regex.test color
+
   # Actions to take when we refresh the preview.
 
   # Shows the invalid compound name error message.
@@ -138,7 +146,21 @@ $(document).ready ->
       url = buildSmilesUrl screenWidth, screenHeight, foregroundColor, backgroundColor, currentCompoundSmiles
     downloadButton.attr 'download', if smilesMode then 'smiles_molecule' else currentCompoundName
     downloadButton.attr 'href', url
-    
+
+  # Updates the page URL (query string) according to the currently displayed molecule.
+  #
+  updateUrl = ->
+    params = {
+      'label': customLabel,
+      'background': backgroundColor,
+      'foreground': foregroundColor
+    }
+    if smilesMode
+      params['smiles'] = currentCompoundSmiles
+    else
+      params['compound'] = currentCompoundName
+    setQueryParams params
+
   # Updates the displayed preview.
   #
   # @param [object] element     the element to update
@@ -151,6 +173,7 @@ $(document).ready ->
     element.css 'background-position', '50% 50%'
     element.css 'background-repeat', 'no-repeat'
     updateDownloadLink()
+    updateUrl()
 
   # Refreshes the preview using the compound name text box.
   #
@@ -173,6 +196,14 @@ $(document).ready ->
   modeAwareRefreshPreview = ->
     if smilesMode then refreshPreviewSmiles() else refreshPreviewCompoundName()
 
+  passedForeground = getParameterByName 'foreground'
+  if passedForeground != null && checkColor(passedForeground)
+    foregroundColor = passedForeground
+
+  passedBackground = getParameterByName 'background'
+  if passedBackground != null && checkColor(passedBackground)
+    backgroundColor = passedBackground
+
   # Let's initialize the color pickers.
     
   $('.picker-fg').spectrum
@@ -180,7 +211,7 @@ $(document).ready ->
     clickoutFiresChange: true
     chooseText: 'Update'
     preferredFormat: 'hex'
-    
+
   $('.picker-bg').spectrum
     color: "##{backgroundColor}"
     clickoutFiresChange: true
@@ -214,7 +245,24 @@ $(document).ready ->
     customLabel = getCustomLabel()
     modeAwareRefreshPreview()
 
+  # Put passed parameter values into text boxes if needed.
+
+  passedCompoundName = getParameterByName 'compound'
+  if passedCompoundName != null
+    compoundTextBox.val(passedCompoundName)
+    smilesMode = false
+
+  passedSmiles = getParameterByName 'smiles'
+  if passedSmiles != null
+    smilesTextBox.val(passedSmiles)
+    smilesMode = true
+
+  passedLabel = getParameterByName 'label'
+  if passedLabel != null
+    customLabelTextBox.val(passedLabel)
+
   # Grab initial values from text boxes.
+
   currentCompoundName = compoundTextBox.val()
   currentCompoundSmiles = smilesTextBox.val()
   customLabel = customLabelTextBox.val()

src/coffee/params.coffee

@@ -14,3 +14,24 @@ window.getParameterByName = (name, url) ->
   if !results[2]
     return ''
   decodeURIComponent results[2].replace(/\+/g, ' ')
+
+# Sets the query string on the page without reloading it.
+#
+# @param [string] str the new query string
+#
+window.setQueryString = (str) ->
+  if history.pushState
+    url = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + str
+    window.history.pushState { path: url }, '', url
+
+# Sets the query string on the page without reloading it, according to the properties of an object.
+#
+# @param [object] params  the object containing the keys and values to use
+#
+window.setQueryParams = (params) ->
+  str = ''
+  for k, v of params
+    if v == '' then continue
+    if str != '' then str += '&'
+    str += "#{k}=#{v}"
+  setQueryString str