place comments into special wrapper, outside source_example

Author: robhrt7

README.md

@@ -5,6 +5,8 @@ Comments plugin for [SourceJS](http://sourcejs.com) for commenting Spec examples
 
 ![image](http://d.pr/i/kISN+)
 
+Compatible with SourceJS v.0.5.6+.
+
 ___
 
 To install, run npm in `sourcejs/user` folder:
@@ -13,11 +15,11 @@ To install, run npm in `sourcejs/user` folder:
 npm install sourcejs-comments --save
 ```
 
-Then run Grunt update in SourceJS root:
+Then run build command in SourceJS root:
 
 ```
 cd sourcejs
-grunt update
+npm run build
 ```
 
 After installation, all your Specs pages will have "Add description" tumbler in inner menu, that will active the plugin.
@@ -28,7 +30,7 @@ After installation, all your Specs pages will have "Add description" tumbler in
 
 As [MongoDB](http://www.mongodb.org/) is not essential dependency for SourceJS, you must install it separately, to work with plugins that expect data storage.
 
-[Install it](http://docs.mongodb.org/manual/installation/), run locally or remotely and configure your SourceJS in `sourcejs/user/options.js`:
+[Install MongoDB locally](http://docs.mongodb.org/manual/installation/) or get it from [MongoLab](https://mongolab.com) and configure your SourceJS in `sourcejs/user/options.js`:
 
 ```json
 core: {
@@ -72,6 +74,6 @@ mongoose.connect(dbAdress);
 /* /Connect to DB */
 ```
 
-___
+## Legacy versions
 
-Compatible with SourceJS v0.4+, for v0.3.* use [previous release](https://github.com/sourcejs/sourcejs-comments/archive/v0.0.9.zip).
+For SourceJS v0.3.* use older plugin version [0.0.x](https://github.com/sourcejs/sourcejs-comments/archive/v0.0.9.zip).

assets/css/bubble.css

@@ -4,6 +4,11 @@
  * @author Alexey Ostrovsky, Gennady Tsarinny
  */
 
+.source-bbl_container {
+	position: relative;
+	z-index: 9000;
+}
+
 .source-bbl_w {
 	position: absolute;
 	z-index: 9000;

assets/index.js

@@ -53,6 +53,7 @@ define([
             CLASS_BBL_INFO: 'source-bbl_info',
             CLASS_BBL_NAME: 'source-bbl_name',
 
+            CLASS_BBL_CONTAINER: 'source-bbl_container',
             CLASS_BBL_WRAPPER: 'source-bbl_w',
 
             ID_NEW_BBL: 'newBbl'
@@ -117,6 +118,23 @@ define([
         return this.options.pluginsOptions.bubble.demoSections.index(sec);
     };
 
+    Bubble.prototype.getSectionCommentContainer = function (num) {
+        var opts = this.options.pluginsOptions.bubble;
+        var $section = $(this.getSectionByNum(num));
+        var $container;
+
+        if (!$section || $section.length === 0) return;
+
+        if ($section.prev().hasClass(opts.CLASS_BBL_CONTAINER)) {
+            $container = $section.prev();
+        } else {
+            $container = $('<div class="source_clean '+ opts.CLASS_BBL_CONTAINER +'"></div>');
+            $section.before($container);
+        }
+
+        return $container;
+    };
+
     /* draw a bbl in section with coordinates and text*/
     Bubble.prototype.drawSingleBubble = function (id, section, x, y, timestamp, text, name, firstTimeDrawning) {
         var _this = this,
@@ -134,14 +152,18 @@ define([
             classBblHook = _this.options.pluginsOptions.bubble.CLASS_BBL_HOOK,
             classBblPointHook = _this.options.pluginsOptions.bubble.CLASS_BBL_POINT_HOOK;
 
+        var bubleContainer = _this.getSectionCommentContainer(section);
+
+        if (!bubleContainer) return;
+
         // bbl form wrapper
         newBubble.css({
             left: x,
             top: y
         })
             .attr("timestamp", timestamp)
             .attr("id", id)
-            .appendTo(_this.getSectionByNum(section))
+            .appendTo(bubleContainer)
         ;
 
         if (name === "") {
@@ -215,9 +237,7 @@ define([
             x = bubbleEl.css("left"),
             y = bubbleEl.css("top"),
 
-            section = this.getSectionNum(bubbleEl.closest("." + classSourceExample));
-
-
+            section = this.getSectionNum(bubbleEl.parent().next("." + classSourceExample));
 
         // save author to local storage and plugin settings
         if ( name ) {