扩展设计器网页审核回复模版

try to take over the world!

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         扩展设计器网页审核回复模版
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  try to take over the world!
// @author       You
// @match        https://ext.mblock.cc/
// @match        https://ext.makeblock.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


    // Your code here...
    window.onload = ()=>{
        addjQuery(()=>{
            allFunction();
        });
    }

function allFunction(){
    //add css
    let style = document.createElement('style');
    let allData;
    let csss = `
      .button-reply {
          z-index: 1; position: fixed; top: 60px; z-index: 999 !important; right: 20px;
       }
      .aside {
        padding: 105px 0 20px; background: white;
        width: 300px; height: 100%; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .4s; z-index: 2; box-shadow: -2px 2px 5px 0 rgba(0,0,0,.4);
        overflow-y: auto;
       }
      .aside.active {transform: translateX(0%);}
      .each-rw {padding: 15px 15px; border-bottom: 1px solid rgba(0,0,0,0.1); cursor: pointer;}
      .each-rw:hover {background: #f2f8ff;}
      .hint {color: #b2b2b2;}
      .copiedPrompt {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 70px;
        color: red;
        opacity: 0;
        padding: 10px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0 10px 24px rgba(8, 15, 26, 0.16);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
       }
      .copiedPrompt.active {opacity: 1;}
      label.filter {display: inline-block;padding: 3px 10px;cursor: pointer;}
      .switch-wrap {display:flex; flex-wrap: wrap;}
    `
    style.innerText = csss;
    document.head.appendChild(style);



    //mock data
   /* let data = [{
      text: 'Congrats! You could create demos based on your extension in the community: http://planet.mblock.cc/, and then paste the demo work link into your "extesion homepage" section in the extension builder.',
      hint: "当用户扩展审核通过时"
    },{
      text: "Congrats your extension passed. However, please add more content (like blocks) for your extension to make it better and more interesting for users of mBlock",
      hint: "当扩展积木较少,但是没有大问题时"
    },{
      text: "Congrats your extension passed. However, please choose a meaningful cover that is more related to the functionality of your extension. This will help others know what your extension is about.",
      hint: "当扩展没有大问题,但封面图片不相关或者无实际意义时"
    },{
      text: "Congrats! However, please add more details for your next update. We will release an extension market soon, those description will be important as your extension info.",
      hint: "当扩展没有大问题,但更新说明过于简短时"
    },];

    let zhData = [{
      text: '审核通过!如果想让更多人学会使用您的扩展,可以到作品社区使用您的扩展创建作品,展示如何使用您的扩展:http://mblock.makeblock.com/ 然后可以在扩展设计器中将作品主页链接更新到扩展主页一栏,方便使用者查看案例',
      hint: "当用户扩展审核通过时"
    },{
      text: "恭喜您的扩展审核通过,但是内容仍然需要一定程度的完善和丰富,建议您可以多增加一些积木。",
      hint: "当扩展积木较少,但是没有大问题时"
    },{
      text: "恭喜您的扩展审核通过,但是出于扩展展示的目的,请您为自己的扩展更换更合适,更能表现您扩展特色,以及增加扩展吸引力的封面",
      hint: "当扩展没有大问题,但封面图片不相关或者无实际意义时"
    },];
    */



    //
     console.log("you‘re using扩展设计器网页脚本")
    let aside = document.createElement('div'); /*侧边栏*/
    let reviewWrap = document.createElement('div'); /*侧边栏里wrap*/
    aside.classList.add('aside');
    
    document.body.appendChild(aside); /*页面插入checkbox*/

    fillInCategory(); /*植入checkbox*/
    aside.appendChild(reviewWrap); /*植入评论wrap*/
    reviewWrap.classList.add('reviews');

    let asideState = false /*侧边栏状态*/

    let copiedPrompt = document.createElement('p'); /*已复制 提示文字*/
    copiedPrompt.classList.add('copiedPrompt');
    //copiedPrompt.textContent = '已填充回复!'
    copiedPrompt.textContent = '已复制到剪切板!'

    let btnEl = document.createElement('button'); /*弹出按钮*/
    btnEl.textContent = '回复模版'
    btnEl.classList.add('button-reply')
    btnEl.classList.add('ant-btn')
    btnEl.classList.add('ant-btn-primary')
    btnEl.classList.add('ant-btn-lg')
    btnEl.setAttribute('id','template')
//    console.log(btnEl);
    document.body.appendChild(btnEl);
    btnEl.addEventListener('click', (e)=>{
      switchPopState(asideState);
      asideState = !asideState;
      e.stopPropagation();
    })
    document.body.addEventListener('click', ()=>{
      if(asideState) switchPopState(true);
      asideState = false;
    })
    aside.addEventListener('click', (e)=>{
     e.stopPropagation();
    })


    //将数据放入侧边栏中
   // window.addEventListener('load', ()=>{

    fetch('https://hobart.avosapps.us/api/audit/content/query')
        .then(e=>e.json())
        .then((e)=>{
          console.log(e)
          let {data} = e;
          allData = data;
          dataToDOM(data)
          aside.parentNode.appendChild(copiedPrompt);
      })

   // })
    
    showExtensionID();


    /*
    *评论数据DOM渲染
    */
    function dataToDOM(data){
    let els = document.createDocumentFragment();
     $('.aside .reviews').empty();
     data.forEach(e=>{
      let el = `
        <div class='each-rw' title='点击以填充到评论框'>
          <p class='text'>${e.text}</p>
          <p class='hint'>${'注: '+e.hint}</p>
        </div>
       `
      let $el = $(el)
      els.appendChild($el[0]);

      $el.on('click', ()=>{
        let $reason = document.querySelector('#reason');
        if(!$reason) {
          copiedPrompt.textContent = '请先打开评论框'
          triggerToast(3000);
          return
        };
        
        //$reason.value = e.text;
        triggerToast(3000);
       copyText(e.text, ()=>{
           copiedPrompt.textContent = '已复制到剪切板!'
           triggerToast(3000);
       })
      })
    })
      reviewWrap.appendChild(els);
    }

    /*
    *切换侧边栏弹出方法
    */
    function switchPopState(state){
       if(!state) {
          aside.classList.add('active')
          btnEl.innerText = '关闭'
       }else{
          aside.classList.remove('active')
          btnEl.innerText = '回复模版'
       }
    }

    /*复制到剪切板*/
    function copyText(text, callback){ // text: 要复制的内容, callback: 回调
        var tag = document.createElement('input');
        tag.setAttribute('id', 'cp_hgz_input');
        tag.value = text;
        document.getElementsByTagName('body')[0].appendChild(tag);
        document.getElementById('cp_hgz_input').select();
        document.execCommand('copy');
        document.getElementById('cp_hgz_input').remove();
        if(callback) {callback(text)}
    }

   /*触发提示框*/
   function triggerToast(time){
    if(!time) time = 3000;
    copiedPrompt.classList.add('active');
       let id = setTimeout(()=>{
          copiedPrompt.classList.remove('active');
          window.clearTimeout(id);
       },time)
   }

   /*填充分类选项*/
   function fillInCategory(){
    let categoryDOM = `
        <div class='switch-wrap'>
            <label for='ad_Checkbox1' class='filter'>所有
                <input name="selector[]" id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="all" checked/>
           </label>
            <label for='ad_Checkbox2' class='filter'>
            中文
            <input name="selector[]" id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="zh" />
            </label>
            <label for='ad_Checkbox3' class='filter'>
                英文
            <input name="selector[]" id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="en" />
            </label>
           <label for='ad_Checkbox4' class='filter'>
                通过
            <input name="selector[]" id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="1" />
            </label>
          <label for='ad_Checkbox5' class='filter'>
            不通过
            <input name="selector[]" id="ad_Checkbox5" class="ads_Checkbox" type="checkbox" value="0" />
        </label>
        </div>
        `
    let $categoryDOM = $(categoryDOM);
    $(aside).append($categoryDOM[0]);

    $('.ads_Checkbox').on('change', function(){
        var val = [];
        $(':checkbox:checked').each(function(i){
          val[i] = $(this).val();
        });
        if(val.includes('all')) {
            dataToDOM(allData)
        }else{
         let data = Datafilter(val, allData);
         dataToDOM(data);
        }
     });


   }
}



    function showExtensionID(){
      $('.table-list-item').each((index,e)=>{
        let href = $(e).find('.list-cell a').attr('href');
         if(href) {
             let id = href.split('/');
            id = id[id.length-1];
            id = id.replace('.mext', "");
             $(e).append(`<div>ID: ${id}</div>`)
         };
      })
    }

    function Datafilter(val, allData){
      console.log(val);
        let data = [];
       if(val.length && val.length > 0) {
         allData.forEach(e=>{
           val.forEach(i=>{
               if(i === '0' || i === '1') { i = i - 0; console.log(i)}
            if(e.lang === i || e.resloveType === i) {
              data.push(e)
            }
           })
         })
       }
        return data
    }


    /*移动按钮位置*/
