implemented JsRequestOptions->toDefaultAttrStr

frmlx · Apr 8, 2024 · f970e64 · f970e64
1 parent da8f69f
commit f970e64
Show file tree

Hide file tree

Showing 10 changed files with 302 additions and 275 deletions.
diff --git a/appdata/modules/Framelix/src/Html/Table.php b/appdata/modules/Framelix/src/Html/Table.php
@@ -335,7 +335,7 @@ public function setRowStorable(int $rowKey, Storable $storable, string $group =
             $cell = null;
             if($deleteUrl){
                 $requestOptions = new JsRequestOptions($deleteUrl);
-                $cell = TableCell::create('<framelix-button icon="732" bgcolor="hsla(360,65%,var(--color-default-contrast-bg),0.5)" textcolor="white" confirm-message="__framelix_delete_sure__" request-options=\''.$requestOptions.'\'></framelix-button>');
+                $cell = TableCell::create('<framelix-button icon="732" bgcolor="hsla(360,65%,var(--color-default-contrast-bg),0.5)" textcolor="white" confirm-message="__framelix_delete_sure__" '.$requestOptions->toDefaultAttrStr().'></framelix-button>');
             }
             if (!in_array("_deletable", $this->columnOrder)) {
                 array_unshift($this->columnOrder, "_deletable");

diff --git a/appdata/modules/Framelix/src/Html/TypeDefs/JsRequestOptions.php b/appdata/modules/Framelix/src/Html/TypeDefs/JsRequestOptions.php
@@ -51,11 +51,10 @@ public function __construct(
             self::RENDER_TARGET_MODAL_NEW,
             self::RENDER_TARGET_CURRENT_CONTEXT,
             self::RENDER_TARGET_POPUP,
-            null
+            null,
         ])]
         public JsRenderTarget|string|null $renderTarget = null,
-    ) {
-    }
+    ) {}
 
     public function jsonSerialize(): array
     {
@@ -66,4 +65,13 @@ public function jsonSerialize(): array
         return $data;
     }
 
+    /**
+     * Returns a request-options=attributeValue html string
+     * @return string
+     */
+    public function toDefaultAttrStr(): string
+    {
+        return $this->toAttrValue('request-options');
+    }
+
 }
diff --git a/appdata/modules/Framelix/src/View/Backend/View.php b/appdata/modules/Framelix/src/View/Backend/View.php
diff --git a/appdata/modules/FramelixDemo/src/StorableMeta/Invoice.php b/appdata/modules/FramelixDemo/src/StorableMeta/Invoice.php
@@ -77,7 +77,7 @@ protected function init(): void
                     ['invoice' => $this->storable]
                 ), new JsRenderTarget(modalOptions: new ModalShowOptions(maxWidth: 500))
             );
-            return TableCell::create('<framelix-button icon="73e" theme="error" title="__framelixdemo_storable_invoice_download__" request-options=\'' . $requestOptions . '\'></framelix-button>');
+            return TableCell::create('<framelix-button icon="73e" theme="error" title="__framelixdemo_storable_invoice_download__" ' . $requestOptions->toDefaultAttrStr() . '></framelix-button>');
         };
 
         if (!$isOffer) {

diff --git a/appdata/modules/FramelixDemo/src/View/Index.php b/appdata/modules/FramelixDemo/src/View/Index.php
@@ -99,9 +99,11 @@ public function showContent(): void
           new password.
           <br/>
           <br/>
-          <framelix-button request-options='<?= new JsRequestOptions(JsCall::getUrl(__CLASS__, 'resetpw')) ?>'
-                           theme="primary"
-                           icon="785">Reset password
+          <framelix-button
+              <?= (new JsRequestOptions(JsCall::getUrl(__CLASS__, 'resetpw')))->toDefaultAttrStr() ?>
+            theme="primary"
+            icon="785">
+            Reset password
           </framelix-button>
             <?php
         }

