From 54b8af04d5299fc437fab095d09a58913ad173d4 Mon Sep 17 00:00:00 2001 From: Aleksandr karpov Date: Tue, 22 Mar 2022 09:39:02 +0000 Subject: [PATCH] Tui_image_editor added --- .gitignore | 3 +- .../profilePic/controller/App.controller.js | 162 +- .../profilePic/tui/tui-image-editor.css | 7 + .../profilePic/tui/tui-image-editor.html | 51 + .../profilePic/tui/tui-image-editor.js | 70059 ++++++++++++++++ app/profilePic/profilePic/tui/ui5logo.png | Bin 0 -> 58915 bytes app/profilePic/profilePic/view/App.view.xml | 6 +- package-lock.json | 3184 +- 8 files changed, 70240 insertions(+), 3232 deletions(-) create mode 100644 app/profilePic/profilePic/tui/tui-image-editor.css create mode 100644 app/profilePic/profilePic/tui/tui-image-editor.html create mode 100644 app/profilePic/profilePic/tui/tui-image-editor.js create mode 100644 app/profilePic/profilePic/tui/ui5logo.png diff --git a/.gitignore b/.gitignore index 7ebc0c5..6fe3496 100644 --- a/.gitignore +++ b/.gitignore @@ -105,4 +105,5 @@ dist /mta_archives -/app/*.zip \ No newline at end of file +/app/*.zip +.vscode/launch.json diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js index cb03e21..fd2b3ae 100644 --- a/app/profilePic/profilePic/controller/App.controller.js +++ b/app/profilePic/profilePic/controller/App.controller.js @@ -7,92 +7,112 @@ sap.ui.define([ "sap/ui/core/Core", "sap/ui/model/json/JSONModel", "sap/ui/Device", - "sap/suite/ui/commons/library" + "sap/suite/ui/commons/library", + "sap/ui/dom/includeStylesheet", + "profilePic/tui/tui-image-editor" ], - function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary) { + function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary,includeStylesheet,TuiImageEditor) { return BaseController.extend("profilePic.controller.App", { onInit: function () { - var oImageEditor = this.getView().byId("image"), - oModel = new JSONModel({ - blocked: true - }) + // var oImageEditor = this.getView().byId("image"), + // oModel = new JSONModel({ + // blocked: true + // }) - this.getView().setModel(oModel) - if (!Device.browser.msie) { - // svg files are not supported in Internet Explorer - oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg") - } + // this.getView().setModel(oModel) + // if (!Device.browser.msie) { + // // svg files are not supported in Internet Explorer + // oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg") + // } }, - - uploadPressed: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - let oFileUploader = view.byId("fileToUpload") - if (!oFileUploader.getValue()) { - MessageToast.show("Choose a file first") - return - } - let param = view.byId("uploadParam") - //param.setValue(oInput.getActivePage()) - oFileUploader.getParameters() - var oImageEditor = this.getView().byId("image") - oImageEditor.applyVisibleCrop() - console.log(oImageEditor.getMode()) - oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { - return new Promise(async (resolve, reject) => { - let newBlob = await oImageEditor.getImageAsBlob() - resolve([newBlob]) - }) - } - controller.startBusy() - oFileUploader.upload(true) + onAfterRendering: function() { + includeStylesheet(sap.ui.require.toUrl("profilePic/tui/tui-image-editor.css")); + this.editor = new TuiImageEditor(document.getElementById("editor"), { + includeUI: { + loadImage: { + path: 'profilePic/tui/ui5logo.png', + name: 'ui5logo', + }, + initMenu: 'shape', + uiSize: { + height: '100%', + width: '100%', + }, + }, + cssMaxWidth: 700, + cssMaxHeight: 500, + }); }, - uploadStart: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - controller.startBusy() - }, + // uploadPressed: async function (oEvent) { + // let view = this.getView() + // let controller = view.getController() + // let oFileUploader = view.byId("fileToUpload") + // if (!oFileUploader.getValue()) { + // MessageToast.show("Choose a file first") + // return + // } + // let param = view.byId("uploadParam") + // //param.setValue(oInput.getActivePage()) + // oFileUploader.getParameters() + // var oImageEditor = this.getView().byId("image") + // oImageEditor.applyVisibleCrop() + // console.log(oImageEditor.getMode()) + // oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { + // return new Promise(async (resolve, reject) => { + // let newBlob = await oImageEditor.getImageAsBlob() + // resolve([newBlob]) + // }) + // } + // controller.startBusy() + // oFileUploader.upload(true) + // }, - uploadComplete: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw - let oImageEditor = view.byId("image") - await oImageEditor.setSrc(dataURL) - controller.endBusy(controller) - }, + // uploadStart: async function (oEvent) { + // let view = this.getView() + // let controller = view.getController() + // controller.startBusy() + // }, - onSaveAsPress: async function () { - let view = this.getView() - let controller = view.getController() - let oImageEditor = view.byId("image") - oImageEditor.openSaveDialog() - controller.openUrl('https://people.sap.com/', true) + // uploadComplete: async function (oEvent) { + // let view = this.getView() + // let controller = view.getController() + // let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw + // let oImageEditor = view.byId("image") + // await oImageEditor.setSrc(dataURL) + // controller.endBusy(controller) + // }, - }, - onImageLoaded: async function (oEvent) { - let view = this.getView() - let oImageEditor = view.byId("image") - oImageEditor.zoomToFit() - oImageEditor.setCropAreaByRatio(1, 1) - oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse) - console.log(oImageEditor.getMode()) + // onSaveAsPress: async function () { + // let view = this.getView() + // let controller = view.getController() + // let oImageEditor = view.byId("image") + // oImageEditor.openSaveDialog() + // controller.openUrl('https://people.sap.com/', true) + // }, + // onImageLoaded: async function (oEvent) { + // let view = this.getView() + // let oImageEditor = view.byId("image") + // oImageEditor.zoomToFit() + // oImageEditor.setCropAreaByRatio(1, 1) + // oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse) + // console.log(oImageEditor.getMode()) - }, - onFileChange: async function (oEvent) { - var oFile = oEvent.getParameter("files")[0], - oImageEditor = this.getView().byId("image") - if (!oFile) { - return - } - this.getView().getModel().setProperty("/blocked", true) - await oImageEditor.setSrc(oFile) - } + // }, + // onFileChange: async function (oEvent) { + // var oFile = oEvent.getParameter("files")[0], + // oImageEditor = this.getView().byId("image") + // if (!oFile) { + // return + // } + // this.getView().getModel().setProperty("/blocked", true) + // await oImageEditor.setSrc(oFile) + + // } }) } ) \ No newline at end of file diff --git a/app/profilePic/profilePic/tui/tui-image-editor.css b/app/profilePic/profilePic/tui/tui-image-editor.css new file mode 100644 index 0000000..1ae6c9c --- /dev/null +++ b/app/profilePic/profilePic/tui/tui-image-editor.css @@ -0,0 +1,7 @@ +/*! + * TOAST UI ImageEditor + * @version 3.15.2 + * @author NHN. FE Development Team + * @license MIT + */ +body > textarea{position:fixed !important}.tui-image-editor-container{margin:0;padding:0;box-sizing:border-box;min-height:300px;height:100%;position:relative;background-color:#282828;overflow:hidden;letter-spacing:.3px}.tui-image-editor-container div,.tui-image-editor-container ul,.tui-image-editor-container label,.tui-image-editor-container input,.tui-image-editor-container li{box-sizing:border-box;margin:0;padding:0;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.tui-image-editor-container .tui-image-editor-header{min-width:533px;position:absolute;background-color:#151515;top:0;width:100%}.tui-image-editor-container .tui-image-editor-header-buttons,.tui-image-editor-container .tui-image-editor-controls-buttons{float:right;margin:8px}.tui-image-editor-container .tui-image-editor-header-logo,.tui-image-editor-container .tui-image-editor-controls-logo{float:left;width:30%;padding:17px}.tui-image-editor-container .tui-image-editor-controls-logo,.tui-image-editor-container .tui-image-editor-controls-buttons{width:270px;height:100%;display:none}.tui-image-editor-container .tui-image-editor-header-buttons button,.tui-image-editor-container .tui-image-editor-header-buttons div,.tui-image-editor-container .tui-image-editor-controls-buttons button,.tui-image-editor-container .tui-image-editor-controls-buttons div{display:inline-block;position:relative;width:120px;height:40px;padding:0;line-height:40px;outline:none;border-radius:20px;border:1px solid #ddd;font-family:'Noto Sans',sans-serif;font-size:12px;font-weight:bold;cursor:pointer;vertical-align:middle;letter-spacing:.3px;text-align:center}.tui-image-editor-container .tui-image-editor-download-btn{background-color:#fdba3b;border-color:#fdba3b;color:#fff}.tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}.tui-image-editor-container .tui-image-editor-main-container{position:absolute;width:100%;top:0;bottom:64px}.tui-image-editor-container .tui-image-editor-main{position:absolute;text-align:center;top:64px;bottom:0;right:0;left:0}.tui-image-editor-container .tui-image-editor-wrap{position:absolute;bottom:0;width:100%;overflow:auto}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap{display:table;width:100%;height:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap{display:table-cell;vertical-align:middle}.tui-image-editor-container .tui-image-editor{position:relative;display:inline-block}.tui-image-editor-container .tui-image-editor-menu,.tui-image-editor-container .tui-image-editor-help-menu{width:auto;list-style:none;padding:0;margin:0 auto;display:table-cell;text-align:center;vertical-align:middle;white-space:nowrap}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item{position:relative;display:inline-block;border-radius:2px;padding:7px 8px 3px 8px;cursor:pointer;margin:0 4px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before{content:'';position:absolute;display:inline-block;margin:0 auto 0;width:0;height:0;border-right:7px solid transparent;border-top:7px solid #2f2f2f;border-left:7px solid transparent;left:13px;top:-2px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after{content:attr(tooltip-content);position:absolute;display:inline-block;background-color:#2f2f2f;color:#fff;padding:5px 8px;font-size:11px;font-weight:lighter;border-radius:3px;max-height:23px;top:-25px;left:0;min-width:24px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active{background-color:#fff;transition:all .3s ease}.tui-image-editor-container .tui-image-editor-wrap{position:absolute}.tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%;border:1px solid rgba(255,255,255,0.7)}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual{display:block}.tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse}.tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid rgba(255,255,255,0.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:'';position:absolute;box-sizing:border-box;width:10px;height:10px;border:0;box-shadow:0 0 1px 0 rgba(0,0,0,0.3);border-radius:100%;background-color:#fff}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-submenu{display:none;position:absolute;bottom:0;width:100%;height:150px;white-space:nowrap;z-index:2}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active{display:block}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li{display:inline-block;vertical-align:top}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline{display:block;margin-top:0}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:normal;font-size:11px;margin:0 9px 0 9px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 20px 5px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span{display:inline-block;cursor:pointer;padding-top:5px;font-family:"Noto Sans",sans-serif;font-size:11px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label{vertical-align:7px}.tui-image-editor-container .tui-image-editor-submenu > div{display:none;vertical-align:bottom}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style{opacity:.95;z-index:-1;position:absolute;top:0;bottom:0;left:0;right:0;display:block}.tui-image-editor-container .tui-image-editor-partition > div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 8px 0 8px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div{height:108px;margin:0 29px 0 0}.tui-image-editor-container .tui-image-editor-submenu-align{text-align:left;margin-right:30px}.tui-image-editor-container .tui-image-editor-submenu-align label > span{width:55px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-submenu-align:first-child{margin-right:0}.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span{width:70px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom{display:table-cell}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu{display:table}.tui-image-editor-container .tui-image-editor-help-menu{list-style:none;padding:0;margin:0 auto;text-align:center;vertical-align:middle;border-radius:20px;background-color:rgba(255,255,255,0.06);z-index:2;position:absolute}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history{display:none;background-color:#fff;color:#444;position:absolute;width:196px;height:276px;padding:4px 2px;box-shadow:0 2px 6px 0 rgba(0,0,0,0.15);cursor:auto;transform:translateX(calc(-50% + 12px))}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list{height:268px;padding:0;overflow:hidden scroll;list-style:none}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item{height:24px;font-size:11px;line-height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item{position:relative;height:24px;cursor:pointer}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg{width:24px;height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span{display:inline-block;width:128px;height:24px;text-align:left}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{display:inline-block;width:24px;height:24px;position:absolute;top:6px;left:6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{display:none;width:24px;height:24px;position:absolute;top:5px;right:-6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item{background-color:rgba(119,119,119,0.12)}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox{display:inline-block}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history{display:block}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before{content:'';position:absolute;display:inline-block;margin:0 auto;width:0;height:0}.tui-image-editor-container .filter-color-item{display:inline-block}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{display:block}.tui-image-editor-container .tui-image-editor-checkbox-wrap{display:inline-block !important;text-align:left}.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:187px;white-space:normal}.tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:1px 0 1px 0}.tui-image-editor-container .tui-image-editor-checkbox input{width:14px;height:14px;opacity:0}.tui-image-editor-container .tui-image-editor-checkbox > label > span{color:#fff;height:14px;position:relative}.tui-image-editor-container .tui-image-editor-checkbox input + label:before,.tui-image-editor-container .tui-image-editor-checkbox > label > span:before{content:'';position:absolute;width:14px;height:14px;background-color:#fff;top:6px;left:-19px;display:inline-block;margin:0;text-align:center;font-size:11px;border:0;border-radius:2px;padding-top:1px;box-sizing:border-box}.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before{background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==)}.tui-image-editor-container .tui-image-editor-selectlist-wrap{position:relative}.tui-image-editor-container .tui-image-editor-selectlist-wrap select{width:100%;height:28px;margin-top:4px;border:0;outline:0;border-radius:0;border:1px solid #cbdbdb;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 7px 0 10px}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist{display:none;position:relative;top:-1px;border:1px solid #ccc;background-color:#fff;border-top:0;padding:4px 0}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li{display:block;text-align:left;padding:7px 10px;font-family:'Noto Sans',sans-serif}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover{background-color:rgba(81,92,230,0.05)}.tui-image-editor-container .tui-image-editor-selectlist-wrap:before{content:'';position:absolute;display:inline-block;width:14px;height:14px;right:5px;top:10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=);background-size:cover}.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand{display:none}.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled{backbround-color:#f00}.tui-image-editor-container .tui-image-editor-range{position:relative;top:5px;width:166px;height:17px;display:inline-block}.tui-image-editor-container .tui-image-editor-virtual-range-bar{top:7px;position:absolute;width:100%;height:2px;background-color:#666}.tui-image-editor-container .tui-image-editor-virtual-range-subbar{position:absolute;height:100%;left:0;right:0;background-color:#d1d1d1}.tui-image-editor-container .tui-image-editor-virtual-range-pointer{position:absolute;cursor:pointer;top:-5px;left:0;width:12px;height:12px;background-color:#fff;border-radius:100%}.tui-image-editor-container .tui-image-editor-range-wrap{display:inline-block;margin-left:4px}.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range{width:100px}.tui-image-editor-container .color-picker-control .tui-image-editor-range{width:108px;margin-left:10px}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer{background-color:#333}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar{background-color:#ccc}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar{background-color:#606060}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short{margin-top:-2px;margin-left:19px}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label{color:#8e8e8e;font-weight:normal}.tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}.tui-image-editor-container .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:'Noto Sans',sans-serif;margin-top:15px;margin-left:4px}.tui-image-editor-container .tui-image-editor-controls{position:absolute;background-color:#151515;width:100%;height:64px;display:table;bottom:0;z-index:2}.tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#444;width:1px;height:24px}.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:28px;top:11px;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:7px;left:42px;white-space:nowrap}.tui-image-editor-container.left .tui-image-editor-submenu{left:0;height:100%;width:248px}.tui-image-editor-container.left .tui-image-editor-main-container{left:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.left .tui-image-editor-controls{width:64px;height:100%;display:table}.tui-image-editor-container.left .tui-image-editor-menu,.tui-image-editor-container.right .tui-image-editor-menu{white-space:inherit}.tui-image-editor-container.left .tui-image-editor-submenu,.tui-image-editor-container.right .tui-image-editor-submenu{white-space:normal}.tui-image-editor-container.left .tui-image-editor-submenu > div,.tui-image-editor-container.right .tui-image-editor-submenu > div{vertical-align:middle}.tui-image-editor-container.left .tui-image-editor-controls li,.tui-image-editor-container.right .tui-image-editor-controls li{display:inline-block;margin:4px auto}.tui-image-editor-container.left .tui-image-editor-icpartition,.tui-image-editor-container.right .tui-image-editor-icpartition{position:relative;top:-7px;width:24px;height:1px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition{display:block;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div{border-left:0;height:10px;border-bottom:1px solid #3c3c3c;width:100%;margin:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align{margin-right:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li{margin-top:15px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li{margin-top:0}.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width{width:182px;white-space:normal}.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range{display:block;text-align:left;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-range,.tui-image-editor-container.right .tui-image-editor-range{width:136px}.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:-3px;top:11px;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:7px;left:unset;right:43px;white-space:nowrap}.tui-image-editor-container.right .tui-image-editor-submenu{right:0;height:100%;width:248px}.tui-image-editor-container.right .tui-image-editor-main-container{right:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.right .tui-image-editor-controls{right:0;width:64px;height:100%;display:table}.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right{display:none}.tui-image-editor-container.bottom .tui-image-editor-submenu > div{padding-bottom:24px}.tui-image-editor-container.top .color-picker-control .triangle{top:-8px;border-right:7px solid transparent;border-top:0;border-left:7px solid transparent;border-bottom:8px solid #fff}.tui-image-editor-container.top .tui-image-editor-size-wrap{height:100%}.tui-image-editor-container.top .tui-image-editor-main-container{bottom:0}.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:13px;border-top:0;border-bottom:7px solid #2f2f2f;top:33px}.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:38px}.tui-image-editor-container.top .tui-image-editor-submenu{top:0;bottom:auto}.tui-image-editor-container.top .tui-image-editor-submenu > div{padding-top:24px;vertical-align:top}.tui-image-editor-container.top .tui-image-editor-controls-logo{display:table-cell}.tui-image-editor-container.top .tui-image-editor-controls-buttons{display:table-cell}.tui-image-editor-container.top .tui-image-editor-main{top:64px;height:calc(100% - 64px)}.tui-image-editor-container.top .tui-image-editor-controls{top:0;bottom:inherit}.tui-image-editor-container .tui-image-editor-help-menu.top{white-space:nowrap;width:506px;height:40px;top:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history{top:45px}.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid #fff;left:90px;top:-8px}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before{left:13px;top:35px;border:none;border-bottom:7px solid #2f2f2f;border-left:7px solid transparent;border-right:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after{top:41px;left:-4px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.bottom{white-space:nowrap;width:506px;height:40px;bottom:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history{bottom:45px}.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-top:8px solid #fff;left:90px;bottom:-8px}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before{left:13px;top:auto;bottom:36px;border:none;border-top:7px solid #2f2f2f;border-left:7px solid transparent;border-right:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after{top:auto;left:-4px;bottom:41px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.left{white-space:inherit;width:40px;height:506px;left:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history{left:140px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #fff;left:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before{left:27px;top:11px;border:none;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after{top:7px;left:40px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.right{white-space:inherit;width:40px;height:506px;right:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history{right:-30px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #fff;right:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before{left:-6px;top:11px;border:none;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after{top:7px;left:auto;right:39px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button{min-width:42px}.tui-image-editor-container .svg_ic-menu,.tui-image-editor-container .svg_ic-helpmenu{width:24px;height:24px}.tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}.tui-image-editor-container .svg_img-bi{width:257px;height:26px}.tui-image-editor-container .tui-image-editor-help-menu svg > use,.tui-image-editor-container .tui-image-editor-controls svg > use{display:none}.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover{display:none}.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover{display:block}.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,.tui-image-editor-container .tui-image-editor-controls svg > use.normal{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,.tui-image-editor-container .tui-image-editor-controls .active svg > use.active{display:block}.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal{display:none}.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal{display:block}.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled{display:none}.tui-image-editor-container .tui-image-editor-controls:hover{z-index:3}.tui-image-editor-container div.tui-colorpicker-clearfix{width:159px;height:28px;border:1px solid #d5d5d5;border-radius:2px;background-color:#f5f5f5;margin-top:6px;padding:4px 7px 4px 7px}.tui-image-editor-container .tui-colorpicker-palette-hex{width:114px;background-color:#f5f5f5;border:0;font-size:11px;margin-top:2px;font-family:'Noto Sans',sans-serif}.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview{border:1px solid #ccc}.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview{background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC)}.tui-image-editor-container .tui-colorpicker-palette-preview{border-radius:100%;float:left;width:17px;height:17px;border:0}.tui-image-editor-container .color-picker-control{position:absolute;display:none;z-index:99;width:192px;background-color:#fff;box-shadow:0 3px 22px 6px rgba(0,0,0,0.15);padding:16px;border-radius:2px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider{display:none}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{border:0;border-radius:100%;margin:2px;background-size:cover;font-size:1px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff']{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='']{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .triangle{width:0;height:0;border-right:7px solid transparent;border-top:8px solid #fff;border-left:7px solid transparent;position:absolute;bottom:-8px;left:84px}.tui-image-editor-container .color-picker-control .tui-colorpicker-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container{width:100%;height:auto}.tui-image-editor-container .filter-color-item .color-picker-control label{font-color:#333;font-weight:normal;margin-right:7pxleft}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{margin-top:0}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before{left:-16px}.tui-image-editor-container .color-picker{width:100%;height:auto}.tui-image-editor-container .color-picker-value{width:32px;height:32px;border:0;border-radius:100%;margin:auto;margin-bottom:1px}.tui-image-editor-container .color-picker-value.transparent{border:1px solid #cbcbcb;background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC)}.tui-image-editor-container .color-picker-value + label{color:#fff}.tui-image-editor-container .tui-image-editor-submenu svg > use{display:none}.tui-image-editor-container .tui-image-editor-submenu svg > use.normal{display:block}.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active,.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active,.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active,.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active,.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active,.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active,.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active,.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active,.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active{display:block}.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal{display:none}.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active{display:block}.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal{display:none}.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active{display:block}.tie-mask-apply.apply.active .tui-image-editor-button.apply label{color:#fff}.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active{display:block}.tie-crop-button .tui-image-editor-button.apply,.tie-crop-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active{display:block}.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active{display:block}.tie-resize-button .tui-image-editor-button.apply,.tie-resize-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-resize-button .tui-image-editor-button.preset.active svg > use.active,.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active{display:block}.tie-resize-button .tui-image-editor-button.apply.active svg > use.active,.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active{display:block}.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal{display:none}.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active{display:block}.tie-text-effect-button .tui-image-editor-button.active svg > use.active{display:block}.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active,.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active,.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active{display:block}.tie-mask-image-file,.tie-icon-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid #008000;cursor:inherit;left:0;top:0}.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal{display:none}.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active{display:block}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul{text-align:right}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo{display:none} diff --git a/app/profilePic/profilePic/tui/tui-image-editor.html b/app/profilePic/profilePic/tui/tui-image-editor.html new file mode 100644 index 0000000..1e4caa5 --- /dev/null +++ b/app/profilePic/profilePic/tui/tui-image-editor.html @@ -0,0 +1,51 @@ + + + + + + TUI Image Editor + + + + + +
+ + diff --git a/app/profilePic/profilePic/tui/tui-image-editor.js b/app/profilePic/profilePic/tui/tui-image-editor.js new file mode 100644 index 0000000..b83c2e9 --- /dev/null +++ b/app/profilePic/profilePic/tui/tui-image-editor.js @@ -0,0 +1,70059 @@ +sap.ui.define((function () { 'use strict'; + + (function() { + const env = {"NODE_ENV":"production"}; + try { + if (process) { + process.env = Object.assign({}, process.env); + Object.assign(process.env, env); + return; + } + } catch (e) {} // avoid ReferenceError: process is not defined + globalThis.process = { env:env }; + })(); + + var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + + function getDefaultExportFromCjs (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; + } + + var tuiImageEditor$1 = {exports: {}}; + + var tuiCodeSnippet = {exports: {}}; + + (function (module, exports) { + (function webpackUniversalModuleDefinition(root, factory) { + module.exports = factory(); + })(commonjsGlobal, function() { + return /******/ (function(modules) { // webpackBootstrap + /******/ // The module cache + /******/ var installedModules = {}; + + /******/ // The require function + /******/ function __webpack_require__(moduleId) { + + /******/ // Check if module is in cache + /******/ if(installedModules[moduleId]) + /******/ return installedModules[moduleId].exports; + + /******/ // Create a new module (and put it into the cache) + /******/ var module = installedModules[moduleId] = { + /******/ exports: {}, + /******/ id: moduleId, + /******/ loaded: false + /******/ }; + + /******/ // Execute the module function + /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + + /******/ // Flag the module as loaded + /******/ module.loaded = true; + + /******/ // Return the exports of the module + /******/ return module.exports; + /******/ } + + + /******/ // expose the modules object (__webpack_modules__) + /******/ __webpack_require__.m = modules; + + /******/ // expose the module cache + /******/ __webpack_require__.c = installedModules; + + /******/ // __webpack_public_path__ + /******/ __webpack_require__.p = "dist"; + + /******/ // Load entry module and return exports + /******/ return __webpack_require__(0); + /******/ }) + /************************************************************************/ + /******/ ([ + /* 0 */ + /***/ (function(module, exports, __webpack_require__) { + + /** + * @fileoverview + * @author NHN. + * FE Development Lab + * @namespace tui.util + * @example + * // node, commonjs + * var util = require('tui-code-snippet'); + * @example + * // distribution file, script + * + * "; + * var result = util.encodeHTMLEntity(htmlEntityString); + * //"<script> alert('test');</script><a href='test'>" + */ + function encodeHTMLEntity(html) { + var entities = { + '"': 'quot', + '&': 'amp', + '<': 'lt', + '>': 'gt', + '\'': '#39' + }; + + return html.replace(/[<>&"']/g, function(m0) { + return entities[m0] ? '&' + entities[m0] + ';' : m0; + }); + } + + /** + * Return whether the string capable to transform into plain string is in the given string or not. + * @param {String} string - test string + * @memberof tui.util + * @returns {boolean} + */ + function hasEncodableString(string) { + return (/[<>&"']/).test(string); + } + + /** + * Return duplicate charters + * @param {string} operandStr1 The operand string + * @param {string} operandStr2 The operand string + * @private + * @memberof tui.util + * @returns {string} + * @example + * //-- #1. Get Module --// + * var util = require('tui-code-snippet'); // node, commonjs + * var util = tui.util; // distribution file + * + * //-- #2. Use property --// + * util.getDuplicatedChar('fe dev', 'nhn entertainment'); // 'e' + * util.getDuplicatedChar('fdsa', 'asdf'); // 'asdf' + */ + function getDuplicatedChar(operandStr1, operandStr2) { + var i = 0; + var len = operandStr1.length; + var pool = {}; + var dupl, key; + + for (; i < len; i += 1) { + key = operandStr1.charAt(i); + pool[key] = 1; + } + + for (i = 0, len = operandStr2.length; i < len; i += 1) { + key = operandStr2.charAt(i); + if (pool[key]) { + pool[key] += 1; + } + } + + pool = collection.filter(pool, function(item) { + return item > 1; + }); + + pool = object.keys(pool).sort(); + dupl = pool.join(''); + + return dupl; + } + + module.exports = { + decodeHTMLEntity: decodeHTMLEntity, + encodeHTMLEntity: encodeHTMLEntity, + hasEncodableString: hasEncodableString, + getDuplicatedChar: getDuplicatedChar + }; + + + /***/ }), + /* 8 */ + /***/ (function(module, exports) { + + var tricks = {}; + var aps = Array.prototype.slice; + + /** + * Creates a debounced function that delays invoking fn until after delay milliseconds has elapsed + * since the last time the debouced function was invoked. + * @param {function} fn The function to debounce. + * @param {number} [delay=0] The number of milliseconds to delay + * @memberof tui.util + * @returns {function} debounced function. + * @example + * //-- #1. Get Module --// + * var util = require('tui-code-snippet'); // node, commonjs + * var util = tui.util; // distribution file + * + * //-- #2. Use property --// + * function someMethodToInvokeDebounced() {} + * + * var debounced = util.debounce(someMethodToInvokeDebounced, 300); + * + * // invoke repeatedly + * debounced(); + * debounced(); + * debounced(); + * debounced(); + * debounced(); + * debounced(); // last invoke of debounced() + * + * // invoke someMethodToInvokeDebounced() after 300 milliseconds. + */ + function debounce(fn, delay) { + var timer, args; + + /* istanbul ignore next */ + delay = delay || 0; + + function debounced() { // eslint-disable-line require-jsdoc + args = aps.call(arguments); + + window.clearTimeout(timer); + timer = window.setTimeout(function() { + fn.apply(null, args); + }, delay); + } + + return debounced; + } + + /** + * return timestamp + * @memberof tui.util + * @returns {number} The number of milliseconds from Jan. 1970 00:00:00 (GMT) + */ + function timestamp() { + return Number(new Date()); + } + + /** + * Creates a throttled function that only invokes fn at most once per every interval milliseconds. + * + * You can use this throttle short time repeatedly invoking functions. (e.g MouseMove, Resize ...) + * + * if you need reuse throttled method. you must remove slugs (e.g. flag variable) related with throttling. + * @param {function} fn function to throttle + * @param {number} [interval=0] the number of milliseconds to throttle invocations to. + * @memberof tui.util + * @returns {function} throttled function + * @example + * //-- #1. Get Module --// + * var util = require('tui-code-snippet'); // node, commonjs + * var util = tui.util; // distribution file + * + * //-- #2. Use property --// + * function someMethodToInvokeThrottled() {} + * + * var throttled = util.throttle(someMethodToInvokeThrottled, 300); + * + * // invoke repeatedly + * throttled(); // invoke (leading) + * throttled(); + * throttled(); // invoke (near 300 milliseconds) + * throttled(); + * throttled(); + * throttled(); // invoke (near 600 milliseconds) + * // ... + * // invoke (trailing) + * + * // if you need reuse throttled method. then invoke reset() + * throttled.reset(); + */ + function throttle(fn, interval) { + var base; + var isLeading = true; + var tick = function(_args) { + fn.apply(null, _args); + base = null; + }; + var debounced, stamp, args; + + /* istanbul ignore next */ + interval = interval || 0; + + debounced = tricks.debounce(tick, interval); + + function throttled() { // eslint-disable-line require-jsdoc + args = aps.call(arguments); + + if (isLeading) { + tick(args); + isLeading = false; + + return; + } + + stamp = tricks.timestamp(); + + base = base || stamp; + + // pass array directly because `debounce()`, `tick()` are already use + // `apply()` method to invoke developer's `fn` handler. + // + // also, this `debounced` line invoked every time for implements + // `trailing` features. + debounced(args); + + if ((stamp - base) >= interval) { + tick(args); + } + } + + function reset() { // eslint-disable-line require-jsdoc + isLeading = true; + base = null; + } + + throttled.reset = reset; + + return throttled; + } + + tricks.timestamp = timestamp; + tricks.debounce = debounce; + tricks.throttle = throttle; + + module.exports = tricks; + + + /***/ }), + /* 9 */ + /***/ (function(module, exports, __webpack_require__) { + + var object = __webpack_require__(1); + var collection = __webpack_require__(4); + var type = __webpack_require__(2); + var ms7days = 7 * 24 * 60 * 60 * 1000; + + /** + * Check if the date has passed 7 days + * @param {number} date - milliseconds + * @returns {boolean} + * @ignore + */ + function isExpired(date) { + var now = new Date().getTime(); + + return now - date > ms7days; + } + + /** + * Send hostname on DOMContentLoaded. + * To prevent hostname set tui.usageStatistics to false. + * @param {string} appName - application name + * @param {string} trackingId - GA tracking ID + * @ignore + */ + function sendHostname(appName, trackingId) { + var url = 'https://www.google-analytics.com/collect'; + var hostname = location.hostname; + var hitType = 'event'; + var eventCategory = 'use'; + var applicationKeyForStorage = 'TOAST UI ' + appName + ' for ' + hostname + ': Statistics'; + var date = window.localStorage.getItem(applicationKeyForStorage); + + // skip if the flag is defined and is set to false explicitly + if (!type.isUndefined(window.tui) && window.tui.usageStatistics === false) { + return; + } + + // skip if not pass seven days old + if (date && !isExpired(date)) { + return; + } + + window.localStorage.setItem(applicationKeyForStorage, new Date().getTime()); + + setTimeout(function() { + if (document.readyState === 'interactive' || document.readyState === 'complete') { + imagePing(url, { + v: 1, + t: hitType, + tid: trackingId, + cid: hostname, + dp: hostname, + dh: appName, + el: appName, + ec: eventCategory + }); + } + }, 1000); + } + + /** + * Request image ping. + * @param {String} url url for ping request + * @param {Object} trackingInfo infos for make query string + * @returns {HTMLElement} + * @memberof tui.util + * @example + * //-- #1. Get Module --// + * var util = require('tui-code-snippet'); // node, commonjs + * var util = tui.util; // distribution file + * + * //-- #2. Use property --// + * util.imagePing('https://www.google-analytics.com/collect', { + * v: 1, + * t: 'event', + * tid: 'trackingid', + * cid: 'cid', + * dp: 'dp', + * dh: 'dh' + * }); + */ + function imagePing(url, trackingInfo) { + var queryString = collection.map(object.keys(trackingInfo), function(key, index) { + var startWith = index === 0 ? '' : '&'; + + return startWith + key + '=' + trackingInfo[key]; + }).join(''); + var trackingElement = document.createElement('img'); + + trackingElement.src = url + '?' + queryString; + + trackingElement.style.display = 'none'; + document.body.appendChild(trackingElement); + document.body.removeChild(trackingElement); + + return trackingElement; + } + + module.exports = { + imagePing: imagePing, + sendHostname: sendHostname + }; + + + /***/ }), + /* 10 */ + /***/ (function(module, exports) { + + /** + * This object has an information that indicate the kind of browser.
+ * The list below is a detectable browser list. + * - ie8 ~ ie11 + * - chrome + * - firefox + * - safari + * - edge + * @memberof tui.util + * @example + * //-- #1. Get Module --// + * var util = require('tui-code-snippet'); // node, commonjs + * var util = tui.util; // distribution file + * + * //-- #2. Use property --// + * util.browser.chrome === true; // chrome + * util.browser.firefox === true; // firefox + * util.browser.safari === true; // safari + * util.browser.msie === true; // IE + * util.browser.edge === true; // edge + * util.browser.others === true; // other browser + * util.browser.version; // browser version + */ + var browser = { + chrome: false, + firefox: false, + safari: false, + msie: false, + edge: false, + others: false, + version: 0 + }; + + if (window && window.navigator) { + detectBrowser(); + } + + /** + * Detect the browser. + * @private + */ + function detectBrowser() { + var nav = window.navigator; + var appName = nav.appName.replace(/\s/g, '_'); + var userAgent = nav.userAgent; + + var rIE = /MSIE\s([0-9]+[.0-9]*)/; + var rIE11 = /Trident.*rv:11\./; + var rEdge = /Edge\/(\d+)\./; + var versionRegex = { + firefox: /Firefox\/(\d+)\./, + chrome: /Chrome\/(\d+)\./, + safari: /Version\/([\d.]+).*Safari\/(\d+)/ + }; + + var key, tmp; + + var detector = { + Microsoft_Internet_Explorer: function() { // eslint-disable-line camelcase + var detectedVersion = userAgent.match(rIE); + + if (detectedVersion) { // ie8 ~ ie10 + browser.msie = true; + browser.version = parseFloat(detectedVersion[1]); + } else { // no version information + browser.others = true; + } + }, + Netscape: function() { // eslint-disable-line complexity + var detected = false; + + if (rIE11.exec(userAgent)) { + browser.msie = true; + browser.version = 11; + detected = true; + } else if (rEdge.exec(userAgent)) { + browser.edge = true; + browser.version = userAgent.match(rEdge)[1]; + detected = true; + } else { + for (key in versionRegex) { + if (versionRegex.hasOwnProperty(key)) { + tmp = userAgent.match(versionRegex[key]); + if (tmp && tmp.length > 1) { // eslint-disable-line max-depth + browser[key] = detected = true; + browser.version = parseFloat(tmp[1] || 0); + break; + } + } + } + } + if (!detected) { + browser.others = true; + } + } + }; + + var fn = detector[appName]; + + if (fn) { + detector[appName](); + } + } + + module.exports = browser; + + + /***/ }), + /* 11 */ + /***/ (function(module, exports, __webpack_require__) { + + var collection = __webpack_require__(4); + var type = __webpack_require__(2); + var func = __webpack_require__(5); + var browser = __webpack_require__(10); + var object = __webpack_require__(1); + + var popupId = 0; + + /** + * Popup management class + * @constructor + * @memberof tui.util + * @example + * // node, commonjs + * var popup = require('tui-code-snippet').popup; + * @example + * // distribution file, script + * + * + * + */ + function CustomEvents() { + /** + * @type {HandlerItem[]} + */ + this.events = null; + + /** + * only for checking specific context event was binded + * @type {object[]} + */ + this.contexts = null; + } + + /** + * Mixin custom events feature to specific constructor + * @param {function} func - constructor + * @example + * //-- #1. Get Module --// + * var CustomEvents = require('tui-code-snippet').CustomEvents; // node, commonjs + * var CustomEvents = tui.util.CustomEvents; // distribution file + * + * //-- #2. Use property --// + * var model; + * function Model() { + * this.name = ''; + * } + * CustomEvents.mixin(Model); + * + * model = new Model(); + * model.on('change', function() { this.name = 'model'; }, this); + * model.fire('change'); + * alert(model.name); // 'model'; + */ + CustomEvents.mixin = function(func) { + object.extend(func.prototype, CustomEvents.prototype); + }; + + /** + * Get HandlerItem object + * @param {function} handler - handler function + * @param {object} [context] - context for handler + * @returns {HandlerItem} HandlerItem object + * @private + */ + CustomEvents.prototype._getHandlerItem = function(handler, context) { + var item = {handler: handler}; + + if (context) { + item.context = context; + } + + return item; + }; + + /** + * Get event object safely + * @param {string} [eventName] - create sub event map if not exist. + * @returns {(object|array)} event object. if you supplied `eventName` + * parameter then make new array and return it + * @private + */ + CustomEvents.prototype._safeEvent = function(eventName) { + var events = this.events; + var byName; + + if (!events) { + events = this.events = {}; + } + + if (eventName) { + byName = events[eventName]; + + if (!byName) { + byName = []; + events[eventName] = byName; + } + + events = byName; + } + + return events; + }; + + /** + * Get context array safely + * @returns {array} context array + * @private + */ + CustomEvents.prototype._safeContext = function() { + var context = this.contexts; + + if (!context) { + context = this.contexts = []; + } + + return context; + }; + + /** + * Get index of context + * @param {object} ctx - context that used for bind custom event + * @returns {number} index of context + * @private + */ + CustomEvents.prototype._indexOfContext = function(ctx) { + var context = this._safeContext(); + var index = 0; + + while (context[index]) { + if (ctx === context[index][0]) { + return index; + } + + index += 1; + } + + return -1; + }; + + /** + * Memorize supplied context for recognize supplied object is context or + * name: handler pair object when off() + * @param {object} ctx - context object to memorize + * @private + */ + CustomEvents.prototype._memorizeContext = function(ctx) { + var context, index; + + if (!type.isExisty(ctx)) { + return; + } + + context = this._safeContext(); + index = this._indexOfContext(ctx); + + if (index > -1) { + context[index][1] += 1; + } else { + context.push([ctx, 1]); + } + }; + + /** + * Forget supplied context object + * @param {object} ctx - context object to forget + * @private + */ + CustomEvents.prototype._forgetContext = function(ctx) { + var context, contextIndex; + + if (!type.isExisty(ctx)) { + return; + } + + context = this._safeContext(); + contextIndex = this._indexOfContext(ctx); + + if (contextIndex > -1) { + context[contextIndex][1] -= 1; + + if (context[contextIndex][1] <= 0) { + context.splice(contextIndex, 1); + } + } + }; + + /** + * Bind event handler + * @param {(string|{name:string, handler:function})} eventName - custom + * event name or an object {eventName: handler} + * @param {(function|object)} [handler] - handler function or context + * @param {object} [context] - context for binding + * @private + */ + CustomEvents.prototype._bindEvent = function(eventName, handler, context) { + var events = this._safeEvent(eventName); + this._memorizeContext(context); + events.push(this._getHandlerItem(handler, context)); + }; + + /** + * Bind event handlers + * @param {(string|{name:string, handler:function})} eventName - custom + * event name or an object {eventName: handler} + * @param {(function|object)} [handler] - handler function or context + * @param {object} [context] - context for binding + * //-- #1. Get Module --// + * var CustomEvents = require('tui-code-snippet').CustomEvents; // node, commonjs + * var CustomEvents = tui.util.CustomEvents; // distribution file + * + * //-- #2. Use property --// + * // # 2.1 Basic Usage + * CustomEvents.on('onload', handler); + * + * // # 2.2 With context + * CustomEvents.on('onload', handler, myObj); + * + * // # 2.3 Bind by object that name, handler pairs + * CustomEvents.on({ + * 'play': handler, + * 'pause': handler2 + * }); + * + * // # 2.4 Bind by object that name, handler pairs with context object + * CustomEvents.on({ + * 'play': handler + * }, myObj); + */ + CustomEvents.prototype.on = function(eventName, handler, context) { + var self = this; + + if (type.isString(eventName)) { + // [syntax 1, 2] + eventName = eventName.split(R_EVENTNAME_SPLIT); + collection.forEach(eventName, function(name) { + self._bindEvent(name, handler, context); + }); + } else if (type.isObject(eventName)) { + // [syntax 3, 4] + context = handler; + collection.forEach(eventName, function(func, name) { + self.on(name, func, context); + }); + } + }; + + /** + * Bind one-shot event handlers + * @param {(string|{name:string,handler:function})} eventName - custom + * event name or an object {eventName: handler} + * @param {function|object} [handler] - handler function or context + * @param {object} [context] - context for binding + */ + CustomEvents.prototype.once = function(eventName, handler, context) { + var self = this; + + if (type.isObject(eventName)) { + context = handler; + collection.forEach(eventName, function(func, name) { + self.once(name, func, context); + }); + + return; + } + + function onceHandler() { // eslint-disable-line require-jsdoc + handler.apply(context, arguments); + self.off(eventName, onceHandler, context); + } + + this.on(eventName, onceHandler, context); + }; + + /** + * Splice supplied array by callback result + * @param {array} arr - array to splice + * @param {function} predicate - function return boolean + * @private + */ + CustomEvents.prototype._spliceMatches = function(arr, predicate) { + var i = 0; + var len; + + if (!type.isArray(arr)) { + return; + } + + for (len = arr.length; i < len; i += 1) { + if (predicate(arr[i]) === true) { + arr.splice(i, 1); + len -= 1; + i -= 1; + } + } + }; + + /** + * Get matcher for unbind specific handler events + * @param {function} handler - handler function + * @returns {function} handler matcher + * @private + */ + CustomEvents.prototype._matchHandler = function(handler) { + var self = this; + + return function(item) { + var needRemove = handler === item.handler; + + if (needRemove) { + self._forgetContext(item.context); + } + + return needRemove; + }; + }; + + /** + * Get matcher for unbind specific context events + * @param {object} context - context + * @returns {function} object matcher + * @private + */ + CustomEvents.prototype._matchContext = function(context) { + var self = this; + + return function(item) { + var needRemove = context === item.context; + + if (needRemove) { + self._forgetContext(item.context); + } + + return needRemove; + }; + }; + + /** + * Get matcher for unbind specific hander, context pair events + * @param {function} handler - handler function + * @param {object} context - context + * @returns {function} handler, context matcher + * @private + */ + CustomEvents.prototype._matchHandlerAndContext = function(handler, context) { + var self = this; + + return function(item) { + var matchHandler = (handler === item.handler); + var matchContext = (context === item.context); + var needRemove = (matchHandler && matchContext); + + if (needRemove) { + self._forgetContext(item.context); + } + + return needRemove; + }; + }; + + /** + * Unbind event by event name + * @param {string} eventName - custom event name to unbind + * @param {function} [handler] - handler function + * @private + */ + CustomEvents.prototype._offByEventName = function(eventName, handler) { + var self = this; + var forEach = collection.forEachArray; + var andByHandler = type.isFunction(handler); + var matchHandler = self._matchHandler(handler); + + eventName = eventName.split(R_EVENTNAME_SPLIT); + + forEach(eventName, function(name) { + var handlerItems = self._safeEvent(name); + + if (andByHandler) { + self._spliceMatches(handlerItems, matchHandler); + } else { + forEach(handlerItems, function(item) { + self._forgetContext(item.context); + }); + + self.events[name] = []; + } + }); + }; + + /** + * Unbind event by handler function + * @param {function} handler - handler function + * @private + */ + CustomEvents.prototype._offByHandler = function(handler) { + var self = this; + var matchHandler = this._matchHandler(handler); + + collection.forEach(this._safeEvent(), function(handlerItems) { + self._spliceMatches(handlerItems, matchHandler); + }); + }; + + /** + * Unbind event by object(name: handler pair object or context object) + * @param {object} obj - context or {name: handler} pair object + * @param {function} handler - handler function + * @private + */ + CustomEvents.prototype._offByObject = function(obj, handler) { + var self = this; + var matchFunc; + + if (this._indexOfContext(obj) < 0) { + collection.forEach(obj, function(func, name) { + self.off(name, func); + }); + } else if (type.isString(handler)) { + matchFunc = this._matchContext(obj); + + self._spliceMatches(this._safeEvent(handler), matchFunc); + } else if (type.isFunction(handler)) { + matchFunc = this._matchHandlerAndContext(handler, obj); + + collection.forEach(this._safeEvent(), function(handlerItems) { + self._spliceMatches(handlerItems, matchFunc); + }); + } else { + matchFunc = this._matchContext(obj); + + collection.forEach(this._safeEvent(), function(handlerItems) { + self._spliceMatches(handlerItems, matchFunc); + }); + } + }; + + /** + * Unbind custom events + * @param {(string|object|function)} eventName - event name or context or + * {name: handler} pair object or handler function + * @param {(function)} handler - handler function + * @example + * //-- #1. Get Module --// + * var CustomEvents = require('tui-code-snippet').CustomEvents; // node, commonjs + * var CustomEvents = tui.util.CustomEvents; // distribution file + * + * //-- #2. Use property --// + * // # 2.1 off by event name + * CustomEvents.off('onload'); + * + * // # 2.2 off by event name and handler + * CustomEvents.off('play', handler); + * + * // # 2.3 off by handler + * CustomEvents.off(handler); + * + * // # 2.4 off by context + * CustomEvents.off(myObj); + * + * // # 2.5 off by context and handler + * CustomEvents.off(myObj, handler); + * + * // # 2.6 off by context and event name + * CustomEvents.off(myObj, 'onload'); + * + * // # 2.7 off by an Object. that is {eventName: handler} + * CustomEvents.off({ + * 'play': handler, + * 'pause': handler2 + * }); + * + * // # 2.8 off the all events + * CustomEvents.off(); + */ + CustomEvents.prototype.off = function(eventName, handler) { + if (type.isString(eventName)) { + // [syntax 1, 2] + this._offByEventName(eventName, handler); + } else if (!arguments.length) { + // [syntax 8] + this.events = {}; + this.contexts = []; + } else if (type.isFunction(eventName)) { + // [syntax 3] + this._offByHandler(eventName); + } else if (type.isObject(eventName)) { + // [syntax 4, 5, 6] + this._offByObject(eventName, handler); + } + }; + + /** + * Fire custom event + * @param {string} eventName - name of custom event + */ + CustomEvents.prototype.fire = function(eventName) { // eslint-disable-line + this.invoke.apply(this, arguments); + }; + + /** + * Fire a event and returns the result of operation 'boolean AND' with all + * listener's results. + * + * So, It is different from {@link CustomEvents#fire}. + * + * In service code, use this as a before event in component level usually + * for notifying that the event is cancelable. + * @param {string} eventName - Custom event name + * @param {...*} data - Data for event + * @returns {boolean} The result of operation 'boolean AND' + * @example + * var map = new Map(); + * map.on({ + * 'beforeZoom': function() { + * // It should cancel the 'zoom' event by some conditions. + * if (that.disabled && this.getState()) { + * return false; + * } + * return true; + * } + * }); + * + * if (this.invoke('beforeZoom')) { // check the result of 'beforeZoom' + * // if true, + * // doSomething + * } + */ + CustomEvents.prototype.invoke = function(eventName) { + var events, args, index, item; + + if (!this.hasListener(eventName)) { + return true; + } + + events = this._safeEvent(eventName); + args = Array.prototype.slice.call(arguments, 1); + index = 0; + + while (events[index]) { + item = events[index]; + + if (item.handler.apply(item.context, args) === false) { + return false; + } + + index += 1; + } + + return true; + }; + + /** + * Return whether at least one of the handlers is registered in the given + * event name. + * @param {string} eventName - Custom event name + * @returns {boolean} Is there at least one handler in event name? + */ + CustomEvents.prototype.hasListener = function(eventName) { + return this.getListenerLength(eventName) > 0; + }; + + /** + * Return a count of events registered. + * @param {string} eventName - Custom event name + * @returns {number} number of event + */ + CustomEvents.prototype.getListenerLength = function(eventName) { + var events = this._safeEvent(eventName); + + return events.length; + }; + + module.exports = CustomEvents; + + + /***/ }), + /* 17 */ + /***/ (function(module, exports, __webpack_require__) { + + var collection = __webpack_require__(4); + var type = __webpack_require__(2); + + /** + * Check whether the defineProperty() method is supported. + * @type {boolean} + * @ignore + */ + var isSupportDefinedProperty = (function() { + try { + Object.defineProperty({}, 'x', {}); + + return true; + } catch (e) { + return false; + } + })(); + + /** + * A unique value of a constant. + * @type {number} + * @ignore + */ + var enumValue = 0; + + /** + * Make a constant-list that has unique values.
+ * In modern browsers (except IE8 and lower),
+ * a value defined once can not be changed. + * + * @param {...string|string[]} itemList Constant-list (An array of string is available) + * @class + * @memberof tui.util + * @example + * //-- #1. Get Module --// + * var Enum = require('tui-code-snippet').Enum; // node, commonjs + * var Enum = tui.util.Enum; // distribution file + * + * //-- #2. Use property --// + * var MYENUM = new Enum('TYPE1', 'TYPE2'); + * var MYENUM2 = new Enum(['TYPE1', 'TYPE2']); + * + * //usage + * if (value === MYENUM.TYPE1) { + * .... + * } + * + * //add (If a duplicate name is inputted, will be disregarded.) + * MYENUM.set('TYPE3', 'TYPE4'); + * + * //get name of a constant by a value + * MYENUM.getName(MYENUM.TYPE1); // 'TYPE1' + * + * // In modern browsers (except IE8 and lower), a value can not be changed in constants. + * var originalValue = MYENUM.TYPE1; + * MYENUM.TYPE1 = 1234; // maybe TypeError + * MYENUM.TYPE1 === originalValue; // true + **/ + function Enum(itemList) { + if (itemList) { + this.set.apply(this, arguments); + } + } + + /** + * Define a constants-list + * @param {...string|string[]} itemList Constant-list (An array of string is available) + */ + Enum.prototype.set = function(itemList) { + var self = this; + + if (!type.isArray(itemList)) { + itemList = collection.toArray(arguments); + } + + collection.forEach(itemList, function itemListIteratee(item) { + self._addItem(item); + }); + }; + + /** + * Return a key of the constant. + * @param {number} value A value of the constant. + * @returns {string|undefined} Key of the constant. + */ + Enum.prototype.getName = function(value) { + var self = this; + var foundedKey; + + collection.forEach(this, function(itemValue, key) { // eslint-disable-line consistent-return + if (self._isEnumItem(key) && value === itemValue) { + foundedKey = key; + + return false; + } + }); + + return foundedKey; + }; + + /** + * Create a constant. + * @private + * @param {string} name Constant name. (It will be a key of a constant) + */ + Enum.prototype._addItem = function(name) { + var value; + + if (!this.hasOwnProperty(name)) { + value = this._makeEnumValue(); + + if (isSupportDefinedProperty) { + Object.defineProperty(this, name, { + enumerable: true, + configurable: false, + writable: false, + value: value + }); + } else { + this[name] = value; + } + } + }; + + /** + * Return a unique value for assigning to a constant. + * @private + * @returns {number} A unique value + */ + Enum.prototype._makeEnumValue = function() { + var value; + + value = enumValue; + enumValue += 1; + + return value; + }; + + /** + * Return whether a constant from the given key is in instance or not. + * @param {string} key - A constant key + * @returns {boolean} Result + * @private + */ + Enum.prototype._isEnumItem = function(key) { + return type.isNumber(this[key]); + }; + + module.exports = Enum; + + + /***/ }), + /* 18 */ + /***/ (function(module, exports, __webpack_require__) { + + var collection = __webpack_require__(4); + var Map = __webpack_require__(19); + + // Caching tui.util for performance enhancing + var mapAPIsForRead = ['get', 'has', 'forEach', 'keys', 'values', 'entries']; + var mapAPIsForDelete = ['delete', 'clear']; + + /** + * The ExMap object is Extended Version of the tui.util.Map object.
+ * and added some useful feature to make it easy to manage the Map object. + * @constructor + * @param {Array} initData - Array of key-value pairs (2-element Arrays). + * Each key-value pair will be added to the new Map + * @memberof tui.util + * @example + * // node, commonjs + * var ExMap = require('tui-code-snippet').ExMap; + * @example + * // distribution file, script + * + * + * + *