Online IDE Support JS

Injects elements into a codepen IDE for demonstration purposes
目前為 2022-01-10 提交的版本，檢視最新版本。
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/438329/1007296/Online%20IDE%20Support%20JS.js
發表問題、評論、或檢舉該腳本。
換行
// BEGIN SUPPORTING CODE
let delay = 0;
let combinedSteps = `unset`;
let pen = {
  nav: undefined,
  cmd: undefined,
  log: undefined,
  hide: ()=> {
    pen.nav && (pen.nav.classList.add(`penHidden`));
    pen.cmd && (pen.cmd.classList.add(`penHidden`));
    pen.log && (pen.log.classList.add(`penHidden`));
  },
};
const cmdInfo = {
  id: `instructions`,
}
const logInfo = {
  id: `logText`,
  class: `logContainer`
}
const navInfo = {
  id: `penNav`,
  class: `penNavigation`,
}

const action = (msgcmd, combine) => {
  const penHeader = document.getElementById(cmdInfo.id);
  const stime = 3000;
  combine = combine === `combine` ? true : false;

  if (combine) {
    combinedSteps !== true && (delay += stime);
    combinedSteps = true;
  } else if(combinedSteps == `unset`) {
    delay += stime;
  } else if(combinedSteps === true) {
    delay += stime/4;
    combinedSteps = false;
  }
  setTimeout(()=> {
    if (typeof msgcmd === `string`) {
      penHeader.classList.add(`pulse`);
      penHeader.innerHTML = msgcmd;
      setTimeout(() => {penHeader.classList.remove(`pulse`)}, 1000)
    } else {
      msgcmd();
    }
  }, delay);
};

const consoleLog = (msg) => {
  const logEl = document.getElementById(logInfo.id);
  logEl.value = `${msg}\n${logEl.value}`
};

const createElement = (nodeType, props) => {
  const domNode = document.createElement(nodeType);
  if (props && "object" === typeof props) {
    for (const prop in props) {
      if (prop === "html") {
        domNode.innerHTML = props[prop];
      } else if (prop === "text") {
        domNode.textContent = props[prop];
      } else {
        if (prop.slice(0, 5) === "aria_" || prop.slice(0, 4) === "data_") {
          const attr = prop.slice(0, 4) + "-" + prop.slice(5);
          domNode.setAttribute(attr, props[prop]);
        } else {
          domNode.setAttribute(prop, props[prop]);
        }
      }
      // Set attributes on the element if passed
      if (["role", "aria-label"].includes(prop)) domNode.setAttribute(prop, props[prop]);
    }
  }
  return domNode;
};

const initialize = () => {
  // Add UI elements if not provided
  if (!document.getElementById(logInfo.id)) {
    const logEl = createElement(`div`, {
      class: `${logInfo.class} logClosed`,
    });
    const logLabel = createElement(`div`, {
      id: `${logInfo.id}Label`,
      class: `${logInfo.class}Label`,
      text: `console`
    });
    logEl.appendChild(logLabel);
    const textEl = createElement(`textarea`, {
      id: logInfo.id,
    });
    logEl.appendChild(textEl);
    document.querySelector(`body`).prepend(logEl);
    
    logLabel.addEventListener(`click`, (e) => {
      logEl.classList.toggle('logClosed');
    })
  }

  if (!document.getElementById(cmdInfo.id)) {
    const instrEl = createElement(`h5`, {
      id: cmdInfo.id,
      text: ``,
    });
    document.querySelector(`body`).prepend(instrEl);
  }

  if (!document.getElementById(navInfo.id)) {
    const navEl = createElement(`div`, {
      class: navInfo.class,
      id: navInfo.id,
    });
    document.querySelector(`body`).prepend(navEl);
  }

  pen.nav = document.getElementById(navInfo.id);
  pen.cmd = document.getElementById(cmdInfo.id);
  pen.log = document.getElementById(logInfo.id);
};

const addPenButton = (lText, lAction) => {
  if (typeof lText === `string`) {
    const newButton = createElement(`button`, {
      class: `dds__button dds__button--sm`,
      text: lText
    });
    newButton.addEventListener(`click`, (e) => {
      lAction();
    });
    pen.nav.appendChild(newButton);
  } else { // presume we are moving an existing element to the pen nav
    pen.nav.appendChild(lText);
  }
};

const runDemo = (demo) => {
  consoleLog(`\n${demo.selector} has the following events: ${demo.events}`);

  demo.events.forEach((ev)=>{
    document.addEventListener(ev, (e)=> {
      consoleLog(ev, e);
    })
  })

  let hasDispose = false;
  Object.keys(demo.component).forEach(key=>{
    if (typeof demo.component[key] === `function`) {
      if (key !== `dispose`) {
        addPenButton(key, demo.component[key]);
      } else {
        hasDispose = true;
      }
    } else {
      consoleLog(`
${demo.selector} has the property:
.${key} = ${demo.component[key]}
(open console to see more details)`);
      console.log(demo.component[key]);
    }
  })

  hasDispose && (addPenButton(`dispose`, ()=>{
    demo.component[`dispose`]();
    pen.nav.querySelectorAll(`button`).forEach(b=>b.disabled = `true`);
  }));
};

initialize();

// END SUPPORTING CODE

/*
  pen.hide();
*/
/*
runDemo({
  selector: `more-less`,
  events: [`ddsMoreLessExpandEvent`, `ddsMoreLessCollapseEvent`],
  component: {
    property1: `soidjsoaidjo`,
    method1: ()=>{}
  },
});
*/
欢迎访问Greasy Fork镜像
