<commit_before>﻿<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="svg-map">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    .map {
      width:80%;
    }
    </style>

    <!-- CARD CONTENTS GO HERE -->
    <template if="{{title}}">
      <div layout center>{{title}}</div>
    </template>
    <div horizontal center>
      <object data="../maps/BlankMap-World6.svg" type="image/svg+xml"
        id="map" class="map"></object>
    </div>
    
  </template>

  <script>
(function() {
  'use strict';

  // Our element
  var svgmap = window.svgmap = {};

  svgmap.initialize = function() {
  };

  svgmap.initializeDOM = function() {
    // assumes only svg-map on page :(
    this.elem = document.getElementsByTagName("svg-map").item(0);
    this.regions = this.elem.getElementsByTagName("region");
    this.mapElem = this.elem.shadowRoot.getElementsByTagName("object").item(0);
  };

  svgmap.colorRegion = function(id, color) {
    svgmap.regionApply(id, function(region) {
      if (region === null) {
        console.log("Region not found: " + id);
        return;
      }
      region.style.fill = color;
    });
  };

  svgmap.fill = function(cc) {
    svgmap.colorRegion(cc, "blue");
  };

  /*
   * Because countries are made up of mutiple paths,
   * this is used to apply functions to countries.
   * cc -  ISO_3166 country codes + some missing old countries
   * fn - functions(region) region will be a region element
   */
  svgmap.regionApply = function(cc, fn) {
    // using ISO_3166 country codes
    // http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
    var i, paths;
    var region = this.mapElem.contentDocument.getElementById(cc);
    if (!region) {
      console.log("Country not found: " + cc);
      return;
    }
    fn(region);

    paths = region.getElementsByTagName('path');
    for (i = 0; i < paths.length; i++) {
      fn(paths[i]);
    }
  };

  window.addEventListener('polymer-ready', function(e) {
      svgmap.initializeDOM();
  });


  Polymer({
    created: function () {
      svgmap.initialize();<commit_msg>Added basic functionality to color map.<commit_after>﻿<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="svg-map">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    .map {
      width:80%;
    }
    </style>

    <!-- CARD CONTENTS GO HERE -->
    <template if="{{title}}">
      <div layout center>{{title}}</div>
    </template>
    <div horizontal center>
      <object data="../maps/BlankMap-World6.svg" type="image/svg+xml"
        id="map" class="map"></object>
    </div>
    
  </template>

  <script>
(function() {
  'use strict';

  // Our element
  var svgmap = window.svgmap = {};

  svgmap.initialize = function() {
    this.options = {};
    this.options.opacifyValue = 0.4;
    this.options.colorOcean = '#D6FFFF';
    this.options.colorAntartica = '#E6FFFF';

    // Need a way to color by class rather than id
    this.options.colorLand = 'brown';
  };

  svgmap.initializeDOM = function() {
    // assumes only svg-map on page :(
    this.elem = document.getElementsByTagName('svg-map').item(0);
    this.mapElem = this.elem.shadowRoot.getElementsByTagName('object').item(0);
    this.regions = this.elem.getElementsByTagName('region');
    // TODO: need to wait for contentDocument to finish loading
    //       before trying to render regions.
    this.onSVGDocumentLoaded();
  };
  
  svgmap.onSVGDocumentLoaded = function() {
    this.fillInRegions();
    this.colorPrettyDefaults();
  };

  svgmap.fillInRegions = function() {
    console.log('trying to fill in regions');
    var i;
    for (i = 0; i < this.regions.length; i++) {
      var region = this.regions[i],
          color = region.getAttribute('color'),
          id = region.getAttribute('id');
      if (id && color) {
        this.colorRegion(id, color);
      }
    }
  };

  // Code Related to map

  svgmap.colorRegion = function(id, color) {
    svgmap.regionApply(id, function(region) {
      if (region === null) {
        console.log('Region not found: ' + id);
        return;
      }
      region.style.fill = color;
    });
  };

  svgmap.resetMap = function() {
    // Maybe this would work if I applied it to class 'land'.
    /*
    this.collection.map(function(nation) {
      var cc = nation.id;
      this.regionApply(cc, function(region) {
        region.style['fill-opacity'] = 1; 
      });
    }, this);
    */
  };

  svgmap.setMouseEvents = function(cc, shouldOpacify) {
    this.region(cc, function(region) {
      region.onmouseover = function() {
        // TODO: mouse over delegate
        if (shouldOpacify) {
          svgmap.opacify(cc, this.options.opacifyValue);
        }
      };
      region.onmouseout = function() {
        if (shouldOpacify) {
          svgmap.opacify(cc, 1);
        }
      };
      region.onclick = function() {
        // TODO: Replace with onclick delegate
      };

    });
  };

  // Set the ocean and Antartic colors for the world map
  svgmap.colorPrettyDefaults = function() {
    if (this.options.colorOcean) {
      this.colorRegion('ocean', this.options.colorOcean);
    }
    if (this.options.colorAntartica) {
      this.colorRegion('aq', this.options.colorAntartica);
    }
  };

  /*
   * Because countries are made up of mutiple paths,
   * this is used to apply functions to countries.
   * cc -  ISO_3166 country codes + some missing old countries
   * fn - functions(region) region will be a region element
   */
  svgmap.regionApply = function(cc, fn) {
    // using ISO_3166 country codes
    // http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
    var i, paths;
    var region = this.mapElem.contentDocument.getElementById(cc);
    if (!region) {
      console.log('Region not found: ' + cc);
      return;
    }
    fn(region);

    paths = region.getElementsByTagName('path');
    for (i = 0; i < paths.length; i++) {
      fn(paths[i]);
    }
  };


  // Event for initializing after shadow dom has loaded.
  window.addEventListener('polymer-ready', function(e) {
      svgmap.initializeDOM();
  });

  Polymer({
    created: function () {
      svgmap.initialize();
{'fraction_non_alphanumeric': 0.14777727203762706, 'fraction_numerical': 0.010772265210135032, 'mean_word_length': 2.45130890052356, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3997346', 'n_tokens_mistral': 2207, 'n_tokens_neox': 2080, 'n_words': 469}