Make app directives compatible with jQLite

This enables the sidebar app to function with only
jQLite, rather than the full jQuery library.

The main differences are:

 - jqLite's find() method only supports tag names.
   Element.querySelector() can be used instead
 - jqLite-wrapped input elements do not have a focus()
   method. Just call focus() on the input instead
 - The DOM focus() and select() methods are not fluent
   like their jQuery counterparts

h/static/scripts/directive/annotation.js

@@ -709,7 +709,10 @@ function AnnotationController(
 
   vm.share = function(event) {
     var $container = angular.element(event.currentTarget).parent();
-    $container.addClass('open').find('input').focus().select();
+    $container.addClass('open');
+    var shareLinkInput = $container.find('input')[0];
+    shareLinkInput.focus();
+    shareLinkInput.select();
 
     // We have to stop propagation here otherwise this click event will
     // re-close the share dialog immediately.

h/static/scripts/directive/h-autofocus.js

@@ -17,7 +17,7 @@ module.exports = function() {
   return {
     restrict: 'A',
     link: function($scope, $element, $attrs) {
-      $element.focus();
+      $element[0].focus();
     }
   };
 };

h/static/scripts/directive/markdown.coffee

 mediaEmbedder = require('../media-embedder')
+angular = require('angular')
 
 loadMathJax = ->
   if !MathJax?
@@ -27,9 +28,9 @@ module.exports = ['$filter', '$sanitize', '$sce', '$timeout', ($filter, $sanitiz
   link: (scope, elem, attr, ctrl) ->
     return unless ctrl?
 
-    inputEl = elem.find('.js-markdown-input')
-    input = elem.find('.js-markdown-input')[0]
-    output = elem.find('.js-markdown-preview')[0]
+    input = elem[0].querySelector('.js-markdown-input')
+    inputEl = angular.element(input)
+    output = elem[0].querySelector('.js-markdown-preview')
 
     userSelection = ->
       if input.selectionStart != undefined
@@ -251,17 +252,16 @@ module.exports = ['$filter', '$sanitize', '$sce', '$timeout', ($filter, $sanitiz
       scope.applyBlockMarkup("> ")
 
     # Keyboard shortcuts for bold, italic, and link.
-    elem.on
-      keydown: (e) ->
-        shortcuts =
-          66: scope.insertBold
-          73: scope.insertItalic
-          75: scope.insertLink
-
-        shortcut = shortcuts[e.keyCode]
-        if shortcut && (e.ctrlKey || e.metaKey)
-          e.preventDefault()
-          shortcut()
+    elem.on 'keydown', (e) ->
+      shortcuts =
+        66: scope.insertBold
+        73: scope.insertItalic
+        75: scope.insertLink
+
+      shortcut = shortcuts[e.keyCode]
+      if shortcut && (e.ctrlKey || e.metaKey)
+        e.preventDefault()
+        shortcut()
 
     scope.preview = false
     scope.togglePreview = ->
@@ -272,7 +272,7 @@ module.exports = ['$filter', '$sanitize', '$sce', '$timeout', ($filter, $sanitiz
           ctrl.$render()
         else
           input.style.height = output.style.height
-          $timeout -> inputEl.focus()
+          $timeout -> input.focus()
 
     mathJaxFallback = false
     renderMathAndMarkdown = (textToCheck) ->
@@ -358,7 +358,7 @@ module.exports = ['$filter', '$sanitize', '$sce', '$timeout', ($filter, $sanitiz
       scope.preview = false
       output.style.height = ""
       ctrl.$render()
-      unless readOnly then $timeout -> inputEl.focus()
+      unless readOnly then $timeout -> input.focus()
 
   require: '?ngModel'
   restrict: 'E'

h/static/scripts/directive/share-dialog.coffee

@@ -9,11 +9,16 @@ module.exports = ['crossframe', (crossframe) ->
   link: (scope, elem, attrs, ctrl) ->
     scope.viaPageLink = ''
 
+    viaInput = elem[0].querySelector('.js-via')
+
     # Watch scope.shareDialog.visible: when it changes to true, focus input
     # and selection.
     scope.$watch (-> scope.shareDialog?.visible), (visible) ->
       if visible
-        scope.$evalAsync(-> elem.find('#via').focus().select())
+        scope.$evalAsync(->
+          viaInput.focus()
+          viaInput.select()
+        )
 
     scope.$watchCollection (-> crossframe.frames), (frames) ->
       if not frames.length

h/static/scripts/directive/simple-search.coffee

@@ -3,7 +3,7 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
     button = elem.find('button')
     input = elem.find('input')
 
-    button.on('click', -> input.focus())
+    button.on('click', -> input[0].focus())
 
     scope.reset = (event) ->
       event.preventDefault()

h/templates/client/share_dialog.html

@@ -9,8 +9,7 @@
     </ul>
     <div class="tab-content">
       <p>Share the link below to show anyone these annotations and invite them to contribute their own.</p>
-      <p><input id="via"
-          class="form-input"
+      <p><input class="js-via form-input"
           type="text"
           ng-value="viaPageLink"
           readonly /></p>