hadith_ui/pages/hadith/favorites/[id]/[slug]/index.vue

<template>
  
  <div class="wrapper detail-page">
    <div class="detail-page__header" style="padding-top: 10px !important">
      <div class="detail-page__nav container-fluid">
        <ul class="list-unstyled">
        
        </ul>
      </div>
    </div>



  

  <div ref="filterdiv" class="detail-page__filters div-meno" style="top: 80px">
    

    <button
    id="m1"
   style="border-radius: 50%;"
   
    class="btn buttonshow"
    @click.prevent="showfilter"
  >
  <span class="tavasi tavasi-Component-356--1"></span>
  </button>

    <button
    id="m2"
  
   
    class="btn buttonclose  rounded-circle "
    @click.prevent="hidefilter"
  >
  <span class="tavasi tavasi-Component-21--1"></span>
  </button>

    <div>
      <div class="scrollbar"
    
     
      v-if="showAitem">
        <p v-for="(item, i) in listindexs" :key="i">
          <span v-html="item"></span>
        </p>
        <!-- <button type="bu" @click.prevent="hidefilter" class="text__15  btn btn-default popUp-tab__clear button_giveup">
          <svg
            data-v-46e9fe5b=""
            data-testid="chevron-double-lg-left-icon"
            class="s12 icon-chevron-double-lg-left "
          >
            <use
              data-v-46e9fe5b=""
              href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
            ></use>
          </svg>
          &nbsp; بستن
        </button> -->
      </div>
    </div>
  </div>

  

    <div>
      <div class="detail-page__content" style="padding-top: 80px">
        <div class="detail-page__tab-content">
         

          <div class="search-items">
            <div class="search-items__item">
           
              <h1 class="text__14 text__dark-blue">{{ title }}</h1>
              <br />
              <div v-if="paragraphs.length > 0">
                <p
                  v-for="(paragraph, i) in paragraphs"
                  :key="i"
                  style="line-height: 30px"
                >
                  <span v-html="paragraph"></span>
                </p>
              </div>
              <h3 v-else class="text__14 text__dark-gray">
                این جلسه متن ندارد
              </h3>
           
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>
export default {
  name: "ShowText",
  props: ["index", "textSearch"],
  data() {
    return {
      datainput: [],
      initdata: false,
      indexitem: this.index,
      searchText: this.textSearch,
      text: "",
      text2: "",
      showAitem: true,
      showStatus: 1,
    };
  },

  created: function () {
    let data = JSON.parse(localStorage.getItem("answer"));
    this.datainput = data[this.indexitem]._source;
  },
  computed: {
    paragraphs() {
      this.text = this.datainput.content;

      if (this.text.length > 0) {
        this.text2 = this.getHighlight(this.text);
        return this.text2.split("\n");
      }
      return [];
    },
    listindexs() {
      var list = this.getHighlight(this.datainput.mindex);
      return list.split("\n");
    },
    title() {
      if (this.datainput.title)
        return `${this.datainput.title} (کد جلسه:  ${this.datainput.meet_code})`;
      else
        return `${this.datainput.subtitle} (کد جلسه:  ${this.datainput.meet_code})`;
    },
  },
  
  mounted() {
    //////this.setsummary();
    //this.$refs.summarytext.setInfo(this.datainput);
    this.initdata = true;
   
  },
  methods: {
    showfilter: function () {
      // this.$refs.filterdiv.classList.add("show");
      this.showAitem = true;
      this.showStatus = 1;
      document.getElementById("m1").style.display = "none";
      document.getElementById("m2").style.display = "inline-block";

    },
    hidefilter: function () {
      // this.$refs.filterdiv.classList.remove("show");
      this.showAitem = false;
      this.showStatus = 2;
      document.getElementById("m1").style.display = "inline-block";
      document.getElementById("m2").style.display = "none";
      
      //       if(showAitem=false){
      // this.showfilter=!this.showfilter;
      //       }
    },
    getHighlight(text) {
      var words = this.searchText.split(" ");
      var index = 1;
      words.forEach((w) => {
        if (w == "" || w == " ") {
          return;
        }
        let classname = `searchHilight${index}`;
        text = text.replaceAll(
          w,
          "<span class='" + classname + "'>" + w + "</span>"
        );
        var w1 = this.normalize(w);
        if (w1 != w) {
          text = text.replaceAll(
            w1,
            "<span class='" + classname + "'>" + w1 + "</span>"
          );
        }
        index = index + 1;
        if (index > 5) index = 1;
      });
      return text;
    },
    normalize(item) {
      item = item.replaceAll("،", "");
      item = item.replaceAll(":", "");
      item = item.replaceAll(".", "");

      item = item.replaceAll("ک", "ك");
      item = item.replaceAll("ی", "ي");
      item = item.replaceAll("إ", "ا");
      item = item.replaceAll("أ", "ا");
      item = item.replaceAll("آ", "ا");
      item = item.replaceAll("ة", "ت");
      return item;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-system {
  .detail-page__content {
    top: 0;
  }
}

@media screen and (min-width: 992px) {
  .detail-page .detail-page__content .detail-page__tab-content .search-items {
    height: calc(100vh - 8em) !important;
    overflow: auto;
  }
}
.buttonclose {
 
  position: relative;
  right: 5px;
  width: 50px;
  height: 50px;
  z-index: 99999;

}
.buttonclose span{
font-size: 35px;
color: black;


}
.buttonshow span{
  color: black;
  
  }
.buttonshow {
  position: relative;
  color:inherit;
  right: 5px;
  width: 50px;
  height: 50px;
  z-index: 99999;
}
.div-meno{
  background-color: #f9f9f9 !important;
}

#m1{
  display: none;
}


</style>