Jump to content
MarkE

Admin modal in front end

Recommended Posts

This post is related to 

but is a different way of tackling the problem.

The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:

'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js'
'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js'
'wire/modules/Jquery/JqueryCore/JqueryCore.js'
'wire/modules/Jquery/JqueryUI/JqueryUI.js'

Any ideas what else I need, or have I got hold of the wrong end of the stick?

Share this post


Link to post
Share on other sites

I see some more files which are loaded in the backend:

jquery-ui-wire.PNG.b19bfb6845c62d59813faf9a5855aec3.PNG

Share this post


Link to post
Share on other sites

Am I the only one preferring panels a LOT over modals? 😐 

Share this post


Link to post
Share on other sites

 

1 hour ago, bernhard said:

Am I the only one preferring panels a LOT over modals? 😐 

Maybe, maybe not. If I could do an admin panel in the front end then I might be able to have an opinion 😉

 

Share this post


Link to post
Share on other sites

Well, whaddya know? Replace 'modal' by 'panel' and it works ... on a PC. But the iPad scrolling issue still persists (scrolls the background rather than the panel).

Share this post


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

But the iPad scrolling issue still persists

Actually this seems to be a problem with the admin theme generally - for example, the tree panel in the uikit theme does not scroll on an iPad either. So looks like a bug. 

Share this post


Link to post
Share on other sites

Could you maybe create a screencast of this issue and report it on github? 🙂

  • Like 1

Share this post


Link to post
Share on other sites

If you load an admin page in a modal or panel from the front-end then there's not really any special PW magic there - it's just an iframe. So you don't have to use a JqueryUI modal or panel just because the PW admin does - you can use any JS modal library that supports iframes. There are a bazillion out there so there's bound to be something that doesn't cause this scrolling issue you're describing.

BTW I can confirm the tree panel scrolling issue on iPad - please do report it.

  • Like 1

Share this post


Link to post
Share on other sites

@Robin S there are lots of modal libraries, but the only reliable that I've found for including admin pages (iframes, html content, videos etc) in a modal is http://fancyapps.com/fancybox/3/ (and maybe magnific popup).

What I've not found is a library that makes it easy to create panels just like the pw admin does. Where one can simply add class="pw-panel" and it loads in an iframe, sliding in from left or right, being resizable, hideable, reloadable etc...

  • Like 1

Share this post


Link to post
Share on other sites
26 minutes ago, Robin S said:

use any JS modal library that supports iframes

Parallel to the approach I described above, I have also tried uikit's modal with an embedded iframe. This works adequately (and fixes the iPad issue with uk-overflow-auto), but there are a couple of snags - no doubt due to my incompetence:

  1. I can't work out how to make the modal/iframe height match the height of the embedded admin page - I can set the iframe width to 100%, but have to set a "hard" pixel height of, say 800, which may then leave whitespace for a small page.
  2. Because the target page for the iframe can vary (a range of pages may be edited), multiple modals/iframes are created via a loop (with toggle ids keyed to page ids). These then take  about 15-20 seconds to load, which is not really acceptable. No doubt there is some clever way of avoiding this using jQuery, but I haven't worked it out yet.

I will try some of the other suggestions as well. I also tried using the FEEL module, but that has the iPad problem too - see 

As mentioned there, I am not able to debug an iPad because I don't have a Mac. Similarly, @bernhard, I have no idea how to do a screencast on an iPad, but I can report the bug with a text description.

 

Share this post


Link to post
Share on other sites
3 minutes ago, MarkE said:

Similarly, @bernhard, I have no idea how to do a screencast on an iPad, but I can report the bug with a text description.

Well, just take a video with your phone 😉 

Share this post


Link to post
Share on other sites

Fancybox works well on Windows and iOS. I have built a small module around it (a bit like a cut-down FEEL).

Share this post


Link to post
Share on other sites
2 hours ago, webhoes said:

did you get this working without giving user page-edit rights?

Obviously the user needs page-edit rights for the page in question. My approach to this was to write a hook after User::hasPagePermission which only gives them page-edit / page-add permission for the specific pages to which they are allowed access (i.e. in my app, their own membership records). If they try and access any other pages (e.g. directly in a browser, assuming they know the page-id or name, as the page in fancybox has modal=1, so no menu), they get a "You don't have access to edit" message.

Share this post


Link to post
Share on other sites

