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

try to take over the world!

当前为 2020-03-21 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 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;
    }

    })();