heroheman
7/15/2013 - 4:15 PM

JavaScript: Patternlab modified json Annotations

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();
        }