Dynamic Side Content - position

The class

" @keywords dynamicsidecontent dynamic side content sap.ui.layout dynamicsidecontentposition html title text toolbar button slider
" @summary The side content is positioned on the left side of the main content in left-to-right mode and on the right side of the main content in right-to-left mode.
" @origin sap.ui.layout.sample.DynamicSideContentPosition - https://sdk.openui5.org/entity/sap.ui.layout.DynamicSideContent/sample/sap.ui.layout.sample.DynamicSideContentPosition (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_344 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA toggle_enabled TYPE abap_bool.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_344 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_navigated( ).
      view_display( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    " sideContentPosition Begin is what this sample adds over the plain
    " DynamicSideContent one (app 138); the controller behaviours are wired the
    " same way: breakpointChanged carries its currentBreakpoint to the backend
    " and enables the Toggle button on S, the Toggle press calls the control's
    " own toggle( ) through control_by_id, and the Slider resizes
    " the container's DOM node through the css control method - sap.m.Page has
    " no width property, exactly the gap the original's jQuery width( ) works
    " around. style.css is injected as a core:HTML style leaf.
    view->ele( n = `View` ns = `mvc`
        )->a( n = `height`     v = `100%`
        )->a( n = `xmlns:l`    v = `sap.ui.layout`
        )->a( n = `xmlns:mvc`  v = `sap.ui.core.mvc`
        )->a( n = `xmlns:core` v = `sap.ui.core`
        )->a( n = `xmlns`      v = `sap.m`

        )->tag( n = `HTML` ns = `core`
            )->a( n = `content` v = `<style>.sapUiDSC.sapUiDSCExplored h1\{font-size:1.5rem\}</style>`

        )->ele( `Page`
            )->a( n = `showHeader`    v = `false`
            )->a( n = `showNavButton` v = `false`

            )->ele( `Page`
                )->a( n = `id`            v = `sideContentContainer`
                )->a( n = `showHeader`    v = `false`
                )->a( n = `showNavButton` v = `false`

                )->ele( n = `DynamicSideContent` ns = `l`
                    )->a( n = `id`                  v = `DynamicSideContent`
                    )->a( n = `class`               v = `sapUiDSCExplored sapUiContentPadding`
                    )->a( n = `sideContentFallDown` v = `BelowM`
                    )->a( n = `sideContentPosition` v = `Begin`
                    )->a( n = `containerQuery`      v = `true`
                    )->a( n = `breakpointChanged`   v = client->_event( val = `BP_CHANGED` arg = `${$parameters>/currentBreakpoint}` )

                    )->tag( `Title`
                        )->a( n = `level` v = `H1`
                        )->a( n = `text`  v = `Main content positioned after side content`

                    )->tag( `Text`
                        )->a( n = `text` v = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ` &&
                                             `ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ` &&
                                             `occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ` &&
                                             `incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ` &&
                                             `reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id ` &&
                                             `est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ` &&
                                             `exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ` &&
                                             `Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ` &&
                                             `eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute ` &&
                                             `irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt ` &&
                                             `mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ` &&
                                             `quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla ` &&
                                             `pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, ` &&
                                             `sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ` &&
                                             `Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia ` &&
                                             `deserunt mollit anim id est laborum.`

                    )->ele( n = `sideContent` ns = `l`
                        )->tag( `Title`
                            )->a( n = `level` v = `H1`
                            )->a( n = `text`  v = `Side content positioned before main content`

                        )->tag( `Text`
                            )->a( n = `text` v = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ` &&
                                                 `ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ` &&
                                                 `occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ` &&
                                                 `incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ` &&
                                                 `reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id ` &&
                                                 `est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ` &&
                                                 `exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ` &&
                                                 `Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ` &&
                                                 `eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute ` &&
                                                 `irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt ` &&
                                                 `mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ` &&
                                                 `quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla ` &&
                                                 `pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, ` &&
                                                 `sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ` &&
                                                 `Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia ` &&
                                                 `deserunt mollit anim id est laborum.`

                    )->end(
                )->end(
            )->end(
            )->ele( `footer`
                )->ele( `Toolbar`
                    )->tag( `Button`
                        )->a( n = `text`    v = `Toggle`
                        )->a( n = `type`    v = `Accept`
                        " handleToggleClick calls DynamicSideContent.toggle( ),
                        " which is NOT the showSideContent setter: on breakpoint
                        " S it swaps the control's private _MCVisible/_SCVisible
                        " pair and leaves showSideContent at its true default.
                        " Driving the method itself is therefore the only 1:1
                        " route (an unlisted public method is callable - the
                        " denylist covers teardown, model swaps and the render
                        " lifecycle, none of which this is)
                        )->a( n = `press`   v = client->follow_up_action(
                                  val   = client->cs_event-control_by_id
                                  t_arg = VALUE #( ( `DynamicSideContent` ) ( `toggle` ) ) )
                        )->a( n = `id`      v = `toggleButton`
                        " onAfterRendering ALSO calls _updateToggleButtonState, seeding the
                        " state from getCurrentBreakpoint( ) at load. Binding TOGGLE_ENABLED
                        " alone cannot reproduce that: breakpointChanged provably never fires
                        " on the first render - _setBreakpointFromWidth guards the fire with
                        " `if (sCurrentBreakpoint !== undefined)` and _currentBreakpoint is
                        " undefined until that very call - so the button rendered PERMANENTLY
                        " disabled on a narrow viewport, which is breakpoint S, exactly where
                        " DynamicSideContent shows one area at a time and the toggle is the
                        " only way to reach the side content.
                        " The OR closes the load-time gap without a round trip. It is sound in
                        " both directions: containerQuery measures the CONTAINER, which can
                        " never be wider than the window, so window <= 720 implies breakpoint
                        " S. The reverse case - a wide window whose container the Slider has
                        " shrunk below 720 - is what the breakpointChanged round-trip still
                        " handles, which is why that wire stays. 720 is the control's own
                        " S_M_BREAKPOINT (DynamicSideContent.js).
                        )->a( n = `enabled` v = |\{= ${ client->_bind( toggle_enabled ) } \|\| $\{device>/resize/width\} <= 720 \}|

                    )->tag( `Slider`
                        )->a( n = `id`         v = `DSCWidthSlider`
                        )->a( n = `value`      v = `100`
                        )->a( n = `visible`    v = `{= !${device>/system/phone} }`
                        )->a( n = `liveChange` v = client->follow_up_action(
                                  val   = client->cs_event-control_by_id
                                  t_arg = VALUE #( ( `sideContentContainer` )
                                                   ( `css` )
                                                   ( `width` )
                                                   ( `${$parameters>/value} + '%'` ) ) )

                    )->tag( `Text`
                        )->a( n = `id`      v = `DSCWidthHintText`
                        )->a( n = `text`    v = `Best view in full screen mode`
                        )->a( n = `visible` v = `{= !${device>/system/phone} }` ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.


  METHOD on_event.

    " _updateToggleButtonState: the button is only enabled on breakpoint S.
    " The only round-trip left - the Toggle press drives the control's own
    " toggle( ) from the frontend, and the Slider writes its width there too
    IF client->get_event( ) = `BP_CHANGED`.
      toggle_enabled = xsdbool( client->get_event_arg( ) = `S` ).
    ENDIF.

  ENDMETHOD.

ENDCLASS.