From 199b053fa3802099ee1037946ff7c9c8e3a071b7 Mon Sep 17 00:00:00 2001
From: nnouns <lokaiya@gmail.com>
Date: Tue, 25 Apr 2017 15:50:52 -0400
Subject: [PATCH 1/3] added avatar_remote_url method and wrote temp avatar
 scrape task

---
 app/models/player.rb                 |  9 ++++++++
 lib/tasks/scrape_player_avatars.rake | 34 ++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 lib/tasks/scrape_player_avatars.rake

diff --git a/app/models/player.rb b/app/models/player.rb
index 49c03a2..59b309d 100644
--- a/app/models/player.rb
+++ b/app/models/player.rb
@@ -38,4 +38,13 @@ def strip_nationality
 			self.save
 		end
 	end
+
+    # avatar methods
+    def avatar_remote_url=(url_value)
+        if url_value.present?
+            self.avatar = URI.parse(url_value)
+            @avatar_remote_url = url_value
+        end
+    end
+    
 end
\ No newline at end of file
diff --git a/lib/tasks/scrape_player_avatars.rake b/lib/tasks/scrape_player_avatars.rake
new file mode 100644
index 0000000..a6466f3
--- /dev/null
+++ b/lib/tasks/scrape_player_avatars.rake
@@ -0,0 +1,34 @@
+namespace :app do
+	task :scrape_player_avatars => :environment do
+		require 'nokogiri'
+		require 'open-uri'
+		require 'resolv'
+		require 'resolv-replace'
+
+		url_base = 'http://www.transfermarkt.com'
+
+		club_players = Player.all
+
+		start = Time.now
+
+		puts "Number of avatars to update: " + club_players.count.to_s
+
+		club_players.each_with_index do |player, i|
+
+			url = url_base + player.profile_link
+			doc = Nokogiri::HTML(open(url))
+
+			avatar_url = doc.at_css('.dataBild>img').attributes["src"].value
+            avatar_url.prepend("http:")
+
+            player.avatar_remote_url=(avatar_url)
+            player.save!
+
+			print "\rNumber of players birthplaces updated: #{i + 1}" 
+		end
+
+		finish = Time.now
+
+		puts "\nIt took #{finish - start} seconds to get all player avatars"
+	end
+end

From a6873c8716b3b57bfd4d1488cc4f76b40703b1d4 Mon Sep 17 00:00:00 2001
From: nnouns <lokaiya@gmail.com>
Date: Tue, 25 Apr 2017 15:50:52 -0400
Subject: [PATCH 2/3] modified scrape_player_avatars task to use threading

---
 lib/tasks/scrape_player_avatars.rake | 47 ++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/lib/tasks/scrape_player_avatars.rake b/lib/tasks/scrape_player_avatars.rake
index a6466f3..53e24c5 100644
--- a/lib/tasks/scrape_player_avatars.rake
+++ b/lib/tasks/scrape_player_avatars.rake
@@ -1,7 +1,10 @@
+# scrapes all players in database... arguments coming soon
+
 namespace :app do
 	task :scrape_player_avatars => :environment do
 		require 'nokogiri'
 		require 'open-uri'
+        require 'thread'
 		require 'resolv'
 		require 'resolv-replace'
 
@@ -13,19 +16,37 @@ namespace :app do
 
 		puts "Number of avatars to update: " + club_players.count.to_s
 
-		club_players.each_with_index do |player, i|
-
-			url = url_base + player.profile_link
-			doc = Nokogiri::HTML(open(url))
-
-			avatar_url = doc.at_css('.dataBild>img').attributes["src"].value
-            avatar_url.prepend("http:")
-
-            player.avatar_remote_url=(avatar_url)
-            player.save!
-
-			print "\rNumber of players birthplaces updated: #{i + 1}" 
-		end
+        work_q = Queue.new
+        club_players.each {|player| work_q << player}
+
+        i = 0
+        workers = (0..4).map do
+            Thread.new do
+                begin
+                    while player = work_q.pop(true)
+                        begin
+                            doc = Nokogiri::HTML(open(url_base + player.profile_link))
+
+                            avatar_url = doc.at_css('.dataBild>img').attributes["src"].value
+                            avatar_url.prepend("http:")
+
+                            player.avatar_remote_url=(avatar_url)
+                            player.save!
+                           
+                            print "\rNumber of players birthplaces updated: #{i + 1}" 
+                            i = i+1
+                            
+                        rescue => e
+                            puts "problem at #{profile_url}"
+                            puts e.inspect
+                        end
+                        
+                    end
+                rescue ThreadError
+                end
+            end
+        end
+        workers.map(&:join)
 
 		finish = Time.now
 

