See More

/* * Project Name : Visual Python * Description : GUI-based Python code generator * File Name : com_Popup.js * Author : Black Logic * Note : [CLASS] Popup page * License : GPLv3 (GNU General Public License v3.0) * Date : 2021. 08. 14 * Change Date : */ //============================================================================ // [CLASS] Popup page //============================================================================ define([ 'vp_base/js/com/com_Const', 'vp_base/js/com/com_util', 'codemirror/lib/codemirror' ], function(com_Const, com_util, codemirror) { 'use strict'; //======================================================================== // Define variable //======================================================================== const VP_PP = 'vp-pp'; const VP_PP_CONTAINER = 'vp-pp-container'; const VP_PP_TITLE = 'vp-pp-title'; const VP_PP_CLOSE = 'vp-pp-close'; const VP_PP_BODY = 'vp-pp-body'; const VP_PP_PREVIEW_BOX = 'vp-pp-preview-box'; const VP_PP_BUTTON_BOX = 'vp-pp-btn-box'; const VP_PP_BUTTON_PREVIEW = 'vp-pp-btn-preview'; const VP_PP_BUTTON_CANCEL = 'vp-pp-btn-cancel'; const VP_PP_BUTTON_RUNADD = 'vp-pp-btn-runadd'; const VP_PP_BUTTON_RUN = 'vp-pp-btn-run'; const VP_PP_BUTTON_DETAIL = 'vp-pp-btn-detail'; const VP_PP_DETAIL_BOX = 'vp-pp-detail-box'; const VP_PP_DETAIL_ITEM = 'vp-pp-detail-item'; //======================================================================== // [CLASS] com_Popup //======================================================================== class com_Popup { /** * constructor * @param {object} pageThis * @param {string} targetId */ constructor(pageThis, targetId) { this.pageThis = pageThis; this.targetId = targetId; this.uuid = 'u' + com_util.getUUID(); this.config = { title: '', width: '95%', height: '95%', pageDom: $('

