SAP/abap2UI5
1
0
Fork 0
mirror of https://github.com/abap2UI5/abap2UI5.git synced 2025-04-30 14:36:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

driverjs update (#622)

Browse Source 
* driverjs update

now support js events as parameters

added highlight function.

performence & logic fixes

* update

* fix driverjs
This commit is contained in:
choper725 2023-11-04 12:07:01 +02:00 committed by GitHub
parent 80211ea90c
commit 8744e7c0f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 214 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/01/z2ui5_cl_cc_driver_js.clas.abap
View File

@ -46,6 +46,14 @@
show_progress TYPE abap_bool, show_progress TYPE abap_bool,
progress_text TYPE string, progress_text TYPE string,
popover_class 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. END OF ty_config_steps_popover.
TYPES: TYPES:
@ -53,6 +61,12 @@
element TYPE string, element TYPE string,
elementview TYPE string, elementview TYPE string,
popover TYPE ty_config_steps_popover, 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. END OF ty_config_steps.
TYPES ty_config_steps_tt TYPE STANDARD TABLE OF ty_config_steps WITH DEFAULT KEY. TYPES ty_config_steps_tt TYPE STANDARD TABLE OF ty_config_steps WITH DEFAULT KEY.
@ -78,6 +92,24 @@
next_btn_text TYPE string, next_btn_text TYPE string,
prev_btn_text TYPE string, prev_btn_text TYPE string,
done_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. END OF ty_config.
@ -96,9 +128,11 @@
RETURNING RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view. VALUE(result) TYPE REF TO z2ui5_cl_xml_view.
METHODS set_drive_config METHODS set_driver_configs
IMPORTING 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 RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view. VALUE(result) TYPE REF TO z2ui5_cl_xml_view.
@ -319,18 +353,37 @@ CLASS Z2UI5_CL_CC_DRIVER_JS IMPLEMENTATION.
ENDMETHOD. ENDMETHOD.
METHOD set_drive_config. METHOD set_driver_configs.
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(<step>).
IF <step>-popover-title IS NOT INITIAL.
<step>-popover-title = escape( val = <step>-popover-title format = cl_abap_format=>e_html_js_html ).
ENDIF.
IF <step>-popover-description IS NOT INITIAL.
<step>-popover-description = escape( val = <step>-popover-description format = cl_abap_format=>e_html_js_html ).
ENDIF.
ENDLOOP.
"needed for transpilation to js "needed for transpilation to js
DATA(lv_config_json) = ``. DATA(lv_config_json) = ``.
lv_config_json = /ui2/cl_json=>serialize( lv_config_json = /ui2/cl_json=>serialize(
data = config data = ls_config
compress = abap_true compress = abap_true
pretty_name = 'X' ). pretty_name = 'X' ).
DATA(drive_js) = `debugger;const driver = window.driver.js.driver;` && |\n| && drive_js = drive_js && `var config = ` && lv_config_json && `;` && |\n| &&
`var config = ` && lv_config_json && `;` && |\n| &&
`var iLength = config.steps.length;` && |\n| && `var iLength = config.steps.length;` && |\n| &&
`for (var i = 0; i &lt; iLength; i++) {` && |\n| && `for (var i = 0; i &lt; iLength; i++) {` && |\n| &&
` switch ( config.steps[i].elementview ) {` && |\n| && ` switch ( config.steps[i].elementview ) {` && |\n| &&
@ -342,12 +395,103 @@ CLASS Z2UI5_CL_CC_DRIVER_JS IMPLEMENTATION.
` config.steps[i].element = '#' + sap.z2ui5.oViewPopup.createId( config.steps[i].element );` && |\n| && ` config.steps[i].element = '#' + sap.z2ui5.oViewPopup.createId( config.steps[i].element );` && |\n| &&
` case 'POPOVER':` && |\n| && ` case 'POPOVER':` && |\n| &&
` config.steps[i].element = '#' + sap.z2ui5.oViewPopover.createId( config.steps[i].element );` && |\n| && ` config.steps[i].element = '#' + sap.z2ui5.oViewPopover.createId( config.steps[i].element );` && |\n| &&
` case 'MAIN':` && |\n| && ` // MAIN view is default` && |\n| &&
` default:` && |\n| &&
` config.steps[i].element = '#' + sap.z2ui5.oView.createId( config.steps[i].element );` && |\n| && ` config.steps[i].element = '#' + sap.z2ui5.oView.createId( config.steps[i].element );` && |\n| &&
` };` && |\n| && ` };` && |\n| &&
`};` && |\n| && `};`.
`const driverObj = driver( config );` && |\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 &lt; 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( `<html:script>` && drive_js && `</html:script>` ). result = mo_view->_cc_plain_xml( `<html:script>` && drive_js && `</html:script>` ).

14
src/z2ui5_cl_fw_http_handler.clas.abap
View File

@ -27,7 +27,8 @@ CLASS z2ui5_cl_fw_http_handler DEFINITION
ENDCLASS. ENDCLASS.
CLASS z2ui5_cl_fw_http_handler IMPLEMENTATION.
CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION.
METHOD http_get. METHOD http_get.
@ -274,11 +275,18 @@ CLASS z2ui5_cl_fw_http_handler IMPLEMENTATION.
` var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| && ` var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| &&
` navCon.to(navConTo);` && |\n| && ` navCon.to(navConTo);` && |\n| &&
` break;` && |\n| && ` break;` && |\n| &&
` case 'DRIVE':` && |\n| && ` case 'DRIVERJS_DRIVE':` && |\n| &&
` if( driverObj !== undefined ) {` && |\n| && ` if( driver !== undefined && config !== undefined ) {` && |\n| &&
` driverObj = driver(config);` && |\n| &&
` driverObj.drive();` && |\n| && ` driverObj.drive();` && |\n| &&
` };` && |\n| && ` };` && |\n| &&
` break;` && |\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| && ` },` && |\n| &&
|\n| && |\n| &&

29
src/z2ui5_cl_xml_view.clas.abap
View File

@ -839,6 +839,7 @@ CLASS z2ui5_cl_xml_view DEFINITION
!columnsxl TYPE clike OPTIONAL !columnsxl TYPE clike OPTIONAL
!columnsl TYPE clike OPTIONAL !columnsl TYPE clike OPTIONAL
!columnsm TYPE clike OPTIONAL !columnsm TYPE clike OPTIONAL
!id TYPE clike OPTIONAL
PREFERRED PARAMETER title PREFERRED PARAMETER title
RETURNING RETURNING
VALUE(result) TYPE REF TO z2ui5_cl_xml_view . 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. METHOD actions.
@ -2960,6 +2961,19 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION.
ENDMETHOD. 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. METHOD bars.
result = _generic( name = `bars` result = _generic( name = `bars`
ns = `mchart` ). ns = `mchart` ).
@ -3506,18 +3520,6 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION.
ENDMETHOD. 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. METHOD end_column_pages.
" todo, implement method " todo, implement method
result = me. result = me.
@ -5342,6 +5344,7 @@ CLASS z2ui5_cl_xml_view IMPLEMENTATION.
ns = `form` ns = `form`
t_prop = VALUE #( ( n = `title` v = title ) t_prop = VALUE #( ( n = `title` v = title )
( n = `layout` v = layout ) ( n = `layout` v = layout )
( n = `id` v = id )
( n = `columnsXL` v = columnsxl ) ( n = `columnsXL` v = columnsxl )
( n = `columnsL` v = columnsl ) ( n = `columnsL` v = columnsl )
( n = `columnsM` v = columnsm ) ( n = `columnsM` v = columnsm )