<commit_before><template>
  <header class="mdc-toolbar">
    <!-- here are some sugar slots -->
    <div class="mdc-toolbar__row" v-if="$slots.icon || $slots.title">
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start" v-if="$slots.icon">
        <slot name="icon" />
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start" v-if="$slots.title">
         <slot name="title" />
      </section>
    </div>
    <!-- if the user doesn't want to use the sugar slots then they can inject their own content here -->
    <slot/>
  </header>
</template>

<script lang="babel">
  import MDCToolbarFoundation from '@material/toolbar/foundation'
  import * as util from '@material/toolbar/util'

  export default {
    name: 'Toolbar',
    props: ['titleElement', 'flexibleRowElement', 'fixedAdjustElement'],
    data () {
      return {
        classes: {},
        foundation: null
      }
    },
    methods: {
      /**
       * Init the foundation manually if it exists.
       * Should be useful for testing/debugging.
       *
       * @return {void}
       */
      initFoundation () {
        if (this.foundation) {
          this.foundation.init()
        }
      },
      /**
       * Destroy the foundation manually if it exists.
       * Should be useful for testing/debugging.
       *
       * @return {void}
       */
      destroyFoundation () {
        if (this.foundation) {
          this.foundation.destroy()
        }
      },
      /**
       * Update the fixed adjust element's style
       * @return {void}
       */
      updateAdjustElementStyles () {
        if (this.foundation) {
          this.foundation.updateAdjustElementStyles()
        }
      }
    },
    updated () { // should this be beforeUpdate?
      this.updateAdjustElementStyles() // this may be a factor in waterfall functionality not working correctly
    },
    mounted () {
      const CHANGE_EVENT = (MDCToolbarFoundation.strings.CHANGE_EVENT || 'MDCToolbar:change') // because `MDCToolbarFoundation.strings.CHANGE_EVENT` is undefined. WTF?

      let vm = this
      this.foundation = new MDCToolbarFoundation({
        addClass (className) {
          vm.$set(vm.classes, className, true)
        },
        removeClass (className) {
          vm.$delete(vm.classes, className)
        },
        hasClass (className) {
          return Boolean(vm.classes[className]) || (vm.$el && vm.$el.classList.contains(className))
        },
        // I think this is the wrong implementation. Does not work correctly in electron.
        registerScrollHandler (handler) {
          window.addEventListener('scroll', handler, util.applyPassive())
        },
        deregisterScrollHandler (handler) {
          window.removeEventListener('scroll', handler, util.applyPassive())
        },
        //
        registerResizeHandler (handler) {
          window.addEventListener('resize', handler)
        },
        deregisterResizeHandler (handler) {
          window.removeEventListener('resize', handler)
        },
        getViewportWidth () {
          window.innerWidth
        },
        getViewportScrollY () {
          window.pageYOffset
        },
        getOffsetHeight () {
          vm.$el.offsetHeight
        },
        // all `if (el)` checks are because there is no guarantee that the element has been initialized yet
        // probably need to wait until next tick or something
        getFlexibleRowElementOffsetHeight () {
          let el = (vm.$props.flexibleRowElement || vm.$slots.flexibleRow)
          if (el) {
            el.offsetHeight
          }
        },
        notifyChange (evtData) {
          vm.$emit(CHANGE_EVENT, evtData)
        },
        setStyle (property, value) {
          vm.$el.style.setProperty(property, value)
        },
        setStyleForTitleElement (property, value) {
          let el = (vm.$props.titleElement || vm.$slots.title)
          if (el) {
            el.style.setProperty(property, value)
          }
        },
        setStyleForFlexibleRowElement (property, value) {
          let el = (vm.$props.flexibleRowElement || vm.$slots.flexibleRow)
          if (el) {
            el.style.setProperty(property, value)
          }
        },
        setStyleForFixedAdjustElement (property, value) {
          let el = vm.$props.fixedAdjustElement
          if (el) {
            el.style.setProperty(property, value)
          }
        }
      })
      this.initFoundation()
    },
    beforeDestroy () {
      this.destroyFoundation()
    }
  }
