From 309fec047542a11e73fa60ea6750490ed5d8502b Mon Sep 17 00:00:00 2001 From: Amir Laher Date: Tue, 20 Nov 2012 23:32:01 +1300 Subject: [PATCH 1/7] adding knowledge about some common chords --- chords-common.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++ common.html | 35 ++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 chords-common.js create mode 100644 common.html diff --git a/chords-common.js b/chords-common.js new file mode 100644 index 0000000..dbea590 --- /dev/null +++ b/chords-common.js @@ -0,0 +1,55 @@ +chords.common= { + //tuning + 'standard' : { + //type + 'major' : { + 'A' : [['X02220','--123-']], + 'A#/Bb': [['X13331','-13331']], + 'B' : [['X24442','-13331']], + 'C' : [['X32010','-32-1-']], + 'C#/Db': [['X46664','-13331']], + 'D' : [['XX0232','---132']], + 'D#/Eb': [['XX1343','--1243']], + 'E' : [['022100','-231--']], + 'F' : [['133211','134211']], + 'F#/Gb': [['244322','134211']], + 'G' : [['320003','21---3']], + 'G#/Ab': [['466544','134211']] + }, + 'minor' : { + 'A' : [['X02210','--231-']], + 'A#/Bb': [['X13321','-13421']], + 'B' : [['X24432','-13421']], + 'C' : [['X35543','-13421']], + 'C#/Db': [['X46654','-13421']], + 'D' : [['XX0231','---132']], + 'D#/Eb': [['XX4342','--3241']], + 'E' : [['022000','-23---']], + 'F' : [['133111','134111']], + 'F#/Gb': [['244222','134111']], + 'G' : [['355333','134111']], + 'G#/Ab': [['466444','134111']] + }, + 'seven' : { + 'A' : [['X02020','--1-3-']], + 'A#/Bb': [['X13131','-12131']], + 'B' : [['X24242','-12131']], + 'C' : [['X32310','-32-1-']], + 'C#/Db': [['X46464','-12131']], + 'D' : [['XX0212','---213']], + 'D#/Eb': [['XX1313','--1213']], + 'E' : [['020100','-2-1--']], + 'F' : [['131211','131211']], + 'F#/Gb': [['242322','131211']], + 'G' : [['320001','32---1']], + 'G#/Ab': [['464544','131211']] + } + } +}; +chords.common.makeChord= function(container,note,size,typ,tuning) { + if(typ == undefined) { typ='major'; } + if(size == undefined) { size=3; } + if(tuning == undefined) { tuning = 'standard'; } + container.append(''); +}; + diff --git a/common.html b/common.html new file mode 100644 index 0000000..68df5ce --- /dev/null +++ b/common.html @@ -0,0 +1,35 @@ + + + + + + + + +

Major

+
+
+

Minor

+
+
+

Seven

+
+
+ + From da96a842458e28131f692513d14789cd2dd57a7f Mon Sep 17 00:00:00 2001 From: Am Laher Date: Wed, 21 Nov 2012 00:19:00 +1300 Subject: [PATCH 2/7] adding major-key knowledge, plus the I-vi-IV-V7 progression --- chords-common.js | 30 ++++++++++++++++++++++++++++-- progressions.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 progressions.html diff --git a/chords-common.js b/chords-common.js index dbea590..5dd03e3 100644 --- a/chords-common.js +++ b/chords-common.js @@ -1,3 +1,9 @@ +/** + * This add-on adds some knowledge about common chords. + * + * NOTE: There must be more mathematical way to represent some of this stuff. + * NOTE: IANAM (I am not a musician!) + */ chords.common= { //tuning 'standard' : { @@ -46,10 +52,30 @@ chords.common= { } } }; -chords.common.makeChord= function(container,note,size,typ,tuning) { +//TODO: VII chord should be a 'dim' +chords.common.keys= { + 'major' : { + 'A' : [['A'],['B','minor'],['C#/Db','minor'],['D'],['E'],['F#/Gb','minor'],['G']], + 'B' : [['B'],['C#/Db','minor'],['D#/Eb','minor'],['E'],['F#/Gb'],['G#/Ab','minor'],['A#/Bb']], + 'C' : [['C'],['D','minor'],['E','minor'],['F'],['G'],['A','minor'],['A#/Bb']], + 'D' : [['D'],['E','minor'],['F#/Gb','minor'],['G'],['A'],['B','minor'],['C']], + 'E' : [['E'],['F#/Gb','minor'],['G#/Ab','minor'],['A'],['B'],['C#/Db','minor'],['D']], + 'F' : [['F'],['G','minor'],['A','minor'],['A#/Bb'],['C'],['D','minor'],['E']], + 'G' : [['G'],['A','minor'],['B','minor'],['C'],['D'],['E','minor'],['F']], + } +}; +chords.common.types= { + 'abbreviations' : { + 'major' : '', + 'minor' : 'm', + 'seven' : '7' + } +}; +chords.common.makeChord= function(container,note,size,typ,name,tuning) { if(typ == undefined) { typ='major'; } if(size == undefined) { size=3; } if(tuning == undefined) { tuning = 'standard'; } - container.append(''); + if(name == undefined) { name = note + chords.common.types.abbreviations[typ]; } + container.append(''); }; diff --git a/progressions.html b/progressions.html new file mode 100644 index 0000000..65e7816 --- /dev/null +++ b/progressions.html @@ -0,0 +1,30 @@ + + + + + + + + +

Progressions

+

1. The I-vi-IV-V7 progression in each key

+
+ + From 2966767571e6db11ae7e3f98344dbb421d89f91b Mon Sep 17 00:00:00 2001 From: Am Laher Date: Wed, 21 Nov 2012 00:21:01 +1300 Subject: [PATCH 3/7] title for 'common chords' page --- common.html | 1 + 1 file changed, 1 insertion(+) diff --git a/common.html b/common.html index 68df5ce..7286788 100644 --- a/common.html +++ b/common.html @@ -22,6 +22,7 @@ +

Some common chords for standard tuning.

Major

From 401b576a15e09c0103c850816fb1d645cf155389 Mon Sep 17 00:00:00 2001 From: Am Laher Date: Wed, 21 Nov 2012 21:03:43 +1300 Subject: [PATCH 4/7] Removing JQuery dependency. More idiomatic markup. Moving common chords into ChordialJS repository --- chords-common.js | 81 ----------------------------------------------- chords.js | 59 +++++++++++++++++++++++++++------- common.html | 36 --------------------- progressions.html | 30 ------------------ test.html | 2 ++ 5 files changed, 49 insertions(+), 159 deletions(-) delete mode 100644 chords-common.js delete mode 100644 common.html delete mode 100644 progressions.html diff --git a/chords-common.js b/chords-common.js deleted file mode 100644 index 5dd03e3..0000000 --- a/chords-common.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * This add-on adds some knowledge about common chords. - * - * NOTE: There must be more mathematical way to represent some of this stuff. - * NOTE: IANAM (I am not a musician!) - */ -chords.common= { - //tuning - 'standard' : { - //type - 'major' : { - 'A' : [['X02220','--123-']], - 'A#/Bb': [['X13331','-13331']], - 'B' : [['X24442','-13331']], - 'C' : [['X32010','-32-1-']], - 'C#/Db': [['X46664','-13331']], - 'D' : [['XX0232','---132']], - 'D#/Eb': [['XX1343','--1243']], - 'E' : [['022100','-231--']], - 'F' : [['133211','134211']], - 'F#/Gb': [['244322','134211']], - 'G' : [['320003','21---3']], - 'G#/Ab': [['466544','134211']] - }, - 'minor' : { - 'A' : [['X02210','--231-']], - 'A#/Bb': [['X13321','-13421']], - 'B' : [['X24432','-13421']], - 'C' : [['X35543','-13421']], - 'C#/Db': [['X46654','-13421']], - 'D' : [['XX0231','---132']], - 'D#/Eb': [['XX4342','--3241']], - 'E' : [['022000','-23---']], - 'F' : [['133111','134111']], - 'F#/Gb': [['244222','134111']], - 'G' : [['355333','134111']], - 'G#/Ab': [['466444','134111']] - }, - 'seven' : { - 'A' : [['X02020','--1-3-']], - 'A#/Bb': [['X13131','-12131']], - 'B' : [['X24242','-12131']], - 'C' : [['X32310','-32-1-']], - 'C#/Db': [['X46464','-12131']], - 'D' : [['XX0212','---213']], - 'D#/Eb': [['XX1313','--1213']], - 'E' : [['020100','-2-1--']], - 'F' : [['131211','131211']], - 'F#/Gb': [['242322','131211']], - 'G' : [['320001','32---1']], - 'G#/Ab': [['464544','131211']] - } - } -}; -//TODO: VII chord should be a 'dim' -chords.common.keys= { - 'major' : { - 'A' : [['A'],['B','minor'],['C#/Db','minor'],['D'],['E'],['F#/Gb','minor'],['G']], - 'B' : [['B'],['C#/Db','minor'],['D#/Eb','minor'],['E'],['F#/Gb'],['G#/Ab','minor'],['A#/Bb']], - 'C' : [['C'],['D','minor'],['E','minor'],['F'],['G'],['A','minor'],['A#/Bb']], - 'D' : [['D'],['E','minor'],['F#/Gb','minor'],['G'],['A'],['B','minor'],['C']], - 'E' : [['E'],['F#/Gb','minor'],['G#/Ab','minor'],['A'],['B'],['C#/Db','minor'],['D']], - 'F' : [['F'],['G','minor'],['A','minor'],['A#/Bb'],['C'],['D','minor'],['E']], - 'G' : [['G'],['A','minor'],['B','minor'],['C'],['D'],['E','minor'],['F']], - } -}; -chords.common.types= { - 'abbreviations' : { - 'major' : '', - 'minor' : 'm', - 'seven' : '7' - } -}; -chords.common.makeChord= function(container,note,size,typ,name,tuning) { - if(typ == undefined) { typ='major'; } - if(size == undefined) { size=3; } - if(tuning == undefined) { tuning = 'standard'; } - if(name == undefined) { name = note + chords.common.types.abbreviations[typ]; } - container.append(''); -}; - diff --git a/chords.js b/chords.js index f4d2833..65f9854 100644 --- a/chords.js +++ b/chords.js @@ -23,6 +23,12 @@ * along with this program. If not, see . */ +if (!window.console) console = {}; +console.log = console.log || function(){}; +console.warn = console.warn || function(){}; +console.error = console.error || function(){}; +console.info = console.info || function(){}; + var chords = (function(){ //Constants @@ -38,7 +44,12 @@ var chords = (function(){ var FONT_NAME = "Arial"; var ChordBoxImage = function(name, chord, fingers, size) { - + var _stringCount= chord.length; + var _fretCount= FRET_COUNT; + if(_stringCount==4) { + //Ukelele etc + _fretCount=4; + } //Fields var _ctx; var Pen = function(color, size) { @@ -143,8 +154,8 @@ var chords = (function(){ _lineWidth = Math.ceil(_size * 0.31); _dotWidth = Math.ceil(0.9 * _fretWidth); _markerWidth = 0.7 * _fretWidth; - _boxWidth = 5 * _fretWidth + 6 * _lineWidth; - _boxHeight = FRET_COUNT * (_fretWidth + _lineWidth) + _lineWidth; + _boxWidth = (_stringCount-1) * _fretWidth + (_stringCount) * _lineWidth; + _boxHeight = _fretCount * (_fretWidth + _lineWidth) + _lineWidth; //Find out font sizes //TODO: calculate perc via CSS @@ -189,7 +200,10 @@ var chords = (function(){ }; var ParseChord = function(chord) { - if (chord == null || typeof chord == 'undefined' || !chord.match(/[\dxX]{6}|((1|2)?[\dxX]-){5}(1|2)?[\dxX]/)) { + if (chord == null || typeof chord == 'undefined' + || (!chord.match(/[\dxX]{6}|((1|2)?[\dxX]-){5}(1|2)?[\dxX]/) + && !chord.match(/[\dxX]{4}|((1|2)?[\dxX]-){3}(1|2)?[\dxX]/)) + ) { _error = true; } else { var parts; @@ -200,7 +214,7 @@ var chords = (function(){ } var maxFret = 0; var minFret = Number.MAX_VALUE; - for (var i = 0; i < 6; i++) { + for (var i = 0; i < _stringCount; i++) { if (parts[i].toUpperCase() == "X") { _chordPositions[i] = MUTED; } else { @@ -241,12 +255,12 @@ var chords = (function(){ var pen = Pen(_foregroundBrush, _lineWidth); var totalFretWidth = _fretWidth + _lineWidth; - for (var i = 0; i <= FRET_COUNT; i++) { + for (var i = 0; i <= _fretCount; i++) { var y = _ystart + i * totalFretWidth; _graphics.DrawLine(pen, _xstart, y, _xstart + _boxWidth - _lineWidth, y); } - for (i = 0; i < 6; i++) { + for (i = 0; i < _stringCount; i++) { var x = _xstart + (i * totalFretWidth); _graphics.DrawLine(pen, x, _ystart, x, _ystart + _boxHeight - _lineWidth); } @@ -261,10 +275,10 @@ var chords = (function(){ var DrawBars = function() { var bars = {}; var bar; - for (var i = 0; i < 5; i++) { + for (var i = 0; i < (_stringCount-1); i++) { if (_chordPositions[i] != MUTED && _chordPositions[i] != OPEN && _fingers[i] != NO_FINGER && !bars.hasOwnProperty(_fingers[i])) { bar = { 'Str':i, 'Pos':_chordPositions[i], 'Length':0, 'Finger':_fingers[i] }; - for (var j = i + 1; j < 6; j++) { + for (var j = i + 1; j < _stringCount; j++) { if (_fingers[j] == bar['Finger'] && _chordPositions[j] == _chordPositions[i]) { bar['Length'] = j - i; } @@ -388,7 +402,25 @@ var chords = (function(){ }; }; - + var RenderElements = function(elements) { + for (var i = 0; i < elements.length; i++) { + var el = elements[i]; + var chordPos = el.getAttribute('data-positions'); + if(chordPos != undefined) { + console.log(''); + var chordFingers = el.getAttribute('data-fingers'); + var chordSize = el.getAttribute('data-size'); + var chordName = el.firstChild.nodeValue; + var chord = ChordBoxImage(chordName, chordPos, chordFingers, chordSize); + var canvas = document.createElement('canvas'); + canvas.setAttribute('width',chord.getWidth()); + canvas.setAttribute('height',chord.getHeight()); + var ctx= canvas.getContext('2d'); + el.replaceChild(canvas, el.firstChild); + chord.Draw(ctx); + } + } + }; //requires jQuery //example: var ReplaceChordElements = function() { @@ -403,10 +435,13 @@ var chords = (function(){ chord.Draw(ctx); }); }; - + var ReplaceDefault= function() { + RenderElements(document.getElementsByTagName('span')); + ReplaceChordElements(); + }; return { chord: ChordBoxImage, - replace: ReplaceChordElements, + replace: ReplaceDefault, }; })(); diff --git a/common.html b/common.html deleted file mode 100644 index 7286788..0000000 --- a/common.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - -

Some common chords for standard tuning.

-

Major

-
-
-

Minor

-
-
-

Seven

-
-
- - diff --git a/progressions.html b/progressions.html deleted file mode 100644 index 65e7816..0000000 --- a/progressions.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - -

Progressions

-

1. The I-vi-IV-V7 progression in each key

-
- - diff --git a/test.html b/test.html index 6db9acd..312b62d 100644 --- a/test.html +++ b/test.html @@ -14,5 +14,7 @@ + + From d53c20ddb8f042e73638c6bf5f84566e2398dbca Mon Sep 17 00:00:00 2001 From: Am Laher Date: Wed, 21 Nov 2012 21:53:25 +1300 Subject: [PATCH 5/7] Adding ukelele test. Removing JQuery. New namespace... --- chords.js | 38 +++++++++++++++++++++++--------------- test.html | 18 ++++++++++-------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/chords.js b/chords.js index 65f9854..f0dc809 100644 --- a/chords.js +++ b/chords.js @@ -29,7 +29,9 @@ console.warn = console.warn || function(){}; console.error = console.error || function(){}; console.info = console.info || function(){}; -var chords = (function(){ +// ChordJS is a more unique namespace. keeping 'chords' for backwards-compatibility. +var ChordJS,chords; +ChordJS = chords = (function(){ //Constants var NO_FINGER = '-'; @@ -416,25 +418,31 @@ var chords = (function(){ canvas.setAttribute('width',chord.getWidth()); canvas.setAttribute('height',chord.getHeight()); var ctx= canvas.getContext('2d'); - el.replaceChild(canvas, el.firstChild); chord.Draw(ctx); + el.replaceChild(canvas, el.firstChild); } } }; - //requires jQuery - //example: - var ReplaceChordElements = function() { - $('chord').each(function(i, elt){ - var name = $(elt).attr('name'); - var positions = $(elt).attr('positions'); - var fingers = $(elt).attr('fingers'); - var size = $(elt).attr('size'); - var chord = ChordBoxImage(name, positions, fingers, size); - var canvas = $('').attr({width:chord.getWidth(), height:chord.getHeight()}).insertAfter(elt); - var ctx = canvas[0].getContext('2d'); - chord.Draw(ctx); - }); + //example: + var ReplaceChordElements = function() { + var elements= document.getElementsByTagName('chord'); + for (var i = elements.length-1; i >= 0; i--) { + var el = elements[i]; + var name = el.getAttribute('name'); + var positions = el.getAttribute('positions'); + var fingers = el.getAttribute('fingers'); + var size = el.getAttribute('size'); + var chord = ChordBoxImage(name, positions, fingers, size); + var canvas = document.createElement('canvas'); + canvas.setAttribute('width',chord.getWidth()); + canvas.setAttribute('height',chord.getHeight()); + var ctx= canvas.getContext('2d'); + chord.Draw(ctx); + el.parentNode.replaceChild(canvas, el); + } }; + //RenderElements uses friendlier markup + //(keeping ReplaceChordElements for backward-compatibility) var ReplaceDefault= function() { RenderElements(document.getElementsByTagName('span')); ReplaceChordElements(); diff --git a/test.html b/test.html index 312b62d..2d3965c 100644 --- a/test.html +++ b/test.html @@ -1,20 +1,22 @@ - + - - - + + + - - +
+ +B7 +C From 650ffef70ab15c0a8084446fa23495ce967d6ee6 Mon Sep 17 00:00:00 2001 From: Am Laher Date: Wed, 21 Nov 2012 22:48:18 +1300 Subject: [PATCH 6/7] Retains data-name for future jiggery --- chords.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/chords.js b/chords.js index f0dc809..3472901 100644 --- a/chords.js +++ b/chords.js @@ -412,7 +412,9 @@ ChordJS = chords = (function(){ console.log(''); var chordFingers = el.getAttribute('data-fingers'); var chordSize = el.getAttribute('data-size'); - var chordName = el.firstChild.nodeValue; + var chordName = el.getAttribute('data-name') ? el.getAttribute('data-name') : el.firstChild.nodeValue; + //important for re-jiggery + if(!el.getAttribute('data-name')) { el.setAttribute('data-name', chordName); }; var chord = ChordBoxImage(chordName, chordPos, chordFingers, chordSize); var canvas = document.createElement('canvas'); canvas.setAttribute('width',chord.getWidth()); From 99773b579d3694bf04b633167cdeff4b748a21a6 Mon Sep 17 00:00:00 2001 From: Am Laher Date: Thu, 22 Nov 2012 22:31:15 +1300 Subject: [PATCH 7/7] support for styling and refreshing spans --- chords.js | 77 ++++++++++++++++++++++++++++++++----------------------- test.html | 4 +-- 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/chords.js b/chords.js index 3472901..b26122b 100644 --- a/chords.js +++ b/chords.js @@ -236,25 +236,33 @@ ChordJS = chords = (function(){ }; - var CreateImage = function(ctx) { + var CreateImage = function(ctx, style) { + // introducing a parameter object, for styling. Introduce defaults, keeping backwards compatibility in mind. + style = typeof style !== 'undefined' ? style : { 'background-color' : _backgroundBrush }; + style['color'] = style['color'] ? style['color'] : _foregroundBrush; + style['font-family'] = style['font-family'] ? style['font-family'] : FONT_NAME; + _ctx = ctx; - _graphics.FillRectangle(_backgroundBrush, 0, 0, _imageWidth, _imageHeight); + //use top-level backgroundBrush unless specified + if ( style['background-color'] ) { + _graphics.FillRectangle(style['background-color'], 0, 0, _imageWidth, _imageHeight); + } if (_error) { //Draw red x var errorPen = Pen('red', 3); _graphics.DrawLine(errorPen, 0, 0, _imageWidth, _imageHeight); _graphics.DrawLine(errorPen, 0, _imageHeight, _imageWidth, 0); } else { - DrawChordBox(); - DrawChordPositions(); - DrawChordName(); - DrawFingers(); - DrawBars(); + DrawChordBox(style); + DrawChordPositions(style); + DrawChordName(style); + DrawFingers(style); + DrawBars(style); } }; - var DrawChordBox = function() { - var pen = Pen(_foregroundBrush, _lineWidth); + var DrawChordBox = function(style) { + var pen = Pen(style.color, _lineWidth); var totalFretWidth = _fretWidth + _lineWidth; for (var i = 0; i <= _fretCount; i++) { @@ -270,11 +278,11 @@ ChordJS = chords = (function(){ if (_baseFret == 1) { //Need to draw the nut var nutHeight = _fretWidth / 2; - _graphics.FillRectangle(_foregroundBrush, _xstart - _lineWidth / 2, _ystart - nutHeight, _boxWidth, nutHeight); + _graphics.FillRectangle(style.color, _xstart - _lineWidth / 2, _ystart - nutHeight, _boxWidth, nutHeight); } }; - var DrawBars = function() { + var DrawBars = function(style) { var bars = {}; var bar; for (var i = 0; i < (_stringCount-1); i++) { @@ -292,7 +300,7 @@ ChordJS = chords = (function(){ } //TODO: figure out why there are two pens here - var pen = Pen(_foregroundBrush, _lineWidth * 3); + var pen = Pen(style.color, _lineWidth * 3); var totalFretWidth = _fretWidth + _lineWidth; for (var b in bars) { if (bars.hasOwnProperty(b)){ @@ -300,13 +308,13 @@ ChordJS = chords = (function(){ var xstart = _xstart + bar['Str'] * totalFretWidth; var xend = xstart + bar['Length'] * totalFretWidth; var y = _ystart + (bar['Pos'] - _baseFret + 1) * totalFretWidth - (totalFretWidth / 2); - pen = Pen(_foregroundBrush, _dotWidth / 2); + pen = Pen(style.color, _dotWidth / 2); _graphics.DrawLine(pen, xstart, y, xend, y); } } }; - var DrawChordPositions = function() { + var DrawChordPositions = function(style) { var yoffset = _ystart - _fretWidth; var xoffset = _lineWidth / 2; var totalFretWidth = _fretWidth + _lineWidth; @@ -318,9 +326,9 @@ ChordJS = chords = (function(){ var xpos = _xstart - (0.5 * _fretWidth) + (0.5 * _lineWidth) + (i * totalFretWidth); if (relativePos > 0) { var ypos = relativePos * totalFretWidth + yoffset; - _graphics.FillCircle(_foregroundBrush, xpos, ypos, _dotWidth); + _graphics.FillCircle(style.color, xpos, ypos, _dotWidth); } else if (absolutePos == OPEN) { - var pen = Pen(_foregroundBrush, _lineWidth); + var pen = Pen(style.color, _lineWidth); var ypos = _ystart - _fretWidth; var markerXpos = xpos + ((_dotWidth - _markerWidth) / 2); if (_baseFret == 1) { @@ -328,7 +336,7 @@ ChordJS = chords = (function(){ } _graphics.DrawCircle(pen, markerXpos, ypos, _markerWidth); } else if (absolutePos == MUTED) { - var pen = Pen(_foregroundBrush, _lineWidth * 1.5); + var pen = Pen(style.color, _lineWidth * 1.5); var ypos = _ystart - _fretWidth; var markerXpos = xpos + ((_dotWidth - _markerWidth) / 2); if (_baseFret == 1) { @@ -340,24 +348,24 @@ ChordJS = chords = (function(){ } } - var DrawFingers = function() { + var DrawFingers = function(style) { var xpos = _xstart + (0.5 * _lineWidth); var ypos = _ystart + _boxHeight; - var font = Font(FONT_NAME, _fingerFontSize); + var font = Font(style['font-family'], _fingerFontSize); for (var f=0; f<_fingers.length; f++) { var finger = _fingers[f]; if (finger != NO_FINGER) { var charSize = _graphics.MeasureString(finger.toString(), font); - _graphics.DrawString(finger.toString(), font, _foregroundBrush, xpos - (0.5 * charSize.Width), ypos); + _graphics.DrawString(finger.toString(), font, style.color, xpos - (0.5 * charSize.Width), ypos); } xpos += (_fretWidth + _lineWidth); } } - var DrawChordName = function() { + var DrawChordName = function(style) { - var nameFont = Font(FONT_NAME, _nameFontSize); - var superFont = Font(FONT_NAME, _superScriptFontSize); + var nameFont = Font(style['font-family'], _nameFontSize); + var superFont = Font(style['font-family'], _superScriptFontSize); var name; var supers; if (_chordName.indexOf('_') == -1) { @@ -374,15 +382,15 @@ ChordJS = chords = (function(){ if (stringSize.Width < _boxWidth) { xTextStart = _xstart + ((_boxWidth - stringSize.Width) / 2); } - _graphics.DrawString(name, nameFont, _foregroundBrush, xTextStart, 0.2 * _superScriptFontSize); + _graphics.DrawString(name, nameFont, style.color, xTextStart, 0.2 * _superScriptFontSize); if (supers != "") { - _graphics.DrawString(supers, superFont, _foregroundBrush, xTextStart + 0.8 * stringSize.Width, 0); + _graphics.DrawString(supers, superFont, style.color, xTextStart + 0.8 * stringSize.Width, 0); } if (_baseFret > 1) { - var fretFont = Font(FONT_NAME, _fretFontSize); + var fretFont = Font(style['font-family'], _fretFontSize); var offset = (_fretFontSize - _fretWidth) / 2; - _graphics.DrawString(_baseFret + "fr", fretFont, _foregroundBrush, _xstart + _boxWidth + 0.4 * _fretWidth, _ystart - offset); + _graphics.DrawString(_baseFret + "fr", fretFont, style.color, _xstart + _boxWidth + 0.4 * _fretWidth, _ystart - offset); } } @@ -403,16 +411,16 @@ ChordJS = chords = (function(){ Draw: CreateImage }; - }; + }; var RenderElements = function(elements) { for (var i = 0; i < elements.length; i++) { var el = elements[i]; var chordPos = el.getAttribute('data-positions'); if(chordPos != undefined) { - console.log(''); var chordFingers = el.getAttribute('data-fingers'); var chordSize = el.getAttribute('data-size'); - var chordName = el.getAttribute('data-name') ? el.getAttribute('data-name') : el.firstChild.nodeValue; + var chordName = el.hasAttribute('data-name') ? el.getAttribute('data-name') : el.firstChild.nodeValue; + var style= el.style; //important for re-jiggery if(!el.getAttribute('data-name')) { el.setAttribute('data-name', chordName); }; var chord = ChordBoxImage(chordName, chordPos, chordFingers, chordSize); @@ -420,8 +428,13 @@ ChordJS = chords = (function(){ canvas.setAttribute('width',chord.getWidth()); canvas.setAttribute('height',chord.getHeight()); var ctx= canvas.getContext('2d'); - chord.Draw(ctx); - el.replaceChild(canvas, el.firstChild); + chord.Draw(ctx, style); + // remove existing child nodes + var children= el.childNodes; + for (var j = children.length-1; j >= 0; j--) { + el.removeChild(children[j]); + } + el.appendChild(canvas); } } }; diff --git a/test.html b/test.html index 2d3965c..e2ec8bb 100644 --- a/test.html +++ b/test.html @@ -16,7 +16,7 @@
-B7 -C +B7 +C