flydev

I am used to use rem, the reason => web accessibility => a pixel is not responsive and with some algebra (lol) for fluid typo, the concept is called Poly Fluid Sizing and using tailwindcss utilities? Rule them all with this linear equation definition, which result the font-size : Take a look at this sample: https://codepen.io/neil/pen/agzZVg And give a read to : https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/ ✌️ Edit: for the rest, everything with a tailwind.config.js, it's so cool: https://tailwindcss.com/docs/grid-template-columns & #arbitrary-values

The extension look cool and will install it on Windows, but its not available for Chrome iOS :(

@Pete ? A dark-mode could be available to view the forum ? iam near 40 and my eyes need more obscurity ??‍♂️?

After reading again Steve's messages, I added a new setting (enabled by default) which if set, delete orphaned logs files from the folder. Update to v1.4.26 to get that.

Another update (v1.4.25) with a new setting available to customize the permission set on duplicator.sh when using the Native Mode feature. Thanks @netcarver It also delete the corresponding log file. ℹ️ The module can be upgraded again trough ProcessWireUpgrade, I was only updating a static var forgetting the module version field and then the module version was not reflected in the modules directory.. ?‍♂️

I said, both module require the file `admin.less` or at least the compiled `admin.css` ? But forgot it, my question doesn't make sense as I didn't read the point #3 on AdminStyleRock github repo ?‍♂️ It might serve as an example how to share your own styles with the community in a modular way instead of sharing admin.less files that can't be updated/monitored by the PW upgrades module.

Yes that is what was planned, I talked about LESS mod, but I used your module in first instance and I think he will receive the PR to give the dark-mode available by default. I might be blind, but what's the difference between the LESS or Rock in the "sharing flow" ? they don't both require the admin.less files ?

It take into account: the official ProcessPageList BreadcrumbDropdowns by @Robin S AutocompleteModuleClassName by @Robin S InputfieldSelectize by @Macrura InputfieldSimpleMDE by @Macrura to be continued...

Just sharing an admin dark mode theme. Still a WIP, I need to figure out how uikit-inverse colors work and a switcher will be pushed. (great rock job @bernhard) Feel free to try it, submit issue or better pull-request. https://github.com/flydev-fr/AdminStyleDark

great perseverance from you, learning new things from each others as always. @szabesz given the answer too there :

Cool, so its green ! Great success ??

Yes, because of the rendering order - (I am used to use the Delayed Output Strat so I can't tell you right now what's going on for real) - wrap the HTML output with `if(!$config->ajax)`. example : _main.php: <?php namespace ProcessWire; // place this on the top - easier for us to debug for your project. // but with the good logic, you could do it by feeling. // // return content set in `header()` (ext/json here) if($config->ajax && $input->post->bookmark) { bd($input->post->bookmark); // debug with tracy, uncomment if you have it $bookmarkid = $sanitizer->int($input->post->bookmark); $action = $sanitizer->name($input->post->action); $bookmarks = $user->getUnformatted('bookmarks'); switch($action) { case 'save': // save logic if(!$bookmarks->has($bookmark)) { // add bookmark $bookmarks->add($bookmark); $user->setAndSave('bookmarks', $bookmark); $message = 'Borat saved bookmark "'. $bookmark->id .'" ?'; } else { $message = 'Nothing done'; } $success = true; break; case 'remove': // remove logic if($bookmarks->has($bookmark)) { $bookmarks->remove($bookmark); $user->setAndSave('bookmarks', $bookmarks); $message = 'Borat removed bookmark "'. $bookmark->id .'" ❌'; } else { $message = 'Nothing done'; } $success = true; break; default: $message = 'error'; $success = false; } // build the response data array that will be returned in `data` from `.done(function(data) {` $json = array( 'id' => $bookmarkid, 'action' => $action, 'message' => $message, 'success' => $success ); // convert data and send as JSON header('Content-Type: text/json; charset=utf-8'); // forgot this line echo json_encode($json); return; } ?> <?php // HTML code need to be rendered when a normal request happen (non-ajax, the user dont want the JSON thing, he want text/html to see it in his browser page) // render HTML only if not ajax detected if(!$config->ajax): ?> <!DOCTYPE html> <html lang="en-gb"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="alternate" href="https://ad-bank.co.uk/" hreflang="en-gb" /> <title> Browse Over 1000 Ad Creative Examples | Adbank.co.uk </title> <!-- .... --> </head> <body class="body"> <!-- Page Header --> <!-- Navigation --> <nav id="nav" class="unhidden"> <!-- .... --> </nav> <div id="content-main" class="adbank"> <!-- .... --> <header class="small-header"> <div class="full-width"> <div class="row flex header-content"> <h1>This is everything!</h1> <p>Here are all the ads we have collated. It seems a lot, it is and it's only growing. Check out the filters or the brand and industry sections. Struggling for inspiration? The blog has features collections based on styles, industries and our personal favourites.</p> </div> </div> </header> <!-- .... --> <div class="breadcrumbs"> <!-- .... --> </div> <!-- .... --> <section id="main-post-area" class="ab-post-area"> <div class="full-width"> <div class="row"> ...... </div> </div> </section> <!-- .... --> </div> <footer> great success </footer> <!-- PUT OUR JQUERY SCRIPT HERE AT THE VERY BOTTOM --> <script> jQuery(document).ready(function($) { // when clicked, send ajax request to server $('button.bookmark').on('click', function(e) { var btn = $(this).hasClass('clicked') ? false : $(this).addClass('clicked'); if (!btn) { console.warn(`⚠️ Bookmark already saved to profile`); return false; } $.post('<?=$pages->get('/')->url?>', { action: $(this).val(), bookmark: btn.data('id') }) .done(function(data) { console.log(data, "? response from ajax req"); console.info(`✅ Bookmark id => ${data.id} ${data.action} `); }); }); }); </script> </body> </html> <?php endif; // /render HTML ?> Adjust you code, fire the button, report back (✅❓❓)

A note for myself, and people interested on how an install can scale : ProcessWire 3.0.175 adds new database scalability options https://processwire.com/blog/posts/pw-3.0.175/

Check with count($page->hero_items))instead of $page->hero_items as it return the field if it exist, not what's inside.

