Jump to content
apeisa

Fredi - friendly frontend editing

Recommended Posts

When I try to fill it with images using fredi on the frontend the edit modal pops up as expected and the "choose file" button for the field brings up my file explorer.  When I choose an image you can see that the image is trying to load but nothing happens.  

I'm not sure I totally understand the issue and might need a little screengrab/video to see exactly what you are talking about. But any javascript errors occurring in your JS console? It sounds like there would be two modals on top of each other here, and wondering if the targets are getting mixed up. 

Share this post


Link to post
Share on other sites

Ryan, for some reason images / files inside repeater doesn't work in Fredi. I have (blindly) added setTrackChanges(true) in different places, but without any luck. I recorded screencast that should open this issue better: 

(video works now).

I am pretty sure that the problem isn't JS side (console is silent, response seems to be ok). Problematic code is here (it works without repeaters just fine): https://github.com/apeisa/Fredi/blob/master/FrediProcess.module#L54

Share this post


Link to post
Share on other sites

Thanks for the screencast Antti. Your cat sounds exactly like mine. :) This definitely helps clarify for me what the issue is. On the other hand, I'm still at a loss to know what is causing it. It's interesting to see the responses all appear successful and no indication of errors. I hope to experiment more with this soon. Correct me if I'm wrong, but doesn't it seem like the bit of code starting here is where it's getting stuck?

  • Like 1

Share this post


Link to post
Share on other sites

Your cat sounds exactly like mine. :) This definitely helps clarify for me what the issue is. 

You understand their language? My cat understand code? Joking aside, we actually have four cats and I have no clue which one is performing there...

I debugged this little more. The responses are actually totally wrong: it responses with page save instead of field save. This is what I get when saving in normal admin:

[
    {
        "error": false,
        "message": "Added file: desert.jpg",
        "file": "/frontendedit/site/assets/files/1037/desert.jpg",
        "size": 845941,
        "markup": "\n\t<li class='InputfieldFile InputfieldImage ui-widget'>\n\t\t<p class='InputfieldFileInfo ui-widget ui-widget-header'>\n\t\t\t<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>\n\t\t\t<span class='InputfieldFileName'>desert.jpg</span> \n\t\t\t<span class='InputfieldFileStats'>• 826 kB • 1024x768</span> \n\t\t\t<label class='InputfieldFileDelete'><input type='checkbox' name='delete_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' value='1' /><span class='ui-icon ui-icon-trash'>Delete</span></label>\n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveBottom' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-s'></span></a> \n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveTop' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-n'></span></a> \n\t\t</p>\n\t\t<p class='InputfieldFileData ui-widget ui-widget-content'>\n\t\t\t<a class='InputfieldFileLink' target='_blank' href='/frontendedit/site/assets/files/1037/desert.jpg'><img src='/frontendedit/site/assets/files/1037/desert.0x100.jpg' alt='desert.jpg' /></a>\n\t\t\t<label class='InputfieldFileTags'><span class='detail'>Tags</span><input type='text' name='tags_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' id='tags_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' value='' /></label><label class='InputfieldFileDescription'><span class='detail'>Description</span><input type='text' name='description_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' id='description_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' value='' /></label>\n\t\t\t<input class='InputfieldFileSort' type='text' name='sort_images_2057dd75f2e9f7b52e3dda4ccd0ea4a2' value='1' />\n\t\t</p>\n\t</li>",
        "replace": false
    }
]

And this is what I get from ProcessFredi:

{
    "error": false,
    "message": "Saved page '1035' multiple fields"
}

So it seems that my code is too eager or something. This is where I believe the problems are: https://github.com/apeisa/Fredi/blob/master/FrediProcess.module#L54

Share this post


Link to post
Share on other sites
You understand their language? My cat understand code? Joking aside, we actually have four cats and I have no clue which one is performing there...

We have 3 cats, and two of them are into singing. Your cat sounds like our cat Sasha. 

I debugged this little more. The responses are actually totally wrong: it responses with page save instead of field save. This is what I get when saving in normal admin:

I'm thinking the gateway if() might be here. That $numFields variable must be greater than 1 since your JSON response says "multiple fields". Yet I think you want it to be 1. And it looks that could happen if HTTP_X_FIELDNAME wasn't set for one reason or another, here

I don't understand the technical details of how Fredi works yet (though hoping to learn soon), but I do wonder if this could be solved by just sending the ajax post request to ProcessPageEdit only, rather than Fredi? The reason is that it seems like if something is hooking into ProcessPageEdit, that Fredi doesn't call, wouldn't get executed. An example is this line in FieldtypeRepeater, which I think is attaching a hook that doesn't get executed via Fredi. 

