furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Site > Viewer > Add line modifications

Browse Source
This commit is contained in:
brunosimon
2017-08-30 22:02:48 +02:00
parent fccffc2a2b
commit 5d745928ee
7 changed files with 154 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/project.js
+44 -15
View File
@@ -108,18 +108,52 @@ class Project
console.log('project'.green.bold + ' - ' + 'add test contents'.cyan) console.log('project'.green.bold + ' - ' + 'add test contents'.cyan)
// Add some with true contents // Add some with true contents
this.files.createVersion('./test/file.css', ` this.files.createVersion('./test/file.css', `body {
body {
margin:0; margin:0;
padding:0; padding:0;
} }
h1, h2
{
font-size:20px;
}
h3
{
font-size:15px;
}
h4
{
font-size:10px;
}
.toto .tata > span { .toto .tata > span {
background:url('kikoo.png') top left repeat-x; background:url('kikoo.png') top left repeat-x;
}`)
setTimeout(() =>
{
this.files.createVersion('./test/file.css', `body
{
margin: 0;
} }
`)
this.files.createVersion('./test/file.js', ` h1
'use strict' {
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 * Test
@@ -135,10 +169,8 @@ class ClassName extends AnotherClass
{ {
} }
} }`)
`) this.files.createVersion('./test/file.php', `<?php
this.files.createVersion('./test/file.php', `
<?php
/** /**
* Test * 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"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -172,8 +202,7 @@ class ClassName extends AnotherClass
</form> </form>
</section> </section>
</body> </body>
</html> </html>`)
`)
// Add some with icons // Add some with icons
this.files.createVersion('./test/icons/test.js', 'Test icon') this.files.createVersion('./test/icons/test.js', 'Test icon')
site/src/components/files-tree/style.styl
+7
View File
@@ -0,0 +1,7 @@
.file-tree
position absolute
top 80px
bottom 0px
left 0
width 25%
overflow-y scroll
site/src/components/files-tree/template.html
+2 -2
View File
@@ -1,7 +1,7 @@
<div> <div class="file-tree">
<input type="text" v-model="searchValue"> <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> <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
<div> <div>
<a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a> <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
</div> </div>
</div> </div>
site/src/components/versions/style.styl
+1
View File
@@ -4,4 +4,5 @@
left 0 left 0
width 25% width 25%
height 100% height 100%
overflow-y scroll
background rgba(255, 0, 0, 0.3) background rgba(255, 0, 0, 0.3)
site/src/components/viewer/script.js
+78 -2
View File
@@ -23,9 +23,85 @@ export default
return this.$store.state.files.currentVersion 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
} }
}, },
site/src/components/viewer/style.styl
+13
View File
@@ -32,11 +32,24 @@
pointer-events none pointer-events none
.line .line
position relative
color #abb2bf color #abb2bf
opacity 0.75 opacity 0.75
letter-spacing -1px letter-spacing -1px
padding-left 25px padding-left 25px
.added
position absolute
top 0
left 9px
color #00ffa5
.removed
top -10px
left 9px
position absolute
color #ff8157
.code .code
position absolute position absolute
top 0 top 0
site/src/components/viewer/template.html
+5 -1
View File
@@ -1,6 +1,10 @@
<div class="viewer" v-if="version"> <div class="viewer" v-if="version">
<pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre> <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
<div class="lines"> <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>
</div> </div>