Jump to content

Recommended Posts

Awesome - thank you @teppo

Not sure if this is a good idea or not, but what about a way to choose between edit modes from the AdminBar? Inline Edit vs Admin Edit, or something along those lines. Not sure whether they should be separate buttons, or a dropdown for the alternate (not default) method, or perhaps long-click (although this takes training users so not sure this is a good idea).

I just feel like sometimes you know you will want to edit other pages after this one so it's a shortcut to the admin along with editing the page. 

Maybe it's getting too complex though, so no pressure 🙂

Share this post


Link to post
Share on other sites
9 hours ago, adrian said:

Not sure if this is a good idea or not, but what about a way to choose between edit modes from the AdminBar? Inline Edit vs Admin Edit, or something along those lines. Not sure whether they should be separate buttons, or a dropdown for the alternate (not default) method, or perhaps long-click (although this takes training users so not sure this is a good idea).🙂

Just checking that I got this right: do you mean that while the "slide overlay" is enabled and Admin Bar links (such as edit, new, and profile) will normally open the edit view in a "modal" window, there would be some way to open the target URL without the modal instead – going to the "full" admin interface? 🙂

If so, I can see value in this idea, but I'm not yet sure how to make that happen without messing up the simplicity of the UI or causing potentially confusing side-effects. Take long-click for an example: in my experience it's actually quite common for users to long-click or double-click things by accident (or by habit), so in my opinion (in a web based GUI) it's usually bad UX for these to lead to a different outcome vs. "regular click".

Anyway, I'd be interested in implementing this if there's a way to do it in a sensible way. And please let me know if I've misunderstood your idea 🙂

  • Like 2

Share this post


Link to post
Share on other sites

@teppo - yep, you have understood exactly what I am suggesting.

I agree - I don't like long click / double click.

Perhaps just a dropdown from the "Edit" link that says "Edit in Admin". But of course the main top-level Edit link would edit in the overlay, so no need to wait for the dropdown to appear when wanting to edit this way. ??

 

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, tires said:

My updated theme is attached.

adminbar-tires-responsive2.png.341efdba7d2c5fcda521781b7c29f2c4.png

tires.zip 5.15 kB · 0 downloads

Thanks – this is now included with the latest release, 2.2.1 🙂

I made a couple of minor adjustments: in mobile size the dropdown was positioned slightly too far down so there was a gap between the icon in the bar and the dropdown, and the "ul li > a, ul li > strong" CSS rule was changed to ".adminbar__link" in order to avoid unintentionally affecting unrelated lists on the site.

9 hours ago, adrian said:

Perhaps just a dropdown from the "Edit" link that says "Edit in Admin". But of course the main top-level Edit link would edit in the overlay, so no need to wait for the dropdown to appear when wanting to edit this way. ??

I'll have to think about this a bit, not sure yet how it would fit the module. Technically this could be a relatively simple modification: the dropdown feature used for the "user" item applies to any item that has a "children" array, so one option would be adding that for the edit link. Haven't tested this yet, so not entirely sure, but that's one option at least 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Like to see how the module is growing!

There is a little mistake with the logo in the uikit theme.

And the order of the elements i added to "Items displayed in the admin bar" is not adopting the right way.

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, tires said:

There is a little mistake with the logo in the uikit theme.

Could you clarify this a bit, what kind of mistake are you seeing? So far I haven't noticed anything wrong here, so it might be browser-dependent, or perhaps even site-dependent (Admin Bar is affected by site styles as well, so there's always a chance for that).

Please let me know what browser you're using, how it behaves – and if possible, a screenshot would be really helpful too 👍

8 hours ago, tires said:

And the order of the elements i added to "Items displayed in the admin bar" is not adopting the right way.

You mean when you add items via config settings? The order there doesn't actually affect the order of items in the Admin Bar – at least yet. That's something I have on my todo list, but not sure yet when I'll get to it 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Here is what i see (Firefox, Windows 10):

