Jump to content

marcus

Members
 View Profile  See their activity

  • Posts

    289

  • Joined

  • Last visited

  • Days Won

    8

 Content Type 

Posts posted by marcus

    ProcessWire Recipes

    in Tutorials

    Posted

    Hi, original maintainer here.

    Sorry about the unplanned phasing out of ProcessWire Recipes too long ago. Haven't done PW or any CMS work for that matter for a long time, so it's a shame that the PR project is dormant - in case it is still of value for people out there.

    @wbmnfktr: Hit me up via DM if you're interested in taking over the Git Orga and/or domain

    • Like 2

    Very advanced dynamic of a PageArray with "sorting decisions" in every item – how to do?

    in API & Templates

    Posted

    Hi y'all! ?

    long time no hear (and it's all my fault - I haven't been to the forums for quite a while). Anyway, I got a complex question that as of right now, feels way above my skills. But I'll try to describe it, and I'm hoping to describe things in a way that's comprehensible:

    As it reads in the title, what's in front of me is a complex situation and a codebase I inherited.

    1. In its core, its about dynamic sorting. With dynamic sorting I mean two things:
      1. The field being sorted by is depended on user input AND a programmatical determined decision. More details follow below
      2. It's not as simple as sorting by `created_at`, for example.
    2. So I got a collection of templates in a PageArray. All of the items are being output using a loop (paginated, and so on). So far, so simple.
    3. Every item of this collection is of the same template. This template has a bunch of fields associacted with it, with numeric values. Let's simplify the situation for the sake of explaining and say that these fields can be grouped into certain clusters.
    4. In a template, a user can filter for certain (by using selects, which, upon change, change the URL). So that every filtered state is accessible unter its own URL.
    5. A user also has the opportunity to sort, and this is kind of where the field clusters come into play. Also, the selected sort mode is persisted in the URL, by a get parameter, for example ?sort=cluster1. Of course, both filter states and sort states are "mirrored" in the URL, so that every of these states can be accessible under its own URL.
    6. Going back to point 3: for all of the fields (in the clusters) there is a field counterpart which stores the inverted value of the field (in reality, this isn't the inversion but something more complicated - but for the sake of explaining, I'll describe it that way)
    7. Now, based on both sorting and filter settings (see 4. and 5.) a decision must be made whether the non-inverted or the inverted field should be used for sorting the whole connection.

    My questions:

    • How would you solve this? My plan for today is to do a little proof of concept with runtime fields: Right after I got the user data regarding sorting and filtering I have all the data I need to decide whether to use a field or its inverted counterpart for sorting. I'm planning to create runtime fields in which I store the "decision" I'm now able to make (which value, the original or inverted field value I should use for sorting).
    • The central query of getting the PageArray, filtering and sorting it is a rather complex one. In the code I inherited this query is built by modifying a large string that consists of data from the interface (regarding filtering and sorting). Only after every user settings is "read" this string gets passed as a rather sophisticated selector into a $page→find($complexQuery) API call. While experimenting I found out that it appears that runtime fields are not really considered in this approach (but maybe I'm doing things wrong). Should I instead leave the approach of trying to build it with the API and go for building a raw DB query instead?

    Is there an simple and obvious solution to the problem I described that I'm not able to see?

    Anyway, thanks a bunch!

    marcus

    Regular ProcessWire meetup in Berlin

    in Pub

    Posted

    2 hours ago, neophron said:

    Hi guys,

    I'm definitely interested in such meetings, but Monday is always my volleyball-day ?

    I chose today more or less randomly, so Monday is not locked. Intention was to start a thing, to revive the discussion about it.

    Regular ProcessWire meetup in Berlin

    in Pub

    Posted

    15 hours ago, chrizz said:

    @marcus, is Monday still the plan for the meetup? Looks as if we are the only ones for now though, or do you know from others planning to join us?

    Yes, still intend to be at Aufsturz at the given time. But unfortunately I know of nobody else joining besides from you.

    Map Marker Map

    in Modules/Plugins

    Posted

    On 8/20/2018 at 5:17 AM, biotech said:

    So what was the fix for MapMarker? Where would we add the API key in PW?

    Thanks!

    In MapMarker's documentation there is a section about implementing the needed JavaScript file from Google:

     

    Quote 
    
### How to use

Add this somewhere before your closing `</head>` tag:
`````````
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>

    Search for this snippet in your template and change the value of src like this:

     

    Quote

    https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX&sensor=false

    Where XXXXXX is your API key. See the Hello World example here (lower part of the code example): https://developers.google.com/maps/documentation/javascript/tutorial

    [solved] No $input->post data when using AJAX/axios.post()

    in API & Templates

    Posted

    For anyone stumbling over this topic, here's the solution (don't forget this is not production code - sanitize your data!). Make sure you are adding the Querystring (Qs) lib somehow 

    					axios.post('./',
						Qs.stringify({
							yes_no: this.yes_no
						}), {
							headers: {
								'X-Requested-With': 'XMLHttpRequest',
								'Content-type': 'application/x-www-form-urlencoded'
							}
						})
						.then(function (response) {
							console.log("response:", response.data);
						})
						.catch(function (error) {
							console.log("error:", error);
						});

     

    • Like 3

    [solved] No $input->post data when using AJAX/axios.post()

    in API & Templates

    Posted · Edited by marcus
    Mark as solved

    Hi there,

    I ran into a problem posting form data via AJAX. Of course I did some research on the topic via Google, this forum and looking into ProcessWire's core code and found the following steps...

    • Setting headers to 'X-Requested-With', 'XMLHttpRequest'
    • Using a trailing slash

    ...but to no avail. As you can see in the following code I log the response, in this case just a var_dump() of wire("input")->post, but i just get

    response: object(ProcessWire\WireInputData)#240 (0) {
    }

    Here's my code in total. It's simplified, but should work, but for some reason does not. Could any of you point me towards the solution/my fallcy? Thanks in advance! :-)

    <?php

if (wire("config")->ajax) {
    if (wire("input")->post) {

        var_dump(wire("input")->post);

    }
} else {
    ?>
    <div id="app">
        <form action="./" method="post" v-on:submit.prevent="getFormValues">
            <label><input type="radio" name="yes_no" id="yes"
                  <?= ($page->yes_no == "1") ? "checked" : "" ?>
                          value="1"/>Ja</label>
            <label><input type="radio" name="yes_no" id="no"
                  <?= ($page->yes_no == "2") ? "checked" : "" ?>
                          value="2"/>Nein</label>
            <button type="submit">Go</button>
            <p>{{ yes_no }}</p>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

		new Vue({
			el: '#app',
			data: {
				yes_no: '(unbeantwortet)'
			},
			methods: {
				getFormValues: function (e) {
					this.yes_no = e.target.elements.yes_no.value;

					axios.post('./', {
						yes_no: this.yes_no
					}, {
						headers: {
							'X-Requested-With': 'XMLHttpRequest',
							'Content-Type': 'application/json'
						}
					})
						.then(function (response) {
							console.log("response:", response.data);
						})
						.catch(function (error) {
							console.log("error:", error);
						});
				}
			}
		});
    </script>

<?php } ?>

    // edit:

    I forgot to mention that the POST request is sent (I can track it in developer tools) and it includes the data I'm intending to send. So I really assume it is a reception problem.

    Bildschirmfoto-2018-03-08-um-10_10_19.jpg.86311d2eeb8c88545e4b6dd1074a22e2.jpg

    ProcessWire Accessibility Tools

    in Modules/Plugins

    Posted

    This is odd. Usually, PWAT showing in the backend proofs that everything is fine (= your user has the needed role). Have you tried to clear compiled files (on the bottom of your Modules › Site)? Since the modules only does a very simple Page hook I strongly believe your experience has something to do with caching

    • Thanks 1

    ProcessWire Accessibility Tools

    in Modules/Plugins

    Posted

    On 5.1.2018 at 7:14 PM, dragan said:

    Don't know if you heard about it: There's a great CKEditor plugin called Accessibility Checker: https://ckeditor.com/ckeditor-4/accessibility-checker/

    I have started to include it in every new PW installation and tell clients about it. Perhaps there's a way to include this as well?

    That's a really great tool I never heard of, thanks for mentioning it, but I have no idea how to include it to PWAT (except maybe a reminder / link on the module settings page)

    • Like 1

    ProcessWire Accessibility Tools

    in Modules/Plugins

    Posted

    Hi y'all! Long time no see. Here's a little module aiming to help you build accessible websites

    ProcessWire Accessibility Tools

    Download: http://modules.processwire.com/modules/pwat/

    Github: https://github.com/marcus-herrmann/PWAT

    A small, but hopefully growing toolkit for creating accessible ProcessWire sites. Right now it consists of the following little helpers:

    • tota11y visualization toolkit by Khan Academy
    • A toggle button to see view site in grayscale. The w3c recommends checking your page without colours to see if your design still works (accompanied by a colours contrast check, which is part of tota11y)
    • A link to test your webpage with WAVE, webaim's Web Accessibility eValuation Tool. By the nature of this tool, the website under test must be available online, local hosts won't work.

    tota11y menu opened Grayscale active

    Installation

    Once you have downloaded PWAT, go to your module Install page and click "Check for new modules". Find "ProcessWire Accessibility Tools" and click "Install". During installation, PWAT creates a new role 'pwat_user'. To use the Accessibility Tools, you have to grant user this role.

    Following, you can start configuring the module.

    PWAT config page

    Usage

    PWAT starts with only the tota11y script activated. On the configuration page you can decide

    • whether PWAT is visible on admin pages
    • if tota11y is active
    • if the grayscale toggle is active
    • if the link to WAVE will be visible

    PWAT config page

    Credits


    Best,

    marcus
     

    • Like 23

    Release: Flagpages

    in Modules/Plugins

    Posted

    Ah, I see. renderList() won't output anything when no page is flagged in the first place. You can see renderList as a result listing. Once you use renderLink, flag at least one page renderLink should output this very page

    New blog post: Working towards a new admin theme

    in News & Announcements

    Posted · Edited by marcus

    19 minutes ago, teppo said:

     

    Have to agree with @Robin S. I enjoy simplicity as much as the next guy, but the default tab component in Uikit is just plain bad in terms of both usability and accessibility. Another thing that slightly bugs me in current design (which we probably shouldn't be commenting on, considering that it's obviously not the final one) is the low contrast: that's a really common mistake in terms of accessibility, but luckily it's also really easy to fix.

     

    Exactly what I was going to write, but you were quicker. ;)

    I think we should put an emphasis on accessibility when creating this new admin theme. Not just only color contrast but also regarding keyboard-only usage and usage with assistive technologies like screen readers. Creators of WordPress and Drupal already aim for ATAG (Authoring Tool Accessibility Guidelines) compliance, e.g. here and here and ProcessWire should do so as well :)

    Although I'm no professional in this topic I'd love to help with audits and Pull Requests.

    • Like 13
×
×
  • Create New...