🏠️Top Page

if (maincontent = document.querySelectorAll('#main_content > p')) {
    let words = [...document.querySelectorAll('.zip358tag > a')].map((elm) => {
        return elm.textContent;
    });
    if (words.length) {
        [...maincontent].forEach((maincontentElm) => {
            words.forEach((word) => {
                const regexp = new RegExp(word, 'g');
                if (maincontentElm.querySelectorAll('a').length === 0 && maincontentElm.querySelectorAll('img').length === 0) {
                    maincontentElm.innerHTML = maincontentElm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
                } else {
                    nodeReplace(maincontentElm, regexp, words, word);
                }
            });
        });
    }
}

function nodeReplace(elm, regexp, words, word) {
    let key = [];
    if (elm.querySelectorAll('a').length) {
        [...elm.querySelectorAll('a')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }
    if (elm.querySelectorAll('img').length) {
        [...elm.querySelectorAll('img')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }

    if (nodeElmJudge(word, key) === true) {
        elm.innerHTML = elm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
    }
}

function nodeElmJudge(word, key) {

    let result = [];
    result.push(...key.map(element => {
        const regex = new RegExp(word, 'g');
        return regex.test(element);
    }));
    return result.every(e => e === false);
}

strong.highlight{
    background: linear-gradient(transparent 40%, #2ff6da 40%);
}

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const Evaluation = {
    props: {
      defaultActive: {
        type: Number,
        required: true
      },
      totalItems: {
        type: Number,
        required: true
      },
      avgVal:{
        type:Number,
        required:true
      }
    },
    data() {
      return {
        defaultActived: null,
        items: []
      };
    },
    created() {
      // HTMLから渡された値を基に、初期の状態を設定
      this.items = Array.from({ length: this.totalItems }, (v, i) =>{
        return (i + 1) <= this.defaultActive ? '★' : '☆';
      }
      );
    },
    methods: {
      // マウスが触れた時に☆を★に変える
      hover(index) {
        this.items = Array.from({ length: this.totalItems }, (v, i) =>
            i <= index ? '★' : '☆'
        );
        document.getElementById('evaluationVal').setAttribute('data-val',index);
      },
      // マウスが離れた時に元の値に戻す
      onclick() {       
        let i = Math.floor(document.getElementById('evaluationVal').getAttribute('data-val')) + 1;
         (async (i) =>{
            let frm = new FormData();
            frm.append('id',document.querySelector('#evaluation_id').getAttribute('data-id'));
            frm.append('val',i);
            let res = await fetch('/evaluation/index.php',{
                method:'post',
                body:frm
            }).then(result=>result.json());
            alert(res.msg);
            if(Math.floor(res.flg) === 1){
              const roundToDecimal = (number, decimalPlaces) =>{
                const multiplier = Math.pow(10, decimalPlaces);
                return Math.round(number * multiplier) / multiplier;
              } 
              document.getElementById('evaluationAvgVal').textContent = roundToDecimal(res.avgVal,2);
              this.defaultActived = res.avgVal;
              this.reRender();
            }
            
        })(i);
      }, 
      reRender() {
        // HTMLから渡された値を基に、初期の状態を設定
        this.items = Array.from({ length: this.totalItems }, (v, i) =>{
            return (i + 1) <= this.defaultActived ? '★' : '☆';
          }
        );
      }    
    },
    template: `
      <div>
        <span v-for="(item, index) in items" :key="index">
          <span
            @mouseover="hover(index)"
          >
            {{ item }}
          </span>
        </span>
        [<span  id='evaluationAvgVal'>{{this.avgVal}}</span>]
        <button @click="onclick()"
         id='evaluationVal'
         data-val='5'
         class='bbtn'
         title="★に触れることで評価の変更が出来ます．"
         >評価する</button>
      </div>
    `
  };
  const app = createApp({});
  app.component('evaluation', Evaluation);
  app.mount('#evaluation');