<commit_before><template>
  <div id="app" class="container">
    <div class="row">
      <div class="master-panel col-6">
        <div class="box-container"><master></master></div>
        <div class="photo-list-container">
          <div class="photo-list">
            <div class="masonry-grid-sizer"></div>
            <div class="masonry-gutter-sizer"></div>
            <div class="photo-list-item"
              v-for="photo in photos"
            >
              <photo
                :image="photo"
                :footer="true"
                :selected="photo.src === $store.state.master.photo.src ? 'master' :
                  photo.src === $store.state.twitter.photo.src ? 'twitter' :
                  photo.src === $store.state.weibo.photo.src ? 'weibo' : ''"
                @clicked="selectPhoto"
              ></photo>
            </div>
          </div>
          <transition name="fade">
            <div class="text-center"
              key="loading"
              v-if="!photos"
            >
              <loader width="50%" height="50%" fill="#fff"/>
            </div>
          </transition>
        </div>
      </div>
      <div class="slave-panel col-6">
        <div class="box-container"><twitter></twitter></div>
        <div class="box-container"><weibo></weibo></div>
      </div>
    </div>
    <coffee/>
  </div>
</template>

<style src="bootstrap/dist/css/bootstrap.css"></style>
<style src="./style.scss"></style>

<script>
  import Masonry from 'masonry-layout'
  import imagesLoaded from 'imagesLoaded'

  import * as types from 'src/editor/store/types'

  import Master from './components/master'
  import Twitter from './components/twitter'
  import Weibo from './components/weibo'
  import Photo from './components/photo'
  import Loader from './components/loader'
  import Coffee from './components/coffee'

  export default {
    name: 'app',
    data () {
      return {
        isMounted: false,
        masonry: false,
        photos: null
      }
    },
    methods: {
      selectPhoto (payload) {
        this.$store.commit(types.UPDATE_PHOTO, payload)
      },
      createMasonry () {
        this.masonry = new Masonry('.photo-list', {
          itemSelector: '.photo-list-item',
          columnWidth: '.masonry-grid-sizer',
          gutter: '.masonry-gutter-sizer',
          percentPosition: true
        })
        this.imagesLoaded()
      },
      imagesLoaded () {
        imagesLoaded('.photo-list').on('progress', () => {
          // layout Masonry after each image loads
          this.masonry.layout()
        })
      }
    },
    created () {
      // get infos from storage
      this.$store.dispatch(types.UPDATE_STORAGE)

      // get page title and href
      chrome.runtime.sendMessage({msg: 'REQUEST_PAGE_INFO'}, response => {
        if (response) {
          this.$store.commit(types.UPDATE_MASTER_TEXT, {
            text: `${response.title} | ${response.href}`
          })
        }
      })

      // get page images
      chrome.runtime.sendMessage({msg: 'REQUEST_PHOTOS'}, response => {
        if (response) {
          this.photos = response.photos
          // thrid-party libs need to wait for rendering
          this.$nextTick(() => {
            if (this.masonry) {
              this.imagesLoaded()
            } else if (this.isMounted) {
              this.createMasonry()
            }
          })
        } else {
          this.photos = []
        }
      })
    },
    mounted () {
      this.isMounted = true
      if (this.photos && this.photos.length > 0) {
        this.createMasonry()
      }
    },
    components: {
      coffee: Coffee,
      photo: Photo,
      master: Master,<commit_msg>Updated init text<commit_after><template>
  <div id="app" class="container">
    <div class="row">
      <div class="master-panel col-6">
        <div class="box-container"><master></master></div>
        <div class="photo-list-container">
          <div class="photo-list">
            <div class="masonry-grid-sizer"></div>
            <div class="masonry-gutter-sizer"></div>
            <div class="photo-list-item"
              v-for="photo in photos"
            >
              <photo
                :image="photo"
                :footer="true"
                :selected="photo.src === $store.state.master.photo.src ? 'master' :
                  photo.src === $store.state.twitter.photo.src ? 'twitter' :
                  photo.src === $store.state.weibo.photo.src ? 'weibo' : ''"
                @clicked="selectPhoto"
              ></photo>
            </div>
          </div>
          <transition name="fade">
            <div class="text-center"
              key="loading"
              v-if="!photos"
            >
              <loader width="50%" height="50%" fill="#fff"/>
            </div>
          </transition>
        </div>
      </div>
      <div class="slave-panel col-6">
        <div class="box-container"><twitter></twitter></div>
        <div class="box-container"><weibo></weibo></div>
      </div>
    </div>
    <coffee/>
  </div>
</template>

<style src="bootstrap/dist/css/bootstrap.css"></style>
<style src="./style.scss"></style>

<script>
  import Masonry from 'masonry-layout'
  import imagesLoaded from 'imagesLoaded'

  import * as types from 'src/editor/store/types'

  import Master from './components/master'
  import Twitter from './components/twitter'
  import Weibo from './components/weibo'
  import Photo from './components/photo'
  import Loader from './components/loader'
  import Coffee from './components/coffee'

  export default {
    name: 'app',
    data () {
      return {
        isMounted: false,
        masonry: false,
        photos: null
      }
    },
    methods: {
      selectPhoto (payload) {
        this.$store.commit(types.UPDATE_PHOTO, payload)
      },
      createMasonry () {
        this.masonry = new Masonry('.photo-list', {
          itemSelector: '.photo-list-item',
          columnWidth: '.masonry-grid-sizer',
          gutter: '.masonry-gutter-sizer',
          percentPosition: true
        })
        this.imagesLoaded()
      },
      imagesLoaded () {
        imagesLoaded('.photo-list').on('progress', () => {
          // layout Masonry after each image loads
          this.masonry.layout()
        })
      }
    },
    created () {
      // get infos from storage
      this.$store.dispatch(types.UPDATE_STORAGE)

      // get page title and href
      chrome.runtime.sendMessage({msg: 'REQUEST_PAGE_INFO'}, response => {
        if (response) {
          this.$store.commit(types.UPDATE_MASTER_TEXT, {
            text: ` | ${response.title} ${response.href} `
          })
        }
      })

      // get page images
      chrome.runtime.sendMessage({msg: 'REQUEST_PHOTOS'}, response => {
        if (response) {
          this.photos = response.photos
          // thrid-party libs need to wait for rendering
          this.$nextTick(() => {
            if (this.masonry) {
              this.imagesLoaded()
            } else if (this.isMounted) {
              this.createMasonry()
            }
          })
        } else {
          this.photos = []
        }
      })
    },
    mounted () {
      this.isMounted = true
      if (this.photos && this.photos.length > 0) {
        this.createMasonry()
      }
    },
    components: {
      coffee: Coffee,
      photo: Photo,
      master: Master,
{'fraction_non_alphanumeric': 0.1498380129589633, 'fraction_numerical': 0.0018898488120950325, 'mean_word_length': 1.730925175082934, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 103, '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': '3910501', 'n_tokens_mistral': 2203, 'n_tokens_neox': 2136, 'n_words': 419}