adminbar-2.2.1.thumb.png.65bf8bc2fae48d01d923f8d85227144f.png

 

16 hours ago, teppo said:

You mean when you add items via config settings? The order there doesn't actually affect the order of items in the Admin Bar – at least yet. That's something I have on my todo list, but not sure yet when I'll get to it 🙂

Yes, that is what i meant.
I am looking forward to this feature.

  • Like 1

Share this post


Link to post
Share on other sites
On 8/14/2019 at 12:22 AM, tires said:

Here is what i see (Firefox, Windows 10):

adminbar-2.2.1.thumb.png.65bf8bc2fae48d01d923f8d85227144f.png

Thanks – this should now be fixed in the latest version (2.2.2).

  • Like 2

Share this post


Link to post
Share on other sites

@teppo I just installed the module but noticed all links are anchor tags, which is a bit problematic since these links can be triggered involuntarily by scripts or browsers prefetches. When combined with frontend link preloaders (e.g. InstantClick) or browser prefetching (e.g. Google Chrome Page Prefetch), this results in newly-created orphan pages or mystery logouts. Is there a way the module can be updated to use buttons instead? This would also make it work better with libraries like Turbolinks or Barba.js which intercept link clicks to load them via AJAX and switch out the response body.

I'd gladly create my own theme to do that, but figure this is also a security issue, so it might be best to tackle this at the root level 🌝

  • Like 1

Share this post


Link to post
Share on other sites
13 hours ago, d'Hinnisdaël said:

@teppo I just installed the module but noticed all links are anchor tags, which is a bit problematic since these links can be triggered involuntarily by scripts or browsers prefetches. When combined with frontend link preloaders (e.g. InstantClick) or browser prefetching (e.g. Google Chrome Page Prefetch), this results in newly-created orphan pages or mystery logouts. Is there a way the module can be updated to use buttons instead?

Thanks for the feedback!

Replacing <a> tags with buttons was originally on my list, but I've been pushing it back as there are some additional considerations here:

  • There are some "proper links" (such as the admin link) that should remain that way. As such, this wouldn't apply to all links automatically.
  • When the modal ("slide overlay" in module settings) mode is disabled, almost every item should be a regular link – except for browse, which technically shouldn't do anything there, as in that case it's just an indicator of your "current state".
  • Admin Bar should work regardless of JavaScript. This makes it more robust, and as such more accessible.

That last point isn't an argument against using buttons, just something to keep in mind when making changes: everything should remain functional regardless, which could mean links by default (when JS isn't available, or working as expected) and buttons otherwise. Since default styling is now based on BEM, it should make this easier in some respects, though; technically what element is used shouldn't matter anyway.

I don't actually see (m)any notable issues in the current behaviour. None of the built-in Admin Bar features will create any content without user actually submitting a form – and I'd be very surprised if a plugin did that on itself. The logout link is problematic though, you're absolutely right on that one – I've added this on my todo list, but not entirely sure yet how to handle it.

I'm not familiar with Turbolinks, but the way Barba.js usually works is that you define a container, which you then switch with new content. I'm not particularly experienced in this regard, but to my best understanding you wouldn't usually define your entire <body> element as a container, and since AdminBar attempts to place itself as the last element right before </body> closing tag, normally this shouldn't be an issue – though again, this is just based on my (quite likely lacking) understanding of such libraries 🙂

  • Like 2

Share this post


Link to post
Share on other sites

@teppo Those are some good points.

I agree the admin link itself and the edit link should stay anchor tags. Create, browse and logout, however, aren't semantically speaking links since they potentially have side effects (create, logout) or only trigger module JS (browse).

Quote

None of the built-in Admin Bar features will create any content without user actually submitting a form – and I'd be very surprised if a plugin did that on itself.

There is one case that will create pages by merely following a link: when a template is configured to use the »Name format for children« setting in order to skip the page-add step. In that case, a new empty page is created every time the link is opened. I use that setting on most templates, that's probably why I noticed.

