License suggestion by repo URL

_includes/footer.html

@@ -21,6 +21,14 @@
     <script src="/assets/vendor/clipboard/dist/clipboard.min.js"></script>
     <script>
       window.annotations = {{ site.data.rules | jsonify }};
+      window.licenses = [
+        {% for license in site.licenses %}        
+          {
+            "title": "{{ license.title | escape  }}",
+            "spdx_id": "{{ license.spdx-id | escape  }}"
+          }{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+      ];
     </script>
     <script src="/assets/js/app.js"></script>
     {% endif %}

_includes/sidebar.html

@@ -2,7 +2,10 @@
 
   <a href="#" data-clipboard-target="#license-text" data-proofer-ignore="true" class="js-clipboard-button button">Copy license text to clipboard</a>
   <h3>Suggest this license</h3>
-  <input type="text" data-license-id="{{ page.spdx-id }}" placeholder="Type a project name" id="reposiory-search" />
+  <div class="repository-suggestion">
+    <input type="text" data-license-id="{{ page.spdx-id }}" placeholder="Type a repository URL" id="repository-url" title="status" />
+    <div class="status-indicator"></div>
+  </div>
 
   <div class="how-to-apply">
     <h3>How to apply this license</h3>

assets/css/application.scss

@@ -294,9 +294,41 @@ strong {
   width: 100%;
 }
 
-.sidebar input#reposiory-search {
+.sidebar input#repository-url {
   width: 100%;
-  padding: 5px 10px;
+  padding: 5px 20px 5px 10px;
+  box-sizing: border-box;
+  margin-right: 12px;
+}
+
+.repository-suggestion {
+  position: relative;
+}
+
+.repository-suggestion .status-indicator {
+  position: absolute;
+  right: 5px;
+  top: 6px;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background: #fff;
+  animation: none;
+  border: 4px solid #ddd;  
+}
+
+.repository-suggestion .status-indicator.fetching {  
+  border-right-color: transparent;
+  animation: rotate 0.8s infinite linear;
+}
+
+.repository-suggestion .status-indicator.error {  
+  border: 4px solid #c6403d;  
+}
+
+@keyframes rotate {
+  0%    { transform: rotate(0deg); }
+  100%  { transform: rotate(360deg); }
 }
 
 .note {
@@ -391,7 +423,9 @@ strong {
 
 .qtip-conditions,
 .qtip-permissions,
-.qtip-limitations {
+.qtip-limitations,
+.qtip-fetching,
+.qtip-error {
   font-size: 12px;
   line-height: 1.3;
 }
@@ -407,23 +441,27 @@ strong {
   color: #fff;
 }
 
+.qtip-fetching,
 .qtip-permissions {
   background-color: #d8f4d7;
   border-color: #3dc637;
   color: #298625;
 }
 
+.qtip-fetching .qtip-titlebar,
 .qtip-permissions .qtip-titlebar {
   background-color: #3dc637;
   color: #fff;
 }
 
+.qtip-error,
 .qtip-limitations {
   background-color: #f4d9d8;
   border-color: #c6403d;
   color: #812a28;
 }
 
+.qtip-error .qtip-titlebar,
 .qtip-limitations .qtip-titlebar {
   background-color: #c6403d;
   color: #fff;

assets/js/app.coffee

@@ -31,7 +31,7 @@ class Choosealicense
   constructor: ->
     @initTooltips()
     @initClipboard()
-    @initAutocomplete()
+    @initLicenseSuggestion()
 
   # Init tooltip action
   initTooltips: ->
@@ -72,25 +72,108 @@ class Choosealicense
   clipboardComplete: (client, args) ->
     @textContent = "Copied!"
   
-  # Initializes JavaScript-autoComplete plugin
-  initAutocomplete: ->
-    new autoComplete {
-      selector: "#reposiory-search",
-      delay: 300,
-      source: (term, response) ->
-        $.getJSON "https://api.github.com/search/repositories", {q: term}, (data) ->
-          if data and data.total_count > 0
-            response (data.items
-              .filter (item) -> item.archived == false && !item.license
-              .map (item) -> item.full_name)
-          else
-            response([])
-      onSelect: (event, repository, item) ->
-        licenseId = document.getElementById("reposiory-search").getAttribute("data-license-id")
-        if licenseId
-          window.open 'https://github.com/'+repository+'/community/license/new?template='+licenseId
-        else
-          window.open 'https://github.com/'+repository+'/community/license/new'
-    }
+  # Initializes the repository suggestion feature
+  initLicenseSuggestion: ->
+    inputEl = $("#repository-url")
+    licenseId = inputEl.attr("data-license-id")
+    statusIndicator = $(".status-indicator")
+    new LicenseSuggestion(inputEl, licenseId, statusIndicator)
+
+class LicenseSuggestion
+  constructor: (@inputEl, @licenseId, @statusIndicator) ->
+    @setupTooltips()
+    @bindEventHandlers()
+  
+  # Initializes tooltips on the input element
+  setupTooltips: =>
+    @inputEl.qtip
+      content:
+        text: false
+        title:
+          text: "message"
+      show: false
+      hide: false
+      position:
+        my: "top center"
+        at: "bottom center"
+      style:
+        classes: "qtip-shadow"
+  
+  # Main event handlers for user input
+  bindEventHandlers: =>    
+    @inputEl.on "input", (event) =>
+      @setStatus ""
+    .on "keyup", (event) =>            
+      if event.keyCode == 13 and event.target.value
+        # Validate the user input first
+        try
+          repositoryFullName = @parseUserInput event.target.value
+        catch
+          @setStatus "Error", "Invalid URL."
+          return
+        
+        @setStatus "Fetching"        
+        @fetchInfoFromGithubAPI repositoryFullName, (err, repositoryInfo=null) =>
+          if (err)
+            @setStatus "Error", err.message
+            return
+          if repositoryInfo.license # The repository already has a license
+            license = repositoryInfo.license
+            @setStatus "Error", @repositoryLicense repositoryFullName, license
+          else # The repository is unlicensed
+            window.open "https://github.com/#{repositoryFullName}/community/license/new?template=#{@licenseId}"                
+            @setStatus ""
+            @inputEl.val("")
+
+  # Try to extract the repository full name from the user input
+  parseUserInput: (userInput) ->
+    repository = /https?:\/\/github\.com\/(.*?)\/(.+)(\.git)?$/.exec userInput
+    [_, username, project] = repository
+    project = project
+      .split /\/|\.git/
+      .filter (str) -> str
+      .slice 0, 1
+      .join ""
+    return username + '/' + project
+  
+  # Displays an indicator and tooltips to the user about the current status
+  setStatus: (status="", message="") =>
+    statusClass = status.toLowerCase()
+    displayQtip = (status, message) =>
+      @inputEl.qtip("api")
+        .set("content.text", message)
+        .set("content.title", status)
+        .set("style.classes", "qtip-shadow qtip-#{statusClass}")
+        .show()
+
+    switch status
+      when "Fetching"
+        @statusIndicator.removeClass('error').addClass(statusClass)
+      when "Error"
+        @statusIndicator.removeClass('fetching').addClass(statusClass)
+        displayQtip status, message
+      else
+        @inputEl.qtip("api").hide()
+        @statusIndicator.removeClass('fetching error')
+  
+  # Fetches information about a repository from the Github API
+  fetchInfoFromGithubAPI: (repositoryFullName, callback) ->
+    $.getJSON "https://api.github.com/repos/"+repositoryFullName, (info) ->
+      callback null, info
+    .fail (e) -> 
+      if e.status == 404
+        callback new Error "Repository <b>#{repositoryFullName}</b> not found."
+      else
+        callback new Error "Network error when trying to get information about <b>#{repositoryFullName}</b>."
+  
+  # Generates a message showing that a repository is already licensed
+  repositoryLicense: (repositoryFullName, license) ->
+    foundLicense = window.licenses.find (lic) -> lic.spdx_id == license.spdx_id
+    if foundLicense # Links the license to its page on this site
+      "The repository <b> #{repositoryFullName}</b> is already licensed under the 
+        <a href='/licenses/#{foundLicense.spdx_id.toLowerCase()}'><b>#{foundLicense.title}</b></a>."
+    else
+      "The repository <b> #{repositoryFullName}</b> is already licensed."
+    
 $ ->
   new Choosealicense()