<commit_before><template>

  <div v-bind:class="['toolbar', displayToolbar ? 'toolbar-hide' : '']" v-show='!searchOpen'>
    <breadcrumbs class="breadcrumbs"></breadcrumbs>
      <label for="chan-select" class="visuallyhidden">{{ $tr('switchChannels') }}</label>
      <select
        name="chan-select"
        id="chan-select"
        class="chan-select"
        v-model="currentChannel">
        <option v-for="channel in channelList" :value="channel.id">{{ channel.name }}</option>
      </select>
    <search-button @scrolling="handleScroll" class='search-btn'></search-button>
  </div>

</template>


<script>

  const constants = require('../../state/constants');
  const getters = require('../../state/getters');
  const PageModes = constants.PageModes;

  module.exports = {

    $trNameSpace: 'learnToolbar',
    $trs: {
      switchChannels: 'Switch Channels',
    },

    data: () => ({
      currScrollTop: 0,
      lastScrollTop: 0,
      delta: 5,
      displayToolbar: false,
      more: false,
    }),
    components: {
      'search-widget': require('../search-widget'),
      'search-button': require('../search-widget/search-button'),
      'breadcrumbs': require('../breadcrumbs'),
    },
    computed: {
      /*
      * Get and set the current channel ID.
      */
      currentChannel: {
        get() {
          return this.currentChannelGetter;
        },
        set(newChannelId, oldChannelId) {
          if (newChannelId !== oldChannelId) {
            this.switchChannel(newChannelId);
          }
        },
      },
    },
    methods: {
      handleScroll(position) {
        this.position = position;
        this.currScrollTop = position.scrollTop;

        if (Math.abs(this.lastScrollTop - this.currScrollTop) <= this.delta) {
          return;
        }

        this.more = false;

        if (this.currScrollTop > this.lastScrollTop) {
          this.displayToolbar = true;
        } else {
          this.displayToolbar = false;
        }
        this.lastScrollTop = this.currScrollTop;
      },
      switchChannel(channelId) {
        let rootPage;
        this.more = false;
        if (this.pageMode === PageModes.EXPLORE) {
          rootPage = constants.PageNames.EXPLORE_CHANNEL;
        } else {
          rootPage = constants.PageNames.LEARN_CHANNEL;
        }
        this.clearSearch();
        this.$router.go(
          {
            name: rootPage,
            params: {
              channel_id: channelId,
            },
          }
        );
      },
      toggleMore() {
        this.more = !this.more;
      },
    },
    vuex: {
      getters: {
        rootTopicId: state => state.rootTopicId,
        topic: state => state.pageState.topic,
        isRoot: (state) => state.pageState.topic.id === state.rootTopicId,
        pageMode: getters.pageMode,
        pageName: state => state.pageName,
        currentChannelGetter: state => state.currentChannel,
        channelList: state => state.channelList,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        clearSearch: require('../../actions').clearSearch,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .toolbar
    position: fixed
    left: -15px
    top: 0
    width: 100%
    height: $learn-toolbar-height
    background: $core-bg-canvas
    z-index: 100
    transition: top 0.2s ease-in-out
    outline: 1px solid $core-bg-canvas // prevent box outline flicking on Chrome

  .toolbar-hide
    position: fixed
    left: -15px
    top: -40px

  .breadcrumbs
    position: relative
    bottom: 22px
    left: 120px
    @media screen and (max-width: $portrait-breakpoint)
      left: 1.3em

  .chan-select
    z-index: 1
    padding: 0.2em 0.8em
    padding-right: 1.8em
    min-width: 160px
    color: $core-text-annotation
    font-size: 0.9rem
    border: 1px solid $core-text-annotation
    border-radius: 0.5em
    background-color: $core-bg-canvas
    outline: none
    position: absolute
    top: 0.5rem
    right: 6em
    &:focus
      outline: $core-action-light 2px solid

  .search-btn
    position: absolute
    top: 0.1rem
    right: 1.2rem
    margin-right: 1em<commit_msg>Removed some styling on select.<commit_after><template>

  <div v-bind:class="['toolbar', displayToolbar ? 'toolbar-hide' : '']" v-show='!searchOpen'>
    <breadcrumbs class="breadcrumbs"></breadcrumbs>
      <label for="chan-select" class="visuallyhidden">{{ $tr('switchChannels') }}</label>
      <select
        name="chan-select"
        id="chan-select"
        class="chan-select"
        v-model="currentChannel">
        <option v-for="channel in channelList" :value="channel.id">{{ channel.name }}</option>
      </select>
    <search-button @scrolling="handleScroll" class='search-btn'></search-button>
  </div>

</template>


<script>

  const constants = require('../../state/constants');
  const getters = require('../../state/getters');
  const PageModes = constants.PageModes;

  module.exports = {

    $trNameSpace: 'learnToolbar',
    $trs: {
      switchChannels: 'Switch Channels',
    },

    data: () => ({
      currScrollTop: 0,
      lastScrollTop: 0,
      delta: 5,
      displayToolbar: false,
      more: false,
    }),
    components: {
      'search-widget': require('../search-widget'),
      'search-button': require('../search-widget/search-button'),
      'breadcrumbs': require('../breadcrumbs'),
    },
    computed: {
      /*
      * Get and set the current channel ID.
      */
      currentChannel: {
        get() {
          return this.currentChannelGetter;
        },
        set(newChannelId, oldChannelId) {
          if (newChannelId !== oldChannelId) {
            this.switchChannel(newChannelId);
          }
        },
      },
    },
    methods: {
      handleScroll(position) {
        this.position = position;
        this.currScrollTop = position.scrollTop;

        if (Math.abs(this.lastScrollTop - this.currScrollTop) <= this.delta) {
          return;
        }

        this.more = false;

        if (this.currScrollTop > this.lastScrollTop) {
          this.displayToolbar = true;
        } else {
          this.displayToolbar = false;
        }
        this.lastScrollTop = this.currScrollTop;
      },
      switchChannel(channelId) {
        let rootPage;
        this.more = false;
        if (this.pageMode === PageModes.EXPLORE) {
          rootPage = constants.PageNames.EXPLORE_CHANNEL;
        } else {
          rootPage = constants.PageNames.LEARN_CHANNEL;
        }
        this.clearSearch();
        this.$router.go(
          {
            name: rootPage,
            params: {
              channel_id: channelId,
            },
          }
        );
      },
      toggleMore() {
        this.more = !this.more;
      },
    },
    vuex: {
      getters: {
        rootTopicId: state => state.rootTopicId,
        topic: state => state.pageState.topic,
        isRoot: (state) => state.pageState.topic.id === state.rootTopicId,
        pageMode: getters.pageMode,
        pageName: state => state.pageName,
        currentChannelGetter: state => state.currentChannel,
        channelList: state => state.channelList,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        clearSearch: require('../../actions').clearSearch,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .toolbar
    position: fixed
    left: -15px
    top: 0
    width: 100%
    height: $learn-toolbar-height
    background: $core-bg-canvas
    z-index: 100
    transition: top 0.2s ease-in-out
    outline: 1px solid $core-bg-canvas // prevent box outline flicking on Chrome

  .toolbar-hide
    position: fixed
    left: -15px
    top: -40px

  .breadcrumbs
    position: relative
    bottom: 22px
    left: 120px
    @media screen and (max-width: $portrait-breakpoint)
      left: 1.3em

  .chan-select
    color: $core-text-annotation
    font-size: 0.9rem
    position: absolute
    top: 0.5rem
    right: 6em

  .search-btn
    position: absolute
    top: 0.1rem
    right: 1.2rem
    margin-right: 1em
{'fraction_non_alphanumeric': 0.13630245931726417, 'fraction_numerical': 0.010522451976018598, 'mean_word_length': 2.0671669793621015, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 55, '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': '3951248', 'n_tokens_mistral': 2588, 'n_tokens_neox': 2520, 'n_words': 501}