Anonymous avatar Anonymous committed 00f117a

new layout for comments. Started to implement hilighting. Commited before sync with my laptop

Comments (0)

Files changed (3)

static/css/src/layout.css

    
 }
 
-#paste {
-    display: block;
-    margin-top: 10px;
+#paste_wrapper {
     clear: both;
     height: 450px;
     overflow: auto;
+    margin-top: 10px;
+
+}
+
+#paste_comments {
+    display: block;
+    position: relative;
+    float: left;
+ 
+}
+
+#paste_comments h2 {
+    font-size: 12px;
+    margin: 0;
+    padding: 0.3em;
+}
+
+#paste_comments.hidden {
+    display: none;
+}
+
+#paste {
+    display: block;
+    position: relative;
+    float: right;  
 }
 
 
     display: none;
 }
 
+.highlighted-line {
+    background-color: rgb(255, 255, 120);
+}
+
+
 .addComment {
     display: block;
     position: absolute;

static/js/src/friendpaste.js

         this.canvas = null;
         this.divCanvas = null;
         window.Node.prototype.enclosingNodeOrSelfWithNodeName = Node.prototype.enclosingNodeOrSelfWithNodeName;
+    
+        this.commentsDiv = document.querySelector('#paste_comments');
+        this.pasteDiv = document.querySelector('#paste');
+        
+        document.querySelector('.insertComment').addEventListener('click',
+            this.insertComment.bindAsEventListener(this), false);
+    
+    },
+    
+    
+    insertComment: function(event) {
+        
+        var selection = this.getSelection();
+        if (selection && selection.toString().trimWhitespace() != "") {
+            var sourceRowStart = base2.DOM.bind(selection.anchorNode.enclosingNodeOrSelfWithNodeName("tr"));
+            var sourceRowEnd = base2.DOM.bind(selection.focusNode.enclosingNodeOrSelfWithNodeName("tr"));
+            if (sourceRowStart && sourceRowEnd) { // we are in source table
+                log(sourceRowStart)
+                this.commentsDiv.style.width = "22.6%";
+                this.pasteDiv.style.width = "77%";
+                this.commentsDiv.style.height = this.pasteDiv.outerHeight() + 'px';
+                if (this.commentsDiv.classList.has("hidden"))
+                    this.commentsDiv.classList.remove("hidden");
+                    
+                    this._insertComment(selection);
+            }
+                
+                
+                
+            
+        }
+    },
+    
+    _insertComment: function(selection) {
+          var d =  this.getSelectionDimensions(selection);
+          this._hilightSelection(selection)
+          
+          log(String.sprintf('selection : x: %s, y: %s,'+
+                ' height: %s, start:%s, end: %s', d.x, d.y, d.height,
+                 d.lineStart, d.lineEnd))
+    },
+    
+    getSelectionDimensions: function(selection) {
+        var offsets = this.code.getOffsets();
+        var sourceRowStart = base2.DOM.bind(selection.anchorNode.enclosingNodeOrSelfWithNodeName("tr"));
+        var sourceRowEnd = base2.DOM.bind(selection.focusNode.enclosingNodeOrSelfWithNodeName("tr"));
+        var start = sourceRowStart.getOffsets();
+        var end = sourceRowEnd.getOffsets();
+        var height = end.y - start.y;
+        if (height < 0) {
+            height = -height + sourceRowEnd.outerHeight();
+            y = end.y - offsets.y;
+            x = end.x - offsets.x + 20;
+        } else {
+            height += sourceRowStart.outerHeight();
+            y = start.y - offsets.y;
+            x = start.x - offsets.x + 20;
+        }
+        
+        return { 
+            x: x, 
+            y: y, 
+            height: height, 
+            lineStart: this.lineNumberForSourceRow(sourceRowStart),
+            lineEnd: this.lineNumberForSourceRow(sourceRowEnd)
+        }
+        
+    },
+    
+    _hilightSelection: function(selection) {
+        
+        function create_span() {
+            var span = document.createElement(span);
+            span.className = 'highlighted-line';
+            
+        }
+        var range = selection.getRangeAt(0);
+        log(range)
+        
+            
+        
     },
     
     _codeMouseDown: function(event) {

templates/paste/view.html

                 <p class="lsnippet">Link to this snippet : <a href="/{{ snippet.pasteid }}">http://friendpaste.com/{{ snippet.pasteid  }}</a></p>
             </div>
             <div id="actions">
+                <a href="#" class="insertComment">Insert comment</a>
                 <form id="factions" action="{{ url_for('settings') }}" method="post">
                     <ul>
                         <li class="first">
                 </form>
             </div>
         </header>
+        
+        <div id="paste_wrapper">
+            <div id="paste_comments" class="hidden">
+                <h2>Comments</h2>
+            
+                sdsqdsd
+                <p>fdsfdsf</p>
+                <p>fdsfdsf</p>
+                <p>fdsfdsf</p>
+            </div>
 
-        <div id="paste_comments"></div>
-
-        <div id="paste" class="highlight">
-            <div class="line-gutter-backdrop">
-                {{ snippet.content|highlight(snippet.language) }}
+            <div id="paste" class="highlight">
+                <div class="line-gutter-backdrop">
+                    {{ snippet.content|highlight(snippet.language) }}
+                </div>
             </div>
         </div>
-        
         <footer>
             <div id="bottoma">
                 <ul>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.