Issue169

api/controllers/ExampleController.js

@@ -30,7 +30,7 @@ module.exports = {
       user_id: user.id,
       topic_id: topicId
     }).then(function(instance) {
-      RedisService.del('view_topic_' + topicId);
+      RedisService.invalidateTopicById(topicId);
       if(req.wantsJSON) {
         return res.created(instance.toJSON());
       } else {
@@ -46,8 +46,36 @@ module.exports = {
   },
 
 
+  deleteExample: function(req, res) {
+    var exampleId = req.param('exampleId');
+    var user = req.user;
+    return Example.findOne({where:{id: exampleId, user_id: user.id}}).then(function(instance) {
+      if(instance){
+        RedisService.invalidateTopicById(instance.topic_id);
+        return instance.destroy().then(function(){return res.json({status: "done"})});
+      }else{
+        return res.json({status: "forbidden"});
+      }
+    }).catch(function(err) {
+      return res.negotiate(err);
+    });
+  },
 
-
+  updateExample: function(req, res) {
+    var exampleId = req.param('exampleId');
+    var exampleText = req.param('text');
+    var user = req.user;
+    return Example.findOne({where:{id: exampleId, user_id: user.id}}).then(function(instance) {
+      if(instance){
+        RedisService.invalidateTopicById(instance.topic_id);
+        return instance.update({example: exampleText}).then(function(){return res.json({status: "done"})});
+      }else{
+        return res.json({status: "forbidden"});
+      }
+    }).catch(function(err) {
+      return res.negotiate(err);
+    });
+  },
 
    /**
   * @api {get} /topics/:topicId/reviews/ Get list of topic's review

api/services/RedisService.js

@@ -50,6 +50,13 @@ module.exports = {
         RedisClient.del(row);
       });
     })
+  },
+
+  invalidateTopicById: function(id) {
+    RedisService.del('view_topic_' + id);
+    Topic.findById(id,{include: [{model: PackageVersion, as: 'package_version'}]}).then(function(topic){
+      RedisService.del('view_topic_' + topic.package_version.package_name + '_' + topic.package_version.version + '_' + topic.name);
+    });
   }
 
 

assets/js/helpers/boot.js

@@ -17,6 +17,7 @@
     trendingPackagesLastWeek();
     trendingKeywords(); 
     bootTopic();
+    bootUser();
     bindUpvoteButton();
     window.bindFade();
   };

assets/js/pages/topic.js

@@ -1,47 +1,49 @@
 (function($) {
+
+
   bootTopic = function () {
 
-    var bootstrapExamples = function() {
-      if(urlParam("viewer_pane") != 1) {
-        window.initAddedDCLightExercises();
-      }
-      else {
-        $('.run-example').each(function() {
-          var packageName = $(this).parent().parent().data('package-name') || $('.packageData').data('package-name');
-          $(this).click(function(){
-            window.executePackageCode(packageName,$(this).prev().text());
-          });
+  var bootstrapExamples = function() {
+    if(urlParam("viewer_pane") != 1) {
+      window.initAddedDCLightExercises();
+    }
+    else {
+      $('.run-example').each(function() {
+        var packageName = $(this).parent().data('package-name') || $('.packageData').data('package-name');
+        $(this).click(function(){
+          window.executePackageCode(packageName,$(this).prev().text());
         });
-      }
-    };
+      });
+    }
+  };
 
-    var renderer = new marked.Renderer();
-    var defaultCodeFunction = renderer.code;
+  var renderer = new marked.Renderer();
+  var defaultCodeFunction = renderer.code;
 
-    renderer.code = function(code, lang) {
-      if(urlParam("viewer_pane") == 1 && (lang === 'r' || lang === '{r}')) {
-        var $block = $("<div>");
+  renderer.code = function(code, lang) {
+    if(urlParam("viewer_pane") == 1 && (lang === 'r' || lang === '{r}')) {
+      var $block = $("<div>");
 
-        var exampleHTML = "<pre><code>" + code + "</code></pre>";
+      var exampleHTML = "<pre><code>" + code + "</code></pre>";
 
-        var $button = $('<button type="button" class="visible-installed btn btn-primary js-external run-example">Run codeblock </button>');
+      var $button = $('<button type="button" class="visible-installed btn btn-primary js-external run-example">Run codeblock </button>');
 
-        $block.append(exampleHTML);
-        $block.append($button);
-        return $block.prop('outerHTML');
+      $block.append(exampleHTML);
+      $block.append($button);
+      return $block.prop('outerHTML');
 
-      }
-      else if(lang === '{r}' || lang === 'r' || lang === 'python' || lang === '{python}') {
-        var codeBlock = '<div data-datacamp-exercise data-lang="r">';
-        codeBlock += '<code data-type="sample-code">';
-        codeBlock += code;
-        codeBlock += '</code>';
-        codeBlock += '</div>';
-        return codeBlock;
-      } else {
-        return defaultCodeFunction.call(this, code, lang);
-      }
-    };
+    }
+    else if(lang === '{r}' || lang === 'r' || lang === 'python' || lang === '{python}') {
+      var codeBlock = '<div data-datacamp-exercise data-lang="r">';
+      codeBlock += '<code data-type="sample-code">';
+      codeBlock += code;
+      codeBlock += '</code>';
+      codeBlock += '</div>';
+      return codeBlock;
+    } else {
+      return defaultCodeFunction.call(this, code, lang);
+    }
+  };
 
     if ($("#postExampleText").length >= 1) {
       var simplemde = new SimpleMDE({

assets/js/pages/user.js

@@ -0,0 +1,110 @@
+(function($){
+	bootUser = function(){
+		window.userButtons();
+	};
+
+	window.userButtons = function(){
+		$(".delete-example").click(function(){
+			var $this = $(this);
+			$.ajax({url: "api/examples/"+$(this).parents(".example").data("exampleid"),
+							type: "delete",
+							success: function(response){
+								if(response.status === "done"){
+									$this.parents(".example-wrapper").remove();
+								}
+							}
+						 });
+		});
+		bindEditButton();
+	};
+
+	bindEditButton = function(){
+		$(".edit-example").click(function(){
+			$(this).unbind("click");
+			var $example = $(this).parents(".example");
+			var $text = $example.find(".example--text");
+			$text.replaceWith("<textarea name = 'text' rows = '4'>"+$text.data("raw")+"</textarea>");
+			var bootstrapExamples = function() {
+		    if(urlParam("viewer_pane") != 1) {
+		      window.initAddedDCLightExercises();
+		    }
+		    else {
+		      $('.run-example').each(function() {
+		        var packageName = $(this).parent().data('package-name') || $('.packageData').data('package-name');
+		        $(this).click(function(){
+		          window.executePackageCode(packageName,$(this).prev().text());
+		        });
+		      });
+		    }
+		  };
+
+		  var renderer = new marked.Renderer();
+		  var defaultCodeFunction = renderer.code;
+
+		  renderer.code = function(code, lang) {
+		    if(urlParam("viewer_pane") == 1 && (lang === 'r' || lang === '{r}')) {
+		      var $block = $("<div>");
+
+		      var exampleHTML = "<pre><code>" + code + "</code></pre>";
+
+		      var $button = $('<button type="button" class="visible-installed btn btn-primary js-external run-example">Run codeblock </button>');
+
+		      $block.append(exampleHTML);
+		      $block.append($button);
+		      return $block.prop('outerHTML');
+
+		    }
+		    else if(lang === '{r}' || lang === 'r') {
+		      var codeBlock = '<div data-datacamp-exercise data-lang="r">';
+		      codeBlock += '<code data-type="sample-code">';
+		      codeBlock += code;
+		      codeBlock += '</code>';
+		      codeBlock += '</div>';
+		      return codeBlock;
+		    }else if(lang === 'python' || lang === '{python}') {
+		      var codeBlock = '<div data-datacamp-exercise data-lang="python">';
+		      codeBlock += '<code data-type="sample-code">';
+		      codeBlock += code;
+		      codeBlock += '</code>';
+		      codeBlock += '</div>';
+		      return codeBlock;
+		    } else {
+		      return defaultCodeFunction.call(this, code, lang);
+		    }
+		  };
+	    var element = $example.find("textarea")[0]
+			var simplemde = new SimpleMDE({
+        element: element,
+        previewRender: function(plainText, preview) {
+          setTimeout(function() {
+            var rendered = marked(plainText, {renderer: renderer});
+            $(preview).html(rendered);
+            if(urlParam("viewer_pane") !== 1){
+              bootstrapExamples();
+            }
+          }, 0);
+          return "Loading...";
+        },
+        spellChecker: false,
+        status: false
+      });
+      $example.find(".example--body").append("<div><button class='btn btn-primary submit-edit' type='button'>Submit your changes</button></div>");
+      $example.find(".submit-edit").click(function(){
+      	$this = $(this);
+      	var value = simplemde.value();
+      	$.post("/api/examples/"+$example.data("exampleid"),{text: value},function(response){
+					var string = "<p class='example--text' data-raw='"+value+"'>"+value+"</p>";
+      		$example.find(".example--body").html(string);
+      		$('.example--text').each(function() {
+      			var markdown = $(this).html();
+      			var rendered =  marked(markdown, {renderer: renderer});
+      			$(this).html(rendered);
+    			});
+    			bootstrapExamples();
+      		bindEditButton();
+      	});
+      });
+		});
+	};
+
+})($jq);

assets/styles/pages/_examples.scss

@@ -14,7 +14,6 @@
 }
 
 .example--title {
-  display: flex;
   padding: 1rem;
   background-color: $primary-ultra-light;
   border-bottom: 1px solid $primary-extra-light;
@@ -69,3 +68,21 @@ $star-size: 17px;
 .editor-toolbar.fullscreen, .CodeMirror-fullscreen, .editor-preview-side {
   margin-top: 30px !important;
 }
+
+.buttons{
+  font-size : 1.5em;
+  margin-top : -5px;
+  float : right;
+}
+
+.submit-edit{
+  margin-top: 1.5em;
+}
+
+.edit-example{
+  margin-right: 5px;
+}
+
+.edit-example:hover, .delete-example:hover{
+  cursor: pointer;
+}

assets/styles/pages/_user.scss

@@ -13,4 +13,10 @@
   h3 {
     margin-bottom: $default-space / 2.0;
   }
+}
+
+.example {
+  .clearfix:before, .container:before, .container-fluid:before, .row:before{
+    display: none;
+  }
 }

config/routes.js

@@ -126,6 +126,8 @@ module.exports.routes = {
     // API
     'get /api/topics/:topicId/examples': 'ExampleController.findByTopic',
     'post /api/topics/:topicId/examples': 'ExampleController.postExampleToTopic',
+    'delete /api/examples/:exampleId': 'ExampleController.deleteExample',
+    'post /api/examples/:exampleId': 'ExampleController.updateExample',
 
   //***** TaskViews *****
     // API

views/layout.ejs

@@ -58,7 +58,7 @@
     -->
 
     <!--TEMPLATES-->
-
+    
     <!--TEMPLATES END-->
 
     <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
@@ -107,6 +107,7 @@
     <script src="/js/pages/task_views.js"></script>
     <script src="/js/pages/topic.js"></script>
     <script src="/js/pages/trending.js"></script>
+    <script src="/js/pages/user.js"></script>
     <script src="/js/search.js"></script>
     <!--SCRIPTS END-->
     <script>hljs.initHighlightingOnLoad();</script>

views/shared/_example.ejs

@@ -1,18 +1,28 @@
-<div class="example">
-  <div class='example--title'>
-    <span>
-      <% if(exampleUser !== null) { %>
-        <strong><%= exampleUser.username %></strong>
-      at
+<div class="example-wrapper">  
+  <% if(exampleTarget!==null){ %>
+    <a href = '<%- exampleTarget.uri %>'><h4><%- exampleTarget.package_version.package_name+": "+exampleTarget.name %></h4></a>
+  <% } %>
+  <div class="example" data-exampleid=<%-user_examples[i].id%>>
+    <div class='example--title'>
+      <span>
+        <% if(exampleUser !== null) { %>
+          <strong><%= exampleUser.username %></strong>
+        at
+        <% } %>
+        <%= dateformat(user_examples[i].created_at, "mediumDate") %>
+      </span>
+      <% if(user && user_examples[i].user_id===user.id){ %>
+        <div class="buttons">
+          <i class="edit-example fa fa-pencil" aria-hidden="true"></i>
+          <i class="delete-example fa fa-times" aria-hidden="true"></i>
+        </div>
       <% } %>
-
-      <%= dateformat(user_examples[i].created_at, "mediumDate") %>
-    </span>
-  </div>
-  <div class='example--body'>
-    <p class='example--text tex2jax_ignore' 
-    <%if(user_examples[i].topic){%>
-     data-package-name = '<%=user_examples[i].topic.package_version.package_name%>'
-     <%}%>><%= user_examples[i].example %></p>
+    </div>
+    <div class='example--body'>
+      <p class='example--text tex2jax_ignore' data-raw='<%= user_examples[i].example %>'
+      <%if(user_examples[i].topic){%>
+        data-package-name = '<%=user_examples[i].topic.package_version.package_name%>'
+      <%}%>><%= user_examples[i].example %></p>
+    </div>
   </div>
 </div>

views/user/show.ejs

@@ -14,8 +14,7 @@
         <% } %>
         <% for(var i=0; i < user_examples.length; i++) { %>
           <% var exampleUser = null; %>
-          <% var reviewTarget = (user_examples[i].topic); %>
-          <a href = '<%- reviewTarget.uri %>'><h4><%- reviewTarget.package_version.package_name+": "+reviewTarget.name %></h4></a>
+          <% var exampleTarget = (user_examples[i].topic); %>
           <%- include ../shared/_example.ejs %>
         <% } %>
       </div>