That's because header are already sent before, I mean, there is already output. Move for testing the block, on the top of the _main.php file: <?php namespace ProcessWire; [...] if($config->ajax && $input->post->bookmark){ [...] echo json_encode($json); return; [...] and adjust : `$.post('<?= $page->url?>` to `$.post('<?= $pages->get('/')->url ?>`

We can see that first, request (XHR) is fired with the right data. You need to show us what is inside the "preview" tab to see what's the answer returned (the payload is what you send, the preview is the answer you get). About the code in your last post, (I didn't saw it before), should go in inside there: <?php namespace ProcessWire; [...] if($config->ajax && $input->post->bookmark){ [...] echo json_encode($json); return; [...] This chunk of code is what handle the actions, then put the logic inside it. if($config->ajax && $input->post->bookmark){ bd($input->post->bookmark); // debug post with tracy, lets see whats inside // if something was submited, but the user is not logged in, nohting will be done and we show an error if(!$user->isLoggedin()) { $action = ''; // if user not loggedin, let go to default case. } // user is logged-in else { $bookmarkid = $sanitizer->int($input->post->bookmark); // id of the bookmark $action = $sanitizer->name($input->post->action); // action that need to be done $bookmark = $pages->get($bookmarkid); // instead of $posts, get the bookmark from submitted id to work with bd($bookmark, "bm to work with"); $bookmarks = $user->getUnformatted('bookmarks'); // if($action === 'remove') { // save bookmarks //$user->setAndSave('bookmarks', $bookmarks); //$this->halt(); } switch($action) { // which action ? case 'save': // save logic if(!$bookmarks->has($bookmark)) { // add bookmark $bookmarks->add($bookmark); $user->setAndSave('bookmarks', $bookmark); $message = 'Borat saved bookmark "'. $bookmark->id .'" ?'; } else { $message = 'Nothing done'; } $success = true; break; case 'remove': // remove logic if($bookmarks->has($bookmark)) { $bookmarks->remove($bookmark); $user->setAndSave('bookmarks', $bookmarks); $message = 'Borat removed bookmark "'. $bookmark->id .'" ❌'; } else { $message = 'Nothing done'; } $success = true; break; default: // Default will throw an error $message = 'error borat'; $success = false; } // build the response data array that will be returned in `data` from `.done(function(data) {` $json = array( 'id' => $bookmarkid, 'action' => $action, 'message' => $message, 'success' => $success ); // convert data and send as JSON header('Content-Type: text/json; charset=utf-8'); echo json_encode($json); return; } The issue can be that the template is "include" in the _main.php. I look into it later, show us first the request answer. Your are not far from ✅

it is not to be excluded that I misunderstood your previous question. I thought you were writing the function `if($config->ajax && $input->post->bookmark) {` in a loop. The template is fine ? The page url should be the page where you write the block which handle your request and return the data: <?php namespace ProcessWire; [...] if($config->ajax && $input->post->bookmark){ [...] echo json_encode($json); return; [...] So as the whole code seem to be in the same template, and the template name is `/all/`, then it should be fine. You can debug and see what/where the request go by looking at your dev. console (in my case, it point to root `/`) :

Get rid of writing the $action = $input->post->option('bookmark', [ 'save', 'remove'] ); block in a loop, you do not need that. If you look at my example (made some corrections for consistency), you are capturing the action made by the user in the `$input->bookmark->action` and the id in `$input->bookmark->id` (form data built in the $.post() ajax jquery code): (I don't know what is the `$input->post->option('a', ['b', 'c'])`) thing, but we dont care) bd($input->post); // debug with tracy /** contain: * action: 'save' * bookmark: '1024' */ Then just handle the request : <?php /** threat ajax (pw) => https://processwire.com/api/ref/config/#pwapi-methods-runtime * Better to write a dedicated template which will receive the request. * That is a good candidate and exercise to try the module AppApi ? */ if($config->ajax && $input->post->bookmark) { // bd($input->post->bookmark); // debug with tracy, uncomment if you have it /** contain: * action: 'save' or 'remove' * bookmark: '1024' */ $bookmarkid = $sanitizer->int($input->post->bookmark); $action = $sanitizer->name($input->post->action); switch($action) { // which action ? case 'save': // save logic $message = 'Borat saved bookmark "'. $bookmarkid .'" ?'; $success = true; break; case 'remove': // remove logic $message = 'Borat removed bookmark "'. $bookmarkid .'" ❌'; $success = true; break; default: $message = 'error'; $success = false; } // build the response data array that will be returned in `data` from `.done(function(data) {` $json = array( 'id' => $bookmarkid, 'action' => $action, 'message' => $message, 'success' => $success ); // convert data and send as JSON header('Content-Type: text/json; charset=utf-8'); // forgot this line echo json_encode($json); return; } ?> <!-- the only one loop --> <!-- you dont really need a form --> <!-- <form action='<?=$page->url?>' method='post'> --> <?php // dummy bookmarks loop logic for the show $bookmarks = $pages->find("template=dummypage, limit=5, sort=sort"); foreach ($bookmarks as $bookmark): ?> <?php if($user->isLoggedin()): ?> <!-- show button to save and remove this page to bookmarks --> <!-- of course, make your own logic to show one or other button --> <!-- add a data attribut to each button --> <button class="button bookmark" name='bookmark' value='save' data-id='<?= $bookmark->id ?>'>Save <?= $bookmark->id ?></button> <button class="button bookmark" name='bookmark' value='remove' data-id='<?= $bookmark->id ?>'>Remove <?= $bookmark->id ?></button> <?php endif; ?> <?php endforeach; ?> <!-- </form> --> <script> jQuery(document).ready(function($) { // when clicked, send ajax request to server $('button.bookmark').on('click', function(e /* add event arg */) { var btn = $(this).hasClass('clicked') ? false : $(this).addClass('clicked'); if (!btn) { console.warn(`⚠️ Bookmark already saved to profil`); return false; } $.post('<?= $page->url /* send to the page which have the logic and return json answer */ ?>', { action: $(this).val(), bookmark: btn.data('id') }) .done(function(data) { console.log(data, "? response from ajax req"); // $(this).removeClass('clicked'); // remove `clicked` class, can be added on the foreach loop if the bookmark is already saved and then locked, or whatever.. console.info(`✅ Bookmark id => ${data.id} ${data.action} `); }); //e.preventDefault(); // you didn't need a <form>, and if you really want it, add this line to prevent default behavior and stop the redirection }); }); </script> I will make you an example to save the page, but if I were you, I would just save a "page (ID)" in a page-reference field in the profile.

