Browse Source

fixed disappearing cursor when scrolled to bottom right pane also scrolls in proportion to left pane

master
3 years ago
parent
commit
3e77382c35
7 changed files with 209 additions and 26 deletions
  1. +1
    -0
      .gitignore
  2. +109
    -0
      assets/Vimlogo.svg
  3. +1
    -0
      assets/markdown.svg
  4. +68
    -11
      index.html
  5. +7
    -7
      javascript/main.js
  6. +1
    -1
      styles/bulma.min.css
  7. +22
    -7
      styles/main.css

+ 1
- 0
.gitignore View File

@ -0,0 +1 @@
*.swp

+ 109
- 0
assets/Vimlogo.svg View File

@ -0,0 +1,109 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="544.16998"
height="544.8642"
version="1.1">
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(-69.980994,-160.33288)">
<g
id="g3699"
transform="matrix(1.532388,0,0,1.3939671,-54.912136,-41.792396)">
<path
id="path2836"
d="M 260.50744,170.69515 105.98412,340.79094 259.8636,510.178 414.38691,340.08221 260.50744,170.69515 z"
style="fill:#019833;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path2838"
d="m 259.8636,171.40389 0,-14.88338 -168.044108,184.97916 14.164628,0 153.87948,-170.09578 z"
style="fill:#66fe98;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="fill:#45fe02;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 259.47729,171.40389 0,-14.88338 168.0441,184.97916 -14.16463,0 -153.87947,-170.09578 z"
id="path2840" />
<path
style="fill:#017d17;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 259.8636,511.17022 0,14.88338 -168.044108,-184.97916 14.164628,0 153.87948,170.09578 z"
id="path2842" />
<path
id="path3650"
d="m 122.99448,175.30643 108.35396,0 6.60139,7.26665 0,22.30116 -5.23559,7.01608 -11.83699,0 0,110.75406 101.98019,-110.75406 -16.84494,0 -5.9185,-7.01608 0,-23.55403 5.46323,-5.51264 109.71976,0 5.46322,6.01379 0,22.05058 -248.12143,280.14258 -28.22666,0 -8.17033,-5.19252 0,-267.93397 -13.68257,0 -5.00795,-5.51264 0,-23.55403 5.46321,-6.51493 z"
style="fill:none;stroke:#000000;stroke-width:18.91431427;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
id="path2844"
d="m 259.47729,511.17022 0,14.88338 168.0441,-184.97916 -14.16463,0 -153.87947,170.09578 z"
style="fill:#005d04;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="fill:none;stroke:#000000;stroke-width:5.67429399;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="M 259.41018,155.14848 90.734026,340.82339 258.70737,525.72467 427.38353,340.04975 259.41018,155.14848 z"
id="path2846" />
<path
id="path3640"
d="m 232.50008,186.64163 6.11655,-3.54366 -6.27751,-6.91014 -109.29305,0 -5.55319,6.11281 0,23.1224 6.15679,6.77725 2.93756,-6.77725 -3.86308,-4.2524 0,-16.30085 2.89731,-2.83492 104.30324,0 2.57538,4.60676 z"
style="fill:#fefefe;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
transform="matrix(0.90138601,0,0,0.99222542,-437.42287,-185.30615)"
d="m 828.9375,369.5 -4.28125,4.28125 0,15.71875 3.75,3.75 19.8125,0 0,15.1875 -131.0625,132.84375 0,-147.84375 21.78125,0 4.46875,-4.46875 0,-15.90625 -4.125,-3.1875 -114.625,0 -3.75,3.75 0,16.25 3.8125,3.8125 19.9375,0 0,272.25 3.75,3.75 22.65625,0 274.65625,-283.40625 0,-12.5 -4.28125,-4.28125 -112.5,0 z"
id="path3632"
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3646"
d="m 143.48158,204.87424 0,270.62073 3.18688,4.0092 -2.49916,5.24301 -7.06148,-7.74876 0,-265.1081 z"
style="fill:#fefefe;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3644"
d="m 125.82451,204.87424 -1.82108,6.51494 13.2028,0 7.2843,-6.51494 -18.66602,0 z"
style="fill:#808080;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3638"
d="m 307.18636,212.19144 2.89731,-6.55577 -4.18501,-4.2524 0,-14.52901 4.82886,-5.31551 100.76208,0 3.86308,5.66987 5.4727,-4.2524 -5.63366,-6.20141 -108.32729,0 -5.39221,5.93564 0,23.29957 5.59342,5.80276 m -87.54309,111.87785 -10.52288,28.10566 118.7898,-131.1155 0,-15.59211 -108.26692,118.60195 z"
style="fill:#fefefe;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3642"
d="m 232.25896,185.83056 5.2356,-3.75862 0,22.8023 -6.03231,6.64023 -11.72317,0 0,112.38277 -10.69882,27.81381 0,-146.83681 19.57656,0 3.64214,-3.25747 0,-15.78621 z"
style="fill:#808080;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
transform="matrix(0.90138601,0,0,0.99222542,-437.42287,-185.30615)"
d="m 828.9375,369.5 -4.28125,4.28125 0,15.71875 3.75,3.75 19.8125,0 0,15.1875 -131.0625,132.84375 0,-147.84375 21.78125,0 4.46875,-4.46875 0,-15.90625 -4.125,-3.1875 -114.625,0 -3.75,3.75 0,16.25 3.8125,3.8125 19.9375,0 0,272.25 3.75,3.75 22.65625,0 274.65625,-283.40625 0,-12.5 -4.28125,-4.28125 -112.5,0 z"
id="path3622"
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3636"
d="m 415.35268,185.9329 5.49849,-3.49448 0,21.92152 -249.39111,280.5213 -26.47746,0 2.52966,-5.5331 20.28119,0 247.23731,-281.01241 z"
style="fill:#808080;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
id="path3652"
d="m 327.29631,205.25009 -5.57703,6.38966 -14.56861,0 3.41452,-6.38966 c 0.11382,0 16.73112,0 16.73112,0 z"
style="fill:#808080;fill-opacity:1;stroke:#000000;stroke-width:0.94571567px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<g
transform="matrix(0.90138601,0,0,0.99222542,-92.530288,-192.23791)"
id="g3673">
<path
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none"
id="path3671"
d="m 399.78125,560 a 1.2330102,1.2330102 0 0 0 -0.5625,0.28125 l -5.3125,4.5625 A 1.2330102,1.2330102 0 0 0 393.5625,565.375 L 388.25,580.25 a 1.2330102,1.2330102 0 0 0 0.28125,1.28125 l 4.0625,4.0625 a 1.2330102,1.2330102 0 0 0 0.875,0.34375 l 16.40625,0 a 1.2330102,1.2330102 0 0 0 0.875,-0.34375 l 4.28125,-4.3125 a 1.2330102,1.2330102 0 0 0 0.3125,-0.53125 l 4.5625,-15.65625 a 1.2330102,1.2330102 0 0 0 -0.3125,-1.21875 l -3.53125,-3.53125 A 1.2330102,1.2330102 0 0 0 415.1875,560 l -15.15625,0 a 1.2330102,1.2330102 0 0 0 -0.25,0 z m -30.0625,41.9375 a 1.2330102,1.2330102 0 0 0 -0.9375,0.90625 l -2.03125,8.0625 a 1.2330102,1.2330102 0 0 0 1.1875,1.53125 l 9.65625,0 -23.9375,68.34375 a 1.2330102,1.2330102 0 0 0 1.15625,1.625 l 34.84375,0 a 1.2330102,1.2330102 0 0 0 1.1875,-0.84375 l 2.28125,-7.34375 a 1.2330102,1.2330102 0 0 0 -1.1875,-1.59375 l -7.875,0 23.6875,-69.0625 a 1.2330102,1.2330102 0 0 0 -1.15625,-1.625 l -36.625,0 a 1.2330102,1.2330102 0 0 0 -0.25,0 z m 110.875,0.25 a 1.2330102,1.2330102 0 0 0 -0.6875,0.40625 l -7.25,8.1875 -11.53125,0 -7.6875,-7.96875 a 1.2330102,1.2330102 0 0 0 -0.875,-0.375 l -27.53125,0 A 1.2330102,1.2330102 0 0 0 423.875,603.25 l -2.53125,7.5625 a 1.2330102,1.2330102 0 0 0 1.15625,1.625 l 7.375,0 -22.9375,67.59375 a 1.2330102,1.2330102 0 0 0 1.15625,1.625 l 29.3125,0 a 1.2330102,1.2330102 0 0 0 1.15625,-0.8125 l 2.25,-6.59375 a 1.2330102,1.2330102 0 0 0 -1.15625,-1.625 l -5.125,0 14.625,-46.03125 26.46875,0 -16.6875,53.46875 a 1.2330102,1.2330102 0 0 0 1.1875,1.59375 l 28.28125,0 a 1.2330102,1.2330102 0 0 0 1.125,-0.75 l 2.53125,-6.0625 a 1.2330102,1.2330102 0 0 0 -1.125,-1.6875 l -5.125,0 14.875,-46.8125 25.1875,0 -16.9375,53.71875 a 1.2330102,1.2330102 0 0 0 1.1875,1.59375 l 31.0625,0 a 1.2330102,1.2330102 0 0 0 1.15625,-0.78125 l 2.53125,-6.59375 a 1.2330102,1.2330102 0 0 0 -1.15625,-1.65625 l -6.15625,0 18.71875,-60.78125 a 1.2330102,1.2330102 0 0 0 -0.1875,-1.125 l -5.8125,-7.8125 a 1.2330102,1.2330102 0 0 0 -1,-0.46875 l -22.21875,0 a 1.2330102,1.2330102 0 0 0 -0.90625,0.375 l -7,7.6875 -12.25,0 -7.25,-7.9375 a 1.2330102,1.2330102 0 0 0 -0.90625,-0.375 l -17.90625,0 a 1.2330102,1.2330102 0 0 0 -0.25,0 z" />
<path
d="m 400.03125,561.21875 -5.3125,4.5625 -5.3125,14.875 4.0625,4.0625 16.40625,0 4.28125,-4.3125 4.5625,-15.65625 -3.53125,-3.53125 -15.15625,0 z m -30.0625,41.9375 -2.03125,8.0625 11.375,0 -24.5,69.96875 34.84375,0 2.28125,-7.34375 -9.59375,0 24.25,-70.6875 -36.625,0 z m 110.875,0.25 L 473.25,612 l -12.625,0 -8.0625,-8.34375 -27.53125,0 -2.53125,7.5625 9.09375,0 -23.5,69.21875 29.3125,0 2.25,-6.59375 -6.8125,0 15.40625,-48.46875 29.0625,0 -17.1875,55.0625 28.28125,0 2.53125,-6.0625 -6.8125,0 15.65625,-49.25 27.78125,0 -17.4375,55.3125 31.0625,0 2.53125,-6.59375 -7.84375,0 19.21875,-62.375 -5.8125,-7.8125 -22.21875,0 -7.34375,8.0625 -13.375,0 -7.59375,-8.3125 -17.90625,0 z"
id="path3665"
style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" />
</g>
</g>
</g>
</svg>

