200 lines
		
	
	
	
		
			6.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			200 lines
		
	
	
	
		
			6.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
|  | /* | ||
|  |  * author: Blair Vanderhoof | ||
|  |  * https://github.com/blairvanderhoof/gist-embed
 | ||
|  |  * version 2.4 | ||
|  |  */ | ||
|  | (function($) { | ||
|  |   'use strict'; | ||
|  | 
 | ||
|  |   function getLineNumbers(lineRangeString) { | ||
|  |     var lineNumbers = [], range, lineNumberSections; | ||
|  | 
 | ||
|  |     if (typeof lineRangeString === 'number') { | ||
|  |       lineNumbers.push(lineRangeString); | ||
|  |     } else { | ||
|  |       lineNumberSections = lineRangeString.split(','); | ||
|  | 
 | ||
|  |       for (var i = 0; i < lineNumberSections.length; i++) { | ||
|  |         range = lineNumberSections[i].split('-'); | ||
|  |         if (range.length === 2) { | ||
|  |           for (var j = parseInt(range[0], 10); j <= range[1]; j++) { | ||
|  |             lineNumbers.push(j); | ||
|  |           } | ||
|  |         } else if (range.length === 1) { | ||
|  |           lineNumbers.push(parseInt(range[0], 10)); | ||
|  |         } | ||
|  |       } | ||
|  |     } | ||
|  |     return lineNumbers; | ||
|  |   } | ||
|  | 
 | ||
|  |   $.fn.gist = function() { | ||
|  |     return this.each(function() { | ||
|  |       var $elem = $(this), | ||
|  |         id, | ||
|  |         url, | ||
|  |         file, | ||
|  |         lines, | ||
|  |         loading, | ||
|  |         highlightLines, | ||
|  |         hideFooterOption, | ||
|  |         hideLineNumbersOption, | ||
|  |         showLoading, | ||
|  |         showSpinner, | ||
|  |         data = {}; | ||
|  | 
 | ||
|  |       // make block level so loading text shows properly
 | ||
|  |       $elem.css('display', 'block'); | ||
|  | 
 | ||
|  |       id = $elem.data('gist-id') || ''; | ||
|  |       file = $elem.data('gist-file'); | ||
|  |       hideFooterOption = $elem.data('gist-hide-footer') === true; | ||
|  |       hideLineNumbersOption = $elem.data('gist-hide-line-numbers') === true; | ||
|  |       lines = $elem.data('gist-line'); | ||
|  |       highlightLines = $elem.data('gist-highlight-line'); | ||
|  |       showSpinner = $elem.data('gist-show-spinner') === true; | ||
|  |       if (showSpinner) { | ||
|  |         showLoading = false; | ||
|  |       } else { | ||
|  |         showLoading = $elem.data('gist-show-loading') !== undefined ? | ||
|  |           $elem.data('gist-show-loading') : true; | ||
|  |       } | ||
|  | 
 | ||
|  |       if (file) { | ||
|  |         data.file = file; | ||
|  |       } | ||
|  | 
 | ||
|  |       // if the id doesn't exist, then ignore the code block
 | ||
|  |       if (!id) { | ||
|  |         return false; | ||
|  |       } | ||
|  | 
 | ||
|  |       url = 'https://gist.github.com/' + id + '.json'; | ||
|  |       loading = 'Loading gist ' + url + (data.file ? ', file: ' + data.file : '') + '...'; | ||
|  | 
 | ||
|  |       // loading
 | ||
|  |       if (showLoading)  { | ||
|  |         $elem.html(loading); | ||
|  |       } | ||
|  | 
 | ||
|  |       // loading spinner
 | ||
|  |       if (showSpinner) { | ||
|  |         $elem.html('<img style="display:block;margin-left:auto;margin-right:auto"  alt="' + loading + '" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif">'); | ||
|  |       } | ||
|  | 
 | ||
|  |       // request the json version of this gist
 | ||
|  |       $.ajax({ | ||
|  |         url: url, | ||
|  |         data: data, | ||
|  |         dataType: 'jsonp', | ||
|  |         timeout: 10000, | ||
|  |         success: function(response) { | ||
|  |           var linkTag, | ||
|  |             head, | ||
|  |             lineNumbers, | ||
|  |             highlightLineNumbers, | ||
|  |             $responseDiv; | ||
|  | 
 | ||
|  |           // the html payload is in the div property
 | ||
|  |           if (response && response.div) { | ||
|  |             // github returns /assets/embed-id.css now, but let's be sure about that
 | ||
|  |             if (response.stylesheet) { | ||
|  |               // github passes down html instead of a url for the stylehsheet now
 | ||
|  |               // parse off the href
 | ||
|  |               if (response.stylesheet.indexOf('<link') === 0) { | ||
|  |                 response.stylesheet = | ||
|  |                   response.stylesheet | ||
|  |                     .replace(/\\/g,'') | ||
|  |                     .match(/href=\"([^\s]*)\"/)[1]; | ||
|  |               } else if (response.stylesheet.indexOf('http') !== 0) { | ||
|  |                 // add leading slash if missing
 | ||
|  |                 if (response.stylesheet.indexOf('/') !== 0) { | ||
|  |                   response.stylesheet = '/' + response.stylesheet; | ||
|  |                 } | ||
|  |                 response.stylesheet = 'https://gist.github.com' + response.stylesheet; | ||
|  |               } | ||
|  |             } | ||
|  | 
 | ||
|  |             // add the stylesheet if it does not exist
 | ||
|  |             if (response.stylesheet && $('link[href="' + response.stylesheet + '"]').length === 0) { | ||
|  |               linkTag = document.createElement('link'); | ||
|  |               head = document.getElementsByTagName('head')[0]; | ||
|  | 
 | ||
|  |               linkTag.type = 'text/css'; | ||
|  |               linkTag.rel = 'stylesheet'; | ||
|  |               linkTag.href = response.stylesheet; | ||
|  |               head.insertBefore(linkTag, head.firstChild); | ||
|  |             } | ||
|  | 
 | ||
|  |             // refernce to div
 | ||
|  |             $responseDiv = $(response.div); | ||
|  | 
 | ||
|  |             // remove id for uniqueness constraints
 | ||
|  |             $responseDiv.removeAttr('id'); | ||
|  | 
 | ||
|  |             $elem.html('').append($responseDiv); | ||
|  | 
 | ||
|  |             // option to highlight lines
 | ||
|  |             if (highlightLines) { | ||
|  |               highlightLineNumbers = getLineNumbers(highlightLines); | ||
|  | 
 | ||
|  |               // we need to set the line-data td to 100% so the highlight expands the whole line
 | ||
|  |               $responseDiv.find('td.line-data').css({ | ||
|  |                 'width': '100%' | ||
|  |               }); | ||
|  | 
 | ||
|  |               // find all .js-file-line tds (actual code lines) that match the highlightLines and add the highlight class
 | ||
|  |               $responseDiv.find('.js-file-line').each(function(index) { | ||
|  |                 if ($.inArray(index + 1, highlightLineNumbers) !== -1) { | ||
|  |                   $(this).css({ | ||
|  |                     'background-color': 'rgb(255, 255, 204)' | ||
|  |                   }); | ||
|  |                 } | ||
|  |               }); | ||
|  |             } | ||
|  | 
 | ||
|  |             // if user provided a line param, get the line numbers based on the criteria
 | ||
|  |             if (lines) { | ||
|  |               lineNumbers = getLineNumbers(lines); | ||
|  | 
 | ||
|  |               // find all trs containing code lines that don't exist in the line param
 | ||
|  |               $responseDiv.find('.js-file-line').each(function(index) { | ||
|  |                 if (($.inArray(index + 1, lineNumbers)) === -1) { | ||
|  |                   $(this).parent().remove(); | ||
|  |                 } | ||
|  |               }); | ||
|  |             } | ||
|  | 
 | ||
|  |             // option to remove footer
 | ||
|  |             if (hideFooterOption) { | ||
|  |               $responseDiv.find('.gist-meta').remove(); | ||
|  | 
 | ||
|  |               // present a uniformed border when footer is hidden
 | ||
|  |               $responseDiv.find('.gist-data').css('border-bottom', '0px'); | ||
|  |               $responseDiv.find('.gist-file').css('border-bottom', '1px solid #ddd'); | ||
|  |             } | ||
|  | 
 | ||
|  |             // option to remove
 | ||
|  |             if (hideLineNumbersOption) { | ||
|  |               $responseDiv.find('.js-line-number').remove(); | ||
|  |             } | ||
|  | 
 | ||
|  |           } else { | ||
|  |             $elem.html('Failed loading gist ' + url); | ||
|  |           } | ||
|  |         }, | ||
|  |         error: function(jqXHR, textStatus) { | ||
|  |           $elem.html('Failed loading gist ' + url + ': ' + textStatus); | ||
|  |         } | ||
|  |       }); | ||
|  | 
 | ||
|  |     }); | ||
|  |   }; | ||
|  | 
 | ||
|  |   $(function() { | ||
|  |     // find all elements containing "data-gist-id" attribute.
 | ||
|  |     $('[data-gist-id]').gist(); | ||
|  |   }); | ||
|  | 
 | ||
|  | })(jQuery); |