Quote

The logout link is problematic though, you're absolutely right on that one – I've added this on my todo list, but not entirely sure yet how to handle it.

The logout could be implemented using just a form and a submit button, using the form action for the logout URL. Not sure if ProcessWire currently supports custom redirect URIs after logout or if you might have to hook into the logout process for that.

Quote

I'm not familiar with Turbolinks, but the way Barba.js usually works is that you define a container, which you then switch with new content. I'm not particularly experienced in this regard, but to my best understanding you wouldn't usually define your entire <body> element as a container.

Turbolinks in particular switches out the whole body, but the problem here is that since there's no actual reload, stylesheets and scripts stay active on the page, so you mostly need to make sure that you don't cross between frontend and backend with any of these libraries, whatever part of the HTML they switch out.

I've found a hacky solution by canceling any AJAX page visits if the URL matches the ProcessWire admin URL, but that means the frontend code needs to have a 3rd-party backend module in mind, which feels wrong.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
29 minutes ago, d'Hinnisdaël said:

I agree the admin link itself and the edit link should stay anchor tags. Create, browse and logout, however, aren't semantically speaking links since they potentially have side effects (create, logout) or only trigger module JS (browse).

There is one case that will create pages by merely following a link: when a template is configured to use the »Name format for children« setting in order to skip the page-add step. In that case, a new empty page is created every time the link is opened. I use that setting on most templates, that's probably why I noticed.

The logout could be implemented using just a form and a submit button, using the form action for the logout URL. Not sure if ProcessWire currently supports custom redirect URIs after logout or if you might have to hook into the logout process for that.

You're right that browse isn't really a link – that's definitely one that shouldn't be represented by <a> tag 👍

Logout is a border case: technically it can be a link, just like it is right now, but you're right that it probably shouldn't be. On the other hand even changing it to a form isn't, in my opinion, quite enough – it should also provide and validate some sort of nonce/token, just to be sure that it can't be abused. There's no redirect after logout at the moment either, so that's not a major problem. Anyway, I'll figure something out for the next minor release of the module.

Create is one of the cases where a link usually makes sense: it should be a link to the "new page" view in Admin in case the modal mode is disabled or JavaScript is for whatever reason out of equation. That being said, I've almost never used the "name format" option, so I didn't even think of that – that behaviour is indeed problematic and needs to be addressed somehow 🙂

29 minutes ago, d'Hinnisdaël said:

Turbolinks in particular switches out the whole body, but the problem here is that since there's no actual reload, stylesheets and scripts stay active on the page, so you mostly need to make sure that you don't cross between frontend and backend with any of these libraries, whatever part of the HTML they switch out.

I've found a hacky solution by canceling any AJAX page visits if the URL matches the ProcessWire admin URL, but that means the frontend code needs to have a 3rd-party backend module in mind, which feels wrong.

It just occurred to me that my earlier explanation was flawed 😞

If you reload, say, just the <main> element within your <body>, and Admin Bar remains as-is, the links/buttons there will point to the wrong page. As such using such plugins you probably would need to reload Admin Bar as well. I could add support for modifying target/parent IDs with JavaScript, but that would still require extra steps for the developer anyway. Also thought about using URL in this case, but that wouldn't help, as Admin Bar can't know for sure if you're using "real" URLs or some custom format (via URL segments, History API, or something else.)

Currently I'm thinking that an option for reloading / re-rendering Admin Bar via JavaScript might actually be the best option here: in most situations the module would work right out-of-the-box, but if you do use some sort of front-end routing / transition code, you could somehow tell it to update. Not a perfect solution, so any suggestions are welcome.

--

By the way, if – and only if – it turns out that one/some links can't be easily switched to buttons without sacrificing something else, do you know if role="button" would help at all?

