A basic guitar tablature editor written in JavaScript
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

656 lines
18 KiB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<!-- vim: set lbr sbr=@___ encoding=utf-8 columns=80 lines=999: -->
<!--
TODO:
* work with insert/delete
* add repeat symbol (:)
CHANGELOG:
v0.1.0 - 2010/12/20
* Implemented import
v0.0.9 - 2010/05/11
* Implemented export
v0.0.8 - 2010/01/14
* Implemented mouse click
v0.0.7 - 2010/01/11
* Improved deletion when placed on a bar
* Major refactoring
* Automatically deletion of trailing empty staves
* Added copy/paste feature
v0.0.6 - 2009/10/16
* Added quick help
v0.0.5 - 2009/09/25
* Basic styling
v0.0.4 - 2009/09/24
* Possibility to add new staves
* Moving from staff to staff with keys
v0.0.3 - 2009/09/23
* Moving current cell with keys
* Adding speed
v0.0.2 - 2009/09/22
* Current cell display
v0.0.1 - 2009/09/21
* Basic staff display
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TablatureJS</title>
<script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
//<![CDATA[
var Tablature = {
NUMBER_OF_LINES : 6,
WIDTH : 78,
MAX_SPEED : 64,
BORDER : new Element('strong', { text : '|' }),
LINE : new Element('span', { text : '-' }),
BAR : new Element('span', { text : '|' }),
_numberOfStaves : null,
_currentStaffNumber : null,
_currentColumnNumber : null,
_currentLineNumber : null,
_movingSpeed : null,
_mousePosition : null,
_copiedColumn : ['-', '-', '-', '-', '-', '-'],
initialise: function() {
Tablature._numberOfStaves = 0;
Tablature._addStaff();
Tablature._currentColumnNumber = 0;
Tablature._currentLineNumber = 0;
Tablature._currentStaffNumber = 0;
Tablature._setMovingSpeed(1);
Tablature._displayCursor();
Tablature.hideExport();
Tablature.hideImport();
$('tab').addEvent('click', Tablature._onClick);
$('tab').addEvent('mouseover', Tablature._onMouseOver);
$('export').addEvent('click', Tablature.export);
$('import').addEvent('click', Tablature.showImport);
$('close-export').addEvent('click', Tablature.hideExport);
$('close-import').addEvent('click', Tablature.hideImport);
$('save-import').addEvent('click', Tablature.import);
},
changeSpeed: function(increaseOrDecrease) {
switch(increaseOrDecrease) {
case 'increase':
Tablature._setMovingSpeed( Tablature._movingSpeed * 2 );
break;
case 'decrease':
Tablature._setMovingSpeed( Tablature._movingSpeed / 2 );
break;
;
}
},
clear: function() {
for ( var staff = Tablature._numberOfStaves ; staff > 0 ; staff-- ) {
Tablature._getStaff(staff-1).destroy();
Tablature._numberOfStaves--;
}
},
copyColumn: function() {
Tablature._getCurrentColumn().each( function(e,i) {
Tablature._copiedColumn[i] = e.get('text');
});
},
draw: function(key) {
Tablature._getCurrentNote().set('text', key);
},
drawBar: function() {
Tablature._getCurrentColumn().each( function(p) {
p.set('text', '|');
});
},
eraseColumn: function() {
Tablature._getCurrentColumn().each( function(p) {
p.set('text', '-');
});
},
export: function() {
var tab = '';
$('tab').getElements('div').each( function(staff) {
staff.getElements('p').each( function(line) {
tab += '|';
line.getElements('span').each( function(note) {
tab += note.get('text');
})
tab += '|';
tab += "\n";
});
tab += "\n";
});
$('export-content').value = tab;
Tablature._showExport();
},
hideExport: function() {
$('export-tab').setStyle('display','none');
},
hideImport: function() {
$('import-tab').setStyle('display','none');
},
import: function() {
var tab = $('import-content').value;
lines = tab.match(new RegExp("\\|.{"+Tablature.WIDTH+"}\\|", "g"));
var staves = [];
for ( var staff = 0 ; staff*Tablature.NUMBER_OF_LINES < lines.length ; staff += 1 ) {
staves[staff] = [];
for ( var line = 0 ; line < Tablature.NUMBER_OF_LINES ; line++ ) {
staves[staff][line] = lines[staff*Tablature.NUMBER_OF_LINES+line].match(new RegExp(".", "g"));
}
}
Tablature.clear();
for ( var staff = 0 ; staff < staves.length ; staff++ ) {
Tablature._addStaff();
Tablature._currentStaffNumber = staff;
for ( var line = 0 ; line < staves[staff].length ; line++ ) {
Tablature._currentLineNumber = line;
for ( var note = 1 ; note < staves[staff][line].length-1 ; note++ ) {
Tablature._currentColumnNumber = note-1;
Tablature.draw(staves[staff][line][note]);
}
}
}
Tablature._currentStaffNumber = 0;
Tablature._currentColumnNumber = 0;
Tablature._currentLineNumber = 0;
Tablature._displayCursor();
Tablature.hideImport();
},
move: function(direction) {
Tablature._resetCursor();
switch(direction) {
case 'right':
Tablature._currentColumnNumber = Math.min(
Tablature.WIDTH - 1,
Tablature._currentColumnNumber + Tablature._movingSpeed
)
break;
case 'left':
Tablature._currentColumnNumber = Math.max(
0,
Tablature._currentColumnNumber - Tablature._movingSpeed
)
break;
case 'down':
Tablature._currentLineNumber = Math.min(
Tablature.NUMBER_OF_LINES - 1,
Tablature._currentLineNumber + 1
)
break;
case 'up':
Tablature._currentLineNumber = Math.max(
0,
Tablature._currentLineNumber - 1
)
break;
case 'next':
Tablature._currentStaffNumber++;
if ( Tablature._currentStaffNumber == Tablature._numberOfStaves ) {
Tablature._addStaff();
}
break;
case 'previous':
if ( Tablature._currentStaffNumber == Tablature._numberOfStaves-1 ) {
Tablature._deleteStaffIfEmpty();
}
Tablature._currentStaffNumber = Math.max(
0,
Tablature._currentStaffNumber - 1
)
break;
case 'start':
Tablature._currentColumnNumber = 0;
break;
case 'end':
Tablature._currentColumnNumber = Tablature.WIDTH - 1;
break;
;
}
Tablature._displayCursor();
},
pasteColumn: function() {
Tablature._getCurrentColumn().each( function(e,i) {
e.set('text', Tablature._copiedColumn[i]);
});
},
showImport: function() {
$('import-content').value='';
$('import-tab').setStyle('display','block');
},
_addStaff: function() {
Tablature._numberOfStaves++;
var newStaff = new Element('div', {
'class': 'staff-' + Tablature._numberOfStaves
});
for ( var line = 0; line < Tablature.NUMBER_OF_LINES; line++ ) {
var newLine = new Element('p');
newLine.adopt(Tablature.BORDER.clone())
for ( var column = 0; column < Tablature.WIDTH; column++ ) {
newLine.adopt(Tablature.LINE.clone());
}
newLine.adopt(Tablature.BORDER.clone())
newStaff.adopt(newLine);
}
$('tab').adopt(newStaff);
},
_deleteStaffIfEmpty: function() {
if ( Tablature._numberOfStaves > 1 ) {
var isEmpty = Tablature._getCurrentLines().every( function(e, i) {
return e.getElements('span').every( function(n, i) {
return n.get('text') == '-';
})
})
if ( isEmpty ) {
Tablature._getCurrentStaff().destroy();
Tablature._numberOfStaves--;
}
}
},
_displayCursor: function() {
Tablature._getCurrentColumn().each( function(e, i) {
e.addClass('active');
if ( i == Tablature._currentLineNumber )
e.addClass('current');
});
$('position').set('text', '{column}/{max} ({staff}/{staves})'.substitute({
column: Tablature._currentColumnNumber + 1,
max: Tablature.WIDTH,
staff: Tablature._currentStaffNumber + 1,
staves: Tablature._numberOfStaves
}));
},
_getCurrentColumn: function() {
var lines = [];
Tablature._getCurrentLines().each( function(e, i) {
lines[i] = e.getElements('span')[Tablature._currentColumnNumber];
});
return lines;
},
_getCurrentLines: function() {
return Tablature._getCurrentStaff().getElements('p');
},
_getCurrentNote: function() {
return Tablature._getCurrentLines()[Tablature._currentLineNumber]
.getElements('span')[Tablature._currentColumnNumber];
},
_getCurrentStaff: function() {
return Tablature._getStaff(Tablature._currentStaffNumber);
},
_getStaff: function(staffNumber) {
return $('tab').getElements('div')[staffNumber];
},
_onClick: function(e) {
if ( e.target.get('tag') == 'span' ) {
Tablature._resetCursor();
var currentCell = e.target;
var currentLine = currentCell.getParent();
var currentStaff = currentLine.getParent();
var columnIndex = currentLine.getElements('span').indexOf(currentCell);
var lineIndex = currentStaff.getElements('p').indexOf(currentLine);
var staffIndex = $('tab').getElements('div').indexOf(currentStaff);
Tablature._currentStaffNumber = staffIndex;
Tablature._currentLineNumber = lineIndex;
Tablature._currentColumnNumber = columnIndex;
Tablature._displayCursor();
}
},
_onMouseOver: function(e) {
if ( e.target.get('tag') == 'span' ) {
$('tab').getElements('.selected')
.removeClass('selected');
e.target.addClass('selected');
}
},
_resetCursor: function() {
Tablature._getCurrentStaff().getElements('.active')
.removeClass('active')
.removeClass('current');
},
_showExport: function() {
$('export-tab').setStyle('display','block');
},
_setMovingSpeed: function(newSpeed) {
Tablature._movingSpeed = Math.min(
Math.ceil(newSpeed),
Tablature.MAX_SPEED
);
$('moving-speed').set('text', Tablature._movingSpeed);
}
}
var Command = {
readInput: function(e) {
//console.log( e.code + ': ' + e.key );
var recognisedEvent = true;
switch(e.key) {
case '+':
Tablature.changeSpeed('increase');
break;
case '-':
Tablature.changeSpeed('decrease');
break;
case 'right':
case 'left':
case 'up':
case 'down':
Tablature.move(e.key);
break;
case 'h':
case 'p':
case 't':
case 'b':
case '/':
case '\\':
Tablature.draw(e.key);
break;
case 'c':
Tablature.copyColumn();
break;
case 'v':
Tablature.pasteColumn();
break;
case 'e':
Tablature.export();
break;
case 'i':
Tablature.showImport();
break;
case 'space':
Tablature.move('next');
break;
case 'enter':
Tablature.drawBar();
break;
case 'esc':
Tablature.hideExport();
Tablature.hideImport();
break;
default:
switch(e.code) {
case 33: // PgUp
Tablature.move('previous');
break;
case 34: // PgDwn
Tablature.move('next');
break;
case 36: // Start
Tablature.move('start');
break;
case 35: // End
Tablature.move('end');
break;
case 48: // 0
case 49: // 1
case 50: // 2
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57: // 9
Tablature.draw(e.key);
break;
case 46: // Numpad delete
if ( Tablature._getCurrentNote().get('text') == '|' ) {
Tablature.eraseColumn();
} else {
Tablature.draw('-');
}
break;
case 42: // Numpad *
Tablature.draw('X');
break;
default:
recognisedEvent = false;
;
}
break;
;
}
if ( recognisedEvent ) {
e.preventDefault();
}
}
}
window.addEvent('domready', Tablature.initialise);
window.addEvent('keydown', Command.readInput); // don't use keypress or event.keys will be wrong !
//]]>
</script>
<style type="text/css">
/*
Syntax { display/position
; size/margin
; border
; colour
; text
}
In vim, use 'AlignCtrl l:' and 'Align { ; }'
*/
/* tags */
html, body { margin: 0; padding: 0
; font-family: Verdana,sans-serif; font-size: 11pt
}
div { margin: 20px 0 }
p { margin: 0 }
h1 { margin: 5px 0 0 0
; font-family: Georgia,fantasy; font-style: italic; font-size: 130%
; text-align: center
}
h2 { margin: 0
; font-family: Georgia,fantasy; font-style: italic; font-size: 120%
; text-align: center
}
h3 { margin: 10px 0 0
; border: 1px dotted #E3E3E3; border-width: 0 0 1px
; font-family: Georgia,fantasy; font-style: italic; font-size: 110%
; text-align: right
}
ul { margin: 0
; list-style-type: none
}
li { margin: 0; padding: 0
; border: 1px solid #E3E3E3; border-width: 1px 0 0 0
}
a { color: inherit; background-color: inherit
; border: 1px dotted black; border-width: 0 0 1px 0
; text-decoration: none }
a:focus { border-width: 0 }
/* ids */
#tools { position: fixed; top: 0;
; height: 36px; width: 100%; margin: 0; padding: 0 5px
; border: 1px solid black; border-width: 0 0 1px 0
; background-color: #FFFFE3; color: inherit
; font-size: 70%
}
#copyright { position: fixed; bottom: 0;
; height: 26px; width: 100%; margin: 0; padding: 0 5px
; border: 1px solid black; border-width: 1px 0 0 0
; background-color: #FFFFE3; color: inherit
; font-size: 60%; text-align: center
}
#tab { margin: 46px 10px 36px 10px
; cursor: pointer
}
#help { position: fixed
; right: 0px; width: 200px; padding: 5px; margin: 0 10px
; border: 1px solid black;
; background-color: #FFFFE3; color: inherit
; font-size: 70%
}
#export-tab,
#import-tab { position: absolute
; left:10px; right: 230px; margin:0; padding: 5px; height: 300px
; border: 1px solid black; background-color: #E3E3E3; color: inherit
}
#close-export,
#close-import { float: right
; font-size: 70%
}
#export-content,
#import-content { height:80% }
/* classes */
.active { background-color: #E3E3FF; color: inherit }
.current { background-color: #8888FF; color: inherit }
.selected { background-color: #E3FFE3; color: inherit }
.generic-command { font-style: italic }
/* advanced */
#tools dl { margin: 0 }
#tools dt { display: inline
; margin-left: 10px
; font-weight: bold
}
#tools dd { display: inline
; padding: 0 10px 0 5px; margin: 0 0 0 0
; border: 1px solid #E3E3E3; border-width: 0 1px 0 0
}
#help dl { margin: 0 }
#help dt { float: left
; padding: 0 5px 0 0; margin: 0
; width: 70px
; border: 1px dotted #E3E3E3; border-width: 0 1px 0 0
; font-weight: bold; text-align: right; white-space: nowrap
}
#help dd { overflow:hidden
; padding: 0 0 0 5px; margin: 0
}
</style>
</head>
<body>
<div id="tools">
<h1>TablatureJS v0.1.0 (2010/12/20)</h1>
<dl>
<dt>Speed</dt>
<dd id="moving-speed"></dd>
<dt>Position</dt>
<dd id="position"></dd>
<dt>Actions</dt>
<dd><a href="#" id="export">Export</a></dd>
<dd><a href="#" id="import">Import</a></dd>
</dl>
</div>
<div id="export-tab">
<a href="#" id="close-export">[Close]</a>
<textarea id="export-content" cols="80"></textarea>
</div>
<div id="import-tab">
<a href="#" id="close-import">[Close]</a>
<textarea id="import-content" cols="80"></textarea>
<br />
<button id="save-import">Save</button>
</div>
<div id="help">
<h2>Quick Help</h2>
<h3>Motion</h3>
<dl>
<dt class="generic-command">arrow</dt>
<dd>move around</dd>
<dt class="generic-command">mouse click</dt>
<dd>move around</dd>
<dt>page up</dt>
<dd>move to previous</dd>
<dt>page down</dt>
<dd>move to next staff</dd>
<dt>space</dt>
<dd>move to next staff</dd>
<dt>start</dt>
<dd>move to first column</dd>
<dt>end</dt>
<dd>move to last column</dd>
<dt>+</dt>
<dd>increase speed</dd>
<dt>-</dt>
<dd>decrease speed</dd>
</dl>
<h3>Edition</h3>
<dl>
<dt class="generic-command">number</dt>
<dd>input note</dd>
<dt>h</dt>
<dd>input hammer</dd>
<dt>p</dt>
<dd>input pulloff</dd>
<dt>t</dt>
<dd>input tapping</dd>
<dt>b</dt>
<dd>input bend</dd>
<dt>/</dt>
<dd>input slide up</dd>
<dt>\</dt>
<dd>input slide down</dd>
<dt>*</dt>
<dd>input mute</dd>
<dt>enter</dt>
<dd>add bar</dd>
<dt>delete</dt>
<dd>delete note</dd>
<dt>c</dt>
<dd>copy bar</dd>
<dt>v</dt>
<dd>paste bar</dd>
</dl>
<h3>Special</h3>
<dl>
<dt>e</dt>
<dd>export</dd>
<dt>i</dt>
<dd>import</dd>
</dl>
</div>
<pre id="tab"></pre>
<p id="copyright">
<em>TablatureJS</em> is a program to edit Tablatures in a web browser.<br />
<em>TablatureJS</em> is available under GPLv3 license.
You can redistribute it or modify it freely.
See <a href="http://en.wikipedia.org/wiki/GNU_General_Public_License">
this page</a> for further details.
</p>
</body>
</html>