Merge pull request #1141 from chahmedejaz/1140-replace-qtip2-with-hint

1140, Replace QTip2 with Hint.css

.gitignore

@@ -5,7 +5,7 @@
 assets/vendor/clipboard/src
 assets/vendor/clipboard/test
 assets/vendor/selectivizr/tests
-assets/vendor/qtip2/basic
+assets/vendor/hint.css/src
 /vendor
 /.sass-cache
 .ruby-version

_includes/css/responsive.css

@@ -46,6 +46,10 @@
   .license-body {
     width: calc(100% - 250px);
   }
+
+  .hint--large::after{
+    width: 150px;
+  }
 }
 
 /* iPads (portrait) ----------- */
@@ -162,6 +166,10 @@
   .license-rules:not(.license-rules-sidebar) .license-limitations span {
     background-position: -14px 0;
   }
+
+  .hint--large::after{
+    width: 80px;
+  }
 }
 
 /* Smartphones (portrait) ----------- */

_includes/footer.html

@@ -17,7 +17,6 @@
 
     {% if page.collection == "licenses" or page.class == "license-types" %}
     <script src="{{ 'assets/vendor/jquery/jquery.min.js' | relative_url }}"></script>
-    <script src="{{ 'assets/vendor/qtip2/jquery.qtip.min.js' | relative_url }}"></script>
     <script src="{{ 'assets/vendor/clipboard/dist/clipboard.min.js' | relative_url }}"></script>
     <script>
       window.annotations = {{ site.data.rules | jsonify }};

appendix.md

@@ -47,7 +47,7 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
               {% else %}
                 {% assign lite = "" %}
               {% endif %}
-              <span class="{{ r | append: lite }}">
+              <span class="{{ r | append: lite }}" style="margin: auto;">
                 <span class="license-sprite {{ r }}"></span>
               </span>
             </td>

assets/css/application.scss

@@ -2,7 +2,7 @@
 ---
 
 @import "../vendor/normalize-css/normalize.css";
