작은숲:HTML샌드박스/Excalidraw/main.js: 두 판 사이의 차이
(Senouis님이 작은숲:HTML샌드박스/Excalidraw/loader.js 문서의 콘텐츠 모델을 "위키텍스트"에서 "자바스크립트"(으)로 바꾸었습니다: JS 코드임) 태그: 콘텐츠 모델 변경 |
(Promise.all로 단축) |
||
| (같은 사용자의 중간 판 2개는 보이지 않습니다) | |||
| 4번째 줄: | 4번째 줄: | ||
// 이 코드 역시 MIT 라이선스를 따릅니다. | // 이 코드 역시 MIT 라이선스를 따릅니다. | ||
function asyncJSLoader(url, type) { | |||
function asyncJSLoader(url, type) { | |||
return new Promise(function (resolve, reject) { | return new Promise(function (resolve, reject) { | ||
try { | try { | ||
| 31번째 줄: | 30번째 줄: | ||
function LoadExcalidraw(){ | function LoadExcalidraw(){ | ||
if (!document.getElementById("excalidraw-container")) return; | if (!document.getElementById("excalidraw-container")) return; | ||
asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript") | Promise.all([asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript")]) | ||
.then(function(result) { | |||
console.log("모든 스크립트 로딩 완료! Excalidraw 실행 시도합니다."); | |||
var height_canvas = window.screen.height >= 800 ? "800px" : Math.floor(window.screen.height*0.8).toString() + "px"; | |||
var App = function () { | |||
return React.createElement( | |||
React.Fragment, | |||
null, | |||
React.createElement( | |||
"div", | |||
{ | |||
style: { height: height_canvas }, | |||
}, | |||
React.createElement(ExcalidrawLib.Excalidraw) | |||
) | |||
); | |||
}; | |||
var excalidrawWrapper = document.getElementById("app"); | |||
var root = ReactDOM.createRoot(excalidrawWrapper); | |||
root.render(React.createElement(App)); | |||
console.log("Excalidraw 로딩 완료!"); | |||
}).catch(function (e){ | }).catch(function (e){ | ||
console.log(" | console.log("Excalidraw 스크립트 로딩 실패, 저장소에 연결할 수 없습니다."); | ||
}); | }); | ||
} | } | ||
$(LoadExcalidraw); | $(LoadExcalidraw); | ||
2024년 10월 11일 (금) 01:01 기준 최신판
// Excalidraw 임베딩 위젯
// 제작자: [[사용자:Senouis|Senouis]]
// Excalidraw는 MIT 라이선스에 따라 배포됩니다. [https://github.com/excalidraw/excalidraw?tab=MIT-1-ov-file GitHub 리포지토리의 라이선스 안내]
// 이 코드 역시 MIT 라이선스를 따릅니다.
function asyncJSLoader(url, type) {
return new Promise(function (resolve, reject) {
try {
var scriptElement = document.createElement("script");
scriptElement.src = url;
scriptElement.async = true; // force asynchronous loading
scriptElement.type = type;
var contextsection = document.getElementById("mw-content-text");
scriptElement.addEventListener("load", function (ev) {
resolve({ status: true });
});
scriptElement.addEventListener("error", function (ev) {
reject({
status: false,
message: "Failed to load the script"
});
});
contextsection.appendChild(scriptElement);
} catch (e) {
reject(e);
}
});
}
function LoadExcalidraw(){
if (!document.getElementById("excalidraw-container")) return;
Promise.all([asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript")])
.then(function(result) {
console.log("모든 스크립트 로딩 완료! Excalidraw 실행 시도합니다.");
var height_canvas = window.screen.height >= 800 ? "800px" : Math.floor(window.screen.height*0.8).toString() + "px";
var App = function () {
return React.createElement(
React.Fragment,
null,
React.createElement(
"div",
{
style: { height: height_canvas },
},
React.createElement(ExcalidrawLib.Excalidraw)
)
);
};
var excalidrawWrapper = document.getElementById("app");
var root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));
console.log("Excalidraw 로딩 완료!");
}).catch(function (e){
console.log("Excalidraw 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}
$(LoadExcalidraw);