<commit_before><template lang="jade">
.component
  .ui.container
    
    #mobile-step.ui.sticky.mobile-step.thin-only
      // a.step(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx", v-bind:href="'#'+step.dataName")
      .ui.vertical.menu
        a.fitted.item(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx", :href="'#'+step.dataName")
          p {{step.label}}
    
    .ui.top.attached.big.steps.fat-only
      a.step(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx")
        .label {{step.label}}
        .number {{idx + 1}}

    .ui.segment(id="context" v-bind:class="{ 'basic': onMobile, 'attached': !onMobile}")
      Box(v-for="(step, idx) in steps", :list = "mySort(step.dataName)", :desc = "step.description", :label = "step.label", :name = "step.dataName", v-show="idx == myIdx || onMobile" @stickTo="onStickTo(idx, $event)")
  
</template>

<script>
import Box from './home_propTabs_Box.vue'

export default {
  name: 'proposalTab',
  props: ['allTopics'],
  components: {
    Box
  },
  data () {
    return {
      myIdx: 1, /* default tab */
      onMobile: false,
      steps: [
        {
          label: '即將開始',
          description: '在草案未形成前跳脫時間空間限制，擴大搜集利害相關人之意見',
          dataName: 'soon'
        },
        {
          label: '意見徵集',
          description: '邀請核心利害相關者參與諮詢會議，加入實體見面討論，一同將意見化為草案',
          dataName: 'discuss'
        },
        {
          label: '研擬草案',
          description: '將成熟的草案加強、寫成定案',
          dataName: 'curate'
        },
        {
          label: '送交院會',
          description: '送交立法院',
          dataName: 'deploy'
        },
        {
          label: '歷史案件',
          description: '追蹤審查進度與結果',
          dataName: 'history'
        },
      ]
    }
  },
  mounted:function() {
    // initialize sticky element
    $("#mobile-step.sticky").sticky({
      context: "#context",
      observeChanges: true,
      silent: true
    })
    // window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  methods: {
    mySort: function (dataName) { 
      let boxes;

      switch (dataName) {
        case "soon":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="即將開始"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;
          
        case "discuss":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="意見徵集"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "curate":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="研擬草案"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "deploy":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="送交院會"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "history":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="歷史案件"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;
      }

      return boxes;
    },
    onStickTo: function(idx, e){
      let el = "#mobile-step a[href='#"+e[0]+"']"
      $(el).parent().children().removeClass('active') 
      $(el).addClass('active')
      this.myIdx = idx
    },
    // handleScroll: function(){
    //   var mobile_steps = $("#mobile-step");
    //   if(mobile_steps.length>0)
    //   {
    //     mobile_steps.sticky('refresh');
    //     // mobile_steps[0].style.left="0px"
    //   }
    // },
    handleResize: function(){
      if(typeof window !== 'undefined') {
          this.onMobile = window.innerWidth < 768;
          this.myIdx = (this.onMobile) ? 0 : 1 /* default tab for mobile and screen */
      }
      else
          this.onMobile = false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../sass/global.scss";

.component {
  padding: 1em 0;
}

.ui.steps {

  .step {
    // make tab item flexible
    flex: 1 1 auto;
    overflow: hidden;
  }

  .number {
    // border-radius: 1em;
    // color: white;
    // background: $step_color;
    // font-size: 2em;
    font-family: $logo_font;
    font-weight: 700;
    // line-height: 1.2em;
    // width: 1.2em;
    // height: 1.2em;
    // margin: .2em .2em .2em 0;
    position: absolute;
    font-size: 10rem;
    color: fade_out($step_color, 0.5);
    margin: 0 0 0 -.6em;
  }

  .label {
    padding: .3em 0 0 .3em;
    z-index: 100;
  }

}


@media only screen and (max-width: $breakpoint) {
  .component {
    padding: 0px;
    border: 0px;<commit_msg>fix tab's number overflow in big vertical view<commit_after><template lang="jade">
.component
  .ui.container
    
    #mobile-step.ui.sticky.mobile-step.thin-only
      // a.step(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx", v-bind:href="'#'+step.dataName")
      .ui.vertical.menu
        a.fitted.item(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx", :href="'#'+step.dataName")
          p {{step.label}}
    
    .ui.top.attached.big.steps.fat-only
      a.step(v-for="(step, idx) in steps", :class="{'active': idx == myIdx}", @click="myIdx = idx")
        .label {{step.label}}
        .number {{idx + 1}}

    .ui.segment(id="context" v-bind:class="{ 'basic': onMobile, 'attached': !onMobile}")
      Box(v-for="(step, idx) in steps", :list = "mySort(step.dataName)", :desc = "step.description", :label = "step.label", :name = "step.dataName", v-show="idx == myIdx || onMobile" @stickTo="onStickTo(idx, $event)")
  
</template>

<script>
import Box from './home_propTabs_Box.vue'

export default {
  name: 'proposalTab',
  props: ['allTopics'],
  components: {
    Box
  },
  data () {
    return {
      myIdx: 1, /* default tab */
      onMobile: false,
      steps: [
        {
          label: '即將開始',
          description: '在草案未形成前跳脫時間空間限制，擴大搜集利害相關人之意見',
          dataName: 'soon'
        },
        {
          label: '意見徵集',
          description: '邀請核心利害相關者參與諮詢會議，加入實體見面討論，一同將意見化為草案',
          dataName: 'discuss'
        },
        {
          label: '研擬草案',
          description: '將成熟的草案加強、寫成定案',
          dataName: 'curate'
        },
        {
          label: '送交院會',
          description: '送交立法院',
          dataName: 'deploy'
        },
        {
          label: '歷史案件',
          description: '追蹤審查進度與結果',
          dataName: 'history'
        },
      ]
    }
  },
  mounted:function() {
    // initialize sticky element
    $("#mobile-step.sticky").sticky({
      context: "#context",
      observeChanges: true,
      silent: true
    })
    // window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  methods: {
    mySort: function (dataName) { 
      let boxes;

      switch (dataName) {
        case "soon":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="即將開始"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;
          
        case "discuss":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="意見徵集"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "curate":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="研擬草案"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "deploy":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="送交院會"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;

        case "history":
          boxes = this.allTopics.slice()
            .filter((topic)=>{
              return topic.status==="歷史案件"
            })
            .sort(function(a,b) {
              return 1; 
              // replace this by other logic...
            }).slice(0,8);
          break;
      }

      return boxes;
    },
    onStickTo: function(idx, e){
      let el = "#mobile-step a[href='#"+e[0]+"']"
      $(el).parent().children().removeClass('active') 
      $(el).addClass('active')
      this.myIdx = idx
    },
    // handleScroll: function(){
    //   var mobile_steps = $("#mobile-step");
    //   if(mobile_steps.length>0)
    //   {
    //     mobile_steps.sticky('refresh');
    //     // mobile_steps[0].style.left="0px"
    //   }
    // },
    handleResize: function(){
      if(typeof window !== 'undefined') {
          this.onMobile = window.innerWidth < 768;
          this.myIdx = (this.onMobile) ? 0 : 1 /* default tab for mobile and screen */
      }
      else
          this.onMobile = false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../sass/global.scss";

.component {
  padding: 1em 0;
}

.ui.steps {

  .step {
    // make tab item flexible
    flex: 1 1 auto;
    overflow: hidden;
  }

  .number {
    // border-radius: 1em;
    // color: white;
    // background: $step_color;
    // font-size: 2em;
    font-family: $logo_font;
    font-weight: 700;
    // line-height: 1.2em;
    // width: 1.2em;
    // height: 1.2em;
    // margin: .2em .2em .2em 0;
    position: absolute;
    font-size: 10rem;
    color: fade_out($step_color, 0.5);
    margin: 0 0 0 -30%;
  }

  .label {
    padding: .3em 0 0 .3em;
    z-index: 100;
  }

}


@media only screen and (max-width: $breakpoint) {
  .component {
    padding: 0px;
    border: 0px;
{'fraction_non_alphanumeric': 0.1670750094232944, 'fraction_numerical': 0.011779117979645684, 'mean_word_length': 1.6847963571970654, 'pattern_counts': {'":': 10, '<': 15, '<?xml version=': 0, '>': 25, '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': '2473945', 'n_tokens_mistral': 3719, 'n_tokens_neox': 3678, 'n_words': 700}