From 6c936208b7163d6d229a3ac7f685476eb95b5590 Mon Sep 17 00:00:00 2001 From: tp_dhu Date: Sun, 16 Feb 2025 22:03:56 +0000 Subject: [PATCH] added proper f3 tag extension for bulma form --- app/controllers/KBController.php | 1 + app/controllers/ParsedownPreview.php | 12 +++ app/extensions/BulmaFormHelper.php | 108 +++++++++++++++++++++++++++ app/extensions/ParsedownHelper.php | 20 +++++ app/model/BulmaForm.php | 6 +- public/index.php | 11 ++- public/js/kb_edit.js | 75 +++++++++++++++++++ ui/templates/layout.html | 11 ++- ui/views/kb/create.html | 11 ++- ui/views/kb/edit.html | 19 +++-- ui/views/kb/index.html | 10 ++- ui/views/kb/view.html | 2 +- 12 files changed, 267 insertions(+), 19 deletions(-) create mode 100644 app/controllers/ParsedownPreview.php create mode 100644 app/extensions/BulmaFormHelper.php create mode 100644 app/extensions/ParsedownHelper.php create mode 100644 public/js/kb_edit.js diff --git a/app/controllers/KBController.php b/app/controllers/KBController.php index 7bf70f0..0090ea2 100644 --- a/app/controllers/KBController.php +++ b/app/controllers/KBController.php @@ -154,6 +154,7 @@ class KBController { $f3->set('article_tag_ids', $article_tag_ids); // render + $f3->set('js', 'kb_edit.js'); $f3->set('content', '../ui/views/kb/edit.html'); echo \Template::instance()->render('../ui/templates/layout.html'); $f3->clear('SESSION.error'); diff --git a/app/controllers/ParsedownPreview.php b/app/controllers/ParsedownPreview.php new file mode 100644 index 0000000..72389dc --- /dev/null +++ b/app/controllers/ParsedownPreview.php @@ -0,0 +1,12 @@ +get('POST.content'); + echo Parsedown::instance()->text($preview_text); + + } + +} \ No newline at end of file diff --git a/app/extensions/BulmaFormHelper.php b/app/extensions/BulmaFormHelper.php new file mode 100644 index 0000000..81c3a8d --- /dev/null +++ b/app/extensions/BulmaFormHelper.php @@ -0,0 +1,108 @@ +build($label); + $name = \Template::instance()->build($name); + $value = \Template::instance()->build($value); + + if(defined("BulmaFormHelper::$type")){ + + $type_const = constant("BulmaFormHelper::$type"); + + switch( $type_const ){ + case BulmaFormHelper::H_FIELD_INPUT: + return BulmaFormHelper::build_h_field_input($label, $name, $value); + break; + case BulmaFormHelper::H_FIELD_TEXTAREA: + return BulmaFormHelper::build_h_field_textarea($label, $name, $value); + break; + case BulmaFormHelper::H_FIELD_SELECT: + return BulmaFormHelper::build_h_field_select($label, $name, $options, $selected); + break; + default: + return '
Error: Bulma CSS Form TYPE ('.$type.') not defined.
'; + break; + } + + } else { + return '
Error: Bulma CSS Form TYPE not defined.
'; + } + + } + + static function build_h_field_input($label, $name, $value){ + $string = ' +
+
+ +
+
+
+
+ +
+
+
+
+ '; + return $string; + } + + static function build_h_field_select($label, $name, $options, $selected){ + $string = + '
+
+ +
+
+
+
+ $options +
+
+
+
+ '; + return $string; + } + + static function build_h_field_textarea($label, $name, $value){ + $string = ' +
+
+ +
+
+
+
+ +
+
+
+
+ '; + return $string; + } + +} + +\Template::instance()->extend('bulma', 'BulmaFormHelper::render'); \ No newline at end of file diff --git a/app/extensions/ParsedownHelper.php b/app/extensions/ParsedownHelper.php new file mode 100644 index 0000000..37978de --- /dev/null +++ b/app/extensions/ParsedownHelper.php @@ -0,0 +1,20 @@ +token($content); + + return ' + + build('.$content_token.'); ?> + '; + } + + function build($content){ + return Parsedown::instance()->text($content); + } +} + +\Template::instance()->extend('parsedown', 'ParsedownHelper::render'); \ No newline at end of file diff --git a/app/model/BulmaForm.php b/app/model/BulmaForm.php index 1f72e98..728f724 100644 --- a/app/model/BulmaForm.php +++ b/app/model/BulmaForm.php @@ -8,7 +8,7 @@ class BulmaForm { $string = '
- +
@@ -31,7 +31,7 @@ class BulmaForm { $string = '
- +
@@ -54,7 +54,7 @@ class BulmaForm { $string = '
- +
diff --git a/public/index.php b/public/index.php index 37e475d..6a51222 100644 --- a/public/index.php +++ b/public/index.php @@ -6,13 +6,16 @@ $f3 = \Base::instance(); /** * Not required yet */ -// $htmlpurifier = new \HTMLPurifier(); +$htmlpurifier = \HTMLPurifier::instance(); // $htmlpurifier->purify($input); $md = \Parsedown::instance(); +$md->setSafeMode(true); - -$f3->set('DEBUG', 3); // development debug $f3->config('../app/.env.cfg'); +$f3->set('DEBUG', 3); // development debug +$f3->set('CACHE', FALSE); + +$f3->set('EXT', [new ParsedownHelper, new BulmaFormHelper]); $f3->set('DB', new \DB\SQL( 'mysql:host=localhost;port=3306;dbname=' . $f3->get('database.db_name'), @@ -63,6 +66,8 @@ $f3->route('GET /tags', 'TagController->index'); $f3->route('GET /tag/create', 'TagController->createForm'); $f3->route('POST /tag/create', 'TagController->create'); +// parsedown preview +$f3->route('POST /parsedown/preview', 'ParsedownPreview->view'); // dashboard $f3->route('GET /dashboard', 'DashboardController->index'); diff --git a/public/js/kb_edit.js b/public/js/kb_edit.js new file mode 100644 index 0000000..8dfe7f5 --- /dev/null +++ b/public/js/kb_edit.js @@ -0,0 +1,75 @@ + + +// switch to target tab pane +function switchTab(targetId){ + var panes = document.querySelectorAll('.tab-content .tab-pane'); + for (var i=0; i< panes.length; i++){ + panes[i].style.display = 'none'; + } + var targetPane = document.getElementById(targetId); + if(targetPane){ + targetPane.style.display = 'block'; + } +} + +// send ajax post request with content to specified url +function ajaxPost(content, url, callback){ + var xhr = new XMLHttpRequest(); + xhr.open('POST', url, true); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.onreadystatechange = function(){ + if(xhr.readyState === XMLHttpRequest.DONE){ + if(xhr.status === 200){ + callback(xhr.responseText); + } else { + console.error("AJAX error: " + xhr.status); + } + } + }; + var params = 'content=' + encodeURIComponent(content); + xhr.send(params); +} + +// load preview via ajax into preview element +function loadPreview(previewElement){ + var sourceId = previewElement.getAttribute('data-source'); + var handlerUrl = previewElement.getAttribute('data-handler'); + var method = previewElement.getAttribute('data-method'); + var sourceElement = document.getElementById(sourceId); + if(sourceElement){ + var content = sourceElement.value; + if(method && method.toLowerCase() == 'post'){ + ajaxPost(content, handlerUrl, function (response){ + previewElement.innerHTML = response; + }); + } + } +} + +// initialise tab links to handle tab switching +function initTabs(){ + var tabLinks = document.querySelectorAll('.tabs a[data-target]'); + for(var i=0; i - + + + + @@ -85,7 +88,9 @@
-

© Terry Probert

+

© + Terry Probert +

diff --git a/ui/views/kb/create.html b/ui/views/kb/create.html index d43eb70..6774f68 100644 --- a/ui/views/kb/create.html +++ b/ui/views/kb/create.html @@ -4,18 +4,23 @@
- {{ BulmaForm::horizontal_field_input('Title:', 'title') }} +
- {{ BulmaForm::horizontal_field_textarea('Content:', 'content') }} +
+ +
+
+ +
diff --git a/ui/views/kb/edit.html b/ui/views/kb/edit.html index 3bc6a79..b740977 100644 --- a/ui/views/kb/edit.html +++ b/ui/views/kb/edit.html @@ -3,18 +3,27 @@ - {{ BulmaForm::horizontal_field_input('Title:', 'title', @article.title)}} +
-
- {{ BulmaForm::horizontal_field_textarea('Content:', 'content', @article.content) }} +
+
+
+ +
+
+
+
+
+
+
diff --git a/ui/views/kb/index.html b/ui/views/kb/index.html index 48f870a..9500019 100644 --- a/ui/views/kb/index.html +++ b/ui/views/kb/index.html @@ -13,7 +13,15 @@
- + + + + + + + +
diff --git a/ui/views/kb/view.html b/ui/views/kb/view.html index d4348ea..1bbb100 100644 --- a/ui/views/kb/view.html +++ b/ui/views/kb/view.html @@ -1,7 +1,7 @@

{{@article.title}}

- {{ Parsedown::instance()->text(@article.content) }} + {{ @article.content | raw }}