top of page
Writer's picturecrowusbureno

Clone GitHub Project on local computer using Git BASH: Tips and Tricks



Cloning is the process of creating a local copy of a remote repository. A GitHub repository can be cloned using an SSH or HTML link.SSH is a protocol to securely communicate with a server using a handshake mechanism and public-key cryptography technique. A secure connection allows you to execute git instructions from the command line (terminal) without confirming GitHub credentials for every push/pull operation.




How to clone GitHub Project on local computer using Git BASH




The GitHub CLI brings capabilities of GitHub web UI to the command line to perform operations like creating a pull request, track issues, fork a repository, etc. Use the auth command to authenticate the account and clone the project using the clone command:


A GitHub repository can be cloned using git and gh tools. Use an SSH key to auto-authenticate. There are many free software available to manage git projects. Try out the GitHub CLI tools to bring all the features of the GitHub UI to terminal. Happy coding!


Now everything is ready and we can safely perform a git clone with ssh key. How to do it? There is no magic here anymore, the clone function requires the address from which we want to download the project. We just provide the appropriate address using SSH, not HTTPS. In both GitHub, GitLab, and Bitbucket, the clone with ssh process looks pretty much the same. For example, on GitHub, our repo address format is:


From the Overleaf Project menu within your project, you can select Git from the Synchronization options. This will bring up a dialog showing the git clone command to use when creating your local repository.


A Git repository is a virtual storage of your project. It exists on your local development machine. A repository is where you save versions of your code, which you can access when needed. Your local computer has a Git repository. A git repository contains, among other things, the following:


Once GIT is configured, we can begin using it to access GitHub. In this example I perform a git clone command to copy a repository to the local computer. When prompted for the username and password, enter your GitHub username and the previously generated token as the password.


The project maintainer starts the "master" branch on the shared remote repo. All developers clone the "master" branch into their local repos. Each developer starts a feature branch (e.g., "user1-featureX") to work on a feature. Once completed (or even work-in-progress), he files a "pull request" to initiate a review for his feature. All developers can provide comments and suggestions. Once accepted, the project maintainer can then merge the feature branch into the "master" branch.


In order to work on an open-source project, you will first need to make your own copy of the repository. To do this, you should fork the repository and then clone it so that you have a local working copy.


Our Github Repository is the code hosted on Github. Our local machine is the computer/device you are going to be editing the code on.The changes made on your local machine will not be sent to our github repository until they are committed and pushed.


To clone a repository to GitHub desktop, the steps are similar to the way of using commands. The difference is that after you click the Code button, you should choose the Open with GitHub Desktop option to open the repository with GitHub Desktop. Then, click Choose and navigate to the local path via Windows Explorer. Finally, click Clone.


Generally speaking, you can get a Git repository locally in one of two ways. One way is to run the `git clone` command and clone a repository from an existing repository (whether that repository exists locally on your computer or on a server running Git such as GitHub.com). The other way is to initialize a new Git repository using the `git init` command to set up version tracking in a new folder.


We have initiated a repository online and a working Git within Rstudio. Hence, we can start working on the code locally by downloading the repository to our computer. Rstudio provides a convenient way to start a new project as a Git repository.


