Learn JavaScript, FCC API, FCC CSS, FCC Clean Code, YouTube Todo Done Merged PR Add-guidelines-to-dataset-#494 Complete Behat test for PR View files from large db #437 Changed the browser to headless chrome, pressing a button then work. Using xpath variable, Return key was simulated Reference
Problem To add a go to page feature in navigating file table. Details refer to this issue View files from large db #437 How Create a Go to page button match the button style with the whole webpage create btn_click class for this onclick button create input box for number, and assign id=pageTarget <style> .btn_click { border: solid 1px #0eb23c; color: #0fad59; padding: 4px 6px 3px 6px; text-decoration: none; background-color: Transparent; outline:none; } input { width: 3%; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .text_box { color: #0fad59; background: #fff; border: solid 1px #0eb23c; outline:none; } </style> <button class="btn_click" onclick="goToPage()"><strong>Go to page</strong></button> <input type="number" id="pageTarget" class="text_box"> <a class="color-background"><strong> of <?= $files->getDataProvider()->getPagination()->getPageCount()?></strong></a> Create a goToPage() function in JavaScript document.getElementById('pageTarget').value gets the value of the input box <?php echo $model->identifier?> gets the paper ID number <?php echo $files->getDataProvider()->getPagination()->getPageCount()?> gets the max page count some requirements: disable input box arrows when userInput > max, return to max when userInput < min, return to min window.location.pathname will get current page url, will crash when go to page 2 and then press 1 so to create an array with default values: let targetUrlArray = ["", "dataset", "view", "id", pageID]; function goToPage() { var targetPageNumber = document.getElementById('pageTarget').value; var pageID = <?php echo $model->identifier?>; //To validate page number var userInput = parseInt(targetPageNumber); var max = <?php echo $files->getDataProvider()->getPagination()->getPageCount() ?>; //To output total pages // console.log(max); var min = 1; if (userInput >= min && userInput <= max) { console.log("Valid page number!"); }else if (userInput > max) { targetPageNumber = max; console.log("Error, return to " + max); } else if (userInput < min) { targetPageNumber = min; console.log("Error, return to " + min); } // var targetUrlArray = Array.apply(null, Array(5)).map(function(_,i) { return window.location.pathname.split("/")[i]});] // Create array with default values let targetUrlArray = ["", "dataset", "view", "id", pageID]; targetUrlArray.push('Files_page', targetPageNumber); window.location = window.location.origin + targetUrlArray.join("/"); // Uncomment will show the target url in console. // console.log(window.location.origin + targetUrlArray.join("/")) } Behat test PhantomJS has been discontinued, so it cannot simulate pressing action on Go to page button. In order to do so, behat.yml and docker-compose.yml need to be updated. ...
Learn Clean Code, YouTube JavaScript, FCC Todo Complete Behat test for PR View files from large db #437 Done PR Add-guidelines-to-dataset-#494 Reference
Learn Clean Code, YouTube JavaScript, FCC Todo Done PR View files from large db #437 Need further instruction Issue Replace unicode character #276 Issue Fix-truncated0image-source-#443 Reference