작은숲:HTML샌드박스/Excalidraw/main.js: 두 판 사이의 차이

큰숲백과, 나무를 보지 말고 큰 숲을 보라.
(Senouis님이 작은숲:HTML샌드박스/Excalidraw/loader.js 문서의 콘텐츠 모델을 "위키텍스트"에서 "자바스크립트"(으)로 바꾸었습니다: JS 코드임)
태그: 콘텐츠 모델 변경
(Promise.all로 단축)
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
4번째 줄: 4번째 줄:
// 이 코드 역시 MIT 라이선스를 따릅니다.
// 이 코드 역시 MIT 라이선스를 따릅니다.


// TODO: ScriptLoader 위젯에 아래 기능을 일임하고 이 위젯이 의존하도록 하기
function asyncJSLoader(url, type) {
function asyncJSLoader(url, type) { // UE4, Godot 등의 다른 스크립트 로딩 위젯들과 공유함
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").then(function (result) {
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")])
console.log("React 로딩 완료");
.then(function(result) {
asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript").then( function(result) {
console.log("모든 스크립트 로딩 완료! Excalidraw 실행 시도합니다.");
console.log("React DOM 로딩 완료");
var height_canvas = window.screen.height >= 800 ? "800px" : Math.floor(window.screen.height*0.8).toString() + "px";
asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript").then(function(result) {
var App = function () {
console.log("Excalidraw 로딩 완료");
  return React.createElement(
var height_canvas = window.screen.height >= 800 ? "800px" : Math.floor(window.screen.height*0.8).toString() + "px";
    React.Fragment,
var App = function () {
    null,
  return React.createElement(
    React.createElement(
    React.Fragment,
      "div",
    null,
      {
    React.createElement(
        style: { height: height_canvas },
      "div",
      },
      {
      React.createElement(ExcalidrawLib.Excalidraw)
        style: { height: height_canvas },
    )
      },
  );
      React.createElement(ExcalidrawLib.Excalidraw)
};
    )
  );
var excalidrawWrapper = document.getElementById("app");
};
var root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));
var excalidrawWrapper = document.getElementById("app");
console.log("Excalidraw 로딩 완료!");
var root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));
console.log("Excalidraw 로딩 완료!");
}).catch(function (e){
console.log("Excalidraw 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}).catch(function (e){
console.log("React DOM 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
});
}).catch(function (e){
}).catch(function (e){
console.log("React 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
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);