✨ Site > Viewer > Add line modifications

2017-08-30 22:02:48 +02:00
parent fccffc2a2b
commit 5d745928ee
7 changed files with 154 additions and 24 deletions
@@ -108,18 +108,52 @@ class Project
        console.log('project'.green.bold + ' - ' + 'add test contents'.cyan)

        // Add some with true contents
-        this.files.createVersion('./test/file.css', `
-body {
+        this.files.createVersion('./test/file.css', `body {
    margin:0;
    padding:0;
 }

+h1, h2
+{
+    font-size:20px;
+}
+
+h3
+{
+    font-size:15px;
+}
+
+h4
+{
+    font-size:10px;
+}
+
 .toto .tata > span {
    background:url('kikoo.png') top left repeat-x;
+}`)
+        setTimeout(() =>
+        {
+            this.files.createVersion('./test/file.css', `body
+{
+    margin: 0;
 }
-        `)
-        this.files.createVersion('./test/file.js', `
-'use strict'
+
+h1
+{
+    font-size:20px;
+}
+
+h4
+{
+    font-size:10px;
+}
+
+.toto .tata > span
+{
+    background: url('kikoo.png') top left repeat-x;
+ }`)
+        }, 20)
+        this.files.createVersion('./test/file.js', `'use strict'

 /**
 * Test
@@ -135,10 +169,8 @@ class ClassName extends AnotherClass
    {

    }
-}
-        `)
-        this.files.createVersion('./test/file.php', `
-<?php
+}`)
+        this.files.createVersion('./test/file.php', `<?php

 /**
 * Test
@@ -155,10 +187,8 @@ class ClassName extends AnotherClass
    {

    }
-}
-        `)
-        this.files.createVersion('./test/file.html', `
-<!DOCTYPE html>
+}`)
+        this.files.createVersion('./test/file.html', `<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
@@ -172,8 +202,7 @@ class ClassName extends AnotherClass
        </form>
    </section>
 </body>
-</html>
-        `)
+</html>`)

        // Add some with icons
        this.files.createVersion('./test/icons/test.js', 'Test icon')
@@ -0,0 +1,7 @@
+.file-tree
+    position absolute
+    top 80px
+    bottom 0px
+    left 0
+    width 25%
+    overflow-y scroll
@@ -1,4 +1,4 @@
-<div>
+<div class="file-tree">
    <input type="text" v-model="searchValue">
    <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
    <div>
@@ -4,4 +4,5 @@
    left 0
    width 25%
    height 100%
+    overflow-y scroll
    background rgba(255, 0, 0, 0.3)
@@ -23,9 +23,85 @@ export default
            return this.$store.state.files.currentVersion
        },

-        linesCount()
+        lines()
        {
-            return (this.$store.state.files.currentVersion.content.match(/\n/g) || []).length + 1
+            const lines = []
+            const lineBreaks = (this.version.content.match(/\n/g) || []).length + 1
+
+            // Create all lines
+            for(let i = 0; i < lineBreaks; i++)
+            {
+                const line = {}
+                line.index = lines.length + 1
+                line.added = false
+                line.removed = false
+
+                lines.push(line)
+            }
+
+            // Loop through each diff and add line infos
+            if(this.version.diff)
+            {
+                let lineProgress = 0
+
+                // Added lines and unchanged lines
+                for(const diffKey in this.version.diff)
+                {
+                    const diff = this.version.diff[diffKey]
+                    let lineBreaks = (diff.value.match(/\n/g) || []).length
+
+                    if(parseInt(diffKey) === this.version.diff.length - 1)
+                    {
+                        lineBreaks += 1
+                    }
+
+                    if(diff.added)
+                    {
+                        for(let i = 0; i < lineBreaks; i++)
+                        {
+                            const line = lines[lineProgress + i]
+                            line.added = true
+                        }
+                    }
+
+                    if(!diff.removed)
+                    {
+                        lineProgress += lineBreaks
+                    }
+                }
+
+                lineProgress = 0
+
+                // Removed lines
+                for(const diffKey in this.version.diff)
+                {
+                    const diff = this.version.diff[diffKey]
+                    let lineBreaks = (diff.value.match(/\n/g) || []).length
+
+                    if(parseInt(diffKey) === this.version.diff.length - 1)
+                    {
+                        lineBreaks += 1
+                    }
+
+                    if(diff.removed)
+                    {
+                        const line = lines[lineProgress]
+                        const nextLine = lines[lineProgress + 1]
+
+                        if(!line.added && (!nextLine || nextLine.added === false))
+                        {
+                            line.removed = true
+                        }
+                    }
+
+                    if(!diff.removed)
+                    {
+                        lineProgress += lineBreaks
+                    }
+                }
+            }
+
+            return lines
        }
    },

@@ -32,11 +32,24 @@
    pointer-events none

    .line
+        position relative
        color #abb2bf
        opacity 0.75
        letter-spacing -1px
        padding-left 25px

+        .added
+            position absolute
+            top 0
+            left 9px
+            color #00ffa5
+
+        .removed
+            top -10px
+            left 9px
+            position absolute
+            color #ff8157
+
 .code
    position absolute
    top 0
@@ -1,6 +1,10 @@
 <div class="viewer" v-if="version">
    <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
    <div class="lines">
-        <div class="line" v-for="i in linesCount">{{ i }}.</div>
+        <div class="line" v-for="line in lines">
+            <div class="added" v-if="line.added">+</div>
+            <div class="removed" v-if="line.removed">-</div>
+            <span class="index">{{ line.index }}.</span>
+        </div>
    </div>
 </div>