-@import "../vendor/qtip2/jquery.qtip.min.css";
+@import "../vendor/hint.css/hint.min.css";
 
 body {
   background: #fafafa;
@@ -461,54 +461,50 @@ strong {
 }
 
 
-/* Qtip styles */
+/* Hint.css Overide */
+.orverride-hint-inline {
+  display: block;
+}
 
-.qtip-conditions,
-.qtip-permissions,
-.qtip-limitations,
-.qtip-fetching,
-.qtip-error {
-  font-size: 0.75rem;
-  line-height: 1.3;
+// Selecting all the tooltip bodies to increase their font-size
+[class*="hint--"][aria-label]:after {
+  font-size: 0.80rem;
+  text-shadow: none;
 }
 
-.qtip-conditions {
-  background-color: #d0ebf6;
-  border-color: #149ad4;
-  color: #0d648a;
+// Tooltips
+.tooltip--permissions.hint--bottom:before{
+  border-bottom-color: #298625;
+}
+
+.tooltip--conditions.hint--bottom:before{
+  border-bottom-color: #0d648a;
 }
 
-.qtip-conditions .qtip-titlebar {
-  background-color: #149ad4;
-  color: #fff;
+.tooltip--error.hint--bottom:before,
+.tooltip--limitations.hint--bottom:before{
+  border-bottom-color: #812a28;
 }
 
-.qtip-fetching,
-.qtip-permissions {
+.tooltip--permissions:after{
   background-color: #d8f4d7;
-  border-color: #3dc637;
   color: #298625;
+  border-color: #3dc637;
 }
 
-.qtip-fetching .qtip-titlebar,
-.qtip-permissions .qtip-titlebar {
-  background-color: #3dc637;
-  color: #fff;
+.tooltip--conditions:after{
+  background-color: #d0ebf6;
+  border-color: #149ad4;
+  color: #0d648a;
 }
 
-.qtip-error,
-.qtip-limitations {
+.tooltip--error:after,
+.tooltip--limitations:after{
   background-color: #f4d9d8;
   border-color: #c6403d;
   color: #812a28;
 }
 
-.qtip-error .qtip-titlebar,
-.qtip-limitations .qtip-titlebar {
-  background-color: #c6403d;
-  color: #fff;
-}
-
 /* For modern browsers */
 .clearfix:before,
 .clearfix:after {

assets/js/app.coffee

@@ -16,18 +16,17 @@ class Choosealicense
       selection.removeAllRanges()
       selection.addRange(range)
 
-  # Qtip position attributes for tooltips
-  qtip_position:
-    my: "top center"
-    at: "bottom center"
-    viewport: $(window)
-    adjust:
-      method: 'shift shift'
-  # Annotation rule types as defined in `_config.yml`
-  ruletypes:
-    permissions: "Permission"
-    conditions: "Condition"
-    limitations: "Limitation"
+  tooltipAttributesMapperByRuleType:
+    permissions:
+      heading: 'Permission'
+      color: 'tooltip--permissions'
+    conditions:
+      heading: 'Condition'
+      color: 'tooltip--conditions'
+    limitations:
+      heading: 'Limitation'
+      color: 'tooltip--limitations'
+
 
   # fire on document.ready
   constructor: ->
@@ -41,20 +40,14 @@ class Choosealicense
     # Dynamically add annotations as title attribute to rule list items
     for ruletype, rules of window.annotations
       for rule in rules
-        $(".license-#{ruletype} .#{rule["tag"]}").attr "title", rule["description"]
-
-    # Init tooltips on all rule list items
-    for ruletype, label of @ruletypes
-      $(".license-#{ruletype} li, .license-#{ruletype} .license-sprite").qtip
-        content:
-          text: false
-          title:
-            text: label
-        position: @qtip_position
-        style:
-          classes: "qtip-shadow qtip-#{ruletype}"
-
-    false
+        licenseLiElement = $(".license-#{ruletype} .#{rule["tag"]}")
+        tooltipAttr = @tooltipAttributesMapperByRuleType[ruletype]
+        licenseLiElement.attr "aria-label", "#{tooltipAttr.heading}: #{rule.description}"
+        licenseLiElement.addClass("hint--bottom
+                                   hint--large
+                                   hint--no-animate
+                                   #{tooltipAttr.color}
+                                   orverride-hint-inline")
 
   # Initializes Clipboard.js
   initClipboard: ->
@@ -83,23 +76,10 @@ class Choosealicense
 
 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"
+  inputWraper: $('.input-wrapper')
+  tooltipErrorClasses: 'hint--bottom tooltip--error hint--always'
 
   # Main event handlers for user input
   bindEventHandlers: =>
@@ -143,22 +123,19 @@ class LicenseSuggestion
   # 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()
+    displayTooltip = (status, message) =>
+      @inputWraper.attr('aria-label', "#{status}: #{message}")
+      @inputWraper.addClass(@tooltipErrorClasses)
 
     switch status
       when "Fetching"
-        @statusIndicator.removeClass('error').addClass(statusClass)
+        @statusIndicator.removeClass("error #{@tooltipErrorClasses}").addClass(statusClass)
       when "Error"
         @statusIndicator.removeClass('fetching').addClass(statusClass)
-        displayQtip status, message
+        displayTooltip status, message
       else
-        @inputEl.qtip("api").hide()
         @statusIndicator.removeClass('fetching error')
+        @inputWraper.removeClass(@tooltipErrorClasses)
 
   # Fetches information about a repository from the Github API
   fetchInfoFromGithubAPI: (repositoryFullName, callback) ->
@@ -174,10 +151,9 @@ class LicenseSuggestion
   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>."
+      "The repository #{repositoryFullName} is already licensed under the #{foundLicense.title}."
     else
-      "The repository <b> #{repositoryFullName}</b> is already licensed."
+      "The repository #{repositoryFullName} is already licensed."
 
 $ ->
   new Choosealicense()

assets/vendor/hint.css/.bower.json

@@ -0,0 +1,27 @@
+{
+  "name": "hint.css",
+  "main": "hint.min.css",
+  "author": "Kushagra Gour",
+  "ignore": [
+    "CONTRIBUTING.md",
+    "Gruntfile.js"
+  ],
+  "keywords": [
+    "hint",
+    "tooltip",
+    "tooltips",
+    "ui"
+  ],
+  "homepage": "https://github.com/chinchang/hint.css",
+  "version": "2.7.0",
+  "_release": "2.7.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.7.0",
+    "commit": "9fa90f8c94a23c61307b70ae5146a34f1d88ae46"
+  },
+  "_source": "https://github.com/chinchang/hint.css.git",
+  "_target": "^2.7.0",
+  "_originalSource": "hint.css",
+  "_direct": true
+}

assets/vendor/hint.css/.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true

assets/vendor/hint.css/.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+patreon: kushagra
+custom: https://paypal.me/kushagragour

assets/vendor/hint.css/.gitignore

@@ -0,0 +1,5 @@
+.sass-cache
+node_modules/
+hint.sublime-project
+hint.sublime-workspace
+*.map

assets/vendor/hint.css/.prettierignore

@@ -0,0 +1,4 @@
+hint.css
+hint.min.css
+hint.base.css
+hint.base.min.css

assets/vendor/hint.css/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Kushagra Gour
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.