vuepress-playground/lib/index.js

vuepress demo box

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,function(){"use strict";function hashChangeHandler(e){var t=window.history.pushState;window.history.pushState=function(s){return"function"==typeof window.history.onpushstate&&window.history.onpushstate({state:s}),setTimeout(function(t){e()},0),t.apply(window.history,arguments)}}function createElement(e,t){var s=document.createElement(e);return t&&Object.keys(t).forEach(function(e){s[e]=t[e]}),t&&t.__children&&t.__children.forEach(function(e){var t=createElement(e.tag,e.attrs);s.appendChild(t)}),s}var _once={};function injectCss(e){if(!_once[e]){var t=createElement("style",{innerHTML:e});document.body.appendChild(t),_once[e]=!0}}var defaultSettings={jsLib:[],cssLib:[],vue:"https://unpkg.com/vue/dist/vue.min.js",jsfiddle:!0,codepen:!0,codepenLayout:"left",codepenJsProcessor:"babel",codepenEditors:"101"};function getSettings(e){return window.$vuepressPlayground?window.$vuepressPlayground[e]:defaultSettings[e]}function getJsfiddleBtn(e){var t=e.css,s=e.htmlTpl,n=e.jsTpl,a=e.jsLib,r=e.cssLib;return createElement("form",{className:"vuepress-playground-jsfiddle",target:"_blank",action:"https://jsfiddle.net/api/post/library/pure/",method:"post",__children:[{tag:"input",attrs:{type:"hidden",name:"css",value:t}},{tag:"input",attrs:{type:"hidden",name:"html",value:s}},{tag:"input",attrs:{type:"hidden",name:"js",value:n}},{tag:"input",attrs:{type:"hidden",name:"panel_js",value:3}},{tag:"input",attrs:{type:"hidden",name:"wrap",value:1}},{tag:"input",attrs:{type:"hidden",name:"resources",value:a.concat(r).concat(getSettings("cssLib")).concat(getSettings("jsLib")).join(",")}},{tag:"button",attrs:{type:"submit",className:"vuepress-playground-btn-text",innerHTML:"JsFiddle"}}]})}function getCodepenBtn(e){var t=e.css,s=e.htmlTpl,n=e.jsTpl,a=e.jsLib,r=e.cssLib;return createElement("form",{className:"vuepress-playground-codepen",target:"_blank",action:"https://codepen.io/pen/define",method:"post",__children:[{tag:"input",attrs:{type:"hidden",name:"data",value:JSON.stringify({css:t,html:s,js:n,js_external:a.concat(getSettings("jsLib")).join(";"),css_external:r.concat(getSettings("cssLib")).join(";"),layout:getSettings("codepenLayout"),js_pre_processor:getSettings("codepenJsProcessor"),editors:getSettings("codepenEditors")})}},{tag:"button",attrs:{type:"submit",innerHTML:"Codepen",className:"vuepress-playground-btn-text"}}]})}var toArray=function(e){return Array.prototype.slice.call(e)};function getHtmlTpl(e){return'<div id="app">\n'+e+"\n</div>"}function getJsTpl(e){return"new Vue({\n  el: '#app',\n  "+e.replace(/export default \{\n/,"").replace(/\n}$/,"").trim()+"\n})"}function getDetail(e){var t=e.dataset.code.replace(/##double-quotes##/g,'"').replace(/##line-break##/g,"\n"),s=t.match(/<style>([\s\S]+)<\/style>/),n=t.match(/<template>([\s\S]+)<\/template>/),a=t.match(/<script>([\s\S]+)<\/script>/),r=t.match(/<js-lib>([\s\S]+)<\/js-lib>/),i=t.match(/<css-lib>([\s\S]+)<\/css-lib>/),p={css:s&&s[1].replace(/^\n|\n$/g,""),html:n&&n[1].replace(/^\n|\n$/g,""),js:a&&a[1].replace(/^\n|\n$/g,""),jsLib:r&&r[1].trim().split(/\n/)||[],cssLib:i&&i[1].trim().split(/\n/)||[]};p.htmlTpl=getHtmlTpl(p.html),p.jsTpl=getJsTpl(p.js);var l=getSettings("vue");return p.jsLib.push(l),p}function getScriptObj(_ref){var js=_ref.js,html=_ref.html,scripts=js.split("export default"),scriptStrOrg="(function() {"+scripts[0]+" ; return "+scripts[1]+"})()",scriptStr=window.Babel?window.Babel.transform(scriptStrOrg,{presets:["es2015"]}).code:scriptStrOrg,scriptObj=eval(scriptStr);return scriptObj.template=html,scriptObj}hashChangeHandler(init),window.addEventListener("load",init),window.addEventListener("popstate",init);var classNames={showlink:"vuepress-playground-control-box-show-link",code:"vuepress-playground-code-box",wrapper:"vuepress-playground-wrapper",display:"vuepress-playground-display-box",control:"vuepress-playground-control-box",expand:"vuepress-playground-expand-btn",btn:"vuepress-playground-btn-text",expandText:"vuepress-playground-expand-text"};function init(){toArray(document.querySelectorAll("."+classNames.code)).forEach(function(e){var t=e.querySelector("pre"),s=e.parentNode,n=createElement("div",{className:classNames.wrapper}),a=createElement("div",{className:classNames.display}),r=createElement("button",{className:classNames.expand+" "+classNames.btn,__children:[{tag:"span",attrs:{innerHTML:"展开",className:classNames.expandText}}]}),i=createElement("div",{className:classNames.control}),p=createElement("div"),l=t.clientHeight,c=getDetail(t);injectCss(c.css);var o=getScriptObj(c);r.dataset.isExpand="0",i.appendChild(r),getSettings("jsfiddle")&&i.appendChild(getJsfiddleBtn(c)),getSettings("codepen")&&i.appendChild(getCodepenBtn(c)),a.appendChild(p),s.insertBefore(n,e),n.appendChild(a),n.appendChild(e),n.appendChild(i),new window.Vue(Object.assign({el:p},o)),r.addEventListener("click",function(t){var s="0"===r.dataset.isExpand;r.querySelector("."+classNames.expandText).innerHTML=s?"关闭":"展开",e.style.height=s?l+"px":0,s?i.classList.add(classNames.showlink):i.classList.remove(classNames.showlink),r.dataset.isExpand=s?"1":"0"})})}});