Experiences

"; //Ignore the error var editorVar; var inputLanguage = "en"; console.log(data); if (mode === "edit") { var inputValues = { "en": { "title": data.title_en, "desc": data.desc_en, "text": data.text_en }, "cn": { "title": data.title_cn, "desc": data.desc_cn, "text": data.text_cn }, "kr": { "title": data.title_kr, "desc": data.desc_kr, "text": data.text_kr }, "link": data.link, "youtube": data.youtube, } } else { var inputValues = { "en": { "title": "", "desc": "", "text": "" }, "cn": { "title": "", "desc": "", "text": "" }, "kr": { "title": "", "desc": "", "text": "" }, "link": "", "youtube": "", } } class MyUploadAdapter { constructor( loader ) { // The file loader instance to use during the upload. this.loader = loader; } // Starts the upload process. upload() { return this.loader.file .then( file => new Promise( ( resolve, reject ) => { this._initRequest(); this._initListeners( resolve, reject, file ); this._sendRequest( file ); } ) ); } // Aborts the upload process. abort() { if ( this.xhr ) { this.xhr.abort(); } } // Initializes the XMLHttpRequest object using the URL passed to the constructor. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); // Note that your request may look different. It is up to you and your editor // integration to choose the right communication channel. This example uses // a POST request with JSON as a data structure but your configuration // could be different. xhr.open( 'POST', backUrl + '/api/store_image', true ); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _initListeners( resolve, reject, file ) { const xhr = this.xhr; const loader = this.loader; const genericErrorText = `Couldn't upload file: ${ file.name }.`; xhr.addEventListener( 'error', () => reject( genericErrorText ) ); xhr.addEventListener( 'abort', () => reject() ); xhr.addEventListener( 'load', () => { const response = xhr.response; // This example assumes the XHR server's "response" object will come with // an "error" which has its own "message" that can be passed to reject() // in the upload promise. // // Your integration may handle upload errors in a different way so make sure // it is done properly. The reject() function must be called when the upload fails. if ( !response || response.error ) { return reject( response && response.error ? response.error.message : genericErrorText ); } // If the upload is successful, resolve the upload promise with an object containing // at least the "default" URL, pointing to the image on the server. // This URL will be used to display the image in the content. Learn more in the // UploadAdapter#upload documentation. resolve( { default: response.url } ); } ); // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded // properties which are used e.g. to display the upload progress bar in the editor // user interface. if ( xhr.upload ) { xhr.upload.addEventListener( 'progress', evt => { if ( evt.lengthComputable ) { loader.uploadTotal = evt.total; loader.uploaded = evt.loaded; } } ); } } // Prepares the data and sends the request. _sendRequest( file ) { // Prepare the form data. const data = new FormData(); data.append( 'upload', file ); // Important note: This is the right place to implement security mechanisms // like authentication and CSRF protection. For instance, you can use // XMLHttpRequest.setRequestHeader() to set the request headers containing // the CSRF token generated earlier by your application. // Send the request. this.xhr.send( data ); } } function SimpleUploadAdapterPlugin( editor ) { editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => { // Configure the URL to the upload script in your back-end here! return new MyUploadAdapter( loader ); }; } function deletePicture() { $('input[name="link"]').val(""); $("#row-upload > iframe").attr('src', "https://app.simplefileupload.com/buckets/485b9ca9ece25ce9ce54c59fb72ece5e?widgetId=widget0&elementValue=&preview=true&text=undefined&small=false") } $(window).on('load', async function () { await axios.post(backUrl + "/api/user/this_user", {}, { withCredentials: true, }).then(res => { if (res.data.status === "fail") { alert('Please login first!') window.location.href = "/login" } else { return } }).catch(err => { console.log(err) }) // CKEDITOR.replace('ex-editor', { // height: 555 // }); // CKEDITOR.editorConfig = function (config) { // config.entities_latin = false; // config.entities_greek = false; // config.entities = false; // config.basicEntities = false; // }; ClassicEditor .create( document.querySelector( '#ex-editor' ), { extraPlugins: [ SimpleUploadAdapterPlugin ], mediaEmbed: { previewsInData: true }, link: { addTargetToExternalLinks: true, defaultProtocol: 'http://' } }).then( editor => { editorVar = editor; }).catch( error => { console.error( error ); }); }) let imgVal = $("#avatar_url").attr("value") function preprocess_youtube(link) { if (link.includes("embed") || !link.includes('youtube')) { return link; } else { const video_id = link.split('?v=')[1]; return "https://www.youtube.com/embed/" + video_id; } } function selectLanguage(event) { // Store the values first inputValues[inputLanguage].title = $('input[name="title"]').val() inputValues[inputLanguage].desc = $('input[name="description"]').val() inputValues[inputLanguage].text = editorVar.getData(); inputValues.youtube = $('input[name="youtube"]').val() inputValues.link = $('input[name="link"]').val() // Changes in the button appearance and place holder $("#select-lang-"+inputLanguage).removeClass("selected"); event.target.classList.add('selected'); inputLanguage = event.target.id.slice(-2); event.target.blur(); $('input[name="title"]').attr("placeholder", "Title("+inputLanguage.toUpperCase()+")"); $('input[name="description"]').attr("placeholder", "Description("+inputLanguage.toUpperCase()+")"); // Set as the temporary stored data $('input[name="title"]').val(inputValues[inputLanguage].title); $('input[name="description"]').val(inputValues[inputLanguage].desc); editorVar.setData(inputValues[inputLanguage].text == null ? "" : inputValues[inputLanguage].text); } async function postNew() { // Store the current page first before leaving inputValues[inputLanguage].title = $('input[name="title"]').val() inputValues[inputLanguage].desc = $('input[name="description"]').val() inputValues[inputLanguage].text = editorVar.getData(); inputValues.youtube = $('input[name="youtube"]').val() inputValues.link = $('input[name="link"]').val() if (inputValues.youtube.length > 0 && inputValues.link.length > 0) { alert("Select one between youtube and image file.") } else { if (window.confirm("Submit the form?")) { const lang = ['en', 'cn', 'kr']; const formdata = new FormData(); lang.forEach(language => { formdata.append('title_'+language, inputValues[language].title); formdata.append('desc_'+language, inputValues[language].desc); formdata.append('text_'+language, inputValues[language].text); }); formdata.append('youtube', preprocess_youtube(inputValues.youtube)); formdata.append('link', inputValues.link); await axios.post(backUrl + "/api/blog/new", formdata, { headers: { 'Content-Type': 'multipart/form-data', } }).then(function (res) { if(res.data.status === "success"){ window.location.href="/experiences" } if(res.data.status === "fail"){ if(res.data.code === 2){ alert("Title이 너무 깁니다! 줄여서 다시 시도해주세요.") }else if(res.data.code === 3){ alert("Description이 너무 깁니다! 줄여서 다시 시도해주세요.") } } }).catch(function (err) { console.log(err) }) } else { return } } } async function postEdit() { console.log("clicked") // Store the current page first before leaving let id = $('input[name="title"]').attr('data-id') inputValues[inputLanguage].title = $('input[name="title"]').val() inputValues[inputLanguage].desc = $('input[name="description"]').val() inputValues[inputLanguage].text = editorVar.getData(); inputValues.youtube = $('input[name="youtube"]').val() inputValues.link = $('input[name="link"]').val() if (inputValues.youtube.length > 0 && inputValues.link.length > 0) { alert("Select one between youtube and image file.") } else { if (window.confirm("Submit the form?")) { const lang = ['en', 'cn', 'kr']; const formdata = new FormData(); formdata.append('id', id) lang.forEach(language => { formdata.append('title_'+language, inputValues[language].title); formdata.append('desc_'+language, inputValues[language].desc); formdata.append('text_'+language, inputValues[language].text); }); formdata.append('youtube', preprocess_youtube(inputValues.youtube)); formdata.append('link', inputValues.link); await axios.post(backUrl + "/api/blog/edit", formdata, { headers: { 'Content-Type': 'multipart/form-data', } }).then(function (res) { console.log(res) window.location.href = "/experiences/" + id }).catch(function (err) { console.log(err) }) } else { return } } }

Home / Resources / Experiences

Experiences

Contact Us

Languages