")[0],f=e.each;p.style.cssText="background-color:rgba(1,1,1,.5)",c.rgba=p.style.backgroundColor.indexOf("rgba")>-1,f(u,function(e,t)t.cache="_"+e,t.props.alpha=idx:3,type:"percent",def:1),l.fn=e.extend(l.prototype,parse:function(n,o,r,h),is:function(e)var i=l(e),s=!0,n=this;return f(u,function(e,a)),s,_space:function()var e=[],t=this;return f(u,function(i,s)t[s.cache]&&e.push(i)),e.pop(),transition:function(e,t)var s=l(e),n=s._space(),a=u[n],o=0===this.alpha()?l("transparent"):this,r=o[a.cache],blend:function(t)if(1===this._rgba[3])return this;var i=this._rgba.slice(),s=i.pop(),n=l(t)._rgba;return l(e.map(i,function(e,t)return(1-s)*n[t]+s*e)),toRgbaString:function()var t="rgba(",i=e.map(this._rgba,function(e,t)return null==e?t>2?1:0:e);return 1===i[3]&&(i.pop(),t="rgb("),t+i.join()+")",toHslaString:function()var t="hsla(",i=e.map(this.hsla(),function(e,t)return null==e&&(e=t>2?1:0),t&&3>t&&(e=Math.round(100*e)+"%"),e);return 1===i[3]&&(i.pop(),t="hsl("),t+i.join()+")",toHexString:function(t)var i=this._rgba.slice(),s=i.pop();return t&&i.push((255*s)),"#"+e.map(i,function(e)).join(""),toString:function()return 0===this._rgba[3]?"transparent":this.toRgbaString()),l.fn.parse.prototype=l.fn,u.hsla.to=function(e)null==e[2])return[null,null,null,e[3]];var t,i,s=e[0]/255,n=e[1]/255,a=e[2]/255,o=e[3],r=Math.max(s,n,a),h=Math.min(s,n,a),l=r-h,u=r+h,d=.5*u;return t=h===r?0:s===r?60*(n-a)/l+360:n===r?60*(a-s)/l+120:60*(s-n)/l+240,i=0===l?0:.5>=d?l/u:l/(2-u),[Math.round(t)%360,i,d,null==o?1:o],u.hsla.from=function(e)if(null==e[0],f(u,function(s,n)var a=n.props,o=n.cache,h=n.to,u=n.from;l.fn[s]=function(s)"object"===r?s:arguments,c=this[o].slice();return f(a,function(e,t)var s=d["object"===r?e:t.idx];null==s&&(s=c[t.idx]),c[t.idx]=i(s,t)),u?(n=l(u(c)),n[o]=c,n):l(c),f(a,function(t,i)l.fn[t])),l.hook=function(t)var i=t.split(" ");f(i,function(t,i)e.cssHooks[i]=set:function(t,n)(a=s(n))))if(n=l(atryt.style[i]=ncatch(h),e.fx.step[i]=function(t)(t.start=l(t.elem,i),t.end=l(t.end),t.colorInit=!0),e.cssHooks[i].set(t.elem,t.start.transition(t.end,t.pos))),l.hook(o),e.cssHooks.borderColor=expand:function(e)var t=;return f(["Top","Right","Bottom","Left"],function(i,s)t["border"+s+"Color"]=e),t,a=e.Color.names=aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}(p),function()(),function()function t(t,i,s,n)function i(t)e.extend(e.effects,version:"1.11.4",save:function(e,t)for(var i=0;t.length>i;i++)null!==t[i]&&e.data(c+t[i],e[0].style[t[i]]),restore:function(e,t)var i,s;for(s=0;t.length>s;s++)null!==t[s]&&(i=e.data(c+t[s]),void 0===i&&(i=""),e.css(t[s],i)),setMode:function(e,t)return"toggle"===t&&(t=e.is(":hidden")?"show":"hide"),t,getBaseline:function(e,t)var i,s;switch(e[0])case"top":i=0;break;case"middle":i=.5;break;case"bottom":i=1;break;default:i=e[0]/t.heightswitch(e[1])case"left":s=0;break;case"center":s=.5;break;case"right":s=1;break;default:s=e[1]/t.widthreturnx:s,y:i,createWrapper:function(t)if(t.parent().is(".ui-effects-wrapper"))return t.parent();var i=width:t.outerWidth(!0),height:t.outerHeight(!0),"float":t.css("float"),s=e("").addClass("ui-effects-wrapper").css(fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0),n=width:t.width(),height:t.height(),a=document.activeElement;trya.idcatch(o)a=document.bodyreturn t.wrap(s),(t[0]===a,removeWrapper:function(t)var i=document.activeElement;return t.parent().is(".ui-effects-wrapper")&&(t.parent().replaceWith(t),(t[0]===i,setTransition:function(t,i,s,n)return n=n),e.fn.extend(effect:function()function i(t)function i()e.isFunction(a)&&a.call(n[0]),e.isFunction(t)&&t()var n=e(this),a=s.complete,r=s.mode;(n.is(":hidden")?"hide"===r:"show"===r)?(n[r](),i()):o.call(n[0],s,i)var s=t.apply(this,arguments),n=s.mode,a=s.queue,o=e.effects.effect[s.effect];return e.fx.off,show:function(e)return function(s)if(i(s))return e.apply(this,arguments);var n=t.apply(this,arguments);return n.mode="show",this.effect.call(this,n)(e.fn.show),hide:function(e)return function(s)if(i(s))return e.apply(this,arguments);var n=t.apply(this,arguments);return n.mode="hide",this.effect.call(this,n)(e.fn.hide),toggle:function(e)return function(s)(e.fn.toggle),cssUnit:function(t)var i=this.css(t),s=[];return e.each(["em","px","%","pt"],function(e,t)i.indexOf(t)>0&&(s=[parseFloat(i),t])),s)(),function()var t=;e.each(["Quad","Cubic","Quart","Quint","Expo"],function(e,i)t[i]=function(t)return Math.pow(t,e+2)),e.extend(t,Sine:function(e)return 1-Math.cos(e*Math.PI/2),Circ:function(e)return 1-Math.sqrt(1-e*e),Elastic:function(e)1===e?e:-Math.pow(2,8*(e-1))*Math.sin((80*(e-1)-7.5)*Math.PI/15),Back:function(e)return e*e*(3*e-2),Bounce:function(e)for(var t,i=4;((t=Math.pow(2,--i))-1)/11>e;);return 1/Math.pow(4,3-i)-7.5625*Math.pow((3*t-2)/22-e,2)),e.each(t,function(t,i)e.easing["easeIn"+t]=i,e.easing["easeOut"+t]=function(e)return 1-i(1-e),e.easing["easeInOut"+t]=function(e)return.5>e?i(2*e)/2:1-i(-2*e+2)/2)(),e.effects,e.effects.effect.blind=function(t,i)left,e.effects.effect.bounce=function(t,i)5,f=2*p+(u,e.effects.effect.clip=function(t,i)"vertical",d="vertical"===u,c=d?"height":"width",p=d?"top":"left",f=;e.effects.save(o,r),o.show(),s=e.effects.createWrapper(o).css(overflow:"hidden"),n="IMG"===o[0].tagName?s:o,a=n[c](),l&&(n.css(c,0),n.css(p,a/2)),f[c]=l?a:0,f[p]=l?0:a/2,n.animate(f,queue:!1,duration:t.duration,easing:t.easing,complete:function()),e.effects.effect.drop=function(t,i)"hide"),r="show"===o,h=t.direction,e.effects.effect.explode=function(t,i),e.effects.effect.fade=function(t,i)"toggle");s.animate(opacity:n,queue:!1,duration:t.duration,easing:t.easing,complete:i),e.effects.effect.fold=function(t,i)var s,n,a=e(this),o=["position","top","bottom","left","right","height","width"],r=e.effects.setMode(a,t.mode,e.effects.effect.highlight=function(t,i)var s=e(this),n=["backgroundImage","backgroundColor","opacity"],a=e.effects.setMode(s,t.mode,e.effects.effect.size=function(t,i),e.effects.effect.scale=function(t,i)"both",h=t.origin,l=height:s.height(),width:s.width(),outerHeight:s.outerHeight(),outerWidth:s.outerWidth(),u=y:"horizontal"!==r?o/100:1,x:"vertical"!==r?o/100:1;n.effect="size",n.queue=!1,n.complete=i,"effect"!==a&&(n.origin=h,e.effects.effect.puff=function(t,i),e.effects.effect.pulsate=function(t,i),e.effects.effect.shake=function(t,i),e.effects.effect.slide=function(t,i)"show"),r="show"===o,h=t.direction,e.effects.effect.transfer=function(t,i)var s=e(this),n=e(t.to),a="fixed"===n.css("position"),o=e("body"),r=a?o.scrollTop():0,h=a?o.scrollLeft():0,l=n.offset(),u=top:l.top-r,left:l.left-h,height:n.innerHeight(),width:n.innerWidth(),d=s.offset(),c=e("").appendTo(document.body).addClass(t.className).css(top:d.top-r,left:d.left-h,height:s.innerHeight(),width:s.innerWidth(),position:a?"fixed":"absolute").animate(u,t.duration,t.easing,function()c.remove(),i())});.tocify width: 20%;max-height: 90%;overflow: auto;margin-left: 2%;position: fixed;border: 1px solid #ccc;border-radius: 6px;.tocify ul, .tocify li list-style: none;margin: 0;padding: 0;border: none;line-height: 30px;.tocify-header text-indent: 10px;.tocify-subheader text-indent: 20px;display: none;.tocify-subheader li font-size: 12px;.tocify-subheader .tocify-subheader text-indent: 30px;.tocify-subheader .tocify-subheader .tocify-subheader text-indent: 40px;.tocify-subheader .tocify-subheader .tocify-subheader .tocify-subheader text-indent: 50px;.tocify-subheader .tocify-subheader .tocify-subheader .tocify-subheader .tocify-subheader text-indent: 60px;.tocify .tocify-item > a, .tocify .nav-list .nav-header margin: 0px;.tocify .tocify-item a, .tocify .list-group-item padding: 5px;.tocify .nav-pills > li float: none;/* jquery Tocify - v1.9.1 - 2013-10-22 * * Copyright (c) 2013 Greg Franko; Licensed MIT */// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post]( -invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.(function(tocify) // ECMAScript 5 Strict Mode: [John Resig Blog Post]( -5-strict-mode-json-and-more/) "use strict"; // Calls the second IIFE and locally passes in the global jQuery, window, and document objects tocify(window.jQuery, window, document); // Locally passes in `jQuery`, the `window` object, the `document` object, and an `undefined` variable. The `jQuery`, `window` and `document` objects are passed in locally, to improve performance, since javascript first searches for a variable match within the local variables set before searching the global variables set. All of the global variables are also passed in locally to be minifier friendly. `undefined` can be passed in locally, because it is not a reserved word in JavaScript. (function($, window, document, undefined) // ECMAScript 5 Strict Mode: [John Resig Blog Post]( -5-strict-mode-json-and-more/) "use strict"; var tocClassName = "tocify", tocClass = "." + tocClassName, tocFocusClassName = "tocify-focus", tocHoverClassName = "tocify-hover", hideTocClassName = "tocify-hide", hideTocClass = "." + hideTocClassName, headerClassName = "tocify-header", headerClass = "." + headerClassName, subheaderClassName = "tocify-subheader", subheaderClass = "." + subheaderClassName, itemClassName = "tocify-item", itemClass = "." + itemClassName, extendPageClassName = "tocify-extend-page", extendPageClass = "." + extendPageClassName; // Calling the jQueryUI Widget Factory Method $.widget("toc.tocify", //Plugin version version: "1.9.1", // These options will be used as defaults options: // **context**: Accepts String: Any jQuery selector // The container element that holds all of the elements used to generate the table of contents context: "body", // **ignoreSelector**: Accepts String: Any jQuery selector // A selector to any element that would be matched by selectors that you wish to be ignored ignoreSelector: null, // **selectors**: Accepts an Array of Strings: Any jQuery selectors // The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure selectors: "h1, h2, h3", // **showAndHide**: Accepts a boolean: true or false // Used to determine if elements should be shown and hidden showAndHide: true, // **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown" // Used to display any of the table of contents nested items showEffect: "slideDown", // **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" // The time duration of the show animation showEffectSpeed: "medium", // **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp" // Used to hide any of the table of contents nested items hideEffect: "slideUp", // **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" // The time duration of the hide animation hideEffectSpeed: "medium", // **smoothScroll**: Accepts a boolean: true or false // Determines if a jQuery animation should be used to scroll to specific table of contents items on the page smoothScroll: true, // **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" // The time duration of the smoothScroll animation smoothScrollSpeed: "medium", // **scrollTo**: Accepts Number (pixels) // The amount of space between the top of page and the selected table of contents item after the page has been scrolled scrollTo: 0, // **showAndHideOnScroll**: Accepts a boolean: true or false // Determines if table of contents nested items should be shown and hidden while scrolling showAndHideOnScroll: true, // **highlightOnScroll**: Accepts a boolean: true or false // Determines if table of contents nested items should be highlighted (set to a different color) while scrolling highlightOnScroll: true, // **highlightOffset**: Accepts a number // The offset distance in pixels to trigger the next active table of contents item highlightOffset: 40, // **theme**: Accepts a string: "bootstrap", "jqueryui", or "none" // Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents theme: "bootstrap", // **extendPage**: Accepts a boolean: true or false // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased extendPage: true, // **extendPageOffset**: Accepts a number: pixels // How close to the bottom of the page a user must scroll before the page is extended extendPageOffset: 100, // **history**: Accepts a boolean: true or false // Adds a hash to the page url to maintain history history: true, // **scrollHistory**: Accepts a boolean: true or false // Adds a hash to the page url, to maintain history, when scrolling to a TOC item scrollHistory: false, // **hashGenerator**: How the hash value (the anchor segment of the URL, following the // # character) will be generated. // // "compact" (default) - #CompressesEverythingTogether // "pretty" - #looks-like-a-nice-url-and-is-easily-readable // function(text, element) - Your own hash generation function that accepts the text as an // argument, and returns the hash value. hashGenerator: "compact", // **highlightDefault**: Accepts a boolean: true or false // Set's the first TOC item as active if no other TOC item is active. highlightDefault: true , // _Create // ------- // Constructs the plugin. Only called once. _create: function() var self = this; self.extendPageScroll = true; // Internal array that keeps track of all TOC items (Helps to recognize if there are duplicate TOC item strings) self.items = []; // Generates the HTML for the dynamic table of contents self._generateToc(); // Adds CSS classes to the newly generated table of contents HTML self._addCSSClasses(); self.webkit = (function() for (var prop in window) if (prop) if (prop.toLowerCase().indexOf("webkit") !== -1) return true; return false; ()); // Adds jQuery event handlers to the newly generated table of contents self._setEventHandlers(); // Binding to the Window load event to make sure the correct scrollTop is calculated $(window).load(function() // Sets the active TOC item self._setActiveElement(true); // Once all animations on the page are complete, this callback function will be called $("html, body").promise().done(function() setTimeout(function() self.extendPageScroll = false; , 0); ); ); , // _generateToc // ------------ // Generates the HTML for the dynamic table of contents _generateToc: function() // _Local variables_ // Stores the plugin context in the self variable var self = this, // All of the HTML tags found within the context provided (i.e. body) that match the top level jQuery selector above firstElem, // Instantiated variable that will store the top level newly created unordered list DOM element ul, ignoreSelector = self.options.ignoreSelector; // Determine the element to start the toc with // get all the top level selectors firstElem = []; var selectors = this.options.selectors.replace(/ /g, "").split(","); // find the first set that have at least one non-ignored element for(var i = 0; i 0) break; if (!firstElem.length) self.element.addClass(hideTocClassName); return; self.element.addClass(tocClassName); // Loops through each top level selector firstElem.each(function(index) //If the element matches the ignoreSelector then we skip it if ($(this).is(ignoreSelector)) return; // Creates an unordered list HTML element and adds a dynamic ID and standard class name ul = $("", "id": headerClassName + index, "class": headerClassName ). // Appends a top level list item HTML element to the previously created HTML header append(self._nestElements($(this), index)); // Add the created unordered list element to the HTML element calling the plugin self.element.append(ul); // Finds all of the HTML tags between the header and subheader elements $(this).nextUntil(this.nodeName.toLowerCase()).each(function() // If there are no nested subheader elemements if ($(this).find(self.options.selectors).length === 0) // Loops through all of the subheader elements $(this).filter(self.options.selectors).each(function() //If the element matches the ignoreSelector then we skip it if ($(this).is(ignoreSelector)) return; self._appendSubheaders.call(this, self, ul); ); // If there are nested subheader elements else // Loops through all of the subheader elements $(this).find(self.options.selectors).each(function() //If the element matches the ignoreSelector then we skip it if ($(this).is(ignoreSelector)) return; self._appendSubheaders.call(this, self, ul); ); ); ); , _setActiveElement: function(pageload) var self = this, hash = window.location.hash.substring(1), elem = self.element.find('li[data-unique="' + hash + '"]'); if (hash.length) // Removes highlighting from all of the list item's self.element.find("." + self.focusClass).removeClass(self.focusClass); // Highlights the current list item that was clicked elem.addClass(self.focusClass); // Triggers the click event on the currently focused TOC item elem.click(); else // Removes highlighting from all of the list item's self.element.find("." + self.focusClass).removeClass(self.focusClass); if (!hash.length && pageload && self.options.highlightDefault) // Highlights the first TOC item if no other items are highlighted self.element.find(itemClass).first().addClass(self.focusClass); return self; , // _nestElements // ------------- // Helps create the table of contents list by appending nested list items _nestElements: function(self, index) var arr, item, hashValue; arr = $.grep(this.items, function(item) return item === self.text(); ); // If there is already a duplicate TOC item if (arr.length) // Adds the current TOC item text and index (for slight randomization) to the internal array this.items.push(self.text() + index); // If there not a duplicate TOC item else // Adds the current TOC item text to the internal array this.items.push(self.text()); hashValue = this._generateHashValue(arr, self, index); // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin item = $("", // Sets a common class name to the list item "class": itemClassName, "data-unique": hashValue ); if (this.options.theme !== "bootstrap3") item.append($("", "html": self.html() )); else item.html(self.html()); // Adds an HTML anchor tag before the currently traversed HTML element self.before($("", // Sets a name attribute on the anchor tag to the text of the currently traversed HTML element (also making sure that all whitespace is replaced with an underscore) "name": hashValue, "data-unique": hashValue )); return item; , // _generateHashValue // ------------------ // Generates the hash value that will be used to refer to each item. _generateHashValue: function(arr, self, index) var hashValue = "", hashGeneratorOption = this.options.hashGenerator; if (hashGeneratorOption === "pretty") // prettify the text hashValue = self.text().toLowerCase().replace(/\s/g, "-"); // fix double hyphens while (hashValue.indexOf("--") > -1) hashValue = hashValue.replace(/--/g, "-"); // fix colon-space instances while (hashValue.indexOf(":-") > -1) hashValue = hashValue.replace(/:-/g, "-"); else if (typeof hashGeneratorOption === "function") // call the function hashValue = hashGeneratorOption(self.text(), self); else // compact - the default hashValue = self.text().replace(/\s/g, ""); // add the index if we need to if (arr.length) hashValue += "" + index; // return the value return hashValue; , // _appendElements // --------------- // Helps create the table of contents list by appending subheader elements _appendSubheaders: function(self, ul) // The current element index var index = $(this).index(self.options.selectors), // Finds the previous header DOM element previousHeader = $(self.options.selectors).eq(index - 1), currentTagName = +$(this).prop("tagName").charAt(1), previousTagName = +previousHeader.prop("tagName").charAt(1), lastSubheader; // If the current header DOM element is smaller than the previous header DOM element or the first subheader if (currentTagName a'; var $selector = $(selector, context); if($selector.data('toggle') === "tab") $selector.tab('show'); // walk up the ancestors of this element, show any hidden tabs $selector.parents('.section.tabset').each(function(i, elm) var link = $('a[href="#' + $(elm).attr('id') + '"]'); if(link.data('toggle') === "tab") link.tab("show"); ); ; // Set the correct tab when the page loads showStuffFromHash(context); // Set the correct tab when a user uses their back/forward button $(window).on('hashchange', function() showStuffFromHash(context); ); // Change the URL when tabs are clicked $('a', context).on('click', function(e) history.pushState(null, null, this.href); showStuffFromHash(context); ); return this; ;(jQuery));window.buildTabsets = function(tocID) // build a tabset from a section div with the .tabset class function buildTabset(tabset) // check for fade and pills options var fade = tabset.hasClass("tabset-fade"); var pills = tabset.hasClass("tabset-pills"); var navClass = pills ? "nav-pills" : "nav-tabs"; // determine the heading level of the tabset and tabs var match = tabset.attr('class').match(/level(\d) /); if (match === null) return; var tabsetLevel = Number(match[1]); var tabLevel = tabsetLevel + 1; // find all subheadings immediately below var tabs = tabset.find("div.section.level" + tabLevel); if (!tabs.length) return; // create tablist and tab-content elements var tabList = $(''); $(tabs[0]).before(tabList); var tabContent = $(''); $(tabs[0]).before(tabContent); // build the tabset var activeTab = 0; tabs.each(function(i) // get the tab div var tab = $(tabs[i]); // get the id then sanitize it for use with bootstrap tabs var id = tab.attr('id'); // see if this is marked as the active tab if (tab.hasClass('active')) activeTab = i; // remove any table of contents entries associated with // this ID (since we'll be removing the heading element) $("div#" + tocID + " li a[href='#" + id + "']").parent().remove(); // sanitize the id for use with bootstrap tabs id = id.replace(/[.\/?&!#]/g, '').replace(/\s/g, '_'); tab.attr('id', id); // get the heading element within it, grab it's text, then remove it var heading = tab.find('h' + tabLevel + ':first'); var headingText = heading.html(); heading.remove(); // build and append the tab list item var a = $('' + headingText + ''); a.attr('href', '#' + id); a.attr('aria-controls', id); var li = $(''); li.append(a); tabList.append(li); // set it's attributes tab.attr('role', 'tabpanel'); tab.addClass('tab-pane'); tab.addClass('tabbed-pane'); if (fade) tab.addClass('fade'); // move it into the tab content div tab.detach().appendTo(tabContent); ); // set active tab $(tabList.children('li')[activeTab]).addClass('active'); var active = $(tabContent.children('div.section')[activeTab]); active.addClass('active'); if (fade) active.addClass('in'); if (tabset.hasClass("tabset-sticky")) tabset.rmarkdownStickyTabs(); // convert section divs with the .tabset class to tabsets var tabsets = $("div.section.tabset"); tabsets.each(function(i) buildTabset($(tabsets[i])); );;window.initializeCodeFolding = function(show) // handlers for show-all and hide all $("#rmd-show-all-code").click(function() $('div.r-code-collapse').each(function() $(this).collapse('show'); ); ); $("#rmd-hide-all-code").click(function() $('div.r-code-collapse').each(function() $(this).collapse('hide'); ); ); // index for unique code element ids var currentIndex = 1; // select all R code blocks var rCodeBlocks = $('pre.r, pre.python, pre.bash, pre.sql, pre.cpp, pre.stan, pre.julia'); rCodeBlocks.each(function() // create a collapsable div to wrap the code in var div = $(''); if (show) div.addClass('in'); var id = 'rcode-643E0F36' + currentIndex++; div.attr('id', id); $(this).before(div); $(this).detach().appendTo(div); // add a show code button right above var showCodeText = $('' + (show ? 'Hide' : 'Code') + ''); var showCodeButton = $(''); showCodeButton.append(showCodeText); showCodeButton .attr('data-toggle', 'collapse') .attr('data-target', '#' + id) .attr('aria-expanded', show) .attr('aria-controls', id); var buttonRow = $(''); var buttonCol = $(''); buttonCol.append(showCodeButton); buttonRow.append(buttonCol); div.before(buttonRow); // update state of button on show/hide div.on('hidden.bs.collapse', function () showCodeText.text('Code'); ); div.on('show.bs.collapse', function () showCodeText.text('Hide'); ); );.pagedtable overflow: auto;padding-left: 8px;padding-right: 8px;.pagedtable-wrapper border: 1px solid #ccc;border-radius: 4px;margin-bottom: 10px;.pagedtable table width: 100%;max-width: 100%;margin: 0;.pagedtable th padding: 0 5px 0 5px;border: none;border-bottom: 2px solid #dddddd;min-width: 45px;.pagedtable-empty th display: none;.pagedtable td padding: 0 4px 0 4px;.pagedtable .even background-color: rgba(140, 140, 140, 0.1);.pagedtable-padding-col display: none;.pagedtable a -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;.pagedtable-index-nav cursor: pointer;padding: 0 5px 0 5px;float: right;border: 0;.pagedtable-index-nav-disabled cursor: default;text-decoration: none;color: #999;a.pagedtable-index-nav-disabled:hover text-decoration: none;color: #999;.pagedtable-indexes cursor: pointer;float: right;border: 0;.pagedtable-index-current cursor: default;text-decoration: none;font-weight: bold;color: #333;border: 0;a.pagedtable-index-current:hover text-decoration: none;font-weight: bold;color: #333;.pagedtable-index width: 30px;display: inline-block;text-align: center;border: 0;.pagedtable-index-separator-left display: inline-block;color: #333;font-size: 9px;padding: 0 0 0 0;cursor: default;.pagedtable-index-separator-right display: inline-block;color: #333;font-size: 9px;padding: 0 4px 0 0;cursor: default;.pagedtable-footer padding-top: 4px;padding-bottom: 5px;.pagedtable-not-empty .pagedtable-footer border-top: 2px solid #dddddd;.pagedtable-info overflow: hidden;color: #999;white-space: nowrap;text-overflow: ellipsis;.pagedtable-header-name overflow: hidden;text-overflow: ellipsis;.pagedtable-header-type color: #999;font-weight: 400;.pagedtable-na-cell font-style: italic;opacity: 0.3;// Production steps of ECMA-262, Edition 5, 15.4.4.18// Reference: (!Array.prototype.forEach) Array.prototype.forEach = function(callback, thisArg) value as the argument. var O = Object(this); // 2. Let lenValue be the result of calling the Get() internal // method of O with the argument "length". // 3. Let len be toUint32(lenValue). var len = O.length >>> 0; // 4. If isCallable(callback) is false, throw a TypeError exception. // See: if (typeof callback !== "function") throw new TypeError(callback + ' is not a function'); // 5. If thisArg was supplied, let T be thisArg; else let // T be undefined. if (arguments.length > 1) T = thisArg; // 6. Let k be 0 k = 0; // 7. Repeat, while k = 0 ? parseInt(value) : null; ; return pages: positiveIntOrNull(options.pages), rows: min: positiveIntOrNull(rows.min), max: positiveIntOrNull(rows.max), total: positiveIntOrNull(rows.total) , columns: min: positiveIntOrNull(columns.min), max: positiveIntOrNull(columns.max), total: positiveIntOrNull(columns.total) ; (source); var Measurer = function() // set some default initial values that will get adjusted in runtime me.measures = padding: 12, character: 8, height: 15, defaults: true ; me.calculate = function(measuresCell) if (!me.measures.defaults) return; var measuresCellStyle = window.getComputedStyle(measuresCell, null); var newPadding = parsePadding(measuresCellStyle.paddingLeft) + parsePadding(measuresCellStyle.paddingRight); var sampleString = "ABCDEFGHIJ0123456789"; var newCharacter = Math.ceil(measuresCell.clientWidth / sampleString.length); if (newPadding pageCount) var diffToEnd = end - pageCount; start -= diffToEnd; end -= diffToEnd; start = start = pageCount ? pageCount : end; var first = false; var last = false; if (start > 0 && me.visible > 1) start = start + 1; first = true; if (end 2) end = end - 1; last = true; return first: first, start: start, end: end, last: last ; ; me.getRowStart = function() var rowStart = page.number * page.rows; if (rowStart me.rows ? me.rows - (rowEnd - rowStart) : 0; ; ; var Columns = function(data, columns, options) var me = this; me.defaults = min: 5 ; me.number = 0; me.visible = 0; me.total = columns.length; me.subset = []; me.padding = 0; me.min = options.columns.min !== null ? options.columns.min : me.defaults.min; me.max = options.columns.max !== null ? options.columns.max : null; me.widths = ; var widthsLookAhead = Math.max(100, options.rows.min); var paddingColChars = 10; me.emptyNames = function() columns.forEach(function(column) if (columns.label !== null && columns.label !== "") return false; ); return true; ; var parsePadding = function(value) return parseInt(value) >= 0 ? parseInt(value) : 0; ; me.calculateWidths = function(measures) columns.forEach(function(column) var maxChars = Math.max( column.label.toString().length, column.type.toString().length ); for (var idxRow = 0; idxRow = me.total) me.number = me.total - me.visible; if (me.number 0; ; me.hasMoreRightColumns = function() return me.number + me.visible 0 ? Math.min(columnMax, parseInt(width)) + "px" : columnMax + "px"; ; var clearHeader = function() var thead = pagedTable.querySelectorAll("thead")[0]; thead.innerHTML = ""; ; var renderHeader = function(clear) ; me.animateColumns = function(backwards) var thead = pagedTable.querySelectorAll("thead")[0]; var headerOld = thead.querySelectorAll("tr")[0]; var tbodyOld = table.querySelectorAll("tbody")[0]; me.fitColumns(backwards); renderHeader(false); header.style.opacity = "0"; header.style.transform = backwards ? "translateX(-30px)" : "translateX(30px)"; header.style.transition = "transform 200ms linear, opacity 200ms"; header.style.transitionDelay = "0"; renderBody(false); if (headerOld) headerOld.style.position = "absolute"; headerOld.style.transform = "translateX(0px)"; headerOld.style.opacity = "1"; headerOld.style.transition = "transform 100ms linear, opacity 100ms"; headerOld.setAttribute("class", "pagedtable-remove-head"); if (headerOld.style.transitionEnd) headerOld.addEventListener("transitionend", function() var headerOldByClass = thead.querySelector(".pagedtable-remove-head"); if (headerOldByClass) thead.removeChild(headerOldByClass); ); else thead.removeChild(headerOld); if (tbodyOld) table.removeChild(tbodyOld); tbody.style.opacity = "0"; tbody.style.transition = "transform 200ms linear, opacity 200ms"; tbody.style.transitionDelay = "0ms"; // force relayout window.getComputedStyle(header).opacity; window.getComputedStyle(tbody).opacity; if (headerOld) headerOld.style.transform = backwards ? "translateX(20px)" : "translateX(-30px)"; headerOld.style.opacity = "0"; header.style.transform = "translateX(0px)"; header.style.opacity = "1"; tbody.style.opacity = "1"; me.onChange = function(callback) onChangeCallbacks.push(callback); ; var triggerOnChange = function() onChangeCallbacks.forEach(function(onChange) onChange(); ); ; var clearBody = function() if (tbody) table.removeChild(tbody); tbody = null; ; var renderBody = function(clear) ; var getLabelInfo = function() var pageStart = page.getRowStart(); var pageEnd = page.getRowEnd(); var totalRows = data.length; var totalRowsLabel = options.rows.total ? options.rows.total : totalRows; var totalRowsLabelFormat = totalRowsLabel.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); var infoText = (pageStart + 1) + "-" + pageEnd + " of " + totalRowsLabelFormat + " rows"; if (totalRows columns.visible) " + (columns.number + 1) + "-" + (Math.min(columns.number + columns.visible, columns.total)) + " of " + totalColumnsLabel + " columns"; return infoText; ; var clearFooter = function() footer = pagedTable.querySelectorAll("div.pagedtable-footer")[0]; footer.innerHTML = ""; return footer; ; var createPageLink = function(idxPage) var pageLink = document.createElement("a"); pageLinkClass = idxPage === page.number ? "pagedtable-index pagedtable-index-current" : "pagedtable-index"; pageLink.setAttribute("class", pageLinkClass); pageLink.setAttribute("data-page-index", idxPage); pageLink.onclick = function() page.setPageNumber(parseInt(this.getAttribute("data-page-index"))); renderBody(); renderFooter(); triggerOnChange(); ; pageLink.appendChild(document.createTextNode(idxPage + 1)); return pageLink; var renderFooter = function() footer = clearFooter(); var next = document.createElement("a"); next.appendChild(document.createTextNode("Next")); next.onclick = function() page.setPageNumber(page.number + 1); renderBody(); renderFooter(); triggerOnChange(); ; if (data.length > page.rows) footer.appendChild(next); var pageNumbers = document.createElement("div"); pageNumbers.setAttribute("class", "pagedtable-indexes"); var pageRange = page.getVisiblePageRange(); if (pageRange.first) var pageLink = createPageLink(0); pageNumbers.appendChild(pageLink); var pageSeparator = document.createElement("div"); pageSeparator.setAttribute("class", "pagedtable-index-separator-left"); pageSeparator.appendChild(document.createTextNode("...")) pageNumbers.appendChild(pageSeparator); for (var idxPage = pageRange.start; idxPage page.rows) footer.appendChild(pageNumbers); var previous = document.createElement("a"); previous.appendChild(document.createTextNode("Previous")); previous.onclick = function() page.setPageNumber(page.number - 1); renderBody(); renderFooter(); triggerOnChange(); ; if (data.length > page.rows) footer.appendChild(previous); var infoLabel = document.createElement("div"); infoLabel.setAttribute("class", "pagedtable-info"); infoLabel.setAttribute("title", getLabelInfo()); infoLabel.appendChild(document.createTextNode(getLabelInfo())); footer.appendChild(infoLabel); var enabledClass = "pagedtable-index-nav"; var disabledClass = "pagedtable-index-nav pagedtable-index-nav-disabled"; previous.setAttribute("class", page.number = data.length ? disabledClass : enabledClass); ; var measuresCell = null; var renderMeasures = function() var measuresTable = document.createElement("table"); measuresTable.style.visibility = "hidden"; measuresTable.style.position = "absolute"; measuresTable.style.whiteSpace = "nowrap"; measuresTable.style.height = "auto"; measuresTable.style.width = "auto"; var measuresRow = document.createElement("tr"); measuresTable.appendChild(measuresRow); measuresCell = document.createElement("td"); var sampleString = "ABCDEFGHIJ0123456789"; measuresCell.appendChild(document.createTextNode(sampleString)); measuresRow.appendChild(measuresCell); tableDiv.appendChild(measuresTable); me.init = function() // The goal of this function is to add as many columns as possible // starting from left-to-right, when the right most limit is reached // it tries to add columns from the left as well. // // When startBackwards is true columns are added from right-to-left me.fitColumns = function(startBackwards) { measurer.calculate(measuresCell); columns.calculateWidths(measurer.measures); if (tableDiv.clientWidth > 0) tableDiv.style.opacity = 1; var visibleColumns = tableDiv.clientWidth 2ff7e9595c


0 views0 comments

Recent Posts

See All

コメント


bottom of page