<commit_before><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">

<script src="../dig-behaviors/create-link-behavior.js"></script>

<dom-module id="full-size-image-view">
  <template>
    <style>
      :host {
        display: block;
      }
      .gallery {
        --paper-dialog-background-color: transparent;
        box-shadow: none;
        display: inline-block;
        height: 100%;
        margin: 0;
      }

      .exit-button {
        margin: 0;
        padding: 0;
        position: absolute;
        right: 0;
      }

      .layout-override {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      paper-button[disabled] {
        background-color: transparent;
      }

      paper-button[disabled] > iron-icon {
        display: none;
      }

      iron-icon {
        --iron-icon-height: 32px;
        --iron-icon-width: 32px;
        --iron-icon-fill-color: #ffffff;
      }

      iron-image {
        --iron-image-height: 100%;
        --iron-image-width: auto;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      .open-image {
        text-decoration: none;
      }

      .open-image paper-button {
        color: white;
        font-size: 16px;
        margin: 0;
        padding: 20px;
        width: 100%;
      }
    </style>

    <paper-dialog id="imageModal" modal entry-animation="fade-in-animation" exit-animation="fade-out-animation" class="gallery">
      <div class="layout horizontal center layout-override">
        <paper-button disabled="{{!hasPrevious(currentIndex)}}" on-click="clickPrevious">
          <iron-icon icon="image:navigate-before"></iron-icon>
        </paper-button>

        <div class="layout vertical">
          <paper-button class="exit-button" on-click="closeDialog">
            <iron-icon icon="clear"></iron-icon>
          </paper-button>

          <iron-image src="[[getProperty(currentImage, imageSource, '')]]" class$="[[getBlurClass(blur)]]"></iron-image>

          <a class="open-image" target="[[getTarget(newTab)]]" href$="[[createIdLinkWithType('image', currentImage, imageId)]]">
            <paper-button>Open Image</paper-button>
          </a>
        </div>

        <paper-button disabled="{{!hasNext(currentIndex)}}" on-click="clickNext">
          <iron-icon icon="image:navigate-next"></iron-icon>
        </paper-button>
      </div>
    </paper-dialog>
  </template>

  <script>
  (function() {
    /* globals DigBehaviors */
    'use strict';

    Polymer({
      is: 'full-size-image-view',

      behaviors: [DigBehaviors.CreateLinkBehavior],

      properties: {
        /**
         * The array of image objects.
         */
        images: {
          type: Array,
          value: function() {
            return [];
          },
          notify: true
        },

        /**
         * The property of the image objects for their unique ID.
         */
        imageId: {
          type: String,
          value: 'id'
        },

        /**
         * The property of the image objects for their source URL.
         */
        imageSource: {
          type: String,
          value: 'source'
        },

        /**
         * The image currently displayed.
         */
        currentImage: {
          type: Object,
          notify: true
        },

        /**
         * The index in the array of images of the image currently displayed.
         */
        currentIndex: {
          type: Number,
          notify: true
        },

        /**
         * Whether to open a link in a new tab.
         */
        newTab: {
          type: Boolean,
          value: false
        },

        /**
         * Whether to blur the images.
         */
        blur: {
          type: Boolean,
          value: true,
          notify: true
        }
      },

      attached: function() {
        this.$.imageModal.open();
      },

      getBlurClass: function(blur) {
        return (blur ? 'large-blur' : '');
      },

      getProperty: function(item, property, defaultValue) {
        return item[property] || defaultValue;
      },

      getTarget: function(newTab) {
        return (newTab ? '_blank' : '_self');
      },

      hasPrevious: function(index) {
        if(index - 1  < 0) {
          return false;
        } else {
          return true;
        }
      },

      hasNext: function(index) {
        if(index + 1 >= this.images.length) {
          return false;
        } else {
          return true;
        }
      },

      clickPrevious: function() {
        this.currentIndex = this.currentIndex - 1;
        this.currentImage = this.images[this.currentIndex];
        this.$.imageModal.refit();
      },

      clickNext: function() {
        this.currentIndex = this.currentIndex + 1;
        this.currentImage = this.images[this.currentIndex];
        this.$.imageModal.refit();
      },

      closeDialog: function() {
        this.$.imageModal.close();
        this.remove();
      }
    });
  })();
  </script>
</dom-module>
<commit_msg>Changed styling in full-size-image-view to work better with small browsers.<commit_after><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">

<script src="../dig-behaviors/create-link-behavior.js"></script>

<dom-module id="full-size-image-view">
  <template>
    <style>
      :host {
        display: block;
      }

      .gallery {
        --paper-dialog-background-color: transparent;
        box-shadow: none;
        display: inline-block;
        margin: 0;
        overflow: auto;
        height: 100%;
        width: 100%;
      }

      .layout-override {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .exit-button {
        position: absolute;
        top: 0;
        right: 0;
      }

      .prev-button {
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 0;
      }

      .next-button {
        position: absolute;
        top: 50px;
        bottom: 50px;
        right: 0;
      }

      paper-button {
        margin: 0;
        padding: 0;
      }

      paper-button[disabled] {
        background-color: transparent;
      }

      paper-button[disabled] > iron-icon {
        display: none;
      }

      iron-icon {
        --iron-icon-height: 48px;
        --iron-icon-width: 48px;
        --iron-icon-fill-color: #ffffff;
      }

      iron-image {
        --iron-image-height: auto;
        --iron-image-width: auto;
        padding: 0;
        margin: 0;
      }

      .open-image {
        text-decoration: none;
      }

      .open-image paper-button {
        color: white;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        padding: 20px;
        width: 100%;
      }
    </style>

    <paper-dialog id="imageModal" modal entry-animation="fade-in-animation" exit-animation="fade-out-animation" class="gallery">
      <div class="layout horizontal center layout-override">
        <div class="layout vertical flex">
          <iron-image src="[[getProperty(currentImage, imageSource, '')]]" class$="layout horizontal center-justified [[getBlurClass(blur)]]"></iron-image>

          <a class="open-image" target="[[getTarget(newTab)]]" href$="[[createIdLinkWithType('image', currentImage, imageId)]]">
            <paper-button>Open Image</paper-button>
          </a>
        </div>
      </div>

      <paper-button class="exit-button" on-click="closeDialog">
        <iron-icon icon="clear" class="iron-icon-huge"></iron-icon>
      </paper-button>

        <paper-button class="prev-button" disabled="{{!hasPrevious(currentIndex)}}" on-click="clickPrevious">
          <iron-icon icon="image:navigate-before" class="iron-icon-huge"></iron-icon>
        </paper-button>

        <paper-button class="next-button" disabled="{{!hasNext(currentIndex)}}" on-click="clickNext">
          <iron-icon icon="image:navigate-next" class="iron-icon-huge"></iron-icon>
        </paper-button>
    </paper-dialog>
  </template>

  <script>
  (function() {
    /* globals DigBehaviors */
    'use strict';

    Polymer({
      is: 'full-size-image-view',

      behaviors: [DigBehaviors.CreateLinkBehavior],

      properties: {
        /**
         * The array of image objects.
         */
        images: {
          type: Array,
          value: function() {
            return [];
          },
          notify: true
        },

        /**
         * The property of the image objects for their unique ID.
         */
        imageId: {
          type: String,
          value: 'id'
        },

        /**
         * The property of the image objects for their source URL.
         */
        imageSource: {
          type: String,
          value: 'source'
        },

        /**
         * The image currently displayed.
         */
        currentImage: {
          type: Object,
          notify: true
        },

        /**
         * The index in the array of images of the image currently displayed.
         */
        currentIndex: {
          type: Number,
          notify: true
        },

        /**
         * Whether to open a link in a new tab.
         */
        newTab: {
          type: Boolean,
          value: false
        },

        /**
         * Whether to blur the images.
         */
        blur: {
          type: Boolean,
          value: true,
          notify: true
        }
      },

      attached: function() {
        this.$.imageModal.open();
      },

      getBlurClass: function(blur) {
        return (blur ? 'large-blur' : '');
      },

      getProperty: function(item, property, defaultValue) {
        return item[property] || defaultValue;
      },

      getTarget: function(newTab) {
        return (newTab ? '_blank' : '_self');
      },

      hasPrevious: function(index) {
        if(index - 1  < 0) {
          return false;
        } else {
          return true;
        }
      },

      hasNext: function(index) {
        if(index + 1 >= this.images.length) {
          return false;
        } else {
          return true;
        }
      },

      clickPrevious: function() {
        this.currentIndex = this.currentIndex - 1;
        this.currentImage = this.images[this.currentIndex];
        this.$.imageModal.refit();
      },

      clickNext: function() {
        this.currentIndex = this.currentIndex + 1;
        this.currentImage = this.images[this.currentIndex];
        this.$.imageModal.refit();
      },

      closeDialog: function() {
        this.$.imageModal.close();
        this.remove();
      }
    });
  })();
  </script>
</dom-module>

{'fraction_non_alphanumeric': 0.13959370155829323, 'fraction_numerical': 0.007342742922411683, 'mean_word_length': 1.77896168669236, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 87, 'https://': 0, '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': '5105166', 'n_tokens_mistral': 3659, 'n_tokens_neox': 3460, 'n_words': 801}