diff --git a/appdata/modules/FramelixDemo/src/View/Reset.php b/appdata/modules/FramelixDemo/src/View/Reset.php
@@ -11,6 +11,7 @@
 
 class Reset extends View
 {
+
     protected string|bool $accessRole = "admin";
 
     public static function onJsCall(JsCall $jsCall): void
@@ -30,11 +31,12 @@ public function onRequest(): void
     public function showContent(): void
     {
         ?>
-        <p><?= Lang::get('__framelixdemo_view_reset_info__') ?></p>
-        <framelix-button request-options='<?= new JsRequestOptions(JsCall::getUrl(__CLASS__, 'reset')) ?>'
-                         confirm-message="<?= Lang::get('__framelix_sure__') ?>"
-                         theme="primary"
-                         icon="785"><?= Lang::get('__framelixdemo_view_reset__') ?></framelix-button>
+      <p><?= Lang::get('__framelixdemo_view_reset_info__') ?></p>
+      <framelix-button <?= (new JsRequestOptions(JsCall::getUrl(__CLASS__, 'reset')))->toDefaultAttrStr() ?>
+        confirm-message="<?= Lang::get('__framelix_sure__') ?>"
+        theme="primary"
+        icon="785"><?= Lang::get('__framelixdemo_view_reset__') ?></framelix-button>
         <?php
     }
+
 }
diff --git a/appdata/modules/FramelixDocs/src/View/Features/Layout.php b/appdata/modules/FramelixDocs/src/View/Features/Layout.php
@@ -16,6 +16,7 @@
 
 class Layout extends View
 {
+
     protected string $pageTitle = 'Integrated responsive backend layout';
 
     public static function onJsCall(JsCall $jsCall): void
@@ -30,39 +31,39 @@ public static function onJsCall(JsCall $jsCall): void
     public function showContent(): void
     {
         ?>
-        <p>
-            The layout you currently see is integrated in Framelix.
-            It has a dark mode support (Click at the right top corner icon).
-            The layout is self-made. It do not use external libraries like Bootstrap, Vue, or whatever.
-            It's all bare-metal and is just made to serve the things that are really required.
-            This reduce unused code and upgrade incompatibilites, as we are self responsible to keep the layout nice and
-            robust.
-        </p>
-        <p>
-            Even if this layout is the default, you can make pages without any default layout and starting from scratch.
-            This is often used to build a nice landing pages and frontend for the product and keep all specific data
-            management in the default layout.
-        </p>
-        <p>
-            The <?= $this->getLinkToInternalPage(Index::class) ?> landing page is an example for this.
-        </p>
-        <p>
-            All the features in the sidebar are made and displayed with the default layout.
-        </p>
+      <p>
+        The layout you currently see is integrated in Framelix.
+        It has a dark mode support (Click at the right top corner icon).
+        The layout is self-made. It do not use external libraries like Bootstrap, Vue, or whatever.
+        It's all bare-metal and is just made to serve the things that are really required.
+        This reduce unused code and upgrade incompatibilites, as we are self responsible to keep the layout nice and
+        robust.
+      </p>
+      <p>
+        Even if this layout is the default, you can make pages without any default layout and starting from scratch.
+        This is often used to build a nice landing pages and frontend for the product and keep all specific data
+        management in the default layout.
+      </p>
+      <p>
+        The <?= $this->getLinkToInternalPage(Index::class) ?> landing page is an example for this.
+      </p>
+      <p>
+        All the features in the sidebar are made and displayed with the default layout.
+      </p>
         <?php
         echo $this->getAnchoredTitle('components', 'Web Components - Custom Tags');
         ?>
-        <p>
-            We have some custom web-components, all starting with <code>&lt;framelix-</code> for the most common tasks,
-            like displaying a button that do things on-click.
-        </p>
-        <p>
-            A list of all web-components an there available attributes is
-            in <?= $this->getSourceFileLinkTag(["Framelix/dev/web-types/web-types.json"]) ?>
-        </p>
-        <p>
-            Here are a few examples.
-        </p>
+      <p>
+        We have some custom web-components, all starting with <code>&lt;framelix-</code> for the most common tasks,
+        like displaying a button that do things on-click.
+      </p>
+      <p>
+        A list of all web-components an there available attributes is
+        in <?= $this->getSourceFileLinkTag(["Framelix/dev/web-types/web-types.json"]) ?>
+      </p>
+      <p>
+        Here are a few examples.
+      </p>
         <?php
         echo $this->getAnchoredTitle('alert', 'Alert Box');
         $this->addHtmlExecutableSnippet(
@@ -95,7 +96,10 @@ public function showContent(): void
             <framelix-button theme="error"
                              icon="759"
                              confirm-message="Are you sure?"
-                             request-options=\'' . new JsRequestOptions(JsCall::getUrl(__CLASS__, 'info'), JsRequestOptions::RENDER_TARGET_POPUP) . '\'
+                             ' . (new JsRequestOptions(
+                JsCall::getUrl(__CLASS__, 'info'),
+                JsRequestOptions::RENDER_TARGET_POPUP
+            ))->toDefaultAttrStr() . '
                              block>
                 There is some destructive action
             </framelix-button>
@@ -121,18 +125,18 @@ public function showContent(): void
         echo $this->getAnchoredTitle('icons', 'Icons (Microns)');
 
         ?>
-        <p>
-            Framelix have a small icons font integrated, for the most commonly used icons.
-            It is small (7kb) compared to, for example, Material Icons (>150kb).
-            The icon set we use is called
-            <?= $this->getLinkToExternalPage('https://www.s-ings.com/projects/microns-icon-font/', 'Microns') ?> and is
-            also Open-Source. Thanks to the creator of this slick small icon set.<br/>
-        </p>
-        <p>
-            You can use that icons with our handy custom tag <code><?= HtmlUtils::escape(
-                    '<framelix-icon icon="CODE"></framelix-icon>'
-                ) ?></code>.
-        </p>
+      <p>
+        Framelix have a small icons font integrated, for the most commonly used icons.
+        It is small (7kb) compared to, for example, Material Icons (>150kb).
+        The icon set we use is called
+          <?= $this->getLinkToExternalPage('https://www.s-ings.com/projects/microns-icon-font/', 'Microns') ?> and is
+        also Open-Source. Thanks to the creator of this slick small icon set.<br/>
+      </p>
+      <p>
+        You can use that icons with our handy custom tag <code><?= HtmlUtils::escape(
+                  '<framelix-icon icon="CODE"></framelix-icon>'
+              ) ?></code>.
+      </p>
 
         <?php
         $icons = JsonUtils::readFromFile(__DIR__ . "/../../../../Framelix/public/fonts/microns/icons.json");
@@ -156,33 +160,34 @@ public function showContent(): void
         );
         $this->showHtmlExecutableSnippetsCodeBlock();
         ?>