</script>
<commit_msg>cleanup for first draft fixes #4<commit_after><template>
  <header class="mdc-toolbar">
    <!-- here are some sugar slots -->
    <div class="mdc-toolbar__row" v-if="$slots.icon || $slots.title">
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start" v-if="$slots.icon">
        <slot name="icon" />
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start" v-if="$slots.title">
         <slot name="title" />
      </section>
    </div>
    <!-- if the user doesn't want to use the sugar slots then they can inject their own content here -->
    <slot/>
  </header>
</template>

<script lang="babel">
  import MDCToolbarFoundation from '@material/toolbar/foundation'
  import * as util from '@material/toolbar/util'

  export default {
    name: 'Toolbar',
    props: ['titleElement', 'flexibleRowElement', 'fixedAdjustElement'],
    data () {
      return {
        classes: {},
        foundation: null
      }
    },
    methods: {
      /**
       * Init the foundation manually if it exists.
       * Should be useful for testing/debugging.
       *
       * @return {void}
       */
      initFoundation () {
        if (this.foundation) {
          this.foundation.init()
        }
      },
      /**
       * Destroy the foundation manually if it exists.
       * Should be useful for testing/debugging.
       *
       * @return {void}
       */
      destroyFoundation () {
        if (this.foundation) {
          this.foundation.destroy()
        }
      },
      /**
       * Update the fixed adjust element's style
       * @return {void}
       */
      updateAdjustElementStyles () {
        if (this.foundation) {
          this.foundation.updateAdjustElementStyles()
        }
      }
    },
    updated () { // should this be beforeUpdate?
      this.updateAdjustElementStyles() // this may be a factor in waterfall functionality not working correctly
    },
    mounted () {
      const CHANGE_EVENT = (MDCToolbarFoundation.strings.CHANGE_EVENT || 'MDCToolbar:change') // because `MDCToolbarFoundation.strings.CHANGE_EVENT` is undefined. WTF?

      let vm = this
      this.foundation = new MDCToolbarFoundation({
        addClass (className) {
          vm.$set(vm.classes, className, true)
        },
        removeClass (className) {
          vm.$delete(vm.classes, className)
        },
        hasClass (className) {
          return Boolean(vm.classes[className]) || (vm.$el && vm.$el.classList.contains(className))
        },
        // I think this is the wrong implementation. Does not work correctly in electron.
        registerScrollHandler (handler) {
          window.addEventListener('scroll', handler, util.applyPassive())
        },
        deregisterScrollHandler (handler) {
          window.removeEventListener('scroll', handler, util.applyPassive())
        },
        //
        registerResizeHandler (handler) {
          window.addEventListener('resize', handler)
        },
        deregisterResizeHandler (handler) {
          window.removeEventListener('resize', handler)
        },
        getViewportWidth () {
          window.innerWidth
        },
        getViewportScrollY () {
          window.pageYOffset
        },
        getOffsetHeight () {
          vm.$el.offsetHeight
        },
        // all `if (el)` checks are because there is no guarantee that the element has been initialized yet
        // probably need to wait until next tick or something
        getFlexibleRowElementOffsetHeight () {
          let el = (vm.$props.flexibleRowElement || vm.$slots.flexibleRow)
          if (el) {
            el.offsetHeight
          }
        },
        notifyChange (evtData) {
          vm.$emit(CHANGE_EVENT, evtData)
        },
        setStyle (property, value) {
          vm.$el.style.setProperty(property, value)
        },
        setStyleForTitleElement (property, value) {
          let el = (vm.$props.titleElement || vm.$slots.title)
          if (el) {
            el.style.setProperty(property, value)
          }
        },
        setStyleForFlexibleRowElement (property, value) {
          let el = (vm.$props.flexibleRowElement || vm.$slots.flexibleRow)
          if (el) {
            el.style.setProperty(property, value)
          }
        },
        setStyleForFixedAdjustElement (property, value) {
          let el = vm.$props.fixedAdjustElement
          if (el) {
            el.style.setProperty(property, value)
          }
        }
      })
      this.initFoundation()
    },
    beforeDestroy () { // beforeDestroy or destroyed?
      this.destroyFoundation()
    }
  }
</script>

{'fraction_non_alphanumeric': 0.11735357917570499, 'fraction_numerical': 0.00010845986984815618, 'mean_word_length': 1.9996746909564085, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, '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': '4317799', 'n_tokens_mistral': 2496, 'n_tokens_neox': 2498, 'n_words': 578}