I wouldn't use that unless I really have to (reinventing <button> with ARIA attributes is almost always just plain dumb), but this might be one of those cases where it's actually the most sensible approach – it would be an improvement in terms of accessibility, but I've no idea if it would help with preload/prefetch/etc. features 🙂

  • Like 1

Share this post


Link to post
Share on other sites
Quote

Currently I'm thinking that an option for reloading / re-rendering Admin Bar via JavaScript might actually be the best option here: in most situations the module would work right out-of-the-box, but if you do use some sort of front-end routing / transition code, you could somehow tell it to update. Not a perfect solution, so any suggestions are welcome.

You're right in that it's nearly impossible to tell which page to edit just from the URL. I think the only reliable way of getting the correct edit link is to render the admin bar server-side using wire('page'). No need to make it overly complex, I guess, by going the JS route. If somebody decides to do partial content replacement in their frontend, I feel like that's just something they have to take care of themselves by including the admin bar in the list of replaceable containers.

The more I think about it, the more I feel like my case applies to that rule as well. If I want the links to force a full reload instead of a replacement, I need to configure my frontend accordingly.

My only remaining gripe is probably the logout button that shouldn't be an anchor 🤡

Quote

By the way, if – and only if – it turns out that one/some links can't be easily switched to buttons without sacrificing something else, do you know if role="button" would help at all?

As far as I know, it wouldn't make a difference since most libraries don't care too much about accessibility and tend to define their own cancellation methods (data-no-turbolinks="true", etc.).

 

  • Like 1

Share this post


Link to post
Share on other sites

First off all... I stumbled across this by accident and didn't follow the whole conversation... more or less... but as far as I understand the Adminbar (module) is only available to those who are logged in. So why bother with any libraries, browser extensions and such that (in most cases) only apply to those who aren't logged in?

There are many modules that behave differently when compared to logged in users and guests.

Sorry if I miss an important point here!

Share this post


Link to post
Share on other sites
9 hours ago, wbmnfktr said:

First off all... I stumbled across this by accident and didn't follow the whole conversation... more or less... but as far as I understand the Adminbar (module) is only available to those who are logged in. So why bother with any libraries, browser extensions and such that (in most cases) only apply to those who aren't logged in?

You're correct that AdminBar only applies to users who are logged in. There's no "guest user" when it comes to AdminBar – only superusers and users with the "adminbar" permission will see anything out of the ordinary. Regardless, since AdminBar outputs features visible on the front-end, it's very much connected with everything else happening there.

What you're missing here is that being logged in won't disable those browser extensions or nullify the effects of third party libraries – so it's not true that those features would only apply to users who aren't logged in. As such, it's very important that admin bar is as "tolerant" as possible, so that it won't break or cause new problems if you decide to implement a new JavaScript library on your site (or enable a browser feature/plugin).

  • Like 2

Share this post


Link to post
Share on other sites

Good morning!

AdminBar 2.3.0 was just released. Here's the changelog for this version:

## [2.3.0] - 2019-08-29

### Added
- Gravatar image support for the "user" item in Admin Bar.
- Support for sorting Admin Bar items manually with the AsmSelect field in module config.
- A changelog file.

### Changed
- Protect logout link from accidental clicks (script or otherwise) by converting simple link to a logout form.
- When modal window is opened, hide children and view tabs with CSS first in order to prevent flashing content.

Due to the manual sorting feature mentioned above there was a change in the data structure, so note that if you're already running AdminBar and have modified the visible items in the bar, you'll need to reconfigure those. This was the easiest way I could figure out to achieve free sorting feature:

233472490_Screenshot2019-08-29at7_30_12.thumb.png.49d1f7522ffd39cb954bbfc6f2c32dde.png

Minor note: currently it's possible to add the same item to both left and right columns. I didn't see a reason to specifically prevent this, so it's kind of a feature – though not sure if that's something you should ever do from a UI/UX perspective 😅

  • Like 6

Share this post


Link to post
Share on other sites