I feel like a oldschool nerds ?‍♂️ listen bits in loop for motivation (https://m.pouet.net/ - http://www.bitfellas.org/) start coding in js and you end up writing asm ?

Yes, you have to make some test on your side to understand better, but that is not very complicated once you get the "flow". On your example, you can paste my code chunk - if ($config->ajax)... - on your template that refer to the page /all/ and then in the click $.post call, just put the url from $pages->get('/all/')->url, it should work out of the box. PS: If it's a "fun" project, and could be open-source, do not hesitate to export the site-profile to be available to us, it rocks really lol

I don't really get what is your issue, the click that still redirect ? If yes, just add `e.preventDefault()` to your js script to prevent default behavior as your are submiting a form. <?php /** threat ajax (pw) => https://processwire.com/api/ref/config/#pwapi-methods-runtime * Better to write a dedicated template which will receive the request. * That is a good candidate and exercise to try the module AppApi ? */ if($config->ajax && $input->post) { bd($input->post->bookmark); // debug with tracy /** contain: * action: 'add' * bookmark: '1024' */ /** * you can write some logic here, eg., to grab the post data sent by the ajax request */ $bookmarkid = $sanitizer->int($input->post->bookmark); // eg. you can get a page from that $bookmarkedPage = $pages->get($bookmarkid); // send response data back $message = 'Borat added bookmark "'. $bookmarkedPage->title .'" ?'; $success = true; // build the response data array $json = array( 'message' => $message, 'success' => $success ); // convert data and send as JSON header('Content-Type: text/json; charset=utf-8'); // forgot this line echo json_encode($json); return; } ?> <?php // dummy bookmarks loop logic for the show // foreach($bookmarks as $bookmark) : $bookmark = $pages->get(1024); // forgot this line ?> <!-- you dont really need a form --> <!-- <form action='<?=$page->url?>' method='post'> --> <?php if($user->isLoggedin()): ?> <!-- show button to add this page to bookmarks --> <!-- add a data attribut to each button --> <button class="button bookmark" name='bookmark' value='add' data-id='<?= $bookmark->id ?>'>Save bm #1</button> <?php endif; ?> <?php //endforeach; ?> <!-- </form> --> <script> jQuery(document).ready(function($) { // when clicked, send ajax request to server $('button.bookmark').on('click', function(e /* add event arg */) { var btn = $(this).hasClass('clicked') ? false : $(this).addClass('clicked'); if (!btn) { console.warn(`⚠️ Bookmark already saved to profil`); return false; } $.post('<?= $page->url /* send to the page which have the logic and return json answer */ ?>', { action: $(this).val(), bookmark: btn.data('id') }) .done(function(data) { console.log(data, "? response from ajax req"); // $(this).removeClass('clicked'); // remove `clicked` class, can be added on the foreach loop if the bookmark is already saved and then locked, or whatever.. console.info(`✅ Bookmark id => ${btn.data('id')} saved to user profil`); }); //e.preventDefault(); // you didn't need a <form>, and if you really want it, uncomment this line to prevent default behavior and stop the redirection }); }); </script>

1 to 10 ? => 1 ??? Please, make a backup, that is your most important step to do/follow/complete with success before going further. And just in case: https://processwire.com/docs/start/install/upgrade/ https://processwire.com/modules/process-wire-upgrade/

@orchardheightsdental the version is on the bottom-left corner once in the admin page. And the module is available, if i'am correct since the version 3.0.68. 1. Click on the Modules link and follow my screenshot

You can find the module in Modules > Install > ProcessPagesExportImport

I understand, and my point to suggest you to ask @ryan directly if his pro module can fit your needs, is because ryan is used to give more flexibility instead of locking the user to a finished functionality. I mean, there is maybe some hooks that can be used to link things to an user. Without speaking about that you benefit ryan's code and insight ? Anyway, I will might buy it for a project and could give more feedbacks. Stay tuned.