I made a similar something, but it increased the pageload by 3 seconds.  This is too much.

Do you give the user temporarily page-edits upon granted request of that page?

Share this post


Link to post
Share on other sites

The pageload is about 3 seconds, but the hook doesn't seem to affect it. Because fancybox loads almost instantly and displays a rotating wheel, I don't think the wait is a problem.

48 minutes ago, webhoes said:

Do you give the user temporarily page-edits upon granted request of that page?

The module checks page-editable before rendering. The hook then adds the permission.

Share this post


Link to post
Share on other sites

Interesting. Are you willing to share you module? I have not been able to get a secure setup myself.

The pageload in my case is my security setup. I check for referenced users from a parent page or parent parent page. This is really time consuming.

Share this post


Link to post
Share on other sites

The module can be found at https://github.com/MetaTunes/AdminInModal

Use at your own risk!

The hook is specific to my app, but I hope the following gives the general idea:

wire()->addHookAfter('User::hasPagePermission', function(HookEvent $event) {
    // Get the object the event occurred on, if needed
    $user = $event->object;

    // An 'after' hook can retrieve and/or modify the return value
    $return = $event->return;

    // Get values of arguments sent to hook (if needed)
    $permission = $event->arguments(0);
    $p = $event->arguments(1);

    /* Your code here, perhaps modifying the return value */
    // Is it a page we need to customise access for?
    $templates = ['Membership', 'Member', 'Profile', 'Subscription', 'Payment', 'MemberShop', 'Booking', 'NewsItem'];
    $permissions = ['page-edit', 'page-add'];
    if ($p and in_array($p->template, $templates) and $permission and in_array($permission, $permissions)) {
        // Get the member-user
        $currentUser = $this->users->getCurrentUser();
        if ($currentUser and $currentUser->isLoggedin()) {
            if ($currentUser->hasRole('member')) {
                $email = $currentUser->email;
                $memberPage = $this->pages->get("has_parent=/memberships/, template=Member, email=$email");
                if ($currentUser->memberOnly) $return = false; // Member-only users can only access pages as defined below
                if ($memberPage->id) {
                    $membershipPage = $memberPage->parent;
                    //... and a lot more like that ($profilePage etc.) ...
                    $editablePages = new PageArray();
                    $addablePages = new PageArray();
                    $editablePages = $editablePages->add($membershipPage)->add($profilePage)->add($siblings)->add($currentSub)->add($shops)->add($subsPaymentPages)->add($draftNewsPages)->add($bookingPages);
                    $addablePages = $addablePages->add($membershipPage)->add($memberPage);  // pages where creation of children is allowed
                    if ($editablePages->has($p) and $permission == 'page-edit') $return = true;
                    if ($addablePages->has($p) and $permission == 'page-add') $return = true;
                }
            }
        }
    }

    // Populate back return value, if you have modified it
    $event->return = $return;
});

 

  • Like 1

Share this post


Link to post
Share on other sites

@MarkE, Thanks! This is a total different I was looking at and mine doesn't work.

I will play with this and see if I can get it to work in my setup.

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 eschoonen
      I'm working on the threaded comments on my website and for this I need to include the comments.js
      When I do this it keeps on giving me the "Uncaught ReferenceRrror: jQuery is not defined". Whatever I do it keeps giving me this error message.
      It's the last javascript file that I load in. So how do I fix it?
    • By awebcreature
      Hello there
      I need a field with realtime percent calculation (without page save)  with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! 
      Thanks in advance! 
       
    • By Matze
      Hi there,
      I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery.
      Anything seems to work so far, but the !$config->ajax seems to be ignored.
      To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.)
      The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function  ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. 
      So - any help with this, what am i doing wrong?

      Thanks a lot - Matze
      <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) {   //loadJquery('');   loadVanilla('');   event.preventDefault() }); function loadVanilla(url) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)');     }   };   xhttp.open("POST", "", true);   xhttp.send(); }   function loadJquery(url){ // Load content   $.ajax({       type: "POST",       url: url,       data: { ajax: true },       success: function(data,status){         pageData = data;       }   }).done(function(){ // when finished and successful     document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)';   }); } </script> <?php endif; // end if not ajax ?>  
    • By rareyush
      hi everyone
       
      I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.
      i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this
    • By pwuser1
      Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support? 
×
×
  • Create New...