ukyo
-
Posts
275 -
Joined
-
Last visited
-
Days Won
7
Recent Profile Visitors
5,671 profile views
ukyo's Achievements
-
@bernhard Yes, I know about it. However, I prefer not to use modules for these kinds of things, as my work approach would need to adapt to each module used. I am using Vite for these purposes instead. Before developing this script, I was using the AllInOneMinify module for ProcessWire. Later, I switched to JavaScript-based compilation solutions: First moved to Gulp with Browser Sync Then migrated to Webpack Currently using Vite Among these tools, Vite has proven to be the lightest solution, and I'm getting exactly the results I want with my Vite configuration. While using Vite, I wondered "Why don't I implement my own browser sync solution?" This led me to write this lightweight script, which works remarkably well. And I'm happy with this setup!
-
This hook is used to monitor file changes and page updates in your ProcessWire project. It operates when debug mode is active and returns file changes and latest page update information in JSON format. The script hook is automatically injected before the </body> tag in your HTML. It periodically checks for any file or page updates in your system at the interval you specify. If the previous check time is older than the new check time (indicating changes), the page automatically refreshes. ~/site/ready.php if ($wire->config->debug) { $wire->addHookAfter('Page::render', function (HookEvent $event) { $script = <<<HTML <script> const browserSync = { mtime: 0, init() { this.sync(); }, sync() { fetch('/browser-sync') .then(response => response.json()) .then(data => { if (!this.mtime) { this.mtime = data.max; } else { if (data.max > this.mtime) { location.reload(); } } }); } }; browserSync.init(); setInterval(() => browserSync.sync(), 2500); </script> HTML; $event->return = str_replace('</body>', "{$script}</body>", $event->return); }); $wire->addHook('/browser-sync', function (HookEvent $event) { $wire = $event->wire(); $root = $wire->config->paths->root; $siteRoot = $wire->config->paths->site; $extensions = '*.{php,js,css}'; $paths = [ "{$root}src/{$extensions}", // custom composer package "{$root}src/src/{$extensions}", // custom composer package "{$siteRoot}{$extensions}", // ready.php, init.php, finished.php "{$siteRoot}classes/{$extensions}", // page classes "{$siteRoot}templates/{$extensions}", "{$siteRoot}templates/*/{$extensions}", "{$siteRoot}templates/*/*/{$extensions}", "{$siteRoot}templates/*/*/*/{$extensions}", "{$siteRoot}templates/*/*/*/*/{$extensions}", ]; $files = []; foreach ($paths as $pattern) { // Try with GLOB_BRACE first $result = glob($pattern, GLOB_NOSORT | GLOB_BRACE); // If no results with GLOB_BRACE, try without it if (!$result) { $result = glob($pattern, GLOB_NOSORT) ?: []; } $files = array_merge($files, $result); } $filemtime = 0; foreach ($files as $file) { if (!is_file($file)) { continue; } try { $mtime = @filemtime($file); if ($mtime && $mtime > $filemtime) { $filemtime = $mtime; } } catch (\Exception $e) { continue; } } $latest = $wire->pages->get('sort=-created|-modified'); $latestTime = $latest->modified > $latest->created ? $latest->modified : $latest->created; header('Content-Type: application/javascript'); echo json_encode([ 'max' => max($filemtime, $latestTime), 'mtime' => $filemtime, 'modified' => $latest->modified, 'created' => $latest->created ]); exit; }); } This development tool helps streamline your workflow by automatically refreshing the browser when you make changes to your files or content, eliminating the need for manual page refreshes during development.
- 2 replies
-
- 11
-
-
Any way to access $languages API var inside Page Class?
ukyo replied to TomPich's topic in General Support
Before class initialized you can't access the languages. class HomePage extends DefaultPage { public function __construct(Template $tpl = null) { parent::__construct($tpl); // not initialized at here echo '<pre>' . print_r($this->wire()->modules->get('LanguageSupport'), true) . '</pre>'; } public function lang(){ // now you have some data on LanguageSupport module echo '<pre>' . print_r($this->wire()->modules->get('LanguageSupport'), true) . '</pre>'; // get default language echo '<pre>' . print_r($this->wire()->languages->getDefault(), true) . '</pre>'; // get available page languages echo '<pre>' . print_r($this->getLanguages(), true) . '</pre>'; } } its same for modules. you can access languages inside init(), ready() methods. not inside __construct() -
@aagd I pushed an update, this update has fix for attributes to string fix and added an example component. This component contains example on readme file with 2 different output solution. Method 1 is commented https://github.com/trk/Component/blob/8b973cca955a29fd60c933da9ff9a6d35f5e518b/components/example/templates/template-default.php#L11 Method 2 classic way https://github.com/trk/Component/blob/8b973cca955a29fd60c933da9ff9a6d35f5e518b/components/example/templates/template-default.php#L24
-
Hi @aagd Example code is combination of https://getuikit.com/docs/heading and https://getuikit.com/docs/text. Size, decoration, transform, color and align params adds classes to component. If you include uikit 3 on your project or if you check the output. You will see the result on component output.
-
@MarkE The general problem in page builders is what frontend framework support they offer. Does the frontend framework support they provide align with your design, or do you need to learn and adapt to this frontend framework? The same problem exists in ProcessWire as well. When we want to use the fields on the frontend, we often need to make numerous modifications to achieve the desired results. I also have my own page builder structure created using the PageTable module, and I've been using this structure for about six years, continuously updating it on my end. The primary reason for creating the Mystique module is to dynamically create custom fields within the page builder and manage them as I like. My custom page builder is built on the Uikit 3 framework, but when I want to use Tailwind CSS or Bootstrap in the frontend, the current system doesn't support this. One of the reasons is that I primarily use the Component module and have created a separate module called UikitComponent to configure Uikit components within this module. I aim to apply this for Bootstrap, Tailwind CSS, or any other frontend framework or design. In addition to this, another fundamental reason for writing the Component module is to be able to provide readable and understandable outputs for the requests sent to the page in the HTMX module that I am preparing for publication. In the project I'm working on, I'm using the HTMX, Component, and Mystique modules together. I created a component called 'product-list' and added extra settings to this component, including 'element' => true and 'fields' => array(). In the 'fields' section, I added configuration settings for the Mystique module. I added the 'element' => true setting to use this component in my page builder, making it accessible both in the code and through the admin panel. This way, the component can be used on the code side and added to the desired location by the administrator through the admin panel. Also you can check a javascript solution: https://github.com/codex-team/editor.js I wrote a module and have some experience with this. Output is clean json data Ekran Kaydı 2023-10-12 13.33.49.mov
-
Module help you to create and use set of components to utilize in your ProcessWire. You can find more info and an examples on Github repo : https://github.com/trk/Component/tree/main
-
How to track all called $page->* properties (fields) ?
ukyo replied to ukyo's topic in General Support
This seems like the most reasonable solution. When pages are updated or deleted, the data will be automatically updated or removed. I can manage the templates and fields that will be cached easily through module settings. The desired fields and templates are cached, while other fields and templates continue to function as usual in ProcessWire. I have three reasons for obtaining the raw JSON output: 1. To fetch the data and display it directly in the desired format. I don't want the data to be influenced by HTML, so I can use it anywhere. 2. To generate static pages using the data (using libraries like Astro.js). 3. To make the saved data accessible for other applications through an API.
-
How to track all called $page->* properties (fields) ?
ukyo replied to ukyo's topic in General Support
When using this method, the data is retrieved in its raw form. It requires further processing to display the data. When $page->title is called, the data is initially fetched from the database using this method and undergoes certain operations before appearing as $page->title. The part I want to intervene in is as follows: If the data is present in the saved JSON, show it directly without processing; otherwise, retrieve the data from the database, process it, and display it. -
How to track all called $page->* properties (fields) ?
ukyo replied to ukyo's topic in General Support
Sure, However, I don't want to make any changes to regular page displays. When this option is enabled in the module settings, I want it to directly reflect on the page. I am looking for a solution while continuing to use the normal page API. When I use $page->title and if the transfer is enabled for the title field in the module settings and it has been saved as JSON, I want this information to come from the JSON data. When I remove the title field from the module settings, I want this information to be retrieved and displayed using SQL. -
How to track all called $page->* properties (fields) ?
ukyo replied to ukyo's topic in General Support
When I checked a page I created with ProcessWire, I noticed that it was using a lot of SQL queries when displaying a page (600+ SQL queries). This page contains a page builder and similar page links from other pages. The number of queries seemed excessive to me, and I believe it is because a separate table is created for each field. Therefore, I have observed that the number of SQL queries increases based on the number of fields when accessing page data. To address this issue, I have implemented a solution where I save or delete the page data as JSON when the page is saved or deleted (I also want to use this module when generating static pages). If a field needs to be displayed on the page, I want it to be shown from the JSON output if it exists there, otherwise I want it to be retrieved with an SQL query. -
I want to track and modify all called $page->* (fields) properties, before property get a value or after property get a value. is it possible to do it with a method like hooks ?? like: id, title, body, image <?php $wire->addHookProperty('Page::*,Page::[id,title,body,image]', function(HookEvent $e) { $page = $e->object; // How to get name of property ??? $property = '???'; $isCached = true; if ($isCached) { $cachedValue = 'Cached value from somewhere'; $value = $cachedValue; } else { $value = $page->get($property); } if ($property === 'title') { $value = "<h1>{$value}</h1>"; } $e->return = $value; });
-
Weekly update – 30 September 2022 – Invoice app profile
ukyo replied to ryan's topic in News & Announcements
@zoeck wire()->addHookAfter('InputfieldRepeater::render', function (HookEvent $e) { /** * @var InputfieldRepeater $repeater * @var Page $page Repeater page */ $repeater = $e->object; $page = $repeater->hasPage; if ($repeater->getAttribute('name') == 'repeater_name') { $return = $e->return; $e->return = $return . 'Hello World !'; } }); -
@bernhard Did you try htmx ? on validation side, i am using https://www.sirius.ro/php/sirius/validation/ and https://www.sirius.ro/php/sirius/upload/ you can use PHP for process, only you need some attributes for form element (no need javascript). you can redirect page with headers here is an example with htmx and processwire htmx-form.mov
-
Be sure you selected your resource name from your input config and be sure you saved your input config