+ 1
- 0
assets/markdown.svg View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg"><path d="M950.154 192H73.846C33.127 192 0 225.12699999999995 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846C1024 225.12699999999995 990.875 192 950.154 192zM576 703.875L448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-0.125V703.875zM767.091 735.875L608 512h96V320h128v192h96L767.091 735.875z"/></svg>

+ 68
- 11
index.html View File

@ -1,10 +1,10 @@
<!doctype html>
<html lang="en-us">
<html lang="en-us" class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIM markdown editor</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/bulma.min.css">
<link rel="stylesheet" href="styles/xt256.css">
<link rel="stylesheet" href="lib/codemirror.min.css">
@ -12,20 +12,77 @@
<link rel="stylesheet" href="styles/main.css">
</head>
<body id="book">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="book-wrapper">
<nav class="navbar is-fixed-top is-transparent">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
<a class="navbar-item" href="#">
<img src="assets/Vimlogo.svg" alt="vim" width="28" height="28">
<strong><em>.MD</em></strong>
</a>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div id="navbarExampleTransparentExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://bulma.io/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="https://bulma.io/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>
Fork
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.7.1/bulma-0.7.1.zip">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Export</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
<div class="book-wrapper">
<div class="book-wrapper-inner">
<div class="book-col--40 js-input"></div>
<div class="book-col--60">