One other thing, unrelated, is that it looks like these lines should be moved above the ajax section in your execute() function?

// Check if there is not such a page found
if ( ! $this->pageContext->id) throw new WireException("Page not found");

// Check that this page is editable by current user
if ( ! $this->pageContext->editable()) throw new WireException("You don't have right to edit this page")

Share this post


Link to post
Share on other sites

Yes, that's it. If I change fredi form to use /page/edit/ directly, the image field inside repeater works. But normal saving fails, and I think because the forms are different, so the processing doesn't go right. I tried to get them to same structure by getting page edit form and then removing the fields that aren't needed. But cannot get the removing going.

I have changed the renderFieldsForm to this:

public function renderFieldsForm() {
	$this->fieldsArray = explode("|", $this->fields);
		
	foreach($this->fieldsArray as $fieldName) {
		// Check if page has the field that wants to be edited
		if ( ! $this->pageContext->fields->has($fieldName)) throw new WireException("There is no field $fieldName on editable page");
			
		// Check if the current user has rights to edit that field
		if ( ! $this->pageContext->editable($fieldName)) throw new WireException("You don't have rights to edit field $fieldName");
	}

	$form = $this->modules->get('InputfieldForm');
	$form = $this->pageEdit->buildForm($form);
	$form->attr("action", "/processwire/page/edit/?id=$this->pageId&modal=1"); //TODO: url is hardcoded now..
	
	// Build the form (loop fields and add their respected inputfields)
	foreach($form->fields as &$field) {
		if ( ! in_array($field->name, $this->fieldsArray)) {
			$form->remove($field); // Script goes here, but it doesn't remove the field
		}
	}
	
	return $form->render();
}

I don't understand why, but $form->remove($field) isn't working.

Share this post


Link to post
Share on other sites

Hi Antti,

So I have Fredi installed, the header and JS code in place. My template edit access is set to admin as well as another role. I have a user setup with that role enabled. Can I still use Fredi for that non-superuser user?

Regards

Marty

Share this post


Link to post
Share on other sites

Marty, I'm sure Antti will confirm, but the basic tenet is that if the user has the correct permission(s) to edit in the backend then they can edit in the frontend with Fredi. I use Fredi on one site with several user types and all permissions apply across backend and Fredi.

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

I have just installed Fredi and am getting the following error when the edit window is displayed:

Notice: Undefined variable: out in \site\modules\Fredi\FrediProcess.module on line 116

$submit = $this->modules->get('InputfieldSubmit');        $form->add($submit);
        
        // If form was submitted, process it
        if (count($_POST)) return $this->processInput($form);
        
        $out .= $form->render();  // Line 112
        
        
        return $out;
 

Share this post


Link to post
Share on other sites

It's just a notice. To fix this right now you can change it easily:

$out = $form->render();

Apeisa will propably fix this in his repo.

Share this post


Link to post
Share on other sites

It's just a notice. To fix this right now you can change it easily:

$out = $form->render();

Apeisa will propably fix this in his repo.

Thanks  :-)

Share this post


Link to post
Share on other sites

Hey Apeisa, just took this for a test run and she rocks! I have developed something very similar, but I have to say your effort is just quite a bit nicer. I'll have to pull it apart to see how do did it, and learn some stuff at the same time no doubt.

Awesome job, frontend editing is what I loved from modX, PW just gets better and it feels complete now  :rolleyes:

I see you were looking at adding a $fredi->newPage method, is this still on the cards? This would be the ultimate. Thanks for the awesome module :rolleyes:

Edit: Hey, just noticed mention of work-in-progress on $fredi->newPage in another thread, look forward to seeing that.

Share this post


Link to post
Share on other sites

Don't know if anyone else is seeing this or it's something confined to my site, but when I use Fredi with a TinyMCE field and click the insert image icon I get an error: 

TemplateFile: No page specified

 
It works fine in the backend. 

Share this post


Link to post
Share on other sites

Hey Antti,

Does the current version support the "=50" field percentages that you mentioned? I'm using Fredi on the 2.3.5. PW build and I lose the 'edit' link whenever I try to use them. 

Share this post


Link to post
Share on other sites

Marty, that is implemented here, but not yet committed. I will add that soon, since there seems to be lots of interest for Fredi lately.

  • Like 1

Share this post