From 204422085f4b9c9389f250eed61a596eb8205fb8 Mon Sep 17 00:00:00 2001
From: nnouns <lokaiya@gmail.com>
Date: Wed, 17 May 2017 19:46:39 -0400
Subject: [PATCH 3/3] added zoom functionality

shout out to wunderbart: https://jsfiddle.net/wunderbart/Lom3b0gb/
---
 app/assets/stylesheets/index.css  |   6 +-
 app/views/landings/index.html.erb | 267 ++++++++++++++++++++++++++----
 2 files changed, 235 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
index f69c102..817c378 100644
--- a/app/assets/stylesheets/index.css
+++ b/app/assets/stylesheets/index.css
@@ -1,7 +1,9 @@
 #container {
-    height: 100%;
-    width: 100%;
+    overflow: hidden;
     position: relative;
+    margin: auto;
+    height: 90vh;
+    width: 90vw;
 }
 
 #get_club_name {
diff --git a/app/views/landings/index.html.erb b/app/views/landings/index.html.erb
index 8092120..e6fe902 100644
--- a/app/views/landings/index.html.erb
+++ b/app/views/landings/index.html.erb
@@ -2,47 +2,242 @@
   <head>
     <%= stylesheet_link_tag 'application' %>
 
-    <div id="container">
-      <%= select("get", "club_name", Club.all.collect {|p| [ p.name ] }, {include_blank: 'Select club:'}) %>
+    <div id="container" style="">
     </div>
 
+    <%= select("get", "club_name", Club.all.collect {|p| [ p.name ] }, {include_blank: 'Select club:'}) %>
     <script>