+ 7
- 7
javascript/main.js View File

@ -4,7 +4,7 @@
window.localStorage.setItem('markdown', '# Your markdown _here_')
}
const myCodeMirror = CodeMirror(document.querySelector('.js-input'), {
const editor = CodeMirror(document.querySelector('.js-input'), {
value: window.localStorage.getItem('markdown'),
mode: "javascript",
lineWrapping: true,
@ -13,28 +13,28 @@
theme: 'the-matrix'
});
if (myCodeMirror) {
if (editor) {
CodeMirror.Vim.map('kj', '<Esc>', 'insert') // to use kj as <Esc> also
hljs.initHighlightingOnLoad();
if (window.localStorage.getItem('markdown')) {
myCodeMirror.value = window.localStorage.getItem('markdown');
editor.value = window.localStorage.getItem('markdown');
document.querySelector('.js-content').innerHTML = marked(window.localStorage.getItem('markdown'));
}
else {
document.querySelector('.js-content').innerHTML = myCodeMirror.getValue();
document.querySelector('.js-content').innerHTML = editor.getValue();
}
document.querySelector('.js-input').addEventListener('keyup', event => {
const transformed = marked(myCodeMirror.getValue());
const transformed = marked(editor.getValue());
document.querySelector('.js-content').innerHTML = transformed;
for (let i = 0; i < document.getElementsByTagName('code').length; i++) {
hljs.highlightBlock(document.getElementsByTagName('code')[i]);
}
setTimeout(() => {
document.querySelector('.js-content').parentElement.parentElement.scrollTop = 10000000;
document.querySelector('.js-content').parentElement.parentElement.scrollTop = editor.getCursor().line * 9;
}, 250)
window.localStorage.setItem('markdown', myCodeMirror.getValue());
window.localStorage.setItem('markdown', editor.getValue());
});
}


+ 1
- 1
styles/bulma.min.css
File diff suppressed because it is too large
View File


+ 22
- 7
styles/main.css View File

@ -2,12 +2,12 @@ html, body {
width: 100%;
height: 100%;
min-height: 100%;
font-
overflow: hidden;
}
.book-wrapper {
position: fixed;
/* top: 0; removed for top nav bar */
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
@ -22,7 +22,7 @@ html, body {
left: 0;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
flex-wrap: nowrap;
}
.book-col--40 {
@ -35,8 +35,8 @@ html, body {
overflow: auto; /* to specific put else where */
}
.book__col--60,
.book__col--40 {
.book-col--60,
.book-col--40 {
height: 100%;
overflow: auto;
}
@ -111,6 +111,11 @@ html, body {
margin-bottom: 0;
}
#book .main-content blockquote {
border-left: 0.5rem solid #2185D0;
padding-left: 3rem;
}
#book .main-content pre {
margin-left: -20px;
margin-right: 0;
@ -140,6 +145,16 @@ html, body {
width: 10px;
}
hr {
#book hr {
background-color: #000;
}
.dot {
display: flex;
align-items: center;
font-size: 20px;
}
#book .navbar-item:hover {
font-size: 20px;
}

Loading…
Cancel
Save