//     dragElement(document.getElementById("template"));

//     function dragElement(elmnt) {
//         console.log(elmnt);
//       var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
//       elmnt.addEventListener('mousedown', dragMouseDown);

//       function dragMouseDown(e) {
//           console.log(e)
//         e = e || window.event;
//         e.preventDefault();
//         // get the mouse cursor position at startup:
//         pos3 = e.clientX;
//         pos4 = e.clientY;
//         document.onmouseup = closeDragElement;
//         // call a function whenever the cursor moves:
//         document.onmousemove = elementDrag;
//       }

//       function elementDrag(e) {
//         e = e || window.event;
//         e.preventDefault();
//         // calculate the new cursor position:
//         pos1 = pos3 - e.clientX;
//         pos2 = pos4 - e.clientY;
//         pos3 = e.clientX;
//         pos4 = e.clientY;
//         // set the element's new position:
//         elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
//         elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
//       }

//       function closeDragElement() {
//         // stop moving when mouse button is released:
//         document.onmouseup = null;
//         document.onmousemove = null;
//       }
//     }


    /*添加jQuery*/
    function addjQuery(fn){
      let location = window.location;
        let jQueryURL;
        if(location.host === 'ext.mblock.cc') {
            jQueryURL = `https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js`
        }else {
            jQueryURL = `https://code.jquery.com/jquery-3.4.1.min.js`
        };
        let JQscript = document.createElement('script');
        JQscript.type = 'text/javascript';
        document.body.appendChild(JQscript);
        JQscript.onload = fn;
        JQscript.src = jQueryURL;
    }

    })();