+
+
+
+
+
+
+
-
-
Scraping...
-
-
- Copy to clipboard
-
+
+ Ending year:
+
+ select a year
+ 2022
+ 2021
+ 2020
+ 2019
+ 2018
+ 2017
+ 2016
+ 2015
+ 2014
+ 2013
+ 2012
+ 2011
+ 2010
+ 2009
+ 2008
+ 2007
+ 2006
+ 2005
+ 2004
+ 2003
+ 2002
+ 2001
+ 2000
+ 1999
+ 1998
+ 1997
+ 1996
+ 1995
+ 1994
+ 1993
+ 1992
+ 1991
+ 1990
+ 1989
+ 1988
+ 1987
+ 1986
+ 1985
+ 1984
+ 1983
+ 1982
+ 1981
+ 1980
+ 1979
+ 1978
+ 1977
+ 1976
+ 1975
+ 1974
+ 1973
+ 1972
+ 1971
+ 1970
+ 1969
+ 1968
+ 1967
+ 1966
+ 1965
+ 1964
+ 1963
+ 1962
+ 1961
+ 1960
+ 1959
+ 1958
+ 1957
+ 1956
+
+
+
Submit
+
+
+
+
+ {
+
+
+
+
-
-
+
+ }
+
+
+
+
Scraping...
+
+
+ Copy to clipboard
+
+
+ Scrape another!
+
+
+
+
+
+
diff --git a/main.js b/main.js
index 73cf3a0..14d7a1b 100644
--- a/main.js
+++ b/main.js
@@ -1,20 +1,21 @@
var startDate = 1956; // first year a transfer fee was recorded on transfermarkt.com
var endDate = new Date().getFullYear(); // current Year
var getUrl = "https://www.transfermarkt.com/transfers/transferrekorde/statistik/top/saison_id/"; // ADD Year after saison_id/
-function ajaxCall(iterate){
+function ajaxCall(startyear, endyear){
$.ajax({
- url: getUrl + iterate,
+ url: getUrl + startyear,
type: 'GET',
beforeSend: function() {
$(".copy .loadingScrape").addClass("visible");
+ $(".form").removeClass("visible");
},
complete: function() {
},
success: function(data) {
- var currentYearString = '"'+iterate+'"';
- $(".json").append('
'+currentYearString+': [
');
- $(".json").append('
');
+ var currentYearString = '"'+startyear+'"';
+ $(".json").append('
'+currentYearString+': [
');
+ $(".json").append('
');
var tableRows = $(data).find(".items>tbody>tr");
tableRows.each(function() {
var rank = $(this).find(">td:first-of-type").text(); // get rank within year
@@ -82,13 +83,13 @@ function ajaxCall(iterate){
transferHistoryLink: "https://www.transfermarkt.com" + transferHistoryLink
};
var playerJSON = JSON.stringify(playerObj); // object to JSON
- $("."+iterate+".before").append("
"+playerJSON+"
"); // parse json to browser
+ $("."+startyear+".before").append("
"+playerJSON+"
"); // parse json to browser
});
- $("."+iterate+".after").append("
], ");
+ $("."+startyear+".after").append("
], ");
- if(iterate++ < endDate) {
+ if(startyear++ < endyear) {
$(".loadingScrape").removeClass("visible");
- ajaxCall(iterate);
+ ajaxCall(startyear);
}
else {
$(".loadingScrape").removeClass("visible");
@@ -98,6 +99,7 @@ function ajaxCall(iterate){
completeJSON = JSON.parse(completeJSON);
completeJSON = JSON.stringify(completeJSON, undefined, 2);
jsonoutput(syntaxHighlight(completeJSON));
+ $(".copy").addClass("visible");
$(".copy").prepend('
Scraping done! ');
$(".copy button").addClass("visible");
$("#copy").addClass("visible");
@@ -108,14 +110,37 @@ function ajaxCall(iterate){
}
});
}
-ajaxCall(startDate);
+function scrape() {
+ $(".form span").remove();
+ var startSelect = document.getElementById("startyear");
+ var endSelect = document.getElementById("endyear");
+ var startValue = startSelect.options[startSelect.selectedIndex].value;
+ var endValue = endSelect.options[endSelect.selectedIndex].value;
+ if(!startValue) {
+ $('
Error: Please select a starting year. ').insertBefore("#submitButton");
+ }
+ else if(!endValue) {
+ $('
Error: Please select an ending year. ').insertBefore("#submitButton");
+ }
+ else if(startValue > endValue) {
+ $('
Error: The starting year must be lower than the ending year. ').insertBefore("#submitButton");
+ }
+ else {
+ ajaxCall(startValue, endValue);
+ }
+}
function copyFunction() {
$("#copy").select();
document.execCommand("copy");
alert("Copied to clipboard!");
}
-
+function scrapeReset() {
+ $(".copy pre").empty();
+ $(".copy .doneScrape").remove();
+ $(".copy, .copy pre, .copy button").removeClass("visible");
+ $(".form").addClass("visible");
+}
function jsonoutput(input) {
document.getElementById("copy").innerHTML = input;
}
diff --git a/selectbox.js b/selectbox.js
new file mode 100644
index 0000000..315567e
--- /dev/null
+++ b/selectbox.js
@@ -0,0 +1,49 @@
+/*
+Reference: http://jsfiddle.net/BB3JK/47/
+*/
+
+$('select').each(function(){
+ var $this = $(this), numberOfOptions = $(this).children('option').length;
+
+ $this.addClass('select-hidden');
+ $this.wrap('
');
+ $this.after('
');
+
+ var $styledSelect = $this.next('div.select-styled');
+ $styledSelect.text($this.children('option').eq(0).text());
+
+ var $list = $('
', {
+ 'class': 'select-options'
+ }).insertAfter($styledSelect);
+
+ for (var i = 0; i < numberOfOptions; i++) {
+ $('
', {
+ text: $this.children('option').eq(i).text(),
+ rel: $this.children('option').eq(i).val()
+ }).appendTo($list);
+ }
+
+ var $listItems = $list.children('li');
+
+ $styledSelect.click(function(e) {
+ e.stopPropagation();
+ $('div.select-styled.active').not(this).each(function(){
+ $(this).removeClass('active').next('ul.select-options').hide();
+ });
+ $(this).toggleClass('active').next('ul.select-options').toggle();
+ });
+
+ $listItems.click(function(e) {
+ e.stopPropagation();
+ $styledSelect.text($(this).text()).removeClass('active');
+ $this.val($(this).attr('rel'));
+ $list.hide();
+ //console.log($this.val());
+ });
+
+ $(document).click(function() {
+ $styledSelect.removeClass('active');
+ $list.hide();
+ });
+
+});
diff --git a/style.css b/style.css
index c742016..fb69c6e 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,12 @@ html {
background-color: #252525;
color: #fff;
font-size: 16px;
+ margin: 0;
+ padding: 0;
+}
+body {
+ margin: 0;
+ padding: 0;
}
::selection {
background: #e03100;
@@ -12,10 +18,6 @@ html {
background: #e03100;
color: #fff;
}
-body>*{
- display: none !important;
- visibility: hidden !important;
-}
.table {
display: none !important;
visibility: hidden !important;
@@ -23,6 +25,11 @@ body>*{
.copy {
display: block !important;
visibility: visible !important;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ z-index: 0;
}
.loadingScrape {
opacity: 0;
@@ -41,11 +48,6 @@ body>*{
-ms-animation: text-snake 1s infinite alternate;
animation: text-snake 1s infinite alternate;
}
-.visible {
- opacity: 1;
- visibility: visible;
- transition: all ease-in-out 1.5s;
-}
.doneScrape {
color: #fff;
text-align: center;
@@ -132,3 +134,114 @@ button:hover {
-16px 16px 2px rgba(0,0,0,0.7);
}
}
+.form-control {
+ display: block;
+ margin-bottom: 10px;
+}
+.form-control label {
+ display: block;
+ margin-bottom: 10px;
+}
+.form {
+ text-align: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: all ease-in-out 1.5s;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+}
+.visible {
+ opacity: 1;
+ visibility: visible;
+ transition: all ease-in-out 1.5s;
+ z-index: 99;
+}
+/* Selectboxes */
+.select-hidden {
+ display: none;
+ visibility: hidden;
+ padding-right: 10px;
+}
+
+.select {
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ font-size: 16px;
+ color: #fff;
+ width: 220px;
+ height: 40px;
+}
+
+.select-styled {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #284cff;
+ filter: hue-rotate(140deg);
+ padding: 8px 15px;
+ -moz-transition: all 0.2s ease-in;
+ -o-transition: all 0.2s ease-in;
+ -webkit-transition: all 0.2s ease-in;
+ transition: all 0.2s ease-in;
+}
+.select-styled:after {
+ content: "";
+ width: 0;
+ height: 0;
+ border: 7px solid transparent;
+ border-color: #fff transparent transparent transparent;
+ position: absolute;
+ top: 16px;
+ right: 10px;
+}
+.select-styled:hover {
+ background-color: #252525;
+ filter: hue-rotate(0deg);
+}
+.select-styled:active, .select-styled.active {
+ background-color: #252525;
+ filter: hue-rotate(0deg);
+}
+.select-styled:active:after, .select-styled.active:after {
+ top: 9px;
+ border-color: transparent transparent #fff transparent;
+}
+
+.select-options {
+ display: none;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ left: 0;
+ z-index: 999;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background-color: #284cff;
+ filter: hue-rotate(140deg);
+ max-height: 35vh;
+ overflow-y: scroll;
+}
+.select-options li {
+ margin: 0;
+ padding: 12px 0;
+ text-indent: 15px;
+ border-top: 1px solid #252525;
+ -moz-transition: all 0.15s ease-in;
+ -o-transition: all 0.15s ease-in;
+ -webkit-transition: all 0.15s ease-in;
+ transition: all 0.15s ease-in;
+}
+.select-options li:hover {
+ color: #c0392b;
+ background: #fff;
+}
+.select-options li[rel="hide"] {
+ display: none;
+}