-        <style>
-          .microns {
-            gap: 5px;
-            display: flex;
-            flex-wrap: wrap;
-          }
-          .micron-card {
-            width: 30px;
-            height: 30px;
-            align-items: center;
-            justify-content: center;
-            display: flex;
-            cursor: pointer;
-            font-size: 1.3rem;
-          }
-          .micron-card:hover {
-            background: var(--color-page-bg-stencil-strong);
-          }
-        </style>
-        <script>
-          $(document).on('click', '.micron-card', function () {
-            navigator.clipboard.writeText($(this).attr('data-code')).then(function () {
-              FramelixToast.success('Text copied to clipboard')
-            }, function (err) {
-            })
+      <style>
+        .microns {
+          gap: 5px;
+          display: flex;
+          flex-wrap: wrap;
+        }
+        .micron-card {
+          width: 30px;
+          height: 30px;
+          align-items: center;
+          justify-content: center;
+          display: flex;
+          cursor: pointer;
+          font-size: 1.3rem;
+        }
+        .micron-card:hover {
+          background: var(--color-page-bg-stencil-strong);
+        }
+      </style>
+      <script>
+        $(document).on('click', '.micron-card', function () {
+          navigator.clipboard.writeText($(this).attr('data-code')).then(function () {
+            FramelixToast.success('Text copied to clipboard')
+          }, function (err) {
           })
-        </script>
+        })
+      </script>
         <?php
     }
+
 }
diff --git a/appdata/modules/FramelixDocs/src/View/GetStarted/Issues.php b/appdata/modules/FramelixDocs/src/View/GetStarted/Issues.php
@@ -2,53 +2,58 @@
 
 namespace Framelix\FramelixDocs\View\GetStarted;
 
-use Framelix\Framelix\Html\TypeDefs\JsRenderTarget;
 use Framelix\Framelix\Html\TypeDefs\JsRequestOptions;
