- add popoverHtml to enable Markdown in Popovers

- add markdown filter to get Task Notes as Markdown
gema-arta · Oct 1, 2014 · b1a34a2 · b1a34a2
2 parents a595880 + c501652
commit b1a34a2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/public/js/directives/directives.js b/public/js/directives/directives.js
@@ -129,3 +129,34 @@ habitrpg.directive('hrpgSortTags', ['User', function(User) {
     });
   }
 }]);
+
+habitrpg
+  .directive( 'popoverHtmlPopup', ['$sce', function($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'
+    };
+  }])
+  .directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', 
+    function ( $compile, $timeout, $parse, $window, $tooltip ) {
+      return $tooltip( 'popoverHtml', 'popover', 'click' );
+    }
+  ])
+  .run(["$templateCache", function($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");
+  }]);
diff --git a/views/shared/tasks/task.jade b/views/shared/tasks/task.jade
@@ -1,4 +1,4 @@
-li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && castEnd(task, "task", $event)', ng-class='{"cast-target":spell}', popover-trigger='mouseenter', popover-placement='top', popover='{{task.notes}}')
+li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && castEnd(task, "task", $event)', ng-class='{"cast-target":spell}', popover-trigger='mouseenter', data-popover-html="{{task.notes | markdown}}", data-popover-placement="top")
   // right-hand side control buttons
   .task-meta-controls
 
@@ -147,7 +147,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
           input.option-content(type='text', ng-model='task.text', required, ng-disabled='task.challenge.id')
 
           label.option-title=env.t('extraNotes')
-          textarea.option-content(rows='3', ng-model='task.notes')
+          textarea.option-content(rows='3', ng-model='task.notes', ng-model-options="{debounce: 1000}")
 
         // if Habit, plus/minus command options
         fieldset.option-group(ng-if='task.type=="habit" && !task.challenge.id')