AdminBar 2.4.0 is out and adds support for the "data-adminbar-adjust" attribute. The idea here is to automatically modify (or adjust) certain CSS properties whenever the height of the Admin Bar is recalculated. Note: AdminBar already automatically adds "padding-top: [Admin Bar height in px]" to the <html> element, so this feature mainly applies to elements with "position: fixed".

Assuming that Admin Bar is displayed and is 100px tall at the moment, the following markup...

<div data-adminbar-adjust="top max-height"></div>

... would result in this:

<div style="top: 100px; max-height: calc(100% - 100px);" data-adminbar-adjust="top max-height"></div>

Thanks to @Fokke for the idea 🙂

  • Like 4

Share this post


Link to post
Share on other sites

This module is great!
It would be nice if there was an option to stay on the edit view after saving a page. Currently the module redirects to the browse view.
I had some clients complaining about the redirect as they have to edit long pages and save a lot and than have to constantly click edit again..
 

  • Like 1

Share this post


Link to post
Share on other sites

I found a bug when using this module on a page with a repeater matrix field.
After adding a new page from the adminbar, the module redirects to the repeater page that lives under admin->repeaters->repeater-field-name->page instead of the real parent page. A message is shown "This page has no process assigned". However the page gets created under the correct parent page. So just the redirect is wrong. This only happens with the modal option.
Can someone confirm this?

 

Share this post


Link to post
Share on other sites
On 9/30/2019 at 8:21 PM, jploch said:

It would be nice if there was an option to stay on the edit view after saving a page. Currently the module redirects to the browse view.
I had some clients complaining about the redirect as they have to edit long pages and save a lot and than have to constantly click edit again..

I realise that this is a rather old request, but I've just added a config setting for this. It's available as of AdminBar 2.5.0 🙂

On 10/8/2019 at 1:24 PM, jploch said:

I found a bug when using this module on a page with a repeater matrix field.
After adding a new page from the adminbar, the module redirects to the repeater page that lives under admin->repeaters->repeater-field-name->page instead of the real parent page. A message is shown "This page has no process assigned". However the page gets created under the correct parent page. So just the redirect is wrong. This only happens with the modal option.
Can someone confirm this?

So far I've been unable to reproduce this issue. There's a check for RepeaterPage, in which case it should be skipped for this sort of purpose, and since RepeaterMatrixPage extends RepeaterPage that should kick in here as well. Please let me know if this still occurs, though, and I'll be happy to take a closer look!

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for a great module.

Perhaps this is out of the scope for this module, but I will mention it anyway. I think it would be great addition to this module, if it were possible to add any page from the page-tree to the left or right column in the admin-bar. One use-case for this could be to give the user access to some settings-page (e.g. a settings-factory page).

Thanks!

Share this post


Link to post
Share on other sites