-use Framelix\Framelix\Html\TypeDefs\ModalShowOptions;
 use Framelix\Framelix\Network\JsCall;
 use Framelix\FramelixDocs\View\View;
 
 class Issues extends View
 {
+
     protected string $pageTitle = 'Questions / Issues?';
 
     public static function onJsCall(JsCall $jsCall): void
     {
         if ($jsCall->action === 'slack') {
             ?>
-            <div>
-                To join, please open this link<br/>
-                <a href="https://join.slack.com/t/nullixat/shared_invite/zt-12elbg5rk-bZPR118cV1vzSw3pCWIUsw"
-                   target="_blank">https://join.slack.com/t/nullixat/shared_invite/zt-12elbg5rk-bZPR118cV1vzSw3pCWIUsw</a>
-            </div>
+          <div>
+            To join, please open this link<br/>
+            <a href="https://join.slack.com/t/nullixat/shared_invite/zt-12elbg5rk-bZPR118cV1vzSw3pCWIUsw"
+               target="_blank">https://join.slack.com/t/nullixat/shared_invite/zt-12elbg5rk-bZPR118cV1vzSw3pCWIUsw</a>
+          </div>
             <?php
         }
     }
 
-
     public function showContent(): void
     {
         ?>
-        <p>
-            We know that being stuck at any point can be quite frustrating. There are some communication channels that
-            you can use to get in touch with the community.
-        </p>
+      <p>
+        We know that being stuck at any point can be quite frustrating. There are some communication channels that
+        you can use to get in touch with the community.
+      </p>
         <?= $this->getAnchoredTitle('github', 'Forums (Recommended)') ?>
-        <p>
-            <?= $this->getLinkToExternalPage(
-                'https://github.com/frmlx/framelix/discussions',
-                'Github Discussions'
-            ) ?>
-            - There as a forums/discussion board where you can join.
-        </p>
+      <p>
+          <?= $this->getLinkToExternalPage(
+              'https://github.com/frmlx/framelix/discussions',
+              'Github Discussions'
+          ) ?>
+        - There as a forums/discussion board where you can join.
+      </p>
         <?= $this->getAnchoredTitle('slack', 'Slack') ?>
-        <p>
-            <img src="/slack-badge.svg" height="20" alt="Slack Members"><br/>
-            We also have a Slack channel. Click the button bellow to join.
-        </p>
-        <framelix-button request-options='<?= new JsRequestOptions(JsCall::getUrl(__CLASS__, 'slack'), JsRequestOptions::RENDER_TARGET_POPUP) ?>' icon="730" theme="primary">
-            Join our Slack channel now
-        </framelix-button>
+      <p>
+        <img src="/slack-badge.svg" height="20" alt="Slack Members"><br/>
+        We also have a Slack channel. Click the button bellow to join.
+      </p>
+      <framelix-button
+          <?= (new JsRequestOptions(
+              JsCall::getUrl(__CLASS__, 'slack'), JsRequestOptions::RENDER_TARGET_POPUP
+          ))->toDefaultAttrStr() ?>
+        icon="730"
+        theme="primary"
+      >
+        Join our Slack channel now
+      </framelix-button>
         <?php
     }
+
 }
diff --git a/appdata/modules/FramelixDocs/src/View/GetStarted/Setup.php b/appdata/modules/FramelixDocs/src/View/GetStarted/Setup.php
@@ -204,11 +204,14 @@ public function showContent(): void
       <p>
         At first you need a docker-compose.yml. Click the button bellow to generate one
       </p>
-      <framelix-button request-options='<?= new JsRequestOptions(
-          JsCall::getUrl(__CLASS__, 'create-config'),
-          JsRequestOptions::RENDER_TARGET_MODAL_NEW
-      ) ?>' theme="primary"
-                       icon="798">Click here to create your docker-compose.yml
+      <framelix-button
+          <?= (new JsRequestOptions(
+              JsCall::getUrl(__CLASS__, 'create-config'),
+              JsRequestOptions::RENDER_TARGET_MODAL_NEW
+          ))->toDefaultAttrStr() ?>
+        theme="primary"
+        icon="798"
+      >Click here to create your docker-compose.yml
       </framelix-button>
 
         <?= $this->getAnchoredTitle('start', 'Start container') ?>