Add tooltips

src/Podsync/Views/Home/Index.cshtml

@@ -34,12 +34,14 @@
 
         <div class="controls">
             <p>
-                <i class="fa fa-wrench" aria-hidden="true"></i>
-                @*                <i class="fa fa-question-circle" aria-hidden="true"></i>*@
-                <span class="">
+                <i id="control-icon" class="fa fa-question-circle" aria-hidden="true"></i>
+                <span id="control-panel" class="locked">
                     Selected format <a class="selected-option">video</a> <a>audio</a>,
-                    quality <a>best</a> <a class="selected-option">worst</a>,
-                    episode count <a>50</a> <a class="selected-option">100</a> <a>150</a>
+                    quality <a class="selected-option">best</a> <a>worst</a>,
+                </span>
+                <span class="locked" style="text-decoration: line-through">
+                    <i class="fa fa-question-circle master-tooltip" title="Still under development. We will keep you updated via Patreon's news feed" aria-hidden="true"></i>
+                    episode count <a class="selected-option">50</a> <a>100</a> <a>150</a>
                 </span>
             </p>
         </div>

src/Podsync/wwwroot/css/site.css

@@ -186,6 +186,18 @@ a {
 :-ms-input-placeholder { color: rgb(171, 163, 149); } /* IE 10+ */
 :-moz-placeholder { color: rgb(171, 163, 149); } /* Firefox 18- */
 
+/* Tooltips */
+
+.tooltip {
+    display: none;
+    position: absolute;
+    background: rgb(171, 163, 149);
+    border: 1px rgb(244, 236, 218) solid;
+    padding: 10px;
+    color: #4a4030;
+    max-width: 350px;
+}
+
 @media screen and (max-width: 640px) {
     .background-image {
         background-image: url('../img/mobile_bg.png')

src/Podsync/wwwroot/js/site.js

@@ -8,7 +8,6 @@ $(function () {
     
     function createFeed(data, done) {
         if (!data.url) {
-            err('Please fill the URL field first');
             return;
         }
 
@@ -46,9 +45,57 @@ $(function () {
         alert(link);
     }
 
+    /*
+        Tooltips
+    */
+
+    $(document).on('mouseenter', 'i', function() {
+        var title = $(this).attr('title');
+        if (!title) {
+            return;
+        }
+        $(this).data('tipText', title).removeAttr('title');
+        $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('fast');
+    });
+
+    $(document).on('mouseleave', 'i', function() {
+        var text = $(this).data('tipText');
+        $(this).attr('title', text);
+        $('.tooltip').remove();
+    });
+
+    $(document).on('mousemove', 'i', function(e) {
+        var x = e.pageX + 10;
+        var y = e.pageY + 5;
+        $('.tooltip').css({ top: y, left: x });
+    });
+
+    /*
+        Control panel
+    */
+
+    function enableControls(enable) {
+        if (enable) {
+            $('#control-panel')
+                .removeClass('locked');
+            $('#control-icon')
+                .removeClass('fa-question-circle master-tooltip')
+                .addClass('fa-wrench')
+                .removeAttr('title');
+        } else {
+            $('#control-panel').addClass('locked');
+            $('#control-icon')
+                .removeClass('fa-wrench')
+                .addClass('fa-question-circle master-tooltip')
+                .attr('title', 'This features are available for patrons only (please, login with your Patreon account). You may support us and unlock this features');
+        }
+    }
+
     $('#get-link').click(function(e) {
         var url = $('#url-input').val();
         createFeed({ url: url, quality: 'VideoHigh' }, displayLink);
         e.preventDefault();
     });
+
+    enableControls(true);
 });