Hey @eydun! While this could indeed be a potential addition at some point (not making any promises, but will keep this in mind), it's also already doable with a bit of code: if you hook after getItems(), you can add new items to the returned array 🙂

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By teppo
      Needed a really simple solution to embed audio files within page content and couldn't find a module for that, so here we go. Textformatter Audio Embed works a bit like Textformatter Video Embed, converting this:
      <p>https://www.domain.tld/path/to/file.mp3</p> Into this:
      <audio controls class="TextformatterAudioEmbed"> <source src="https://www.domain.tld/path/to/file.mp3" type="audio/mpeg"> </audio> The audio element has pretty good browser support, so quite often this should be enough to get things rolling 🙂
      GitHub repository: https://github.com/teppokoivula/TextformatterAudioEmbed Modules directory: https://modules.processwire.com/modules/textformatter-audio-embed/
    • By Richard Jedlička
      Tense    
      Tense (Test ENvironment Setup & Execution) is a command-line tool to easily run tests agains multiple versions of ProcessWire CMF.
      Are you building a module, or a template and you need to make sure it works in all supported ProcessWire versions? Then Tense is exactly what you need. Write the tests in any testing framework, tell Tense which ProcessWire versions you are interested in and it will do the rest for you.

      See example or see usage in a real project.
      How to use?
      1. Install it: 
      composer global require uiii/tense 2. Create tense.yml config:
      tense init 3. Run it:
      tense run  
      For detailed instructions see Github page: https://github.com/uiii/tense
       
      This is made possible thanks to the great wireshell tool by @justb3a, @marcus and others.
       
      What do you think about it? Do you find it useful? Do you have some idea? Did you find some bug? Tell me you opinion. Write it here or in the issue tracker.
    • By Chris Bennett
      Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction.
      I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life 😉

      Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields.
      Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method.

      InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database.
      Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck.
      Undoubtedly not helped by me not knowing enough.

      Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen.
      If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark.
       
      public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }  
    • By Sebi
      Since it's featured in ProcessWire Weekly #310, now is the time to make it official:
      Here is Twack!
      I really like the following introduction from ProcessWire Weekly, so I hope it is ok if I use it here, too. Look at the project's README for more details!
      Twack is a new — or rather newish — third party module for ProcessWire that provides support for reusable components in an Angular-inspired way. Twack is implemented as an installable module, and a collection of helper and base classes. Key concepts introduced by this module are:
      Components, which have separate views and controllers. Views are simple PHP files that handle the output for the component, whereas controllers extend the TwackComponent base class and provide additional data handling capabilities. Services, which are singletons that provide a shared service where components can request data. The README for Twack uses a NewsService, which returns data related to news items, as an example of a service. Twack components are designed for reusability and encapsulating a set of features for easy maintainability, can handle hierarchical or recursive use (child components), and are simple to integrate with an existing site — even when said site wasn't originally developed with Twack.
      A very basic Twack component view could look something like this:
      <?php namespace ProcessWire; ?> <h1>Hello World!</h1> And here's how you could render it via the API:
      <?php namespace Processwire; $twack = $modules->get('Twack'); $hello = $twack->getNewComponent('HelloWorld'); ?> <html> <head> <title>Hello World</title> </head> <body> <?= $hello->render() ?> </body> </html> Now, just to add a bit more context, here's a simple component controller:
      <?php namespace ProcessWire; class HelloWorld extends TwackComponent { public function __construct($args) { parent::__construct($args); $this->title = 'Hello World!'; if(isset($args['title'])) { $this->title = $args['title']; } } } As you can see, there's not a whole lot new stuff to learn here if you'd like to give Twack a try in one of your projects. The Twack README provides a really informative and easy to follow introduction to all the key concepts (as well as some additional examples) so be sure to check that out before getting started. 
      Twack is in development for several years and I use it for every new project I build. Also integrated is an easy to handle workflow to make outputs as JSON, so it can be used to build responses for a REST-api as well. I will work that out in one section in the readme as well. 
      If you want to see the module in an actual project, I have published the code of www.musical-fabrik.de in a repository. It runs completely with Twack and has an app-endpoint with ajax-output as well.
      I really look forward to hear, what you think of Twack🥳!
      Features Installation Usage Quickstart: Creating a component Naming conventions & component variants Component Parameters directory page parameters viewname Asset handling Services Named components Global components Ajax-Output Configuration Versioning License Changelog
    • By Robin S
      Page Reference Default Value
      Most ProcessWire core inputfield types that can be used with a Page Reference field support a "Default value" setting. This module extends support for default values to the following core inputfield types:
      Page List Select Page List Select Multiple Page Autocomplete (single and multiple) Seeing as these inputfield types only support the selection of pages a Page List Select / Page List Select Multiple is used for defining the default value instead of the Text / Textarea field used by the core for other inputfield types. This makes defining a default value a bit more user-friendly.
      Note that as per the core "Default value" setting, the Page Reference field must be set to "required" in order for the default value to be used.
      Screenshot

       
      https://github.com/Toutouwai/PageReferenceDefaultValue
      https://modules.processwire.com/modules/page-reference-default-value/
×
×
  • Create New...