-      var map = new Datamap({
-        scope: 'world',
-        element: document.getElementById('container'),
-        projection: 'mercator',
-        height: null,
-        width: null,
-        responsive: true,
-        fills: {
-          defaultFill: '#C4C4C4',
-          playerFill: '#38003c'
-        },
-        geographyConfig:{
-          hideAntarctica: null,
-          highlightFillColor: '#e90052',
-          popupTemplate: function(geography,data){
-            return '<div class="country_info" id="country_info">' + geography.properties.name + '</strong></div>';
-          }
-        },
-        bubblesConfig: {
-          borderWidth: 0,
-          popupTemplate: function(geography,data){
-
-            // catches players with place_of_birth stripped
-            if (data.place_of_birth === "") {
-              data.place_of_birth = "No information";
-            };
-            
-            return '<div class="player_info" id="player_info"><strong>' + data.name + '</strong><br><i>' + data.place_of_birth + '</i></div>';
-          },
-          highlightFillColor: '#e90052'
+        function Zoom(args) {
+            $.extend(this, {
+                $buttons:   $(".zoom-button"),
+                $info:      $("#zoom-info"),
+                scale:      { max: 50, currentShift: 0 },
+                $container: args.$container,
+                datamap:    args.datamap
+            });
+
+            this.init();
+        }
+
+        Zoom.prototype.init = function() {
+            var paths = this.datamap.svg.selectAll("path"),
+                subunits = this.datamap.svg.selectAll(".datamaps-subunit");
+
+            // preserve stroke thickness
+            paths.style("vector-effect", "non-scaling-stroke");
+
+            // disable click on drag end
+            subunits.call(
+                d3.behavior.drag().on("dragend", function() {
+                d3.event.sourceEvent.stopPropagation();
+                })
+            );
+
+            this.scale.set = this._getScalesArray();
+            this.d3Zoom = d3.behavior.zoom().scaleExtent([ 1, this.scale.max ]);
+
+            this._displayPercentage(1);
+            this.listen();
+        };
+
+        Zoom.prototype.listen = function() {
+            this.$buttons.off("click").on("click", this._handleClick.bind(this));
+
+            this.datamap.svg
+                .call(this.d3Zoom.on("zoom", this._handleScroll.bind(this)))
+                .on("dblclick.zoom", null); // disable zoom on double-click
+        };
+
+        Zoom.prototype.reset = function() {
+            this._shift("reset");
+        };
+
+        Zoom.prototype._handleScroll = function() {
+            var translate = d3.event.translate,
+                scale = d3.event.scale,
+                limited = this._bound(translate, scale);
+
+            this.scrolled = true;
+
+            this._update(limited.translate, limited.scale);
+        };
+
+        Zoom.prototype._handleClick = function(event) {
+            var direction = $(event.target).data("zoom");
+
+            this._shift(direction);
+        };
+
+        Zoom.prototype._shift = function(direction) {
+            var center = [ this.$container.width() / 2, this.$container.height() / 2 ],
+                translate = this.d3Zoom.translate(), translate0 = [], l = [],
+                view = {
+                    x: translate[0],
+                    y: translate[1],
+                    k: this.d3Zoom.scale()
+                }, bounded;
+
+            translate0 = [
+                (center[0] - view.x) / view.k,
+                (center[1] - view.y) / view.k
+            ];
+
+                if (direction == "reset") {
+                view.k = 1;
+                this.scrolled = true;
+            } else {
+                view.k = this._getNextScale(direction);
+            }
+
+            l = [ translate0[0] * view.k + view.x, translate0[1] * view.k + view.y ];
+
+            view.x += center[0] - l[0];
+            view.y += center[1] - l[1];
+
+            bounded = this._bound([ view.x, view.y ], view.k);
+
+            this._animate(bounded.translate, bounded.scale);
+        };
+
+        Zoom.prototype._bound = function(translate, scale) {
+            var width = this.$container.width(),
+                height = this.$container.height();
+
+            translate[0] = Math.min(
+                (width / height)  * (scale - 1),
+                Math.max( width * (1 - scale), translate[0] )
+            );
+
+            translate[1] = Math.min(0, Math.max(height * (1 - scale), translate[1]));
+
+            return { translate: translate, scale: scale };
+        };
+
+        Zoom.prototype._update = function(translate, scale) {
+            this.d3Zoom
+                .translate(translate)
+                .scale(scale);
+
+            this.datamap.svg.selectAll("g")
+                .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
+
+            this._displayPercentage(scale);
+        };
+
+        Zoom.prototype._animate = function(translate, scale) {
+            var _this = this,
+                d3Zoom = this.d3Zoom;
+
+            d3.transition().duration(350).tween("zoom", function() {
+                var iTranslate = d3.interpolate(d3Zoom.translate(), translate),
+                    iScale = d3.interpolate(d3Zoom.scale(), scale);
+
+                    return function(t) {
+                _this._update(iTranslate(t), iScale(t));
+                };
+            });
+        };
+
+        Zoom.prototype._displayPercentage = function(scale) {
+            var value;
+
+            value = Math.round(Math.log(scale) / Math.log(this.scale.max) * 100);
+            this.$info.text(value + "%");
+        };
+
+        Zoom.prototype._getScalesArray = function() {
+            var array = [],
+                scaleMaxLog = Math.log(this.scale.max);
+
+            for (var i = 0; i <= 10; i++) {
+                array.push(Math.pow(Math.E, 0.1 * i * scaleMaxLog));
+            }
+
+            return array;
+        };
+
+        Zoom.prototype._getNextScale = function(direction) {
+            var scaleSet = this.scale.set,
+                currentScale = this.d3Zoom.scale(),
+                lastShift = scaleSet.length - 1,
+                shift, temp = [];
+
+            if (this.scrolled) {
+
+                for (shift = 0; shift <= lastShift; shift++) {
+                temp.push(Math.abs(scaleSet[shift] - currentScale));
+                }
+
+                shift = temp.indexOf(Math.min.apply(null, temp));
+
+                if (currentScale >= scaleSet[shift] && shift < lastShift) {
+                shift++;
+                }
+
+                if (direction == "out" && shift > 0) {
+                shift--;
+                }
+
+                this.scrolled = false;
+
+            } else {
+
+                shift = this.scale.currentShift;
+
+                if (direction == "out") {
+                shift > 0 && shift--;
+                } else {
+                shift < lastShift && shift++;
+                }
+            }
+
+            this.scale.currentShift = shift;
+
+            return scaleSet[shift];
+        };
+
+        function Datamap() {
+            this.$container = $("#container");
+            this.instance = new Datamaps({
+                scope: 'world',
+                element: this.$container.get(0),
+                projection: 'mercator',
+                fills: {
+                    defaultFill: '#C4C4C4',
+                    playerFill: '#38003c'
+                },
+                geographyConfig:{
+                    hideAntarctica: null,
+                    highlightFillColor: '#e90052',
+                    popupTemplate: function(geography,data){
+                        return '<div class="country_info" id="country_info">' + geography.properties.name + '</strong></div>';
+                    }
+                },
+                bubblesConfig: {
+                    borderWidth: 0,
+                    popupTemplate: function(geography,data){
+
+                        // catches players with place_of_birth stripped
+                        if (data.place_of_birth === "") {
+                        data.place_of_birth = "No information";
+                        };
+                        
+                        return '<div class="player_info" id="player_info"><strong>' + data.name + '</strong><br><i>' + data.place_of_birth + '</i></div>';
+                    },
+                    highlightFillColor: '#e90052'
+                },
+                done: this._handleMapReady.bind(this)
+            });
+        }
+
+        Datamap.prototype._handleMapReady = function(datamap) {
+            this.zoom = new Zoom({
+                $container: this.$container,
+                datamap: datamap
+            });
         }
-      })
 
-      $(window).on('resize', function() {
-        map.resize();
-      });
+        var map = new Datamap().instance;
 
     </script>
   </head>