JavaScript: Patternlab modified json Annotations
function buildAnnotationView() {
$.getJSON('styleguide/js/annotations.json', function (data) {
$sgPattern.each(function(index) { //Loop through each pattern
var $this = $(this),
$thisAnnotation = '';
if($this.children().first().get('0') || $this.children().first().attr('class') ) {
var $elemType = $this.children().first().get('0').nodeName,
$elemClass = $this.children().first().attr('class');
$.each(data.comment, function (i, jsElem) {
if($elemType === data.comment[i].el.toUpperCase()){
$thisAnnotation = '<h3>'+data.comment[i].title +'</h3><p>' + data.comment[i].comment + '</p>';
} else if ( $elemClass === data.comment[i].el) {
$thisAnnotation = '<h3>'+data.comment[i].title +'</h3><p>' + data.comment[i].comment + '</p>';
}
})
$('<div class="sg-annotations" />').html($thisAnnotation).appendTo($this); //Create new node, fill it with the annotation text, then append it to the pattern
}
}).error( function () { console.log('error with the json thingy') } );
});
$vp.find('.sg-annotations').show();
}