-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6d66bde
commit 65c1d63
Showing
6 changed files
with
174 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| <style> | ||
| .quick-start { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: nowrap; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .title-column { | ||
| flex-grow: 0; | ||
| } | ||
|
|
||
| .content-column { | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| .row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: nowrap; | ||
| } | ||
|
|
||
| .title-column div, .row div { | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .title-column div { | ||
| padding: 14px 10px 12px 0; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .row div { | ||
| flex-grow: 1; | ||
| text-align: center; | ||
| margin: 2px; | ||
| padding: 12px 0 10px 0; | ||
| background: #e3e3e3; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .row div.selected { | ||
| background: rgba(59,155,239,0.7); | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| #command { | ||
| margin: 2px; | ||
| padding: 12px 10px 10px 10px; | ||
| } | ||
|
|
||
| #command pre { | ||
| padding: 0; | ||
| margin: 0; | ||
| white-space: pre-wrap; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="quick-start"> | ||
| <div class="title-column"> | ||
| <div>OS</div> | ||
| <div>Package</div> | ||
| <div>Run:</div> | ||
| </div> | ||
| <div class="content-column"> | ||
| <div class="row" id="os"> | ||
| <div id="linux">Linux</div> | ||
| <div id="osx">OSX</div> | ||
| <div id="arm">OSX-ARM</div> | ||
| <div id="win">Windows</div> | ||
| </div> | ||
| <div class="row" id="package"> | ||
| <div id="conda">Conda</div> | ||
| <div id="pip">Pip</div> | ||
| </div> | ||
| <div class="row" id="command"> | ||
| <pre id="commandText">Command</pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script type="text/javascript"> | ||
| function updateCommand() { | ||
| // Get the attributes from the #command element | ||
| var commandElement = document.getElementById("command"); | ||
| var os = commandElement.getAttribute("os"); | ||
| var package = commandElement.getAttribute("package"); | ||
|
|
||
| // Get the <pre> element inside the #command element | ||
| var preElement = commandElement.querySelector("pre"); | ||
|
|
||
| // Update the text based on the conditions | ||
| if (package === "pip") { | ||
| preElement.textContent = '# datasail is not yet available on pip'; | ||
| } | ||
| else if (os === "linux" || os === "osx") { | ||
| preElement.textContent = 'mamba install -c conda-force -c bioconda -c kalininalab datasail # or datasail-lite\n\npip install grakel<0.1.10'; | ||
| } | ||
| else { | ||
| preElement.textContent = `mamba install -c conda-force -c bioconda -c kalininalab datasail-lite\n\npip install grakel<0.1.10`; | ||
| } | ||
| } | ||
|
|
||
| document.querySelectorAll(".quick-start .content-column .row div").forEach(function(element) { | ||
| element.addEventListener("click", function() { | ||
| // Remove the 'selected' class from all siblings | ||
| let siblings = this.parentNode.querySelectorAll('div'); | ||
| siblings.forEach(function(sibling) { | ||
| sibling.classList.remove('selected'); | ||
| }); | ||
|
|
||
| // Add the 'selected' class to the clicked element | ||
| this.classList.add('selected'); | ||
|
|
||
| // Get the parent row's id and the clicked element's id | ||
| let parentId = this.parentNode.id; | ||
| let elementId = this.id; | ||
|
|
||
| // Set the corresponding attribute on the #command element | ||
| document.getElementById("command").setAttribute(parentId, elementId); | ||
|
|
||
| // Call the updateCommand function | ||
| updateCommand(); | ||
| }); | ||
| }); | ||
|
|
||
| document.getElementById("os").children[0].click(); | ||
| document.getElementById("package").children[0].click(); | ||
| </script> |