Empty
') }; this.cmReadonlyConfig = { mode: { name: 'python', version: 3, singleLineStringErrors: false }, height: '100%', width: '100%', indentUnit: 4, matchBrackets: true, readOnly: true, autoRefresh: true, theme: 'ipython', extraKeys: { 'Enter': 'newlineAndIndentContinueMarkdownList' }, scrollbarStyle: 'null' }; this.previewOpened = false; } /** * Wrap selector */ wrapSelector(selector = '') { return com_util.formatString('.{0} {1}', this.uuid, selector); } /** * Initialize */ init() { com_util.loadCss(com_Const.STYLE_PATH + 'common/popupPage.css'); this.renderPopup(); this.bindEvent(); } /** * Render popup page */ renderPopup() { var { title, width, height, pageDom } = this.config; var page = new MakeString(); page.appendFormatLine('
', VP_PP, this.uuid); page.appendFormatLine('
', VP_PP_CONTAINER, width, height); // title page.appendFormat('
{1}
', VP_PP_TITLE, title); // close button page.appendFormatLine('
', VP_PP_CLOSE, 'fa fa-close'); // body start page.appendFormatLine('
', VP_PP_BODY, 'vp-apiblock-scrollbar'); page.appendLine('
'); // body end // Snippets menu don't use buttons if (title != 'Snippets') { // preview box page.appendFormatLine('
', VP_PP_PREVIEW_BOX, 'vp-apiblock-scrollbar'); page.appendFormatLine('', 'vp_codePreview'); page.appendLine('
'); // button box page.appendFormatLine('
', VP_PP_BUTTON_BOX); page.appendFormatLine('', 'vp-button', 'vp-pp-btn', VP_PP_BUTTON_PREVIEW, 'Code view'); page.appendFormatLine('', 'vp-button cancel', 'vp-pp-btn', VP_PP_BUTTON_CANCEL, 'Cancel'); page.appendFormatLine('
', VP_PP_BUTTON_RUNADD); page.appendFormatLine('', 'vp-button activated', VP_PP_BUTTON_RUN, 'Apply to Board & Run Cell', 'Run'); page.appendFormatLine('', 'vp-button activated', VP_PP_BUTTON_DETAIL, 'fa fa-sort-up'); page.appendFormatLine('
', VP_PP_DETAIL_BOX, 'vp-cursor'); page.appendFormatLine('
{3}
', VP_PP_DETAIL_ITEM, 'apply', 'Apply to Board', 'Apply'); page.appendFormatLine('
{3}
', VP_PP_DETAIL_ITEM, 'add', 'Apply to Board & Add Cell', 'Add'); page.appendLine('
'); // VP_PP_DETAIL_BOX page.appendLine('
'); // VP_PP_BUTTON_RUNADD page.appendLine('
'); // VP_PP_BUTTON_BOX } page.appendLine('
'); // container end page.appendLine('
'); // VP_PP end $('#vp-wrapper').append(page.toString()); $(pageDom).appendTo($(this.wrapSelector('.' + VP_PP_BODY))); $(this.wrapSelector()).hide(); return page.toString(); } /** * Open */ open(config) { this.config = { ...this.config, ...config }; this.init(); $(this.wrapSelector()).show(); if (!this.cmpreview) { // codemirror setting this.cmpreview = codemirror.fromTextArea($('#vp_codePreview')[0], this.cmReadonlyConfig); } else { this.cmpreview.refresh(); } } /** * Close */ close() { this.unbindEvent(); $(this.wrapSelector()).remove(); } /** * Apply */ apply(addCell = false, runCell = false) { if (this.pageThis) { var code = this.pageThis.generateCode(false, false); $(com_util.wrapSelector('#' + this.targetId)).val(code); $(com_util.wrapSelector('#' + this.targetId)).trigger({ type: 'popup_run', title: this.config.title, code: code, addCell: addCell, runCell: runCell }); } } /** * Open preview */ openPreview() { if (this.pageThis) { var code = this.pageThis.generateCode(false, false); this.cmpreview.setValue(code); this.cmpreview.save(); this.cmpreview.focus(); var that = this; setTimeout(function () { that.cmpreview.refresh(); }, 1); this.previewOpened = true; $(this.wrapSelector('.' + VP_PP_PREVIEW_BOX)).show(); } } /** * Close preview */ closePreview() { this.previewOpened = false; $(this.wrapSelector('.' + VP_PP_PREVIEW_BOX)).hide(); } /** * Bind event */ bindEvent() { var that = this; // close popup $(document).on('click', this.wrapSelector('.' + VP_PP_CLOSE), function (event) { that.close(); }); // click preview $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_PREVIEW), function (evt) { evt.stopPropagation(); if (that.previewOpened) { that.closePreview(); } else { that.openPreview(); } }); // click cancel $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_CANCEL), function () { that.close(); }); // click run $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_RUN), function () { that.apply(true, true); that.close(); }); // click detail button $(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_DETAIL), function (evt) { evt.stopPropagation(); $(that.wrapSelector('.' + VP_PP_DETAIL_BOX)).show(); }); // click add / apply $(document).on('click', this.wrapSelector('.' + VP_PP_DETAIL_ITEM), function () { var type = $(this).data('type'); if (type == 'add') { that.apply(true); that.close(); } else if (type == 'apply') { that.apply(); that.close(); } }); // click other $(document).on('click.' + this.uuid, function (evt) { if (!$(evt.target).hasClass('.' + VP_PP_BUTTON_DETAIL)) { $(that.wrapSelector('.' + VP_PP_DETAIL_BOX)).hide(); } if (!$(evt.target).hasClass('.' + VP_PP_BUTTON_PREVIEW) && $(that.wrapSelector('.' + VP_PP_PREVIEW_BOX)).has(evt.target).length === 0) { that.closePreview(); } }); this.keyboardManager = { keyCode: { ctrlKey: 17, cmdKey: 91, shiftKey: 16, altKey: 18, enter: 13, escKey: 27 }, keyCheck: { ctrlKey: false, shiftKey: false } }; $(document).on('keydown.' + this.uuid, function (e) { var keyCode = that.keyboardManager.keyCode; if (e.keyCode == keyCode.ctrlKey || e.keyCode == keyCode.cmdKey) { that.keyboardManager.keyCheck.ctrlKey = true; } if (e.keyCode == keyCode.shiftKey) { that.keyboardManager.keyCheck.shiftKey = true; } }).on('keyup.' + this.uuid, function (e) { var keyCode = that.keyboardManager.keyCode; if (e.keyCode == keyCode.ctrlKey || e.keyCode == keyCode.cmdKey) { that.keyboardManager.keyCheck.ctrlKey = false; } if (e.keyCode == keyCode.shiftKey) { that.keyboardManager.keyCheck.shiftKey = false; } if (e.keyCode == keyCode.escKey) { // close on esc that.close(); } }); } /** * Unbind event */ unbindEvent() { $(document).unbind(com_util.formatString(".{0} .{1}", this.uuid, VP_PP_BODY)); $(document).off('click', this.wrapSelector('.' + VP_PP_CLOSE)); $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_PREVIEW)); $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_CANCEL)); $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_RUN)); $(document).off('click', this.wrapSelector('.' + VP_PP_BUTTON_DETAIL)); $(document).off('click', this.wrapSelector('.' + VP_PP_DETAIL_ITEM)); $(document).off('click.' + this.uuid); $(document).off('keydown.' + this.uuid); $(document).off('keyup.' + this.uuid); } } return com_Popup; }); /* function, define */ /* End of file */