mirror of
https://github.com/mattn/emmet-vim.git
synced 2025-12-06 10:44:24 +08:00
Merge branch 'gh-pages' of github.com:mattn/zencoding-vim into gh-pages
This commit is contained in:
mattn
26
index.html
26
index.html
@@ -14,6 +14,12 @@
|
||||
</script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="static/js/jquery-latest.js"></script>
|
||||
<script type="text/javascript" src="showtty.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
showTTYURL($('#tty')[0], "output.json");
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<img id="logo" src="static/images/zencoding-vim-logo.png" title="禅" />
|
||||
@@ -29,10 +35,14 @@
|
||||
<div class="blocked-content">
|
||||
<article id="install">
|
||||
<h2 class="maintitle">Install</h2>
|
||||
<p>copy zencoding.vim to your ftplugin directory</p>
|
||||
<p>copy plugin/zencoding.vim to plugin directory. and copy autoload/zencoding.vim to autoload directory.</p>
|
||||
<pre class="code">
|
||||
# mkdir ~/.vim/ftplugin/html
|
||||
# cp zencoding.vim ~/.vim/ftplugin/html/.
|
||||
# cp plugin/zencoding.vim ~/.vim/plugin/.
|
||||
# cp autoload/zencoding.vim ~/.vim/autoload/.
|
||||
</pre>
|
||||
<p>if you install <a href="http://www.vim.org/scripts/script.php?script_id=2332">pathogen.vim</a>, you can make it work with only copying zencoding-vim directory to bundle directory.</p>
|
||||
<pre class="code">
|
||||
# cp -r zencoding-vim ~/.vim/bundle/.
|
||||
</pre>
|
||||
</article>
|
||||
</div>
|
||||
@@ -40,9 +50,13 @@
|
||||
<div class="blocked-content">
|
||||
<article id="howworkthis">
|
||||
<h2 class="maintitle">How This Work</h2>
|
||||
<p>
|
||||
<em>Under construction. This will be widget of ttyshare?</em>
|
||||
</p>
|
||||
<p>below is a movie when using zencoding.vim</p>
|
||||
<div id="tty">
|
||||
</div>
|
||||
<!--
|
||||
<embed type="application/x-shockwave-flash" src="http://ttyshare.com/t/a474271fe4eea14f6302286d2bfabd968fb40868" width="480" height="288"/>
|
||||
<embed type="application/x-shockwave-flash" src="http://ttyshare.com/t/8e83a40b6e5d6590b2832fc406114dbe348fc96f" width="480" height="288"/>
|
||||
-->
|
||||
</article>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
1
output.json
Normal file
1
output.json
Normal file
File diff suppressed because one or more lines are too long
315
showtty.js
Normal file
315
showtty.js
Normal file
@@ -0,0 +1,315 @@
|
||||
// showtty.js - a building block for viewing tty animations
|
||||
// Copyright 2008 Jack Christopher Kastorff
|
||||
(function(){
|
||||
|
||||
var repeatString = function (str, rep) {
|
||||
var outstr = '';
|
||||
for (var i = 0; i < rep; i++) {
|
||||
outstr += str;
|
||||
}
|
||||
return outstr;
|
||||
};
|
||||
|
||||
var makeTable = function (width, height) {
|
||||
var table = document.createElement("div");
|
||||
var arr = [];
|
||||
for (var j = 1; j <= height; j++) {
|
||||
var row = document.createElement("div");
|
||||
var arrrow = [];
|
||||
row.style.fontFamily = '"ProFont", "Luxi Mono", "Monaco", "Courier", "Courier new", monospace';
|
||||
row.style.margin = '0';
|
||||
row.style.padding = '0';
|
||||
row.style.wordSpacing = '0';
|
||||
row.style.height = '1.2em';
|
||||
for (var i = 1; i <= width; i++) {
|
||||
var charelem = document.createElement("pre");
|
||||
charelem.style.backgroundColor = '#000';
|
||||
charelem.style.color = '#FFF';
|
||||
charelem.style.display = 'inline';
|
||||
charelem.style.fontWeight = 'normal';
|
||||
charelem.style.textDecoration = 'none';
|
||||
charelem.style.letterSpacing = '0';
|
||||
charelem.style.margin = '0';
|
||||
charelem.style.padding = '0 0 0.2em 0';
|
||||
charelem.appendChild(document.createTextNode(" "));
|
||||
row.appendChild(charelem);
|
||||
arrrow.push(charelem);
|
||||
}
|
||||
table.appendChild(row);
|
||||
arr.push(arrrow);
|
||||
}
|
||||
return { "arr": arr, "elem": table };
|
||||
};
|
||||
|
||||
var setTextChunk = function (tb, r, index, stx) {
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
tb.arr[index][i+stx].firstChild.replaceData(0, 1, r.charAt(i));
|
||||
}
|
||||
};
|
||||
|
||||
var setBoldChunk = function (tb, r, index, stx) {
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
tb.arr[index][i+stx].style.fontWeight = r.charAt(i) == 0 ? 'normal' : 'normal';
|
||||
}
|
||||
};
|
||||
|
||||
var setUnderlineChunk = function (tb, r, index, stx) {
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
tb.arr[index][i+stx].style.textDecoration = r.charAt(i) == 0 ? 'none' : 'underline';
|
||||
}
|
||||
};
|
||||
|
||||
var clut = { 0: "#000", 1: "#D00", 2: "#0D0", 3: "#DD0", 4: "#00D", 5: "#D0D", 6: "#0DD", 7: "#DDD" };
|
||||
|
||||
var setFcolorChunk = function (tb, r, index, stx) {
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
tb.arr[index][i+stx].style.color = clut[r.charAt(i)];
|
||||
}
|
||||
};
|
||||
|
||||
var t = 0;
|
||||
var setBcolorChunk = function (tb, r, index, stx) {
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
tb.arr[index][i+stx].style.backgroundColor = clut[r.charAt(i)];
|
||||
}
|
||||
};
|
||||
|
||||
var loadIFrame = function (tb, rowcaches, fr, width, height) {
|
||||
var d = uncompressIFrameBlock(fr.d, width);
|
||||
for (var i = 0; i < d.length; i++) {
|
||||
setTextChunk(tb, d[i], i, 0);
|
||||
rowcaches.d[i] = d[i];
|
||||
}
|
||||
var B = uncompressIFrameBlock(fr.B, width);
|
||||
for (var i = 0; i < B.length; i++) {
|
||||
setBoldChunk(tb, B[i], i, 0);
|
||||
rowcaches.B[i] = B[i];
|
||||
}
|
||||
var U = uncompressIFrameBlock(fr.U, width);
|
||||
for (var i = 0; i < U.length; i++) {
|
||||
setUnderlineChunk(tb, U[i], i, 0);
|
||||
rowcaches.U[i] = U[i];
|
||||
}
|
||||
var f = uncompressIFrameBlock(fr.f, width);
|
||||
for (var i = 0; i < f.length; i++) {
|
||||
setFcolorChunk(tb, f[i], i, 0);
|
||||
rowcaches.f[i] = f[i];
|
||||
}
|
||||
var b = uncompressIFrameBlock(fr.b, width);
|
||||
for (var i = 0; i < b.length; i++) {
|
||||
setBcolorChunk(tb, b[i], i, 0);
|
||||
rowcaches.b[i] = b[i];
|
||||
}
|
||||
};
|
||||
|
||||
var uncompressIFrameBlock = function (d,width) {
|
||||
var uncomp = [];
|
||||
var last = null;
|
||||
for (var i = 0; i < d.length; i++) {
|
||||
var uncomprow = null;
|
||||
if ( typeof d[i] == 'array' || typeof d[i] == 'object' ) {
|
||||
if ( d[i][0] == "r" ) {
|
||||
uncomprow = d[i][1];
|
||||
} else if ( d[i][0] == "a" ) {
|
||||
uncomprow = repeatString(d[i][1], width);
|
||||
} else {
|
||||
throw new Error ("bad iframe data: subarray is not valid");
|
||||
}
|
||||
} else if ( typeof d[i] == 'string' && d[i] == 'd' ) {
|
||||
uncomprow = last;
|
||||
} else {
|
||||
throw new Error ("bad iframe data: unknown " + (typeof d[i]) + " in array");
|
||||
}
|
||||
uncomp.push(uncomprow);
|
||||
last = uncomprow;
|
||||
}
|
||||
return uncomp;
|
||||
};
|
||||
|
||||
var loadPFrame = function (table, rowcaches, fr, width, height) {
|
||||
if ( fr.d ) {
|
||||
diffPushGeneric(table, annotatedPFrameBlock(fr.d, width), rowcaches.d, setTextChunk);
|
||||
}
|
||||
if ( fr.B ) {
|
||||
diffPushGeneric(table, annotatedPFrameBlock(fr.B, width), rowcaches.B, setBoldChunk);
|
||||
}
|
||||
if ( fr.U ) {
|
||||
diffPushGeneric(table, annotatedPFrameBlock(fr.U, width), rowcaches.U, setUnderlineChunk);
|
||||
}
|
||||
if ( fr.f ) {
|
||||
diffPushGeneric(table, annotatedPFrameBlock(fr.f, width), rowcaches.f, setFcolorChunk);
|
||||
}
|
||||
if ( fr.b ) {
|
||||
diffPushGeneric(table, annotatedPFrameBlock(fr.b, width), rowcaches.b, setBcolorChunk);
|
||||
}
|
||||
};
|
||||
|
||||
var diffPushGeneric = function (table, d, rowcache, set) {
|
||||
// convert everything to line operations
|
||||
for (var i = 0; i < d.length; i++) {
|
||||
var e = d[i];
|
||||
if ( e[0] == "cp" ) {
|
||||
set(table, rowcache[e[1]], e[2], 0);
|
||||
rowcache[e[2]] = rowcache[e[1]];
|
||||
} else if ( e[0] == 'char' ) {
|
||||
var r = e[1];
|
||||
var v = rowcache[r];
|
||||
var da = v.slice(0, e[2]) + e[3] + v.slice(e[2]+1);
|
||||
set(table, e[3], e[1], e[2]);
|
||||
rowcache[r] = da;
|
||||
} else if ( e[0] == 'chunk' ) {
|
||||
var r = e[1];
|
||||
var v = rowcache[r];
|
||||
var da = v.slice(0, e[2]) + e[4] + v.slice(e[3]+1);
|
||||
set(table, e[4], e[1], e[2]);
|
||||
rowcache[r] = da;
|
||||
} else if ( e[0] == 'line' ) {
|
||||
set(table, e[2], e[1], 0);
|
||||
rowcache[e[1]] = e[2];
|
||||
} else {
|
||||
throw new Error ("unknown p-frame item type " + e[0] + ", len " + e.length);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var annotatedPFrameBlock = function (frame, width) {
|
||||
var ann = [];
|
||||
for (var i = 0; i < frame.length; i++) {
|
||||
var e = frame[i];
|
||||
if ( e[0] == 'cp' ) {
|
||||
ann.push(e);
|
||||
} else if ( e.length == 2 ) {
|
||||
// raw line
|
||||
if ( typeof e[1] == 'string' ) {
|
||||
ann.push(['line', e[0], e[1]]);
|
||||
} else if ( e[1][0] == "a" ) {
|
||||
ann.push(['line', e[0], repeatString(e[1][1], width)]);
|
||||
} else {
|
||||
throw new Error ("p-frame corrupted: invalid 2-len");
|
||||
}
|
||||
} else if ( e.length == 3 ) {
|
||||
// char
|
||||
ann.push(['char', e[0], e[1], e[2]]);
|
||||
} else if ( e.length == 4 ) {
|
||||
// chunk
|
||||
if ( typeof e[3] == 'string' ) {
|
||||
ann.push(['chunk', e[0], e[1], e[2], e[3]]);
|
||||
} else if ( e[3][0] == 'a' ) {
|
||||
ann.push(['chunk', e[0], e[1], e[2], repeatString(e[3][1], e[2]-e[1]+1)]);
|
||||
} else {
|
||||
throw new Error ("p-frame corrupted: invalid 4-len");
|
||||
}
|
||||
} else {
|
||||
throw new Error ("p-frame corrupted: no such thing as a " + e.length + "-len");
|
||||
}
|
||||
}
|
||||
return ann;
|
||||
};
|
||||
|
||||
var handleCursor = function (table, bgcache, curpos, dx, dy) {
|
||||
if ( typeof dx == 'number' || typeof dy == 'number' ) {
|
||||
// make sure the old cursor position has been overwritten
|
||||
setBcolorChunk(table, bgcache[curpos[1]-1].charAt(curpos[0]-1), curpos[1]-1, curpos[0]-1);
|
||||
if ( typeof dx == 'number' ) {
|
||||
curpos[0] = dx;
|
||||
}
|
||||
if ( typeof dy == 'number' ) {
|
||||
curpos[1] = dy;
|
||||
}
|
||||
}
|
||||
|
||||
// draw the cursor
|
||||
table.arr[curpos[1]-1][curpos[0]-1].style.backgroundColor = '#FFF';
|
||||
};
|
||||
|
||||
var animateNextFrame = function (holder) { with (holder) {
|
||||
var fr = timeline[nextframe];
|
||||
if ( fr.i ) {
|
||||
loadIFrame(table, rowcaches, fr, width, height);
|
||||
} else {
|
||||
loadPFrame(table, rowcaches, fr, width, height);
|
||||
}
|
||||
handleCursor(table, rowcaches.b, curpos, fr.x, fr.y);
|
||||
nextframe++;
|
||||
if ( timeline.length > nextframe ) {
|
||||
var wait = timeadd + timeline[nextframe].t - (new Date).getTime()/1000;
|
||||
if ( wait < 0 ) {
|
||||
// we're out of date! try to catch up.
|
||||
return animateNextFrame(holder);
|
||||
} else {
|
||||
setTimeout(function(){animateNextFrame(holder);}, wait*1000);
|
||||
}
|
||||
}
|
||||
}};
|
||||
|
||||
var makeCache = function (ch, wid, hei) {
|
||||
var c = [];
|
||||
for (var y = 0; y < hei; y++) {
|
||||
c.push( repeatString(ch, wid) );
|
||||
}
|
||||
return c;
|
||||
};
|
||||
|
||||
showTTY = function (elem, data) {
|
||||
while ( elem.firstChild ) {
|
||||
elem.removeChild( elem.firstChild );
|
||||
}
|
||||
|
||||
var width = data.width;
|
||||
var height = data.height;
|
||||
var timeline = data.timeline;
|
||||
|
||||
var table = makeTable(width, height);
|
||||
elem.appendChild(table.elem);
|
||||
|
||||
var holder = {
|
||||
'width': width,
|
||||
'height': height,
|
||||
'timeline': timeline,
|
||||
'table': table,
|
||||
'nextframe': 0,
|
||||
'time': 0,
|
||||
'rowcaches': {
|
||||
'd': makeCache(" ", width, height),
|
||||
'f': makeCache("7", width, height),
|
||||
'b': makeCache("0", width, height),
|
||||
'B': makeCache("0", width, height),
|
||||
'U': makeCache("0", width, height)
|
||||
},
|
||||
'curpos': [1,1],
|
||||
'timeadd': (new Date).getTime()/1000-timeline[0].t
|
||||
};
|
||||
|
||||
animateNextFrame(holder);
|
||||
};
|
||||
|
||||
showTTYURL = function (elem, url) {
|
||||
var showText = function (text) {
|
||||
while ( elem.firstChild ) {
|
||||
elem.removeChild( elem.firstChild );
|
||||
}
|
||||
elem.appendChild( document.createTextNode( text ) );
|
||||
};
|
||||
|
||||
showText("Loading " + url);
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
req.open("GET", url, true);
|
||||
req.onreadystatechange = function () {
|
||||
if ( req.readyState == 4 && req.status == 200 ) {
|
||||
var data = eval("(" + req.responseText + ")");
|
||||
if ( typeof data == "undefined" ) {
|
||||
showText("Error: didn't get tty data from " + url);
|
||||
req = null;
|
||||
return;
|
||||
}
|
||||
showTTY(elem, data);
|
||||
} else if ( req.readyState == 4 && req.status != 200 ) {
|
||||
showText("Error: couldn't retrieve " + url + ", got status code " + this.status);
|
||||
req = null;
|
||||
}
|
||||
};
|
||||
req.send(null);
|
||||
};
|
||||
|
||||
}());
|
||||
@@ -92,3 +92,8 @@ pre.code {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#tty {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user