From 8744e7c0f07a9be8951b6897548b40c70376565e Mon Sep 17 00:00:00 2001 From: choper725 <129428114+choper725@users.noreply.github.com> Date: Sat, 4 Nov 2023 12:07:01 +0200 Subject: [PATCH] driverjs update (#622) * driverjs update now support js events as parameters added highlight function. performence & logic fixes * update * fix driverjs --- src/01/z2ui5_cl_cc_driver_js.clas.abap | 230 ++++++++++++++++++++----- src/z2ui5_cl_fw_http_handler.clas.abap | 14 +- src/z2ui5_cl_xml_view.clas.abap | 29 ++-- 3 files changed, 214 insertions(+), 59 deletions(-) diff --git a/src/01/z2ui5_cl_cc_driver_js.clas.abap b/src/01/z2ui5_cl_cc_driver_js.clas.abap index cc8db7cd..772fc4ac 100644 --- a/src/01/z2ui5_cl_cc_driver_js.clas.abap +++ b/src/01/z2ui5_cl_cc_driver_js.clas.abap @@ -34,25 +34,39 @@ TYPES: BEGIN OF ty_config_steps_popover, - title TYPE string, - description TYPE string, - side TYPE string, - align TYPE string, - show_buttons TYPE string, - disable_buttons TYPE string, - next_btn_text TYPE string, - prev_btn_text TYPE string, - done_btn_text TYPE string, - show_progress TYPE abap_bool, - progress_text TYPE string, - popover_class TYPE string, + title TYPE string, + description TYPE string, + side TYPE string, + align TYPE string, + show_buttons TYPE string, + disable_buttons TYPE string, + next_btn_text TYPE string, + prev_btn_text TYPE string, + done_btn_text TYPE string, + show_progress TYPE abap_bool, + progress_text TYPE string, + popover_class TYPE string, + " onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; + on_popover_render TYPE string, + " onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_next_click TYPE string, + " onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_prev_click TYPE string, + " onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_close_click TYPE string, END OF ty_config_steps_popover. TYPES: BEGIN OF ty_config_steps, - element TYPE string, - elementview TYPE string, - popover TYPE ty_config_steps_popover, + element TYPE string, + elementview TYPE string, + popover TYPE ty_config_steps_popover, + " onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_deselected TYPE string, + " onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_highlight_started TYPE string, + " onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_highlighted TYPE string, END OF ty_config_steps. TYPES ty_config_steps_tt TYPE STANDARD TABLE OF ty_config_steps WITH DEFAULT KEY. @@ -78,6 +92,24 @@ next_btn_text TYPE string, prev_btn_text TYPE string, done_btn_text TYPE string, + " onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; + on_popover_render TYPE string, + " onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_highlight_started TYPE string, + " onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_highlighted TYPE string, + " onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_deselected TYPE string, + " onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_destroy_started TYPE string, + " onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_destroyed TYPE string, + " onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_next_click TYPE string, + " onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_prev_click TYPE string, + " onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;; + on_close_click TYPE string, END OF ty_config. @@ -96,11 +128,13 @@ RETURNING VALUE(result) TYPE REF TO z2ui5_cl_xml_view. - METHODS set_drive_config + METHODS set_driver_configs IMPORTING - !config TYPE ty_config + !steps_config TYPE ty_config OPTIONAL + !highlight_config TYPE ty_config_steps OPTIONAL + !highlight_driver_config TYPE ty_config OPTIONAL RETURNING - VALUE(result) TYPE REF TO z2ui5_cl_xml_view. + VALUE(result) TYPE REF TO z2ui5_cl_xml_view. CLASS-METHODS get_css_local RETURNING @@ -319,35 +353,145 @@ CLASS Z2UI5_CL_CC_DRIVER_JS IMPLEMENTATION. ENDMETHOD. - METHOD set_drive_config. + METHOD set_driver_configs. - "needed for transpilation to js - DATA(lv_config_json) = ``. - lv_config_json = /ui2/cl_json=>serialize( - data = config - compress = abap_true - pretty_name = 'X' ). + DATA(ls_config) = steps_config. + DATA(ls_highlight_config) = highlight_config. + DATA(ls_highlight_driver_config) = highlight_driver_config. + + "load driver object from window object + DATA(drive_js) = `const driver = window.driver.js.driver;` && |\n| && + `let driverObj = new Object();` && |\n|. + + "handle tour + IF steps_config IS NOT INITIAL. + + LOOP AT ls_config-steps ASSIGNING FIELD-SYMBOL(). + IF -popover-title IS NOT INITIAL. + -popover-title = escape( val = -popover-title format = cl_abap_format=>e_html_js_html ). + ENDIF. + IF -popover-description IS NOT INITIAL. + -popover-description = escape( val = -popover-description format = cl_abap_format=>e_html_js_html ). + ENDIF. + ENDLOOP. + + "needed for transpilation to js + DATA(lv_config_json) = ``. + lv_config_json = /ui2/cl_json=>serialize( + data = ls_config + compress = abap_true + pretty_name = 'X' ). - DATA(drive_js) = `debugger;const driver = window.driver.js.driver;` && |\n| && - `var config = ` && lv_config_json && `;` && |\n| && - `var iLength = config.steps.length;` && |\n| && - `for (var i = 0; i < iLength; i++) {` && |\n| && - ` switch ( config.steps[i].elementview ) {` && |\n| && - ` case 'NEST':` && |\n| && - ` config.steps[i].element = '#' + sap.z2ui5.oViewNest.createId( config.steps[i].element );` && |\n| && - ` case 'NEST2':` && |\n| && - ` config.steps[i].element = '#' + sap.z2ui5.oViewNest2.createId( config.steps[i].element );` && |\n| && - ` case 'POPUP':` && |\n| && - ` config.steps[i].element = '#' + sap.z2ui5.oViewPopup.createId( config.steps[i].element );` && |\n| && - ` case 'POPOVER':` && |\n| && - ` config.steps[i].element = '#' + sap.z2ui5.oViewPopover.createId( config.steps[i].element );` && |\n| && - ` case 'MAIN':` && |\n| && - ` config.steps[i].element = '#' + sap.z2ui5.oView.createId( config.steps[i].element );` && |\n| && - ` };` && |\n| && - `};` && |\n| && - `const driverObj = driver( config );` && |\n|. + drive_js = drive_js && `var config = ` && lv_config_json && `;` && |\n| && + `var iLength = config.steps.length;` && |\n| && + `for (var i = 0; i < iLength; i++) {` && |\n| && + ` switch ( config.steps[i].elementview ) {` && |\n| && + ` case 'NEST':` && |\n| && + ` config.steps[i].element = '#' + sap.z2ui5.oViewNest.createId( config.steps[i].element );` && |\n| && + ` case 'NEST2':` && |\n| && + ` config.steps[i].element = '#' + sap.z2ui5.oViewNest2.createId( config.steps[i].element );` && |\n| && + ` case 'POPUP':` && |\n| && + ` config.steps[i].element = '#' + sap.z2ui5.oViewPopup.createId( config.steps[i].element );` && |\n| && + ` case 'POPOVER':` && |\n| && + ` config.steps[i].element = '#' + sap.z2ui5.oViewPopover.createId( config.steps[i].element );` && |\n| && + ` // MAIN view is default` && |\n| && + ` default:` && |\n| && + ` config.steps[i].element = '#' + sap.z2ui5.oView.createId( config.steps[i].element );` && |\n| && + ` };` && |\n| && + `};`. + drive_js = drive_js && |\n| && `debugger;` && + `for (var key of Object.keys(config)) {` && |\n| && + ` if( key.startsWith('on') ) {` && |\n| && + ` config[key] = new Function( config[key] );` && |\n| && + ` };` && |\n| && + `};` && |\n|. + + drive_js = drive_js && |\n| && + `for (key of Object.keys(config.steps)) {` && |\n| && + ` if( key.startsWith('on') ) {` && |\n| && + ` config.steps[key] = new Function( config.steps[key] );` && |\n| && + ` };` && |\n| && + `};` && |\n|. + + drive_js = drive_js && |\n| && + `for (var j = 0; j < config.steps.length; j++) {` && |\n| && + ` for (key of Object.keys(config.steps[j].popover)) {` && |\n| && + ` if( key.startsWith('on') ) {` && |\n| && + ` config.steps[j].popover[key] = new Function( config.steps[kj].popover[key] );` && |\n| && + ` };` && |\n| && + ` };` && |\n| && + `};` && |\n|. + + + ENDIF. + + "handle highlight + IF highlight_config IS NOT INITIAL AND highlight_driver_config IS NOT INITIAL. + + DATA(lv_highlight_driver_config_jn) = ``. + lv_highlight_driver_config_jn = /ui2/cl_json=>serialize( + data = ls_highlight_driver_config + compress = abap_true + pretty_name = 'X' ). + + drive_js = drive_js && |\n| && + `var highlight_driver_config = ` && lv_highlight_driver_config_jn && `;` && |\n|. + + + IF ls_highlight_config-popover-title IS NOT INITIAL. + ls_highlight_config-popover-title = escape( val = ls_highlight_config-popover-title format = cl_abap_format=>e_html_js_html ). + ENDIF. + + IF ls_highlight_config-popover-description IS NOT INITIAL. + ls_highlight_config-popover-description = escape( val = ls_highlight_config-popover-description format = cl_abap_format=>e_html_js_html ). + ENDIF. + + DATA(lv_highlight_config_json) = ``. + lv_highlight_config_json = /ui2/cl_json=>serialize( + data = ls_highlight_config + compress = abap_true + pretty_name = 'X' ). + + drive_js = drive_js && |\n| && + `var highlight_config = ` && lv_highlight_config_json && `;` && |\n| && + `switch ( highlight_config.elementview ) {` && |\n| && + ` case 'NEST':` && |\n| && + ` highlight_config.element = '#' + sap.z2ui5.oViewNest.createId( highlight_config.element );` && |\n| && + ` case 'NEST2':` && |\n| && + ` highlight_config.element = '#' + sap.z2ui5.oViewNest2.createId( highlight_config.element );` && |\n| && + ` case 'POPUP':` && |\n| && + ` highlight_config.element = '#' + sap.z2ui5.oViewPopup.createId( highlight_config.element );` && |\n| && + ` case 'POPOVER':` && |\n| && + ` highlight_config.element = '#' + sap.z2ui5.oViewPopover.createId( highlight_config.element );` && |\n| && + ` // MAIN view is default` && |\n| && + ` default:` && |\n| && + ` highlight_config.element = '#' + sap.z2ui5.oView.createId( highlight_config.element );` && |\n| && + `};`. + + drive_js = drive_js && |\n| && + `for (var key1 of Object.keys(highlight_config)) {` && |\n| && + ` if( key1.startsWith('on') ) {` && |\n| && + ` highlight_config[key1] = new Function( highlight_config[key1] );` && |\n| && + ` };` && |\n| && + `};` && |\n|. + + drive_js = drive_js && |\n| && + `for (var key1 of Object.keys(highlight_config.popover)) {` && |\n| && + ` if( key1.startsWith('on') ) {` && |\n| && + ` highlight_config.popover[key1] = new Function( highlight_config.popover[key1] );` && |\n| && + ` };` && |\n| && + `};` && |\n|. + + drive_js = drive_js && |\n| && + `for (key1 of Object.keys(highlight_driver_config)) {` && |\n| && + ` if( key.startsWith('on') ) {` && |\n| && + ` highlight_driver_config[key] = new Function( highlight_driver_config[key] );` && |\n| && + ` };` && |\n| && + `};`. + + ENDIF. result = mo_view->_cc_plain_xml( `` && drive_js && `` ). diff --git a/src/z2ui5_cl_fw_http_handler.clas.abap b/src/z2ui5_cl_fw_http_handler.clas.abap index 492d7b2c..3246f0a6 100644 --- a/src/z2ui5_cl_fw_http_handler.clas.abap +++ b/src/z2ui5_cl_fw_http_handler.clas.abap @@ -27,7 +27,8 @@ CLASS z2ui5_cl_fw_http_handler DEFINITION ENDCLASS. -CLASS z2ui5_cl_fw_http_handler IMPLEMENTATION. + +CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION. METHOD http_get. @@ -274,11 +275,18 @@ CLASS z2ui5_cl_fw_http_handler IMPLEMENTATION. ` var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| && ` navCon.to(navConTo);` && |\n| && ` break;` && |\n| && - ` case 'DRIVE':` && |\n| && - ` if( driverObj !== undefined ) {` && |\n| && + ` case 'DRIVERJS_DRIVE':` && |\n| && + ` if( driver !== undefined && config !== undefined ) {` && |\n| && + ` driverObj = driver(config);` && |\n| && ` driverObj.drive();` && |\n| && ` };` && |\n| && ` break;` && |\n| && + ` case 'DRIVERJS_HIGHLIGHT':` && |\n| && + ` if( driver !== undefined && highlight_driver_config !== undefined && highlight_config !== undefined ) {` && |\n| && + ` driverObj = driver(highlight_driver_config);` && |\n| && + ` driverObj.highlight(highlight_config);` && |\n| && + ` };` && |\n| && + ` break;` && |\n| && ` }` && |\n| && ` },` && |\n| && |\n| && diff --git a/src/z2ui5_cl_xml_view.clas.abap b/src/z2ui5_cl_xml_view.clas.abap index 2e8dab4f..13c4a59e 100644 --- a/src/z2ui5_cl_xml_view.clas.abap +++ b/src/z2ui5_cl_xml_view.clas.abap @@ -839,6 +839,7 @@ CLASS z2ui5_cl_xml_view DEFINITION !columnsxl TYPE clike OPTIONAL !columnsl TYPE clike OPTIONAL !columnsm TYPE clike OPTIONAL + !id TYPE clike OPTIONAL PREFERRED PARAMETER title RETURNING VALUE(result) TYPE REF TO z2ui5_cl_xml_view . @@ -2855,7 +2856,7 @@ ENDCLASS. -CLASS z2ui5_cl_xml_view IMPLEMENTATION. +CLASS Z2UI5_CL_XML_VIEW IMPLEMENTATION. METHOD actions. @@ -2960,6 +2961,19 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION. ENDMETHOD. + METHOD barcode_scanner_button. + result = _generic( name = `BarcodeScannerButton` + ns = 'ndc' + t_prop = VALUE #( + ( n = `id` v = id ) + ( n = `scanSuccess` v = scansuccess ) + ( n = `scanFail` v = scanfail ) + ( n = `inputLiveUpdate` v = inputliveupdate ) + ( n = `dialogTitle` v = dialogtitle ) ) ). + + ENDMETHOD. + + METHOD bars. result = _generic( name = `bars` ns = `mchart` ). @@ -3506,18 +3520,6 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION. ENDMETHOD. - METHOD barcode_scanner_button. - result = _generic( name = `BarcodeScannerButton` - ns = 'ndc' - t_prop = VALUE #( - ( n = `id` v = id ) - ( n = `scanSuccess` v = scansuccess ) - ( n = `scanFail` v = scanfail ) - ( n = `inputLiveUpdate` v = inputliveupdate ) - ( n = `dialogTitle` v = dialogtitle ) ) ). - - ENDMETHOD. - METHOD end_column_pages. " todo, implement method result = me. @@ -5342,6 +5344,7 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION. ns = `form` t_prop = VALUE #( ( n = `title` v = title ) ( n = `layout` v = layout ) + ( n = `id` v = id ) ( n = `columnsXL` v = columnsxl ) ( n = `columnsL` v = columnsl ) ( n = `columnsM` v = columnsm )