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

<!--
An element providing a solution to no problem in particular.

Example:

    <meme-gen></meme-gen>

@element meme-gen
@demo demo/index.html
-->
<dom-module id="meme-gen">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }

    .wrapper {
      position: relative;
    }

    #image {
      max-height: 400px;
      max-width: 590px;
      z-index: 1;
    }
    
    #top, #bottom {
      color: white;
      font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
      font-size: 30px;
      position: absolute;
      text-align: center;
      text-shadow: 1px 1px 2px black;
      width: 100%;
    }
    
    #top {
      top: 5px;
    }
    
    #bottom {
      bottom: 5px;
    }
  </style>

  <template>
    <div class="wrapper">
      <img id="image" on-load="refreshSizes_"></img>
      <div id="top">{{toCaps_(top)}}</div>
      <div id="bottom">{{toCaps_(bottom)}}</div>
    </div>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'meme-gen',

    properties: {

      template: {
        type: String,
        value: 'First-World-Problems',
        observer: 'onTemplateChanged_',
      },
      
      top: String,

      bottom: String
    },
    
    refreshSizes_: function() {
      var newWidth = this.$.image.getBoundingClientRect().width;
      this.$.top.style.width = newWidth;
      this.$.bottom.style.width = newWidth;
    },
    
    toCaps_: function(str) {
      return str.toUpperCase();
    },

    onTemplateChanged_: function(newTemplate) {
      this.$.image.src = 'https://imgflip.com/s/meme/' + this.fixCase_(newTemplate) + '.jpg';
    },
    
    fixCase_: function(src) {
      return src.toLowerCase().split('-').map(function(piece) {
        return piece.charAt(0).toUpperCase() + piece.slice(1);
      }).join('-');
    },

  });

</script><commit_msg>Add an error for invalid templates<commit_after><link rel="import" href="../polymer/polymer.html">

<!--
An element providing a solution to no problem in particular.

Example:

    <meme-gen></meme-gen>

@element meme-gen
@demo demo/index.html
-->
<dom-module id="meme-gen">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }

    .wrapper {
      position: relative;
    }

    #image {
      max-height: 400px;
      max-width: 590px;
      z-index: 1;
    }
    
    #top, #bottom, #error {
      color: white;
      font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
      font-size: 30px;
      position: absolute;
      text-align: center;
      text-shadow: 1px 1px 2px black;
      width: 100%;
    }
    
    #top, #error {
      top: 5px;
    }
    
    #bottom {
      bottom: 5px;
    }
  </style>

  <template>
    <div class="wrapper">
      <img id="image" on-load="refreshSizes_" on-error="imageError_"></img>
      <div hidden$="[[!error_]]" id="error">Invalid meme template!</div>
      <div hidden$="[[error_]]" id="top">{{toCaps_(top)}}</div>
      <div hidden$="[[error_]]" id="bottom">{{toCaps_(bottom)}}</div>
    </div>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'meme-gen',

    properties: {

      template: {
        type: String,
        value: 'First-World-Problems',
        observer: 'onTemplateChanged_',
      },
      
      top: String,

      bottom: String,
      
      error_: Boolean,
    },
    
    refreshSizes_: function() {
      if (this.loadingErrorTemplate_) {
        this.loadingErrorTemplate_ = false;
      } else {
        this.error_ = false;
      }
      var newWidth = this.$.image.getBoundingClientRect().width;
      this.$.error.style.width = newWidth;
      this.$.top.style.width = newWidth;
      this.$.bottom.style.width = newWidth;
    },
    
    imageError_: function() {
      this.error_ = true;
      this.loadingErrorTemplate_ = true;
      this.template = 'computer-guy-facepalm';
    },
    
    toCaps_: function(str) {
      return str.toUpperCase();
    },

    onTemplateChanged_: function(newTemplate) {
      this.$.image.src = 'https://imgflip.com/s/meme/' + this.fixCase_(newTemplate) + '.jpg';
    },
    
    fixCase_: function(src) {
      return src.toLowerCase().split('-').map(function(piece) {
        return piece.charAt(0).toUpperCase() + piece.slice(1);
      }).join('-');
    },

  });

</script>
{'fraction_non_alphanumeric': 0.16354419219748734, 'fraction_numerical': 0.008375578576151642, 'mean_word_length': 2.2624011502516175, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, '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': '5579993', 'n_tokens_mistral': 1616, 'n_tokens_neox': 1528, 'n_words': 303}