Split directives into separate files

website/public/js/directives/popover-html-popup.directive.js

@@ -0,0 +1,45 @@
+'use strict';
+
+angular
+  .module('habitrpg')
+  .directive('popoverHtmlPopup', popoverHtmlPopup)
+  .run(loadPopupTemplate);
+
+popoverHtmlPopup.$inject = [
+  '$sce'
+];
+
+function popoverHtmlPopup($sce) {
+  return {
+      restrict: 'EA',
+      replace: true,
+      scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
+      link: function(scope, element, attrs) {
+        scope.$watch('content', function(value, oldValue) {
+          scope.unsafeContent = $sce.trustAsHtml(scope.content);
+        });
+      },
+      templateUrl: 'template/popover/popover-html.html'
+  };
+}
+
+/*
+ * TODO: Review whether it's appropriate to be seeding this into the
+ * templateCache like this. Feel like this might be an antipattern?
+ */
+
+loadPopupTemplate.$inject = [
+  '$templateCache'
+];
+
+function loadPopupTemplate($templateCache) {
+  $templateCache.put("template/popover/popover-html.html",
+    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
+    "  <div class=\"arrow\"></div>\n" +
+    "\n" +
+    "  <div class=\"popover-inner\">\n" +
+    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
+    "      <div class=\"popover-content\" ng-bind-html=\"unsafeContent\" style=\"word-wrap: break-word\">    </div>\n" +
+    "  </div>\n" +
+    "</div>\n");
+}