Link to post
Share on other sites

Ok, got little bit too excited and started building Fredi with Ajax saving & ajax page refresh (instead of the old clumsy submit => post processing => page reload). This is working great already, simplified code a lot and actually fixed the "images don't save inside repeaters" problem too. 

I also changed the code so that you won't be able to define the columns, but those will be inherited from the actual template context. This is great now that Ryan made tweaks along field dependencies so that there won't be "empty" spots at all (if fields doesn't make 100%, then last one in row will get larger). I also believe that even field dependencies will work on Fredi now (not tested yet).

Only problem I am having currently: it seems AjaxSave method doesn't support multilang fields yet? https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module#L1037

I have only two languages: "default" and "test". If I change the default title value and save, that new value will be put on the test title and default will remain old.

  • Like 1

Share this post


Link to post
Share on other sites

Note about ajax save & multilang: it actually save the default language to the langue that user has active. It ignores the others.

Share this post


Link to post
Share on other sites

Just pushed this "ajaxified" stuff on dev-branch: https://github.com/apeisa/Fredi/tree/dev

Hope you guys find time to test it. It feels superfast to use. Probably few bugs here and there, but we will sort those :)

Marty: I decided to leave the FieldName=<Width> syntax all together and it now uses whatever there is for the field on settings (old default was always 100% for each field).

Share this post


Link to post
Share on other sites

Hmm.. it seems repeaters don't work either (images inside repeaters do work, but images/files go different route). I guess that is because of lacking support in ProcessPageEdit::AjaxSave method, but not 100% sure about that.

Share this post


Link to post
Share on other sites

Thanks Marty. That is probably also something that AjaxSave method in core doesn't support, at least yet.

I just pushed new version: I added animation after submit (modal goes small again with spinning wheel), which makes this feel faster than before. Also made some tweaks etc, and this version works great on IE (10 at least, not tested others yet, I don't believe this works in 8, but probably works in 9), Firefox and Chrome.

Hopefully someone of you Mac people can test if it works in Safari too?

Share this post


Link to post
Share on other sites

have you made hard refresh? works great here with chrome. also tested with Android browsers i have and all works.

Share this post


Link to post
Share on other sites

Yeah I did a hard refresh, clear cache, cleared any other modules out and still no go with being able to get past Submit on the modal box.

In Safari (6.0.5) I just get a blank modal box.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-10-18
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




    • By eelkenet
      Hi! I've created a small Inputfield module called InputfieldFloatRange which allows you to use an HTML5 <input type="range" ../> slider as an InputField. I needed something like this for a project where the client needs to be able to tweak this value more based on 'a feeling' than just entering a boring old number. Maybe more people can use this so I'm hereby releasing it into the wild.  
       
      What is it?
      The missing range slider Inputfield for Processwire. 
      What does it do?
      This module extends InputfieldFloat and allows you to use HTML5 range sliders for number fields in your templates.
      It includes a visible and editable value field, to override/tweak the value if required.  
      Features
      Min/max values Precision (number of decimals) Steps (Read more) Manual override of the selected value (will still adhere to the rules above) Usage
      Clone / zip repo Install FieldtypeFloatRange, this automatically installs the Inputfield Create new field of type `Float (range)` or convert an existing `Float`, `Integer` or `Text` field. To render the field's value simply echo `$page->field` Demo
      A field with Min=0, Max=1, Step=0.2, Precision=2

      Field with settings Min=0, Max=200, Step=0.25, Precision=2

       
      Todo
      Make the display-field's size configurable (will use the Input Size field setting)  Hopefully become redundant If it's usable for others I'll add it to the Modules list  
      Changelog
      v002
      - Fix issue where setting the step value to an empty value created problem with validation
      - Make the display-field optional 
      v001
      - Initial release
       
      Thanks!
       
       
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By adrian
      Tracy Debugger for ProcessWire
      The ultimate “swiss army knife” debugging and development tool for the ProcessWire CMF/CMS

       
      Integrates and extends Nette's Tracy debugging tool and adds 35+ custom tools designed for effective ProcessWire debugging and lightning fast development
      The most comprehensive set of instructions and examples is available at: https://adrianbj.github.io/TracyDebugger
      Modules Directory: http://modules.processwire.com/modules/tracy-debugger/
      Github: https://github.com/adrianbj/TracyDebugger
      A big thanks to @tpr for introducing me to Tracy and for the idea for this module and for significant feedback, testing, and feature suggestions.
×
×
  • Create New...