How to Make Dropdown Button
Task To implement a dropdown box with different citation source, description at [Issue #83](PR #521 PR #521 Steps Create dropdown in bootstrap way <div id="dataset-block-wrapper"> <div id="dropdown-div"> <div class="dropdown-box"> <button id="CiteDataset" class="drop-citation-btn dropdown-toggle" type="button" data-toggle="dropdown">Cite Dataset<span class="caret"></span></button> <?php $text = file_get_contents('https://data.datacite.org/text/x-bibliography/10.5524/' . $model->identifier); $clean_text = strip_tags(preg_replace("/&#?[a-z0-9]+;/i", "", $text)); ?> <script> function showText() { var textWindow = window.open(); textWindow.document.write(`<?php echo $clean_text; ?>`); } </script> <ul class="dropdown-menu" aria-labelledby="CiteDataset"> <li><a id="Text" onclick="showText()" target="_blank">Text</a></li> <li><a id="citeRis" href='https://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a></li> <li><a id="citeBibTeX" href='https://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a></li> </ul> </div> </div> </div> Create dropdown in javascript way <div id="dropdown-div"> <div> <a id="CiteDataset" onclick="showCitation()" class="drop-citation-btn" >Cite Dataset<span class="caret"></span></a> <div id="citationDropdown" class="citation-content"> <?php $text = file_get_contents('https://data.datacite.org/text/x-bibliography/10.5524/' . $model->identifier); $clean_text = strip_tags(preg_replace("/&#?[a-z0-9]+;/i", "", $text)); textWindow.document.write(`<?php echo $clean_text; ?>`); </script> <ul> <li><a id="Text" onclick="showText()" target="_blank">Text</a></li> <li><a id="citeRis" href='https://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a></li> <li><a id="citeBibTeX" href='https://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a></li> </ul> </div> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function showCitation() { document.getElementById("citationDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.drop-citation-btn')) { var dropdowns = document.getElementsByClassName("citation-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } //Write the clean text to a new window function showText() { var text = `<?php echo $clean_text; ?>` console.log(text); var textWindow = window.open(); textWindow.document.write(text); } </script> Thoughts Since html comes with bootstrap with default dropdown features, it is better use it, as it is cleaner and less code. But good to know how to implement dropdown in javascript Pass the acceptance test /** * @Then I go to new tab and should see :arg1 */ public function iGoToNewTabAndShouldSee($arg1) { $session = $this->minkContext->getSession(); $numberOfTab = $session->getWindowNames(); if (sizeof($numberOfTab) < 2) { print ("Expected to see at least 2 windows opened."); exit; } $session->switchToWindow($numberOfTab[1]); PHPUnit_Framework_Assert::assertTrue($session->getPage()->hasContent($arg1)); } /** * @When I click :arg1 * To trigger onclick event */ public function iClick($arg1) { $element = $this->minkContext->getSession()->getPage()->find('css', "a[id='$arg1']" ); $element->click(); } @ok @javascript @citation-box Scenario: To see the citation box and and the citation source Given I am not logged in to Gigadb web site And I am on "/dataset/101001" When I press "Cite Dataset" Then I should see "Text" And I should see "RIS" And I should see "BibTeX" @ok @javascript @citation-box Scenario: To show the citation text from CrossCite after clicking the Formatted Text button in the citation box Given I am not logged in to Gigadb web site And I am on "/dataset/101001" And I press "Cite Dataset" When I click "Text" Then I go to new tab and should see "Huang, Y., Li, Y., Burt, D. W., Chen, H., Zhang, Y., Qian, W., Kim, H., Gan, S., Zhao, Y., Li, J., Yi, K., Feng, H., Zhu, P., Li, B., Liu, Q., Fairley, S., Magor, K. E., Du, Z., Hu, X., … Li, N. (2013). Genome sequence of the duck (Anas platyrhynchos) [Data set]. GigaScience Database. https://doi.org/10.5524/101001" @ok @javascript @citation-box Scenario: To get RIS file after clicking the RIS in the citation box Given I am not logged in to Gigadb web site And I am on "/dataset/101001" And I press "Cite Dataset" When I click on the "RIS" button Then the response should contain "101001" # 200: the request completed successfully And the response should contain "200" @ok @javascript @citation-box Scenario: To get BibTeX file after clicking the BibTeX in the citation box Given I am not logged in to Gigadb web site And I am on "/dataset/101001" And I press "Cite Dataset" When I click on the "BibTeX" button Then the response should contain "101001" # 200: the request completed successfully And the response should contain "200" Reference What is Tabnabbing? How to solve it? here ...